/* =====================================================================
   TN AI v9 — mã xác minh (OTP deck), đăng nhập/đăng ký, trình phát nhạc kính,
   bộ ảnh xếp lá, nút viền sáng, giỏ hàng chọn món, thẻ "Vì sao" ở nền sáng.
   ===================================================================== */

[hidden]{display:none!important}
/* ---------- 1. Đăng nhập / đăng ký ---------- */
.auth-glass .pane{overflow-y:auto;scrollbar-width:none}.auth-glass .pane::-webkit-scrollbar{display:none}
.vstack{position:relative;display:grid}
.vstack>.view{grid-area:1/1;transition:opacity .26s ease,transform .26s ease,filter .26s ease}
.vstack>.view.v-in{opacity:0;transform:translateY(10px);filter:blur(4px)}
.vstack>.view.v-out{opacity:0;transform:translateY(-8px);filter:blur(4px);pointer-events:none}
.view{display:flex;flex-direction:column;min-width:0}
.view>form,.tab-body>form{display:flex;flex-direction:column}
.ai{display:inline-flex;width:17px;height:17px;flex:none}.ai svg{width:100%;height:100%}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin:16px 0 4px;border-radius:14px;background:rgba(var(--rim),.08);border:1px solid var(--border)}
.tabs .tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border:0;background:none;color:var(--muted);font:600 .88rem var(--font-ui);cursor:pointer;border-radius:10px;transition:color .25s}
.tabs .tab[aria-selected=true]{color:var(--text)}
.tab-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tabs[data-v=b] .tab-pill{transform:translateX(100%)}
.chns{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;margin:14px 0 2px;padding:4px;border-radius:14px;border:1px dashed var(--border)}
.chn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border:0;background:none;color:var(--muted);font:600 .86rem var(--font-ui);cursor:pointer;border-radius:10px}
.chn[aria-checked=true]{color:var(--text)}.chn:disabled{opacity:.4;cursor:not-allowed}
.chn-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:linear-gradient(135deg,rgba(var(--rim),.22),rgba(var(--rim),.08));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.chns[data-v=sms] .chn-pill{transform:translateX(100%)}
.row-end{display:flex;justify-content:flex-end;margin-top:8px}
.lnk{background:none;border:0;padding:0;color:var(--muted);font:600 .84rem var(--font-ui);cursor:pointer;text-decoration:none}.lnk:hover{color:var(--accent)}
.lnk.back{align-self:flex-start;margin-top:14px}
.pane .btn.primary{margin-top:16px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ov-k{font:700 .74rem var(--font-ui);letter-spacing:.24em;opacity:.7}
.auth-glass{min-height:600px}

/* ---------- 2. Ô nhập mã OTP (deck) ---------- */
.od{display:flex;flex-direction:column;gap:12px;--slot:52px;--slotH:60px;--ice:#7cc4ff;--okc:#34d399}
:root[data-theme=light] .od{--ice:#3359f0;--okc:#0e9f6e}
.od-card{position:relative;padding:22px 18px 18px;border-radius:24px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border);box-shadow:0 20px 50px rgba(0,0,0,.25)}
:root[data-theme=light] .od-card{background:linear-gradient(180deg,#fff,#f6f8fd);box-shadow:0 18px 40px rgba(28,44,110,.10)}
.od-handle{display:block;width:34px;height:4px;border-radius:4px;background:var(--border);margin:-8px auto 14px}
.od-title{margin:0;font:650 1.22rem var(--font-ui);letter-spacing:-.01em;transition:color .3s}
.od-sub{margin:6px 0 0;color:var(--muted);font-size:.88rem}.od-sub b{color:var(--text);font-variant-numeric:tabular-nums}
.od-hint{margin:6px 0 0;font-size:.78rem;color:var(--muted)}
.od-row{position:relative;display:flex;justify-content:center;gap:10px;margin:22px auto 6px;height:calc(var(--slotH) + 18px);align-items:center;cursor:text}
.od-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent;border:0;background:transparent;color:transparent;z-index:3}
.od-slot{position:relative;flex:none;width:var(--slot);height:var(--slotH);border-radius:15px;display:grid;place-items:center;transform-origin:50% 320%;
  background:linear-gradient(180deg,rgba(40,52,92,.55),rgba(20,26,48,.7));border:1px solid rgba(140,170,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.25);transition:border-color .2s,box-shadow .25s,background .25s}
:root[data-theme=light] .od-slot{background:linear-gradient(180deg,#fff,#eef2fb);border-color:rgba(28,44,96,.14);box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(28,44,110,.08)}
.od-digit{font:700 1.5rem/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--text)}
.od-caret{position:absolute;width:2px;height:24px;border-radius:2px;background:var(--ice);opacity:0}
.od-slot.active{border-color:color-mix(in srgb,var(--ice) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ice) 18%,transparent),0 10px 24px rgba(0,0,0,.25)}
.od-slot.active:not(.filled) .od-caret{animation:odBlink 1s steps(1) infinite}
@keyframes odBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.od-slot.filled{border-color:color-mix(in srgb,var(--ice) 45%,transparent)}
.od-slot.pop .od-digit{animation:odPop .32s cubic-bezier(.2,.9,.3,1.4)}
@keyframes odPop{from{transform:scale(.4) translateY(6px);opacity:0}to{transform:none;opacity:1}}
.od-spark{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none;overflow:visible}
.od-spark rect{fill:none;stroke:var(--ice);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px var(--ice));opacity:0}
.od-slot.pop .od-spark rect{animation:odTrace .6s ease-out forwards}
@keyframes odTrace{0%{stroke-dashoffset:1;opacity:1}75%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.od-core{position:absolute;left:50%;top:50%;width:calc(var(--slot) + 10px);height:calc(var(--slotH) + 10px);margin:calc((var(--slotH) + 10px) / -2) 0 0 calc((var(--slot) + 10px) / -2);border-radius:17px;opacity:0;transform:scale(.9);pointer-events:none;
  background:linear-gradient(180deg,rgba(40,52,92,.7),rgba(20,26,48,.85));border:1px solid rgba(140,170,255,.25);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.3),border-color .3s,box-shadow .3s,background .3s}
:root[data-theme=light] .od-core{background:linear-gradient(180deg,#fff,#eef2fb);border-color:rgba(28,44,96,.16)}
.od[data-state=check] .od-core,.od[data-state=ok] .od-core,.od[data-state=bad] .od-core{opacity:1;transform:none}
.od[data-state=check] .od-slot,.od[data-state=ok] .od-slot,.od[data-state=bad] .od-slot{opacity:0!important;transition:opacity .15s}
.od-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);overflow:visible}
.od-ring rect{fill:none;stroke:var(--ice);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.28 .72;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px var(--ice));opacity:0}
.od[data-state=check] .od-ring rect{opacity:1;animation:odSpin 1s linear infinite}
@keyframes odSpin{to{stroke-dashoffset:-1}}
.od-check{position:absolute;inset:0;margin:auto;width:28px;height:28px;opacity:0}
.od-check path{fill:none;stroke:var(--okc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.od[data-state=ok] .od-core{border-color:var(--okc);box-shadow:0 0 0 6px color-mix(in srgb,var(--okc) 16%,transparent),0 0 34px color-mix(in srgb,var(--okc) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--okc) 18%,transparent),color-mix(in srgb,var(--okc) 6%,transparent))}
.od[data-state=ok] .od-check{opacity:1}.od[data-state=ok] .od-check path{animation:odDraw .5s .1s ease-out forwards}
@keyframes odDraw{to{stroke-dashoffset:0}}
.od[data-state=ok] .od-title{color:var(--okc)}
.od[data-state=bad] .od-core{border-color:var(--err);box-shadow:0 0 24px color-mix(in srgb,var(--err) 40%,transparent)}
.od-err{min-height:1.2em;margin:4px 0 0;color:var(--err);font-size:.84rem;font-weight:600}
.od-foot{margin:4px 0 0;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.od-resend{background:none;border:0;padding:0;font:700 .84rem var(--font-ui);color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums}.od-resend:disabled{color:var(--muted);cursor:default;font-weight:600}
.od-dev{margin:12px 0 0;padding:8px 10px;border-radius:10px;font-size:.78rem;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px dashed color-mix(in srgb,var(--warn) 45%,transparent)}
.od-dev b{font-variant-numeric:tabular-nums;letter-spacing:.12em}
.od-back{align-self:center;background:none;border:0;color:var(--muted);font:600 .84rem var(--font-ui);cursor:pointer}.od-back:hover{color:var(--text)}
@media(max-width:420px){.od{--slot:42px;--slotH:52px}.od-row{gap:7px}}
/* hiệu ứng nhập mã luôn bật (theo yêu cầu chủ shop) */

/* ---------- 3. Bộ ảnh xếp lá + thông tin + nút viền sáng ---------- */
.ag-wrap{position:relative;margin-top:6px}
.ag-wrap .accordion-gallery{--ag-radius:16px}
.ag-panel__media img{transition:transform .8s cubic-bezier(.215,.61,.355,1)}
.ag-panel--active .ag-panel__media img{transform:scale(1.02)}
.ag-panel--active{box-shadow:0 0 0 2px var(--ag-accent),0 24px 50px -24px rgba(0,0,0,.8)!important}
:root[data-theme=light] .accordion-gallery{--ag-accent:#3359f0}
:root[data-theme=light] .ag-panel{background:#dfe5f3;box-shadow:0 14px 34px -20px rgba(28,44,110,.5)}
.ag-foot{display:flex;flex-direction:column;align-items:center;gap:14px;margin:22px 0 0;text-align:center}
.ag-info{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:96px}
.ag-info.swap{animation:agIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes agIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ag-title{font:650 1.15rem var(--font-ui);letter-spacing:-.01em}
.ag-price{justify-content:center}.ag-price small{text-align:center}
@media(max-width:520px){.accordion-gallery .ag-panel{flex:0 0 76px!important;min-height:76px}.accordion-gallery .ag-panel--active{flex-basis:300px!important}.accordion-gallery .ag-panel__text{font-size:1rem}}
/* nút dùng hiệu ứng viền sáng */
.ag-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:15px 30px;border:0;border-radius:18px;font:600 1rem var(--font-ui);color:var(--sb-text-color,var(--text));text-decoration:none;cursor:pointer;
  background:color-mix(in srgb,var(--sb-tint,#fff) calc(var(--sb-tint-opacity,.04) * 100%),transparent)}
.ag-cta:hover{text-decoration:none}
.ag-cta .i8,.ag-cta .mi{width:18px;height:18px;transition:transform .25s}.ag-cta:hover .i8{transform:translateX(3px)}
.specular-button.ag-cta{padding:15px 30px}
.specular-button__label{display:inline-flex;align-items:center;gap:10px}
.cart-go.specular-button{border-radius:18px}
.ag-cta:not(.specular-button){background:var(--btn);color:var(--btn-ink)} /* khi trình duyệt không có WebGL2 */
.ag-cta.ghost:not(.specular-button){background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.detail .row .ag-cta{min-width:170px}

/* ---------- 4. Giỏ hàng: chọn món ---------- */
.ci{grid-template-columns:30px 132px minmax(0,1fr) auto 44px}
.ck{width:26px;height:26px;padding:0;border-radius:9px;border:1.6px solid color-mix(in srgb,var(--text) 30%,transparent);background:transparent;display:grid;place-items:center;cursor:pointer;transition:all .2s;flex:none}
.ck svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .25s ease}
.ck[aria-checked=true],.ck[aria-checked=mixed]{background:var(--cta);border-color:transparent;box-shadow:0 6px 14px color-mix(in srgb,var(--cta) 35%,transparent)}
.ck[aria-checked=true] svg{stroke-dashoffset:0}
.ck[aria-checked=mixed] svg{display:none}.ck[aria-checked=mixed]::after{content:"";width:12px;height:3px;border-radius:2px;background:#fff}
.ck:hover{border-color:var(--accent)}
.ci.unsel{opacity:.55}.ci.unsel .ci-thumb img{filter:grayscale(.7)}.ci.unsel:hover{opacity:.85}
.sel-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 10px 12px;border-radius:18px;border:1px dashed var(--border)}
.sel-all{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:.92rem;cursor:pointer}
.cart-go{position:relative;width:100%;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:18px;font:650 1rem var(--font-ui);cursor:pointer;color:var(--sb-text-color,var(--btn-ink));background:color-mix(in srgb,var(--sb-tint,#fff) calc(var(--sb-tint-opacity,.04) * 100%),transparent);margin-top:4px}
.cart-go:not(.specular-button){background:var(--btn);color:var(--btn-ink)}
.cart-go:disabled{opacity:.55;cursor:not-allowed}
.cart-go .i8{width:20px;height:20px}
@media(max-width:640px){.ci{grid-template-columns:26px 80px minmax(0,1fr) 40px;gap:10px}.ci-price{grid-column:3}.ci-del{grid-column:4}.ci-thumb{grid-row:span 2}.ck{grid-row:span 2}}

/* ---------- 5. 4 ô "Vì sao chọn TN AI" ---------- */
.perk{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.perk:hover{transform:translateY(-4px)}
.perk[data-v=blue]{--pk:#5b84ff}.perk[data-v=default]{--pk:#94a3b8}.perk[data-v=yellow]{--pk:#f0b429}.perk[data-v=pink]{--pk:#ec6aa8}
.perk .n{color:var(--pk,var(--accent))!important}
:root[data-theme=light] .perk{--pixel-card-surface:#fff;background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--pk) 14%,transparent),transparent 60%),linear-gradient(180deg,#fff,#f7f9fd)!important;
  border:1px solid rgba(28,44,96,.10)!important;box-shadow:0 1px 0 #fff inset,0 18px 40px -22px rgba(28,44,110,.35)!important}
:root[data-theme=light] .perk:hover{box-shadow:0 1px 0 #fff inset,0 26px 50px -24px color-mix(in srgb,var(--pk) 60%,transparent)!important}
:root[data-theme=light] .perk h3{color:var(--text)}:root[data-theme=light] .perk p{color:var(--muted)}
:root[data-theme=light] .perk::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--pk);opacity:.8}

/* ---------- 6. Góc âm nhạc (Glassy Carousel) ---------- */
.ms{--a1:#2b3a8f;--a2:#0d1330;position:relative;border-radius:32px;overflow:hidden;isolation:isolate;border:1px solid var(--border);background:#0a0d1c;color:#fff}
.ms-stage{position:relative;height:clamp(400px,46vw,500px);perspective:1400px}
.ms-amb{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 30% 20%,var(--a1),transparent 70%),radial-gradient(80% 90% at 80% 90%,var(--a2),transparent 70%),#0a0d1c;transition:background 1s}
.ms-amb .ms-img{position:absolute;inset:-12%;opacity:.42;filter:blur(60px) saturate(1.5);transition:opacity .6s}
.ms-amb .ms-img img{width:100%;height:100%;object-fit:cover}
.ms-amb i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;mix-blend-mode:screen}
.ms-amb .b1{width:40%;height:60%;left:-6%;top:-10%;background:var(--a1)}.ms-amb .b2{width:46%;height:60%;right:-8%;bottom:-20%;background:var(--a2)}
.ms.anim .ms-amb .b1{animation:msFloat 14s ease-in-out infinite}.ms.anim .ms-amb .b2{animation:msFloat 18s ease-in-out infinite reverse}
@keyframes msFloat{50%{transform:translate(8%,10%) scale(1.15)}}
.ms-amb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,18,.1),rgba(6,8,18,.55))}
.ms-deck{position:absolute;inset:0;transform-style:preserve-3d;outline:none;touch-action:pan-y;user-select:none}
.ms-card{position:absolute;left:50%;top:46%;width:clamp(170px,22vw,230px);margin-left:calc(clamp(170px,22vw,230px) / -2);transform:translate3d(var(--x),-50%,var(--z)) rotateY(var(--ry)) scale(var(--sc));opacity:var(--op);filter:blur(var(--bl));
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s;padding:10px 10px 14px;border-radius:24px;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 30px 60px -20px rgba(0,0,0,.6);text-align:center;display:flex;flex-direction:column;gap:4px}
.ms-card.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 40px 80px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.35)}
.ms-art{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;margin-bottom:8px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.mc{display:block;width:100%;height:100%;overflow:hidden;background:#1a2040}.mc img{width:100%;height:100%;object-fit:cover;display:block}
.mc.gen{display:grid;place-items:center;background:linear-gradient(135deg,hsl(var(--h1) 70% 50%),hsl(var(--h2) 70% 30%))}.mc.gen .gen-ic{width:40%;height:40%;color:rgba(255,255,255,.85)}.mc.gen .gen-ic svg{width:100%;height:100%}
.mc.sm{width:40px;height:40px;border-radius:10px}.mc.xs{width:38px;height:38px;border-radius:9px;flex:none}
.mc-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.4);opacity:0;transform:scale(.8);transition:all .3s}
.mc-play .mi{width:22px;height:22px;margin-left:3px}
.ms-card.on:hover .mc-play{opacity:1;transform:none}
.mc-pill{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font:600 .72rem var(--font-ui);background:rgba(10,12,24,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;opacity:0;transition:opacity .3s}
.mc-pill .mi{width:12px;height:12px}
.ms-card.on .mc-pill{opacity:1}
.ms-card.playing .mc-pill{background:rgba(52,211,153,.85);color:#04130c}
.ms-card.playing .mc-pill::after{content:"Đang phát";}.ms-card.playing .mc-pill{font-size:0}.ms-card.playing .mc-pill::after{font-size:.72rem}.ms-card.playing .mc-pill .mi{display:none}
.mc-mine{position:absolute;right:8px;top:8px;font:700 .64rem var(--font-ui);padding:3px 8px;border-radius:99px;background:rgba(124,77,255,.85)}
.mc-t{font:650 .98rem var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-a{font-size:.78rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;color:rgba(255,255,255,.85);padding:20px}
.ms-empty .mi{width:46px;height:46px;opacity:.8}.ms-empty p{margin:0;opacity:.75}
/* thanh điều khiển kính */
.ms-bar{position:relative;display:grid;grid-template-columns:auto minmax(150px,240px) minmax(0,1fr) auto;align-items:center;gap:16px;margin:-78px 16px 16px;padding:10px 14px;border-radius:22px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 20px 40px -20px rgba(0,0,0,.6)}
.mi{display:inline-flex;width:20px;height:20px;flex:none}.mi svg{width:100%;height:100%}
.mb{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:inherit;cursor:pointer;transition:background .2s,transform .2s;position:relative}
.mb:hover{background:rgba(255,255,255,.14)}.mb:active{transform:scale(.92)}
.mb.sm{width:34px;height:34px}.mb.sm .mi{width:17px;height:17px}
.mb.play{width:44px;height:44px;background:#fff;color:#0b1020;box-shadow:0 8px 20px rgba(0,0,0,.3)}.mb.play:hover{background:#fff;transform:scale(1.06)}
.mb.play.lg{width:58px;height:58px}.mb.play.lg .mi{width:24px;height:24px}
.mb.on{color:#6ee7d0}.mb .one{position:absolute;right:5px;top:5px;font:800 .55rem var(--font-ui);font-style:normal;display:none}.mb.only .one{display:block}
.mb.add{background:rgba(255,255,255,.16)}
.mp-tr{display:flex;align-items:center;gap:4px}
.ms-now{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;padding:0}
.ms-nt{display:grid;min-width:0}.ms-nt b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ms-nt small{font-size:.74rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-pr{display:flex;align-items:center;gap:10px;min-width:0}.mp-t{font:500 .74rem var(--font-ui);font-variant-numeric:tabular-nums;opacity:.75;min-width:34px;text-align:center}
.mp-prog{flex:1;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.mp-prog .rail{position:relative;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.22)}
.mp-prog .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#9ad7ff,#fff)}
.mp-prog .knob{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2);opacity:0;transition:opacity .2s}
.mp-prog:hover .knob,.mp-prog:focus-visible .knob{opacity:1}
.mp-prog.big .rail{height:6px}.mp-prog.thin{position:absolute;left:14px;right:14px;bottom:0;height:10px}.mp-prog.thin .rail{height:2px;background:rgba(255,255,255,.15)}
.ms-tools{display:flex;align-items:center;gap:2px}
.mp-volw{display:flex;align-items:center;gap:2px}
.mp-vol{-webkit-appearance:none;appearance:none;width:80px;height:4px;border-radius:4px;background:linear-gradient(90deg,#fff var(--v,80%),rgba(255,255,255,.25) var(--v,80%));border:0;padding:0;min-height:0;cursor:pointer}
.mp-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;border:0}.mp-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0}
.ms.playing .ms-card.on .ms-art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(110,231,208,.8);border-radius:inherit;animation:msPulse 2s ease-in-out infinite}
@keyframes msPulse{50%{box-shadow:inset 0 0 0 2px rgba(110,231,208,.2)}}
@media(max-width:900px){.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}}
@media(max-width:520px){.ms{border-radius:24px}.ms-stage{height:380px}.ms-bar{margin:-60px 8px 8px;padding:8px 10px}.ms-now .mc{display:none}}

/* ---------- 7. Bảng "Đang phát" ---------- */
.np-wrap{--a1:#2b3a8f;--a2:#0d1330;position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(4,6,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.np-wrap.in{opacity:1}
.np-amb{position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 30% 30%,var(--a1),transparent 70%),radial-gradient(50% 60% at 70% 80%,var(--a2),transparent 70%);opacity:.55;transition:background 1s}
.np{width:min(980px,100%);max-height:calc(100svh - 40px);overflow:auto;color:#fff;border-radius:30px;padding:18px 22px 22px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 50px 120px -30px rgba(0,0,0,.8);transform:translateY(24px) scale(.96);transition:transform .45s cubic-bezier(.2,.9,.3,1.2)}
.np-wrap.in .np{transform:none}
.np-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.np-live{display:inline-flex;align-items:center;gap:8px;font:700 .72rem var(--font-ui);letter-spacing:.14em;opacity:.85}.np-live i{width:8px;height:8px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 10px #ff4d6d}
.np-close{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;font:600 .82rem var(--font-ui);cursor:pointer}.np-close .mi{width:15px;height:15px}
.np-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start}
.np-art{position:relative}
.np-cover{aspect-ratio:1;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}.np-cover .mc{border-radius:24px}
.np-wrap.playing .np-cover{animation:npBreath 4s ease-in-out infinite}
@keyframes npBreath{50%{transform:scale(1.015)}}
.np-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:40px;margin-top:14px}
.np-bars i{width:5px;height:20%;border-radius:3px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.3));opacity:.8}
.np-wrap.playing .np-bars i{animation:npBar 1.1s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
@keyframes npBar{0%,100%{height:15%}50%{height:100%}}
.np-title{margin:6px 0 2px;font:700 clamp(1.4rem,3vw,2rem)/1.15 var(--font-ui);letter-spacing:-.01em}.np-artist{margin:0 0 18px;opacity:.75}
.np-time{display:flex;align-items:center;gap:10px}.np-t{font:500 .78rem var(--font-ui);font-variant-numeric:tabular-nums;opacity:.75;min-width:36px}
.np-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 8px}.np-ctl .mp-tr{gap:10px}
.np-side .mp-volw{justify-content:center;margin-bottom:12px}
.np-lh{display:flex;align-items:center;justify-content:space-between;margin:8px 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.np-lh .add{width:auto;padding:0 12px;border-radius:99px;gap:6px;display:inline-flex;font:600 .78rem var(--font-ui)}
.np-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:240px;overflow:auto}
.np-list li{display:flex;align-items:center;gap:4px;border-radius:14px;transition:background .2s}.np-list li:hover{background:rgba(255,255,255,.08)}
.np-list li.on{background:rgba(255,255,255,.14)}
.np-list li>button:first-child{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 8px;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.nl-t{display:grid;min-width:0;flex:1}.nl-t b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nl-t small{font-size:.72rem;opacity:.65}
.nl-d{font-size:.74rem;opacity:.6;font-variant-numeric:tabular-nums}
.np-list .del{opacity:.6}.np-list .del:hover{opacity:1;background:rgba(255,77,109,.3)}
@media(max-width:760px){.np-body{grid-template-columns:1fr}.np-art{max-width:300px;margin:0 auto;width:100%}}

/* ---------- 8. Thanh phát nhỏ nổi ---------- */
.mm{position:fixed;left:18px;bottom:18px;z-index:70;display:flex;align-items:center;gap:6px;padding:8px 10px 12px 8px;border-radius:22px;color:#fff;max-width:min(420px,calc(100vw - 36px));
  background:rgba(14,18,36,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 20px 50px -16px rgba(0,0,0,.6);
  transform:translateY(140%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .3s;pointer-events:none}
.mm.show{transform:none;opacity:1;pointer-events:auto}
:root[data-theme=light] .mm{background:rgba(16,22,48,.82)}
.mm-info{display:flex;align-items:center;gap:10px;min-width:0;flex:1;border:0;background:none;color:inherit;text-align:left;cursor:pointer;padding:0}
.mm-cov .mc{border-radius:50%;width:42px;height:42px}
.mm.playing .mm-cov .mc{animation:mmSpin 8s linear infinite}
@keyframes mmSpin{to{transform:rotate(360deg)}}
.mm-txt{display:grid;min-width:0;max-width:170px;overflow:hidden}.mm-art{font-size:.72rem;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-mq{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-title{font-size:.86rem}
.mm.playing .mm-mq.long{text-overflow:clip;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.mm.playing .mm-mq.long .mm-title{display:inline-block;padding-left:100%;animation:mmMarq 12s linear infinite}
@keyframes mmMarq{to{transform:translateX(-100%)}}
.mm .mb.play{width:38px;height:38px}.mm .mb{width:34px;height:34px}.mm .mb .mi{width:17px;height:17px}
@media(max-width:520px){.mm{left:10px;right:auto;bottom:10px}.mm .mp-tr .mb:first-child{display:none}.mm-txt{max-width:110px}}
@media(prefers-reduced-motion:reduce){.mm.playing .mm-cov .mc,.np-wrap.playing .np-bars i,.np-wrap.playing .np-cover,.ms.anim .ms-amb i{animation:none}}

/* ---------- 9. Hộp thêm nhạc của bạn ---------- */
.mad-wrap{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(4,6,14,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .22s}
.mad-wrap.in{opacity:1}.mad-wrap.out{opacity:0}
.mad{width:min(520px,100%);display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:26px;background:var(--surface);border:1px solid var(--border);box-shadow:0 40px 100px -30px rgba(0,0,0,.6);transform:translateY(14px);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.mad-wrap.in .mad{transform:none}
.mad h2{margin:0}.mad .muted{margin:0;font-size:.86rem}
.mad-drop{position:relative;display:grid;justify-items:center;gap:4px;padding:22px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 6%,transparent);cursor:pointer;text-align:center}
.mad-drop .mi{width:30px;height:30px;color:var(--accent)}.mad-drop small{color:var(--muted)}.mad-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mad-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px}
.mad-cl{position:relative;display:grid;justify-items:center;gap:6px;font-size:.8rem;color:var(--muted);cursor:pointer}.mad-cl input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mad-cover{width:120px;height:120px;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#5b84ff,#7c4dff);color:#fff}.mad-cover img{width:100%;height:100%;object-fit:cover}.mad-cover .mi{width:40px;height:40px}
.mad-f{display:grid;gap:10px}.mad-f label{display:grid;gap:4px;font-size:.82rem;color:var(--muted)}
.mad-msg{margin:0;color:var(--err);font-size:.85rem;min-height:1em}
.mad-act{display:flex;justify-content:flex-end;gap:10px}
@media(max-width:480px){.mad-row{grid-template-columns:1fr}.mad-cl{justify-self:center}}

/* ---------- 10. Admin: nhạc ---------- */
.mu-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center}
.mu-row.dim{opacity:.55}
.mu-cov{width:72px;height:72px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#5b84ff,#7c4dff);color:#fff;font-size:1.6rem}.mu-cov img{width:100%;height:100%;object-fit:cover}
.mu-f{display:grid;gap:8px;min-width:0}.mu-f .row{flex-wrap:wrap;gap:8px}.mu-f input{flex:1;min-width:140px}.mu-f .mu-sort{flex:0 0 80px;min-width:0}.mu-f audio{height:34px;max-width:100%}
.mu-act{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media(max-width:720px){.mu-row{grid-template-columns:56px minmax(0,1fr)}.mu-act{grid-column:1/-1;justify-content:flex-start}.mu-cov{width:56px;height:56px}}

.perk{border-radius:26px!important;overflow:hidden}
.auth-glass .pane{justify-content:safe center}
.auth-glass{min-height:640px}