:root{--red:#C7090E;--red-dark:#700607;--gold:#F5C04A;--cream:#FFF8EE;--ink:#1f1a17;--muted:#6b625c;--line:#e8dccb;--ok:#1b7f3a;--bad:#b00020}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream)}
a{color:var(--red)}
.hidden{display:none!important}
.hero{text-align:center;padding:20px 16px 24px;background:linear-gradient(160deg,var(--red),var(--red-dark));color:#fff}
/* Vòng tròn trắng là thẻ bọc; ảnh bên trong KHÔNG bo góc (border-radius trên <img> cắt cả nội dung ảnh, mất chữ dòng dưới) */
.logo-ring{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#fff}
.logo-ring img{display:block;width:58px;height:58px;object-fit:contain}
.logo-ring.small{width:58px;height:58px}.logo-ring.small img{width:40px;height:40px}
.hero h1{font-size:1.65rem;line-height:1.25;margin:.35em 0 .2em}
.hero.small h1{font-size:1.3rem}
.hero .sub{margin:0 auto 12px;max-width:560px;color:#ffe9b8}
.hero .btn{max-width:420px;margin:10px auto}
.card{max-width:640px;margin:16px auto;padding:18px 16px;background:#fff;border:1px solid var(--line);border-radius:14px}
@media (max-width:672px){.card{margin:14px 16px}}
h2{font-size:1.25rem;line-height:1.3;color:var(--red);margin:.2em 0 .5em}
ul{padding-left:1.2em;margin:.4em 0}
li{margin:.25em 0}
.hint{color:var(--muted);font-size:16px}
.sched{margin:0}.sched dt{font-weight:700;margin-top:8px}.sched dd{margin:0 0 4px}
.score{width:100%;border-collapse:collapse;margin:4px 0 8px}
.score td{padding:8px 6px;border-bottom:1px solid var(--line)}
.score td:last-child{text-align:right;font-weight:700}
.score .total td{border-bottom:0;font-weight:800;color:var(--red);font-size:1.15rem}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 18px;font:inherit;font-weight:700;color:#fff;background:var(--red);border:0;border-radius:12px;text-decoration:none;cursor:pointer;margin:10px 0;text-align:center}
.btn:disabled{background:#bbb}
.btn.gold{background:var(--gold);color:#3a2a00}
.btn.light{background:#fff;color:var(--red)}
.btn.alt{background:#fff;color:var(--red);border:2px solid var(--red)}
.btn.zalo{background:#0068ff}
.btn.danger{background:#8b0000}
.btn.small{min-height:48px;font-size:16px;padding:8px 12px}
.row{display:flex;gap:10px}.row .btn{flex:1}
label,.lbl{display:block;margin:14px 0 4px;font-weight:700}
input[type=text],input[type=tel],select{width:100%;min-height:52px;padding:10px 12px;font:inherit;border:1px solid #cdbfab;border-radius:10px;background:#fff;color:var(--ink)}
select{margin-top:0}
input:focus,select:focus{outline:3px solid var(--gold);border-color:var(--red)}
.grades{display:flex;gap:8px}
.gbtn{flex:1;margin:0;position:relative}
.gbtn input{position:absolute;opacity:0;width:1px;height:1px}
.gbtn span{display:flex;align-items:center;justify-content:center;min-height:56px;border:2px solid var(--red);border-radius:12px;color:var(--red);background:#fff;font-weight:800}
.gbtn input:checked+span{background:var(--red);color:#fff}
.gbtn input:focus+span{outline:3px solid var(--gold)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:14px 0 4px}
.check input{width:26px;height:26px;margin-top:2px;flex:none}
.ferr{color:var(--bad);font-weight:600;font-size:16px;margin:4px 0 0;min-height:0}
.ferr:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.who{font-size:1.1rem}
.notice{background:#eaf7ee;border:1px solid #b9e2c5;border-radius:10px;padding:10px 12px;color:var(--ok);font-weight:600}
.closed{background:#fff6dc;border:1px solid var(--gold);border-radius:12px;padding:14px;font-weight:600}
.lv{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.lv b{color:var(--red)}
.bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:6px}
.bar>div{height:100%;background:var(--ok)}
.switch-item{display:block;width:100%;text-align:left;min-height:48px;padding:10px 12px;margin:6px 0;font:inherit;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.switch-item.cur{border-color:var(--red);font-weight:700}
.profile{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.profile summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.prow{border-bottom:1px solid var(--line);padding:6px 0}.prow p{margin:4px 0}
.foot{max-width:640px;margin:0 auto;padding:8px 16px 32px;text-align:center;color:var(--muted)}
.okline{color:var(--ok);font-weight:700}
.qhead{color:var(--muted);font-size:16px;margin:0 0 6px}
.stem{font-size:1.2rem;font-weight:700;margin:6px 0 12px}
.qimg{display:block;max-width:100%;height:auto;border-radius:12px;margin:8px auto;border:1px solid var(--line)}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;margin:8px 0;font:inherit;text-align:left;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;cursor:pointer}
.opt .lt{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--cream);font-weight:800;color:var(--red)}
.opt.sel{border-color:var(--red)}
.opt.right{background:#eaf7ee;border-color:var(--ok)}
.opt.wrong{background:#fdecee;border-color:var(--bad)}
.opt:disabled{cursor:default;color:var(--ink)}
.ans-row,.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:60px;padding:8px;border-radius:12px;margin:8px 0}
.ans-row{border:2px dashed var(--red);background:#fff}
.pool{background:var(--cream);border:1px solid var(--line)}
.tok{min-height:48px;padding:8px 14px;font:inherit;font-weight:700;color:var(--red);background:#fff;border:2px solid var(--red);border-radius:10px;cursor:pointer}
.tok:disabled{opacity:.8;cursor:default}
.fb{border-radius:12px;padding:12px 14px;margin:12px 0}
.fb p{margin:6px 0 0}
.fb.good{background:#eaf7ee;border:1px solid #b9e2c5;color:#145c2b}
.fb.bad{background:#fdecee;border:1px solid #f2b8c0;color:#7a0016}
