:root {
  --blue: #001881;
  --ink: #1a1a1a;
  --line: #d1d5db;
  --soft: #f1f2f3;
  --red: #b91c1c;
  --rainbow: linear-gradient(90deg, var(--blue), var(--blue));}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
/* Sửa lỗi chồng màn hình: .gate-screen và .app tự set display:flex nên thuộc tính
   hidden của HTML không tự ẩn được (rule display:none mặc định của trình duyệt bị
   author CSS đè lên). Ép !important để hidden luôn thắng, đảm bảo màn hình test
   thay thế hẳn form nhập thông tin thay vì xếp chồng bên dưới nó. */
[hidden] { display: none !important; }
body { font-family: Roboto, sans-serif; color: var(--ink); background: #fff; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
.app { display: flex; flex-direction: column; height: 100dvh; }

.gate-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  padding: 20px;
}
.gate-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px 32px 28px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  overflow: hidden;
}
.gate-box .rainbow { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.gate-box h1 { font-size: 19px; font-weight: 700; margin-bottom: 4px; text-align: center; }
.gate-hint { font-size: 13px; color: #666; text-align: center; margin-bottom: 20px; }
.gate-box label { display: block; font-size: 12px; font-weight: 600; color: #555; margin: 12px 0 4px; }
.gate-box input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px;
}
.gate-box input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.gate-box .btn.wide { margin-top: 20px; width: 100%; border-radius: 8px; padding: 10px; }
.gate-box .status { margin-top: 12px; text-align: center; min-height: 16px; font-size: 13px; }

.loading { margin: 20vh auto 0; text-align: center; color: #888; font-size: 15px; }

/* Header */
.topbar { position: relative; height: 80px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.title h1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.subtitle { font-size: 14px; color: #555; }
.timer-box { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.timer { font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 28px; }
.timer.low { color: #dc2626; }
.pill { min-width: 45px; padding: 1px 8px; border: 1px solid #000; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill:hover, .tool:hover { background: #f3f4f6; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; font-size: 12px; font-weight: 500; }
.rainbow { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rainbow); }
.rainbow.top { top: 0; bottom: auto; }

/* Stage: single vs split */
.stage { flex: 1; min-height: 0; display: flex; }
.pane { overflow-y: auto; padding: 56px 40px 100px; }
.pane-inner { max-width: 48rem; margin: 0 auto; }
.stage.single .pane { flex: 1; }
.stage.single .pane-inner { max-width: 44rem; }
.stage.split .pane.left { flex: none; }
.stage.split .pane.right { flex: 1; min-width: 0; }
.divider { flex: none; width: 10px; cursor: col-resize; background: #888; position: relative; touch-action: none; }
.divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 40px; transform: translate(-50%, -50%); border-radius: 2px; background: #fff; opacity: .8; }
.divider:hover, .divider:active { background: var(--blue); }
.stimulus { font-family: "Noto Serif", serif; font-size: 17px; line-height: 1.6; }
.stimulus img { display: block; width: auto; height: auto; max-width: 70%; max-height: 50vh; margin: 0 auto 12px; border: 1px solid var(--line); }
.stimulus figcaption { font-size: 14px; color: #444; }

/* Question header */
.qhead { display: flex; height: 30px; margin-bottom: 14px; border-bottom: 2px solid transparent; border-image: var(--rainbow) 1; padding-bottom: 1px; }
.qnum { width: 26px; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; font-size: 19px; }
.qbar { flex: 1; display: flex; align-items: center; justify-content: space-between; background: var(--soft); padding: 0 6px 0 10px; }
.mark { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 14px; }
.mark svg { fill: none; stroke: currentColor; stroke-width: 2; }
.mark.on { font-weight: 700; color: #b91c1c; }
.mark.on svg { fill: #b91c1c; }
.elim { font-size: 13px; font-weight: 500; text-decoration: line-through; padding: 3px 8px; border: 1px solid #888; border-radius: 4px; }
.elim.on { background: var(--ink); color: #fff; text-decoration: none; }

.qtext { font-family: "Noto Serif", serif; font-size: 17px; line-height: 1.6; margin: 18px 0 20px; }
.choice { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 14px; min-height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.8); background: #fff; }
.choice:hover { background: #f0f0f0; }
.choice.picked { box-shadow: inset 0 0 0 2px var(--blue); background: #eef1fc; }
.choice.gone .ctext { text-decoration: line-through; opacity: .45; }
.letter { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #525252; border-radius: 50%; font-weight: 700; font-size: 14px; color: #525252; }
.choice.picked .letter { background: var(--blue); border-color: var(--blue); color: #fff; }
.ctext { font-family: "Noto Serif", serif; font-size: 16.5px; line-height: 1.6; flex: 1; }

/* Footer */
.footbar { position: relative; height: 72px; flex-shrink: 0; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 -2px 10px rgba(0,0,0,.05); background: #fff; }
.brand { flex: 1; font-size: 22px; font-weight: 500; }
.nav-btn { background: #000; color: #fff; font-weight: 700; padding: 8px 8px 8px 16px; border-radius: 8px; box-shadow: 0 1px 8px rgba(0,0,0,.2); }
.nav-btn::after { content: "▴"; margin-left: 6px; }
.actions { flex: 1; display: flex; justify-content: flex-end; gap: 8px; }
.btn { background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 24px; border-radius: 999px; }
.btn:hover { background: #263999; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.wide { width: 100%; margin-top: 14px; border-radius: 8px; }

/* Question navigator */
.popup { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%); width: min(450px, 94vw); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.2); z-index: 60; }
.popup[hidden], .calc[hidden] { display: none; }
.popup-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.x { font-size: 22px; line-height: 1; padding: 0 6px; }
.nav-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.nav-grid button { aspect-ratio: 1; border: 1.5px dashed #888; border-radius: 4px; font-size: 13px; font-weight: 500; position: relative; }
.nav-grid button.done { border-style: solid; background: var(--blue); border-color: var(--blue); color: #fff; }
.nav-grid button.current { outline: 2px solid #000; outline-offset: 1px; }
.navflag { position: absolute; top: -7px; right: -3px; fill: #b91c1c; pointer-events: none; }
.nav-status { font-size: 13px; color: #16a34a; text-align: center; margin-bottom: 12px; }
.nav-status.warn { color: #b91c1c; font-weight: 600; }

/* Trang review lớn (full-page), cùng logic với popup overview nhỏ nhưng phóng to */
.bigreview-title { font-size: 26px; font-weight: 700; text-align: center; margin: 40px 0 6px; }
.nav-grid.big { grid-template-columns: repeat(8, 1fr); gap: 12px; margin: 24px 0 30px; }
.nav-grid.big button { font-size: 17px; min-height: 56px; }
.bigreview-actions { display: flex; gap: 12px; }
.bigreview-actions .btn { flex: 1; margin-top: 0; }
.btn.secondary { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn.secondary:hover { background: #eef1fc; }

.fs-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.fs-overlay[hidden] { display: none; }
.fs-overlay-box { background: #fff; border-radius: 12px; padding: 28px 26px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.fs-overlay-box h3 { font-size: 18px; margin-bottom: 10px; }
.fs-overlay-box p { font-size: 14px; color: #444; line-height: 1.5; margin-bottom: 18px; }

.watermark {
  position: fixed;
  top: -20%; left: -20%;
  width: 140%; height: 140%;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  transform: rotate(-28deg);
  opacity: .07;
  user-select: none;
}
.watermark span {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  margin: 26px 34px;
}

.calc {
  position: fixed; top: 100px; right: 40px;
  width: 340px; height: 420px;
  min-width: 260px; min-height: 320px;
  max-width: 92vw; max-height: 85vh;
  background: #fff; border: 1px solid #888; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 70;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.calc-head { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--soft); font-size: 13px; font-weight: 500; cursor: grab; }
.calc-head .x { padding: 0 4px; font-size: 18px; }
.calc-head .x:hover { background: rgba(0,0,0,.08); border-radius: 4px; }
.calc-desmos { flex: 1; min-height: 0; width: 100%; position: relative; }

.calc-resize-handle {
  position: absolute; right: 0; bottom: 0;
  width: 20px; height: 20px;
  cursor: nwse-resize;
  z-index: 20;
}
.calc-resize-handle::after {
  content: "";
  position: absolute; right: 4px; bottom: 4px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 11px 11px;
  border-color: transparent transparent #6b7280 transparent;
}
.calc-resize-handle:hover::after { border-color: transparent transparent #001881 transparent; }

.result { max-width: 34rem; margin: 15vh auto 0; text-align: center; padding: 0 20px; }
.result h2 { font-size: 26px; margin-bottom: 8px; }
.result .score { font-size: 56px; font-weight: 700; color: var(--blue); margin: 12px 0; }

.congrats { max-width: 30rem; margin: 16vh auto 0; text-align: center; padding: 0 20px; }
.congrats-icon { font-size: 52px; margin-bottom: 10px; }
.congrats h2 { font-size: 24px; margin-bottom: 8px; }
.congrats p { color: #555; margin-bottom: 18px; }
.congrats .btn.wide { max-width: 260px; margin: 18px auto 0; }

/* Trang thống kê sau khi xem kết quả */
.stats-page { max-width: 52rem; margin: 0 auto; padding: 40px 24px 100px; }
.stats-card { border: 1px solid var(--line); border-radius: 12px; padding: 24px 28px; margin-bottom: 24px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }

/* MỚI: hàng 3 ô thống kê nhanh — số câu đúng / tỉ lệ đúng / thời gian làm bài */
.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.stat-box { text-align: center; }
.stat-value { font-size: 32px; font-weight: 700; color: var(--blue); line-height: 1.2; }
.stat-label { font-size: 13px; color: #666; margin-top: 4px; }

.stats-units { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stats-unit-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-bottom: 8px; }
.stats-unit-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.stats-unit-col li { display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot.ok { background: #16a34a; }
.dot.bad { background: #dc2626; }

.stats-list { display: flex; flex-direction: column; gap: 8px; }
.stats-row {
  display: grid; grid-template-columns: 32px 1fr 110px 130px auto;
  align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
  border-left: 4px solid transparent;
  background: var(--soft);
  font-size: 14px;
}
.stats-row.ok { border-left-color: #16a34a; background: #eafaf0; }
.stats-row.bad { border-left-color: #dc2626; background: #fdecec; }
.srow-num { font-weight: 700; }
.srow-text { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-correct, .srow-chosen { color: #444; }
.srow-review { padding: 6px 14px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; font-size: 13px; }
.srow-review:hover { background: #001881; }

.choice.review { cursor: default; opacity: 1; }
.choice.review-correct { box-shadow: inset 0 0 0 2px #16a34a; background: #eafaf0; }
.choice.review-correct .letter { background: #16a34a; border-color: #16a34a; color: #fff; }
.choice.review-wrong { box-shadow: inset 0 0 0 2px #dc2626; background: #fdecec; }
.choice.review-wrong .letter { background: #dc2626; border-color: #dc2626; color: #fff; }

@media (max-width: 700px) {
  .stats-summary { grid-template-columns: 1fr; gap: 10px; }
  .stats-units { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 24px 1fr; grid-template-areas: "num text" "correct chosen" "review review"; row-gap: 4px; }
  .srow-num { grid-area: num; } .srow-text { grid-area: text; }
  .srow-correct { grid-area: correct; } .srow-chosen { grid-area: chosen; }
  .srow-review { grid-area: review; width: 100%; text-align: center; }
}

@media (max-width: 800px) {
  .stage.split { flex-direction: column; }
  .stage.split .pane, .stage.split .pane.left { width: 100% !important; flex: 1; padding: 20px; }
  .stage.split .pane.left { border-bottom: 4px solid var(--blue); }
  .divider { display: none; }
  .topbar, .footbar { padding: 0 12px; }
  .tool span { display: none; }
  .calc { width: 90vw !important; height: 70vh !important; right: 5vw; }
}
/* ===== Topbar: Highlights & Notes + Calculator nằm ngang ===== */
.tools { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.tool.on { background: #eef1fc; color: var(--blue); }

/* ===== Nút tròn gạch đáp án (cross-out) nằm cạnh mỗi choice ===== */
.choice-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.choice-row .choice { flex: 1; min-width: 0; margin-bottom: 0; }
.xbtn {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid #525252; background: #fff; color: #525252;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.xbtn:hover { background: #f3f4f6; }
.xbtn .xl { position: relative; display: inline-block; line-height: 1; }
.xbtn .xl::after {            /* nét gạch ngang qua chữ cái */
  content: ""; position: absolute; left: -3px; right: -3px; top: 50%;
  height: 1.5px; background: currentColor;
}
.xbtn.undo { width: auto; padding: 0 10px; border-radius: 999px; font-size: 12px; }

/* ===== Cho phép bôi chọn chữ (body đang user-select:none nên highlight không chạy) ===== */
input, textarea { -webkit-user-select: text; user-select: text; }
.stage.hl-on [data-hl] { -webkit-user-select: text; user-select: text; cursor: text; }

/* ===== Highlight ===== */
.hl-yellow { background: #fde68a; }
.hl-green  { background: #bbf7d0; }
.hl-pink   { background: #fbcfe8; }
mark.hl { color: inherit; cursor: pointer; border-radius: 2px; }
mark.hl.has-note { border-bottom: 2px solid rgba(0,0,0,.45); }
mark.hl.hl-flash { outline: 2px solid var(--blue); }

/* Khung nhỏ chọn màu / Note / Remove */
.hl-pop {
  position: fixed; z-index: 200; display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.hl-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.25); }
.hl-sep { width: 1px; height: 18px; background: var(--line); }
.hl-act { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.hl-act:hover { background: #f3f4f6; }
.hl-remove { color: #b91c1c; }

/* ===== Notes: khung nhỏ nổi ở góc phải, KHÔNG chiếm chỗ của câu hỏi ===== */
.stage { position: relative; }
.notes-panel {
  position: absolute; top: 12px; right: 12px; z-index: 30;
  width: 240px; max-height: calc(100% - 24px); overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.15); padding: 10px; font-size: 13px;
}
.notes-head { font-weight: 700; margin-bottom: 8px; }
.notes-empty { color: #666; font-size: 12px; line-height: 1.4; }
.note-card {
  position: relative; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; margin-bottom: 8px; background: #fafafa;
}
.note-card.active { border-color: var(--blue); }
.note-del { position: absolute; top: 2px; right: 6px; font-size: 16px; color: #666; }
.note-quote-wrap { margin: 0 16px 6px 0; font-family: "Noto Serif", serif; font-size: 12px; line-height: 1.5; }
.note-quote { padding: 0 2px; }
.note-text {
  width: 100%; min-height: 56px; resize: vertical; padding: 6px;
  border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px;
}

@media (max-width: 800px) {
  .notes-panel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 40%; }
}

.timer-row { display: flex; align-items: center; gap: 8px; }
.battery {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #555;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px;
}
.battery .bat-icon {
  width: 16px; height: 9px; border: 1.5px solid #555; border-radius: 2px;
  position: relative; display: inline-block;
}
.battery .bat-icon::after {
  content: ""; position: absolute; right: -4px; top: 2px;
  width: 2px; height: 4px; background: #555; border-radius: 0 1px 1px 0;
}
.battery .bat-fill {
  position: absolute; left: 1px; top: 1px; bottom: 1px;
  background: #16a34a; border-radius: 1px;
}
.battery.low .bat-fill { background: #dc2626; }
.battery.low { color: #dc2626; border-color: #dc2626; }
.battery.charging .bat-icon::before {
  content: "⚡"; position: absolute; left: 2px; top: -2px; font-size: 9px;
}

.ctext-table {
  border-collapse: collapse;
  margin: 2px 0;
  font-family: "Noto Serif", serif;
  font-size: 15.5px;
  width: 100%;
  table-layout: fixed;
}
.ctext-table th, .ctext-table td {
  border: 1px solid #444;
  padding: 6px 18px;
  text-align: center;
  word-break: break-word;
}
.ctext-table th { background: var(--soft); font-weight: 700; }
.choice.gone .ctext-table { opacity: .45; text-decoration: line-through; }

.stats-summary { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.est-pending { color: #888; font-size: 20px; }

/* ===== Estimated AP Score: banner nổi bật trên cùng trang kết quả ===== */
.est-hero {
  display: flex; align-items: center; gap: 28px;
  background: var(--blue); color: #fff;
  border-radius: 12px; padding: 24px 28px; margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(0, 24, 129, .25);
}
.est-main { flex: none; text-align: center; }
.est-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.est-score {
  width: 96px; height: 96px; margin: 0 auto; border-radius: 50%;
  background: #fff; color: var(--blue);
  display: grid; place-items: center;
  font-size: 52px; font-weight: 700; line-height: 1;
}
.est-score.pending { font-size: 40px; color: #888; }
.est-details { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.est-item { background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 12px 16px; }
.est-k { display: block; font-size: 12px; opacity: .85; margin-bottom: 4px; }
.est-v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-note { margin: -12px 0 24px; font-size: 13px; color: #666; text-align: center; }

@media (max-width: 700px) {
  .est-hero { flex-direction: column; text-align: center; }
  .est-details { width: 100%; }
}

/* Bổ sung cho styles.css — giữ nguyên styles.css cũ, chỉ thêm file này (đã được link trong index.html) */

.main { display: flex; flex-direction: column; gap: 16px; }

.step-card > summary.step-title {
  cursor: pointer; font-size: 15px; font-weight: 700; color: var(--blue); list-style: none;
}
.step-card > summary.step-title::-webkit-details-marker { display: none; }
.step-card[open] > summary.step-title { margin-bottom: 8px; }

.notice {
  background: #fff7e6; border: 1px solid #f0c36d; color: #7a5200;
  border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 8px 0 0;
}
.notice[hidden] { display: none; }

.modules-editor { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 12px; }

.mod-card {
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 8px; padding: 12px 14px; background: #fafbff;
}
.mod-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mod-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase;
  background: var(--blue); color: #fff; border-radius: 999px; padding: 3px 9px;
}
.mod-head .mod-title { flex: 1; font-weight: 600; }
.mod-card .field-row { margin-top: 8px; align-items: flex-end; }
.mod-summary { margin-top: 8px; font-size: 12px; color: #555; }

.frq-items { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.frq-items .frq-row { align-items: center; margin-top: 0; }
.frq-items .cf-label { width: 60px; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.frq-items .frq-row input { max-width: 150px; }
.frq-items > .btn { align-self: flex-start; }

/* Tiêu đề module trong danh sách câu hỏi (cột trái) */
.q-list li.mod-head-li {
  background: #eef1fc; color: var(--blue); font-weight: 700; font-size: 12px;
  text-transform: uppercase; cursor: default; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
}
.q-list li.mod-head-li:hover { background: #eef1fc; }

/* Tiêu đề module trong cửa sổ chi tiết học sinh */
.detail-mod {
  margin: 14px 0 4px; padding: 4px 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; color: var(--blue); background: #eef1fc; border-radius: 6px;
}
.frq-entry .detail-mod { margin-top: 8px; }
/* ===== Màn hình Directions toàn trang (trước khi vào module) ===== */
/* ===== Nút "Directions ⌄" trong topbar ===== */
.title { display: flex; flex-direction: column; gap: 4px; }
.directions-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--blue);
  padding: 0; align-self: flex-start;
}
.directions-toggle .dir-chevron { transition: transform .15s; }
.directions-toggle.open .dir-chevron { transform: rotate(180deg); }

/* ===== Dropdown Directions: che một phần, nền sau dimmed, có nút Close ===== */
.directions-overlay {
  position: fixed; top: 80px; left: 0; right: 0; bottom: 0;
  background: rgba(10, 20, 60, .45); z-index: 140;
  display: flex; justify-content: flex-start;
}
.directions-overlay[hidden] { display: none; }
.directions-dropdown {
  position: relative;
  background: #fff;
  width: min(1500px, 92vw);
  max-height: calc(100vh - 80px - 60px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 44px 56px 36px;
}
.directions-dropdown::before {
  content: ""; position: absolute; top: -13px; left: 56px;
  width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-bottom: 13px solid #fff;
}
.directions-dropdown-body { font-size: 17px; line-height: 1.7; color: #222; }
.directions-dropdown-body p { margin-bottom: 18px; }
.directions-dropdown-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.directions-dropdown-foot .btn {
  background: #fbbf24; color: #1a1a1a; font-weight: 800;
  padding: 11px 30px; border-radius: 8px;
}
.directions-dropdown-foot .btn:hover { background: #f5a917; }

@media (max-width: 800px) {
  .directions-overlay { top: auto; }
  .directions-dropdown { width: 100%; max-height: 80vh; }
}
/* ===== Khung ảnh kiểu Bluebook: có thanh công cụ zoom ===== */
.img-frame {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: #fff; margin-bottom: 14px;
}
.img-frame-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; background: var(--soft); border-bottom: 1px solid var(--line);
  font-size: 13px; color: #444; user-select: none;
}
.img-frame-bar button {
  display: flex; align-items: center; justify-content: center;
  padding: 2px; border-radius: 4px;
}
.img-frame-bar button:hover { background: rgba(0,0,0,.06); }
.img-frame-bar .if-pct { font-weight: 600; min-width: 42px; text-align: center; }
.img-frame-bar .if-reset { font-weight: 600; cursor: pointer; }
.img-frame-bar .if-sep { width: 1px; height: 16px; background: var(--line); }
.img-frame-bar .if-expand { margin-left: auto; }
.img-frame-viewport { overflow: auto; max-height: 55vh; display: flex; justify-content: center; padding: 16px; }
.img-frame-viewport img {
  display: block; max-width: 100%; height: auto; transition: width .12s;
}
.img-frame.expanded {
  position: fixed; inset: 20px; z-index: 180; max-height: none;
  box-shadow: 0 10px 50px rgba(0,0,0,.4);
}
.img-frame.expanded .img-frame-viewport { max-height: calc(100vh - 110px); }
.popup-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.popup-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #888; padding: 6px 4px; border-radius: 6px;
}
.popup-tab.active { color: var(--blue); background: #eef1fc; }
.nav-grid button.current-pulse { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-grid-wrap { position: relative; }
.nav-pin { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); color: var(--blue); pointer-events: none; }
.bigreview-sub { text-align: center; color: #333; font-size: 15px; max-width: 42rem; margin: 0 auto 10px; }
.bigreview-card { border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; margin: 24px 0 30px; }
.bigreview-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bigreview-card-head h3 { font-size: 18px; font-weight: 700; }
.bigreview-legend { display: flex; gap: 18px; font-size: 13px; color: #555; }
.bigreview-legend span { display: flex; align-items: center; gap: 5px; }