:root{
  --bg:#FFF9F1; --card:#fff; --ink:#4A4458; --muted:#8B8598; --line:#F0E9E1;
  --lav:#9FD9BF; --lav-deep:#23805A; --lav-soft:#E8F7EF;
  --mint:#BFE8D4; --mint-deep:#2E8B62; --peach:#FFD3B8; --pink:#FFC4D6; --sky:#C6E2FF; --butter:#FFE9A8;
  --bad:#D9537A; --bad-soft:#FFE8EF; --ok-soft:#E4F7EC;
  --r:22px; --shadow:0 6px 24px rgba(35,128,90,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Nunito","Segoe UI",system-ui,sans-serif;
  background-image:radial-gradient(circle at 30% 0,#E8F7EF 0,transparent 35%),radial-gradient(circle at 95% 10%,#FFE8EF 0,transparent 30%)}
h1,h2,h3{margin:0 0 .4em;line-height:1.25} h1{font-size:1.7rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{margin:.4em 0}
button,select,input,textarea{font:inherit;color:inherit}
.brand{display:flex;gap:10px;align-items:center;padding:0 6px 6px}.brand b{display:block;font-size:1.1rem;font-weight:800}.brand small{color:var(--muted)}
.mascot{width:52px;height:40px;flex:none}
body{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
#side{position:sticky;top:0;height:100vh;overflow:auto;background:#fff;border-right:1px solid var(--line);padding:18px 14px}
.side-label{font-size:.74rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:16px 8px 6px}
.side-item{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;padding:9px 12px;border-radius:16px;font-weight:700;cursor:pointer;text-align:left}
.side-item:hover{background:var(--lav-soft)}.side-item.on{background:var(--lav-deep);color:#fff}
.side-item .count{margin-left:auto;background:var(--pink);color:var(--ink);border-radius:999px;padding:0 8px;font-size:.78rem}
.exam-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg);border-radius:16px;padding:4px}
.exam-switch button{border:0;background:transparent;border-radius:12px;padding:7px 0;font-weight:800;font-size:.82rem;cursor:pointer}
.exam-switch button.on{background:var(--pink)}
#head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:1120px;margin:0 auto;padding:16px 24px 0}
.badge{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:700;font-size:.88rem}
@media(max-width:860px){body{display:block}#side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:12px}
  .side-nav{display:flex;flex-wrap:wrap;gap:2px;margin-top:8px}.side-item{width:auto;padding:7px 10px}.side-nav .side-label{display:none}#head{padding:12px 14px 0}}
/* Điện thoại: thanh menu gọn, dính trên đầu, vuốt ngang để chọn mục */
@media(max-width:860px){
  #side{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center;padding:8px 12px;overflow:visible;box-shadow:0 4px 14px rgba(35,128,90,.08)}
  #side>.side-label{display:none}
  .brand{padding:0}.brand small{display:none}.brand b{font-size:1rem;white-space:nowrap}.mascot{width:38px;height:29px}
  .side-nav{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;margin-top:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .side-nav::-webkit-scrollbar{display:none}
  .side-item{flex:none;white-space:nowrap;gap:6px}
  .card{overflow-x:auto;padding:16px}
  h1{font-size:1.4rem}
}
@media(max-width:340px){.brand b{display:none}}
main{max-width:1120px;margin:0 auto;padding:24px}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:8px 24px 32px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.grid{display:grid;gap:18px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g2,.g3,.g4,.split{grid-template-columns:1fr!important}main{padding:14px}}
.muted{color:var(--muted)} .small{font-size:.88rem} .center{text-align:center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.between{justify-content:space-between}
.btn{border:0;border-radius:999px;padding:10px 20px;font-weight:800;cursor:pointer;background:var(--lav-deep);color:#fff;transition:transform .1s}
.btn:hover{transform:translateY(-1px)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.soft{background:var(--lav-soft);color:var(--lav-deep)} .btn.ghost{background:transparent;color:var(--muted);border:1.5px solid var(--line)}
.btn.sm{padding:6px 14px;font-size:.9rem}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer}
.chip.on{background:var(--lav-soft);border-color:var(--lav);color:var(--lav-deep)}
.tag{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;background:var(--butter)}
.tag.sky{background:var(--sky)}.tag.mint{background:var(--mint)}.tag.pink{background:var(--pink)}.tag.peach{background:var(--peach)}
label.f{display:block;font-weight:700;margin-bottom:14px}
label.f span{display:block;margin-bottom:6px}
select,input[type=number],input[type=text],textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}
select:focus,input:focus,textarea:focus,button:focus-visible{outline:3px solid var(--lav);outline-offset:1px}
.exam-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.exam-pick button{border:2px solid var(--line);background:#fff;border-radius:18px;padding:14px 8px;font-weight:800;cursor:pointer}
.exam-pick button span{display:block;font-size:1.6rem}
.exam-pick button.on{border-color:var(--lav-deep);background:var(--lav-soft)}
.note{background:var(--butter);border-radius:16px;padding:10px 14px;font-size:.92rem}
.note.pink{background:var(--bad-soft)}.note.mint{background:var(--ok-soft)}

/* Lộ trình */
.hero{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
@media(max-width:860px){.hero{grid-template-columns:1fr;text-align:center;justify-items:center}}
.ring{--p:0;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--lav-deep) calc(var(--p)*1%),var(--lav-soft) 0)}
.ring>div{width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:1.5rem}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--lav-soft);border-radius:16px;padding:8px 14px}.stat b{display:block;font-size:1.15rem}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.88rem;margin:8px 0 12px}
.legend i,.seg{display:inline-block}.legend i{width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.c-found{background:var(--sky)}.c-parts{background:var(--lav)}.c-mock{background:var(--peach)}.c-rest{background:var(--butter)}
.wk{display:grid;grid-template-columns:74px 1fr 52px;gap:10px;align-items:center;width:100%;border:0;background:transparent;padding:4px 6px;border-radius:12px;cursor:pointer;text-align:left}
.wk:hover,.wk.on{background:var(--lav-soft)} .wk.on .wk-n{color:var(--lav-deep);font-weight:800}
.bar{display:flex;height:22px;border-radius:999px;overflow:hidden;gap:2px;background:#fff}
.bar .seg{height:100%;font-size:.72rem;font-weight:700;text-align:center;line-height:22px;overflow:hidden;white-space:nowrap}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.day{border:1.5px solid var(--line);border-radius:18px;padding:12px 14px;background:#fff}
.day.today{border-color:var(--lav-deep);box-shadow:0 0 0 4px var(--lav-soft)}
.day.rest{background:#FFF6DA;border-color:transparent}
.day h3{display:flex;justify-content:space-between;align-items:center;font-size:.98rem}
.task{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.task input{appearance:none;flex:none;width:22px;height:22px;border-radius:8px;border:2px solid var(--lav);margin:2px 0 0;cursor:pointer;display:grid;place-items:center}
.task input:checked{background:var(--lav-deep);border-color:var(--lav-deep)}
.task input:checked::after{content:"✓";color:#fff;font-weight:800;font-size:.85rem}
.task input:checked+span{text-decoration:line-through;color:var(--muted)}
.task small{display:block;color:var(--muted)}

/* Làm bài */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.passage{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.passage p{margin:.7em 0}
.q{border-top:1px dashed var(--line);padding:14px 0}.q:first-of-type{border-top:0}
.q .prompt{font-weight:700;margin-bottom:8px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:8px 14px;cursor:pointer;font-weight:600;text-align:left}
.opt:hover{border-color:var(--lav)} .opt.sel{background:var(--lav-soft);border-color:var(--lav-deep);color:var(--lav-deep)}
.opt.right{background:var(--ok-soft);border-color:var(--mint-deep);color:var(--mint-deep)}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.opt:disabled{cursor:default}
.fb{margin-top:10px;border-radius:14px;padding:10px 14px;font-size:.93rem}
.fb.ok{background:var(--ok-soft)}.fb.no{background:var(--bad-soft)}
.fb .src{color:var(--muted);font-size:.8rem;margin-top:6px}
.reasons{margin-top:8px}.reasons .chip{font-size:.82rem;padding:4px 10px;margin:3px 3px 0 0}
.ord{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:8px;background:#fff}
.ord.fixed{background:var(--lav-soft);border-color:transparent}
.ord.right{border-color:var(--mint-deep);background:var(--ok-soft)}.ord.wrong{border-color:var(--bad);background:var(--bad-soft)}
.ord .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--lav-soft);display:grid;place-items:center;font-weight:800}
.ord .t{flex:1}.ord .mv{display:flex;flex-direction:column;gap:2px}
.ord .mv button{border:0;background:var(--lav-soft);border-radius:8px;width:30px;height:22px;cursor:pointer;font-weight:800;color:var(--lav-deep)}
.audio{background:var(--lav-soft);border-radius:18px;padding:18px;text-align:center}
.audio .wave{font-size:2.4rem}
.seg-t{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line)}
.seg-t b{flex:none;min-width:92px}
.timer{font-weight:800;font-size:1.2rem;background:var(--butter);border-radius:999px;padding:6px 16px;font-variant-numeric:tabular-nums}
.timer.hot{background:var(--bad-soft);color:var(--bad)}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer}
.dots button.cur{border-color:var(--lav-deep);background:var(--lav-soft)}.dots button.done{background:var(--mint);border-color:transparent}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:.85rem}
.big{font-size:2.6rem;font-weight:800;color:var(--lav-deep)}
.tool h3{display:flex;gap:8px;align-items:center}
mark.miss{background:var(--bad-soft);color:var(--bad);border-radius:4px;padding:0 3px}
mark.hit{background:var(--ok-soft);color:var(--mint-deep);border-radius:4px;padding:0 3px}
.err{text-decoration:underline wavy var(--bad);text-underline-offset:4px}
.note.soft{background:var(--lav-soft)}
.meter{height:10px;border-radius:999px;background:var(--lav-soft);overflow:hidden}.meter i{display:block;height:100%;background:var(--lav-deep);border-radius:999px;transition:width .2s}
.score{background:var(--bg);border-radius:16px;padding:12px 6px;text-align:center}.score b{display:block;font-size:1.6rem}
.sent{border:1.5px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:8px}.sent.bad{border-color:var(--pink);background:#FFF6F9}
.sent .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--lav-soft);font-weight:800;font-size:.8rem;margin-right:4px}
.bubble{background:var(--lav-soft);border-radius:22px 22px 22px 6px;padding:14px 18px;margin:14px 0;text-align:left}
.wave-bars{display:flex;gap:4px;align-items:center;justify-content:center;height:72px;margin:12px 0}
.wave-bars span{width:6px;height:10px;border-radius:999px;background:var(--lav)}
.wave-bars.live span{background:var(--bad);animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{height:10px}50%{height:var(--h,50px)}}
.rec{width:84px;height:84px;border-radius:50%;border:0;background:var(--pink);font-size:2rem;cursor:pointer;box-shadow:var(--shadow)}
.rec.live{background:var(--bad);color:#fff}
@media(prefers-reduced-motion:reduce){.wave-bars.live span{animation:none;height:30px}}
input.gap{max-width:320px}input.gap.right{border-color:var(--mint-deep);background:var(--ok-soft)}input.gap.wrong{border-color:var(--bad);background:var(--bad-soft)}
h3{margin-top:0}
.fd-item{padding:0;overflow:hidden;margin-bottom:10px}
.fd-head{display:flex;gap:14px;align-items:center;width:100%;border:0;background:transparent;padding:14px 18px;cursor:pointer;text-align:left}
.fd-head:hover{background:var(--lav-soft)}.fd-item.open .fd-head{background:var(--lav-soft)}
.fd-n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg);font-weight:800}
.fd-n.done{background:var(--lav-deep);color:#fff}.fd-title{flex:1}
.fd-body{padding:6px 22px 22px}.fd-body h3{margin:18px 0 8px}
.fd-table{border:1.5px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden}
.fd-table th{width:30%;background:var(--bg);color:var(--ink);font-size:.92rem;vertical-align:top}.fd-table tr:last-child>*{border-bottom:0}
.fd-table.words th{width:auto}.fd-table td,.fd-table th{vertical-align:top}
.fd-ex{display:flex;gap:10px;align-items:flex-start;background:var(--lav-soft);border-radius:14px;padding:10px 14px;margin-bottom:8px}
.fd-mis{border-left:4px solid var(--pink);background:#FFF6F9;border-radius:0 14px 14px 0;padding:8px 14px;margin-bottom:8px}
.fd-mis .x{color:var(--bad);font-weight:800}.fd-mis .v{color:var(--mint-deep);font-weight:800}
.say{border:0;background:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.08)}
a.btn{text-decoration:none;display:inline-block}
@media(max-width:860px){.fd-table.words td:nth-child(4){display:none}.fd-body{padding:6px 14px 18px}}
.lib-f{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}.lib-l{width:86px;font-weight:800;font-size:.85rem;color:var(--muted)}
.lib-f .chip{padding:4px 12px;font-size:.88rem}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.lib-card{margin:0;display:flex;flex-direction:column;gap:8px;padding:18px}.lib-card>.row{margin-top:auto;padding-top:6px}
.src-badge{font-size:.78rem;font-weight:700;border-radius:12px;padding:5px 10px;background:var(--lav-soft);color:var(--lav-deep)}
.src-badge.official{background:#FFF1D6;color:#8A5A00}