:root{
  --bg:#F5F7FA;--paper:#fff;--ink:#16213A;--ink2:#4B566B;--line:#D9DEE7;
  --accent:#0E6E68;--accent2:#0B5652;--soft:#DDF1EE;--warn:#9A5B08;--warnsoft:#FBEFD9;
  --crit:#A23A2E;--critsoft:#F8E4E0;--good:#1E7A3C;--goodsoft:#DFF3E5;
  --mono:'IBM Plex Mono',ui-monospace,monospace;--disp:'Chakra Petch','Sarabun',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Sarabun',system-ui,sans-serif;font-size:17px;line-height:1.7}
a{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.25;margin:0;text-wrap:balance}
h1{font-size:2rem}h2{font-size:1.4rem;margin:40px 0 14px}h3{font-size:1.1rem;margin:22px 0 8px}
p{margin:0 0 12px}
.wrap{max-width:900px;margin:0 auto;padding:28px 18px 60px}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.top nav{display:flex;gap:16px;align-items:center}
.top nav a{text-decoration:none;color:var(--ink)}
.muted{color:var(--ink2)}
.btn{display:inline-block;background:var(--accent);color:#fff!important;padding:12px 22px;border-radius:8px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:1rem}
.btn:hover{background:var(--accent2)}
.btn.sm{padding:7px 14px;font-size:.95rem}
.btn.ghost{background:transparent;color:var(--accent)!important;border:2px solid var(--accent)}
.btn.ghost:hover{background:var(--soft)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:14px 0}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.note{background:var(--warnsoft);border-left:4px solid var(--warn);padding:10px 14px;border-radius:4px;margin:14px 0}
.ok{background:var(--goodsoft);border-left:4px solid var(--good);padding:10px 14px;border-radius:4px;margin:14px 0}
.bad{background:var(--critsoft);border-left:4px solid var(--crit);padding:10px 14px;border-radius:4px;margin:14px 0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px}
.tier.hi{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.tier .price{font-family:var(--mono);font-size:1.9rem;color:var(--accent)}
.tier ul{padding-left:1.1em;margin:8px 0 14px;font-size:.95rem}
.tier .soon{color:var(--ink2);font-size:.9rem}
input[type=email],input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:1rem}
label{display:block;font-weight:500;margin-bottom:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;font-family:var(--mono);font-size:.75rem;padding:2px 9px;border-radius:99px;background:var(--soft);color:var(--accent)}
.pill.w{background:var(--warnsoft);color:var(--warn)}.pill.c{background:var(--critsoft);color:var(--crit)}.pill.g{background:var(--goodsoft);color:var(--good)}
.foot{max-width:900px;margin:0 auto;padding:20px 18px 40px;font-size:.85rem;color:var(--ink2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-family:var(--disp);font-weight:600;background:var(--bg)}
.tbl{overflow-x:auto}

/* ---- หน้าแรก ---- */
.hero{padding:40px 0 20px}
.hero h1{font-size:2.3rem;max-width:22ch}
.hero .lede{font-size:1.15rem;color:var(--ink2);max-width:60ch;margin:14px 0 22px}
.stats{display:flex;gap:22px;flex-wrap:wrap;margin:18px 0}
.stat b{display:block;font-family:var(--mono);font-size:1.5rem;color:var(--accent)}
.stat span{font-size:.9rem;color:var(--ink2)}
.steps{counter-reset:s;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.steps div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px}
.steps div::before{counter-increment:s;content:counter(s);font-family:var(--mono);color:var(--accent);font-weight:600;display:block}
.cmp th:first-child,.cmp td:first-child{white-space:nowrap}

/* ---- แดชบอร์ด / บทเรียน ---- */
.chapters{display:grid;gap:10px}
.chapter{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.chapter summary{cursor:pointer;font-family:var(--disp);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.chapter summary::-webkit-details-marker{display:none}
.chapter .prog{font-family:var(--mono);font-size:.8rem;color:var(--ink2)}
.units{list-style:none;padding:0;margin:10px 0 0}
.units li{display:flex;gap:10px;align-items:center;padding:6px 0;border-top:1px dashed var(--line)}
.units li a{text-decoration:none;color:var(--ink)}
.units .d{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none}
.units .d.on{background:var(--good);border-color:var(--good)}
.units .min{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--ink2)}
.lesson{max-width:760px;margin:0 auto}
.lesson h2{font-size:1.35rem;margin:34px 0 10px;padding-left:12px;border-left:5px solid var(--accent)}
.lesson h3{font-size:1.1rem;margin:24px 0 8px;color:var(--accent)}
.lesson h4{margin:18px 0 6px;color:var(--ink2)}
.lesson p,.lesson li{max-width:70ch}
.lesson table{margin:12px 0;font-size:.92rem}
.lesson .box{border-radius:10px;padding:16px 18px;margin:18px 0;border:1px solid var(--line);background:var(--paper)}
.lesson .box>p:first-child strong{font-family:var(--disp);letter-spacing:.04em;font-size:.85rem}
.lesson .box.trap{background:var(--critsoft);border-color:#E7B8B0}
.lesson .box.boost,.lesson .box.move{background:var(--soft);border-color:#B5DED8}
.lesson .box.clue,.lesson .box.remember,.lesson .box.why{background:#EEF2FB;border-color:#C7D2EE}
.lesson .box.checkpoint,.lesson .box.check,.lesson .box.challenge{background:var(--goodsoft);border-color:#BFE3CB}
.lesson .box.time{background:var(--warnsoft);border-color:#EAD1A6}
.lesson .box.pattern{border-left:5px solid var(--accent)}
.lesson .q{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:10px 0 0}
.lesson .opts{background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;padding:8px 14px;margin:0 0 10px;white-space:pre-line}
.lesson .script,.lesson .passage{background:#FBFBF7;border:1px solid #E6E3D3;border-radius:8px;padding:12px 16px;margin:12px 0;font-size:.95rem}
.lesson .say,.lesson .audio{display:none}
.lesson .sheet{background:var(--bg);border-radius:8px;padding:12px 16px}
.lesson .fill{display:inline-block;min-width:60px;border-bottom:1px solid var(--ink2)}
.lesson .nb{white-space:nowrap}
.lesson img{max-width:100%}
.lesson-nav{display:flex;justify-content:space-between;gap:10px;margin:36px 0 0;flex-wrap:wrap}
.player{position:sticky;top:0;z-index:5;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 18px;display:flex;gap:12px;align-items:center}
.player audio{flex:1;min-width:200px}

/* ---- ห้องสอบ ---- */
body.exam{background:#EEF1F5}
.room{max-width:1100px;margin:0 auto;padding:0 12px 40px}
.bar{position:sticky;top:0;z-index:10;background:var(--ink);color:#fff;display:flex;gap:16px;align-items:center;padding:10px 16px;border-radius:0 0 10px 10px;flex-wrap:wrap}
.bar .part{font-family:var(--disp);font-weight:600}
.bar .timer{font-family:var(--mono);font-size:1.35rem;margin-left:auto;font-variant-numeric:tabular-nums}
.bar .timer.low{color:#FFB4A8}
.bar .btn{background:#fff;color:var(--ink)!important;padding:7px 14px}
.stage{display:grid;grid-template-columns:1fr 240px;gap:14px;margin-top:14px}
@media(max-width:820px){.stage{grid-template-columns:1fr}}
.paper{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px;min-height:400px}
.passage{background:#FBFBF7;border:1px solid #E6E3D3;border-radius:8px;padding:14px 18px;font-size:1rem;line-height:1.75;max-height:60vh;overflow:auto;margin-bottom:16px}
.passage p{max-width:none}
.qn{font-family:var(--mono);color:var(--accent);font-weight:600}
.q{margin:14px 0 22px;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.q.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.q .stem{font-size:1.05rem;margin-bottom:8px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-radius:6px;cursor:pointer;border:1px solid transparent}
.opt:hover{background:var(--bg)}
.opt.sel{background:var(--soft);border-color:var(--accent)}
.opt .k{font-family:var(--mono);font-weight:600;flex:none;width:22px}
.seg{border-bottom:2px solid var(--ink2);padding:0 2px;cursor:pointer}
.seg sup{font-family:var(--mono);font-size:.7em;color:var(--accent)}
.seg.sel{background:var(--soft);border-color:var(--accent)}
.side{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.pal{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:8px 0 12px}
.pal button{font-family:var(--mono);font-size:.8rem;padding:6px 0;border:1px solid var(--line);background:#fff;border-radius:5px;cursor:pointer}
.pal button.a{background:var(--soft);border-color:var(--accent)}
.pal button.f{outline:2px solid var(--warn)}
.pal button.cur{background:var(--ink);color:#fff}
.side .legend{font-size:.8rem;color:var(--ink2)}
.audiobox{background:var(--ink);color:#fff;border-radius:10px;padding:16px 18px;margin-bottom:16px}
.audiobox .st{font-family:var(--mono);font-size:.85rem;opacity:.8}
.audiobox .big{font-family:var(--disp);font-size:1.2rem;margin:6px 0}
.meter{height:6px;background:#3a4560;border-radius:3px;overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;background:#4FC1B6;width:0;transition:width .5s linear}
.center{text-align:center;padding:40px 10px}
.modal{position:fixed;inset:0;background:rgba(22,33,58,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal .card{max-width:520px;width:100%}

/* ---- ผลสอบ ---- */
.scoreband{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.scoreband .big{font-family:var(--mono);font-size:3.2rem;color:var(--accent);line-height:1}
.scoreband .band{font-family:var(--disp);font-size:1.4rem}
.parts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:16px 0}
.parts div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.parts b{font-family:var(--mono);font-size:1.4rem}
.parts .w{border-color:var(--crit)}
.bar-h{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px}
.bar-h i{display:block;height:100%;background:var(--accent)}
.review .q{background:var(--paper)}
.review .opt.right{background:var(--goodsoft);border-color:var(--good)}
.review .opt.wrong{background:var(--critsoft);border-color:var(--crit)}
.review .expl{background:var(--bg);border-radius:8px;padding:10px 14px;margin-top:10px;font-size:.95rem}
.review .expl p{margin:0 0 6px}
.review .tr{font-size:.92rem;color:var(--ink2);margin-top:8px}

.vid{background:#0E1626;border-radius:12px;overflow:hidden;margin:0 0 14px}
.vid video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.vid .vmeta{padding:10px 14px;color:#F2F5FA;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.vid .vmeta .eyebrow{color:#4FC1B6}