/* Super English — giao diện dựa trên bảng màu và bố cục của Super Honki */
:root{
  --green:#004646;--green-deep:#003838;--mint:#27c4b5;--mint-soft:#e6f0f2;--coral:#ed3838;--coral-soft:#ffebeb;
  --cream:#f7f4ed;--bg:#f8fbfa;--ink:#0f172a;--muted:#5f6c72;--line:#d9e3e4;--surface:#fff;--on-primary:#fff;
  --ok:#168a5b;--ok-soft:#e3f5ec;--bad:#c92a2a;--bad-soft:#ffecec;--hl:#fff1b8;--hl-line:#e6b800;
  --shadow:rgba(0,56,56,.16);--ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Source Serif 4","Georgia",serif;
  --wrap:1120px;--gut:clamp(16px,4vw,36px);--r:14px;--r-sm:8px;
}
:root[data-theme="ai"]{--green:#233a63;--green-deep:#182a4a;--mint:#5fa8d8;--mint-soft:#e5eef7;--coral:#e0533d;--coral-soft:#fdeceb;--cream:#f1f3f7;--bg:#f5f7fb;--line:#d7dfec;--hl:#dcecff;--hl-line:#5fa8d8}
:root[data-theme="sakura"]{--green:#7a2e4a;--green-deep:#5e2238;--mint:#ee8fae;--mint-soft:#fbe8ee;--coral:#d23b3b;--coral-soft:#fdecec;--cream:#fbf1f2;--bg:#fff8f9;--line:#efd6dd;--hl:#ffe3ec;--hl-line:#ee8fae}
:root[data-theme="matcha"]{--green:#3f5a22;--green-deep:#2f4418;--mint:#a3c45a;--mint-soft:#eef3dc;--coral:#d9622b;--coral-soft:#fcece3;--cream:#f4f2e4;--bg:#f9faf2;--line:#dfe4cc;--hl:#eef5c8;--hl-line:#a3c45a}
:root[data-theme="momiji"]{--green:#7a2f14;--green-deep:#5c230f;--mint:#f2a04a;--mint-soft:#fbeedc;--coral:#c8102e;--coral-soft:#fde8ea;--cream:#faf0e3;--bg:#fffaf3;--line:#ecd9c2;--hl:#ffe9c4;--hl-line:#f2a04a}
:root[data-theme="yoru"]{--green:#134e4c;--green-deep:#0b2a2a;--mint:#3fd1c0;--mint-soft:#16282b;--coral:#ff6b6b;--coral-soft:#3a2024;--cream:#16222a;--bg:#0b1416;--surface:#13222a;--ink:#e6eef0;--muted:#97a9ae;--line:#25383f;--ok:#46d39a;--ok-soft:#10302a;--bad:#ff8383;--bad-soft:#3a1f22;--hl:#3b3516;--hl-line:#d9b933;--shadow:rgba(0,0,0,.5)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
/* ---------- thanh trên ---------- */
.strip{background:var(--green-deep);color:#f7f4ed;position:sticky;top:0;z-index:60;box-shadow:inset 0 -3px 0 var(--coral)}
.strip__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 3px;height:64px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;margin-right:10px}
.brand b{font-weight:900}.brand svg{width:38px;height:38px}
.snav{display:flex;gap:4px;margin-left:auto}
.snav a{padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px;opacity:.85;white-space:nowrap}
.snav a:hover{opacity:1;background:rgba(255,255,255,.12)}
.snav a[aria-current="true"]{opacity:1;background:var(--coral);color:#fff}
.tbtn{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(247,244,237,.4);background:transparent;color:#f7f4ed;border-radius:999px;padding:6px 14px 6px 8px;font:700 13px/1 var(--ui)}
.tbtn:hover{border-color:#fff}.dot{width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--green) 0 50%,var(--mint) 0 75%,var(--coral) 0);border:2px solid #fff}
.tmenu{position:absolute;right:var(--gut);top:68px;width:250px;background:var(--surface);color:var(--ink);border-radius:14px;box-shadow:0 18px 50px var(--shadow);padding:8px;z-index:70;border:1px solid var(--line)}
.tmenu button{display:flex;width:100%;align-items:center;gap:10px;border:0;background:none;padding:8px;border-radius:10px;text-align:left;font-weight:600;font-size:14px}
.tmenu button:hover,.tmenu button[aria-checked="true"]{background:var(--mint-soft)}
.tmenu i{display:flex;width:44px;height:22px;border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,.12)}.tmenu i b{flex:1}
@media(max-width:640px){.tbtn span{display:none}.tbtn{padding:6px}.brand{font-size:18px}.snav a{padding:8px 10px;font-size:13px}.strip__in{gap:4px}}
/* ---------- khung chung ---------- */
main{min-height:70vh;padding-bottom:60px}
.band{background:var(--green);color:#e9f2f1;padding:28px 0 30px;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.05) 31px 32px);pointer-events:none}
.band .wrap{position:relative;z-index:1}
.crumb{font-size:13px;opacity:.8;margin:0 0 6px}.crumb a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.band h1{margin:0;font-size:clamp(26px,4vw,38px);line-height:1.2;letter-spacing:-.02em;color:#fff}
.band p{margin:8px 0 0;max-width:720px;color:#bcd3d1}
.band .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600;color:#fff}
.sect{margin:30px 0 14px;font-size:20px;letter-spacing:-.01em}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card-l{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:.15s;position:relative}
a.card-l:hover{transform:translateY(-3px);box-shadow:0 10px 26px var(--shadow);border-color:var(--mint)}
.card-l h3{margin:0;font-size:18px;line-height:1.3}.card-l p{margin:0;color:var(--muted);font-size:14px}
.card-l .big{font-size:40px;font-weight:900;color:var(--green);line-height:1;letter-spacing:-.03em}
:root[data-theme="yoru"] .card-l .big{color:var(--mint)}
.card-l.soon{opacity:.62;background:var(--cream)}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--mint-soft);color:var(--green)}
:root[data-theme="yoru"] .tag{color:var(--mint)}
.tag.warn{background:var(--coral-soft);color:var(--coral)}
.bar{height:7px;border-radius:99px;background:var(--mint-soft);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--mint);border-radius:99px;transition:width .3s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--green);background:var(--green);color:var(--on-primary);border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;text-decoration:none}
.btn:hover{filter:brightness(1.12)}.btn.ghost{background:transparent;color:var(--green)}.btn.coral{background:var(--coral);border-color:var(--coral);color:#fff}
:root[data-theme="yoru"] .btn.ghost{color:var(--mint);border-color:var(--mint)}
.btn.sm{padding:6px 12px;font-size:13px}.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.icon-btn:hover{border-color:var(--mint)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 18px;border-bottom:2px solid var(--line);padding-bottom:0}
.tabs button{border:0;background:none;padding:10px 16px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;font-size:15px}
.tabs button[aria-selected="true"]{color:var(--green);border-color:var(--coral)}
:root[data-theme="yoru"] .tabs button[aria-selected="true"]{color:var(--mint)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,3vw,28px)}
.note{background:var(--cream);border-left:4px solid var(--mint);padding:10px 14px;border-radius:8px;font-size:14px;color:var(--muted);margin:14px 0}
/* ---------- tìm kiếm ---------- */
.search{position:relative;max-width:560px;width:100%}
.search input{width:100%;border:2px solid var(--line);border-radius:999px;padding:11px 18px 11px 44px;font:500 16px var(--ui);background:var(--surface);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--mint)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.band .search input{border-color:transparent}
.res{display:grid;gap:10px;margin-top:16px}
.res button{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:grid;gap:2px}
.res button:hover{border-color:var(--mint)}.res b{font-size:17px}.res small{color:var(--muted)}
mark{background:var(--hl);color:inherit;border-radius:3px;padding:0 1px}
/* ---------- flashcard ---------- */
.studybar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:16px}
.modes{display:flex;gap:6px;flex-wrap:wrap}
.modes button{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 16px;font-weight:700;font-size:14px}
.modes button[aria-pressed="true"]{background:var(--green);color:var(--on-primary);border-color:var(--green)}
.stage{max-width:660px;margin:0 auto}
.card{perspective:1200px;min-height:360px}
.card__in{position:relative;min-height:360px;transition:transform .5s;transform-style:preserve-3d;cursor:pointer}
.card.flip .card__in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;box-shadow:0 8px 28px var(--shadow);overflow:auto}
.face.back{transform:rotateY(180deg);background:var(--cream)}
.face .top{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.face .main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:10px 0}
.say{font-size:clamp(30px,6vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--green)}
:root[data-theme="yoru"] .say{color:var(--mint)}
.say.sm{font-size:clamp(22px,4.5vw,30px)}
.pos{font-size:14px;color:var(--muted);font-style:italic}
.mean{font-size:clamp(22px,4vw,30px);font-weight:700;text-align:center}
.coll{font-size:18px;font-weight:600;text-align:center}.coll small{display:block;color:var(--muted);font-weight:500;font-size:15px}
.coll em{font-style:normal;background:var(--hl);border-radius:4px;padding:0 3px}
.xmp{font-size:14px;color:var(--muted);text-align:center;margin-top:4px}
.hint{text-align:center;color:var(--muted);font-size:13px;margin-top:8px}
.nav{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
.counter{font-weight:700;color:var(--muted);min-width:70px;text-align:center}
.jud{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.jud .btn.ok{background:var(--ok);border-color:var(--ok)}.jud .btn.rv{background:var(--coral);border-color:var(--coral)}
.state{font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px}.state.ok{background:var(--ok-soft);color:var(--ok)}.state.rv{background:var(--coral-soft);color:var(--coral)}
/* ---------- trắc nghiệm ---------- */
.q{font-size:clamp(22px,4vw,30px);font-weight:800;text-align:center;margin:6px 0 4px;line-height:1.3}
.q small{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:6px}
.opts{display:grid;gap:10px;margin-top:16px}
.opt{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:13px 16px;text-align:left;font-weight:600;font-size:16px;display:flex;gap:12px;align-items:center}
.opt kbd{border:1px solid var(--line);border-radius:6px;padding:0 7px;font:700 13px var(--ui);color:var(--muted);background:var(--cream)}
.opt:hover{border-color:var(--mint)}.opt.ok{border-color:var(--ok);background:var(--ok-soft)}.opt.bad{border-color:var(--bad);background:var(--bad-soft)}
.opt[disabled]{pointer-events:none}
.verdict{margin-top:14px;padding:12px 16px;border-radius:12px;font-weight:600}.verdict.ok{background:var(--ok-soft);color:var(--ok)}.verdict.bad{background:var(--bad-soft);color:var(--bad)}
.verdict small{display:block;font-weight:500;color:var(--ink);margin-top:2px}
.input{width:100%;border:2px solid var(--line);border-radius:12px;padding:12px 16px;font:600 18px var(--ui);background:var(--surface);color:var(--ink)}
.input:focus{outline:none;border-color:var(--mint)}
textarea.input{font:500 17px/1.6 var(--ui);min-height:110px;resize:vertical}
.ring{width:130px;height:130px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) calc(var(--p)*1%),var(--mint-soft) 0)}
.ring b{width:100px;height:100px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:26px;color:var(--green)}
.done{text-align:center;padding:10px 0}.done h2{margin:6px 0}
/* ---------- ghép cặp ---------- */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.pairs .col{display:grid;gap:10px;align-content:start}
.pt{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;font-weight:600;min-height:54px;text-align:center;font-size:15px}
.pt.sel{border-color:var(--mint);background:var(--mint-soft)}.pt.done{visibility:hidden}.pt.wrong{border-color:var(--bad);background:var(--bad-soft)}
/* ---------- danh sách ---------- */
.list{display:grid;gap:8px}.list .it{display:grid;grid-template-columns:minmax(120px,1fr) 1.3fr 1.4fr;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;align-items:center;text-align:left;width:100%}
.list .it:hover{border-color:var(--mint)}.list .it b{font-size:17px}.list .it span{color:var(--muted);font-size:14px}.list .it .m{color:var(--ink);font-weight:600;font-size:15px}
@media(max-width:700px){.list .it{grid-template-columns:1fr}.pairs{gap:8px}}
/* ---------- cửa sổ ---------- */
.modal{position:fixed;inset:0;background:rgba(5,25,25,.55);display:grid;place-items:center;z-index:100;padding:16px}
.modal__box{background:var(--surface);border-radius:20px;max-width:560px;width:100%;max-height:92vh;overflow:auto;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.4);position:relative;border:1px solid var(--line)}
.modal__x{position:absolute;right:12px;top:12px;border:0;background:var(--mint-soft);width:34px;height:34px;border-radius:50%;font-size:18px;line-height:1}
.modal h2{margin:0 0 4px;font-size:26px;letter-spacing:-.01em;color:var(--green);padding-right:40px}
:root[data-theme="yoru"] .modal h2{color:var(--mint)}
.modal .vi{font-size:20px;font-weight:700;margin:6px 0 12px}
.ctx{background:var(--cream);border-radius:12px;padding:12px 14px;margin:10px 0;font-size:16px}.ctx small{display:block;color:var(--muted);margin-top:4px;font-size:14px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--green-deep);color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.3)}
/* ---------- writing ---------- */
.para{margin:0 0 22px}
.ptitle{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--coral);margin:22px 0 8px}
.pair{padding:10px 0;border-bottom:1px dashed var(--line)}
.pair .en{font:500 clamp(17px,2.2vw,19px)/1.7 var(--serif)}
.pair .vi{color:var(--muted);margin-top:4px;font-size:16px}
body.hide-vi .pair .vi,body.hide-vi .vi-only{display:none}
body.hide-en .pair .en{filter:blur(7px);cursor:pointer;user-select:none}
.cl{background:var(--hl);border-bottom:2px solid var(--hl-line);border-radius:4px;padding:0 2px;cursor:pointer;color:inherit;font:inherit}
.cl:hover{background:var(--hl-line);color:#000}
body.no-hl .cl{background:none;border-color:transparent}
.essay-text p{font:500 clamp(17px,2.2vw,19px)/1.85 var(--serif);margin:0 0 16px}
.collgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.collgrid button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 14px;display:grid;gap:2px}
.collgrid button:hover{border-color:var(--mint)}.collgrid b{font-size:16px}.collgrid span{color:var(--muted);font-size:14px}
.diff .ok{background:var(--ok-soft);color:var(--ok);border-radius:3px;padding:0 2px}.diff .miss{background:var(--bad-soft);color:var(--bad);border-radius:3px;padding:0 2px;text-decoration:underline wavy}
.legend{font-size:13px;color:var(--muted);margin-top:6px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.sw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:13px;font-weight:700}
.sw[aria-pressed="true"]{background:var(--mint-soft);border-color:var(--mint)}
.footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:13px;text-align:center}
.src{font-size:13px;color:var(--muted);margin-top:10px}

/* từ lẻ trong bài writing */
.cw{background:none;border:0;border-bottom:1px dotted var(--hl-line);padding:0;cursor:pointer;color:inherit;font:inherit}
.cw:hover{background:var(--hl);border-radius:3px}
body.no-hl .cw{border-color:transparent}
.fcoll{font:500 18px/1.4 var(--serif);color:var(--muted);text-align:center;margin:6px 10px 10px}
.jud small{opacity:.9;font-weight:700;margin-left:4px;background:rgba(255,255,255,.25);padding:1px 7px;border-radius:99px}
.authbox label{display:block;font-weight:600;margin:10px 0 4px}
.authbox input{width:100%;padding:10px 12px;border:1px solid var(--line,#ccd);border-radius:10px;font:inherit}
.authbox .msg{margin-top:10px;color:var(--muted);font-size:14px}
@media(max-width:640px){.strip__in{height:auto;flex-wrap:wrap;padding:8px var(--gut);row-gap:6px}.vbtn span,.abtn span{display:inline}.vbtn,.abtn{padding:6px 12px}.abtn{margin-left:auto}.mbtn{margin-left:0}}