/* ===================== v11 ===================== */
:root{--tt-base:#f4f7ff;--tt-hl:linear-gradient(92deg,#4f8dff 0%,#62a8ff 55%,#8fd3ff 100%);--glow-rim:rgba(214,228,255,.9);--glow-soft:rgba(110,150,255,.28)}
:root[data-theme=light]{--tt-base:#0d1430;--tt-hl:linear-gradient(92deg,#2346e8 0%,#4b52f0 50%,#7b3fe4 100%);--glow-rim:rgba(60,90,220,.75);--glow-soft:rgba(60,90,220,.18)}

/* ---------- Tiêu đề lớn 2 màu (như ảnh mẫu "A little music. / A lot of ideas.") ---------- */
h1.tt2,h2.tt2,.tt2{color:var(--tt-base);font-weight:800;letter-spacing:-.035em}
.tt2 .hl{background:var(--tt-hl);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}
.sec-head h2.tt2,.story h2.tt2,.band h2.tt2{font-weight:800}
.tt-solo{color:var(--tt-base)}

/* ---------- Góc âm nhạc kiểu mẫu ---------- */
.sec-music{padding-top:28px}
.mx{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(26px,4.5vw,56px);border-radius:30px;
  background:radial-gradient(70% 90% at 0% 0%,rgba(59,110,255,.16),transparent 60%),linear-gradient(160deg,#0c1328,#0a0f20 60%,#0b1226);border:1px solid rgba(140,170,255,.12);box-shadow:0 30px 70px -40px rgba(0,0,0,.7)}
:root[data-theme=light] .mx{background:radial-gradient(70% 90% at 0% 0%,rgba(59,110,255,.10),transparent 60%),linear-gradient(160deg,#ffffff,#f3f6ff);border-color:rgba(30,50,120,.10);box-shadow:0 30px 60px -36px rgba(30,50,140,.25)}
.mx-copy h2{margin:0;font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.02}
.mx-copy h2 span{display:block}
.mx-copy p{margin:20px 0 0;max-width:430px;color:var(--muted);font-size:1.02rem;line-height:1.65}
.mx-cta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:26px}
.mx-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:12px;border:1px solid rgba(140,170,255,.18);background:rgba(255,255,255,.04);color:var(--tt-base);font:700 .92rem var(--font-ui);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.mx-cta:hover{background:rgba(255,255,255,.08);border-color:rgba(140,170,255,.4);transform:translateY(-1px)}
.mx-cta .mi{width:17px;height:17px}.mx-arr{opacity:.7;font-weight:700}
:root[data-theme=light] .mx-cta{background:#fff;border-color:rgba(30,50,120,.14);box-shadow:0 6px 16px rgba(30,50,140,.08)}
.mx-card{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:440px;border-radius:20px;overflow:hidden;outline:none;
  background:linear-gradient(180deg,#1b1d23,#141519);border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 60px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05);color:#f2f4f8}
.mx-card:focus-visible{box-shadow:0 0 0 2px #4f8dff,0 30px 60px -30px rgba(0,0,0,.75)}
:root[data-theme=light] .mx-card{background:linear-gradient(180deg,#ffffff,#f7f8fb);border-color:rgba(20,30,70,.08);box-shadow:0 26px 50px -28px rgba(30,50,140,.35);color:#0f1530}
.mx-card.none{grid-template-rows:1fr}
.mx-head{display:grid;grid-template-columns:132px minmax(0,1fr) 56px;gap:18px;align-items:center;padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
:root[data-theme=light] .mx-head{border-bottom-color:rgba(20,30,70,.07)}
.mx-col{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:132px;height:132px;border-radius:10px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.mx-col .mc{width:100%;height:100%;border-radius:0;display:block}
.mx-col .mc img{width:100%;height:100%;object-fit:cover;display:block}
.mx-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.mx-name{font:800 1.32rem/1.2 var(--font-ui);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-art{color:#a2a8b6;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme=light] .mx-art{color:#5d6477}
.mx-saved{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:.8rem;color:#d7dbe4}
:root[data-theme=light] .mx-saved{color:#3a4258}
.mx-saved .mi.ok{width:17px;height:17px;color:#fff}
:root[data-theme=light] .mx-saved .mi.ok{color:#0f1530}
:root[data-theme=light] .mx-saved .mi.ok path{stroke:#fff}
.mx-ctl{display:flex;align-items:center;gap:8px;margin-top:12px}
.mx-ctl .mb{width:30px;height:30px;color:inherit}
.mx-ctl .mb .mi{width:16px;height:16px}
.mx-prog{flex:1;min-width:40px}
.mx-t{font-size:.76rem;color:#a2a8b6;font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.mx-play{width:54px;height:54px;border-radius:50%;border:0;display:grid;place-items:center;background:#fff;color:#0d0f14;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.mx-play:hover{transform:scale(1.07)}.mx-play:active{transform:scale(.95)}
.mx-play .mi{width:22px;height:22px}
:root[data-theme=light] .mx-play{background:#0f1530;color:#fff;box-shadow:0 10px 24px rgba(15,21,48,.25)}
.mx-list{position:relative;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;padding:6px 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}
.mx-in{position:relative}
.mx-hl{position:absolute;left:10px;right:10px;top:0;height:58px;border-radius:12px;background:rgba(255,255,255,.075);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .34s cubic-bezier(.22,1,.36,1);will-change:transform;pointer-events:none}
:root[data-theme=light] .mx-hl{background:rgba(35,70,232,.07);box-shadow:inset 0 0 0 1px rgba(35,70,232,.10)}
.mx-rows{list-style:none;margin:0;padding:0;position:relative}
.mx-row{height:58px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 24px;cursor:pointer;position:relative;transition:opacity .2s}
.mx-n{position:relative;width:22px;height:22px;display:grid;place-items:center;color:#8d93a1;font-size:.86rem;font-variant-numeric:tabular-nums}
.mx-n em{font-style:normal}
.mx-eq{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;gap:2px;padding:4px 2px}
.mx-eq i{width:3px;height:40%;border-radius:2px;background:#4f8dff;animation:mxEq .9s ease-in-out infinite}
.mx-eq i:nth-child(2){animation-delay:-.3s}.mx-eq i:nth-child(3){animation-delay:-.6s}
@keyframes mxEq{0%,100%{height:30%}50%{height:95%}}
.mx-row.live .mx-n em{display:none}.mx-row.live .mx-eq{display:flex}
.mx-rt{min-width:0;display:flex;flex-direction:column;gap:2px}
.mx-rt b{font-size:.95rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-rt small{font-size:.78rem;color:#8d93a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-d{font-size:.82rem;color:#8d93a1;font-variant-numeric:tabular-nums}
.mx-row.now .mx-rt b{color:#5f9bff}
:root[data-theme=light] .mx-row.now .mx-rt b{color:#2346e8}
.mx-row:hover .mx-rt b{text-decoration:underline;text-underline-offset:3px}
.mx-hint{display:block;text-align:center;font-size:.72rem;color:#7d8391;padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.05);transition:color .3s}
:root[data-theme=light] .mx-hint{border-top-color:rgba(20,30,70,.06)}
.mx-card.wheeling .mx-hint{color:#5f9bff}
.mx-empty{display:grid;place-items:center;align-content:center;gap:8px;text-align:center;padding:30px;color:#a2a8b6}
.mx-empty .mi{width:34px;height:34px}
.mx-head.swipe-l .mx-meta{animation:mxSwL .35s cubic-bezier(.2,.8,.2,1)}.mx-head.swipe-r .mx-meta{animation:mxSwR .35s cubic-bezier(.2,.8,.2,1)}
@keyframes mxSwL{from{opacity:.2;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes mxSwR{from{opacity:.2;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media(max-width:900px){.mx{grid-template-columns:1fr}.mx-copy{text-align:left}}
@media(max-width:560px){.mx{padding:22px 16px;border-radius:24px}.mx-card{height:430px}.mx-head{grid-template-columns:88px minmax(0,1fr) 48px;gap:12px;padding:16px 14px 14px}
  .mx-col{width:88px;height:88px}.mx-name{font-size:1.1rem}.mx-play{width:48px;height:48px}.mx-row{padding:0 16px}.mx-hl{left:6px;right:6px}.mx-t{display:none}}
@media(hover:none){.mx-hint{font-size:0}.mx-hint::after{content:"Vuốt ngang phần trên để đổi bài · chạm để phát";font-size:.72rem}}

/* ---------- Thẻ sản phẩm: viền kính phát sáng (như ảnh mẫu), lấp lánh nhỏ dưới thẻ ---------- */
.pc.glow{padding:12px;border-radius:22px;overflow:visible;isolation:isolate;
  background:linear-gradient(180deg,#121a35 0%,#0d1329 100%);border:1px solid rgba(190,210,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 0 22px -6px var(--glow-soft),0 24px 46px -30px rgba(0,0,0,.8);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
:root[data-theme=light] .pc.glow{background:linear-gradient(180deg,#ffffff,#f5f7ff);border-color:rgba(60,90,220,.18);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 18px -8px var(--glow-soft),0 20px 40px -28px rgba(30,50,140,.35)}
/* viền sáng: góc trên-trái và dưới-phải bừng sáng như kính */
.pc-rim{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang,210deg),transparent 0deg,var(--glow-rim) 28deg,transparent 70deg,transparent 180deg,var(--glow-rim) 208deg,transparent 250deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.75;transition:opacity .35s,filter .35s}
@property --ang{syntax:'<angle>';inherits:false;initial-value:210deg}
.pc.glow:hover{transform:translateY(-6px);border-color:rgba(200,220,255,.45);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 34px -4px rgba(110,150,255,.45),0 30px 60px -30px rgba(0,0,0,.85)}
:root[data-theme=light] .pc.glow:hover{border-color:rgba(60,90,220,.38);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 30px -6px rgba(60,90,220,.35),0 26px 50px -28px rgba(30,50,140,.4)}
.pc.glow:hover .pc-rim{opacity:1;filter:drop-shadow(0 0 6px var(--glow-rim));animation:pcSpin 3.2s linear infinite}
@keyframes pcSpin{to{--ang:570deg}}
.pc.glow .pc-media{border-radius:14px}
.pc-frame{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#0b1022;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
:root[data-theme=light] .pc-frame{background:#eef2fb}
.pc-frame .pc-img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pc.glow:hover .pc-frame .pc-img{transform:scale(1.045)}
.pc.glow .pc-title{font-size:1.16rem;font-weight:800;letter-spacing:-.015em;color:var(--tt-base)}
.pc.glow .pc-body{padding:16px 6px 6px}
.pc.glow .pc-go{width:auto;height:40px;padding:0 14px;border-radius:12px;gap:8px;display:inline-flex;align-items:center;font:700 .86rem var(--font-ui);background:rgba(255,255,255,.05);border-color:rgba(190,210,255,.18)}
.pc.glow .pc-go em{font-style:normal}
.pc.sm.glow .pc-go{width:34px;height:34px;padding:0;justify-content:center}
:root[data-theme=light] .pc.glow .pc-go{background:#fff;border-color:rgba(60,90,220,.18)}
.pc.glow:hover .pc-go{background:#fff;color:#0d1430;border-color:transparent}
:root[data-theme=light] .pc.glow:hover .pc-go{background:#0d1430;color:#fff}
/* lấp lánh nhỏ dọc mép dưới (không phủ lên ảnh) */
.pc-sparks{position:absolute;left:14%;right:14%;bottom:-3px;height:8px;pointer-events:none;z-index:3}
.pc-sparks i{position:absolute;bottom:0;left:calc(var(--i) * 19% + 2%);width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(170,200,255,.9);opacity:0;
  animation:pcTw 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * .43s)}
.pc-sparks i:nth-child(even){width:2px;height:2px;bottom:3px}
:root[data-theme=light] .pc-sparks i{background:#5b7bff;box-shadow:0 0 6px 1px rgba(80,110,255,.6)}
@keyframes pcTw{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:.95;transform:scale(1)}60%{opacity:.2;transform:scale(.6)}}
.pc.glow:hover .pc-sparks i{animation-duration:1.4s}
.lite .pc-sparks i{animation:none;opacity:.5}
.lite .pc.glow:hover .pc-rim{animation:none}

/* ---------- Băng chuyền "Sản phẩm mới" ---------- */
.fc-wrap .flex-carousel{height:100%!important}
.flex-carousel{position:relative;width:100%;height:100%;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:auto;outline:none}
.flex-carousel[data-hover=open]{cursor:zoom-in}.flex-carousel[data-hover=close]{cursor:zoom-out}.flex-carousel[data-dragging]{cursor:grabbing}
.flex-carousel:focus-visible{box-shadow:inset 0 0 0 2px rgba(128,128,140,.55)}
.flex-carousel__caption{position:absolute;left:0;right:0;top:calc(50% + var(--flex-carousel-half) * var(--flex-carousel-lift,1) + 22px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;pointer-events:none;text-align:center;animation:fcReveal .9s ease both}
.flex-carousel__title{display:flex;flex-direction:column;align-items:center;max-width:100%;font-size:15px;font-weight:600;line-height:1.35;animation:fcTitle .52s cubic-bezier(.22,1,.36,1)}
.flex-carousel__subtitle{font-weight:500;opacity:.6}
.flex-carousel__count{display:inline-flex;align-items:center;gap:3px;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;opacity:.5;transition:opacity .4s}
.flex-carousel__count[data-hidden]{opacity:0}
.flex-carousel__digits{display:inline-flex}.flex-carousel__digit{display:inline-block;height:1em;overflow:hidden}
.flex-carousel__reel{display:flex;flex-direction:column;transition:transform .6s cubic-bezier(.22,1,.36,1)}.flex-carousel__reel span{height:1em}
.flex-carousel__slash{opacity:.6}
.flex-carousel__live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes fcTitle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fcReveal{from{opacity:0}to{opacity:1}}
.flex-carousel--lite{cursor:auto}
.fc-strip{display:flex;gap:12px;height:62%;margin-top:6%;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 30%;scrollbar-width:none;align-items:center}
.fc-strip::-webkit-scrollbar{display:none}
.fc-item{flex:none;height:100%;margin:0;scroll-snap-align:center;border-radius:14px;overflow:hidden;opacity:.55;transform:scale(.9);transition:opacity .3s,transform .3s}
.fc-item.on{opacity:1;transform:none}.fc-item img{height:100%;width:auto;display:block;pointer-events:none}
@media(max-width:640px){.fc-strip{padding:0 18%}}

/* ---------- Nút viền sáng: dễ nhìn ở cả hai giao diện ---------- */
.specular-button.ag-cta,.ag-cta{font-weight:700;letter-spacing:.005em}
:root:not([data-theme=light]) .specular-button.ag-cta{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px -12px rgba(80,120,255,.55)}
:root[data-theme=light] .specular-button.ag-cta{background:linear-gradient(180deg,#24357e,#0f1a4a)!important;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -12px rgba(30,50,160,.55)}
:root[data-theme=light] .specular-button.ag-cta .specular-button__label{color:#fff}
.specular-button.ag-cta:hover{filter:brightness(1.08)}
:root[data-theme=light] .ag-cta:not(.specular-button){background:linear-gradient(180deg,#24357e,#0f1a4a);color:#fff}

/* ---------- Nút loa (âm thanh hiệu ứng) ---------- */
.icon-btn.snd.muted{opacity:.6}

/* ---------- Trang tài khoản ---------- */
.acc-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:6px 0 18px;padding:22px 24px;border-radius:24px;
  background:radial-gradient(60% 120% at 0% 0%,rgba(79,141,255,.18),transparent 60%),var(--surface);border:1px solid var(--border)}
:root[data-theme=light] .acc-hero{background:radial-gradient(60% 120% at 0% 0%,rgba(35,70,232,.10),transparent 60%),#fff;box-shadow:0 18px 40px -28px rgba(30,50,140,.35)}
.acc-id{display:flex;align-items:center;gap:16px;min-width:0}
.acc-av{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:800 1.6rem var(--font-ui);color:#fff;background:linear-gradient(135deg,#4f8dff,#7b3fe4);box-shadow:0 10px 24px -8px rgba(79,141,255,.6)}
.acc-who{min-width:0}.acc-who h1{margin:0;font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.03em;color:var(--tt-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-who p{margin:4px 0 0;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center;word-break:break-all}
.acc-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.acc-bal{display:flex;flex-direction:column;align-items:flex-end;padding-right:14px;border-right:1px solid var(--border)}
.acc-bal small{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}.acc-bal b{font-size:1.2rem;font-variant-numeric:tabular-nums}
.acc-out{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--err,#ef4444) 40%,transparent);background:color-mix(in srgb,var(--err,#ef4444) 8%,transparent);
  color:var(--err,#ef4444);font:700 .9rem var(--font-ui);cursor:pointer;transition:background .2s,transform .2s}
.acc-out:hover{background:color-mix(in srgb,var(--err,#ef4444) 16%,transparent);transform:translateY(-1px)}
.acc-out-i svg{width:18px;height:18px;display:block}
.acc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.acc-tile{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:16px;border-radius:18px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
.acc-tile:hover{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,#4f8dff 45%,var(--border));box-shadow:0 16px 30px -20px rgba(79,141,255,.6)}
:root[data-theme=light] .acc-tile{background:#fff}
.acc-ti{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,#4f8dff 14%,transparent);color:#5f9bff}
:root[data-theme=light] .acc-ti{color:#2346e8;background:rgba(35,70,232,.08)}
.acc-ti svg{width:21px;height:21px}
.acc-tile b{font-size:1rem}.acc-tile small{color:var(--muted);font-size:.8rem}
.acc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.acc-card{min-width:0;overflow:hidden}.acc-card h3{margin:0 0 4px}
.acc-sess{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.acc-sess:first-of-type{border-top:0}
.acc-sess .grow{min-width:0;display:flex;flex-direction:column}.acc-sess small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}.acc-sess.cur .acc-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
@media(max-width:760px){.acc-tiles{grid-template-columns:minmax(0,1fr)}.acc-grid{grid-template-columns:minmax(0,1fr)}.acc-side{width:100%;justify-content:space-between}.acc-bal{align-items:flex-start;border-right:0}}
.pw-f{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:48px!important}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.pw-eye:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}
.pw-eye svg{width:20px;height:20px}
.pw-eye[aria-pressed=true]{color:#5f9bff}

/* ---------- Ô nhập mã: vừa khung + thành công sáng xanh rồi OK ---------- */
.od-card{overflow:hidden;padding-left:clamp(12px,3.5vw,18px);padding-right:clamp(12px,3.5vw,18px)}
.od-row{width:100%;gap:clamp(5px,1.8vw,10px)}
.od-slot{flex:1 1 0;min-width:0;max-width:var(--slot);width:auto;height:auto;aspect-ratio:52/60}
.od-digit{font-size:clamp(1.1rem,4.6vw,1.5rem)}
.od[data-state=ok] .od-core{animation:odGlow 1.6s ease-in-out .5s infinite;transform:scale(1.04)}
@keyframes odGlow{0%,100%{box-shadow:0 0 0 6px color-mix(in srgb,var(--okc) 16%,transparent),0 0 30px color-mix(in srgb,var(--okc) 40%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--okc) 10%,transparent),0 0 46px color-mix(in srgb,var(--okc) 60%,transparent)}}
/* đang kiểm tra: viền xanh lam chạy quanh → đúng mã: viền khép kín màu xanh lá */
.od[data-state=ok] .od-ring rect{opacity:1;stroke:var(--okc);filter:drop-shadow(0 0 8px var(--okc));stroke-dasharray:1 0;animation:odRingOk .5s ease-out forwards}
@keyframes odRingOk{from{stroke-dasharray:.28 .72;opacity:1}to{stroke-dasharray:1 0;opacity:.0}}
/* tia sáng bung ra quanh thẻ khi thành công (như video) */
.od-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.od-burst i{position:absolute;left:-1.5px;top:-5px;width:3px;height:10px;border-radius:3px;background:var(--okc);box-shadow:0 0 8px var(--okc);opacity:0;transform:rotate(var(--a)) translateY(-30px) scaleY(.4)}
.od[data-state=ok] .od-burst i{animation:odBurst .75s cubic-bezier(.2,.8,.2,1) var(--d) forwards}
.od-burst i:nth-child(even){width:4px;height:4px;top:-2px;left:-2px;border-radius:50%}
@keyframes odBurst{0%{opacity:0;transform:rotate(var(--a)) translateY(-30px) scaleY(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-62px) scaleY(1)}}
/* xấp thẻ: các ô giữ đậm khi chụm lại */
.od[data-state=fan] .od-slot,.od[data-state=stack] .od-slot{box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}

/* ---------- Admin: gắn liên kết tệp bán ---------- */
.seg-tabs{margin:14px 0 8px;font-size:.86rem;color:var(--muted)}.seg-tabs b{color:var(--text)}
.lk-form{display:grid;gap:8px;padding:14px;border:1px dashed var(--border);border-radius:14px}
.lk-url{word-break:break-all;max-width:60ch}
.cat-row{margin-top:22px}
:root[data-theme=light] .mx-prog .rail{background:rgba(15,21,48,.14)}
:root[data-theme=light] .mx-prog .fill,:root[data-theme=light] .mx-prog .knob{background:#0f1530}
.mx-prog .rail{background:rgba(255,255,255,.16)}

/* ---------- Góc âm nhạc: chữ một bên, trình phát kính (phong cách cũ) một bên ---------- */
.mx.glass{grid-template-columns:minmax(0,.82fr) minmax(0,1.25fr);padding:0;background:none;border:0;box-shadow:none;gap:clamp(24px,4vw,56px)}
:root[data-theme=light] .mx.glass{background:none;box-shadow:none}
.mx-tip{display:flex;align-items:center;gap:8px;margin-top:18px!important;font-size:.84rem!important;color:var(--muted)}
.mx-tip .mi{width:16px;height:16px;color:#5f9bff}
@media(hover:none){.mx-tip-t{font-size:0}.mx-tip-t::after{content:"Vuốt ngang trên thẻ để đổi bài, chạm thẻ giữa để phát";font-size:.84rem}}
.mx.glass .ms{container-type:inline-size;width:100%}
.mx.glass .ms-stage{height:clamp(380px,36vw,460px)}
.mx.glass .ms-card{width:clamp(150px,36cqw,220px);margin-left:calc(clamp(150px,36cqw,220px) / -2)}
/* mượt khi lướt: bỏ làm mờ từng thẻ (filter/backdrop-filter) — chỉ còn dịch chuyển + độ mờ đục, GPU xử lý nhẹ */
.ms-card{filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s ease!important;
  background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.07)) padding-box,rgba(20,26,50,.35)!important;will-change:transform,opacity;backface-visibility:hidden}
.ms-card.on{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.1)),rgba(30,38,72,.45)!important}
.ms-amb,.ms-amb .ms-img{transition:background .8s ease,opacity .6s}
.ms.wheeling .ms-card.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 40px 80px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.45),0 0 30px rgba(120,170,255,.35)}
.ms-dots{position:absolute;left:0;right:0;top:18px;display:flex;justify-content:center;gap:6px;pointer-events:none;z-index:2}
.ms-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.3);transition:width .3s,background .3s}
.ms-dots i.on{width:18px;background:#fff}
/* thanh điều khiển gọn theo bề rộng khung (container query), không theo màn hình */
@container (max-width:720px){.ms-bar{grid-template-columns:auto minmax(0,1fr) auto;margin:-70px 10px 10px;gap:10px}.ms-pr{grid-column:1/-1;order:5}
  .ms-tools .mp-volw,.ms-tools .mb:not(.add):not(:last-child){display:none}.ms-tools .mb.sm:nth-last-child(2){display:inline-grid}}
@container (max-width:460px){.ms-bar{margin:-60px 8px 8px;padding:8px 10px}.ms-now .mc{display:none}}
@media(max-width:900px){.mx.glass{grid-template-columns:1fr}}

/* ---------- Sản phẩm mới: thu gọn khoảng trống giữa băng chuyền – giá – nút ---------- */
.fc-wrap{height:clamp(420px,38vw,490px)!important}
.fc-wrap .flex-carousel__caption{top:calc(50% + var(--flex-carousel-half) * var(--flex-carousel-lift,1) + 14px)}
.ag-foot{margin:-6px 0 0!important;gap:12px!important}
.ag-info{min-height:0!important;gap:6px!important}
.cat-row{margin-top:18px}
@media(max-width:640px){.fc-wrap{height:400px!important}.ag-foot{margin-top:-2px!important}}

/* ===================== v11.1: gọn khoảng trống, số rõ ràng ===================== */
.sec{padding:clamp(40px,6vw,84px) 0}
.sec-music{padding-top:clamp(30px,4vw,56px)}
/* "Mua hàng thế nào": hiệu ứng cuộn — khối nội dung dính giữa màn hình, đường tiến trình chạy, từng bước sáng dần; không còn khoảng trống thừa */
.story{height:auto!important;padding:clamp(30px,4vw,56px) 0 0}
.story-pin{position:sticky!important;top:max(90px,calc(50vh - 190px))!important;height:auto!important;padding:10px 0 24px!important;overflow:visible!important;gap:22px;display:block!important}
.story-run{height:120vh}
.story-line{height:3px!important;border-radius:3px;background:color-mix(in srgb,var(--text) 12%,transparent)!important;top:18px!important}
.story-line i{border-radius:3px;background:linear-gradient(90deg,#34d3c0,#4f8dff 60%,#8b7bff)!important;box-shadow:0 0 12px rgba(79,141,255,.55)}
.step{padding-top:58px!important;opacity:calc(.5 + var(--on,0) * .5)!important;transform:translateY(calc((1 - var(--on,0)) * 16px))!important;transition:opacity .35s,transform .35s}
.step .dot{top:0!important;width:38px;height:38px;font:800 .95rem var(--font-ui);background:var(--bg,#0a0f20);border:2px solid color-mix(in srgb,var(--text) 30%,transparent);color:var(--text);box-shadow:none;transition:background .35s,border-color .35s,box-shadow .35s,color .35s}
.step.on .dot{background:linear-gradient(135deg,#4f8dff,#6a5cff);border-color:transparent;color:#fff;box-shadow:0 0 0 6px rgba(79,141,255,.16),0 0 18px rgba(79,141,255,.45)}
:root[data-theme=light] .step .dot{background:#fff;border-color:rgba(13,20,48,.25);color:#0d1430}
:root[data-theme=light] .step.on .dot{background:linear-gradient(135deg,#2346e8,#6a3fe4);color:#fff;border-color:transparent}
.step h3{font-weight:700!important;color:var(--tt-base);letter-spacing:-.01em}
.step p{color:var(--muted);opacity:1}
@media(max-width:760px){.story-pin{position:static!important}.story-run{display:none}.step{opacity:1!important;transform:none!important}.step .dot{background:linear-gradient(135deg,#4f8dff,#6a5cff);color:#fff;border:0}}
/* số thứ tự lớn trên thẻ Hướng dẫn: rõ, không viền mờ */
.g-num{color:color-mix(in srgb,var(--text) 34%,transparent)!important;-webkit-text-stroke:0!important;font-weight:800}
:root[data-theme=light] .g-num{color:rgba(13,20,48,.28)!important}

/* ---------- Tài khoản bị khóa ---------- */
.lk-wrap{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px;background:rgba(4,6,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lk-card{width:min(460px,100%);padding:30px 26px;border-radius:24px;text-align:center;background:var(--surface);border:1px solid color-mix(in srgb,#ef4444 35%,var(--border));box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.lk-card h2{margin:10px 0 8px;font:800 1.5rem var(--font-ui);letter-spacing:-.02em;color:var(--tt-base)}
.lk-card p{margin:6px 0;line-height:1.6}.lk-card b{color:var(--text)}
.lk-ic{width:64px;height:64px;margin:0 auto;border-radius:20px;display:grid;place-items:center;color:#ef4444;background:rgba(239,68,68,.12);box-shadow:0 0 0 8px rgba(239,68,68,.06)}
.lk-ic svg{width:32px;height:32px}
.lk-acts{justify-content:center;margin-top:16px;gap:10px}
body.is-locked{overflow:hidden}
.foot-copy{margin-top:22px;padding-top:16px;border-top:1px solid var(--border);text-align:center}

/* Nút "Mở trình phát lớn": cùng kiểu nút viền sáng như các nút chính — rõ ở cả nền sáng lẫn tối */
.mx-cta.ag-cta{padding:14px 24px;border:0;border-radius:18px;gap:10px;font:700 .95rem var(--font-ui);transform:none}
.mx-cta.ag-cta .mi{width:18px;height:18px}
.mx-cta.ag-cta .mx-arr{opacity:.85}
:root[data-theme=light] .mx-cta.ag-cta:not(.specular-button){background:linear-gradient(180deg,#24357e,#0f1a4a);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -12px rgba(30,50,160,.55)}
:root:not([data-theme=light]) .mx-cta.ag-cta:not(.specular-button){background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
:root[data-theme=light] .mx-cta.specular-button{color:#fff}
.mx-tip{color:color-mix(in srgb,var(--text) 62%,transparent)!important}
:root[data-theme=light] .mx-tip{color:#3a4258!important}