/* ==TOKENS== (sinh bằng code/ngoai-ngu/gen_music_tokens.js, đừng sửa tay) */
html[data-palette="neon"]{color-scheme:light;--bg:#F6F4FF;--card:#FFFFFF;--sunk:#EDEAFF;--border:#D9D3F7;--ink:#1B1740;--muted:#585387;--faint:#6B669C;--coffee:#6C47FF;--coffee-dark:#4B2BD6;--espresso:#1B1146;--caramel:#FF8FC0;--cream:#EDEAFF;--ocean:#7B5CFF;--ocean-d:#5236D9;--sky:#8FD8FF;--aqua:#8CF0E0;--gold:#F2A93B;--gold-s:#FFF1D6;--gold-d:#8A5A00;--sea-a:#1B1146;--sea-b:#6C47FF;--sea-c:#FF5FA8;--accent:#6C47FF;--accent-dark:#4B2BD6;--accent-soft:#E9E4FF;--on-accent:#FFFFFF;--hero-a:#1B1146;--hero-b:#5B3BEA;--hero-gold:#FFD1E8;--ok:#17714A;--ok-soft:#DDF3E8;--bad:#B02537;--bad-soft:#FCE4E6;--warn:#8E5013;--warn-soft:#FCEBD8;--lv1:#17714A;--lv1-soft:#DDF3E8;--lv2:#2C50CF;--lv2-soft:#E3EAFF;--lv3:#955300;--lv3-soft:#FFEFD2;--lv4:#A51C72;--lv4-soft:#FFE1F1;--on:#5236D9;--on-s:#EAE5FF;--off:#8A5A00;--off-s:#FFF1D6;--chn:#BD2250;--chn-d:#961A3E;--chn-s:#FFE3EB;--chn-1:#6E1431;--chn-2:#E8466F;--eng:#2F5BE0;--eng-d:#1F42B5;--eng-s:#E2EAFF;--eng-1:#1A2C78;--eng-2:#5380F5;--ssa:#08716A;--ssa-d:#065A54;--ssa-s:#D5F4F0;--ssa-1:#053F3B;--ssa-2:#10A79C;--enp:#6B3FE0;--enp-d:#4F27BB;--enp-s:#EAE3FF;--enp-1:#2F1A7A;--enp-2:#8660F2;--ecr:#A04905;--ecr-d:#7E3704;--ecr-s:#FFEAD2;--ecr-1:#5C2A02;--ecr-2:#D9741E;--shadow:0 10px 30px rgba(92,64,220,.13);--shadow-lg:0 24px 60px rgba(27,17,70,.34)}
@media (prefers-color-scheme:dark){html[data-palette="neon"]:not([data-theme="light"]){color-scheme:dark;--bg:#0A0820;--card:#14113A;--sunk:#1C1850;--border:#35307A;--ink:#EFEBFF;--muted:#BAB4EC;--faint:#8F89C9;--coffee:#A58BFF;--coffee-dark:#CDBFFF;--espresso:#EFEBFF;--caramel:#FF9FCB;--cream:#1C1850;--ocean:#A58BFF;--ocean-d:#CDBFFF;--sky:#7FD0FF;--aqua:#7AF0DC;--gold:#FFC764;--gold-s:#3A2C0E;--gold-d:#FFDB94;--sea-a:#140B3F;--sea-b:#5B3BEA;--sea-c:#E8458F;--accent:#A58BFF;--accent-dark:#CDBFFF;--accent-soft:#251F60;--on-accent:#140B3D;--hero-a:#160C45;--hero-b:#4F30D8;--hero-gold:#FFC3E0;--ok:#6BD6A0;--ok-soft:#10301F;--bad:#FF9AA5;--bad-soft:#3E1B22;--warn:#F0BC6A;--warn-soft:#38290F;--lv1:#6BD6A0;--lv1-soft:#10301F;--lv2:#8FB0FF;--lv2-soft:#16255A;--lv3:#FFC058;--lv3-soft:#3A2A0C;--lv4:#FF8FC9;--lv4-soft:#3E1636;--on:#CDBFFF;--on-s:#251F60;--off:#FFDB94;--off-s:#3A2C0E;--chn:#FF7E9E;--chn-d:#FFA6BC;--chn-s:#3E1424;--chn-1:#5E1430;--chn-2:#C73A63;--eng:#8FB0FF;--eng-d:#B4CBFF;--eng-s:#14245A;--eng-1:#1F3585;--eng-2:#3F66DE;--ssa:#4FE0CC;--ssa-d:#86EDE0;--ssa-s:#0B3A36;--ssa-1:#08504A;--ssa-2:#13A59A;--enp:#B59CFF;--enp-d:#D0BEFF;--enp-s:#261C5C;--enp-1:#34208A;--enp-2:#6B45DC;--ecr:#FFB866;--ecr-d:#FFD197;--ecr-s:#3C2208;--ecr-1:#6E3A04;--ecr-2:#C26A12;--shadow:0 10px 30px rgba(0,0,0,.45);--shadow-lg:0 24px 60px rgba(0,0,0,.6)}}
html[data-palette="neon"][data-theme="dark"]{color-scheme:dark;--bg:#0A0820;--card:#14113A;--sunk:#1C1850;--border:#35307A;--ink:#EFEBFF;--muted:#BAB4EC;--faint:#8F89C9;--coffee:#A58BFF;--coffee-dark:#CDBFFF;--espresso:#EFEBFF;--caramel:#FF9FCB;--cream:#1C1850;--ocean:#A58BFF;--ocean-d:#CDBFFF;--sky:#7FD0FF;--aqua:#7AF0DC;--gold:#FFC764;--gold-s:#3A2C0E;--gold-d:#FFDB94;--sea-a:#140B3F;--sea-b:#5B3BEA;--sea-c:#E8458F;--accent:#A58BFF;--accent-dark:#CDBFFF;--accent-soft:#251F60;--on-accent:#140B3D;--hero-a:#160C45;--hero-b:#4F30D8;--hero-gold:#FFC3E0;--ok:#6BD6A0;--ok-soft:#10301F;--bad:#FF9AA5;--bad-soft:#3E1B22;--warn:#F0BC6A;--warn-soft:#38290F;--lv1:#6BD6A0;--lv1-soft:#10301F;--lv2:#8FB0FF;--lv2-soft:#16255A;--lv3:#FFC058;--lv3-soft:#3A2A0C;--lv4:#FF8FC9;--lv4-soft:#3E1636;--on:#CDBFFF;--on-s:#251F60;--off:#FFDB94;--off-s:#3A2C0E;--chn:#FF7E9E;--chn-d:#FFA6BC;--chn-s:#3E1424;--chn-1:#5E1430;--chn-2:#C73A63;--eng:#8FB0FF;--eng-d:#B4CBFF;--eng-s:#14245A;--eng-1:#1F3585;--eng-2:#3F66DE;--ssa:#4FE0CC;--ssa-d:#86EDE0;--ssa-s:#0B3A36;--ssa-1:#08504A;--ssa-2:#13A59A;--enp:#B59CFF;--enp-d:#D0BEFF;--enp-s:#261C5C;--enp-1:#34208A;--enp-2:#6B45DC;--ecr:#FFB866;--ecr-d:#FFD197;--ecr-s:#3C2208;--ecr-1:#6E3A04;--ecr-2:#C26A12;--shadow:0 10px 30px rgba(0,0,0,.45);--shadow-lg:0 24px 60px rgba(0,0,0,.6)}
/* ==/TOKENS== */

/* ---------- chủ đề âm nhạc: trang trí cho 5 trang môn (token màu ở khối trên) ---------- */
html[data-palette]{--display:"Lexend","Be Vietnam Pro",system-ui,sans-serif;--neon:var(--sea-c)}
html[data-palette] body{background:
  radial-gradient(900px 520px at 90% -8%,color-mix(in srgb,var(--sea-c) 20%,transparent),transparent 62%),
  radial-gradient(800px 560px at -8% 2%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 62%),
  radial-gradient(700px 420px at 50% 112%,color-mix(in srgb,var(--sky) 16%,transparent),transparent 60%),var(--bg)}
:is(h1,h2,h3,.section-title) {letter-spacing:-.012em}
html[data-palette] .hero h1{font-weight:700;font-size:clamp(26px,4.4vw,42px);line-height:1.14;letter-spacing:-.022em}
html[data-palette] .hero{background:
  radial-gradient(520px 280px at 92% -4%,color-mix(in srgb,var(--sea-c) 58%,transparent),transparent 70%),
  radial-gradient(460px 300px at 0% 108%,color-mix(in srgb,var(--accent-dark) 36%,transparent),transparent 70%),
  linear-gradient(125deg,var(--hero-a) 0%,var(--hero-b) 100%);
  box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.26)}
html[data-palette] .hero:before{background:none}
html[data-palette] .hero:after{border-color:rgba(255,255,255,.22);box-shadow:0 0 0 22px rgba(255,255,255,.04),0 0 0 23px rgba(255,255,255,.12),0 0 0 54px rgba(255,255,255,.025)}   /* vòng đĩa than ở góc */
html[data-palette] .hero .brand{color:var(--hero-gold)}
html[data-palette] .hero .brand:before{background:linear-gradient(90deg,var(--hero-gold),transparent);height:2px;width:40px}
.hero>.eq-deco{position:absolute;left:0;right:0;bottom:0;height:54px;display:flex;align-items:flex-end;gap:4px;padding:0 18px;pointer-events:none;z-index:0;opacity:.6}
.eq-deco i{flex:1 1 0;max-width:16px;height:100%;border-radius:5px 5px 0 0;transform-origin:50% 100%;transform:scaleY(var(--h));
  background:linear-gradient(180deg,rgba(255,255,255,.92),color-mix(in srgb,var(--sea-c) 78%,transparent) 38%,rgba(255,255,255,0));
  animation:eqd var(--t) ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes eqd{from{transform:scaleY(var(--h))}to{transform:scaleY(calc(var(--h) * .3 + .08))}}
@media (prefers-reduced-motion:reduce){.eq-deco i{animation:none}}
@media (max-width:560px){.eq-deco i:nth-child(2n){display:none}}
/* thanh trên: kính mờ + đường neon */
html[data-palette] .sbar{position:sticky;background:color-mix(in srgb,var(--card) 82%,transparent)}
html[data-palette] .sbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--accent) 25%,var(--sea-c) 75%,transparent);opacity:.7;pointer-events:none}
html[data-palette] .card{border-radius:20px}
html[data-palette] .tabs{border-radius:22px}
html[data-palette] .tab[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--sea-c) 62%,var(--accent)));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
html[data-palette] .btn:not(.sec){background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--sea-c) 58%,var(--accent)));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
html[data-palette] .btn:not(.sec):hover{background:linear-gradient(135deg,var(--accent-dark),var(--accent));box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
html[data-palette] .toc-fab{background:linear-gradient(135deg,var(--accent),var(--sea-c));color:var(--on-accent)}
html[data-palette] ::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-palette="neon"] .btn:not(.sec){color:#fff}
/* sân khấu EQ 3D: khung kính tối, viền neon, nút điều khiển thay màu vàng bằng hồng–cyan */
html[data-palette] .kg-stage{background:#07041f;border:1px solid color-mix(in srgb,var(--sea-c) 55%,var(--border));box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.05) inset,0 0 42px color-mix(in srgb,var(--accent) 24%,transparent)}
html[data-palette] .sm-nav{background:rgba(10,5,44,.7);color:#fff;border-color:rgba(255,255,255,.34)}
html[data-palette] .sm-nav:hover:not(:disabled){background:color-mix(in srgb,var(--sea-c) 55%,rgba(10,5,44,.7));border-color:#fff}
html[data-palette] .sm-sign{background:rgba(10,5,44,.72);border-color:color-mix(in srgb,var(--sea-c) 65%,transparent)}
html[data-palette] .sm-g{color:#ffb0dc}
html[data-palette] .kg-ctl button{background:rgba(10,5,44,.7);border-color:rgba(255,255,255,.3)}
html[data-palette] .kg-ctl button:hover{background:color-mix(in srgb,var(--sea-c) 50%,rgba(10,5,44,.7));border-color:#fff}
html[data-palette] .kg-ctl [aria-pressed="true"][data-music]{background:linear-gradient(135deg,var(--accent),var(--sea-c));border-color:#fff}
html[data-palette] .kg-tip{background:rgba(10,5,44,.94);border-color:rgba(255,255,255,.25)}
html[data-palette] .kg-hint{text-shadow:0 1px 6px #000;color:#d6cfff}
html[data-palette] .kg-card .tag,html[data-palette] .sm-th-head .tag{background:linear-gradient(135deg,var(--accent),var(--sea-c));color:#fff}
html[data-palette] .kg-dims b{background:linear-gradient(135deg,var(--accent),var(--sea-c));color:#fff}
html[data-palette] .kg-dims li:nth-child(3) b{background:linear-gradient(135deg,var(--sea-c),var(--sky));color:#190a4a}
html[data-palette] .sm-pl>b{font-family:var(--display)}
html[data-palette] .sm-em{font-size:1.05em}
/* nút đổi bảng màu / lời khen */
html[data-palette] .sw-toast{background:linear-gradient(135deg,var(--accent),var(--sea-c));color:#fff}

/* ---------- bản nâng cấp chi tiết: đĩa than ở hero + bảng "ĐANG HỌC" trên sân khấu ---------- */
html[data-palette] .hero:after{width:310px;height:310px;right:-92px;top:-104px;border:0;border-radius:50%;opacity:.92;animation:vspin 22s linear infinite;
  background:radial-gradient(circle,#ff9ccd 0 15%,#ffd6ea 15.5% 16.5%,#2a0f5a 17% 19%,transparent 19.5%),
    repeating-radial-gradient(circle,rgba(255,255,255,.09) 0 1px,transparent 1px 5px),
    conic-gradient(from 30deg,rgba(255,255,255,0),rgba(255,255,255,.26) 12%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 52%,rgba(255,255,255,.2) 64%,rgba(255,255,255,0) 78%),#120a34;
  box-shadow:0 0 0 2px rgba(255,255,255,.16),0 24px 60px rgba(0,0,0,.38)}
@keyframes vspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html[data-palette] .hero:after{animation:none}}
.eq-hud{position:absolute;left:14px;bottom:44px;z-index:2;width:min(272px,44%);padding:11px 13px 12px;border-radius:16px;background:rgba(10,5,44,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#efebff;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.eq-hud-k{display:flex;align-items:center;gap:7px;font:800 10.5px/1 var(--ui,system-ui);letter-spacing:.16em;color:#ffb0dc}
.eq-hud-k i{width:7px;height:7px;border-radius:50%;background:#ff5fa8;box-shadow:0 0 10px #ff5fa8;animation:eqblink 1.4s ease-in-out infinite}
@keyframes eqblink{50%{opacity:.25}}
.eq-hud-t{margin:7px 0 6px;font:700 14px/1.3 var(--display,system-ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eq-hud-t b{color:#ffd1e8}
.eq-hud .vi,.eq-hud .en{display:inline}
html[data-lang="bi"] .eq-hud-t .en{display:block;font-size:.82em;font-weight:500;opacity:.8}
html[data-lang="bi"] .eq-hud .vi + .en::before{content:" / "}html[data-lang="bi"] .eq-hud-t .vi + .en::before{content:none}
.eq-hud-m{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:#cdc6f5}
.eq-hud-b{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#cdc6f5}
.eq-hud-bar{flex:1;height:6px;border-radius:9px;background:rgba(255,255,255,.18);overflow:hidden}
.eq-hud-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#6effb8,#7af0dc)}
.eq-vu{display:flex;align-items:flex-end;gap:3px;height:20px;margin-top:9px}
.eq-vu i{flex:1;height:100%;border-radius:2px;transform-origin:50% 100%;background:linear-gradient(180deg,#fff,#ff5fa8);animation:vu .9s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes vu{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eq-vu i,.eq-hud-k i{animation:none}.eq-vu i{transform:scaleY(.55)}}
@media (max-width:760px){.eq-hud{display:none}}