:root {
  --bg:#f4f6fb; --card:#ffffff; --ink:#1a2233; --muted:#6b7488;
  --primary:#2b6cb0; --primary-d:#215389; --ok:#2f9e44; --bad:#e03131;
  --line:#dfe3ec; --mark:#fff3bf;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
}
header {
  background:linear-gradient(135deg,#2b6cb0,#3a8fd6); color:#fff;
  padding:20px 16px; text-align:center;
}
header h1 { margin:0; font-size:1.5rem; }
header .sub { margin:4px 0 0; opacity:.9; font-size:.95rem; }
main { max-width:820px; margin:0 auto; padding:16px; }
footer { text-align:center; padding:20px; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:.9rem; }
.center { justify-content:center; }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:20px; margin-bottom:16px; box-shadow:0 1px 4px rgba(20,30,60,.05);
}
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; }
label { font-size:.95rem; }
select, input[type=number], input[type=text] {
  font-size:1rem; padding:7px 10px; border:1px solid var(--line);
  border-radius:8px; background:#fff;
}
button {
  font-size:1rem; padding:9px 16px; border:1px solid var(--line);
  border-radius:10px; background:#fff; cursor:pointer; transition:.15s;
}
button:hover { background:#eef3fb; }
button.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
button.primary:hover { background:var(--primary-d); }

/* thanh làm bài */
.quizbar {
  position:sticky; top:0; z-index:5; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:10px 14px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px;
  box-shadow:0 2px 8px rgba(20,30,60,.06);
}
.quizbar #quizTitle { font-weight:700; }
.timer { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; color:var(--primary); }
.timer.warn { color:var(--bad); }

/* câu hỏi */
.q {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin-bottom:14px;
}
.q .qnum { font-weight:700; color:var(--primary); }
.q .tag { font-size:.78rem; color:var(--muted); font-weight:400; }
.q .prompt { margin:8px 0; }
.q .hint { font-style:italic; color:var(--muted); font-size:.88rem; margin:4px 0; }
.q .fig { margin:10px 0; text-align:center; }
.q .fig svg { max-width:100%; height:auto; }
.opt { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; margin:6px 0; cursor:pointer; }
.opt:hover { background:#f7f9fd; }
.opt input { margin-top:3px; }
.opt.svg svg { max-width:180px; height:auto; }
.answerbox input { width:min(320px,100%); }

/* kết quả */
.scorecard { text-align:center; }
#scoreBig { font-size:3rem; font-weight:800; margin:8px 0; }
#scoreBig.pass { color:var(--ok); }
#scoreBig.fail { color:var(--bad); }
.rev {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:12px; border-left:6px solid var(--line);
}
.rev.correct { border-left-color:var(--ok); }
.rev.wrong { border-left-color:var(--bad); }
.rev .verdict { font-weight:700; }
.rev .verdict.correct { color:var(--ok); }
.rev .verdict.wrong { color:var(--bad); }
.rev .yours { font-family:monospace; }
.rev .explain { background:#f7f9fd; border-radius:8px; padding:8px 12px; margin-top:8px; }
.rev .explain li { margin:3px 0; }
strong { color:#0d2c54; }

/* Bảng thống kê dạng hay sai */
table.stats { width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem; }
table.stats th, table.stats td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; }
table.stats th { color:var(--muted); font-weight:600; }
table.stats td.acc { font-weight:700; text-align:center; }
table.stats td.acc.good { color:var(--ok); }
table.stats td.acc.mid  { color:#c98a00; }
table.stats td.acc.bad  { color:var(--bad); }
table.stats tr:hover { background:#f7f9fd; }