:root{--bg:#f4f8f5;--card:#fff;--ink:#17332b;--mut:#5b7068;--pri:#0f8f6b;--pri2:#0a6b50;--acc:#f59e0b;--line:#d8e6df;--bad:#d64545;--good:#169c5b;--r:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1c18;--card:#17282a;--ink:#e6f2ec;--mut:#9db8ad;--pri:#2fc79a;--pri2:#7be3c3;--line:#2a4640;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1c18;--card:#17282a;--ink:#e6f2ec;--mut:#9db8ad;--pri:#2fc79a;--pri2:#7be3c3;--line:#2a4640;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 system-ui,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--pri2)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--card);border-bottom:1px solid var(--line)}
.top .in{max-width:1100px;margin:auto;padding:10px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logo{font-weight:800;text-decoration:none;color:var(--ink);font-size:18px}.logo b{color:var(--pri)}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{padding:6px 10px;border-radius:10px;text-decoration:none;color:var(--mut);font-weight:600;font-size:15px}
.top nav a:hover,.top nav a.on{background:var(--bg);color:var(--pri2)}
main{max-width:1100px;margin:auto;padding:20px 16px 60px}
.hero{background:linear-gradient(135deg,#0f8f6b,#1fb5a0);color:#fff;border-radius:24px;padding:32px 24px}
.hero h1{margin:6px 0 8px;font-size:clamp(26px,5vw,40px);line-height:1.2}.hero p{margin:0 0 18px;opacity:.95;max-width:640px}
.hero .tacgia{margin:-8px 0 16px;font-size:15px;opacity:1}.tacgia2{color:var(--ink);font-size:15px}
.chip{display:inline-block;background:rgba(255,255,255,.2);padding:4px 12px;border-radius:99px;font-size:14px}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:12px;padding:10px 16px;font:600 16px inherit;font-family:inherit;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--pri2)}.btn.alt{background:var(--card);color:var(--pri2);border:1px solid var(--line)}
.hero .btn{background:#fff;color:#0a6b50;margin:0 8px 8px 0}
h2{margin:30px 0 12px;font-size:22px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:block}
a.card:hover{border-color:var(--pri);transform:translateY(-1px)}
.card .ic{font-size:30px}.card h3{margin:6px 0 4px;font-size:18px}.card p{margin:0;color:var(--mut);font-size:15px}
.tag{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--bg);color:var(--mut);border:1px solid var(--line)}
.tag.ok{background:#dff5ea;color:#0a6b50;border-color:#b6e5cf}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tabs a,.tabs button{padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font:600 15px inherit;font-family:inherit;cursor:pointer}
.tabs.mon{margin-bottom:4px}.tabs.mon a{font-size:16px}
.tabs .on{background:var(--pri);color:#fff;border-color:var(--pri)}
.chuong{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:12px 0;overflow:hidden}
.chuong h3{margin:0;padding:12px 16px;background:var(--bg);font-size:16px}
.bai{display:flex;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.bai .so{width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.bai .ten{flex:1;min-width:180px;font-weight:600}.bai .sub{color:var(--mut);font-size:13px;font-weight:400}
.bai .act{display:flex;gap:6px;flex-wrap:wrap}.bai .act a{font-size:14px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);text-decoration:none}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-top:14px}
.q h3{margin:0 0 14px;font-size:20px;line-height:1.4}
.opt{display:block;width:100%;text-align:left;margin:8px 0;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--pri)}
.opt.good{border-color:var(--good);background:#dff5ea;color:#0a4d2f}.opt.bad{border-color:var(--bad);background:#fde4e4;color:#7a1f1f}
.giai{margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--bg);color:var(--mut);font-size:15px}
.bar{height:10px;background:var(--line);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--pri);transition:width .3s}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stat{font-size:48px;font-weight:800;color:var(--pri)}
select,input[type=number]{font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.chk{display:flex;gap:8px;align-items:flex-start;padding:6px 0}
.note{font-size:14px;color:var(--mut)}
footer{max-width:1100px;margin:auto;padding:0 16px 40px;color:var(--mut);font-size:14px}
.sim{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
canvas{width:100%;max-width:640px;display:block;margin:auto;border-radius:12px;background:#0b2a33}
.info{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.info .b{border-radius:var(--r);padding:16px;color:#fff}
.b1{background:#5b6ee1}.b2{background:#0f8f6b}.b3{background:#e07a1f}
.b h4{margin:0 0 6px;font-size:20px}.b ul{margin:6px 0 0;padding-left:18px}
.flow{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:12px}
.flow div{background:var(--card);border:2px dashed var(--pri);border-radius:var(--r);padding:12px;text-align:center}
.flow b{display:block;font-size:18px;color:var(--pri2)}
svg.mm text{font-family:inherit}
img,svg,video,select{max-width:100%}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
.top .in{gap:4px;padding:8px 12px}.logo{font-size:17px}
.top nav{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -4px}
.top nav::-webkit-scrollbar{display:none}
.top nav a{white-space:nowrap;flex:none;padding:7px 10px;font-size:14.5px}
main{padding:14px 12px 50px}
.hero{padding:22px 16px;border-radius:18px}
.q{padding:14px}.q h3{font-size:18px}
h2{font-size:20px;margin-top:24px}
.bai{padding:10px 12px}.bai .ten{min-width:0;flex-basis:calc(100% - 50px)}
.bai .act a{padding:7px 10px}
.tabs a,.tabs button{padding:8px 13px;font-size:14.5px}
.stat{font-size:40px}
input[type=range]{height:32px;min-width:150px;flex:1;accent-color:var(--pri)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--pri)}
.sim{overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.mm{min-width:680px}
.sim:has(svg.mm)::after{content:"👉 Vuốt ngang để xem hết sơ đồ";display:block;font-size:13px;color:var(--mut);text-align:center;margin-top:6px;position:sticky;left:0;width:calc(100vw - 50px)}
}
@media print{.top,.btn,footer{display:none}}
/* Phân tích kết quả (phan-tich.js) */
.ptbox{margin-top:14px}.ptnut{display:flex;flex-wrap:wrap;gap:8px}.ptnut .btn.on{box-shadow:inset 0 0 0 3px rgba(0,0,0,.18)}
.ptpan{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.ptpan h4{margin:14px 0 8px;font-size:17px}.ptpan h4:first-child{margin-top:0}
.pttong{display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:14px;padding:10px 14px}.pttong p{margin:2px 0 0;color:var(--mut)}.ptxl{font-size:40px;line-height:1}
.ptv{display:grid;grid-template-columns:minmax(80px,38%) 1fr auto;gap:4px 10px;align-items:center;margin:8px 0;font-size:15px}
.ptv small{color:var(--mut);font-size:13px}.ptl{min-width:0;overflow-wrap:anywhere}
.ptb{height:14px;border-radius:99px;background:var(--bg);border:1px solid var(--line);overflow:hidden}.ptb i{display:block;height:100%;border-radius:99px}
.ptyeu p{margin:8px 0;padding:8px 12px;border-radius:12px;background:var(--bg);line-height:1.5}.ptok{color:var(--good);font-weight:600}
.ptsai{margin:0;padding-left:20px;line-height:1.5}.ptsai li{margin:4px 0}.ptsai small{color:var(--mut)}
.ptlink{display:flex;flex-wrap:wrap;gap:8px}.ptlink a{padding:7px 13px;border-radius:99px;border:1.5px solid var(--pri);text-decoration:none;font-weight:600;font-size:14.5px}
.ptda{margin:0;padding-left:22px}.ptda li{margin:0 0 10px;padding:8px 10px;border-radius:12px;border-left:4px solid var(--good);background:var(--bg);line-height:1.5}
.ptda li.s{border-left-color:var(--bad)}.ptda li.n{border-left-color:#f0a01c}.ptq{font-weight:600}.ptg{color:var(--mut);font-size:14.5px;margin-top:2px}
.anDA .dapan{display:none!important}
/* Ô viết bài và kết quả chấm bài viết (cham-viet.js) */
.oviet{display:block;width:100%;margin-top:8px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:15.5px;line-height:1.6;resize:vertical;background-image:repeating-linear-gradient(transparent 0 calc(1.6em + 0px),rgba(0,0,0,0) 0)}
.oviet:focus{outline:none;border-color:var(--pri)}
.kqv{margin-top:8px;font-size:15px}.kqv b{color:var(--pri2)}
.cvy{margin:6px 0;padding-left:4px;list-style:none;font-size:14.5px;line-height:1.5}.cvy li{margin:3px 0}.cvy small{color:var(--mut)}