:root {
  --bs-body-font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-bg: #f4f6fb;
  --bs-primary: #1e4e8c;
  --bs-primary-rgb: 30, 78, 140;
}
html, body { height: 100%; }
body { display: flex; flex-direction: column; font-size: 1.02rem; }
main { flex: 1 0 auto; }

.bg-primary { background-color: #1e4e8c !important; }
.btn-primary { background-color: #1e4e8c; border-color: #1e4e8c; }
.btn-primary:hover { background-color: #173d6e; border-color: #173d6e; }
.text-primary { color: #1e4e8c !important; }

.exam-card { transition: transform .15s, box-shadow .15s; }
.exam-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08) !important; }
.exam-card-closed { opacity: .55; background: #f4f6f9; filter: grayscale(.6); }
.exam-card-closed:hover { transform: none; box-shadow: none !important; }

.topic-heading {
  font-weight: 600; color: #1e4e8c;
  border-left: 4px solid #1e4e8c; padding-left: .75rem; margin: 2rem 0 1rem;
}
.question-card { border: 1px solid #e3e8f0; }
.question-card.unanswered { border-left: 4px solid #f0ad4e; }
.question-card.answered { border-left: 4px solid #198754; }
.question-card.highlight { animation: flash-border 2.5s ease; }
@keyframes flash-border { 0%, 60% { box-shadow: 0 0 0 .25rem rgba(220,53,69,.45); } 100% { box-shadow: none; } }
.question-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: #1e4e8c; color: #fff; font-weight: 600; flex-shrink: 0;
}
.choice-item {
  display: flex; gap: .75rem; padding: .7rem .9rem; border: 1px solid #dee2e6;
  border-radius: .5rem; cursor: pointer; margin-bottom: .5rem; transition: background .12s, border-color .12s;
}
.choice-item:hover { background: #f0f4fa; border-color: #9fb6d6; }
.choice-item input { margin-top: .3rem; flex-shrink: 0; }
.choice-item.selected { background: #e8f0fb; border-color: #1e4e8c; }
.choice-item.correct { background: #e6f6ec; border-color: #198754; }
.choice-item.wrong { background: #fbe9e9; border-color: #dc3545; }
.choice-label { font-weight: 600; min-width: 1.5rem; }

.sticky-bar {
  position: sticky; top: 0; z-index: 1020; background: #fff;
  border-bottom: 1px solid #e3e8f0; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.timer.warn { color: #dc3545; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: .4; } }

.score-ring {
  width: 160px; height: 160px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0 auto; color: #fff;
}
.stat-card .display-6 { font-weight: 700; }
.table thead th { white-space: nowrap; }
.pass-badge { font-size: .95rem; }

@media print {
  nav, footer, .no-print { display: none !important; }
  main { padding: 0 !important; }
}

/* ---------- จอเล็ก (มือถือ) ---------- */
.navbar-brand { font-size: 1.1rem; }
@media (max-width: 575.98px) {
  body { font-size: .95rem; }
  main.container { padding-left: .75rem; padding-right: .75rem; }
  .navbar { padding-top: .4rem; padding-bottom: .4rem; }
  .navbar-brand { font-size: 1rem; }
  .navbar-toggler { padding: .25rem .5rem; font-size: 1rem; }
  h1.fw-bold { font-size: 1.6rem; }
  .lead { font-size: 1.05rem; }
  .card-body.p-4.p-md-5 { padding: 1rem !important; }
  .sticky-bar { margin-left: -.25rem; margin-right: -.25rem; padding-left: .75rem !important; padding-right: .75rem !important; }
  .sticky-bar .badge.fs-6 { font-size: .9rem !important; }
  .topic-heading { font-size: 1rem; margin: 1.25rem 0 .75rem; }
  .question-card .card-body { padding: .9rem; }
  .question-no { width: 1.8rem; height: 1.8rem; font-size: .9rem; }
  .choice-item { padding: .55rem .65rem; gap: .5rem; }
  .choice-label { min-width: 1.3rem; }
  .score-ring { width: 130px; height: 130px; }
  .display-6 { font-size: 1.6rem; }
  .btn-lg { font-size: 1.05rem; }
}