:root{
--bg:#0f1021; --bg2:#15172d; --card:#1b1d38; --card2:#262950; --line:#2e3163;
--text:#f3f3ff; --muted:#9a9cc4; --yellow:#ffd43b; --orange:#ff9f1c; --blue:#1cb0f6; --blue2:#1899d6;
--green:#58cc02; --green2:#46a302; --red:#ff4b4b; --red2:#d33131; --purple:#b366ff; --purple2:#9a4ae6; --pink:#ff5fa2;
--radius:18px; --zh:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:16px}
body{min-height:100vh;overflow-x:hidden}
#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:84px}
button{font-family:inherit;cursor:pointer;border:0;color:inherit}
input,textarea{font-family:inherit}
.zh{font-family:var(--zh)}
.muted{color:var(--muted)}
.hidden{display:none!important}
/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);display:flex;align-items:center;gap:12px;padding:14px 16px 10px}
.topbar .stat{display:flex;align-items:center;gap:6px;font-weight:800}
.topbar .stat .ic{font-size:22px}
.topbar .grow{flex:1}
.back{width:40px;height:40px;border-radius:12px;background:var(--card);font-size:20px;display:grid;place-items:center}
.title-bar{font-weight:800;font-size:18px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- Bottom nav ---------- */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;display:flex;background:#171925;border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.nav a{flex:1;text-align:center;padding:10px 0 8px;color:var(--muted);text-decoration:none;font-size:12px;font-weight:600}
.nav a .ic{display:block;font-size:24px;margin-bottom:2px;filter:grayscale(1);opacity:.7}
.nav a.on{color:var(--blue)}
.nav a.on .ic{filter:none;opacity:1}
/* ---------- Map ---------- */
.hero{margin:6px 16px 8px;padding:18px;border-radius:var(--radius);background:linear-gradient(135deg,#3b2a7a,#7b3fe4 60%,#ff5fa2);position:relative;overflow:hidden}
.hero h1{margin:0 0 4px;font-size:22px}
.hero p{margin:0;opacity:.9;font-size:14px}
.hero .mascot{position:absolute;right:10px;bottom:-6px;font-size:76px}
.map{position:relative;padding:20px 0 40px}
.map svg.path{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.node{position:relative;width:160px;text-align:center;margin:0 0 26px}
.node .bubble{width:92px;height:92px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:40px;background:var(--card2);border:4px solid var(--line);box-shadow:0 6px 0 #0d0e15;transition:transform .15s}
.node.open .bubble{background:radial-gradient(circle at 30% 30%,#ffe066,#ff9f1c);border-color:#ffd43b}
.node.done .bubble{background:radial-gradient(circle at 30% 30%,#8ee04a,#46a302);border-color:#a3e635}
.node.lock .bubble{filter:grayscale(1);opacity:.5}
.node:active .bubble{transform:translateY(4px);box-shadow:0 2px 0 #0d0e15}
.node .lbl{margin-top:8px;background:#5b5f78;border-radius:12px;padding:6px 10px;font-weight:700;font-size:14px;display:inline-block;max-width:160px}
.node .lbl small{display:block;font-weight:400;font-size:11px;opacity:.85}
.stars{color:#5b5f78;font-size:18px;letter-spacing:2px;margin-top:4px}
.stars b{color:var(--yellow);font-weight:400}
.continue{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:25}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:16px;font-weight:800;font-size:16px;background:var(--blue);box-shadow:0 4px 0 var(--blue2);color:#fff;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue2)}
.btn.green{background:var(--green);box-shadow:0 4px 0 var(--green2)}
.btn.red{background:var(--red);box-shadow:0 4px 0 var(--red2)}
.btn.purple{background:var(--purple);box-shadow:0 4px 0 var(--purple2)}
.btn.ghost{background:var(--card2);box-shadow:0 4px 0 #15161f}
.btn.yellow{background:var(--yellow);color:#3a2a00;box-shadow:0 4px 0 #d9a800}
.btn.block{display:flex;width:100%}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:12px}
.btn:disabled{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--card2);font-weight:700;font-size:14px}
.chip.on{background:var(--blue);color:#fff}
.seg{display:flex;background:var(--card);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;padding:9px 6px;border-radius:10px;background:transparent;font-weight:700;color:var(--muted);font-size:14px}
.seg button.on{background:var(--card2);color:#fff}
/* ---------- Cards / lists ---------- */
.wrap{padding:0 16px}
.card{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.section-t{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:800;margin:18px 4px 10px}
.mod{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);padding:14px;margin-bottom:12px;text-decoration:none;color:inherit;border:2px solid transparent}
.mod:active{border-color:var(--line)}
.mod .mi{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:28px;flex:none}
.mod .mt{flex:1;min-width:0}
.mod .mt b{display:block;font-size:16px}
.mod .mt span{font-size:13px;color:var(--muted)}
.mod .ms{font-size:14px;color:var(--yellow);white-space:nowrap}
.bg-y{background:#4a3b0b}.bg-b{background:#0d3a52}.bg-p{background:#3b1d5c}.bg-g{background:#1f3d0b}.bg-r{background:#4d1717}.bg-o{background:#4d2e08}.bg-k{background:#14304a}
.lesson-head{margin:4px 16px 14px;padding:18px;border-radius:var(--radius);background:linear-gradient(135deg,#ff9f1c,#ff5f6d)}
.lesson-head .n{font-weight:800;opacity:.9;font-size:13px}
.lesson-head .h{font-family:var(--zh);font-size:30px;font-weight:700;margin:4px 0}
.lesson-head .p{opacity:.95}
/* ---------- Vocab ---------- */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vcard{background:var(--card);border-radius:16px;padding:14px 12px;text-align:center;position:relative}
.vcard .pic{font-size:30px;height:36px;display:flex;align-items:center;justify-content:center}
.vcard .hz{font-family:var(--zh);font-size:34px;font-weight:700;margin:4px 0 0}
.vcard .py{color:var(--yellow);font-weight:600}
.vcard .vi{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.3}
.flag{width:44px;height:30px;border-radius:4px;vertical-align:middle;box-shadow:0 0 0 1px #0003}
.big-flag .flag{width:80px;height:54px}
.sheet-bg{position:fixed;inset:0;background:#000a;z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
.sheet{background:var(--bg2);width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:18px 18px 28px;animation:up .2s}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}
.sheet .grab{width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 12px}
.detail-hz{display:flex;gap:16px;align-items:center}
.detail-hz .h{font-family:var(--zh);font-size:54px;font-weight:700;line-height:1}
.detail-hz .p{font-size:22px;color:var(--yellow);font-weight:700}
.kv{display:grid;grid-template-columns:90px 1fr;gap:8px 10px;margin:14px 0;font-size:15px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.ex{background:var(--card);border-radius:14px;padding:12px 14px;margin-top:8px;display:flex;gap:10px;align-items:flex-start}
.ex .h{font-family:var(--zh);font-size:20px}
.ex .p{color:var(--yellow);font-size:14px}
.ex .v{color:var(--muted);font-size:14px}
.speak{width:38px;height:38px;border-radius:50%;background:var(--blue);display:grid;place-items:center;font-size:18px;flex:none;box-shadow:0 3px 0 var(--blue2)}
.speak:active{transform:translateY(2px);box-shadow:none}
.stroke-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.mizi{position:relative;background:#fff;border-radius:10px;overflow:hidden}
.mizi svg.grid{position:absolute;inset:0;width:100%;height:100%}
.mizi .hw{position:relative}
/* ---------- Flashcard ---------- */
.fc-wrap{perspective:1200px;margin:10px 0 18px}
.fc{position:relative;height:330px;transition:transform .5s;transform-style:preserve-3d;cursor:pointer}
.fc.flip{transform:rotateY(180deg)}
.fc .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;background:linear-gradient(160deg,#2f3350,#232536);border:2px solid var(--line)}
.fc .bk{transform:rotateY(180deg);background:linear-gradient(160deg,#3b2a7a,#2a1f55)}
.fc .face .hz{font-family:var(--zh);font-size:72px;font-weight:700}
.fc .face .py{font-size:24px;color:var(--yellow);font-weight:700}
.fc .face .vi{font-size:24px;font-weight:700}
.fc .face .en{color:var(--muted);margin-top:6px}
.fc .tap{position:absolute;bottom:14px;font-size:12px;color:var(--muted)}
.progress{height:14px;background:var(--card2);border-radius:10px;overflow:hidden;flex:1}
.progress i{display:block;height:100%;background:var(--yellow);border-radius:10px;transition:width .3s}
/* ---------- Exercise ---------- */
.ex-top{display:flex;align-items:center;gap:12px;padding:14px 16px}
.ex-top .x{font-size:22px;background:none;color:var(--muted)}
.qbox{padding:6px 16px 140px}
.qtitle{font-size:19px;font-weight:800;margin:6px 0 14px;line-height:1.35;display:flex;gap:8px}
.qtitle .qi{color:var(--blue)}
.qzh{font-family:var(--zh);font-size:26px;margin:4px 0 2px}
.qpy{color:var(--yellow);margin-bottom:10px}
.opts{display:flex;flex-direction:column;gap:10px}
.opts.grid2{display:grid;grid-template-columns:1fr 1fr}
.opt{background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:16px 14px;font-weight:600;font-size:17px;text-align:center;box-shadow:0 4px 0 #0f1019;line-height:1.35}
.opt .zh{font-size:22px}
.opt.sel{border-color:var(--blue);background:#0f2f45;box-shadow:0 4px 0 var(--blue2)}
.opt.ok{border-color:var(--green);background:#1d3a0c;box-shadow:0 4px 0 var(--green2)}
.opt.bad{border-color:var(--red);background:#451818;box-shadow:0 4px 0 var(--red2)}
.opt.pic{font-size:40px;padding:14px 8px}
.opt.pic small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:6px}
.opt.pic .k{position:absolute;margin:-8px 0 0 -6px;font-size:13px;background:var(--card2);border-radius:8px;padding:2px 7px}
.picshow{font-size:84px;text-align:center;margin:8px 0 14px;line-height:1.1}
.picshow .flag{width:120px;height:80px}
.foot{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;padding:14px 16px calc(18px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);z-index:40}
.foot.ok{background:#1d3a0c;border-color:#2c5512}
.foot.bad{background:#451818;border-color:#6a2222}
.foot .fb{font-weight:800;font-size:18px;margin-bottom:10px;display:flex;gap:8px;align-items:flex-start}
.foot .fb small{display:block;font-weight:500;font-size:14px;opacity:.9;margin-top:4px}
.foot.ok .fb{color:#a3f26b}.foot.bad .fb{color:#ff9b9b}
.player{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:12px 14px;margin:6px 0 14px}
.player .pb{width:54px;height:54px;border-radius:50%;background:var(--blue);font-size:22px;display:grid;place-items:center;box-shadow:0 4px 0 var(--blue2);flex:none}
.player .pb.slow{width:42px;height:42px;font-size:18px;background:var(--card2);box-shadow:0 3px 0 #111}
.player .pinfo{flex:1;font-size:13px;color:var(--muted)}
.player .bar{height:6px;background:var(--card2);border-radius:6px;margin-top:6px;overflow:hidden}
.player .bar i{display:block;height:100%;width:0;background:var(--blue)}
.blank{display:inline-block;min-width:64px;border-bottom:3px solid var(--blue);text-align:center;margin:0 4px;padding:0 4px;color:var(--yellow);font-family:var(--zh)}
.bank{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bank .w{background:var(--bg2);border:2px solid var(--line);border-radius:12px;padding:10px 14px;font-family:var(--zh);font-size:22px;box-shadow:0 3px 0 #0f1019}
.bank .w.used{opacity:.25;pointer-events:none}
.answer-line{min-height:64px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;margin-bottom:6px}
.answer-line .w{background:var(--card2);border-radius:12px;padding:8px 12px;font-family:var(--zh);font-size:22px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match .opt{font-family:var(--zh);font-size:18px;padding:12px 8px}
.match .opt.done{opacity:.35;pointer-events:none;border-color:var(--green)}
textarea.inp,input.inp{width:100%;background:var(--bg2);border:2px solid var(--line);border-radius:14px;color:var(--text);padding:14px;font-size:20px;resize:none}
textarea.inp:focus,input.inp:focus{outline:none;border-color:var(--blue)}
.tok{display:flex;flex-wrap:wrap;gap:8px}
.tok .opt{font-family:var(--zh);font-size:22px;padding:12px 14px}
.note{background:#2a2f1a;border-left:4px solid var(--yellow);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;margin:10px 0;color:#f3f0d0}
.src{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
/* ---------- Result ---------- */
.result{text-align:center;padding:40px 20px}
.result .big{font-size:72px;font-weight:800;color:var(--yellow);line-height:1}
.result .rstars{font-size:52px;letter-spacing:6px;margin:14px 0}
.result .rstars span{color:#3a3d55}.result .rstars b{color:var(--yellow);font-weight:400;display:inline-block;animation:pop .5s backwards}
.result .rstars b:nth-child(2){animation-delay:.2s}.result .rstars b:nth-child(3){animation-delay:.4s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.review{text-align:left;margin-top:20px}
.review .ri{background:var(--card);border-radius:14px;padding:10px 12px;margin-bottom:8px;font-size:14px;display:flex;gap:10px}
.review .ri b{font-family:var(--zh)}
/* ---------- Dialogue (Bài khóa) ---------- */
.dlg .line{display:flex;gap:10px;align-items:flex-start;margin:12px 0}
.dlg .who{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none;font-size:14px}
.dlg .who.A{background:#0d3a52;color:var(--blue)}.dlg .who.B{background:#4d1d3a;color:var(--pink)}
.dlg .bub{background:var(--card2);border-radius:4px 16px 16px 16px;padding:10px 12px;flex:1}
.dlg .bub .p{color:var(--yellow);font-size:14px;min-height:1em}
.dlg .bub .h{font-family:var(--zh);font-size:24px;line-height:1.4}
.dlg .bub .v{color:var(--muted);font-size:14px;margin-top:2px}
.dlg .acts{display:flex;flex-direction:column;gap:6px}
.dlg .acts button{width:34px;height:34px;border-radius:50%;background:var(--card);font-size:16px}
.ruby-off .p{visibility:hidden;height:0;min-height:0!important;overflow:hidden}
.vi-off .v{display:none}
.diff span{font-family:var(--zh);font-size:22px;padding:0 1px;border-radius:4px}
.diff .g{color:#a3f26b}.diff .r{color:#ff8080;text-decoration:underline wavy}
.score-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:800;font-size:14px}
.score-pill.hi{background:#1d3a0c;color:#a3f26b}.score-pill.mid{background:#4a3b0b;color:var(--yellow)}.score-pill.lo{background:#451818;color:#ff9b9b}
.rec{width:74px;height:74px;border-radius:50%;background:var(--red);font-size:32px;display:grid;place-items:center;box-shadow:0 5px 0 var(--red2);margin:0 auto}
.rec.on{animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #ff4b4b88}100%{box-shadow:0 0 0 22px #ff4b4b00}}
/* ---------- Profile ---------- */
.prof{display:flex;align-items:center;gap:14px;padding:6px 16px 14px}
.prof .av{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#7b3fe4,#ff5fa2);display:grid;place-items:center;font-size:36px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-grid .card{margin:0}
.stat-grid .n{font-size:30px;font-weight:800}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.badge{font-size:12px;color:var(--muted)}
.badge .bi{width:56px;height:56px;margin:0 auto 6px;border-radius:16px;background:var(--card2);display:grid;place-items:center;font-size:28px;filter:grayscale(1);opacity:.5}
.badge.got .bi{filter:none;opacity:1;background:#4a3b0b}
.badge.got{color:var(--text)}
/* ---------- Onboarding ---------- */
.onb{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 24px;text-align:center;background:radial-gradient(circle at 50% 30%,#3b2a7a,#14151f 70%)}
.onb .m{font-size:110px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.onb h1{font-size:28px;margin:18px 0 6px}
.onb p{color:var(--muted);margin:0 0 24px}
#toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-120px);background:#fff;color:#111;font-weight:700;padding:10px 18px;border-radius:999px;z-index:99;transition:transform .3s;box-shadow:0 8px 24px #0008;max-width:90vw;text-align:center}
#toast.on{transform:translateX(-50%) translateY(0)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:98;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:fall 1.8s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
a{color:inherit}
.back{text-decoration:none;color:var(--text)}
.node{display:block;text-decoration:none;color:var(--text)}
.hero p{padding-right:90px}
.mod .ms .stars,.ms b{font-size:15px}
.ms.st{color:#5b5f78;letter-spacing:1px}
.ms.st b{color:var(--yellow);font-weight:400}
/* =================== BỔ SUNG V2 =================== */
.theme-btn{width:38px;height:38px;border-radius:12px;background:var(--card);font-size:18px}
.sec-lbl{font-weight:800;color:var(--blue);font-size:14px;letter-spacing:.3px;margin:2px 0 12px;padding:8px 12px;border-radius:12px;background:var(--card)}
.formula{font-family:var(--zh);font-size:18px;font-weight:700;background:var(--card2);border-left:4px solid var(--pink);border-radius:10px;padding:10px 12px;margin:10px 0}
.mini{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.hz-grid{display:grid;grid-template-columns:1fr;gap:10px}
.hz-note{display:flex;gap:14px;align-items:center;text-align:left;margin:0;width:100%}
.hz-big{font-size:46px;font-weight:700;width:64px;height:64px;display:grid;place-items:center;border-radius:14px;background:var(--card2);flex:none}
.py-y{color:var(--orange);font-weight:800}
.node.kt .bubble{background:radial-gradient(circle at 30% 30%,#c4b5fd,#7c3aed);border-color:#a78bfa}
.node.kt.done .bubble{background:radial-gradient(circle at 30% 30%,#fde68a,#f59e0b);border-color:#fbbf24}
.mizi{touch-action:none;-webkit-user-select:none;user-select:none}
/* ---------- Màn hình laptop (cảm ứng) ---------- */
@media (min-width:900px){
#app{max-width:960px}
.nav{max-width:960px}
.foot{max-width:760px}
.qbox,.ex-top{max-width:760px;margin-left:auto;margin-right:auto}
.vgrid{grid-template-columns:repeat(4,1fr)}
.hz-grid{grid-template-columns:1fr 1fr}
.stat-grid{grid-template-columns:repeat(4,1fr)}
.wrap:has(> .mod){display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.wrap:has(> .mod) > *{grid-column:1/-1}
.wrap:has(> .mod) > .mod{grid-column:auto;margin:0}
.hero{padding:26px}
.hero h1{font-size:28px}
.opt{font-size:19px;padding:18px}
.fc{height:380px}
}
/* =================== NỀN SÁNG (mặc định) =================== */
html[data-theme="light"]{
--bg:#fff7ec; --bg2:#ffffff; --card:#ffffff; --card2:#f3eefe; --line:#ebe2f7;
--text:#2d2545; --muted:#857c9e; --yellow:#f5b400; --orange:#ff8a00; --blue:#1cb0f6; --blue2:#1593cf;
--green:#58cc02; --green2:#46a302; --red:#ff4b4b; --red2:#d33131; --purple:#a855f7; --purple2:#8b3fd9; --pink:#ff5fa2;
}
html[data-theme="light"] body{background:radial-gradient(1200px 600px at 100% -10%,#ffe3f1 0%,transparent 55%),radial-gradient(900px 500px at -10% 10%,#e0f2ff 0%,transparent 55%),var(--bg);background-attachment:fixed}
html[data-theme="light"] .topbar{background:rgba(255,247,236,.92);backdrop-filter:blur(8px)}
html[data-theme="light"] .card,html[data-theme="light"] .mod,html[data-theme="light"] .vcard,html[data-theme="light"] .player,html[data-theme="light"] .sec-lbl{box-shadow:0 4px 0 #ece3f8,0 6px 18px #b7a6d61f;border:1.5px solid var(--line)}
html[data-theme="light"] .nav{background:#ffffffee;backdrop-filter:blur(8px);border-top:1.5px solid var(--line)}
html[data-theme="light"] .node .bubble{background:#efe9fb;border-color:#ddd2f3;box-shadow:0 6px 0 #d8cdee}
html[data-theme="light"] .node.open .bubble{background:radial-gradient(circle at 30% 30%,#fff3b0,#ffb020);border-color:#ffd166}
html[data-theme="light"] .node.done .bubble{background:radial-gradient(circle at 30% 30%,#c9f59f,#58cc02);border-color:#a3e635}
html[data-theme="light"] .node .lbl{background:#ffffff;color:var(--text);border:1.5px solid var(--line);box-shadow:0 3px 0 #ece3f8}
html[data-theme="light"] .stars,html[data-theme="light"] .ms.st{color:#d9d1e8}
html[data-theme="light"] .result .rstars span{color:#e6def3}
html[data-theme="light"] .btn.ghost{background:#ffffff;color:var(--text);box-shadow:0 4px 0 #e2d8f2;border:1.5px solid var(--line)}
html[data-theme="light"] .back,html[data-theme="light"] .theme-btn{background:#fff;border:1.5px solid var(--line)}
html[data-theme="light"] .opt{background:#fff;border-color:#e4dcf1;box-shadow:0 4px 0 #e4dcf1;color:var(--text)}
html[data-theme="light"] .opt.sel{background:#e3f5fe;border-color:var(--blue);box-shadow:0 4px 0 #9ad8f7}
html[data-theme="light"] .opt.ok{background:#e9fbd9;border-color:var(--green);box-shadow:0 4px 0 #b6e889}
html[data-theme="light"] .opt.bad{background:#ffe8e8;border-color:var(--red);box-shadow:0 4px 0 #ffb3b3}
html[data-theme="light"] .bank .w{background:#fff;border-color:#e4dcf1;box-shadow:0 3px 0 #e4dcf1;color:var(--text)}
html[data-theme="light"] .answer-line .w{background:#f3eefe}
html[data-theme="light"] .foot{background:#fffdf8}
html[data-theme="light"] .foot.ok{background:#e9fbd9;border-color:#c2ee99}
html[data-theme="light"] .foot.bad{background:#ffe8e8;border-color:#ffc2c2}
html[data-theme="light"] .foot.ok .fb{color:#3d8c00}
html[data-theme="light"] .foot.bad .fb{color:#d33131}
html[data-theme="light"] .note{background:#fff6d6;border-left-color:#f5b400;color:#5b4a00}
html[data-theme="light"] .bg-y{background:#fff1c2}html[data-theme="light"] .bg-b{background:#dff3fd}html[data-theme="light"] .bg-p{background:#f1e5ff}html[data-theme="light"] .bg-g{background:#e4f8d2}html[data-theme="light"] .bg-r{background:#ffe2e6}html[data-theme="light"] .bg-o{background:#ffe9d1}html[data-theme="light"] .bg-k{background:#e0ecff}
html[data-theme="light"] .ms{color:var(--orange)}
html[data-theme="light"] .vcard .py,html[data-theme="light"] .detail-hz .p,html[data-theme="light"] .ex .p,html[data-theme="light"] .qpy,html[data-theme="light"] .dlg .bub .p,html[data-theme="light"] .fc .face .py{color:#e07b00}
html[data-theme="light"] .fc .face{background:linear-gradient(160deg,#ffffff,#f6f0ff);border-color:var(--line);box-shadow:0 8px 0 #e6dcf6}
html[data-theme="light"] .fc .bk{background:linear-gradient(160deg,#fff4e0,#ffe6f2)}
html[data-theme="light"] .dlg .bub{background:#f6f2ff}
html[data-theme="light"] .dlg .who.A{background:#dff3fd}html[data-theme="light"] .dlg .who.B{background:#ffe2ef}
html[data-theme="light"] .dlg .acts button{background:#f3eefe}
html[data-theme="light"] .score-pill.hi{background:#e4f8d2;color:#3d8c00}html[data-theme="light"] .score-pill.mid{background:#fff1c2;color:#9a6b00}html[data-theme="light"] .score-pill.lo{background:#ffe2e6;color:#c62828}
html[data-theme="light"] .diff .g{color:#3d8c00}html[data-theme="light"] .diff .r{color:#d33131}
html[data-theme="light"] .badge.got .bi{background:#fff1c2}
html[data-theme="light"] .player .pb.slow{background:#f3eefe;box-shadow:0 3px 0 #e2d8f2}
html[data-theme="light"] .onb{background:radial-gradient(circle at 50% 30%,#ffe3f1,#fff7ec 70%)}
html[data-theme="light"] .lesson-head{color:#fff;box-shadow:0 6px 0 #f0a07a}
html[data-theme="light"] .hero{color:#fff;box-shadow:0 6px 0 #c58ad8}
html[data-theme="light"] .sheet{background:#fffdf8}
html[data-theme="light"] .chip{background:#f3eefe;color:var(--text)}
html[data-theme="light"] .seg{background:#efe9fb}html[data-theme="light"] .seg button.on{background:#fff;color:var(--text);box-shadow:0 2px 0 #e2d8f2}
html[data-theme="light"] textarea.inp,html[data-theme="light"] input.inp{background:#fff;border-color:#e4dcf1;color:var(--text)}
html[data-theme="light"] .progress{background:#efe9fb}
html[data-theme="light"] .ex{background:#f8f5ff}
html[data-theme="light"] #toast{background:#2d2545;color:#fff}
html[data-theme="light"] .formula{background:#fff3f8}
html[data-theme="light"] .hz-big{background:#fff3e0;color:#c2410c}
html[data-theme="light"]{--path:#cbbde6}
/* =================== V3 – HSK For You (Ewa-style dark) =================== */
html:not([data-theme="light"]) body{background:radial-gradient(900px 500px at 110% -10%,#3a1f7a55 0%,transparent 60%),radial-gradient(700px 500px at -20% 30%,#1d4a8a33 0%,transparent 60%),var(--bg);background-attachment:fixed}
.emo{height:1.15em;width:auto;vertical-align:-0.22em;display:inline-block}
.topbar{backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 88%,transparent)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-family:var(--zh);font-weight:700;font-size:22px;color:#fff;background:linear-gradient(135deg,#ff5f8f,#7c5cff);box-shadow:0 4px 14px #7c5cff55}
.brand b{display:block;font-size:17px;letter-spacing:.2px}.brand small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.back.home{font-size:18px}
.theme-btn{display:grid;place-items:center;text-decoration:none}
.hero{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#2b1d6b 0%,#4b2bb3 45%,#8b3fd9 75%,#d9479b 100%);padding:22px 20px;border-radius:24px;box-shadow:0 14px 40px #4b2bb355}
.hero-t{flex:1;min-width:0}.hero .kicker{font-size:12px;font-weight:800;letter-spacing:2px;color:#ffd76a;text-transform:uppercase}
.hero h1{font-size:26px;margin:4px 0 2px;font-family:var(--zh),'Be Vietnam Pro'}.hero p{padding:0;margin:0;opacity:.9}
.hero .mascot{position:static;font-size:84px;flex:none;filter:drop-shadow(0 8px 16px #0006)}
.hero-bar{height:8px;border-radius:8px;background:#ffffff2a;margin:12px 0;overflow:hidden}.hero-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd76a,#ff9f1c);border-radius:8px}
.hero-btns{display:flex;gap:8px;flex-wrap:wrap}.hero-btns .btn{text-decoration:none}
.node .bubble{width:100px;height:100px;font-size:58px;background:linear-gradient(160deg,#2c2f5e,#1e2045);border-color:#3a3e78;box-shadow:0 7px 0 #0b0c1d,0 10px 24px #0007}
.node.open .bubble{background:radial-gradient(circle at 30% 25%,#ffe58a,#ffb020 60%,#f08a00);border-color:#ffd76a}
.node.done .bubble{background:radial-gradient(circle at 30% 25%,#b8f57a,#58cc02 60%,#3d9a00);border-color:#a3e635}
.node.kt .bubble{background:radial-gradient(circle at 30% 25%,#d8c8ff,#8a5cff 60%,#6236e0);border-color:#b39bff}
.node .lbl{background:#22254a;border:1px solid #33376b;color:var(--text)}
.lesson-head{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#ff8a3d,#ff4d7d 60%,#a64dff);box-shadow:0 12px 30px #ff4d7d44}
.lesson-head .lh-ic{font-size:70px;line-height:1;flex:none;filter:drop-shadow(0 6px 12px #0005)}
.lesson-head .stars{color:#ffffff55}.lesson-head .stars b{color:#fff3a0}
.mod{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line)}
.mod .mi{width:56px;height:56px;font-size:32px;border-radius:16px}
.mod.big{padding:18px}.mod.big .mi{width:64px;height:64px;font-size:38px}
.mod.opt-set{opacity:.75;border-style:dashed}
html:not([data-theme="light"]) .bg-y{background:#3b300d}html:not([data-theme="light"]) .bg-b{background:#0c3150}html:not([data-theme="light"]) .bg-p{background:#33205e}html:not([data-theme="light"]) .bg-g{background:#1b3a10}html:not([data-theme="light"]) .bg-r{background:#4a1a2a}html:not([data-theme="light"]) .bg-o{background:#47290b}html:not([data-theme="light"]) .bg-k{background:#16285a}
.vcard .pic{font-size:48px;height:56px}.vcard{border:1px solid var(--line)}
.picshow{font-size:110px}.opt.pic{font-size:52px}
.test-cta{display:flex;align-items:center;gap:12px;justify-content:space-between;background:linear-gradient(135deg,#33205e,#1b1d38);border:1px solid #4b3a8a;border-radius:18px;padding:14px 16px;margin-bottom:14px}
.test-cta .btn{text-decoration:none;flex:none}
.tab-h h2{margin:6px 0 2px;font-size:24px}.tab-h p{margin:0 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{text-decoration:none;color:var(--text);border:0}
.grid2c{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.tile{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:16px 12px;text-align:left;display:flex;flex-direction:column;gap:4px}
.tile .ti{font-size:40px}.tile b{font-size:16px}.tile small{color:var(--muted)}
.unit-ic{font-size:30px}.unit-ic.sm{font-size:36px;flex:none}
.read-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.read-row .btn{text-decoration:none}
.float-py{position:fixed;right:max(8px,calc(50% - 260px - 70px));top:40%;z-index:35;display:flex;flex-direction:column;gap:8px}
@media (max-width:640px){.float-py{right:6px}}
.float-py button{width:58px;padding:9px 4px;border-radius:14px;background:var(--card2);border:2px solid var(--line);font-family:var(--zh);font-weight:700;font-size:15px;line-height:1.1;box-shadow:0 6px 16px #0006}
.float-py button small{display:block;font-family:'Be Vietnam Pro';font-size:11px;font-weight:700;margin-top:2px}
.float-py button.on{background:var(--purple);border-color:#c9a2ff;color:#fff}
.player{flex-wrap:nowrap}.player .pmid{flex:1;min-width:0}.player .pinfo{flex:none}
.player .bar{height:10px;cursor:pointer;position:relative;overflow:visible;touch-action:none;margin-top:8px}
.player .bar i{background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:6px}
.player .bar b{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);left:0;box-shadow:0 2px 6px #0007}
.player .ptime{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}
.player .pside{display:flex;gap:6px;flex:none}
.player .pb.sm{width:38px;height:38px;font-size:16px;background:var(--card2);box-shadow:0 3px 0 #0a0b18}
.player .pb.slow.on{background:var(--orange)}
.ex-top .home-x{text-decoration:none;font-size:20px}
.pageimg{background:#fff;border-radius:14px;margin:0 16px 10px;overflow:hidden;position:relative;max-height:62vh;overflow-y:auto}
.pageimg img{width:100%;display:block;cursor:zoom-in}
.pageimg.mini{max-height:120px;overflow:hidden}
.pi-bar{position:sticky;bottom:0;display:flex;gap:8px;justify-content:center;padding:8px;background:linear-gradient(transparent,#000a)}
.ex-persist .player{margin:0 16px 10px}
.zoom-bg{position:fixed;inset:0;background:#000d;z-index:120;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:16px}
.zoom-bg img{width:min(1000px,100%);background:#fff;border-radius:8px}.zoom-x{position:fixed;top:12px;right:12px}
.exam-page img{width:100%;background:#fff;border-radius:10px;cursor:zoom-in}
.ep-h{font-weight:800;margin-bottom:8px;color:var(--yellow)}
.eq{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.eqn{width:34px;font-weight:800}
.eo{min-width:44px;height:40px;border-radius:12px;background:var(--bg2);border:2px solid var(--line);font-weight:800;font-size:16px}
.eo.sel{background:var(--blue);border-color:#7fd3ff;color:#fff}.eo.ok{background:var(--green);border-color:#a3e635;color:#fff}.eo.bad{background:var(--red);color:#fff}
.exam-player{position:sticky;top:64px;z-index:15}
.note-sec summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center;list-style:none}
.note-body{margin-top:10px;line-height:1.7;font-size:15px}.note-body .zhl{font-family:var(--zh);cursor:pointer;color:var(--yellow)}
.dlg .bub .h{font-size:26px}
@media (min-width:900px){.grid2c{grid-template-columns:repeat(3,1fr)}.wrap:has(> .mod.big){grid-template-columns:1fr 1fr}}
html[data-theme="light"] .node .lbl{background:#fff}
html[data-theme="light"] .float-py button{background:#fff}
html[data-theme="light"] .test-cta{background:linear-gradient(135deg,#f1e5ff,#fff)}
html[data-theme="light"] .tile,html[data-theme="light"] .mod{background:#fff}
.pi-bar .chip{white-space:nowrap;font-size:13px;padding:7px 12px;background:#fffffff0;color:#222;box-shadow:0 2px 8px #0005}
.pageimg{max-height:52vh}
.lesson-head .h{font-size:clamp(22px,6vw,30px);line-height:1.25}
.float-py button{width:50px;padding:7px 2px;font-size:13px;opacity:.95}
@media (max-width:640px){.has-float{padding-right:58px}}
/* v5: nút 拼音/Nghĩa nhỏ trong góc khung */
.float-py{display:none!important}
.card.dlg{position:relative;padding-top:44px}
.dlg-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}
.dlg-tools button{display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;font:700 12px var(--zh),'Be Vietnam Pro',sans-serif;background:var(--card2);border:1.5px solid var(--line);color:var(--muted);cursor:pointer}
.dlg-tools button i{font-style:normal;font-size:11px}
.dlg-tools button.on{background:var(--purple);border-color:#c9a2ff;color:#fff}
html[data-theme="light"] .dlg-tools button{background:#fff}
html[data-theme="light"] .dlg-tools button.on{background:var(--purple);color:#fff}
/* hình câu hỏi phần nghe */
.qpic{display:block;max-width:100%;max-height:260px;margin:0 auto 14px;border-radius:14px;background:#fff;padding:6px}
.opt.qopt{padding:8px;position:relative;display:flex;align-items:center;justify-content:center;min-height:120px;background:#fff}
.opt.qopt img{max-width:100%;max-height:150px;border-radius:8px;display:block}
.opt.qopt .k{position:absolute;top:6px;left:8px;background:var(--purple);color:#fff;border-radius:8px;padding:1px 8px;font-weight:800;font-size:15px}
.opt.qopt.sel{outline:4px solid var(--purple)}
.opt.qopt.ok{outline:4px solid var(--green)}.opt.qopt.bad{outline:4px solid var(--red)}
/* v5: cấp độ + đăng nhập */
.lv-chip{margin-left:8px;padding:4px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--card2);color:inherit;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.kicker.lv-kick{background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
.lv-list{display:flex;flex-direction:column;gap:10px}
.lv{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border-radius:16px;border:2px solid var(--line);background:var(--card2);color:inherit;cursor:pointer}
.lv.on{border-color:var(--purple)}.lv.soon{opacity:.55}
.lv-badge{min-width:66px;text-align:center;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border-radius:12px;padding:8px 6px;font-weight:800;line-height:1.1}
.lv-badge small{display:block;font-size:12px;opacity:.9}
.lv-t{flex:1}.lv-t small{display:block;color:var(--muted);font-size:13px;margin-top:2px}.lv-ck{font-size:18px}
.btn.google{background:#fff;color:#222;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn.google .g,.google-chip b{font-weight:900;background:conic-gradient(#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:20px}
.ava{border-radius:50%;object-fit:cover;vertical-align:middle}
.theme-btn .ava{display:block}
@media (max-width:420px){.brand small{display:block;font-size:9.5px;white-space:nowrap}}
/* sổ tay */
.note-body .nl{margin:8px 0;padding:8px 12px;border-radius:12px;background:var(--card2);cursor:pointer}
.note-body .nl-f{border-left:4px solid var(--pink)}
.nl-py{color:var(--yellow,#ffd166);font-size:13px}
.nl-zh{font-family:var(--zh);font-size:19px;font-weight:700}
.nl-sp{font-size:13px;opacity:.6}
.nl-vi{color:var(--muted);font-size:14px;margin-top:2px}
.nl-t{margin:10px 0 4px;line-height:1.55}
html[data-theme="light"] .nl-py{color:#b26a00}
.brand b{white-space:nowrap}
.theme-btn{flex:none}
@media (max-width:480px){.topbar{gap:8px;padding:12px 10px 8px}.brand{gap:7px}.brand .logo{width:34px;height:34px;font-size:19px}.brand b{font-size:15px}.lv-chip{margin-left:2px;padding:3px 8px;font-size:12px}.topbar .stat{gap:3px;font-size:14px}.theme-btn{width:34px;height:34px}}
@media (max-width:390px){.topbar .st-streak{display:none}}
/* ================= v6: GIAO DIỆN KIỂU KHAN ACADEMY KIDS (nền sáng – mặc định) ================= */
html[data-theme="light"]{
--bg:#dff2ff; --bg2:#f3faff; --card:#ffffff; --card2:#eef6fc; --line:#d3e5f2;
--text:#1d3046; --muted:#5d7387; --yellow:#ffc629; --orange:#ff8a33; --blue:#1fa1e8; --blue2:#1585c4;
--green:#4cbf38; --green2:#3a9c2a; --red:#ff5a5f; --red2:#d93c41; --purple:#8a63ff; --purple2:#6d48e0; --pink:#ff6fa8;
--radius:22px; --path:#9cc9e6;
}
html[data-theme="light"] body,html[data-theme="light"]{font-family:'Nunito','Be Vietnam Pro',system-ui,sans-serif}
html[data-theme="light"] body{background:
url("data:image/svg+xml;utf8,") bottom/100% 150px no-repeat fixed,
url("data:image/svg+xml;utf8,") top/900px auto repeat-y,
linear-gradient(180deg,#bfe7ff 0%,#dff2ff 45%,#f2fbff 100%) fixed}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);box-shadow:0 2px 0 #cfe6f6}
html[data-theme="light"] .brand b{color:#1d3046;font-weight:900;letter-spacing:.3px}
.brand .logo{background:none!important;box-shadow:none!important;padding:0;overflow:visible}
.brand .logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #0002)}
html[data-theme="light"] .lv-chip{background:#fff;border-color:#bfe0f5;color:var(--blue2)}
/* thẻ & khung: trắng, bo tròn to, bóng dày phía dưới kiểu đồ chơi */
html[data-theme="light"] .card,html[data-theme="light"] .mod,html[data-theme="light"] .vcard,html[data-theme="light"] .player,html[data-theme="light"] .sec-lbl,html[data-theme="light"] .tile{background:#fff;border:2px solid #d6e9f6;box-shadow:0 5px 0 #c9e0f0}
html[data-theme="light"] .mod{border-radius:24px}
html[data-theme="light"] .hero{background:linear-gradient(135deg,#1fa1e8 0%,#3cc3f2 55%,#7fdc6a 130%);color:#fff;border-radius:28px;box-shadow:0 7px 0 #1585c4,0 16px 30px #1fa1e833}
html[data-theme="light"] .hero .kicker,html[data-theme="light"] .hero p{color:#eaf8ff}
html[data-theme="light"] .hero .hero-bar{background:#ffffff55}
html[data-theme="light"] .hero .hero-bar i{background:var(--yellow)}
html[data-theme="light"] .hero .btn.ghost{background:#ffffffe6;color:#1585c4;border:0;box-shadow:0 4px 0 #9fd4f3}
html[data-theme="light"] .lesson-head{background:linear-gradient(135deg,#ff8a33,#ffc629);box-shadow:0 7px 0 #e0701c}
html[data-theme="light"] .nav{background:#fff;border-top:0;box-shadow:0 -3px 0 #d3e8f5;border-radius:24px 24px 0 0}
html[data-theme="light"] .nav a{color:#7a90a3}
html[data-theme="light"] .nav a.on{color:var(--blue)}
html[data-theme="light"] .node .bubble{background:#fff;border-color:#cfe5f3;box-shadow:0 6px 0 #bcd9ec}
html[data-theme="light"] .node .lbl{background:#fff;border:2px solid #d6e9f6;box-shadow:0 3px 0 #c9e0f0}
html[data-theme="light"] .btn.ghost{background:#fff;border:2px solid #d6e9f6;box-shadow:0 4px 0 #c9e0f0}
html[data-theme="light"] .back,html[data-theme="light"] .theme-btn{background:#fff;border:2px solid #d6e9f6}
html[data-theme="light"] .opt{background:#fff;border:2px solid #d6e9f6;box-shadow:0 4px 0 #c9e0f0}
html[data-theme="light"] .opt.sel{background:#e2f4fe;border-color:var(--blue);box-shadow:0 4px 0 #8fcff2}
html[data-theme="light"] .bank .w{background:#fff;border-color:#d6e9f6;box-shadow:0 3px 0 #c9e0f0}
html[data-theme="light"] .dlg .bub{background:#f1f8fd}
html[data-theme="light"] .dlg .acts button,html[data-theme="light"] .player .pb.slow{background:#eaf5fc}
html[data-theme="light"] .fc .face{background:linear-gradient(160deg,#ffffff,#eef8ff);box-shadow:0 8px 0 #c9e0f0}
html[data-theme="light"] .fc .bk{background:linear-gradient(160deg,#fff7d6,#e7f9df)}
html[data-theme="light"] .onb{background:transparent}
html[data-theme="light"] .foot{background:#ffffffee}
html[data-theme="light"] .dlg-tools button{background:#fff;border-color:#cfe5f3;color:#5d7387}
html[data-theme="light"] .dlg-tools button.on{background:var(--blue);border-color:var(--blue);color:#fff}
html[data-theme="light"] .tab-h h2,html[data-theme="light"] .section-t{color:#1d3046}
/* gấu trúc */
.panda{width:100%;height:100%;object-fit:contain;display:block}
.hero .mascot{width:110px;height:110px;font-size:0}
.hero .mascot .panda{filter:drop-shadow(0 8px 14px #0003)}
.onb .m{width:170px;height:170px;font-size:0;margin-bottom:6px}
.prof .av{overflow:hidden;background:#fff!important;border:3px solid #fff;box-shadow:0 4px 0 #c9e0f0}
.prof .av .panda{width:100%;height:100%}
@media (max-width:420px){.hero .mascot{width:86px;height:86px}}
/* v6: icon minh họa */
img.ic{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.mi:has(> img.ic){background:none!important;padding:0;overflow:visible}
.mod .mi:has(> img.ic){width:58px;height:58px}
.mod.big .mi:has(> img.ic){width:66px;height:66px}
.node .bubble:has(img.uic){padding:6px;overflow:hidden}
.node .bubble img.uic{border-radius:50%;object-fit:cover}
.lesson-head .lh-ic:has(img.uic){background:#fff;border-radius:22px;padding:4px;overflow:hidden}
.lesson-head .lh-ic img.uic{border-radius:18px;object-fit:cover}
.unit-ic:has(img.uic){background:none!important;padding:0;overflow:hidden;border-radius:16px}
.vcard .pic img.wpic{width:64px;height:64px;margin:0 auto}
.big-flag img.wpic{width:160px;height:160px;margin:0 auto}
.fc .face img.wpic{width:96px;height:96px;margin:0 auto 6px}
.card img.wpic{width:70px;height:70px;margin:0 auto}
.lesson-head .lh-ic:has(img.uic){width:92px;height:92px}
.unit-ic:has(img.uic){width:52px;height:52px}
.mod .mi.unit-ic:has(img.uic){width:58px;height:58px}
/* ================= v7: HSK BINGO – NỀN TỐI DỊU MẮT (mặc định) =================
Một dải màu xanh chàm thống nhất: banner → nền chuyển dần, độ tương phản vừa phải. */
html:not([data-theme="light"]){
--bg:#10163a; --bg2:#151c45; --card:#1a2250; --card2:#232c62; --line:#2d3872;
--text:#e9ecfb; --muted:#9aa3cf;
}
html:not([data-theme="light"]) body{
background:
radial-gradient(900px 420px at 50% -120px,#2c3a86 0%,rgba(44,58,134,0) 70%),
linear-gradient(180deg,#18205a 0px,#121944 360px,#0e1434 100%);
background-attachment:fixed;
}
html:not([data-theme="light"]) .topbar{background:rgba(24,32,90,.78);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff10}
html:not([data-theme="light"]) .hero{
background:linear-gradient(150deg,#34469e 0%,#3b3c96 45%,#46398f 75%,#523a8c 100%);
box-shadow:0 14px 34px #0a0f2e88, inset 0 1px 0 #ffffff1c;border:1px solid #ffffff14;
}
html:not([data-theme="light"]) .hero .kicker{color:#ffd97a}
html:not([data-theme="light"]) .lesson-head{background:linear-gradient(150deg,#3a4aa3,#4a3d98 60%,#5b3d92);box-shadow:0 12px 30px #0a0f2e88}
html:not([data-theme="light"]) .test-cta{background:linear-gradient(135deg,#2a3170,#1a2250);border-color:#3a4590}
html:not([data-theme="light"]) .mod,html:not([data-theme="light"]) .tile{background:linear-gradient(160deg,#1d2657,#161d48)}
html:not([data-theme="light"]) .nav{background:rgba(14,20,52,.94);backdrop-filter:blur(8px);border-top:1px solid #2a346c}
html:not([data-theme="light"]) .node .bubble{background:linear-gradient(160deg,#2a3470,#1c2452);border-color:#36428a;box-shadow:0 7px 0 #090d26}
html:not([data-theme="light"]) .node .lbl{background:#1e2760;border-color:#34408a}
html:not([data-theme="light"]) img.ic{filter:drop-shadow(0 3px 6px #0006)}
html:not([data-theme="light"]) .brand .logo{background:#ffffff14}
/* Từ mới bổ sung */
.vcard.xw{position:relative;border-style:dashed}
.xbadge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:#ffb02033;color:#ffcc66}
html[data-theme="light"] .xbadge{background:#fff1d6;color:#b86e00}
.vcard.xw .pic:empty{display:none}.vcard.xw{padding-top:26px}
/* HSK 2: câu hỏi đoạn văn nhiều dòng */
.qtitle span{white-space:pre-line}
/* Bài tập: nút 拼音 / Nghĩa */
.ex-tools{position:static;margin-left:auto;flex:none}
.xpy{font:600 13px 'Be Vietnam Pro',sans-serif;color:var(--yellow);margin-top:3px;line-height:1.3}
.xvi{font:500 13px 'Be Vietnam Pro',sans-serif;color:var(--muted);margin-top:2px;line-height:1.3}
.xpy-off .xpy,.xvi-off .xvi{display:none}
html[data-theme="light"] .xpy{color:#b45309}
/* Hướng dẫn cách học + số bước */
.learn-path .lp-steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:14px;color:var(--muted)}
.learn-path .lp-steps span{background:var(--card2);border:1.5px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--text);font-weight:700}
.learn-path .lp-steps i{font-weight:500;color:var(--muted)}
.stepn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--purple);color:#fff;font-size:13px;margin-right:8px;vertical-align:2px}
/* Nền phong cảnh mờ cho trang Unit */
.unit-page{position:relative;isolation:isolate}
.unit-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;background:url(../img/bg-shanshui.webp) center bottom/max(100%,150vh) auto no-repeat}
html[data-theme="light"] .unit-page::before{opacity:.45}
/* Tab Ngữ pháp */
.gx-seg{margin:0 0 14px}.gx-seg a{flex:1;text-align:center;padding:10px 6px;border-radius:10px;font-weight:700;color:var(--muted);font-size:14px;text-decoration:none}
.gx-seg a.on{background:var(--card2);color:#fff}
html[data-theme="light"] .gx-seg a.on{background:var(--blue);color:#fff}
.gx-card{margin-bottom:12px}.gx-h{display:flex;gap:12px;align-items:flex-start}.gx-ic{font-size:28px;line-height:1}
.gx-g{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.gx-g .chip{text-decoration:none}
.gx-g .chip.done{border-color:var(--green);color:var(--green)}.gx-g .chip.part{border-color:var(--yellow)}.gx-g .chip.all{font-weight:800}
.nav a{min-width:0}@media (max-width:420px){.nav a{font-size:11px}.nav a .ic{font-size:22px}}
.gx-link{display:block;text-decoration:none;color:inherit}.gx-link .chip.done{border-color:var(--green);color:var(--green)}.gx-link .chip.part{border-color:var(--yellow)}