/* ==TOKENS== (sinh bằng code/ngoai-ngu/gen_music_tokens.js, đừng sửa tay) */
html[data-palette="neon"]{color-scheme:light;--brand:#6C47FF;--brand-dark:#4B2BD6;--accent:#F2A93B;--on-brand:#FFFFFF;--bg:#F6F4FF;--card:#FFFFFF;--text:#1B1740;--muted:#585387;--line:#D9D3F7;--soft:#E9E4FF;--sunk:#EDEAFF;--ok:#17714A;--ok-soft:#DDF3E8;--warn-soft:#FAE8DE;--on:#5236D9;--on-s:#EAE5FF;--off:#8A5A00;--off-s:#FFF1D6;--gold:#F2A93B;--hero-gold:#FFD1E8;--navy:#1B1146;--sky:#8FD8FF;--aqua:#8CF0E0;--mid:#3A22A8;--end:#FF5FA8;--chn:#BD2250;--eng:#2F5BE0;--ssa:#08716A;--enp:#6B3FE0;--ecr:#A04905;--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;--brand:#A58BFF;--brand-dark:#CDBFFF;--accent:#FFC764;--on-brand:#140B3D;--bg:#0A0820;--card:#14113A;--text:#EFEBFF;--muted:#BAB4EC;--line:#35307A;--soft:#251F60;--sunk:#1C1850;--ok:#6BD6A0;--ok-soft:#10301F;--warn-soft:#3E2A22;--on:#CDBFFF;--on-s:#251F60;--off:#FFDB94;--off-s:#3A2C0E;--gold:#FFC764;--hero-gold:#FFC3E0;--navy:#140B3F;--sky:#7FD0FF;--aqua:#7AF0DC;--mid:#2E1B86;--end:#C93C84;--chn:#FF7E9E;--eng:#8FB0FF;--ssa:#4FE0CC;--enp:#B59CFF;--ecr:#FFB866;--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;--brand:#A58BFF;--brand-dark:#CDBFFF;--accent:#FFC764;--on-brand:#140B3D;--bg:#0A0820;--card:#14113A;--text:#EFEBFF;--muted:#BAB4EC;--line:#35307A;--soft:#251F60;--sunk:#1C1850;--ok:#6BD6A0;--ok-soft:#10301F;--warn-soft:#3E2A22;--on:#CDBFFF;--on-s:#251F60;--off:#FFDB94;--off-s:#3A2C0E;--gold:#FFC764;--hero-gold:#FFC3E0;--navy:#140B3F;--sky:#7FD0FF;--aqua:#7AF0DC;--mid:#2E1B86;--end:#C93C84;--chn:#FF7E9E;--eng:#8FB0FF;--ssa:#4FE0CC;--enp:#B59CFF;--ecr:#FFB866;--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 trang chủ (token màu ở khối trên) ---------- */
html[data-palette]{--display:"Lexend","Be Vietnam Pro",system-ui,sans-serif}
html[data-palette] body{background:
  radial-gradient(900px 520px at 90% -8%,color-mix(in srgb,var(--end) 18%,transparent),transparent 62%),
  radial-gradient(800px 560px at -8% 2%,color-mix(in srgb,var(--brand) 18%,transparent),transparent 62%),
  radial-gradient(700px 420px at 50% 112%,color-mix(in srgb,var(--sky) 16%,transparent),transparent 60%),var(--bg)}
html[data-palette] .logo{font-weight:800;letter-spacing:-.03em}
html[data-palette] .hero{background:
  radial-gradient(520px 300px at 96% -6%,color-mix(in srgb,var(--end) 52%,transparent),transparent 70%),
  radial-gradient(520px 320px at 0% 108%,color-mix(in srgb,var(--mid) 70%,transparent),transparent 70%),
  linear-gradient(125deg,var(--navy) 0%,var(--mid) 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 h1{font-weight:700;font-size:clamp(26px,4.2vw,44px);line-height:1.14;letter-spacing:-.025em}
html[data-palette] .hero .stats .v,html[data-palette] .hero .stat b{font-family:var(--display)}
.hero>.eq-deco{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;align-items:flex-end;gap:4px;padding:0 20px;pointer-events:none;z-index:0;opacity:.55}
.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(--end) 70%,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 môn học + thanh tab */
html[data-palette] .gradebar{background:linear-gradient(90deg,var(--navy),var(--mid) 55%,var(--brand))}
html[data-palette] .topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--brand) 25%,var(--end) 75%,transparent);opacity:.65;pointer-events:none}
html[data-palette] .tabs a:hover,html[data-palette] .tabs a.active{background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--end) 60%,var(--brand)));color:var(--on-brand)}
html[data-palette] .btn{background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--end) 58%,var(--brand)));color:var(--on-brand);border-radius:12px;box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 32%,transparent)}
html[data-palette="neon"] .btn{color:#fff}
html[data-palette] .card{border-radius:20px}
html[data-palette] .sw-greet{border-radius:26px}
html[data-palette] .sw-bloom{background:linear-gradient(145deg,var(--soft),var(--card))}
html[data-palette] .sw-hi{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
html[data-palette] .sw-toast{background:linear-gradient(135deg,var(--brand),var(--end));color:#fff}
/* sân khấu EQ của Huỳnh Hương */
.eqs-sec{margin:26px 0 8px}
.eqs{position:relative;border-radius:28px;overflow:hidden;border:1px solid color-mix(in srgb,var(--end) 50%,var(--line));box-shadow:var(--shadow-lg),0 0 42px color-mix(in srgb,var(--brand) 22%,transparent);background:#07041f}
.eqs canvas{display:block;width:100%}
.eqs-tip{position:absolute;max-width:min(300px,86%);padding:10px 14px;border-radius:14px;background:rgba(10,5,44,.95);color:#efebff;border:1px solid rgba(255,255,255,.25);font:13px/1.45 system-ui,sans-serif;pointer-events:none;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.eqs-tip b{font-size:14px}.eqs-tip small{display:block;color:#cdc6f5;margin-top:3px;font-size:12px}
.eqs .vi,.eqs .en,.eqs-list .vi,.eqs-list .en{display:inline}.eqs .en,.eqs-list .en{display:none}
html[data-lang="en"] :is(.eqs,.eqs-list) .vi{display:none}html[data-lang="en"] :is(.eqs,.eqs-list) .en{display:inline}
html[data-lang="bi"] :is(.eqs,.eqs-list) .en{display:inline}html[data-lang="bi"] :is(.eqs,.eqs-list) .en::before{content:" / "}
.eqs-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:12.5px system-ui,sans-serif;color:#d6cfff;text-shadow:0 1px 6px #000;pointer-events:none;padding:0 12px}
.eqs-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.eqs-list a{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);border-left:5px solid hsl(var(--h),85%,62%);color:var(--text);text-decoration:none;transition:transform .15s,box-shadow .15s}
.eqs-list a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.eqs-list b{font-family:var(--display);font-size:15px;color:hsl(var(--h),70%,var(--eqs-l,42%))}
.eqs-n{font-size:13px;color:var(--muted)}
.eqs-bar{display:block;height:7px;border-radius:99px;background:var(--sunk);overflow:hidden}
.eqs-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,hsl(var(--h),90%,60%),hsl(calc(var(--h) + 30),95%,68%))}
.eqs-list small{color:var(--muted);font-size:12px}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--eqs-l:72%}}
html[data-theme="dark"]{--eqs-l:72%}
/* bảng "Đại dương" là bản gốc của portal.css, không khai báo các token này */
html[data-palette="ocean"]{--mid:#0B4C99;--end:#1A86D6;--on-brand:#fff}

/* ---------- Góc nhạc (bgm.js): nhạc nền "Có Chút Ngọt Ngào"; player YouTube luôn hiện, không có lớp nào đè lên ---------- */
.bgm{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:12px 24px;align-items:center;padding:18px;margin:0 0 var(--gap,16px);border-radius:26px;border:1px solid var(--line);background:linear-gradient(120deg,var(--card),color-mix(in srgb,var(--soft) 75%,var(--card)));box-shadow:var(--shadow);overflow:hidden}
.bgm:before{content:"";position:absolute;left:-70px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--end) 26%,transparent),transparent 70%);pointer-events:none}
.bgm>*{position:relative}
.bgm .en{display:none}html[data-lang="en"] .bgm .vi{display:none}html[data-lang="en"] .bgm .en{display:inline}html[data-lang="bi"] .bgm .en{display:inline}html[data-lang="bi"] .bgm .en::before{content:" / "}
.bgm-deck{display:flex;gap:20px;align-items:center;min-width:0}
.bgm-disc{flex:none;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#150a3a 0 2px,#22115a 2px 4px);box-shadow:0 12px 28px rgba(40,10,90,.4),inset 0 0 0 3px rgba(255,255,255,.45)}
.bgm-disc i{width:48%;height:48%;border-radius:50%;background:#ff9ccd center/cover;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 0 8px rgba(10,5,40,.55)}
.bgm.on .bgm-disc{animation:bgmspin 7s linear infinite}
@keyframes bgmspin{to{transform:rotate(360deg)}}
.bgm-info{min-width:0}
.bgm-eb{margin:0 0 5px;display:flex;align-items:center;gap:9px;font:800 11px/1 var(--ui,system-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.bgm-eq{display:inline-flex;gap:2px;align-items:flex-end;height:13px}
.bgm-eq i{width:3px;height:100%;border-radius:2px;background:var(--end);transform:scaleY(.3);transform-origin:50% 100%}
.bgm.on .bgm-eq i{animation:vu .8s ease-in-out infinite alternate}
.bgm-eq i:nth-child(2){animation-delay:-.2s!important}.bgm-eq i:nth-child(3){animation-delay:-.45s!important}.bgm-eq i:nth-child(4){animation-delay:-.1s!important}.bgm-eq i:nth-child(5){animation-delay:-.6s!important}
.bgm-t{margin:0;font:700 clamp(20px,2.6vw,27px)/1.2 var(--display,system-ui);letter-spacing:-.02em;color:var(--text)}
.bgm-a{margin:3px 0 0;font-size:14px;color:var(--muted)}
.bgm-sweet{margin:7px 0 12px;font-size:14.5px;color:var(--text)}
.bgm-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.bgm-play{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:0;border-radius:999px;cursor:pointer;font:700 14.5px/1 inherit;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--brand),var(--end));box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 34%,transparent);transition:transform .15s,box-shadow .15s}
.bgm-play:hover{transform:translateY(-1px)}
.bgm-play[aria-pressed="true"]{background:linear-gradient(135deg,var(--end),var(--brand))}
.bgm-vol{display:inline-flex;align-items:center;gap:7px;font-size:15px}
.bgm-vol input{width:112px;accent-color:var(--brand)}
.bgm-yt{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.bgm-msg{margin:10px 0 0;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.5;color:var(--text);background:var(--sunk);border:1px solid var(--line)}
.bgm-msg a{color:var(--brand);font-weight:700}
.bgm-pl{z-index:1;width:100%;min-width:0;aspect-ratio:16/9;min-height:200px;border-radius:18px;overflow:hidden;background:#07041f;box-shadow:0 14px 34px rgba(30,10,80,.34)}
.bgm-pl iframe,.bgm-pl>div:not(.bgm-face){position:absolute;inset:0;width:100%;height:100%}
.bgm-face{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;border:0;padding:0;cursor:pointer;background-color:#07041f;background-size:cover;background-position:center}
.bgm-bigplay{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;font-size:26px;padding-left:4px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--end));box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.22);transition:transform .15s}
.bgm-face:hover .bgm-bigplay{transform:scale(1.08)}
.bgm-credit{grid-column:1/-1;margin:2px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}
html.bgm-on .eq-deco i{animation-duration:calc(var(--t) * .55)}
@media (max-width:900px){.bgm{grid-template-columns:minmax(0,1fr);padding:16px}.bgm-disc{width:84px;height:84px}.bgm-deck{gap:14px;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.bgm.on .bgm-disc,.bgm.on .bgm-eq i{animation:none}}

/* ===== Thanh môn = trung tâm điều khiển (thay thẻ chế độ, thẻ môn học, danh mục bài) ===== */
.grades>li>button{position:relative;padding-bottom:15px}
.grades>li>button .gp{position:absolute;left:14px;right:14px;bottom:7px;height:3px;border-radius:9px;background:linear-gradient(90deg,var(--gold,#ffd36a),var(--end));max-width:calc(100% - 28px);opacity:.9;transform-origin:left;box-shadow:0 0 8px rgba(255,255,255,.35)}
.grades>li>button::before{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:3px;border-radius:9px;background:rgba(255,255,255,.16)}
.grades>li>button .gp{z-index:1}
.grades>li:hover:not(.open)>.mega{display:none}            /* mở bằng bấm, không bật lên khi chuột lướt ngang */
.grades>li.open>button{background:rgba(255,255,255,.16);box-shadow:inset 0 -3px 0 #fff}
.mega{padding:0;max-height:min(78vh,720px);scrollbar-width:thin}
.mega>*{margin-left:22px;margin-right:22px}
.mg-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;position:sticky;top:0;z-index:2;margin:0!important;padding:16px 22px 12px;background:linear-gradient(var(--card) 82%,transparent)}
.mg-ti{display:flex;align-items:baseline;gap:10px;font:700 19px var(--display,inherit)}
.mg-ti b{color:var(--c,var(--brand));font-size:22px}
.mg-pr{flex:1 1 260px;min-width:0;font-size:12.5px;color:var(--muted)}
.mg-pr .bar{margin-top:5px}
.mega .qlinks{margin-top:4px;margin-bottom:10px}
.mega details.grp{margin-bottom:0}
.mega details.grp:last-child{margin-bottom:16px}
.mega .les{padding-left:6px}
.mega .star{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;filter:grayscale(1);opacity:.5;transition:transform .15s,opacity .15s}
.mega .star:hover{opacity:1;transform:scale(1.15)}
.mega .star[aria-pressed="true"]{filter:none;opacity:1}
.mega .star:focus-visible{outline:2px solid var(--brand);border-radius:6px}
@media (max-width:980px){.mega>*{margin-left:14px;margin-right:14px}.mg-head{padding:12px 14px 10px}}
.mega .pill.vip{background:color-mix(in srgb,var(--accent) 14%,var(--card));color:color-mix(in srgb,var(--accent) 40%,var(--text));border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.mega .pill.vip:hover{background:var(--accent);color:#fff}
.mg-head .btn{margin-left:auto}