/* Trang đề: thanh chế độ (Làm bài / Xem-In) và chế độ làm bài trên máy (assets/app/test.js) */
.topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar .modes { display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px; margin-left:auto; }
.topbar .bar-title + .modes { margin-left:0; }
.topbar .modes a { padding:5px 14px; border-radius:999px; font-size:14px; color:var(--ink); }
.topbar .modes a.on { background:var(--accent); color:#fff; }
.topbar .modes a:hover { text-decoration:none; }
.topbar .print-btn { font:inherit; font-size:14px; font-weight:600; border:1px solid var(--accent); color:var(--accent); background:#fff; border-radius:999px; padding:5px 14px; cursor:pointer; }
.testbar { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:14px;
           background:#1d2433; color:#fff; border-radius:999px; padding:8px 8px 8px 22px; box-shadow:0 8px 24px rgba(0,0,0,.25); font-size:17px; }
.testbar .timer { font-variant-numeric:tabular-nums; font-weight:700; color:#ffd84d; }
.testbar .timer.late { color:#ff8a80; }
.testbar .timer:empty { display:none; }
.testbar .submit { font:inherit; font-weight:700; border:0; border-radius:999px; padding:9px 22px; background:#ff7043; color:#fff; cursor:pointer; }
body.testing .sheet { padding-bottom:90px; }
/* Làm bài trên máy — giao diện cho bé: bỏ phần dành cho người lớn của bản in, chữ to, ô dễ bấm */
body.testing, body.testing .topbar { background:#fdf8ef; }
body.testing .sheet { border-radius:20px; font-size:17px; }
body.testing header.top .kicker, body.testing header.top .meta, body.testing header.top .score, body.testing .sheet > .note { display:none; }
body.testing header.top { border-bottom:0; margin-bottom:8px; padding-bottom:0; }
body.testing h1 { font-size:22px; }
body.testing .q > .stem { font-size:17px; }
body.testing .q { padding:18px 0 26px; }
body.testing h2 { font-size:18px; border-radius:12px; }
.topbar .home-link { font-size:17px; }
body.testing .topbar .home-link { display:inline-flex; align-items:center; gap:6px; background:#fff; border:2px solid var(--line); border-radius:999px; padding:3px 12px; font-size:16px; }
.testbar .pbar { width:120px; height:12px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden; }
.testbar .pbar i { display:block; height:100%; width:0; background:#7ee08a; border-radius:999px; transition:width .25s; }
.testbar .prog { font-weight:700; font-variant-numeric:tabular-nums; }
.testbar .submit { font-size:16px; padding:9px 22px; box-shadow:0 4px 0 #d84315; }

/* ô nhập: giữ đúng kích thước ô vuông / chỗ chấm của bản in */
input.inp { font:inherit; font-size:19px; font-weight:600; text-align:center; color:#1f4fb8; padding:0; background:#fffef4; outline:none; }
input.inp.box { border:1.5px solid var(--ink); border-radius:4px; }
.bonds input.inp.box { border-radius:22px; }
.pyramids input.inp.box { border:0; border-radius:0; margin:0; width:100%; height:100%; }
.pyramids .p-cell { position:relative; }
.pyramids .p-cell .fix { position:absolute; right:3px; bottom:1px; margin:0; font-size:12px; line-height:1; }
.pyramids input.inp.box.bad { text-decoration:line-through; }
input.inp.blank { border:0; border-bottom:1.5px dotted var(--ink); height:1.5em; vertical-align:baseline; width:80px; }
input.inp.blank.long { width:200px; }
input.inp:focus { border-color:#2f6fde; box-shadow:0 0 0 3px rgba(47,111,222,.25); }
.dots-inp { display:flex; align-items:flex-end; gap:8px; }
.dots-inp input { flex:1; font:inherit; font-size:17px; color:#1f4fb8; border:0; background:transparent; outline:none; padding:0 4px 2px; }
.cell-inp { width:100%; border:0; font:inherit; font-size:18px; text-align:center; color:#1f4fb8; background:transparent; outline:none; }
.choices .opt { cursor:pointer; border-radius:999px; padding:2px 10px; margin:-2px -10px; transition:background .1s; }
.choices .opt:hover { background:#eef3fc; }
.choices .opt.sel { background:#dbe8ff; box-shadow:inset 0 0 0 2px #2f6fde; font-weight:600; }
.match .msel { font:inherit; font-size:14px; margin-left:8px; border-radius:8px; border:1px solid var(--line); padding:2px 4px; }
/* bài nối trên máy: bấm hai ô để nối, đường nối vẽ bằng SVG (assets/app/test.js) */
.match.live { position:relative; }
.match.live .msel { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }   /* vẫn giữ đáp án; bé nối bằng cách bấm hai ô */
.match.live > div:focus-visible { outline:3px solid #2f6fde; outline-offset:2px; }
.match.live > div { cursor:pointer; transition:background .12s, box-shadow .12s; user-select:none; }
.match.live > div:hover { background:#f4f8ff; }
.match.live > div.mlinked { background:#eef4ff; }
.match.live > div.mpick { box-shadow:0 0 0 3px #ffd43b; background:#fffbe6; }
.match.locked > div { cursor:default; }
.match .mlines { position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:1; }
.match .mlines line { stroke:#2f6fde; stroke-width:3; stroke-linecap:round; }
.match .mlines circle { fill:#2f6fde; }
.match .mlines .ok line { stroke:#2e9d5b; } .match .mlines .ok circle { fill:#2e9d5b; }
.match .mlines .bad line { stroke:#d6336c; stroke-dasharray:6 5; } .match .mlines .bad circle { fill:#d6336c; }
.match .mlab { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#2f6fde; color:#fff; font-size:12px; margin-right:6px; }

/* kết quả chấm */
.ok { background:#e7f7ea !important; border-color:#2e9d5b !important; color:#1b6b34 !important; }
.bad { background:#fdecea !important; border-color:#d93025 !important; color:#b3261e !important; text-decoration:line-through; }
.fix { display:inline-block; margin:0 6px; font-weight:700; color:#2e9d5b; font-size:15px; }
.choices .opt.right { box-shadow:inset 0 0 0 2px #2e9d5b; background:#e7f7ea; }
.choices .opt.wrong { box-shadow:inset 0 0 0 2px #d93025; background:#fdecea; text-decoration:line-through; }
.qscore { font-size:13px; font-weight:700; border-radius:999px; padding:1px 9px; margin-left:6px; white-space:nowrap; }
.qscore.full { background:#e7f7ea; color:#1b6b34; }
.qscore.part { background:#fff4d6; color:#8a5a00; }
.qscore.zero { background:#fdecea; color:#b3261e; }
.result { display:flex; gap:16px; align-items:center; margin:14px 0; padding:14px 18px; border-radius:16px; background:linear-gradient(135deg,#fff7e6,#eaf4ff); border:1.5px solid #ffd27a; font-size:16px; }
.result .stars { font-size:40px; color:#ffb400; letter-spacing:2px; line-height:1; white-space:nowrap; }
.result .stars span { color:#e4e7ee; }
.result { flex-wrap:wrap; font-size:17px; border-radius:20px; padding:16px 20px; }
.result .stars { font-size:44px; }
.result .timeup { flex-basis:100%; font-weight:700; color:#c62828; }
.result .muted { color:var(--muted); font-size:14px; }
@media (max-width:600px) {
  .topbar { gap:8px; flex-wrap:nowrap; }
  .topbar > a { white-space:nowrap; }
  .topbar .wide { display:none; }
  .topbar .modes a { padding:5px 10px; font-size:13px; white-space:nowrap; }
  .topbar .print-btn { padding:5px 10px; font-size:13px; white-space:nowrap; }
  .testbar { gap:10px; font-size:14px; white-space:nowrap; padding-left:16px; bottom:10px; }
  .testbar .pbar { width:56px; }
  body.testing .sheet { font-size:17px; border-radius:0; }
  .testbar .submit { padding:8px 16px; }
}
@media print {
  .testbar, .fix, .qscore, .result { display:none !important; }
  input.inp { background:none; }
}