/* ===========================================================================
   thpt.css — Khu Thi tốt nghiệp THPT.
   Dùng lại biến màu của style.css (--navy #1C355F · --pink #ED0E57 · --line…).
   Ngôn ngữ hình ảnh giữ đúng nếp cả web: góc gần vuông, kẻ 1px, không đổ bóng.
   =========================================================================== */

/* ── Lưới 6 môn ở trang cổng ────────────────────────────────────────────── */
.tp-mon-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 22px; }
.tp-mon { position: relative; display: block; background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 16px; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s; }
.tp-mon:hover { border-color: var(--navy-2); box-shadow: var(--shadow); }
.tp-mon.sap { background: #FAFBFC; border-style: dashed; cursor: default; }
.tp-mon h3 { margin: 0 0 4px; color: var(--navy); font-size: 18px; }
.tp-mon .tp-mon-ct { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.tp-mon .tp-mon-so { font-size: 12.5px; color: var(--text); }
.tp-mon .tp-mon-so b { color: var(--navy); }

/* ── Thẻ đề / thẻ bài học ───────────────────────────────────────────────── */
.tp-ds { display: grid; gap: 12px; margin-top: 16px; }
.tp-item { display: flex; gap: 14px; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; text-decoration: none; color: inherit; }
.tp-item:hover { border-color: var(--navy-2); }
.tp-item h4 { margin: 0 0 3px; font-size: 15.5px; color: var(--navy); }
.tp-item .meta { color: var(--muted); font-size: 12.5px; }
.tp-item .tp-go { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--pink); }
.tp-chuong-ten { margin: 22px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }

/* ── Phòng thi: bố cục ──────────────────────────────────────────────────── */
.tp-bar { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line);
  padding: 10px 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tp-dongho { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: 5px 12px; }
.tp-dongho.warn { color: var(--warn); border-color: var(--warn); }
.tp-dongho.danger { color: var(--pink); border-color: var(--pink); }
.tp-dongho.idle { color: var(--muted); border-style: dashed; }

.tp-palette { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.tp-palette button { width: 30px; height: 30px; border: 1px solid var(--line-2); background: #fff;
  border-radius: 4px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.tp-palette button.done { background: var(--navy); color: #fff; border-color: var(--navy); }
.tp-palette button.mot-phan { background: #FEF3E2; border-color: var(--warn); color: var(--warn); font-weight: 700; }
.tp-palette button.cur { outline: 2px solid var(--pink); outline-offset: 1px; }
.tp-pal-chu { font-size: 11.5px; color: var(--muted); margin: 8px 0 2px; font-weight: 700; }

/* ── Một câu hỏi ────────────────────────────────────────────────────────── */
.tp-cau { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  margin: 12px 0; background: var(--card); }
.tp-so { font-size: 12px; font-weight: 800; color: var(--pink); letter-spacing: .05em; margin-bottom: 6px; }
.tp-q { margin: 0 0 12px; line-height: 1.7; }
.tp-dan { background: #F7F9FC; border-left: 3px solid var(--navy-2); padding: 10px 14px;
  margin: 0 0 12px; border-radius: 0 4px 4px 0; line-height: 1.7; }
.tp-gtitle { margin: 30px 0 4px; font-size: 16px; color: var(--navy); }
.tp-gnote { margin: 0 0 14px; color: var(--muted); font-style: italic; font-size: 13.5px; }
.tp-dang { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--navy);
  background: #EEF2F8; border-radius: 999px; padding: 2px 10px; margin-bottom: 12px; }
.tp-vanban { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  margin-bottom: 18px; background: #FCFDFE; line-height: 1.85; }
.tp-vanban p { margin: 0 0 12px; }
.tp-manh { border: 1px dashed var(--line-2); border-radius: 4px; padding: 10px 14px; margin: 0 0 12px; }
.tp-manh div { margin: 3px 0; }

.tp-opts { display: grid; gap: 7px; }
.tp-opt { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: 4px; padding: 9px 12px; cursor: pointer; line-height: 1.6; }
.tp-opt:hover { background: #F7F9FC; }
.tp-opt input { margin-top: 4px; flex: 0 0 auto; }

table.tp-ds { width: 100%; border-collapse: collapse; margin-top: 4px; }
table.tp-ds th { font-size: 12px; color: var(--muted); font-weight: 700; padding: 4px 6px;
  border-bottom: 1px solid var(--line); }
table.tp-ds th:nth-child(2), table.tp-ds th:nth-child(3) { width: 62px; text-align: center; }
table.tp-ds td { padding: 10px 6px; border-bottom: 1px solid var(--line); line-height: 1.65; vertical-align: top; }
table.tp-ds td.tp-ck { text-align: center; vertical-align: middle; }

.tp-tln { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tp-tln input { width: 130px; font-size: 20px; font-weight: 700; letter-spacing: .18em;
  text-align: center; padding: 8px 10px; border: 1.5px solid var(--line-2); border-radius: 4px;
  font-family: Arial, sans-serif; }
.tp-tln input:focus { border-color: var(--navy-2); outline: none; }
.tp-tln-hd { font-size: 12px; color: var(--muted); }

/* ── Màn kết quả ────────────────────────────────────────────────────────── */
.tp-diem-card { border: 1.5px solid var(--navy); border-radius: var(--radius); padding: 24px;
  text-align: center; background: #F7F9FC; margin-bottom: 20px; }
.tp-diem-so { font-size: 52px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.tp-diem-phu { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.tp-phan-bang { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 14px; }
.tp-phan-bang th, .tp-phan-bang td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.tp-phan-bang th { background: #F1F5F9; font-weight: 700; }

.tp-yeu { border: 1px solid var(--warn); background: var(--warnbg); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 20px; }
.tp-yeu h3 { margin: 0 0 8px; font-size: 15px; color: var(--warn); }
/* :not(.btn) là BẮT BUỘC — `.tp-yeu a` có độ ưu tiên cao hơn `.btn-navy`
   nên nếu không loại trừ thì chữ nút thành navy trên nền navy, tức nút
   hiện ra một ô đặc không đọc được. Đã dính đúng lỗi này lúc chạy thử. */
.tp-yeu a:not(.btn) { color: var(--navy); font-weight: 700; }
.tp-yeu-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
  border-bottom: 1px dashed rgba(180,83,9,.25); }
.tp-yeu-row:last-child { border-bottom: 0; }

.tp-rv { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius);
  padding: 14px 16px; margin: 10px 0; background: var(--card); }
.tp-rv.dung { border-left-color: var(--ok); }
.tp-rv.sai { border-left-color: var(--pink); }
.tp-rv.mot-phan { border-left-color: var(--warn); }
.tp-rv-head { font-size: 12.5px; font-weight: 800; margin-bottom: 8px; }
.tp-rv-head.dung { color: var(--ok); }
.tp-rv-head.sai { color: var(--pink); }
.tp-rv-head.mot-phan { color: var(--warn); }
.tp-rv-ans { font-size: 13.5px; margin: 8px 0; color: var(--text); }
.tp-rv-exp { background: #F7F9FC; border-radius: 4px; padding: 12px 14px; margin-top: 8px;
  line-height: 1.8; font-size: 14px; }
.tp-rv-y { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.tp-rv-y.dung { border-left: 3px solid var(--ok); padding-left: 10px; }
.tp-rv-y.sai { border-left: 3px solid var(--pink); padding-left: 10px; }

/* ── Bài học theo chương ────────────────────────────────────────────────── */
.tp-bh-ly { line-height: 1.85; }
.tp-bh-ly table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.tp-bh-ly th, .tp-bh-ly td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; }
.tp-bh-ly th { background: #F1F5F9; }
.tp-bh-ly ul, .tp-bh-ly ol { padding-left: 22px; }
.tp-bh-ly code { background: #F1F5F9; padding: 1px 5px; border-radius: 3px; font-size: 13px; }
.tp-vd { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; }
.tp-vd-de { font-weight: 600; margin-bottom: 8px; }
.tp-vd-giai { background: #F7F9FC; border-radius: 4px; padding: 11px 14px; line-height: 1.8; }
.tp-sai { border: 1px solid var(--warn); background: var(--warnbg); border-radius: var(--radius);
  padding: 14px 18px; margin: 16px 0; }
.tp-sai h4 { margin: 0 0 8px; color: var(--warn); font-size: 14.5px; }
.tp-sai li { margin: 5px 0; }
.tp-khoi { margin: 26px 0; }
.tp-khoi > h3 { font-size: 17px; color: var(--navy); margin: 0 0 10px;
  border-bottom: 2px solid var(--line); padding-bottom: 6px; }

.tp-nut-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }

@media (max-width: 760px) {
  .tp-bar { gap: 10px; }
  .tp-palette button { width: 28px; height: 28px; }
  table.tp-ds th:nth-child(2), table.tp-ds th:nth-child(3) { width: 48px; }
  .tp-diem-so { font-size: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LỘ TRÌNH THEO CHƯƠNG — chép cấu trúc thông tin của /hoc-level (khu Level của
   IELTS): thẻ chương gập được · thanh tiến độ · vòng tròn trạng thái từng bài.
   Giữ bộ màu và bo góc của khu THPT (radius 6px, kẻ 1px, không đổ bóng) để
   không chỏi với phòng thi đã dựng.
   Vì sao chép chứ không nghĩ kiểu mới: học viên đã quen mắt với khu Level;
   và câu hỏi "mình đang ở đâu, đã làm gì" đã được giải đúng ở đó rồi.
   ═════════════════════════════════════════════════════════════════════════ */

/* Dải tổng ở đầu trang môn */
.tp-tong { display: flex; gap: 26px; flex-wrap: wrap; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 14px 18px; margin: 18px 0 4px; }
.tp-tong .o { min-width: 92px; }
.tp-tong b { display: block; color: var(--navy); font-size: 21px; line-height: 1.2; }
.tp-tong span { color: var(--muted); font-size: 12.5px; }
.tp-tong .thanh-o { flex: 1 1 220px; min-width: 180px; }

/* Thanh tiến độ dùng chung */
.tp-thanh { height: 7px; background: #EEF2F7; border-radius: 999px; overflow: hidden; }
.tp-thanh i { display: block; height: 100%; background: var(--pink); border-radius: 999px;
  transition: width .35s; }
.tp-thanh-chu { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* Thẻ một chương */
.tp-chuong { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.tp-ch-head { padding: 15px 18px; display: flex; gap: 14px; align-items: flex-start;
  flex-wrap: wrap; cursor: pointer; }
.tp-ch-head:hover { background: #F7F9FC; }
.tp-ch-so { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px; background: var(--navy-2); flex-shrink: 0; }
.tp-chuong.xong-het .tp-ch-so { background: var(--ok); }
.tp-ch-than { flex: 1 1 300px; min-width: 0; }
.tp-ch-than h3 { margin: 0; color: var(--navy); font-size: 16.5px; line-height: 1.35; }
.tp-ch-ma { display: inline-block; background: #EEF2F8; color: var(--navy); border-radius: 999px;
  padding: 1px 9px; font-size: 11.5px; font-weight: 700; margin-left: 8px; vertical-align: 2px; }
.tp-ch-tien { margin-top: 10px; }
.tp-ch-mo { background: none; border: none; color: var(--navy-2); font: inherit; font-size: 13.5px;
  cursor: pointer; padding: 0; white-space: nowrap; }

.tp-ch-body { display: none; border-top: 1px solid var(--line); }
.tp-chuong.mo .tp-ch-body { display: block; }

/* Một dòng bài học */
.tp-bai-row { display: flex; align-items: center; gap: 13px; padding: 12px 18px;
  border-bottom: 1px solid #F1F3F6; text-decoration: none; color: inherit; }
.tp-bai-row:hover { background: #F7F9FC; }
.tp-bai-row:last-child { border-bottom: none; }
.tp-tt { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid;
  place-items: center; font-size: 12px; font-weight: 800; background: #EEF2F8; color: var(--navy); }
.tp-bai-row.xong .tp-tt { background: #DCFCE7; color: #15803D; }
.tp-bai-row.dang .tp-tt { background: #FEF3C7; color: #B45309; }
.tp-bai-than { flex: 1 1 auto; min-width: 0; }
.tp-bai-ten { font-size: 15px; font-weight: 600; color: var(--navy); }
.tp-bai-mt { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.tp-bai-meta { display: flex; gap: 9px; align-items: center; flex-shrink: 0; flex-wrap: wrap;
  justify-content: flex-end; }
.tp-tag { font-size: 11.5px; background: #F1F5FB; color: #475569; border-radius: 999px; padding: 2px 9px; }
.tp-phut { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* Chuyển bài trước/sau ở cuối trang bài học */
.tp-cuoi { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 18px 20px; margin-top: 26px; display: flex; gap: 16px; align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
.tp-cuoi-tien { font-size: 14.5px; color: var(--muted); }
.tp-cuoi-tien b { color: var(--navy); }

@media (max-width: 640px) {
  .tp-ch-head { padding: 13px 14px; }
  .tp-bai-row { padding: 11px 14px; gap: 10px; }
  .tp-bai-meta { display: none; }
}

/* ── Lời chữa có BƯỚC, không phải một khối chữ đặc ───────────────────────── */
.tp-buoc { border-left: 3px solid var(--line-2); padding: 0 0 0 14px; margin: 0 0 14px; }
.tp-buoc:last-child { margin-bottom: 0; }
.tp-buoc > b:first-child { display: block; color: var(--navy); font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.tp-buoc p { margin: 0 0 8px; }
.tp-buoc p:last-child { margin-bottom: 0; }
.tp-buoc.chot { border-left-color: var(--ok); background: #F0FDF4;
  padding: 10px 14px; border-radius: 0 4px 4px 0; }
.tp-buoc.bay { border-left-color: var(--warn); background: var(--warnbg);
  padding: 10px 14px; border-radius: 0 4px 4px 0; }

/* Hình trong ví dụ và lý thuyết */
.tp-hinh { margin: 12px 0; text-align: center; }
.tp-hinh svg { max-width: 100%; height: auto; }
.tp-hinh figcaption { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

/* Bảng canh cột kiểu "mạch khuôn ↔ mRNA", "bảng biến thiên" — chữ đều nét */
.tp-canh { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 14px;
  background: #F7F9FC; border: 1px solid var(--line); border-radius: 4px;
  padding: 12px 14px; margin: 10px 0; overflow-x: auto; white-space: pre; line-height: 1.9; }

/* ── Khối luyện viết môn Ngữ văn ──────────────────────────────────────────── */
.tp-viet { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tp-viet-de { background: #F7F9FC; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.tp-viet-nhan { display: block; color: var(--navy); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.tp-viet-o { width: 100%; border: 0; border-bottom: 1px solid var(--line);
  padding: 15px 18px; font: inherit; line-height: 1.85; resize: vertical; }
.tp-viet-o:focus { outline: 2px solid var(--navy-2); outline-offset: -2px; }
.tp-viet-chan { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px; }
.tp-viet-chan span { color: var(--muted); font-size: 13px; }
.tp-viet-cho, .tp-viet-loi { padding: 14px 18px; border-top: 1px solid var(--line); }
.tp-viet-cho { background: var(--warnbg); color: #92400E; }
.tp-viet-loi { background: #FEF2F2; color: #991B1B; }
.tp-viet-khoa { padding: 14px 18px; border-top: 1px solid var(--line);
  background: #F7F9FC; color: var(--muted); font-size: 13.5px; }
.tp-viet-khoa p { margin: 0 0 10px; }
.tp-viet-goi { padding: 4px 18px 14px; border-top: 1px solid var(--line); }
.tp-viet-goi summary { cursor: pointer; font-weight: 700; color: var(--navy);
  padding: 12px 0; }
.tp-viet-kq { padding: 16px 18px; border-top: 1px solid var(--line); }
.tp-viet-diem { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; }
.tp-viet-diem small { font-size: 16px; font-weight: 600; color: var(--muted); }
.tp-viet-kq table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.tp-viet-kq th, .tp-viet-kq td { border: 1px solid var(--line); padding: 8px 10px;
  text-align: left; vertical-align: top; }
.tp-viet-kq th { background: #F7F9FC; }
.tp-viet-sua { border-left: 3px solid var(--warn); background: var(--warnbg);
  padding: 12px 14px; border-radius: 0 4px 4px 0; }

/* Công bố mức độ khó (CHUAN §5.4.1) — đề nặng hơn đề thật thì phải nói ra */
.tp-mucdo { background: var(--warnbg); border-left: 3px solid var(--warn);
  color: #92400E; padding: 11px 14px; border-radius: 0 4px 4px 0;
  margin: 12px 0; font-size: 13.5px; line-height: 1.6; }