/* ===========================================================================
   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; }
/* Mốc [1]…[4] của dạng chèn câu — phải bắt mắt ngay giữa khối chữ đặc, vì cả
   câu hỏi xoay quanh việc so bốn vị trí này với nhau. */
.tp-moc { display: inline-block; background: var(--navy); color: #fff;
  font-weight: 700; font-size: 12.5px; line-height: 1; padding: 3px 6px;
  border-radius: 3px; margin: 0 2px; vertical-align: baseline; }
.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 ────────────────────────────────────────────────── */
/* ── Vùng lý thuyết ───────────────────────────────────────────────────────────
   Mọi luật dưới đây nhắm vào THẺ HTML mà 77 bài học đang dùng sẵn (h4, table,
   ul, b, p) chứ không phải lớp riêng — nên sửa ở đây là cả kho đổi theo, không
   phải soạn lại bài nào. Màu dùng có việc: navy cho cấu trúc, xanh lá cho kết
   luận, hổ phách cho bẫy, đỏ chỉ để chỉ cái SAI. Không icon trang trí. */
.tp-bh-ly { line-height: 1.85; }
.tp-bh-ly > p { max-width: 74ch; }        /* dòng quá dài thì mắt lạc hàng */

/* Đề mục "1. …", "2. …" trong bài — trước đây chỉ là chữ đậm, chìm nghỉm giữa
   văn xuôi nên không thấy bài chia mấy phần. */
.tp-bh-ly h4 {
  font-size: 16px; color: var(--navy); margin: 30px 0 12px; padding-left: 12px;
  border-left: 3px solid var(--navy); line-height: 1.45;
}
.tp-bh-ly h4:first-child { margin-top: 4px; }
.tp-bh-ly h5 { font-size: 14.5px; color: var(--navy-2); margin: 20px 0 8px; }

/* Bảng: dải đầu bảng rõ, hàng lẻ tô nhạt, cột đầu đậm — bảng trong bài thường
   là "trường hợp ↔ kết quả" nên cột đầu là thứ mắt dò theo. */
.tp-bh-ly table { border-collapse: collapse; margin: 16px 0; width: 100%;
  font-size: 14.5px; }
.tp-bh-ly th, .tp-bh-ly td { border: 1px solid var(--line); padding: 10px 13px;
  text-align: left; vertical-align: top; }
.tp-bh-ly th { background: var(--navy); color: #fff; font-weight: 600;
  font-size: 13.5px; letter-spacing: .01em; border-color: var(--navy); }
.tp-bh-ly tbody tr:nth-child(even) { background: #F7F9FC; }
.tp-bh-ly tbody td:first-child { font-weight: 600; color: var(--navy); }
.tp-bh-ly .tp-bang { overflow-x: auto; margin: 16px 0; }   /* bảng rộng trên mobile */

/* Bảng trong TRANG ĐỀ (phần dẫn và phần hỏi) — cùng một bộ luật với bài học.
   31/8/2026: đề bắt đầu có bảng thật (thế điện cực, phổ hồng ngoại, số liệu
   chuẩn độ, đối chứng/thí nghiệm) vì đề thi thật bọc dữ liệu vào bảng. Trước
   đó mọi luật bảng chỉ nằm dưới `.tp-bh-ly`, tức chỉ áp cho bài học, nên bảng
   đặt trong đề đổ ra không viền không nền — người soạn phải gắn `style=` tay
   vào từng thẻ. Khai ở đây một lần để không ai phải lách nữa. */
.tp-dan table, .tp-q table { border-collapse: collapse; margin: 12px 0;
  width: 100%; font-size: 14.5px; }
.tp-dan th, .tp-dan td, .tp-q th, .tp-q td { border: 1px solid var(--line);
  padding: 8px 11px; text-align: left; vertical-align: top; }
.tp-dan th, .tp-q th { background: var(--navy); color: #fff; font-weight: 600;
  font-size: 13.5px; border-color: var(--navy); }
.tp-dan tbody tr:nth-child(even), .tp-q tbody tr:nth-child(even) { background: #F7F9FC; }
/* Bảng rộng phải cuộn TRONG khung của nó, không được đẩy ngang cả trang —
   đúng cái bẫy đã làm trang đề bị cắt mép phải trên điện thoại hôm 31/8. */
.tp-dan table, .tp-q table { display: block; overflow-x: auto; max-width: 100%; }
.tp-dan table > thead, .tp-dan table > tbody,
.tp-q table > thead, .tp-q table > tbody { display: table; width: 100%; }

/* Danh sách: gạch đầu dòng vuông nhỏ màu navy thay chấm tròn mặc định */
.tp-bh-ly ul { list-style: none; padding-left: 0; }
.tp-bh-ly ul > li { position: relative; padding-left: 20px; margin: 7px 0; }
.tp-bh-ly ul > li::before { content: ""; position: absolute; left: 4px; top: .72em;
  width: 6px; height: 6px; background: var(--navy-2); border-radius: 1px; }
.tp-bh-ly ol { padding-left: 22px; }
.tp-bh-ly ol > li { margin: 7px 0; }
.tp-bh-ly ol > li::marker { color: var(--navy); font-weight: 700; }

/* Từ khoá in đậm giữa văn xuôi — đổi sang navy để nổi mà không gào lên */
.tp-bh-ly p > b, .tp-bh-ly li > b { color: var(--navy); }
.tp-bh-ly code { background: #F1F5F9; padding: 1px 5px; border-radius: 3px;
  font-size: 13px; color: var(--navy); }

/* ── Ví dụ mẫu ────────────────────────────────────────────────────────────── */
.tp-vd { border: 1px solid var(--line); border-radius: var(--radius);
  margin: 18px 0; overflow: hidden; background: var(--card); }
.tp-vd-de { font-weight: 600; padding: 13px 16px; background: #F7F9FC;
  border-bottom: 1px solid var(--line); }
.tp-vd-de b:first-child { color: var(--navy); }
.tp-vd-giai { padding: 14px 16px; 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 10px; color: #B45309; font-size: 14.5px;
  text-transform: uppercase; letter-spacing: .04em; }
.tp-sai ul { list-style: none; padding-left: 0; counter-reset: tpsai; }
.tp-sai li { position: relative; padding-left: 28px; margin: 10px 0; line-height: 1.75; }
.tp-sai li::before { counter-increment: tpsai; content: counter(tpsai);
  position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 4px;
  background: #FDE68A; color: #92400E; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.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 /ielts/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; }
/* PHẢI là block: cả hai đều là <span>, mà margin dọc không có tác dụng trên phần
   tử inline — thiếu dòng này thì tên bài và mục tiêu dính liền nhau thành một
   dòng chữ chạy ("Tính đơn điệu của hàm sốPhát biểu đúng định nghĩa…"). */
.tp-bai-ten { display: block; font-size: 15px; font-weight: 600; color: var(--navy); }
.tp-bai-mt { display: block; font-size: 13px; color: var(--muted); margin-top: 3px;
  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 ───────────────────────── */
/* Ba loại khối, ba vai trò khác nhau — nên phải khác nhau bằng MẮT, không chỉ
   khác bằng chữ: bước thường (xám, chỉ có gạch dọc), bước chốt đáp số (xanh lá,
   có nền), bước cảnh báo bẫy (hổ phách, có nền). Học viên lướt trang là biết
   ngay chỗ nào chốt, chỗ nào cần dè chừng. */
.tp-buoc { border-left: 2px solid var(--line-2); padding: 0 0 0 15px; margin: 0 0 16px; }
.tp-buoc:last-child { margin-bottom: 0; }
.tp-buoc > b:first-child { display: block; color: var(--navy); font-size: 12.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.tp-buoc p { margin: 0 0 9px; }
.tp-buoc p:last-child { margin-bottom: 0; }
.tp-buoc.chot { border-left: 3px solid var(--ok); background: #F0FDF4;
  padding: 12px 15px; border-radius: 0 5px 5px 0; }
.tp-buoc.chot > b:first-child { color: #15803D; }
.tp-buoc.bay { border-left: 3px solid var(--warn); background: var(--warnbg);
  padding: 12px 15px; border-radius: 0 5px 5px 0; }
.tp-buoc.bay > b:first-child { color: #B45309; }

/* Hình trong ví dụ và lý thuyết */
/* Hình vẽ: cho nó một khung nhạt để tách khỏi chữ, và chú thích canh giữa hẹp
   lại cho dễ đọc. */
.tp-hinh { margin: 18px 0; text-align: center; background: #FAFCFE;
  border: 1px solid var(--line); border-radius: 6px; padding: 16px 12px 12px; }
.tp-hinh svg { max-width: 100%; height: auto; }
.tp-hinh figcaption, .tp-hinh > p:last-child { color: var(--muted); font-size: 12.5px;
  margin: 10px auto 0; max-width: 60ch; line-height: 1.6; text-align: center; }

/* Bảng canh cột kiểu "mạch khuôn ↔ mRNA", "bảng biến thiên" — chữ đều nét */
/* Khối canh cột: mạch khuôn ↔ mRNA, bảng biến thiên, bảng số mol. Nền tối hơn
   một bậc và chữ navy để nó tách hẳn khỏi văn xuôi — đây là chỗ phải ĐỌC DỌC. */
.tp-canh { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px;
  background: #F1F5FB; border: 1px solid var(--line); border-left: 3px solid var(--navy-2);
  border-radius: 0 5px 5px 0; color: #24354F;
  padding: 13px 15px; margin: 13px 0; overflow-x: auto; white-space: pre; line-height: 1.95; }

/* ── 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; }

/* ── Khung xương lúc chờ dữ liệu ──────────────────────────────────────────────
   Trước đây chỗ này là chữ "Đang tải…" trên nền trống. Dù dữ liệu về nhanh
   (~160 ms), khoảng trống đó vẫn đập vào mắt và trông như trang hỏng. Khung
   xương giữ đúng chỗ và đúng chiều cao của nội dung sắp hiện, nên mắt không
   thấy trang nhảy. */
.tp-xuong { animation: tpNhap 1.15s ease-in-out infinite; }
.tp-xuong i { display: block; background: linear-gradient(90deg, #EEF2F7, #E3E9F2, #EEF2F7);
  background-size: 200% 100%; border-radius: 6px; animation: tpTruot 1.4s linear infinite; }
@keyframes tpNhap { 0%, 100% { opacity: 1 } 50% { opacity: .72 } }
@keyframes tpTruot { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.tp-xuong-de { border: 1px solid var(--line); border-radius: 8px; padding: 15px 18px;
  margin-bottom: 10px; }
.tp-xuong-de i:first-child { height: 15px; width: 62%; margin-bottom: 9px; }
.tp-xuong-de i:last-child  { height: 12px; width: 34%; }
.tp-xuong-ch { border: 1px solid var(--line); border-radius: 8px; padding: 15px 18px;
  margin-bottom: 12px; }
.tp-xuong-ch i:first-child { height: 17px; width: 48%; margin-bottom: 10px; }
.tp-xuong-ch i:last-child  { height: 7px; width: 100%; }

/* Nhóm câu hỏi trong phòng thi — thiếu luật này thì các nhóm dính sát nhau */
.tp-nhom { margin-bottom: 26px; }

@media (prefers-reduced-motion: reduce) {
  .tp-xuong, .tp-xuong i { animation: none; }
}

/* ── CHỐNG TRÀN NGANG TRÊN ĐIỆN THOẠI ─────────────────────────────────────────
   42% lượt truy cập là điện thoại, nên đây là chỗ không được vỡ. Ba thứ trong
   bài học có chiều rộng TỐI THIỂU lớn hơn màn hình và ép cả trang giãn ra:
   công thức KaTeX ở chế độ display (đo được 565px), hình SVG (480px), và bảng
   nhiều cột. Chúng không tự tràn ra ngoài — chúng kéo KHUNG CHA rộng theo, nên
   mọi đoạn văn cũng bị cắt mất mép phải. Cách chữa là cho từng thứ tự cuộn
   trong hộp của nó, và khoá khung cha lại. */
.tp-bh-ly, .tp-vd, .tp-vd-giai, .tp-sai, .tp-buoc { max-width: 100%; min-width: 0; }

/* Công thức trên dòng riêng: cuộn ngang trong chính nó */
.katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%;
  padding: 3px 0 6px; }
/* Công thức giữa dòng: cho phép ngắt để không đẩy dòng ra */
.tp-bh-ly .katex, .tp-vd-giai .katex { max-width: 100%; }

/* Bảng nhiều cột: biến thành hộp cuộn ngang, giữ cột đủ rộng để không bị bóp */
.tp-bh-ly table { display: block; overflow-x: auto; max-width: 100%; }
.tp-bh-ly table > tbody, .tp-bh-ly table > thead { display: table; width: 100%;
  min-width: 480px; }

.tp-hinh { overflow-x: auto; }
.tp-hinh svg { max-width: 100%; height: auto; }

@media (max-width: 700px) {
  .tp-bh-ly > p { max-width: 100%; }
  .tp-bh-ly h4 { font-size: 15px; margin-top: 24px; }
  .tp-bh-ly th, .tp-bh-ly td { padding: 8px 10px; font-size: 13.5px; }
  .tp-vd-de, .tp-vd-giai { padding: 12px 13px; }
  .tp-buoc.chot, .tp-buoc.bay { padding: 11px 12px; }
  .tp-canh { font-size: 12.5px; padding: 11px 12px; }
  .tp-hinh { padding: 12px 8px 10px; }
}

/* ── KaTeX: lớp MathML ẩn vẫn ĐẨY chiều rộng trang ────────────────────────────
   KaTeX xuất hai bản cho mỗi công thức: `.katex-html` để nhìn, `.katex-mathml`
   để trình đọc màn hình đọc. Bản MathML đáng lẽ vô hình, nhưng Chrome nay dựng
   MathML thật (từ bản 109) và bỏ qua `clip` của KaTeX, nên nó vẫn chiếm chỗ:
   đo được một công thức ép trang rộng thêm 136px ở khổ 375px, cắt cụt mọi đoạn
   văn bên phải.

   Đã thử và loại: `clip-path: inset(50%)` (còn 510px) · `content-visibility`
   (511) · `contain` (511). Chỉ đưa hẳn ra ngoài màn hình mới hết.
   Dùng `position: fixed` chứ KHÔNG dùng `display:none` hay `visibility:hidden`
   — hai cái đó gỡ luôn công thức khỏi cây trợ năng, tức người dùng trình đọc
   màn hình mất sạch công thức toán của cả khu. */
.katex-mathml {
  position: fixed !important;
  top: -9999px !important;
  left: -9999px !important;
}