/* Layout: cột chính + cột từ vựng bên phải (desktop), một cột trên điện thoại.
   Màu: xanh #1B36E0 làm màu hành động chính, vàng #FFC400 làm điểm nhấn; mỗi xứ thêm một màu riêng (--accent) cho hoạ tiết. */
:root{
  --bg:#EFEFED;--card:#FFFFFF;--soft:#F6F6F4;--line:#E4E4E0;
  --ink:#141414;--ink2:#4C4C4C;--ink3:#6E6E6A;
  --blue:#1B36E0;--primary:#1B36E0;--on-primary:#FFFFFF;--navy:#13235F;
  --yellow:#FFC400;--on-yellow:#141414;
  --good:#17693A;--good-bg:#DDF3E6;--warn:#8A5A00;--warn-bg:#FFF3C4;--bad:#B3261E;--bad-bg:#FBE1DF;
  --dark:#141414;--on-dark:#FFFFFF;--on-dark2:#C9C9C4;
  --accent-l:#E0507A;--accent-soft-l:#FCE3EA;--accent-d:#F28CA8;--accent-soft-d:#3A1C26;
  --accent:var(--accent-l);--accent-soft:var(--accent-soft-l);
  --display:'Montserrat',system-ui,sans-serif;
  --body:'Be Vietnam Pro',system-ui,sans-serif;
  --jp:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --r:26px;
  color-scheme:light;
}
#app{--accent:var(--accent-l);--accent-soft:var(--accent-soft-l)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121212;--card:#1C1C1B;--soft:#252524;--line:#33332F;
  --ink:#F2F2EF;--ink2:#C4C4BF;--ink3:#9A9A94;
  --blue:#8D9BFF;--primary:#3B52EC;--on-primary:#FFFFFF;--navy:#0E1A4A;
  --good:#7FD6A1;--good-bg:#173524;--warn:#F2C766;--warn-bg:#3A2F12;--bad:#F2A19B;--bad-bg:#3D1A17;
  --dark:#F2F2EF;--on-dark:#141414;--on-dark2:#4C4C4C;
  color-scheme:dark}
  :root:not([data-theme="light"]) #app{--accent:var(--accent-d);--accent-soft:var(--accent-soft-d)}}
:root[data-theme="dark"]{
  --bg:#121212;--card:#1C1C1B;--soft:#252524;--line:#33332F;
  --ink:#F2F2EF;--ink2:#C4C4BF;--ink3:#9A9A94;
  --blue:#8D9BFF;--primary:#3B52EC;--on-primary:#FFFFFF;--navy:#0E1A4A;
  --good:#7FD6A1;--good-bg:#173524;--warn:#F2C766;--warn-bg:#3A2F12;--bad:#F2A19B;--bad-bg:#3D1A17;
  --dark:#F2F2EF;--on-dark:#141414;--on-dark2:#4C4C4C;
  color-scheme:dark}
:root[data-theme="dark"] #app{--accent:var(--accent-d);--accent-soft:var(--accent-soft-d)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
button[disabled]{opacity:.4;cursor:default}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-weight:900;text-transform:lowercase}
h2{text-transform:lowercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:900px;margin:0 auto;padding-inline:16px;padding-block:16px 64px}
.wrap.wide{max-width:1200px}
.jp{font-family:var(--jp)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.muted{color:var(--ink3)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stack{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border-radius:var(--r);padding:22px}
.notice{margin:0;font-size:13px;color:var(--ink2);background:var(--warn-bg);border-radius:14px;padding:10px 14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:99px;background:var(--card);font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,color .15s}
.btn:hover{background:var(--dark);color:var(--on-dark)}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.primary:hover{background:var(--navy);color:#fff}
.btn.yellow{background:var(--yellow);color:var(--on-yellow)}
.btn.yellow:hover{background:var(--primary);color:var(--on-primary)}
.btn.soft{background:var(--soft)}
.btn.soft:hover{background:var(--primary);color:var(--on-primary)}
.btn.good{background:var(--good-bg);color:var(--good)}
.btn.bad{background:var(--bad-bg);color:var(--bad)}
.btn.good:hover,.btn.bad:hover{filter:brightness(.95);background-color:inherit}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px}
.btn.rec{background:#D3261C;color:#fff}
.ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--soft);color:var(--ink2);white-space:nowrap}
.chip.accent{background:var(--accent-soft);color:var(--ink)}
.chip.yellow{background:var(--yellow);color:var(--on-yellow)}
.chip.good{background:var(--good-bg);color:var(--good)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}

/* avatars */
.av{border-radius:50%;object-fit:cover;flex:none;display:block}
.av-txt{display:grid;place-items:center;background:var(--primary);color:#fff;font:800 14px var(--display)}
.avs{display:flex}
.avs .av{box-shadow:0 0 0 3px var(--card)}
.avs .av+.av{margin-left:-10px}
.me-chip{border-radius:50%;box-shadow:0 0 0 2px var(--yellow)}

/* top bar */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:12px;text-align:left}
.mono{width:40px;height:40px;border-radius:50%;background:#141414;color:#FFC400;display:grid;place-items:center;font:900 14px var(--display);flex:none}
.brand b{display:block;font:800 15px/1.2 var(--display);letter-spacing:-.02em}
.brand span{display:block;font-size:12px;color:var(--ink3);line-height:1.2}
.seg{display:inline-flex;background:var(--card);border-radius:99px;padding:4px;gap:2px}
.seg button{min-height:34px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:600;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}

/* home hero: nền xanh, mặt trời vàng, hoạ tiết của xứ */
.hero-card{position:relative;overflow:hidden;border-radius:30px;background:var(--primary);color:#fff;min-height:230px;margin-bottom:14px;
  background-image:radial-gradient(circle at 50% 100%,transparent 9px,rgba(255,255,255,.08) 10px,rgba(255,255,255,.08) 12px,transparent 13px,transparent 17px,rgba(255,255,255,.08) 18px,rgba(255,255,255,.08) 20px,transparent 21px);
  background-size:44px 22px}
.hero-txt{position:relative;z-index:1;padding:26px 26px 28px;max-width:440px}
.eyebrow.light{color:rgba(255,255,255,.75)}
.greet{font-size:20px;font-weight:700;color:var(--yellow);margin-top:10px}
.hero-card h1{font-size:clamp(44px,8vw,76px);margin-top:2px}
.hero-card p{margin:10px 0 0;color:rgba(255,255,255,.88);max-width:340px}
.motif{position:absolute;right:0;top:0;height:100%;width:min(62%,420px)}
.langs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:14px}
.lang{border-radius:18px;background:var(--card);padding:10px 6px;text-align:center;line-height:1.25;min-height:56px}
.lang b{display:block;font:900 15px var(--display)}
.lang span{font-size:12px;color:var(--ink3)}
.lang[aria-pressed="true"]{background:var(--primary);color:#fff}
.lang[aria-pressed="true"] b{color:var(--yellow)}
.lang[aria-pressed="true"] span{color:rgba(255,255,255,.85)}
.lang[disabled]{opacity:.55}
.review-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:var(--yellow);color:#141414;border-radius:22px;padding:14px 16px 14px 20px;margin-bottom:14px}
.review-banner b{display:block;font:800 16px var(--display)}
.review-banner span{font-size:13px}
.review-banner.calm{background:var(--card);color:var(--ink)}
.review-banner.calm span{color:var(--ink3)}
.review-banner .btn.yellow{background:#141414;color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.stat{background:var(--card);border-radius:20px;padding:14px 16px}
.stat b{display:block;font:900 26px/1.1 var(--display);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--ink3)}
.stat.blue{background:var(--primary);color:#fff}
.stat.blue b{color:var(--yellow)}
.stat.blue span{color:rgba(255,255,255,.85)}
.lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.lesson{display:flex;flex-direction:column;gap:10px;text-align:left}
.lesson h3{font-size:20px}
.lesson .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.stamp{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;font:900 11px/1 var(--display);transform:rotate(-12deg);text-align:center}

/* lesson shell */
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:8px 0 18px}
.steps button{display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:11px;font-weight:600;color:var(--ink3);text-align:left;min-height:44px}
.steps i{display:block;width:100%;height:6px;border-radius:99px;background:var(--line)}
.steps .on{color:var(--ink)}
.steps .on i{background:var(--primary)}
.steps .done i{background:var(--yellow)}
.lhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lhead h2{font-size:clamp(22px,4vw,30px);flex:1;min-width:0}
.back{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;flex:none}
.back:hover{background:var(--primary);color:#fff}
.navrow{display:flex;justify-content:space-between;gap:8px;margin-top:6px;flex-wrap:wrap}
.lgrid{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.lmain{flex:999 1 540px;min-width:0}

/* cột từ vựng */
.vpanel{flex:1 1 300px;min-width:0;background:var(--card);border-radius:var(--r);padding:18px;position:sticky;top:12px}
.vhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.vhead b{font:800 16px var(--display);letter-spacing:-.01em}
.vlist,.blist{list-style:none;margin:0;padding:0}
.vrow,.brow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.vrow:first-child{border-top:0}
.vplay{width:36px;height:36px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex:none}
.vplay:hover{background:var(--yellow);color:#141414}
.vplay .ico{width:16px;height:16px}
.vtxt{flex:1;min-width:0;line-height:1.3}
.vw{font-size:18px;font-weight:700}
.vr{font-size:12px;color:var(--blue)}
.vm{font-size:13px;color:var(--ink2)}
.hv{display:inline-block;font-size:11px;font-weight:600;padding:0 7px;border-radius:99px;background:var(--accent-soft);color:var(--ink)}
.vadd{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;flex:none;color:var(--ink3)}
.vadd:hover{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary)}
.vadd.on{background:var(--primary);color:#fff;box-shadow:none}
.vadd .ico{width:16px;height:16px}
.vfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.vfoot span{display:flex;align-items:center;gap:6px}
.vnote{font-size:12px;color:var(--ink3);margin:10px 0 0}

/* hội thoại */
.setting{background:var(--navy);color:#fff;border-radius:20px;padding:14px 18px;font-size:14px}
.setting b{color:var(--yellow)}
.dlg{display:flex;flex-direction:column;gap:10px}
.msgbtn{display:block;width:100%;text-align:left}
.msg{display:flex;align-items:flex-end;gap:10px;max-width:90%}
.msg.me{flex-direction:row-reverse;align-self:flex-end;margin-left:auto}
.msg .bub{display:flex;flex-direction:column;gap:2px;padding:11px 15px;border-radius:20px 20px 20px 6px;background:var(--card);min-width:0}
.msg.me .bub{background:var(--primary);color:#fff;border-radius:20px 20px 6px 20px}
.bub .who{font-size:11px;font-weight:600;color:var(--ink3)}
.msg.me .bub .who{color:rgba(255,255,255,.75)}
.bub .main{font-size:18px;font-weight:600;line-height:1.4}
.bub .sub{font-size:12px;color:var(--blue)}
.msg.me .bub .sub{color:var(--yellow)}
.bub .vi{font-size:13px;color:var(--ink2)}
.msg.me .bub .vi{color:rgba(255,255,255,.88)}
.bub .fbk{margin-top:6px;font-size:12px;padding:6px 10px;border-radius:10px;background:var(--warn-bg);color:var(--warn)}
.bub.playing{box-shadow:0 0 0 3px var(--yellow)}
.msgbtn:hover .bub{box-shadow:0 0 0 2px var(--line)}

/* câu */
.phr{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:start}
.phr .main{font-size:24px;font-weight:700;line-height:1.3}
.phr .sub{color:var(--blue);font-weight:500}
.phr .vi{color:var(--ink2)}
.phr .note{grid-column:1/-1;font-size:13px;color:var(--ink2);background:var(--soft);border-radius:12px;padding:8px 12px}
.iconbtn{width:48px;height:48px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center}
.iconbtn:hover{background:var(--primary);color:#fff}

/* nói */
.big{font-size:clamp(30px,6vw,46px);font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.dots{display:flex;gap:6px}
.dots button,.dots span{flex:1;height:30px;border-radius:10px;background:var(--card);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink3)}
.dots span{height:8px}
.dots .cur{box-shadow:inset 0 0 0 2px var(--primary)}
.dots .g{background:var(--good-bg);color:var(--good)}
.dots span.g{background:var(--primary)}
.dots .w{background:var(--warn-bg);color:var(--warn)}
.result{display:flex;flex-wrap:wrap;gap:16px;align-items:center;background:var(--soft);border-radius:20px;padding:16px 18px}
.score{font:900 44px/1 var(--display);font-variant-numeric:tabular-nums;min-width:84px;text-align:center}
.score.g{color:var(--good)}.score.w{color:var(--warn)}.score.b{color:var(--bad)}
.result .txt{flex:1 1 240px;min-width:0;font-size:14px}

/* phản xạ */
.situ{font:800 20px/1.35 var(--display);letter-spacing:-.01em}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 16px;border-radius:18px;background:var(--soft);min-height:52px}
.opt:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--primary)}
.opt .main{font-size:18px;font-weight:600}
.opt .sub{font-size:12px;color:var(--ink3)}
.opt.right{background:var(--good-bg);color:var(--good)}
.opt.wrong{background:var(--bad-bg);color:var(--bad)}
.opt[disabled]{opacity:1;cursor:default}
.fb{border-radius:16px;padding:12px 14px;font-size:14px}
.fb.good{background:var(--good-bg);color:var(--good)}
.fb.bad{background:var(--bad-bg);color:var(--bad)}
.free{display:flex;gap:8px;flex-wrap:wrap}
.free input{flex:1 1 220px;min-width:0;min-height:46px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);padding:0 18px;font:inherit}
.sugs{display:flex;flex-wrap:wrap;gap:6px}

/* hoàn thành & ôn tập */
.done{text-align:center;align-items:center}
.bigstamp{width:170px;height:170px;border-radius:50%;border:5px solid var(--accent);color:var(--accent);display:grid;place-items:center;transform:rotate(-10deg);font:900 15px/1.25 var(--display);padding:18px;margin:6px auto;background:radial-gradient(circle,var(--accent-soft) 0 55%,transparent 56%)}
.bigstamp small{display:block;font:600 11px var(--body);letter-spacing:.1em;text-transform:uppercase}
.rv{display:flex;flex-direction:column;gap:12px;max-width:620px;margin:16px auto 0}
.flash{min-height:300px}
.reveal{border-top:1.5px dashed var(--line);padding-top:14px}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.box{background:var(--soft);border-radius:14px;padding:10px;text-align:center;line-height:1.2}
.box b{display:block;font:900 22px var(--display);font-variant-numeric:tabular-nums}
.box span{font-size:11px;color:var(--ink3)}
.box.empty{opacity:.5}
.blist{margin-top:14px;padding:6px 18px}
.brow:first-child{border-top:0}
.bmeta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

@media (max-width:640px){
  .langs{grid-template-columns:repeat(5,minmax(60px,1fr));overflow-x:auto}
  .steps span{display:none}
  .msg{max-width:100%}
  .hero-txt{padding-bottom:0}
  .motif{position:relative;display:block;width:100%;height:140px;margin-top:-6px}
  .vpanel{position:static}
  .boxes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats .stat b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* khởi động từ vựng */
.settitle{font:800 17px var(--display);letter-spacing:-.01em}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wcard{position:relative;background:var(--soft);border-radius:18px}
.wplay{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:14px 14px 12px;text-align:left;border-radius:18px;min-height:112px}
.wplay:hover{box-shadow:inset 0 0 0 2px var(--primary)}
.ww{font-size:24px;font-weight:700;line-height:1.2}
.wr{font-size:12px;color:var(--blue)}
.wm{font-size:14px;color:var(--ink2);margin-top:4px}
.wm.hid{color:transparent;background:var(--line);border-radius:6px;min-width:70px;user-select:none}
.wcard .vadd{position:absolute;top:8px;right:8px;width:30px;height:30px;background:var(--card)}
.wcard .vadd.on{background:var(--primary)}
.qbar{height:8px;border-radius:99px;background:var(--card);overflow:hidden}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary) 70%,var(--yellow));border-radius:99px;transition:width .3s}
.opts.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.iconbtn.lg{width:64px;height:64px}
.iconbtn.lg .ico{width:26px;height:26px}
.missed{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.steps{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:640px){.opts.grid2{grid-template-columns:1fr}}

/* tổng kết phản xạ */
.timer{height:10px;border-radius:99px;background:var(--card);overflow:hidden}
.timer i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--yellow),var(--primary));transform-origin:left;animation:timer linear forwards}
.timer.stop i{animation-play-state:paused}
.timer.off{visibility:hidden}
@keyframes timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.gap{display:inline-block;min-width:2.2em;padding:0 .25em;margin:0 .1em;border-bottom:3px solid var(--primary);color:var(--primary);text-align:center}
.gap.filled{background:var(--accent-soft);border-radius:8px 8px 0 0;color:var(--ink)}
.opts.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.steps{grid-template-columns:repeat(8,minmax(0,1fr))}
@media (max-width:640px){.opts.grid3{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.timer i{animation:none}}

/* dashboard tiến trình */
.dash-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;margin:16px 0 12px}
.dash-ring{display:flex;align-items:center;gap:18px}
.ring{width:132px;height:132px;flex:none}
.ring-num{font:900 26px var(--display);fill:var(--ink)}
.ring-lbl{font:600 11px var(--body);fill:var(--ink3);letter-spacing:.1em;text-transform:uppercase}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi{background:var(--card);border-radius:20px;padding:14px 16px}
.kpi b{display:block;font:900 28px/1.1 var(--display);font-variant-numeric:tabular-nums}
.kpi b small{font-size:15px;color:var(--ink3)}
.kpi span{font-size:12px;color:var(--ink3)}
.kpi.good b{color:var(--good)}
.kpi.warn{background:var(--yellow);color:#141414}
.kpi.warn span{color:#3a3a36}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start}
.topics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.topic{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-top:1px solid var(--line)}
.topic:first-child{border-top:0;padding-top:4px}
.trow{display:flex;align-items:center;gap:10px}
.tname{flex:1;min-width:0;display:flex;flex-direction:column}
.tname b{font:800 17px var(--display);letter-spacing:-.01em}
.tpct{font:900 24px var(--display);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.tbar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--primary) 75%,var(--yellow))}
.parts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.part{position:relative;display:block;height:26px;border-radius:8px;background:var(--soft);overflow:hidden}
.part i{position:absolute;inset:0 auto 0 0;background:var(--accent-soft)}
.part em{position:relative;display:block;font-style:normal;font-size:10.5px;font-weight:600;line-height:26px;padding:0 7px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.segbar{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--soft);gap:2px}
.segbar i,.legend i{display:block}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink2)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}
.master{background:var(--good)}
.learning{background:var(--primary)}
.review{background:var(--yellow)}
.new{background:var(--line)}
.wchips{display:flex;flex-wrap:wrap;gap:6px}
.wchip{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;padding:7px 12px;border-radius:14px;background:var(--soft);text-align:left}
.wchip span{font-weight:700;font-size:16px}
.wchip small{font-size:11px;color:var(--ink3)}
.wchip:hover{box-shadow:inset 0 0 0 2px var(--primary)}
.weak{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.weak li{display:flex;align-items:center;gap:10px}
.weak li span:not(.chip){flex:1;min-width:0;font-weight:600}
.cal{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px}
.cal i{aspect-ratio:1;border-radius:4px;background:var(--soft);max-width:100%}
.cal i.on{background:var(--primary)}
.cal i.today{box-shadow:inset 0 0 0 2px var(--yellow)}
@media (max-width:900px){.dash-top,.dash-grid{grid-template-columns:1fr}}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.parts{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-ring{flex-direction:column;text-align:center}.top .btn.sm{order:3}}

/* Hán tự */
.vtabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--soft);border-radius:99px;padding:4px;margin-bottom:8px}
.vtabs button{min-height:36px;border-radius:99px;font-size:13px;font-weight:600;color:var(--ink2)}
.vtabs button[aria-selected="true"]{background:var(--primary);color:#fff}
.hzrow{display:flex;flex-wrap:wrap;gap:8px}
.hzgridlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-top:4px}
.hzchip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:58px;min-height:64px;padding:6px 8px;border-radius:16px;background:var(--soft);line-height:1.1}
.hzchip span{font-size:28px;font-weight:700}
.hzchip small{font-size:11px;color:var(--ink3);margin-top:3px}
.hzchip.lg{min-height:72px}
.hzchip:hover{box-shadow:inset 0 0 0 2px var(--primary)}
.hzchip.done{background:var(--accent-soft)}
.hzchip i{position:absolute;top:4px;right:6px;font-style:normal;font-size:11px;color:var(--good);font-weight:800}
.hzback{position:fixed;inset:0;background:rgba(10,12,30,.55);z-index:50}
.hzmodal{position:fixed;z-index:51;left:50%;top:50%;transform:translate(-50%,-50%);width:min(940px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--card);border-radius:28px;padding:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.hzclose{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;background:var(--soft);font-size:24px;line-height:1}
.hzclose:hover{background:var(--primary);color:#fff}
.hzpane{display:flex;flex-direction:column;gap:12px;min-width:0}
.hzsvg{width:100%;max-width:380px;aspect-ratio:1;margin:0 auto;display:block;background:#FFFDF6;border-radius:18px;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 2px var(--accent-soft)}
.hzgrid rect{fill:none;stroke:#E8B4BF;stroke-width:.6%}
.hzgrid path{fill:none;stroke:#E8B4BF;stroke-width:.35%;stroke-dasharray:2% 2%}
.hzghost path{fill:none;stroke:#E6E1D8;stroke-linecap:round;stroke-linejoin:round}
.hzink path{fill:none;stroke:#141414;stroke-linecap:round;stroke-linejoin:round}
.hzink path.ok{stroke:#1B36E0}
.hzink path.hint{stroke:#FFC400}
.hzuser{fill:none;stroke:#D3261C;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.hznum circle{fill:#E0507A}
.hznum text{fill:#fff;text-anchor:middle;font-family:var(--display);font-weight:800}
.hzstatus{margin:0;text-align:center;font-size:13px;color:var(--ink2);min-height:20px}
.hzbig{font-size:180px;text-align:center;line-height:1.2}
.hzchar{font-size:64px;font-weight:700;line-height:1;margin-right:6px}
.hzhv{font:900 28px var(--display);text-transform:capitalize}
.hzparts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hzparts li{display:flex;gap:10px;align-items:baseline;background:var(--soft);border-radius:12px;padding:8px 12px}
.hzparts b{font-size:22px;min-width:44px}
.hzparts span{font-size:13px;color:var(--ink2)}
.hzstory{margin:0;font-size:15px}
.hztip{background:var(--accent-soft);border-radius:14px;padding:10px 14px;font-size:14px}
.hznav{justify-content:space-between;margin-top:auto}
@media (max-width:760px){.hzmodal{grid-template-columns:1fr;top:12px;transform:translateX(-50%);max-height:calc(100vh - 24px)}.hzgridlist{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hzsvg{background:#F6F1E6}}

/* bản chạy thật */
.linkbtn{color:var(--blue);font-weight:600;text-decoration:underline;font-size:12px}
.gate{max-width:520px}
.gbtn{align-self:flex-start;text-decoration:none;padding-left:8px}
.gbtn .g{width:32px;height:32px;border-radius:50%;background:#fff;color:#141414;display:grid;place-items:center;font:800 15px var(--display)}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--on-primary)}

/* xin quyền học theo ngôn ngữ */
.langs{grid-template-columns:repeat(6,minmax(0,1fr))}
.lang.locked{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);opacity:1}
.lang.locked span{color:var(--blue)}
.lang.locked[disabled] span{color:var(--warn)}
.gate.wide{max-width:none}
.reqgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.reqchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:18px;background:var(--soft);text-align:left;min-height:84px;box-shadow:inset 0 0 0 1.5px transparent}
.reqchip b{font:900 15px var(--display)}
.reqchip span{font-weight:600}
.reqchip small{font-size:12px;color:var(--ink3)}
.reqchip:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--primary)}
.reqchip.sel{background:var(--primary);color:#fff}.reqchip.sel small{color:rgba(255,255,255,.85)}
.reqchip.asked{background:var(--warn-bg)}.reqchip.asked small{color:var(--warn);font-weight:600}
.reqchip.granted{background:var(--good-bg)}.reqchip.granted small{color:var(--good);font-weight:600}
.reqchip[disabled]{opacity:1;cursor:default}
@media (max-width:640px){.langs{grid-template-columns:repeat(6,minmax(56px,1fr))}}