/* Cổng học /hoc theo bản vẽ D38 (tu-lieu/thiet-ke-codex-2026-10-10/thiet-ke: DangNhap, NhapMa, ChuaCoQuyen, ChaoMung,
   HanhTrinh, BaiVideo, ThucHanh, DonCuaToi, HoaDon, TaiKhoan, LienHe, Loi). Chép bố cục, cỡ chữ, khoảng cách của bản vẽ;
   KHÔNG chép cú pháp Claude Design.
   Màu: CHỈ qua biến của he-thong.css (không mã hex trong tệp này; phép thử web/tests/cong-hoc.test.js giữ luật đó), nên đổi
   bảng màu chung (V2 8.2, rồi D50, D51) là cổng học đổi theo. --do được dùng cho CHỮ NHỎ (nhãn 13px, trạng thái 14px, liên kết,
   tên chặng hiện tại): giá trị của nó phải đạt 4,5:1 trên giấy. Các sắc phụ (giấy sáng, chữ phụ, viền) là biến tính sẵn của
   he-thong.css, không dùng color-mix() để trình duyệt cũ (Zalo, Android cũ) vẫn đúng màu. Chip "đã xong" dùng mực đặc.
   Nút chính đỏ son (--nut-nen). Vàng rơm (--vang) chỉ cho điểm đang chọn trên nền nâu và vòng tiêu điểm có viền nâu bao
   ngoài; trên giấy, vòng tiêu điểm của ô nhập là đỏ son đậm (--vong). Đỏ cho dấu, nhãn, lỗi. Mép ô nhập dùng --vien-o (3:1).
   Chữ: Hubot Sans (tiêu đề 600 tới 700, thân 400, nút 600), nhãn điện tín dùng phông đơn cách của máy.
   Tên lớp trùng he-thong.css (.the, .nhan, .truong, .so) đổi thành .hv-the, .hv-nhan, .hv-truong, .hv-so để hai tệp
   không đè nhau. Mọi luật nằm dưới body.hv. */

.hv {
  --hv-kem: var(--kem);
  --hv-muc: var(--muc);
  --hv-vang: var(--vang);
  --hv-do: var(--do);
  --hv-giay: var(--giay-sang);     /* giấy sáng: nền thẻ */
  --hv-muc2: var(--chu-phu);       /* chữ phụ trên giấy (7,03:1 trên kem, 7,31:1 trên giấy sáng) */
  --hv-vien: rgba(var(--muc-rgb), .18);
  --hv-vien-dam: rgba(var(--muc-rgb), .4);
  --hv-kem-nhat: var(--kem-mo);    /* chữ phụ trên nền nâu (7,91:1) */
  --hv-loi-nen: var(--loi-nen);    /* nền ô lỗi (chữ đỏ trên nó 5,88:1) */
  --hv-tieu-de: var(--f-tieu-de);
  --hv-than: var(--f-chu);
  --hv-may: var(--f-may);          /* chữ số lấy từ "So BDHV" (số 0 không gạch), chữ còn lại đơn cách của máy */
}
body.hv {
  margin: 0; background: var(--hv-kem); background-image: none; color: var(--hv-muc);
  font-family: var(--hv-than); font-size: 16px; line-height: 1.55; text-wrap: pretty;
}
/* :where() giữ độ ưu tiên (0,1,0): thắng "p { margin }" của he-thong.css nhưng nhường mọi margin theo lớp viết sau
   (.tit, .dan, .tit-dau...). Viết ".hv h1" (0,1,1) thì các margin đó chết, tem xoay đè lên tiêu đề. */
.hv :where(h1, h2, h3, p) { margin: 0; }
.hv a { color: var(--hv-do); }
.hv a:focus-visible, .hv button:focus-visible, .hv summary:focus-visible {
  outline: 3px solid var(--hv-vang); outline-offset: 3px; box-shadow: 0 0 0 6px var(--hv-muc); border-radius: 2px;
}
.hv ::selection { background: var(--hv-vang); color: var(--hv-muc); }
.hv .nw { white-space: nowrap; }
.hv .bo-qua:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 50;
  padding: 10px 14px; background: var(--hv-kem); color: var(--hv-muc); font-weight: 700; border: 2px solid var(--hv-muc); }

/* ---------- Khung trang: đầu, dải sọc, điều hướng, ruột, chân ---------- */
.hv-trang { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.hd { background: var(--hv-muc); color: var(--hv-kem); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px; min-height: 56px; }
.wm { display: flex; flex-direction: column; justify-content: center; min-height: 48px; line-height: 1.05; text-decoration: none; }
.hv .wm, .hv .wm:hover { color: var(--hv-kem); }
.wm b { font-family: var(--hv-tieu-de); font-size: 17px; font-weight: 700; }
.wm span { font-size: 10.5px; color: var(--hv-kem-nhat); margin-top: 3px; }
.hv .hd .thoat { color: var(--hv-kem); font-size: 14px; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; padding: 0 4px; }
/* "Trang học vụ" không xuống dòng: ở 320px nó bị bẻ còn chữ "vụ" một mình và kéo dòng phụ dưới chữ "Học vụ" thành hai
   dòng; giữ nguyên một dòng thì cả hai đều vừa (soát rs-khac). */
.hv .hd .thoat { white-space: nowrap; flex: 0 0 auto; }
/* 320px: dòng phụ "Cổng học Bình Dân Học Vụ Tài Chính" thiếu 6px để nằm một dòng cạnh "Trang học vụ"; khe 8px, bỏ lề trong của link. */
@media (max-width: 359px) { .hv .hd { gap: 8px; } .hv .hd .thoat { padding: 0; } }
.hv .hd .ten-hv { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13.5px; color: var(--hv-kem); text-decoration: none; min-height: 48px; min-width: 48px; }
.ten-hv span { max-width: 9.3em; /* 14ch cũ theo số 0 Hubot; ch nay theo số 0 Bricolage (D51) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ten-hv i { width: 32px; height: 32px; border-radius: 50%; background: var(--hv-vang); color: var(--hv-muc); font-style: normal;
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--hv-tieu-de); flex: 0 0 32px; }
/* V2: một đường mực đỏ mảnh khép mép đầu trang (thay dải sọc đỏ vàng kiểu phong bì của D38). */
.soc { height: 3px; background: var(--hv-do); }

/* Điều hướng học viên: điện thoại dính đáy, máy tính dính đỉnh ngay dưới đầu trang (thứ tự DOM: trước ruột).
   Mép trên (điện thoại) và mép dưới (máy tính) là đường mực đỏ như đầu trang; mục đang mở đánh dấu bằng chữ vàng sáng và
   một vạch vàng sáng (vàng chỉ dùng trên nền tối). */
.bn { order: 10; position: sticky; bottom: 0; z-index: 5; display: flex; background: var(--hv-muc); border-top: 3px solid var(--hv-do);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.hv .bn a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px;
  font-size: 12px; font-weight: 600; color: var(--kem-mo); text-decoration: none; text-align: center; position: relative; }
.bn a svg { width: 22px; height: 22px; }
.hv .bn a[aria-current="page"] { color: var(--hv-vang); }
.hv .bn a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; top: 0; width: 28px; height: 3px; margin-left: -14px; background: var(--hv-vang); }
.hv .bn a:hover { color: var(--hv-kem); }
/* Khách chưa đăng nhập (lớp hv-khach do hoc-supabase.js đặt trong <head>): không có thanh điều hướng và nút tài khoản ngay
   từ lần vẽ đầu, thay vì hiện rồi mới giấu (ở máy tính ruột tụt 55px rồi bật lên, soát rs-khac). */
html.hv-khach .bn, html.hv-khach .hd .ten-hv { display: none; }
/* Hóa đơn: liên kết "‹ Đơn của tôi" chỉ cho người đã đăng nhập. Ẩn theo lớp hv-khach (biết từ <head>) thay vì để JS bỏ hidden
   sau lần vẽ đầu: máy chậm thấy dòng "Đang mở…" tụt 58px khi liên kết hiện ra (CLS 0,013 ở 320 tới 430, soát V2). */
html.hv-khach #lk-lui { display: none; }

.ruot { flex: 1 0 auto; width: 100%; padding: 22px 16px 40px; display: flex; flex-direction: column; gap: 18px; }
/* Chống xô trang (soát D38): nội dung cổng học đến sau khi đọc phiên và gọi RPC. Lúc dòng "Đang mở..." còn hiện, phần
   đứng sau nó (ghi chú cuối ruột, dòng hỗ trợ, chân trang) giữ chỗ nhưng chưa vẽ, nên khi nội dung hiện ra chúng không nhảy
   trước mắt người xem. Trình duyệt chưa hỗ trợ :has thì vẫn hiện như cũ. */
.hv-trang:has(#dang-tai:not([hidden])) :is(#dang-tai ~ *, .ho-tro, .chan-trang) { visibility: hidden; }
/* Liên hệ: chưa biết khách hay học viên thì cả form (và mọi thứ dưới form) giữ chỗ nhưng chưa vẽ. Trước đây chỉ giữ phần
   sau nhóm ô khách: khối "Kênh liên hệ" hiện ra phía trên làm cả form trượt xuống (CLS 0,08, soát rs-khac). */
#f-lh[data-cho-phien], .hv-trang:has(#f-lh[data-cho-phien]) :is(#f-lh ~ *, .ho-tro, .chan-trang) { visibility: hidden;
  animation: hv-hien-lai 0s linear 4s forwards; } /* mạng treo, tệp JS hỏng: 4 giây sau vẫn hiện form (soát rs-khac) */
@keyframes hv-hien-lai { to { visibility: visible; } }
/* Thanh điều hướng dính đáy (điện thoại) hoặc dính đỉnh (máy tính): chừa chỗ khi Tab tới một ô để thanh không che ô đó. */
html:has(body.hv) { scroll-padding-bottom: 72px; }
@media (min-width: 900px) { html:has(body.hv) { scroll-padding-bottom: 0; scroll-padding-top: 64px; } }
.ruot:focus { outline: none; }
.cot { display: flex; flex-direction: column; gap: 18px; }
.giua { text-align: center; }
.giua-ca { text-align: center; align-items: center; }
.giua-ca .btn { width: 100%; }
.dang-tai { font: 500 14px/1.6 var(--hv-may); color: var(--hv-muc2); padding: 40px 0; }

/* Đăng nhập, vào học: màn nào hiện (gõ email, nhập mã, hết phiên, đã vào) do hoc-dang-nhap.js chọn sau khi đọc địa chỉ và
   phiên. Trước khi tệp đó chạy, trang vẽ màn gõ email rồi mới đổi sang màn "Phiên đăng nhập đã hết hạn" hay "Đã vào": người
   bị hết phiên thấy chớp một form khác (soát rs-khac). Lúc chưa chọn xong thì giữ chỗ, chưa vẽ; tệp đó gắn lớp hv-dn-xong lên
   <html> khi chọn xong. Không JS (không có lớp co-js) thì hiện ngay; tệp JS hỏng thì 2 giây sau vẫn hiện. */
.co-js:not(.hv-dn-xong) body:is([data-tab="dang-nhap"], [data-tab="vao"]) :is(main > section, .ho-tro) { visibility: hidden;
  animation: hv-hien-lai 0s linear 2s forwards; }
/* Chân trang do chan-trang.js vẽ sau, giữ chỗ 320px rồi cao lên: trang ngắn (đăng nhập, hết phiên) thì dòng hỗ trợ và chân
   trang bị kéo lên trước mắt người xem (CLS 0,05, soát rs-khac). Lúc chân trang còn rỗng thì cả hai giữ chỗ, chưa vẽ. */
.hv .chan-trang:empty, .hv-trang:has(.chan-trang:empty) .ho-tro { visibility: hidden; animation: hv-hien-lai 0s linear 2s forwards; }
/* chan-trang.js không chạy được thì 2 giây sau dòng hỗ trợ (Liên hệ học vụ, Quy trình khiếu nại) vẫn hiện, không mất lối hỏi. */
/* Thứ tự khung: ruột, hỗ trợ, chân trang; điều hướng dính đáy (điện thoại) hoặc dính đỉnh (máy tính). */
.hv .chan-trang { order: 9; }
.ho-tro { order: 8; border-top: 1px solid var(--hv-vien); padding: 16px; font-size: 14px; color: var(--hv-muc2); text-align: center; }
.ho-tro a { font-weight: 700; display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; }

@media (min-width: 900px) {
  .hd { padding: 0 32px; min-height: 64px; }
  .bn { order: 0; top: 0; bottom: auto; justify-content: flex-start; gap: 4px; padding: 0 16px; border-top: 0; border-bottom: 3px solid var(--hv-do); }
  .hv .bn a { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 0 16px; min-height: 52px; font-size: 14.5px; }
  .hv .bn a[aria-current="page"]::after { top: auto; bottom: 0; left: 16px; right: 16px; width: auto; margin: 0; }
  .bn a svg { width: 18px; height: 18px; }
  /* Có thanh điều hướng thì mép đỏ nằm dưới thanh (một khối đầu trang), không chen giữa đầu trang và thanh. */
  html:not(.hv-khach) .hv-trang:has(> .bn) > .soc { display: none; }
  .ruot { max-width: 1160px; margin: 0 auto; padding: 36px 32px 64px; }
  .ruot-hep { max-width: 640px; }
  /* Màn giấy tờ (đơn, hóa đơn, liên hệ, tài khoản) chỉ có bản vẽ điện thoại: một cột 1160px làm nút dài cả màn và
     nhãn cách số quá xa, nên giữ khổ đọc vừa. */
  .ruot-vua { max-width: 780px; }
  .tit { font-size: 40px; }
}
/* Màn rộng từ 1160px: chữ "Học vụ", tên học viên và thanh điều hướng thẳng mép với ruột 1160px (lề 32px) thay vì dạt ra sát
   hai mép màn 1920, 2560 trong khi nội dung nằm giữa (soát rs-khac 14/10). Liên kết điều hướng có lề trong 16px. */
@media (min-width: 1160px) {
  .hd { padding-left: calc((100% - 1096px) / 2); padding-right: calc((100% - 1096px) / 2); }
  .bn { padding-left: calc((100% - 1096px) / 2 - 16px); padding-right: calc((100% - 1096px) / 2 - 16px); }
}

/* ---------- Chữ ---------- */
.hv-nhan { display: inline-flex; gap: 8px; align-items: center; font-family: var(--hv-tieu-de); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; color: var(--hv-do); text-transform: uppercase; }
.hv-nhan i { display: inline-block; width: 22px; height: 3px; background: currentColor; }
.tit { font-family: var(--hv-tieu-de); font-weight: 700; font-size: 30px; line-height: 1.12; text-wrap: balance; margin-top: 6px; letter-spacing: -.015em; }
.tit:focus { outline: none; }
.tit.vua { font-size: 26px; }
@media (min-width: 900px) { .tit.vua { font-size: 32px; } }
/* Cỡ chữ (soát rs-khac 14/10): chữ thân phải đọc (dẫn, thẻ, danh sách, câu hỏi bài thực hành, trả lời phiếu, dòng tóm tắt)
   từ 16px trên mọi màn; ghi chú 14px; nhãn nhỏ (chip, mộc, nhãn điện tín) giữ cỡ bản vẽ. */
.dan { color: var(--hv-muc2); font-size: 16px; margin-top: 8px; }
.dan.hep { max-width: 340px; margin-left: auto; margin-right: auto; }
.ghi { font-size: 14px; color: var(--hv-muc2); line-height: 1.5; }
.ghi.lon { font-size: 16px; }
.nhan-dt { font-family: var(--hv-may); font-size: 12px; letter-spacing: .06em; color: var(--hv-do); text-transform: uppercase; }
.lui { font-weight: 700; font-size: 15px; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; margin-bottom: -8px; align-self: flex-start; }
.hv .lui { color: var(--hv-muc); }
.hv .lui:hover { text-decoration: underline; }

/* ---------- Thẻ và đoạn (V2 mục 15.1: giảm khung thẻ) ----------
   Khung (.hv-the) CHỈ cho thành phần thao tác hoặc vật cụ thể: form, biên lai đơn, phiếu học tiếp, ô bài thực hành, bản tổng
   kết. Khung là một tờ giấy sáng viền mảnh, không đổ bóng cứng. .the-dam: viền mực cho thứ chính của màn (form đăng nhập, biên
   lai đã trả tiền). Phần chỉ để đọc (lời dặn, lý do, hướng dẫn, mục cài đặt) là đoạn biên tập (.hv-doan): không nền, không viền
   bốn cạnh, chỉ một đường mực ngang mảnh phía trên. */
.hv-the { background: var(--hv-giay); border: 1px solid var(--hv-vien); border-radius: 4px; padding: 20px 18px; position: relative; }
.the-dam { border: 1.5px solid var(--hv-muc); }
.the-do { border-left: 3px solid var(--hv-do); }
.hv-doan { border-top: 1px solid var(--hv-vien-dam); padding-top: 18px; position: relative; }
.hv-doan.the-do { border-left: 0; border-top-color: var(--hv-do); border-top-width: 2px; }
.hv-the h2, .hv-doan h2 { font-family: var(--hv-tieu-de); font-weight: 600; font-size: 19px; line-height: 1.25; display: flex; justify-content: space-between;
  align-items: baseline; gap: 10px; flex-wrap: wrap; letter-spacing: -.005em; }
.hv-doan h2 + .ghi, .hv-doan h2 + p { margin-top: 6px; }
.hv-doan > .btn, .hv-doan > form > .btn, .hv-doan .hang-nut { margin-top: 14px; }
.hv-doan > .ghi { margin-top: 8px; }
.hv-doan > p + p { margin-top: 6px; }
.hv-doan .ds { margin: 8px 0 0; padding-left: 18px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.hv-doan h2 a, .hv-doan h2 .lk { font-family: var(--hv-than); font-size: 15px; font-weight: 700; }
.hv-doan h2 .lk { min-width: 48px; padding: 0 6px; }
.hv-doan h2 small { font-family: var(--hv-than); font-weight: 500; font-size: 13px; color: var(--hv-muc2); }
/* Lý do, lời dặn đánh số thật (thứ tự có nghĩa): số mực đỏ đứng ngoài lề trái, chữ thẳng một cột */
.hv-doan.co-so { padding-left: 34px; }
.hv-doan.co-so > .so-le { position: absolute; left: 0; top: 16px; font: 700 22px/1.1 var(--hv-tieu-de); color: var(--hv-do); }
.hv-the h2 a, .hv-the h2 .lk { font-family: var(--hv-than); font-size: 15px; font-weight: 700; }
.hv-the h2 .lk { min-width: 48px; padding: 0 6px; } /* "Sửa" rộng 30px: vùng chạm dưới 48px (soát D38) */
/* Link đứng gần như một mình trong dòng (vd. "Theo Chính sách bảo vệ dữ liệu cá nhân." ở Tài khoản): vùng chạm 48px (soát D38) */
/* Giữ link nằm trong dòng (lề trong của phần tử dòng nới vùng chạm mà không đẩy dòng). Bản inline-block cũ ở 320, 360px nhảy
   cả link xuống dòng riêng, để chữ "Theo" và dấu chấm đứng trơ một mình (soát rs-khac). */
#t-dl + .ghi > a { padding: 13px 0; }
.hv-the h2 small { font-family: var(--hv-than); font-weight: 500; font-size: 13px; color: var(--hv-muc2); }
.hv-the h2 + .ghi, .hv-the h2 + p { margin-top: 6px; }
.hv-the > .btn, .hv-the > form > .btn, .hv-the .hang-nut { margin-top: 14px; }
.hv-the > .ghi { margin-top: 8px; }
.hv-the > p + p { margin-top: 6px; }
.hv-the .ds { margin: 8px 0 0; padding-left: 18px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.the-giua { text-align: center; }
.the-giua h2 { justify-content: center; }
.the-giua .dau { margin: 6px 0 14px; }
/* Dòng tóm tắt đơn (hóa đơn): một dòng sổ, mực đậm phía trên, không phải khối tối */
.tom { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-top: 2px solid var(--hv-muc);
  border-bottom: 1px solid var(--hv-vien); padding: 12px 0; font-size: 16px; }
.tom b { font-family: var(--hv-tieu-de); font-size: 17px; font-weight: 600; }
.tom b small { display: block; font-family: var(--hv-than); font-weight: 400; font-size: 14px; color: var(--hv-muc2); margin-top: 2px; }
.tom > span { color: var(--hv-do); font-weight: 600; white-space: nowrap; }

/* ---------- Ô nhập ---------- */
.hv-truong { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.hv-truong:first-child { margin-top: 0; }
.hv-truong label, .nhan-o { font-size: 16px; font-weight: 600; }
.hv-truong label em, .nhan-o em { font-style: normal; color: var(--hv-do); }
.hv-truong label small { font-weight: 500; color: var(--hv-muc2); font-size: 13px; }
.hv-truong input, .hv-truong select, .hv-truong textarea, .hv .o-nhap {
  font: inherit; font-size: 16px; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--vien-o); border-radius: 4px; /* mép ô 4,2:1 (WCAG 1.4.11) */
  background: var(--nen-o); color: var(--hv-muc); width: 100%; box-shadow: none; appearance: none; -webkit-appearance: none;
}
.hv-truong select { background-image: linear-gradient(45deg, transparent 50%, var(--hv-muc) 50%), linear-gradient(135deg, var(--hv-muc) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.hv-truong textarea, .hv textarea.o-nhap { min-height: 96px; resize: vertical; line-height: 1.5; }
.hv-truong input:focus, .hv-truong select:focus, .hv-truong textarea:focus, .hv .o-nhap:focus {
  outline: 3px solid var(--vong); outline-offset: 1px; border-color: var(--hv-muc); }
.hv-truong input[readonly] { background: transparent; border-style: dashed; }
.hv-truong .goi { font-size: 14px; color: var(--hv-muc2); }
.hv-truong.loi input, .hv-truong.loi textarea, .hv-truong.loi select, .hv .o-nhap[aria-invalid="true"] { border-color: var(--hv-do); background-color: var(--hv-loi-nen); }
.bao { font-size: 14px; color: var(--hv-do); font-weight: 700; }
.bao-xong { font-size: 14px; font-weight: 700; color: var(--hv-muc); }
.chi-doc { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--hv-vien); font-size: 16px; margin-top: 8px; }
.chi-doc span { color: var(--hv-muc2); }

/* Nút: cùng ngôn ngữ với .nut của he-thong.css (V2 mục 9: rê chuột đổi nền hoặc viền, nhấn dịch 1px; không bóng cứng).
   Nút chính mực đỏ, chữ giấy sáng 7,7:1; nút phụ viền mực 1,5px (12,6:1 trên giấy). */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 20px; border-radius: 4px;
  font: inherit; font-weight: 600; font-size: 17px; line-height: 1.25; text-decoration: none; cursor: pointer; border: 1.5px solid var(--hv-muc); text-align: center;
  transition: background-color .14s, border-color .14s, color .14s, transform .1s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.hv .btn-chinh { background: var(--nut-nen); color: var(--nut-chu); border-color: var(--nut-nen); }
.hv .btn-chinh:hover { background: var(--nut-nen-hover); border-color: var(--nut-nen-hover); color: var(--nut-chu); text-decoration: none; }
.hv .btn-chinh:disabled, .hv .btn-chinh[aria-disabled="true"] { background: var(--nut-tat-nen); cursor: not-allowed;
  border-color: var(--hv-vien-dam); color: var(--nut-tat-chu); transform: none; }
.hv .btn-phu { background: transparent; color: var(--hv-muc); }
.hv .btn-phu:hover { background: var(--hv-giay); border-color: var(--hv-muc); text-decoration: none; box-shadow: inset 0 0 0 .5px var(--hv-muc); }
.hv .btn-phu:disabled { color: var(--hv-muc2); border-style: dashed; cursor: not-allowed; transform: none; }
.hv .btn-nguy { background: transparent; color: var(--hv-do); border-color: var(--hv-do); }
.hv .btn-nguy:hover { background: var(--hv-loi-nen); }
.hv .btn-nguy-dac { background: var(--hv-do); color: var(--nut-chu); border-color: var(--hv-do); }
.hv .btn-nguy-dac:hover { background: var(--nut-nen-hover); border-color: var(--nut-nen-hover); }
.btn-nho { min-height: 48px; font-size: 15px; padding: 10px 14px; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; } /* không đủ chỗ cho chữ của cả hai nút thì mỗi nút một hàng, không bẻ chữ */
/* Hai nút cạnh nhau: mỗi nút rộng theo chữ của nó trước (flex-basis auto), phần dư chia 1 : 1,4 cho nút chính; lề trong hai
   bên 12px. Bản cũ chia cứng 1 : 1,4 tính từ 0 nên ở 320 tới 375px "Phần trước", "Xem từ đầu" bị bẻ hai dòng trong khi nút
   bên cạnh còn thừa chỗ (soát rs-khac, bài thực hành). */
.hang-nut > * { flex: 1 1 auto; width: auto; padding-left: 12px; padding-right: 12px; } /* width auto: .btn rộng 100% làm cơ sở auto thành cả hàng */
.hang-nut > .btn-chinh { flex-grow: 1.4; }
.lk { font: inherit; font-weight: 700; color: var(--hv-do); background: none; border: 0; padding: 0; min-height: 48px; cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em; }
.lk:disabled { color: var(--hv-muc2); text-decoration: none; cursor: default; }

/* Ô tick: ô thật ẩn bằng an-di để bàn phím vẫn tới được; ô vẽ theo bản vẽ */
.chk { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; cursor: pointer; padding: 6px 0; position: relative; min-height: 48px; }
.chk input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; left: 0; top: 7px; }
.chk .o { flex: 0 0 26px; height: 26px; border: 2px solid var(--hv-muc); border-radius: 3px; background: var(--nen-o); display: flex; align-items: center;
  justify-content: center; margin-top: 1px; }
.chk .o svg { display: none; width: 16px; height: 16px; }
.chk input:checked + .o { background: var(--hv-muc); color: var(--hv-kem); }
.chk input:checked + .o svg { display: block; }
.chk input:focus-visible + .o { outline: 3px solid var(--vong); outline-offset: 2px; }
.chk input:disabled + .o { opacity: .45; }
.chk.loi .o { border-color: var(--hv-do); box-shadow: 0 0 0 3px rgba(var(--do-rgb), .2); }
.chk em { color: var(--hv-do); font-style: normal; }

/* Khung lưu ý */
.canh { display: flex; gap: 10px; align-items: flex-start; border-left: 4px solid var(--hv-do); background: rgba(var(--do-rgb), .06);
  padding: 12px 14px; font-size: 16px; border-radius: 0 4px 4px 0; }
.canh.vang { border-left-color: var(--vang-muc); background: rgba(var(--vang-muc-rgb), .14); }
.canh.muc { border-left-color: var(--hv-muc); background: rgba(var(--muc-rgb), .06); }

/* Dấu mộc: chỉ đóng lên sự thật (đã nhận tiền, đã hoàn tiền, hoàn thành, đã nộp, đã tiếp nhận) */
/* Cùng hình con dấu văn thư của he-thong.css (.dau-moc): viền đỏ mộc, vòng trong mảnh, vết mực không đều (mặt nạ --vet-muc),
   nghiêng 5 độ. Chữ dấu là chữ hoa của Hubot Sans 700. */
.dau { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: var(--hv-do); border: 2.5px solid currentColor; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--nen-dau, var(--hv-kem)), inset 0 0 0 3.5px currentColor;
  font: 700 20px/1.12 var(--hv-tieu-de); letter-spacing: .08em; text-transform: uppercase; padding: 10px 18px 9px; transform: rotate(-5deg);
  white-space: nowrap; user-select: none;
  -webkit-mask-image: var(--vet-muc); mask-image: var(--vet-muc); -webkit-mask-size: 140px 140px; mask-size: 140px 140px; }
.hv-the .dau { --nen-dau: var(--hv-giay); }
.dau small { font: 500 11px/1.3 var(--hv-may); letter-spacing: .08em; margin-top: 3px; }
.dau.lon { font-size: 22px; }
.dau.vua { font-size: 17px; }
.dau.muc { color: var(--hv-muc); }
.dau.nhat { color: var(--hv-muc2); }
.dau.goc { font-size: 13px; padding: 6px 10px 5px; letter-spacing: .06em; }
/* Dưới 360px: dấu dài nhất ("ĐÃ NHẬN YÊU CẦU" ở hóa đơn) rộng 258px trong khung 250px; thu chữ và giãn chữ để nằm trong khung. */
@media (max-width: 359px) { .dau:not(.goc) { font-size: 17px; letter-spacing: .05em; padding: 9px 14px 8px; } }
/* V2 mục 9: dấu vào nhẹ từ 1,03 về 1, một lần, không rung, không nảy. */
.dau.dong-dau { animation: hv-dong-dau .22s ease-out both; }
@keyframes hv-dong-dau {
  from { opacity: 0; transform: rotate(-5deg) scale(1.03); }
  to { opacity: 1; transform: rotate(-5deg) scale(1); }
}

/* Công tắc nhiều lựa chọn */
.chuyen { display: flex; border: 2px solid var(--hv-muc); border-radius: 4px; overflow: hidden; }
.chuyen button { flex: 1; min-width: 0; font: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; min-height: 48px; border: 0; background: var(--nen-o); color: var(--hv-muc); cursor: pointer; padding: 6px 8px; }
.chuyen button + button { border-left: 2px solid var(--hv-muc); }
.chuyen button[aria-pressed="true"] { background: var(--hv-muc); color: var(--hv-kem); }
.chuyen button:focus-visible { outline: 3px solid var(--vong); outline-offset: -5px; box-shadow: none; }

/* Dòng bảng */
.dong { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--hv-vien); font-size: 16px; }
.dong > span:first-child { color: var(--hv-muc2); }
.dong > b { text-align: right; word-break: break-word; }
/* Giá trị dài (email ở Tài khoản) không vừa cạnh nhãn ở 320px: xuống dòng riêng, canh phải, thay vì bẻ đôi email. */
.dong { flex-wrap: wrap; }
.dong > b { margin-left: auto; }
.dong.cuoi { border-bottom: 0; }
.dong.tong { border-bottom: 0; border-top: 2px solid var(--hv-muc); margin-top: 4px; padding-top: 12px; font-size: 17px; align-items: baseline; }
.dong.tong > span:first-child { color: var(--hv-muc); }
.dong.tong > b { font-family: var(--hv-tieu-de); font-size: 24px; font-weight: 700; }

/* Chip trạng thái: đã xong = mực đặc; đang = đỏ; chưa = mực nhạt */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  border: 1.5px solid currentColor; white-space: nowrap; font-family: var(--hv-than); line-height: 1.4; }
.chip.xong { color: var(--hv-kem); background: var(--hv-muc); border-color: var(--hv-muc); }
.chip.dang { color: var(--hv-do); }
.chip.chua, .chip.khoa { color: var(--hv-muc2); }

/* Thanh tiến độ */
.tien { height: 10px; background: rgba(var(--muc-rgb), .12); border-radius: 5px; overflow: hidden; }
.tien i { display: block; height: 100%; width: var(--pt, 0%); background: var(--hv-do); }

/* ---------- H2 · Ô mã 6 số ---------- */
.o6 { position: relative; margin-top: 14px; }
.o6 input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; z-index: 2; cursor: text; }
.o6 .hang { display: flex; gap: 8px; justify-content: space-between; pointer-events: none; }
.o6 .hang span { flex: 1; height: 58px; border: 2px solid var(--hv-muc); border-radius: 4px; background: var(--nen-o); display: flex; align-items: center;
  justify-content: center; font-family: var(--hv-tieu-de); font-size: 28px; font-weight: 700; min-width: 0; }
.o6.loi .hang span { border-color: var(--hv-do); background: var(--hv-loi-nen); }
.o6 input:focus + .hang span.tro { outline: 3px solid var(--vong); outline-offset: 1px; }

/* ---------- H5 · Hành trình: phiếu học tiếp và con đường 6 chặng (D48, V2 mục 15.1) ----------
   Phiếu "Học tiếp" là thành phần thao tác chính nên có khung (tờ giấy sáng, mép trên mực đỏ). Sáu chặng KHÔNG đóng khung:
   một con đường dọc, mỗi chặng một mốc. Trạng thái nói bằng HÌNH, không chỉ bằng màu (bài học Tinh Hoa V6 T2):
   mốc đặc mực đỏ = đã xong; vòng đỏ tô theo phần trăm bài xong = đang học; vòng nét đứt = chưa học. Đoạn đường sau một chặng
   đã xong liền mực đỏ (đoạn đã đi), còn lại nét đứt. Đây là tiến độ THẬT của học viên, không phải vị trí đọc.
   Chặng có bài "Học tiếp" đổi tên sang mực đỏ và mở sẵn danh sách bài. Giữa các chặng chỉ có đường mực ngang mảnh ở cột chữ. */
.ht-luoi, .ht-trai, .ht-phai { display: flex; flex-direction: column; gap: 18px; }
.tiep { background: var(--hv-giay); border: 1px solid var(--hv-vien); border-top: 3px solid var(--hv-do); border-radius: 4px; padding: 16px 18px 18px; }
.tiep .nhan-tiep { font: 600 13px/1.4 var(--hv-tieu-de); letter-spacing: .06em; text-transform: uppercase; color: var(--hv-do); }
.tiep .ten-tiep { font: 600 21px/1.25 var(--hv-tieu-de); letter-spacing: -.005em; margin-top: 4px; }
.tiep .so-tiep { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--hv-muc2); margin: 14px 0 6px; }
.tiep .so-tiep b { color: var(--hv-muc); font-weight: 600; }
.tiep .btn { margin-top: 16px; }
.tien i { transform-origin: left center; }
.ve .tien i { animation: hv-ke-ngang .45s ease-out both; }
@keyframes hv-ke-ngang { from { transform: scaleX(0); } }

.tuyen { --moc: 32px; --cot: 46px; --tam: 30px; list-style: none; margin: 0; padding: 0; }
.ch { position: relative; scroll-margin-top: 80px; }
.ch + .ch { background: linear-gradient(var(--hv-vien-dam), var(--hv-vien-dam)) no-repeat var(--cot) 0 / calc(100% - var(--cot)) 1px; }
/* Đường: nửa trên (từ mép trên tới tâm mốc) mang màu đoạn của chặng trước, nửa dưới (tâm mốc tới mép dưới) mang màu đoạn của
   chính chặng này. Chặng mở ra thì nửa dưới tự dài theo, không phải tính lại. */
.ch::before, .ch::after { content: ""; position: absolute; left: calc(var(--moc) / 2 - 1px); width: 2px; transform-origin: top center;
  background: repeating-linear-gradient(to bottom, var(--hv-vien-dam) 0 5px, transparent 5px 10px); }
.ch::before { top: 0; height: var(--tam); }
.ch::after { top: var(--tam); bottom: 0; }
.ch:first-child::before, .ch:last-child::after { display: none; }
.ch.xong::after, .ch.sau-xong::before { background: var(--hv-do); }
/* Thấm mực một lần khi vẽ (V2 mục 9 "Lộ trình", 300 tới 450ms, không ghim, không lặp): đoạn đỏ dài dần theo thứ tự chặng. */
.tuyen.ve .ch.xong::after { animation: hv-tham .24s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
.tuyen.ve .ch.sau-xong::before { animation: hv-tham .12s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes hv-tham { from { transform: scaleY(0); } }

.ch-dau { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: var(--hv-muc); background: none;
  border: 0; padding: 14px 0; cursor: pointer; border-radius: 2px; }
.moc { position: relative; z-index: 1; flex: 0 0 var(--moc); width: var(--moc); height: var(--moc); border-radius: 50%; display: grid; place-items: center;
  font: 700 15px/1 var(--hv-tieu-de); background: var(--hv-kem); color: var(--hv-muc2); border: 1.5px dashed var(--hv-muc2); }
.moc > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
/* Đang học: vòng liền mực đỏ (khác vòng đứt của chưa học, 6,9:1) và một cung dày tô đúng phần trăm bài đã xong. */
.ch.dang .moc { border: 1.5px solid var(--hv-do); color: var(--hv-do); background: conic-gradient(var(--hv-do) var(--pt, 0%), transparent 0); }
.ch.dang .moc > span { width: calc(100% - 7px); height: calc(100% - 7px); background: var(--hv-kem); }
.ch.xong .moc { border: 0; background: var(--hv-do); color: var(--nut-chu); }
.ve .ch.hien-tai .moc { animation: hv-moc .3s ease-out both; animation-delay: calc(var(--i, 0) * 60ms + .12s); }
@keyframes hv-moc { from { transform: scale(.7); } }
.ch-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.ch-ten { font: 600 18px/1.3 var(--hv-tieu-de); letter-spacing: -.005em; }
.ch.hien-tai .ch-ten { color: var(--hv-do); }
.ch-dau:hover .ch-ten { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ch-ra { font-size: 16px; line-height: 1.45; color: var(--hv-muc2); }
.ch-ra b { font-weight: 600; color: var(--hv-muc); }
.ch-meta { font-size: 14px; color: var(--hv-muc2); margin-top: 2px; }
.ch-tt { font-weight: 600; color: var(--hv-muc); }
.ch.dang .ch-tt, .ch.hien-tai .ch-tt { color: var(--hv-do); }
.ch-dau .mui { margin-left: 4px; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--hv-muc); border-bottom: 2px solid var(--hv-muc);
  transform: rotate(45deg); margin-top: 10px; margin-right: 6px; transition: transform .2s ease-out; }
.ch-dau[aria-expanded="true"] .mui { transform: rotate(-135deg); margin-top: 15px; }
.ch-dau:focus-visible { outline-offset: 2px; }
.ch-mo { padding: 0 0 14px var(--cot); }
.ve-mo { animation: hv-mo .22s ease-out both; }
@keyframes hv-mo { from { opacity: 0; transform: translateY(-6px); } }
.ch-hoi { font-size: 16px; color: var(--hv-muc2); margin: 0 0 6px; }
.ch-hoi b { font-weight: 600; color: var(--hv-muc); }
.bai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bai a, .bai .bai-khoa { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; font-size: 16px;
  text-decoration: none; border-top: 1px solid var(--hv-vien); padding: 8px 0; }
.hv .bai a { color: var(--hv-muc); }
.hv .bai a:hover span { text-decoration: underline; }
.bai .bai-khoa { color: var(--hv-muc2); }
.bai i { font-style: normal; font-size: 14px; color: var(--hv-muc2); white-space: nowrap; }
.bai a.xong i { color: var(--hv-muc); }
.bai a.xong i::before { content: "\2713\00a0"; }
.bai a.tiep-lk span { font-weight: 600; }
.bai a.tiep-lk i { color: var(--hv-do); font-weight: 700; }
.bai-trong { font-size: 15px; color: var(--hv-muc2); padding: 6px 0 0; }
.ghi-tuyen { border-top: 1px solid var(--hv-vien-dam); padding-top: 12px; font-size: 15px; color: var(--hv-muc2); }
@media (min-width: 600px) { .tuyen { --moc: 36px; --cot: 52px; --tam: 34px; } .moc { font-size: 16px; } .ch-dau { padding: 16px 0; } .ch-chu { padding-top: 6px; } }
@media (min-width: 900px) {
  .ht-luoi { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: start; }
  .ht-trai { position: sticky; top: 76px; }
}

/* ---------- H6 · Bài video ---------- */
.bv-luoi, .bv-trai, .bv-phai { display: flex; flex-direction: column; gap: 18px; }
.bv-pc { display: none; }
.vd { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--muc-2), var(--muc)); border-radius: 6px; display: flex;
  align-items: center; justify-content: center; color: var(--hv-kem); overflow: hidden; }
.vd iframe, .vd > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vd .vd-cho { display: grid; place-items: center; padding: 20px; text-align: center; font-size: 14px; position: static; }
.vd .vd-cho small { display: block; color: var(--hv-kem-nhat); margin-top: 6px; font-size: 13px; }
.vd.chua { background: repeating-linear-gradient(135deg, rgba(var(--muc-rgb), .12) 0 12px, rgba(var(--muc-rgb), .05) 12px 24px); color: var(--hv-muc);
  flex-direction: column; gap: 6px; text-align: center; padding: 20px; }
.vd.chua b { font-family: var(--hv-tieu-de); font-size: 20px; }
.vd.chua span { font-size: 15px; }
.xem-dong { font-size: 14px; color: var(--hv-muc2); }
.xem-dong b { color: var(--hv-muc); }
.xem-dong .bao { display: block; margin-top: 4px; }
.tab3 { display: flex; border-bottom: 2px solid var(--hv-muc); }
.tab3 button { flex: 1; font: inherit; font-weight: 700; font-size: 15px; min-height: 48px; border: 0; background: none; color: var(--hv-muc2);
  cursor: pointer; border-bottom: 4px solid transparent; margin-bottom: -2px; }
.tab3 button[aria-selected="true"] { color: var(--hv-muc); border-bottom-color: var(--hv-do); }
.tab3 button:focus-visible { outline-offset: -4px; box-shadow: none; }
.mo-ta p + p { margin-top: 8px; }
/* Nội dung từng thẻ (Tóm tắt, Mẫu hỗ trợ, Hỏi đáp): đọc ngay dưới hàng thẻ, không đóng khung lần nữa */
.o-tab { padding-top: 14px; }
.o-tab .btn { margin-top: 14px; }
#khoi-tab > .o-tab:only-child { border-top: 1px solid var(--hv-vien-dam); }
.dieuhuong { display: flex; justify-content: space-between; gap: 10px; }
.dieuhuong a { font-size: 15px; font-weight: 700; text-decoration: none; min-height: 48px; display: inline-flex; flex-direction: column; justify-content: center; max-width: 48%; }
.dieuhuong a small { font-weight: 500; font-size: 13px; color: var(--hv-muc2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Điện thoại: tên bài trước, bài sau xuống tối đa 2 dòng thay vì cắt còn nửa câu ở 375px (soát D38) */
@supports (-webkit-line-clamp: 2) { .dieuhuong a small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; } }
.dieuhuong .sau { text-align: right; margin-left: auto; align-items: flex-end; }
@media (min-width: 900px) {
  .bv-luoi { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .bv-pc { display: flex; }
  .bv-dt { display: none; }
}

/* ---------- H7 · Bài thực hành ---------- */
.phan { display: flex; gap: 6px; }
.phan i { flex: 1; height: 6px; border-radius: 3px; background: var(--hv-vien); }
.phan i.on { background: var(--hv-do); }
.luu { font-size: 14px; color: var(--hv-muc); font-weight: 700; display: flex; align-items: flex-start; gap: 6px; min-height: 1.5em; }
.luu svg { flex: 0 0 14px; margin-top: 3px; }
.luu.loi { color: var(--hv-do); }
/* Dòng tổng của phần có ô tiền: một dòng sổ (mực đậm phía trên, số mực đỏ), không phải khối tối */
.tong-o { border-top: 2px solid var(--hv-muc); padding: 12px 0 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-top: 16px; font-weight: 600; }
.tong-o b { font-family: var(--hv-tieu-de); font-size: 24px; color: var(--hv-do); font-variant-numeric: tabular-nums; }
.o-tien { position: relative; max-width: 24rem; }
.hv .o-tien .o-nhap { padding-right: 40px; font-variant-numeric: tabular-nums; }
.o-tien::after { content: "đ"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--hv-muc2); font-weight: 700; pointer-events: none; }
.bai-th .cau { padding: 16px 0 4px; }
.bai-th .cau + .cau { border-top: 1px dashed var(--hv-vien); margin-top: 12px; }
.bai-th .cau:first-child { padding-top: 0; }
.cau-hoi { display: block; font-weight: 700; font-size: 16px; line-height: 1.45; margin: 0 0 6px; }
.bai-th .goi-y { font-size: 15px; color: var(--hv-muc2); margin: 0 0 8px; }
.vi-du { font-size: 15px; color: var(--hv-muc2); margin: 0 0 8px; }
.vi-du b { font-family: var(--hv-may); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; color: var(--hv-muc); }
.lua-chon { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--hv-vien-dam);
  border-radius: 4px; margin: 0 0 8px; cursor: pointer; font-size: 16px; line-height: 1.45; background: var(--nen-o); }
.lua-chon input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--hv-muc); }
.lua-chon i { display: block; font-style: normal; font-size: 14px; color: var(--hv-muc2); margin-top: 2px; }
.lua-chon.chon { border-color: var(--hv-muc); box-shadow: inset 0 0 0 1px var(--hv-muc); }
.lua-chon.tat { opacity: .5; cursor: not-allowed; }
.lua-chon:focus-within { outline: 3px solid var(--vong); outline-offset: 1px; }
.thang-dong { margin: 0 0 14px; }
.thang-dong p { margin: 0 0 6px; font-size: 16px; }
.thang-hang { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
/* Thang 1 tới 10 dưới 600px: hai hàng năm nút. Mười nút một hàng chỉ còn 22px mỗi nút ở 320 tới 390px, dưới vùng chạm 48px
   (soát rs-khac, câu mẫu thang điểm của giả lập du_loai_cau; nội dung thật hiện chưa dùng loại câu này). */
@media (max-width: 599px) { .thang-hang { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 3px; } } /* 320px: mỗi nút 48px */
.thang-nut { min-height: 48px; padding: 0; font: 700 15px/1 var(--hv-tieu-de); color: var(--hv-muc); background: var(--nen-o); border: 1.5px solid var(--vien-o); border-radius: 3px; cursor: pointer; }
.thang-nut.chon { background: var(--hv-muc); color: var(--hv-kem); border-color: var(--hv-muc); }
.hang-ds { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; margin: 0 0 8px; }
.hang-ds b { font-family: var(--hv-tieu-de); font-size: 16px; color: var(--hv-muc2); }
.dien-cho { display: grid; gap: 6px; margin: 0 0 10px; font-size: 16px; } /* vế câu cần điền là chữ đề bài: cỡ chữ thân (soát rs-khac) */
.ds-y { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.cau-khoa { border-left: 3px solid var(--hv-do); padding: 4px 0 4px 12px; font-weight: 700; margin-top: 12px; }
.giai-nghia { border-left: 3px solid var(--vang-muc); padding: 8px 12px; background: rgba(var(--vang-muc-rgb), .14); font-size: 15px; margin: 0 0 12px; }
.ghi-chu-phan { font-size: 14px; color: var(--hv-muc2); border-top: 1px dashed var(--hv-vien-dam); padding-top: 12px; margin-top: 14px; }
.ds-nhan-dien { display: grid; margin: 0 0 14px; border-bottom: 1px solid var(--hv-vien); }
.ds-nhan-dien div { border-top: 1px solid var(--hv-vien); padding: 10px 0; }
.ds-nhan-dien i { display: block; color: var(--hv-muc2); font-size: 15px; font-style: normal; }
/* Câu chuyện, tình huống của bài: đoạn đọc, không đóng khung; một vạch vàng mực dẫn mắt bên trái */
.hv-trich { border-left: 3px solid var(--vang-muc); padding: 2px 0 2px 16px; }
.hv-trich p + p { margin-top: 8px; }
.khoi-doc details { border-bottom: 1px solid var(--hv-vien); }
.khoi-doc summary, .tu-dien summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 48px; }
.khoi-doc details > div { padding: 0 0 14px; white-space: pre-line; }
.khoi-bang { overflow-x: auto; margin: 0 0 14px; }
.khoi-bang table { border-collapse: collapse; font-size: 15px; min-width: 100%; }
.khoi-bang th, .khoi-bang td { border-bottom: 1px solid var(--hv-vien); padding: 8px 10px 8px 0; text-align: left; vertical-align: top; }
.tu-dien { margin: 14px 0 0; border-top: 1px solid var(--hv-vien-dam); border-bottom: 1px solid var(--hv-vien-dam); }
.tu-dien ul { list-style: none; margin: 0; padding: 0 0 12px; }
.tu-dien li { padding: 6px 0; border-top: 1px solid var(--hv-vien); font-size: 15px; }
.tu-dien li b { display: block; }
.tong-ket { margin: 12px 0 0; border-top: 2px solid var(--hv-muc); }
.tong-ket > div { border-bottom: 1px dashed var(--hv-vien); padding: 10px 0; }
.tong-ket dt { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 14px; color: var(--hv-muc2); font-weight: 600; }
.tong-ket dd { margin: 4px 0 0; white-space: pre-line; font-size: 16px; }
.tong-ket dd.trong { color: var(--hv-muc2); }
.nut-sua { flex: 0 0 auto; min-height: 48px; padding: 0 12px; font: 600 13px var(--hv-than); color: var(--hv-muc); background: var(--nen-o);
  border: 1.5px solid var(--hv-muc); border-radius: 4px; cursor: pointer; }

/* ---------- H10, H11 · Đơn, hóa đơn ---------- */
/* Đầu biên lai: chữ bên trái, dấu bên phải trong cùng một hàng co giãn. Hẹp quá thì dấu xuống dòng dưới chữ, không đè lên
   mã đơn (bản cũ đặt dấu tuyệt đối ở góc nên đè 4 tới 24px lên dòng mã đơn ở mọi khổ). */
.don-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 16px; }
.don-dau > div { flex: 1 1 200px; min-width: 0; }
.don-dau > .dau { flex: 0 0 auto; margin: 4px 4px 6px 0; }
.don-dau h2 { margin-top: 4px; }
.don-hoan { margin-top: 6px; }
.khai-tk { margin-top: 12px; border-top: 1px dashed var(--hv-vien-dam); padding-top: 12px; }
.khai-tk summary, .yc-hoan summary { cursor: pointer; font-weight: 700; color: var(--hv-do); min-height: 48px; display: flex; align-items: center; }
.yc-hoan { border-top: 1px dashed var(--hv-vien-dam); margin-top: 12px; }
.yc-hoan[open] summary { margin-bottom: 4px; }
.hv-the + .hv-the.lien { margin-top: -6px; }

/* ---------- H13 · Liên hệ ---------- */
.phieu { border-top: 1px dashed var(--hv-vien); padding: 12px 0; }
.phieu:first-of-type { border-top: 0; }
.phieu-dau { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.phieu-dau b { font-family: var(--hv-tieu-de); font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.phieu-nd { font-size: 16px; margin-top: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.tra-loi { margin-top: 10px; border-left: 3px solid var(--hv-muc); padding: 8px 12px; background: rgba(var(--muc-rgb), .05); font-size: 16px;
  white-space: pre-line; overflow-wrap: anywhere; }
.tra-loi small { display: block; font-size: 12px; color: var(--hv-muc2); margin-bottom: 4px; font-weight: 700; }

@media print {
  .hd, .soc, .bn, .chan-trang, .ho-tro, .hang-nut, .lui, .luu, .nut-sua, .bo-qua { display: none !important; }
  body.hv { background: var(--nen-o); }
  .hv-the { box-shadow: none; border-color: var(--hv-vien); background: var(--nen-o); }
}
/* Giảm chuyển động: mọi chuyển động của cổng học tắt, trạng thái cuối hiện ngay (đường đã đi, mốc, thanh tiến độ là sự thật
   nên hiện đủ, không phải bản rỗng). */
@media (prefers-reduced-motion: reduce) {
  .btn, .ch-dau .mui { transition: none; }
  .btn:active { transform: none; }
  /* cùng độ ưu tiên với luật bật chuyển động, nếu không luật bật (nhiều lớp hơn) sẽ thắng */
  .dau.dong-dau, .ve .tien i, .tuyen.ve .ch.xong::after, .tuyen.ve .ch.sau-xong::before, .ve .ch.hien-tai .moc, .ve-mo { animation: none; }
}

/* ---------- Bổ sung theo từng màn ---------- */
.tit-dau { margin-top: 20px; }
.dau-o { padding: 6px 0 14px; }
/* Ba điều của màn chào mừng: danh sách đánh số (thứ tự đọc), không đóng khung; đường mực ngang giữa các điều */
.ba-dieu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--hv-vien-dam); }
.ba-dieu li { display: flex; gap: 14px; font-size: 16px; border-top: 1px solid var(--hv-vien-dam); padding: 14px 0; }
.so-to { font-family: var(--hv-tieu-de); font-size: 26px; font-weight: 700; color: var(--hv-do); line-height: 1; flex: 0 0 20px; }
.cot-nho { gap: 12px; margin-top: 12px; }
.chon-nhip { margin-top: 10px; }
.hv-the .chk + .chuyen, .hv-doan .chk + .chuyen { margin: 4px 0 8px 38px; }
/* 320 tới 399px: ba nút nhịp học không vừa khi thụt 38px (nút "Tự do" bị cắt còn 38px, soát rs-khac) */
@media (max-width: 399px) { .hv-the .chk + .chuyen, .hv-doan .chk + .chuyen { margin-left: 0; } }
.hv-the .chk, .hv-doan .chk { margin-top: 8px; }
.nguoi-mua { margin-top: 12px; }
.nguoi-mua .ghi { margin-top: 8px; }
#nhom-cn, #nhom-dn { margin-top: 14px; }
.han-hd { margin-top: 12px; }
#f-hd .canh, #f-lh .chuyen { margin-top: 14px; }
#f-hd .chk { margin-top: 12px; }
#f-hd .canh[role="alert"] { margin-top: 10px; }
#f-hd .btn, #f-lh .btn { margin-top: 16px; }
#f-hd > .ghi:last-child, #f-lh > .ghi { margin-top: 10px; }
#f-lh .chuyen + .ghi { margin-top: 8px; }
.hv-the > .chuyen, .hv-doan > .chuyen { margin-top: 8px; }
.hv-the > .dau:not(.goc) { margin: 4px 0 12px; }
.dau-o-chu { margin-bottom: 2px; }
.hv-the > .bao-xong, .hv-the > .bao, .hv-doan > .bao-xong, .hv-doan > .bao { margin-top: 10px; }
.khai-tk form, .yc-hoan form { margin-top: 4px; }
.khai-tk .hv-truong:first-child { margin-top: 0; }
.yc-hoan form { padding-bottom: 6px; }
.phieu .lk { margin-top: 4px; }
.dong-do { margin-top: 10px; }
.dong-do .ghi { margin: 0; }
.hv-the > .ghi.lon + .btn, .hv-doan > .ghi.lon + .btn { margin-top: 14px; }
#chan-nut > .btn + .btn { margin-top: 10px; }