/* ============================================================================
 * 📚 KHO CHỮ HÁN — THƯ VIỆN TRI THỨC HÁN TỰ THIÊN NGHĨA
 * Bảng màu & bố cục bám theo HÌNH MINH HOẠ bàn giao 4/9/2026 (bản thiết kế tham chiếu chính thức):
 * nền kem ngà · xanh ô-liu nhận diện · nâu đậm cho chữ · viền be/vàng nhạt · thẻ mềm bo góc,
 * bóng đổ rất nhẹ, không gian thoáng, chữ Hán nổi bật.
 *
 * ⚠️ TUYỆT ĐỐI KHÔNG kéo sang dashboard SaaS xanh dương / neon / gradient công nghệ. Đây là THƯ VIỆN.
 * ⚠️ Trang này CỐ Ý không nạp /style.css của hệ thống: luật chung ở đó có
 *    `button:hover{background:var(--olive-dark)}` với specificity cao, từng làm thẻ chữ bị tô xanh
 *    đậm và màu DÍNH lại trên điện thoại (đã trả giá ở kho-chu-han.js 2/9/2026).
 * ========================================================================== */

:root {
  --kem: #faf5e9;            /* nền trang */
  --kem-sang: #fffdf6;       /* mặt thẻ */
  --kem-sau: #f4ecd8;        /* ô lõm bên trong thẻ */
  --vien: #e8dcc0;
  --vien-nhat: #f0e7d2;
  --oliu: #5f6e33;
  --oliu-dam: #46521f;
  --oliu-nhat: #eef1e1;
  --nau: #3b3220;
  --nau-nhat: #7c6f56;
  --do-chu: #96382a;         /* màu mặt chữ Hán */
  --vang: #c9a24a;
  --vang-nhat: #f8f0d8;
  --bong: 0 1px 2px rgba(84, 68, 32, .05), 0 10px 26px -18px rgba(84, 68, 32, .5);
  --bong-nang: 0 2px 4px rgba(84, 68, 32, .06), 0 18px 40px -22px rgba(84, 68, 32, .55);
  --r-the: 18px;
  --r-trong: 14px;
  --ben: 264px;              /* bề ngang cột trái */
  /* Phông chữ Hán — MINH/TỐNG THỂ, đúng bộ phông của PHIẾU ĐỒ CHỮ (Zhenyin chốt 4/9/2026: "đây là
     phông tôi thấy ưng ý nhất, dùng cho toàn bộ hiển thị của kho chữ Hán"). Nét ngang mảnh, nét dọc
     đậm, có chân — mặt chữ chuẩn sách in, thay cho khải thư LXGW WenKai dùng trước đó.
     ⚠️ "Chu Hiem" phải đứng ĐẦU: nó chỉ khớp mấy chữ hiếm ngoài mặt phẳng cơ bản, bỏ ra là chúng
     thành ô vuông rỗng.
     ⚠️ "Noto Serif TC" (phông web) đứng CUỐI chứ không đứng đầu như ở phiếu đồ chữ: máy Mac/iPhone
     của học viên đã có sẵn Songti TC — đúng mặt chữ Zhenyin nhìn và chọn — nên để phông máy thắng,
     phông web chỉ đỡ cho Android (máy Android không có Songti lẫn SimSun). */
  --khai: "Chu Hiem", "Songti TC", "Songti SC", "STSong", "SimSun", "Noto Serif TC", serif;
  --chu: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0; background: var(--kem); color: var(--nau);
  font-family: var(--chu); font-size: 15px; line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--oliu-dam); }

.han { font-family: var(--khai); color: var(--do-chu); font-weight: 400; }
/* 7/9/2026 — bọc RIÊNG từng cụm chữ Hán trong đoạn văn (câu chiết tự trộn Việt + Hán) bằng font --khai
   thay vì để rơi xuống font hệ thống: font hệ thống KHÔNG có mặt chữ nào ngoài khối thông dụng
   U+4E00–U+9FFF, chữ hiếm hiện ô vuông rỗng. KHÔNG đổi màu (khác .han) — đây là chữ TRONG một câu văn,
   không phải ô mặt-chữ đứng riêng. Dựng bằng U.vanCoChu(), xem giải thích trong kho-app.js. */
.han-nhung { font-family: var(--khai); }

/* ===================== KHUNG TRANG ===================== */
.kh-trang { display: flex; min-height: 100%; }

/* ---- cột trái ---- */
.kh-ben {
  width: var(--ben); flex: 0 0 var(--ben); background: var(--kem);
  border-right: 1px solid var(--vien-nhat);
  padding: 20px 14px 26px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.kh-hieu { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; }
.kh-hieu .bieu { font-size: 1.7rem; line-height: 1; }
.kh-hieu .ten { font-weight: 800; font-size: 1.06rem; letter-spacing: .3px; color: var(--oliu-dam); }
.kh-hieu .duoi { font-size: .78rem; color: var(--nau-nhat); margin-top: 1px; }

.kh-muc {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border: 0; border-radius: var(--r-trong); background: transparent;
  font: inherit; font-weight: 600; color: var(--nau); cursor: pointer; text-align: left;
  min-height: 46px; transition: background .13s ease;
}
.kh-muc .bt { font-size: 1.05rem; width: 22px; text-align: center; flex: 0 0 auto; }

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-muc:hover { background: #f2ecdb; }
}
.kh-muc:active { background: #f2ecdb; }
.kh-muc.on { background: var(--oliu); color: #fff; box-shadow: var(--bong); }
.kh-muc.on .bt { filter: saturate(0) brightness(3); }
.kh-muc .mo { margin-left: auto; font-size: .8rem; opacity: .65; }
.kh-muc-tinh { cursor: default; }
@media (hover: hover) {
  .kh-muc-tinh:hover { background: transparent; }
}
.kh-muc-tinh:active { background: transparent; }
.kh-con { padding-left: 18px; }
.kh-con .kh-muc { font-weight: 500; font-size: .93rem; min-height: 40px; padding: 8px 12px; }
.kh-nhomten {
  font-size: .72rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--nau-nhat); padding: 16px 14px 6px;
}

.kh-dem {
  margin-top: auto; background: var(--vang-nhat); border: 1px solid var(--vien);
  border-radius: var(--r-the); padding: 15px 12px; text-align: center;
}
.kh-dem .nh { font-size: .82rem; color: var(--nau-nhat); font-weight: 600; }
.kh-dem .so { font-size: 2.1rem; font-weight: 800; color: var(--oliu-dam); line-height: 1.2; }
.kh-dem .dv { font-size: .82rem; color: var(--nau-nhat); }

/* ---- cột phải ---- */
.kh-chinh { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.kh-tren {
  display: flex; align-items: center; gap: 14px; padding: 16px 26px;
  border-bottom: 1px solid var(--vien-nhat); background: var(--kem);
  position: sticky; top: 0; z-index: 30;
}
/* ⚠️ PHẢI viết kèm .kh-nut (4/9/2026): quy tắc .kh-nut { display:inline-flex } nằm SAU dòng này,
   cùng độ ưu tiên nên nó thắng — nút ☰ vẫn hiện trên màn hình rộng, mà bấm thì không có gì xảy ra
   (cột trái vốn đã đứng sẵn, lớp kh-mo-ben chỉ có tác dụng dưới 860px). Nút chết đúng nghĩa. */
.kh-nut.kh-motay { display: none; }

.kh-otim { position: relative; flex: 1 1 200px; min-width: 150px; max-width: 640px; }
.kh-otim input {
  width: 100%; font: inherit; font-size: 15px; padding: 14px 46px 14px 20px;
  border-radius: var(--r-the); border: 1.5px solid var(--vien); background: var(--kem-sang);
  color: var(--nau); box-shadow: var(--bong); min-height: 52px;
}
.kh-otim input::placeholder { color: #a1957c; }
.kh-otim input:focus { outline: none; border-color: var(--oliu); box-shadow: 0 0 0 4px rgba(95, 110, 51, .14); }
.kh-otim .kinh {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; color: var(--nau-nhat); border-radius: 50%;
}

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-otim .kinh:hover { background: var(--oliu-nhat); }
}
.kh-otim .kinh:active { background: var(--oliu-nhat); }

.kh-cua { display: flex; gap: 9px; flex-shrink: 0; }
.kh-nut {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px;
  padding: 12px 18px; border-radius: var(--r-the); border: 1.5px solid var(--vien);
  background: var(--kem-sang); color: var(--nau); font: inherit; font-weight: 700;
  cursor: pointer; box-shadow: var(--bong); white-space: nowrap;
}
.kh-nut:hover { border-color: var(--oliu); color: var(--oliu-dam); }
.kh-nut.chinh { background: var(--oliu); border-color: var(--oliu); color: #fff; }

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-nut.chinh:hover { background: var(--oliu-dam); color: #fff; }
}
.kh-nut.chinh:active { background: var(--oliu-dam); color: #fff; }
.kh-nut.nho { min-height: 42px; padding: 9px 14px; font-size: .9rem; border-radius: var(--r-trong); }

/* 🏠 Đường ra khỏi kho, về Cổng học viên (4/9/2026). Là thẻ <a> thật để bấm-giữ mở tab mới được và
   để máy đọc màn hình gọi đúng tên "liên kết"; phần còn lại mượn nguyên dáng .kh-nut. Tô nền mứt
   vàng nhạt cho khác hẳn ba nút cửa vào bên phải — đây là đường RA, không phải một mục của kho. */
.kh-ve-cong {
  text-decoration: none; flex: 0 0 auto;
  border-color: #d9c89a; background: var(--vang-nhat); color: #7a5c14;
}
.kh-ve-cong:hover { border-color: var(--vang); color: #6b4f0e; }
.kh-ve-cong:active { transform: scale(.97); }

.kh-toi {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 0; padding: 0;
  background: var(--oliu); color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 0 0 2px var(--kem-sang), 0 0 0 3.5px var(--oliu);
}
.kh-toi:active { transform: scale(.94); }
/* Ảnh đại diện thật — phủ kín ô tròn, cắt giữa (ảnh 3×4 vẫn ra khuôn mặt). */
.kh-toi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-toi img[hidden] { display: none; }

.kh-than { padding: 20px 26px 60px; max-width: 1400px; width: 100%; }

.kh-duong {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .9rem; color: var(--nau-nhat); margin-bottom: 16px;
}
.kh-duong button { border: 0; background: transparent; font: inherit; color: var(--nau-nhat); cursor: pointer; padding: 2px 0; }
.kh-duong button:hover { color: var(--oliu-dam); text-decoration: underline; }
.kh-duong .nay { color: var(--nau); font-weight: 700; }

/* ===================== THẺ ===================== */
.the {
  background: var(--kem-sang); border: 1px solid var(--vien); border-radius: var(--r-the);
  box-shadow: var(--bong); padding: 18px 20px;
}
.the-dau {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px; flex-wrap: wrap;
  font-size: .78rem; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
  color: var(--oliu-dam);
}
.the-dau .them { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: .84rem; font-weight: 700; }
.the-dau .them button { border: 0; background: transparent; font: inherit; color: var(--oliu); cursor: pointer; }
.the-dau .them button:hover { text-decoration: underline; }

.kh-luoi { display: grid; gap: 16px; }
.kh-luoi.hai { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); }
.kh-luoi.bon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kh-luoi.nam { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kh-luoi.ba { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kh-luoi.tn { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.kh-luoi + .kh-luoi { margin-top: 16px; }

/* ---- thẻ NHANH của một chữ (phần A bản bàn giao) ----
   ⚠️ 24/9/2026 — vá lỗi Android THẬT (Zhenyin báo, xem docs/bai-hoc-cot-loi-giao-dien.md): trên một số
   trình duyệt/webview Android, `@media (max-width:860px)` bên dưới không kịp bắt lúc bề ngang thật của
   `.kh-nhanh` bị hẹp hơn viewport báo cáo (cỡ chữ hệ thống phóng to, hoặc webview nhúng — vd mở link
   qua trình duyệt trong app Zalo/Facebook — tính sai bề ngang) → `.kh-matchu` giữ nguyên 172px, `.kh-tin`
   (flex:1; min-width:0 CŨ) bị bóp xuống gần 0, mỗi TỪ rớt xuống một dòng suốt chiều dài trang. Thêm
   `flex-wrap:wrap` + sàn `min-width` cho `.kh-tin` làm lưới CHÍNH — flexbox tự xuống dòng theo bề ngang
   THẬT tại thời điểm vẽ, không phụ thuộc một ngưỡng viewport cố định nào, nên vẫn an toàn dù
   `@media`/viewport có báo sai. */
.kh-nhanh { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.kh-matchu {
  flex: 0 0 auto; width: 172px; max-width: 100%; border-right: 1px solid var(--vien-nhat);
  padding-right: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
}
.kh-matchu .lon { font-size: 6.2rem; line-height: 1.05; font-family: var(--khai); color: var(--do-chu); }
.kh-loa {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--vien);
  background: var(--kem-sang); cursor: pointer; font-size: 1rem; color: var(--nau-nhat);
  display: flex; align-items: center; justify-content: center;
}
.kh-loa:hover { border-color: var(--oliu); color: var(--oliu-dam); }
.kh-matchu .kh-loa { position: absolute; right: 8px; bottom: 0; }
.kh-tin { flex: 1 1 220px; min-width: 220px; display: flex; flex-direction: column; }
.kh-tin .py { font-size: 2rem; font-weight: 700; color: var(--nau); line-height: 1.2; display: flex; align-items: center; gap: 10px; }
.kh-tin .hv { font-size: 1.25rem; font-weight: 700; color: var(--do-chu); margin-top: 2px; }
.kh-tin .ng { color: var(--nau); margin-top: 8px; line-height: 1.6; }
.kh-vach { border-top: 1px solid var(--vien-nhat); margin: 14px 0 12px; }
.kh-chip-nho { display: flex; gap: 8px; flex-wrap: wrap; }
.kh-chip-nho span {
  background: var(--kem-sau); border: 1px solid var(--vien-nhat); border-radius: 999px;
  padding: 5px 13px; font-size: .84rem; color: var(--nau-nhat); font-weight: 600;
}

/* ---- 🏛️ CHIẾT TỰ: linh hồn của sản phẩm, phải nổi nhất trong hồ sơ ---- */
.the.triet {
  background: linear-gradient(180deg, #fffdf5, #fbf6e8);
  border-color: var(--vang); box-shadow: var(--bong-nang);
}
.the.triet .the-dau { color: var(--oliu-dam); font-size: .82rem; }
/* align-items: start — mặc định "stretch" của grid kéo .kh-hinhthanh cao bằng .kh-dgiai (cột diễn
   giải dài hơn), rồi align-items:stretch của .kh-httc-dai bên trong lại kéo từng thẻ hành trình chữ
   thành dải cao gầy dị dạng. Chỉ lộ trên màn rộng — điện thoại xếp 1 cột (dòng 1142) nên thoát nạn. */
.kh-triet { display: grid; align-items: start; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.5fr); gap: 20px; }
.kh-hinhthanh {
  background: var(--kem-sau); border: 1px solid var(--vien-nhat); border-radius: var(--r-trong);
  padding: 14px; text-align: center;
}
.kh-hinhthanh .nh { font-size: .74rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--nau-nhat); margin-bottom: 10px; }
.kh-ghep { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.kh-manh { min-width: 62px; }
.kh-manh .m { font-size: 2.1rem; font-family: var(--khai); color: var(--do-chu); line-height: 1.15; }
.kh-manh .v { font-size: .74rem; color: var(--nau-nhat); margin-top: 3px; line-height: 1.35; }
.kh-cong { font-size: 1.5rem; color: var(--nau-nhat); padding-top: 6px; }
.kh-muiten { font-size: 1.1rem; color: var(--nau-nhat); margin: 4px 0 2px; }
.kh-ra { font-size: 2.4rem; font-family: var(--khai); color: var(--do-chu); }
.kh-dgiai .nh { font-size: .74rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--nau-nhat); margin-bottom: 8px; }
.kh-dgiai p { margin: 0 0 8px; line-height: 1.75; }
.kh-dgiai .han { font-size: 1.1em; }
/* 🖼️ Hình ảnh gốc lấp khoảng trống cột phải (17/9/2026) — chỉ hiện khi chữ đã có tranh cảnh. */
.kh-anh-canh { margin-top: 14px; border-radius: var(--r-trong); overflow: hidden; border: 1px solid var(--vien-nhat); background: var(--kem-sau); }
.kh-anh-canh img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; }

/* ---- 🏺 HÀNH TRÌNH CHỮ: Giáp cốt → Kim văn → Tiểu triện → Khải thư (17/9/2026) ----
   Dữ liệu THẬT trích từ hanziyuan.net (docs/kho-chu-han-hanh-trinh-chu.md); nét vẽ gốc luôn đen,
   màu nét từng ô được đổi ngay trong SVG (public/kho/kho-ho-so.js `MAU_NET_HTC`) trước khi nhúng. */
.kh-httc-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.kh-httc-dau .nh { margin-bottom: 0; }
.kh-httc-nguon { font-size: .72rem; color: var(--nau-nhat); text-decoration: none; opacity: .85; }
@media (hover: hover) { .kh-httc-nguon:hover { text-decoration: underline; } }
/* Khung thu hẹp lại + xếp DỌC (17/9/2026, Zhenyin chốt sau khi xem demo): mỗi mốc một khối
   VUÔNG bo tròn các cạnh, nối nhau bằng mũi tên ↓ — bỏ hẳn bản cũ xếp hàng ngang (chữ nhãn dễ vỡ
   dòng khi khung hẹp) và bỏ luôn khuôn "giọt lệ" hữu cơ riêng cho ô Giáp cốt, để cả 4 khối cùng
   một kiểu bo góc thống nhất. Màu từng mốc GIỮ NGUYÊN như bản cũ — Zhenyin đã xem 2 phương án đổi
   màu và chốt không đổi. */
.kh-httc-dai { display: flex; flex-direction: column; align-items: center; width: 152px; margin: 0 auto; gap: 0; }
.kh-httc-mt { font-size: 18px; color: var(--vang); text-align: center; padding: 2px 0; line-height: 1; }
.kh-httc-o {
  position: relative; width: 152px; height: 152px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 26px; text-align: center;
}
.kh-httc-o .stt {
  position: absolute; top: 8px; left: 8px; width: 19px; height: 19px; border-radius: 50%;
  background: rgba(255,255,255,.72); color: var(--nau); font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.kh-httc-o .net { width: 58px; height: 58px; object-fit: contain; display: block; margin: 0 auto; }
.kh-httc-o .han { font-size: 2.3rem; font-family: var(--khai); line-height: 1; color: var(--do-chu); }
.kh-httc-o .nhan { font-size: .72rem; font-weight: 700; color: var(--nau); margin-top: 2px; line-height: 1.3; }
.kh-httc-J, .kh-httc-B, .kh-httc-S, .kh-httc-khai { border-radius: 26px; }
.kh-httc-J { background: radial-gradient(ellipse at 40% 35%, #EAD6AA 0%, #D3B27A 62%, #B58B53 100%); }
.kh-httc-B { background: radial-gradient(circle at 40% 32%, #A7B79B 0%, #748E6E 62%, #516D57 100%); }
.kh-httc-S { background: repeating-linear-gradient(90deg, #E7CB8F 0 20px, #C8A462 20px 22px); }
.kh-httc-khai { background: #fff; border: 1px solid var(--vien-nhat); }
.kh-httc-J .nhan, .kh-httc-B .nhan, .kh-httc-S .nhan { color: rgba(0,0,0,.68); }

/* ---- 🖼️ Hộp xem tranh chiết tự (canvas 1600×900) ----
   Khuôn hộp phủ màn hình bắt buộc: flex column + trần chiều cao + vùng giữa cuộn riêng (bài học cốt
   lõi giao diện) — nội dung tranh cố định 16:9 nên hiếm khi tràn, nhưng vẫn giữ khuôn để an toàn. */
.kh-httc-hop {
  position: fixed; inset: 0; z-index: 400; background: rgba(40, 32, 14, .62);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.kh-httc-dong {
  background: var(--kem-sang); border-radius: var(--r-ngoai); max-width: 960px; width: 100%;
  max-height: 100%; display: flex; flex-direction: column; box-shadow: var(--bong-nang);
}
.kh-httc-hdau {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-weight: 800; color: var(--nau); border-bottom: 1px solid var(--vien-nhat);
}
.kh-httc-dong-x {
  border: none; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer;
  color: var(--nau-nhat); padding: 4px 8px;
}
.kh-httc-hgiua { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; justify-content: center; }
.kh-httc-canvas { width: 100%; height: auto; max-width: 900px; border-radius: 10px; background: #F3EAD7; }
.kh-httc-hchan {
  flex: none; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vien-nhat);
}

/* ---- 🧩 bản đồ cấu tạo ---- */
.kh-bando { text-align: center; padding: 4px 0 2px; }
.kh-bando .dinh { font-size: 2.6rem; font-family: var(--khai); color: var(--do-chu); line-height: 1.15; }
.kh-nhanh-ve { height: 26px; position: relative; margin: 2px auto 0; width: 74%; }
.kh-nhanh-ve::before, .kh-nhanh-ve::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 100%;
  border-top: 1px solid var(--vien); }
.kh-nhanh-ve::before { left: 0; border-left: 1px solid var(--vien); border-radius: 8px 0 0 0; }
.kh-nhanh-ve::after { right: 0; border-right: 1px solid var(--vien); border-radius: 0 8px 0 0; }
.kh-chan { display: flex; justify-content: center; gap: 30px; }
.kh-chan .o { flex: 0 0 auto; }
.kh-chan button {
  border: 0; background: transparent; cursor: pointer; font: inherit; padding: 2px 6px; border-radius: 10px;
}

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-chan button:hover { background: var(--oliu-nhat); }
}
.kh-chan button:active { background: var(--oliu-nhat); }
.kh-chan .m { font-size: 1.9rem; font-family: var(--khai); color: var(--do-chu); line-height: 1.2; }
.kh-chan .t { font-size: .86rem; font-weight: 700; color: var(--nau); }
.kh-chan .v { font-size: .76rem; color: var(--nau-nhat); }
.kh-tong {
  margin-top: 12px; background: var(--oliu-nhat); border-radius: var(--r-trong);
  padding: 10px 12px; font-size: .9rem; color: var(--oliu-dam); text-align: center; line-height: 1.6;
}

/* ---- danh sách chữ / từ trong thẻ ---- */
.kh-dong {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--vien-nhat); border-radius: var(--r-trong);
  background: var(--kem-sang); cursor: pointer; font: inherit; color: var(--nau);
  min-height: 46px;
}
.kh-dong + .kh-dong { margin-top: 7px; }

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-dong:hover { border-color: var(--oliu); background: #fff; }
}
.kh-dong:active { border-color: var(--oliu); background: #fff; }
.kh-dong .m { font-size: 1.5rem; font-family: var(--khai); color: var(--do-chu); flex: 0 0 auto; line-height: 1.15; }
.kh-dong .p { font-size: .84rem; color: var(--nau-nhat); flex: 0 0 auto; min-width: 54px; }
/* Nghĩa cắt còn 2 dòng: bốn thẻ họ hàng nằm cạnh nhau nên cột nghĩa rất hẹp — để chảy tự do thì
   "rõ ràng, sáng tỏ, rành mạch" vỡ thành sáu dòng chữ vụn, đúng cái đã chê ở màn tra cũ. */
.kh-dong .n {
  font-size: .88rem; color: var(--nau); flex: 1; min-width: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kh-dong .he { flex: 0 0 auto; font-size: .68rem; font-weight: 800; color: var(--oliu-dam); background: var(--oliu-nhat); border-radius: 999px; padding: 2px 8px; }

/* Ô "Từ ghép"/"Họ ý" trong lưới 4 cột của hồ sơ chữ (`kh-luoi bon`): cột hẹp không đủ chỗ cho
   mặt chữ + pinyin + nhãn tròn (".he") trên một dòng — nhãn tràn quá cạnh phải thẻ (đo thật ở chữ
   好: badge "N lượt" tràn 65px) và bị thẻ KẾ BÊN vẽ đè lên, trông như chữ bị cắt. Vấn đề là BỀ
   NGANG CỘT chứ không phải bề ngang màn hình, nên dùng container query thay vì media query — áp
   đúng cách xuống dòng đã kiểm chứng cho điện thoại (§ dưới, max-width: 620px) bất kể viewport
   rộng hay hẹp. `.the` xuất hiện ở nhiều chỗ khác vẫn đủ rộng nên quy tắc dưới không đụng gì tới. */
.the { container-type: inline-size; }
@container (max-width: 300px) {
  .kh-dong { flex-wrap: wrap; row-gap: 3px; align-items: baseline; }
  .kh-dong .m { flex: 0 0 auto; }
  .kh-dong .p { flex: 0 0 auto; min-width: 0; }
  .kh-dong .n {
    flex: 1 0 100%;
    -webkit-line-clamp: initial; display: block; overflow: visible;
  }
  .kh-dong .he { order: 3; }
}

/* lưới ô chữ vuông — dùng cho Theo vần · Chủ đề · Xem toàn bộ họ */
.kh-o-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.kh-o {
  border: 1px solid var(--vien-nhat); border-radius: var(--r-trong); background: var(--kem-sang);
  padding: 11px 8px; cursor: pointer; font: inherit; text-align: center; min-height: 92px;
}
.kh-o:hover { border-color: var(--oliu); box-shadow: var(--bong); }
.kh-o .m { font-size: 2rem; font-family: var(--khai); color: var(--do-chu); line-height: 1.2; }
.kh-o .h { font-size: .84rem; font-weight: 700; color: var(--nau); }
.kh-o .p { font-size: .78rem; color: var(--nau-nhat); }

/* ===================== 📖 DẤU HIỆU TẦNG (Bảo Thư Các, §7 + §10) =====================
   14/9/2026: Kho chữ Hán chỉ còn chế độ Bảo Thư Các, `body.kh-mode-baothu` luôn có mặt —
   không xoá lớp này khỏi JS vì code cũ (kho-app.js/kho-ho-so.js/kho-kham-pha.js) vẫn kiểm
   `XH.cheDo() === "baothu"`, giữ luôn phần scope selector để khỏi phải sửa hai chỗ. */
body.kh-mode-baothu .kh-o[data-tang="1"] { border: 2px solid var(--bt-son); }
body.kh-mode-baothu .kh-o[data-tang="1"] .m { font-size: 2.3rem; }
body.kh-mode-baothu .kh-o[data-tang="1"]::after { content: "★★★"; position: absolute; top: 6px; right: 8px; font-size: .55rem; color: var(--bt-son); }
body.kh-mode-baothu .kh-o[data-tang="2"] { border-left: 4px solid var(--bt-oliu-cho); }
body.kh-mode-baothu .kh-o[data-tang="3"] .tanSuat { background: #d8cdb2; }
body.kh-mode-baothu .kh-o[data-tang="4"] { min-height: 74px; padding: 8px 6px; }
body.kh-mode-baothu .kh-o[data-tang="4"] .m { font-size: 1.5rem; }
body.kh-mode-baothu .kh-o { position: relative; }
body.kh-mode-baothu .kh-o .sl { font-size: .68rem; color: var(--nau-nhat); margin-top: 3px; }
body.kh-mode-baothu .kh-o .lq6 { display: flex; gap: 2px; justify-content: center; margin-top: 4px; }
body.kh-mode-baothu .kh-o .lq6 i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--vien); display: block; transform: rotate(45deg); }
body.kh-mode-baothu .kh-o .lq6 i.xong { background: var(--bt-son); }
body.kh-mode-baothu .kh-o.vienMan { border-color: var(--bt-kim) !important; }
body.kh-mode-baothu .kh-o.vienMan::before { content: "圓"; position: absolute; top: 5px; left: 7px; font-family: var(--khai); font-size: .7rem; color: var(--bt-kim); }

.kh-daiTang { margin-bottom: 18px; }
.kh-daiTang .nhan { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.kh-daiTang .nhan .sao { font-family: var(--khai); font-size: .85rem; color: var(--bt-son); letter-spacing: 1px; }
.kh-daiTang .nhan .ten { font-weight: 800; }
.kh-daiTang .nhan .cn { font-family: var(--khai); color: var(--nau-nhat); font-size: .8rem; }
.kh-daiTang .nhan .dem { color: var(--nau-nhat); font-size: .82rem; }
.kh-daiTang .loi { font-size: .8rem; color: var(--nau-nhat); margin: 2px 0 10px; }
.kh-daiTang hr { border: 0; border-top: 1px solid var(--vien-nhat); margin: 0 0 10px; }
.kh-daiTang.tra-hidden .kh-o-luoi { display: none; }
.kh-daiTang .an-hien { background: none; border: 0; color: var(--oliu-dam); cursor: pointer; font: inherit; font-size: .84rem; margin-bottom: 8px; padding: 0; }

/* ---- 📖 Bảo Thư Chi Lộ (§6) ---- */
.kh-btcl-canh {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--vien);
  aspect-ratio: 3 / 1; background-image: image-set(url("/anh/bao-thu-chi-lo/bao-thu-chi-lo-nen.webp") 1x);
  background-size: cover; background-position: center;
}
.kh-btcl-canh::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 247, 237, .34), rgba(251, 247, 237, .06) 42%, rgba(251, 247, 237, .30));
}
.kh-btcl-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
@media (max-width: 560px) { .kh-btcl-canh { aspect-ratio: 2 / 1; } }
.kh-btcl-dangdi { border: 2px solid var(--bt-son, #a8452f) !important; position: relative; }
.kh-btcl-tag {
  position: absolute; top: 11px; right: 12px; font-size: 10px; background: var(--bt-son, #a8452f);
  color: #fff; border-radius: 999px; padding: 3px 9px;
}
/* Thẻ tầng bấm được (13/9/2026) — reset dáng <button>, giữ nguyên hình chữ nhật của .the cũ. */
button.kh-btcl-oTang {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  position: relative;
}
@media (hover: hover) { button.kh-btcl-oTang:hover { filter: brightness(.98); } }
button.kh-btcl-oTang:active { transform: scale(.995); }
button.kh-btcl-oTang.kh-btcl-dangXem { border-color: var(--bt-son, #a8452f); box-shadow: 0 0 0 2px rgba(168, 69, 47, .18); }
.kh-btcl-xemChu {
  margin-top: 10px; font-size: .78rem; font-weight: 700; color: var(--bt-son, #a8452f); text-align: center;
}
.kh-o.kh-o-xong { border-color: #3d7a2e; }
.kh-o.kh-o-xong .m { color: #3d7a2e; }

/* ---- 🧱 ô bộ thủ (214) — cùng khuôn .kh-o, thêm số bộ · nghĩa · số chữ trong kho ---- */
.kh-o.bo { position: relative; min-height: 148px; padding-top: 16px; }
.kh-o.bo .so { position: absolute; left: 9px; top: 6px; font-size: .68rem; font-weight: 700; color: var(--nau-nhat); }
.kh-o.bo .m { font-size: 2.5rem; }
.kh-o.bo .n { font-size: .74rem; color: var(--nau-nhat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.kh-o.bo .dem {
  margin-top: 6px; display: inline-block; background: var(--oliu-nhat); color: var(--oliu-dam);
  border-radius: 999px; padding: 2px 9px; font-size: .74rem; font-weight: 800;
}
.kh-o.bo.mo { opacity: .55; background: var(--kem-sau); }
.kh-o.bo.mo .dem { background: var(--vien-nhat); color: var(--nau-nhat); }
.the-dau .them .kh-nut-in-bo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--oliu); color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none;
  box-shadow: 0 2px 0 var(--oliu-dam), 0 8px 18px -10px rgba(70, 82, 31, .7); transition: transform .12s ease;
}
.the-dau .them .kh-nut-in-bo:active { transform: scale(.96); }
@media (hover: hover) { .the-dau .them .kh-nut-in-bo:hover { text-decoration: none; filter: brightness(1.08); } }
.kh-nhom-net + .kh-nhom-net { margin-top: 18px; }
.kh-nhom-net .nhan { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--oliu-dam); margin-bottom: 8px; }
.kh-nhom-net .nhan .so {
  display: inline-flex; width: 34px; height: 34px; border-radius: 10px; background: var(--oliu-nhat);
  align-items: center; justify-content: center; font-size: 1.05rem;
}
.kh-nhom-net .nhan .dem { color: var(--nau-nhat); font-weight: 500; font-size: .84rem; }
.kh-chip-nho span.on { background: var(--oliu-nhat); border-color: var(--oliu-nhat); color: var(--oliu-dam); font-weight: 800; }
/* dòng "Bộ thủ" trong thẻ nhanh của hồ sơ chữ — bấm là sang trang cả ngăn */
.kh-hang-bo {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 10px 14px; min-height: 56px;
  background: var(--vang-nhat); border: 1px solid var(--vien); border-radius: var(--r-trong);
  cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.kh-hang-bo .m { font-size: 1.9rem; font-family: var(--khai); color: var(--do-chu); line-height: 1; flex: 0 0 auto; }
.kh-hang-bo .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kh-hang-bo .t b { font-size: .92rem; }
.kh-hang-bo .t span { font-size: .8rem; color: var(--nau-nhat); }
.kh-hang-bo .mui { flex: 0 0 auto; font-size: 1.2rem; }
@media (hover: hover) { .kh-hang-bo:hover { border-color: var(--oliu); } }
.kh-hang-bo:active { transform: scale(.985); }

/* 🔑 Biến thể kèm NÚT thật (thẻ thứ hạng + "Mở Lục Quyết" trong hồ sơ chữ, kho-ho-so.js hangXepHang())
   — khác `hangBo()` chỉ có ".mui" (một icon tĩnh, không tranh chỗ). `.kh-nut` có `white-space:nowrap`
   nên KHÔNG BAO GIỜ co lại được: nhét thẳng vào hàng ngang với `.t` (flex:1) trên thẻ hẹp (~380px)
   thì nút chiếm hết chỗ, đẩy `.t` co về gần 0 — mỗi TỪ trong tên tầng/số lượt rớt xuống một dòng
   riêng (đã đo thật 19/9/2026). Cho nút xuống HẲN dòng dưới bằng flex-basis 100% thay vì cố chen
   chung một hàng. */
.kh-hang-bo.kh-hang-nut { flex-wrap: wrap; }
.kh-hang-bo.kh-hang-nut .kh-nut { flex: 1 1 100%; justify-content: center; margin-top: 8px; }
/* Lưới an toàn cho MỌI .kh-hang-bo (3/10/2026): cột chữ `.t` không được co dưới 170px — mặt chữ `.m`
   dài quá thì `.t` xuống hàng dưới thay vì bị bóp còn mỗi dòng một chữ (memory
   kho-chu-han-flex-row-android-tach-dong: không trông vào @media). */
.kh-hang-bo { flex-wrap: wrap; }
.kh-hang-bo .t { flex: 1 1 170px; min-width: 170px; }

/* 📜 Thẻ "Thành ngữ chứa chữ này" (3/10/2026, Zhenyin duyệt demo DEMO-kho-thanh-ngu-the.html, phương án A).
   Ca thật trên iPhone: 葉公好龍（叶公好龙）đứng cùng hàng chiếm gần hết thẻ, nghĩa bị bóp một chữ/dòng.
   Nay: giản thể XUỐNG DÒNG nhỏ dưới mặt chữ (`U.chuHan(tu, "duoi")`), nghĩa cắt còn 3 dòng, cột chữ có
   sàn 150px (đo trên hồ sơ chữ 375px: mặt chữ 1.6rem ≈ 100px + 150px vừa một hàng) + flex-wrap (thẻ quá hẹp thì nghĩa xuống hàng), lưới tự xếp 2 thẻ/hàng khi đủ rộng. */
.kh-tn-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 12px; }
.kh-tn-ds > .kh-mo { grid-column: 1 / -1; }
.kh-tn {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  width: 100%; margin-top: 10px; padding: 12px 14px; min-height: 56px;
  background: var(--vang-nhat); border: 1px solid var(--vien); border-radius: var(--r-trong);
  cursor: pointer; font: inherit; color: inherit; text-align: left;
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1);
}
.kh-tn .m { flex: 0 0 auto; max-width: 100%; font-family: var(--khai); color: var(--do-chu); font-size: 1.6rem; line-height: 1.1; text-align: center; white-space: nowrap; }
.kh-tn .m .kh-gian-duoi { margin-top: 3px; }
.kh-tn .t { flex: 1 1 150px; min-width: 150px; display: flex; flex-direction: column; gap: 3px; padding-right: 22px; }
.kh-tn .t b { font-size: .95rem; }
.kh-tn .t span { font-size: .84rem; color: var(--nau-nhat); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kh-tn .mui { position: absolute; top: 10px; right: 10px; font-size: 1.05rem; }
@media (hover: hover) { .kh-tn:hover { border-color: var(--oliu); } }
.kh-tn:active { transform: scale(.985); }

/* ---- chip ---- */
.kh-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.kh-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--vien);
  background: var(--kem-sang); font: inherit; font-weight: 600; color: var(--nau); cursor: pointer;
}
.kh-chip:hover { border-color: var(--oliu); color: var(--oliu-dam); }
.kh-chip.on { background: var(--oliu); border-color: var(--oliu); color: #fff; }
.kh-chip .dem { font-size: .8rem; color: var(--nau-nhat); font-weight: 700; }
.kh-chip.on .dem { color: #e7ecd6; }

/* ---- 🧬🌿 Gốc âm / Bộ chỉ ý đông chữ nhất — LƯỚI THẺ hai cột (9/10/2026, theo mockup Zhenyin) ----
   Khung lớn kem ngà viền vàng cổ · đầu thẻ chữ trái + tranh núi non phải · lưới thẻ 2 cột ⇄ 1 cột
   theo bề ngang THẬT của khung (@container — `.the` đã là container), không theo bề ngang máy. */
.the.gocam {
  position: relative; overflow: hidden; padding: 26px 26px 24px;
  background: linear-gradient(180deg, #fffdf5, #fbf6e8); border-color: var(--vang); box-shadow: var(--bong-nang);
}
.kh-hodau {
  position: relative; display: flex; align-items: center; min-height: 216px; padding: 0 0 22px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(201, 162, 74, .38);
}
.kh-hodau .chu { position: relative; z-index: 1; max-width: min(640px, 56%); }
.kh-hodau .tieu {
  display: flex; align-items: center; gap: 12px; margin: 2px 0 10px;
  font-family: "Noto Serif", "Times New Roman", Georgia, serif; font-size: 1.7rem; font-weight: 700;
  letter-spacing: .6px; line-height: 1.2; text-transform: uppercase; color: var(--oliu-dam);
}
.kh-hodau .tieu .bt { font-size: 1.5rem; line-height: 1; }
.kh-hodau .kh-mo { margin: 0; font-size: .98rem; line-height: 1.65; }
/* Tranh thuỷ mặc đầu thẻ (hoa-tiet-nui-non-v2.webp, Zhenyin vẽ 9/10/2026 — nền kem đã tách thành
   trong suốt nên hoà vào cả nền gradient của thẻ). Khung ảnh phủ kín chiều cao đầu thẻ, ảnh
   `object-fit: cover` lấy khúc giữa (đỉnh núi + đình), mép dưới mờ dần vào đường kẻ. */
.the.gocam .hoa-tiet-khoi { position: absolute; top: -26px; right: -26px; bottom: 0; width: 46%; pointer-events: none; user-select: none; }
.the.gocam .hoa-tiet {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 7%;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.the.gocam .an-tin {
  position: absolute; top: 34px; left: 16%; display: flex; gap: 4px;
  font-family: var(--khai); font-size: .84rem; font-weight: 700; color: #8f3f2c; letter-spacing: 1px; opacity: .85;
}
.the.gocam .an-tin span { writing-mode: vertical-rl; line-height: 1.3; }

.kh-holuoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.kh-hothe {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0;
  padding: 16px 20px 16px 16px; border: 1px solid var(--vien); border-radius: 16px;
  background: var(--kem-sang); box-shadow: 0 1px 2px rgba(84, 68, 32, .05), 0 8px 20px -16px rgba(84, 68, 32, .45);
  font: inherit; color: var(--nau); text-align: left; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Núi xa mờ góc dưới-trái của từng thẻ — dùng lại đúng tệp hoạ tiết của đầu thẻ, không thêm ảnh mới. */
.kh-hothe::before {
  content: ""; position: absolute; left: -6px; bottom: -14px; width: 120px; height: 64px; pointer-events: none;
  background: url("/kho/img/hoa-tiet-nui-non.png") no-repeat left bottom / 120px auto; opacity: .32;
}
.kh-hothe > * { position: relative; }
@media (hover: hover) {
  .kh-hothe:hover { border-color: var(--vang); box-shadow: 0 2px 4px rgba(84, 68, 32, .06), 0 14px 28px -18px rgba(84, 68, 32, .55); transform: translateY(-1px); }
  .kh-hothe:hover .fill { filter: brightness(1.08); }
}
.kh-hothe:active { transform: scale(.985); }
.kh-hothe:focus-visible { outline: 3px solid var(--oliu); outline-offset: 2px; }
.kh-hothe.on { border-color: var(--oliu); background: var(--oliu-nhat); }
.kh-hothe .stt {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--vang-nhat);
  border: 1px solid var(--vien); display: flex; align-items: center; justify-content: center;
  font-size: .86rem; font-weight: 800; color: var(--nau-nhat); font-variant-numeric: tabular-nums;
}
.kh-hothe .han {
  flex: 0 0 auto; width: 88px; height: 88px; border-radius: 14px; background: var(--vang-nhat);
  border: 1px solid var(--vien); box-shadow: inset 0 0 0 4px var(--vang-nhat), inset 0 0 0 5px rgba(201, 162, 74, .35);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--khai); font-size: 3.1rem; color: var(--do-chu); line-height: 1;
}
.kh-hothe .tin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.kh-hothe .ten { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.kh-hothe .ten .hv {
  font-family: "Noto Serif", "Times New Roman", Georgia, serif; font-size: 1.4rem; font-weight: 700;
  color: var(--nau); line-height: 1.2; overflow-wrap: anywhere;
}
.kh-hothe.on .ten .hv { color: var(--oliu-dam); }
.kh-hothe .ten .py { font-size: .98rem; color: var(--nau-nhat); }
.kh-hothe .duoi { display: flex; align-items: center; gap: 14px; }
.kh-hothe .track {
  flex: 1 1 auto; min-width: 40px; height: 10px; border-radius: 999px; background: var(--kem-sau); overflow: hidden; display: block;
}
.kh-hothe .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--oliu), #7f9447); }
.kh-hothe .n { flex: 0 0 auto; font-size: .84rem; font-weight: 600; color: var(--nau-nhat); white-space: nowrap; }
.kh-hothe .n::before { content: "📚"; margin-right: 5px; font-size: .82rem; }
.kh-hothe .n b { font-size: 1rem; color: var(--nau); }

/* Khung hẹp lại (máy tính bảng dọc, hoặc cột trái đang mở chiếm chỗ) — thu nhỏ ô chữ trước khi về một cột. */
@container (max-width: 860px) {
  .kh-hothe { gap: 12px; padding: 14px 16px 14px 12px; }
  .kh-hothe .stt { width: 32px; height: 32px; font-size: .78rem; }
  .kh-hothe .han { width: 70px; height: 70px; font-size: 2.5rem; }
  .kh-hothe .ten .hv { font-size: 1.22rem; }
  .the.gocam .hoa-tiet-khoi { width: 40%; }
  .kh-hodau .chu { max-width: 62%; }
}
@container (max-width: 620px) { .kh-holuoi { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (max-width: 640px) {
  .the.gocam { padding: 18px 14px 16px; }
  .the.gocam .hoa-tiet-khoi { display: none; }
  .kh-hodau { min-height: 0; padding-bottom: 16px; margin-bottom: 16px; }
  .kh-hodau .chu { max-width: none; }
  .kh-hodau .tieu { font-size: 1.3rem; gap: 9px; }
  .kh-hodau .kh-mo { font-size: .92rem; }
}
@media (max-width: 400px) {
  .kh-hothe { gap: 10px; padding: 12px 12px 12px 10px; }
  .kh-hothe .stt { width: 28px; height: 28px; border-radius: 8px; font-size: .72rem; }
  .kh-hothe .han { width: 60px; height: 60px; font-size: 2.2rem; border-radius: 12px; }
}

/* ---- 🧱 ô tìm bộ thủ ---- */
.kh-bo-tim {
  display: block; width: 100%; max-width: 360px; margin-bottom: 14px;
  padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--vang);
  background: var(--kem-sang); font: inherit; font-size: .9rem; color: var(--nau);
}
.kh-bo-tim:focus { outline: none; border-color: var(--oliu); }
.kh-bo-tim::placeholder { color: var(--nau-nhat); }

/* ---- 📖 六書 Lục Thư — "trang sách cổ" đầu màn Cấu tạo chữ (9/10/2026, theo mockup Zhenyin) ----
   Cuộn thư + tiêu đề + tranh thuỷ mặc · bảng tỷ lệ · lưới thẻ 4 ⇄ 2 ⇄ 1 cột theo @container.
   Màu nhận diện từng thể CHỈ là điểm nhấn (số đếm, đoạn thanh), nền thẻ giữ chung một màu giấy. */
.kh-lt-nhan { font-size: .78rem; font-weight: 800; letter-spacing: .4px; color: var(--nau-nhat); margin-bottom: 8px; }
.m-ht { background: #596d32; }
.m-hy { background: #8ba563; }
.m-th { background: #d0a343; }
.m-cs { background: #b33224; }
.m-gt { background: #762719; }
.m-khac { background: #beb39a; }

.the.kh-lt-khung {
  position: relative; overflow: hidden; padding: 22px 24px 24px;
  background: linear-gradient(180deg, #fff9ec, #fbf3e1); border-color: #e2c78c; box-shadow: var(--bong-nang);
}
.kh-lt-dauman { position: relative; display: flex; align-items: center; gap: 22px; min-height: 196px; margin-bottom: 18px; padding: 26px 0 0 34px; }
.kh-lt-tranh {
  position: absolute; top: -22px; right: -24px; width: 50%; height: calc(100% + 22px); object-fit: cover; object-position: 100% 6%;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
}
/* Thông cổ mọc từ mép trái, nằm SAU cuộn thư; nửa phải mờ dần để kim thông không đè lên tiêu đề.
   Đàn chim bay trên khoảng trời giữa chữ và tranh núi. */
.kh-lt-thong {
  position: absolute; left: -24px; top: -22px; width: 300px; height: auto; z-index: 0; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, #000 32%, transparent 54%); mask-image: linear-gradient(90deg, #000 32%, transparent 54%);
}
.kh-lt-chim { position: absolute; right: 36%; top: -8px; width: 130px; height: auto; opacity: .85; pointer-events: none; user-select: none; }
/* Cuộn thư dọc: giấy kem giữa hai trục gỗ — vẽ bằng CSS, chữ 六書 là chữ thật. */
.kh-lt-cuon {
  position: relative; z-index: 1; flex: 0 0 auto; width: 84px; padding: 18px 0 14px; margin: 6px 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #efe0bf, #fbf2dc 30%, #fbf2dc 70%, #efe0bf); border: 1px solid #dcc290;
  box-shadow: 0 6px 16px -10px rgba(84, 68, 32, .6);
}
.kh-lt-cuon::before, .kh-lt-cuon::after {
  content: ""; position: absolute; left: -7px; right: -7px; height: 9px; border-radius: 5px;
  background: linear-gradient(180deg, #8a5a32, #5c3a1e);
}
.kh-lt-cuon::before { top: -5px; } .kh-lt-cuon::after { bottom: -5px; }
.kh-lt-cuon .chu { writing-mode: vertical-rl; font-family: var(--khai); font-size: 2.5rem; font-weight: 700; color: #a52a1f; line-height: 1.05; letter-spacing: 4px; }
.kh-lt-cuon .an {
  width: 24px; height: 24px; border: 1.5px solid #a52a1f; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-family: var(--khai); font-size: .8rem; color: #a52a1f; opacity: .85;
}
.kh-lt-tieude { position: relative; z-index: 1; max-width: min(620px, 54%); }
.kh-lt-tieude h2 {
  margin: 0; font-family: "Noto Serif", "Times New Roman", Georgia, serif; font-size: 2.3rem; font-weight: 700;
  line-height: 1.1; color: var(--oliu-dam); text-transform: uppercase; letter-spacing: .5px;
}
.kh-lt-tieude h2 .han { font-family: var(--khai); color: #a52a1f; margin-right: 6px; }
.kh-lt-tieude .phu {
  margin: 6px 0 10px; font-family: "Noto Serif", "Times New Roman", Georgia, serif; font-size: 1.12rem; font-weight: 700;
  color: #762719; text-transform: uppercase; letter-spacing: .4px;
}
.kh-lt-tieude .kh-mo { margin: 0; font-size: .92rem; line-height: 1.6; }

.kh-lt-tyle {
  position: relative; display: flex; gap: 18px; align-items: center; margin-bottom: 16px; padding: 12px 16px;
  background: rgba(255, 252, 245, .88); border: 1px solid #e8d2a6; border-radius: 16px;
}
.kh-lt-tyle .tong {
  flex: 0 0 auto; min-width: 150px; padding: 10px 14px; border-radius: 12px; background: #f4e7cf; border: 1px solid #e8d2a6; text-align: center;
}
.kh-lt-tyle .tong .nhan { font-size: .74rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #762719; }
.kh-lt-tyle .tong .so { font-family: "Noto Serif", "Times New Roman", Georgia, serif; font-size: 1.7rem; font-weight: 700; color: var(--nau); line-height: 1.15; }
.kh-lt-tyle .tong .phu { font-size: .78rem; color: var(--nau-nhat); }
.kh-lt-tyle .phai { flex: 1; min-width: 0; }
.kh-lt-thanh {
  display: flex; gap: 0; height: 32px; border-radius: 999px; overflow: hidden; margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.kh-lt-doan { display: flex; align-items: center; justify-content: center; min-width: 4px; color: #fffdf6; font-size: .8rem; font-weight: 800; white-space: nowrap; overflow: hidden; }
.kh-lt-doan + .kh-lt-doan { box-shadow: inset 1px 0 0 rgba(255, 253, 246, .55); }
.kh-lt-chuthich { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px 14px; font-size: .82rem; color: var(--nau); }
.kh-lt-chuthich .muc { display: flex; align-items: flex-start; gap: 7px; }
.kh-lt-chuthich i { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; display: inline-block; }
.kh-lt-chuthich b { display: block; font-weight: 700; }
.kh-lt-chuthich small { color: var(--nau-nhat); font-size: .78rem; }

.kh-lt-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 4px; }
.kh-lt-the {
  position: relative; overflow: hidden; display: flex; flex-direction: column; width: 100%; min-width: 0;
  background: #fffcf5; border: 1px solid #e8d2a6; border-radius: 16px; padding: 14px 14px 14px;
  font: inherit; text-align: left; color: var(--nau); cursor: pointer;
  box-shadow: 0 1px 2px rgba(84, 68, 32, .05), 0 8px 20px -16px rgba(84, 68, 32, .45);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.kh-lt-the::before {
  content: ""; position: absolute; right: -10px; bottom: -12px; width: 130px; height: 70px; pointer-events: none;
  background: url("/kho/img/hoa-tiet-nui-non.png") no-repeat left bottom / 130px auto; opacity: .3; transform: scaleX(-1);
}
.kh-lt-the > * { position: relative; }
/* Cành mai đỏ ở góc dưới-phải ba thẻ (Chỉ sự · Chuyển chú: cành lớn · Giả tá: cành nhỏ lật ngang) —
   thay núi mờ của các thẻ khác; nằm SAU nội dung nên khối ví dụ che được phần cành lấn vào. */
.kh-lt-the.t-cs::before, .kh-lt-the.bonus::before {
  right: -4px; bottom: -4px; width: 128px; height: 108px; opacity: .9; transform: none;
  background: url("/kho/img/luc-thu-mai-lon.webp") no-repeat right bottom / contain;
}
.kh-lt-the.t-gt::before {
  right: -4px; bottom: -4px; width: 150px; height: 98px; opacity: .9; transform: scaleX(-1);
  background: url("/kho/img/luc-thu-mai-nho.webp") no-repeat left bottom / contain;
}

@media (hover: hover) { .kh-lt-the:not(.mo):hover { border-color: #d0a343; box-shadow: 0 2px 4px rgba(84, 68, 32, .06), 0 14px 28px -18px rgba(84, 68, 32, .55); transform: translateY(-1px); } }
.kh-lt-the:not(.mo):active { transform: scale(.99); }
.kh-lt-the:focus-visible { outline: 3px solid var(--oliu); outline-offset: 2px; }
.kh-lt-the.mo { cursor: default; background: #fbf8f0; }
.kh-lt-the.bonus { border: 1.5px dashed #d0a343; background: linear-gradient(180deg, #fffcf3, #fbf3e1); }

.kh-lt-the .dau { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.kh-lt-the .stt {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #f4e7cf; border: 1px solid #e8d2a6; font-size: .8rem; font-weight: 800; color: #6b5a3c; font-variant-numeric: tabular-nums;
}
.kh-lt-the.t-ht .stt { color: #596d32; } .kh-lt-the.t-hy .stt { color: #5f7a3c; } .kh-lt-the.t-th .stt { color: #9c7520; }
.kh-lt-the.t-cs .stt { color: #b33224; } .kh-lt-the.t-gt .stt { color: #762719; }
.kh-lt-the .ten { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.kh-lt-the .ten .han { font-family: var(--khai); font-size: 1.45rem; font-weight: 700; color: #a52a1f; line-height: 1.15; }
.kh-lt-the .ten .vi { font-family: "Noto Serif", "Times New Roman", Georgia, serif; font-weight: 700; font-size: .98rem; color: var(--nau); }
.kh-lt-the.mo .ten .vi { font-size: 1.05rem; }
.kh-lt-the .pct { flex: 0 0 auto; font-weight: 800; font-size: .76rem; color: #fffdf6; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* Sơ đồ cấu tạo: ô giấy chữ + mũi tên — chỉ những quan hệ đã có lời giải trong bài giảng. */
.kh-lt-sodo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 78px; margin-bottom: 10px; flex-wrap: wrap; }
.kh-lt-sodo .o {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 44px; height: 50px; padding: 0 6px; border-radius: 9px; background: #fbf1dc; border: 1px solid #dcc290;
  box-shadow: 0 3px 8px -6px rgba(84, 68, 32, .6);
}
.kh-lt-sodo .o .c { font-family: var(--khai); font-size: 1.5rem; line-height: 1; color: var(--nau); }
.kh-lt-sodo .o small { font-size: .66rem; color: var(--nau-nhat); line-height: 1.1; }
.kh-lt-sodo .o.kq { min-width: 62px; height: 66px; border-color: #c9a24a; background: #f4e7cf; }
.kh-lt-sodo .o.kq .c { font-size: 2.3rem; color: #a52a1f; font-weight: 700; }
.kh-lt-sodo .o.hoi { min-width: 62px; height: 66px; border-style: dashed; background: #f6f1e4; }
.kh-lt-sodo .o.hoi .c { font-family: "Noto Serif", Georgia, serif; font-size: 2.1rem; color: #a99d82; }
.kh-lt-sodo .cong { font-weight: 800; color: var(--nau-nhat); }
.kh-lt-sodo .mui { display: inline-flex; flex-direction: column; align-items: center; color: #a3854a; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.kh-lt-sodo .mui small { font-size: .64rem; font-weight: 700; color: var(--nau-nhat); margin-top: 2px; }
.kh-lt-sodo .mui.qua-lai { font-size: 1.6rem; color: #a52a1f; }
.kh-lt-sodo .tranh {
  width: 92px; height: 60px; border-radius: 10px;
  background: url("/kho/img/hoa-tiet-nui-non-v2.webp") no-repeat 72% 18% / 230px auto;
}
.kh-lt-sodo .net { position: relative; width: 76px; height: 60px; }
.kh-lt-sodo .net i { position: absolute; left: 50%; height: 4px; border-radius: 2px; background: var(--nau); transform: translateX(-50%); }
.kh-lt-sodo .net .dai { top: 34px; width: 64px; }
.kh-lt-sodo .net .ngan { top: 20px; width: 26px; background: #b33224; }
.kh-lt-sodo .net small { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: .64rem; color: var(--nau-nhat); }
.kh-lt-sodo .nghia-moi { font-family: "Noto Serif", Georgia, serif; font-size: 1.05rem; font-weight: 700; color: #762719; padding: 6px 10px; border-radius: 9px; background: #f4e7cf; }

.kh-lt-the .dn { font-size: .86rem; color: var(--nau); margin-bottom: 10px; line-height: 1.5; }
.kh-lt-the .vd {
  margin-top: auto; background: #f4e7cf; border-radius: 13px; padding: 10px 12px; font-size: .8rem;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
}
.kh-lt-the .vd .vc { grid-row: span 2; font-family: var(--khai); font-size: 2.1rem; line-height: 1; color: #a52a1f; font-weight: 700; }
.kh-lt-the .vd .py { color: var(--nau); font-weight: 700; font-size: .84rem; }
.kh-lt-the .vd .ct { color: var(--nau-nhat); font-style: italic; font-family: "Noto Serif", Georgia, serif; line-height: 1.45; }
.kh-lt-the .cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px;
  border-radius: 9px; background: #596d32; color: #fffdf6; font-size: .8rem; font-weight: 700; transition: filter .18s ease;
}
.kh-lt-the .cta .sach { font-size: .8rem; }
@media (hover: hover) { .kh-lt-the:hover .cta { filter: brightness(1.12); } }

@container (max-width: 1020px) { .kh-lt-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 760px) {
  .kh-lt-tyle { flex-direction: column; align-items: stretch; }
  .kh-lt-tyle .tong { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .kh-lt-tieude { max-width: 62%; }
  .kh-lt-tranh { width: 40%; opacity: .6; }
  .kh-lt-chim { display: none; }
}
@container (max-width: 540px) {
  .kh-lt-luoi { grid-template-columns: minmax(0, 1fr); }
  .kh-lt-tranh { display: none; }
  .kh-lt-dauman { min-height: 0; gap: 14px; align-items: flex-start; }
  .kh-lt-cuon { width: 58px; padding: 12px 0 10px; }
  .kh-lt-dauman { padding: 18px 0 0 20px; }
  .kh-lt-thong { width: 190px; left: -16px; top: -16px; }
  .kh-lt-cuon .chu { font-size: 1.7rem; }
  .kh-lt-tieude { max-width: none; }
  .kh-lt-tieude h2 { font-size: 1.6rem; }
  .kh-lt-tieude .phu { font-size: .92rem; }
  .kh-lt-doan.nho span { display: none; }
}
@media (max-width: 640px) { .the.kh-lt-khung { padding: 16px 14px 18px; } }

.kh-lt-sosanh { display: flex; gap: 14px; align-items: stretch; margin-bottom: 12px; flex-wrap: wrap; }
.kh-lt-sosanh .cot { flex: 1 1 200px; background: var(--kem-sau); border-radius: var(--r-trong); padding: 12px 14px; text-align: center; }
.kh-lt-sosanh .nhan { font-weight: 800; font-size: .76rem; color: var(--do-chu); margin-bottom: 4px; letter-spacing: .3px; }
.kh-lt-sosanh .han-to { font-family: var(--khai); font-size: 2.2rem; color: var(--do-chu); line-height: 1.1; }
.kh-lt-sosanh p { font-size: .8rem; margin: 6px 0 0; color: var(--nau); }
.kh-lt-sosanh .vs { align-self: center; font-weight: 800; color: var(--nau-nhat); font-size: 1.1rem; flex: 0 0 auto; }
/* Điện thoại: hai cột không đủ chỗ đứng cạnh nhau — nếu để flex-wrap tự xuống dòng thì dấu ≠ dính mép phải
   cạnh thẻ thứ nhất (soát 11/10/2026). Xếp dọc hẳn, ≠ nằm giữa hai thẻ. */
@media (max-width: 560px) {
  .kh-lt-sosanh { flex-direction: column; gap: 6px; margin-bottom: 20px; }
  .kh-lt-sosanh .cot { flex: 0 0 auto; }
  .kh-lt-sosanh .vs { line-height: 1; }
}

/* Nút nổi 🧭 hướng dẫn (huong-dan.js, z-index 8500) nằm TRÊN mọi hộp phủ kín màn hình của kho và đè
   lên nội dung bài giảng trên điện thoại (soát 11/10/2026). Hộp nào đang mở — các hộp này đều được dựng
   lúc mở và gỡ khỏi DOM lúc đóng — thì ẩn nút; cùng lối với one-on-one.css. */
body:has(.kh-lt-man, .kh-lq-man, .kh-che, .kh-httc-hop, .kh-xv-hop) #tnhd-nut-noi { display: none !important; }

/* ---- 📖 Bài giảng lục thư (mở khi bấm thẻ) — cùng khuôn mở/đóng với Lục Quyết, lớp riêng kh-lt-* ---- */
.kh-lt-man {
  position: fixed; inset: 0; z-index: 300; background: rgba(40, 32, 14, .62);
  display: flex; align-items: flex-start; justify-content: center; padding: 26px 14px; overflow-y: auto;
}
.kh-lt-hop {
  width: min(760px, 100%); margin: auto; background: var(--kem-sang); border-radius: var(--r-the);
  box-shadow: var(--bong-nang); max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
.kh-lt-dong {
  position: fixed; top: 20px; right: max(20px, calc(50vw - 400px)); width: 42px; height: 42px;
  border-radius: 50%; border: 0; background: rgba(255, 253, 246, .92); font-size: 1.1rem; cursor: pointer;
}
@media (hover: hover) { .kh-lt-dong:hover { filter: brightness(1.06); } }
.kh-lt-dong:active { transform: scale(.94); }
.kh-lt-trong { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 30px; }
.kh-lt-dau {
  display: flex; align-items: center; gap: 14px; padding: 22px 26px 18px; border-bottom: 1px solid var(--vien-nhat);
  position: sticky; top: 0; background: var(--kem-sang); border-radius: var(--r-the) var(--r-the) 0 0;
}
.kh-lt-dau .icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex: 0 0 auto; color: #fff; }
.kh-lt-dau .ten { flex: 1; min-width: 0; }
.kh-lt-dau .ten .han { font-family: var(--khai); font-size: 1.5rem; color: var(--do-chu); line-height: 1.15; }
.kh-lt-dau .ten .vi { font-size: 1.15rem; font-weight: 800; color: var(--nau); }
.kh-lt-dau .ten .sub { font-size: .8rem; color: var(--nau-nhat); margin-top: 2px; }

.kh-lt-mobai { font-size: .94rem; line-height: 1.75; color: var(--nau); margin: 0 0 20px; }
.kh-lt-nhanmuc { font-size: .76rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--nau-nhat); margin: 24px 0 12px; }
.kh-lt-nhanmuc:first-child { margin-top: 0; }

.kh-lt-bocuc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-bottom: 8px; }
.kh-lt-bocuc .o { background: var(--kem-sau); border-radius: var(--r-trong); padding: 10px 12px; font-size: .78rem; }
.kh-lt-bocuc .kieu { font-weight: 800; color: var(--oliu-dam); margin-bottom: 3px; }
.kh-lt-bocuc .vd { font-family: var(--khai); color: var(--nau-nhat); font-size: .95rem; }

.kh-lt-chu { background: var(--kem-sau); border: 1px solid var(--vien-nhat); border-radius: var(--r-trong); padding: 16px 18px; margin-bottom: 12px; }
.kh-lt-chudau { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.kh-lt-chumat { font-family: var(--khai); font-size: 2.6rem; color: var(--do-chu); line-height: 1; flex: 0 0 auto; }
.kh-lt-chutin { flex: 1; min-width: 0; padding-top: 2px; }
.kh-lt-chutin .py { font-weight: 800; font-size: 1.02rem; color: var(--nau); }
.kh-lt-chutin .ngh { font-size: .86rem; color: var(--nau-nhat); margin-top: 1px; }
.kh-lt-chuthan { font-size: .87rem; line-height: 1.68; color: var(--nau); margin: 0 0 10px; }
.kh-lt-thuyetvan {
  background: var(--kem-sang); border-left: 3px solid var(--vang); border-radius: 0 10px 10px 0;
  padding: 9px 13px; font-size: .82rem; line-height: 1.6; color: var(--nau); margin-bottom: 10px;
}
.kh-lt-thuyetvan .nhan { font-size: .68rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--nau-nhat); display: block; margin-bottom: 4px; }
.kh-lt-thuyetvan .goc { font-family: var(--khai); color: var(--do-chu); }
.kh-lt-ghichu { margin-top: 9px; background: #f6ded8; border-radius: 10px; padding: 9px 13px; font-size: .81rem; line-height: 1.6; color: #7a2416; }
.kh-lt-ghichu .nhan { font-size: .68rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #8a4b1c; display: block; margin-bottom: 4px; }

.kh-lt-nguonbox { background: var(--oliu-nhat); border-radius: var(--r-trong); padding: 13px 16px; font-size: .79rem; line-height: 1.75; color: var(--oliu-dam); }

/* ---- 🧭 Dải diễn biến chữ viết (giáp cốt → kim văn → tiểu triện → khải thư), ảnh THẬT ---- */
.kh-th-dai { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 2px; }
.kh-th-o { flex: 0 0 auto; width: 88px; background: var(--kem-sang); border: 1px solid var(--vien-nhat); border-radius: var(--r-trong); padding: 7px 5px 6px; text-align: center; }
.kh-th-o img { width: 100%; height: 52px; object-fit: contain; display: block; margin-bottom: 4px; }
.kh-th-o.trong { background: var(--kem-sau); }
.kh-th-thieu { height: 52px; display: flex; align-items: center; justify-content: center; font-size: .64rem; color: var(--nau-nhat); margin-bottom: 4px; line-height: 1.25; }
.kh-th-o.nay { background: var(--oliu-nhat); border-color: var(--oliu); }
.kh-th-khai { height: 52px; display: flex; align-items: center; justify-content: center; font-family: var(--khai); font-size: 2.2rem; color: var(--do-chu); margin-bottom: 4px; }
.kh-th-nhan .han { font-family: var(--khai); font-size: .78rem; color: var(--do-chu); font-weight: 700; }
.kh-th-nhan .vi { font-size: .65rem; font-weight: 700; color: var(--nau); margin-top: 1px; line-height: 1.25; }
.kh-th-nhan .nam { font-size: .58rem; color: var(--nau-nhat); margin-top: 1px; }
.kh-th-mui { flex: 0 0 auto; align-self: center; color: var(--nau-nhat); font-size: .85rem; padding: 0 1px; }
.kh-th-nguon { font-size: .68rem; color: var(--nau-nhat); margin: -3px 0 12px; font-style: italic; }

@media (max-width: 600px) {
  .kh-lt-chudau { flex-direction: column; gap: 6px; }
  .kh-lt-dau { padding: 18px 16px 14px; } .kh-lt-trong { padding: 18px 16px 26px; }
}

.kh-quiz { background: var(--kem-sang); border: 1.5px dashed var(--vang); border-radius: var(--r-the); padding: 16px 18px; margin-top: 14px; }
.kh-quiz-q { font-weight: 700; font-size: .9rem; margin: 0 0 12px; }
.kh-quiz-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.kh-quiz-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kh-quiz-opts label {
  display: inline-block; background: var(--kem-sau); border-radius: 999px; padding: 8px 16px;
  font-size: .85rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent;
}
.kh-quiz-opts label.dung { background: var(--oliu-nhat); border-color: var(--oliu); color: var(--oliu-dam); }
.kh-quiz-opts label.sai { background: #f6ded8; border-color: var(--do-chu); color: var(--do-chu); }
.kh-quiz-fb { display: none; margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-size: .84rem; }
.kh-quiz-fb.hien { display: block; }
.kh-quiz-fb.ok { background: var(--oliu-nhat); color: var(--oliu-dam); }
.kh-quiz-fb.bad { background: #f6ded8; color: var(--do-chu); }

/* ---- 🎬 video ---- */
.kh-vid-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kh-vid { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.kh-vid .bia {
  position: relative; border-radius: var(--r-trong); overflow: hidden; border: 1px solid var(--vien-nhat);
  aspect-ratio: 16 / 10; background: var(--kem-sau);
}
.kh-vid .bia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-vid .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(40, 30, 12, .18);
}
.kh-vid .play i {
  width: 42px; height: 30px; border-radius: 8px; background: #d0352a; color: #fff;
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .8rem;
}
.kh-vid .t { font-weight: 700; font-size: .9rem; margin-top: 8px; color: var(--nau); }
.kh-vid .d { font-size: .8rem; color: var(--nau-nhat); }
.kh-vid:hover .bia { border-color: var(--oliu); }
/* 17/9/2026 (Xuất video chiết tự, Phần C) — con dấu "đã xem" + nút gỡ (admin) trên thẻ video. */
.kh-vid-daxem {
  position: absolute; top: 6px; right: 6px; background: #b5312a; color: #fff; font-size: .68rem;
  font-weight: 800; padding: 2px 7px; border-radius: 999px;
}
.kh-vid-go {
  position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(20, 15, 5, .55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; cursor: pointer; z-index: 1;
}
@media (hover: hover) { .kh-vid-go:hover { background: #b5312a; } }

/* ---- 📖 Bảo Thư Các ---- */
.kh-sach-hang { display: flex; gap: 16px; align-items: flex-start; }
.kh-bia {
  flex: 0 0 auto; width: 92px; aspect-ratio: 3 / 4; border-radius: 8px;
  background: linear-gradient(150deg, #d8b463, #b98f36); border: 1px solid #a97f2c;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #40300c; font-weight: 800; font-size: .74rem; padding: 8px; line-height: 1.3;
  box-shadow: 0 6px 16px -10px rgba(80, 60, 10, .8);
}
.kh-trich {
  border-left: 3px solid var(--vang); background: var(--kem-sau); border-radius: 0 var(--r-trong) var(--r-trong) 0;
  padding: 11px 14px; margin-top: 9px; cursor: pointer;
}

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-trich:hover { background: #f0e6cd; }
}
.kh-trich:active { background: #f0e6cd; }
.kh-trich .van { font-family: var(--khai); font-size: 1.18rem; line-height: 1.85; color: var(--nau); }
.kh-trich .van b { color: var(--do-chu); background: #f7e7c8; border-radius: 4px; padding: 0 2px; }
.kh-trich .noi { font-size: .8rem; color: var(--nau-nhat); margin-top: 6px; }

/* ⚖️ Trích dẫn của SÁCH CÒN BẢN QUYỀN — không bấm được, không quét chọn được. Cố ý vẫn giữ nguyên
   khung vàng như mọi câu trích khác: đây không phải trạng thái "hỏng" hay "bị khoá phần thưởng",
   mà là hình thức bình thường của một câu trích dẫn có nguồn. */
.kh-trich.chi-trich { cursor: default; }

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-trich.chi-trich:hover { background: var(--kem-sau); }
}
.kh-trich.chi-trich:active { background: var(--kem-sau); }

/* Lời nói rõ vì sao chỉ tới đây — dùng chung cho khu trích dẫn và mục lục sách bị khoá. */
.kh-banquyen {
  margin-top: 12px; padding: 10px 13px; border-radius: var(--r-trong);
  background: #fdf6e3; border-left: 3px solid var(--vang);
  font-size: .86rem; line-height: 1.65; color: #8a6a12;
}
.kh-banquyen div + div { margin-top: 3px; }

/* Dòng mục lục KHÔNG bấm được (sách chỉ trích dẫn) — vẫn đọc được tên chương, chỉ không phải nút. */
.kh-dong.tinh { cursor: default; opacity: .82; }

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-dong.tinh:hover { border-color: var(--vien); background: var(--kem-sang); }
}
.kh-dong.tinh:active { border-color: var(--vien); background: var(--kem-sang); }

.kh-doc { max-width: 780px; }
.kh-doc p {
  font-family: var(--khai); font-size: 1.32rem; line-height: 2.15; color: var(--nau);
  margin: 0 0 14px; padding: 6px 10px; border-radius: 10px; cursor: text;
}

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-doc p:hover { background: var(--vang-nhat); }
}
.kh-doc p:active { background: var(--vang-nhat); }
.kh-doc p .tr { font-family: var(--chu); font-size: .72rem; color: var(--nau-nhat); vertical-align: super; margin-right: 6px; }
.kh-doc .ch { cursor: pointer; border-radius: 4px; }

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-doc .ch:hover { background: #f6e4bf; color: var(--do-chu); }
}
.kh-doc .ch:active { background: #f6e4bf; color: var(--do-chu); }

/* ---- 🔭 Kính Viễn Vọng: nhận diện riêng, không phải ô Search đổi tên ---- */
/* 🏮 CHỮ NÀY TRONG THIÊN NGỮ GIỚI (4/9/2026) — khối câu thông chiều ngược.
   Mượn sắc SON của cõi chứ không dùng ô-liu/vàng của Thư viện: đây là cửa dẫn sang một nơi KHÁC,
   người đọc phải nhận ra ngay là mình sắp rời trang tra cứu. Khối chỉ hiện khi cõi thật sự có chữ
   này VÀ cổng cõi đã mở cho người đang xem — máy chủ quyết, giao diện không tự đoán. */
.the.coi {
  background: linear-gradient(170deg, #fdf6f2, #f9ece6);
  border-color: #e0c3b6; box-shadow: var(--bong-nang);
}
.the.coi .the-dau { color: #8f3f2c; }
.kh-dong-coi {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-trong); background: rgba(255,255,255,.62);
  border: 1px solid rgba(224,195,182,.6);
}
.kh-dong-coi + .kh-dong-coi { margin-top: 7px; }
.kh-dong-coi .ic { font-size: 1.1rem; line-height: 1; }
.kh-dong-coi .n { font-size: .92rem; }
.kh-dong-coi .n b { color: #8f3f2c; }
.kh-dong-coi .n i { font-style: normal; color: var(--nau-nhat); }

.the.kinh {
  background: linear-gradient(165deg, #f8f4e4, #f2ecda);
  border-color: var(--vien); box-shadow: var(--bong-nang);
}

/* ---- 🔮 Huyền Cơ: lớp nghĩa thứ hai, cửa vào cần quyền (19/9/2026) ---- */
.kh-hc-dong {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; background: var(--kem-sang); border: 1.5px solid var(--do-chu);
  border-radius: var(--r-the); cursor: pointer; font: inherit; color: var(--nau);
}
.kh-hc-dong .ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--vang);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem;
}
.kh-hc-dong .ic svg { width: 26px; height: 26px; display: block; }
.kh-hc-dong .n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kh-hc-dong .n b { font-family: var(--khai); font-size: 1.12rem; color: var(--do-chu); }
.kh-hc-dong .n span { font-size: .82rem; color: var(--nau-nhat); }
.kh-hc-dong .mui { flex: 0 0 auto; color: var(--do-chu); font-size: 1.3rem; }
@media (hover: hover) { .kh-hc-dong:hover { filter: brightness(1.03); } }
.kh-hc-dong:active { transform: scale(.99); }
.kh-hc-ghi { font-size: .78rem; color: var(--nau-nhat); margin-top: 7px; padding-left: 4px; }

.the.hc { background: linear-gradient(180deg, #fdf8f4, #f8ece5); border-color: var(--do-chu); box-shadow: var(--bong-nang); }
.the.hc .the-dau { color: var(--do-chu); }
.the.hc .the-dau .them button { color: var(--do-chu); }
.kh-hc-khoi {
  background: var(--kem-sau); border: 1px solid var(--vien-nhat); border-radius: var(--r-trong);
  padding: 16px 18px; margin-bottom: 14px;
}
.kh-hc-khoi:last-child { margin-bottom: 0; }
.kh-hc-tacgia { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kh-hc-tacgia b { font-family: var(--khai); font-size: 1.05rem; color: var(--do-chu); }
.kh-hc-tacgia span { font-size: .82rem; color: var(--nau-nhat); }
.kh-hc-nhan { font-size: .72rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--oliu-dam); margin: 10px 0 4px; }
.kh-hc-nhan:first-of-type { margin-top: 0; }
.kh-hc-nguon { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--vien-nhat); font-size: .78rem; color: var(--nau-nhat); }
.kh-hc-luuy {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 6px;
  padding: 12px 14px; background: var(--kem-sau); border-radius: var(--r-trong); font-size: .82rem; color: var(--nau-nhat);
}
.kh-kinh-o { display: flex; gap: 10px; flex-wrap: wrap; }
.kh-kinh-o input {
  flex: 1; min-width: 220px; font: inherit; padding: 13px 16px; min-height: 50px;
  border-radius: var(--r-trong); border: 1.5px solid var(--vien); background: var(--kem-sang); color: var(--nau);
}
.kh-kinh-o input:focus { outline: none; border-color: var(--oliu); box-shadow: 0 0 0 4px rgba(95, 110, 51, .14); }
.kh-vd { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.kh-vd button {
  min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--vien);
  background: var(--kem-sang); cursor: pointer; font-family: var(--khai); font-size: 1.05rem; color: var(--do-chu);
}
.kh-vd button:hover { border-color: var(--oliu); }
.kh-tach {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 6px 0 2px;
}

/* ---- trạng thái ---- */
.kh-trong { padding: 26px 10px; text-align: center; color: var(--nau-nhat); line-height: 1.7; }
.kh-trong .to { font-size: 2rem; display: block; margin-bottom: 6px; }
.kh-loi { background: #fdf1e6; border: 1px solid #eccfae; color: #8a4b1c; border-radius: var(--r-trong); padding: 12px 15px; }
.kh-mo { font-size: .88rem; color: var(--nau-nhat); line-height: 1.65; }
.kh-nap { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--vien); border-top-color: var(--oliu); border-radius: 50%; animation: kh-quay .7s linear infinite; vertical-align: -2px; }
@keyframes kh-quay { to { transform: rotate(360deg); } }

/* ---- Ô Mễ tự cách (米字格) lót dưới mọi khung nét chữ trong Kho chữ Hán. Ảnh nền do JS gán
   THẲNG vào el.style.backgroundImage (không qua class .mzc-nen) — vì nhiều khung ở đây tự đặt
   background bằng inline style hoặc bằng rule cùng độ ưu tiên đứng SAU trong file CSS, class
   không thắng nổi (trả giá thật 13/9/2026: ô kẻ không hiện được ở khung 300×300 và NĂNG THƯ dù
   nút bấm vẫn chạy). Cùng khoá localStorage "tnMzcAn" với mọi khung nét khác trong hệ thống. */
.mzc-nut {
  position: absolute; top: 4px; right: 4px; z-index: 3; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1px solid var(--vien); background: rgba(255,253,246,.95); color: var(--nau-nhat);
  font-size: 16px; line-height: 32px; text-align: center; cursor: pointer; font-family: inherit;
}
.mzc-nut.tat { opacity: .4; text-decoration: line-through; }
@media (hover: hover) { .mzc-nut:hover { border-color: var(--oliu); color: var(--oliu-dam); } }

/* ---- ô nhập của khu quản trị ---- */
.kh-o-nhap, .kh-o-dan {
  width: 100%; font: inherit; padding: 12px 14px; border-radius: var(--r-trong);
  border: 1.5px solid var(--vien); background: var(--kem-sang); color: var(--nau); min-height: 48px;
}
.kh-o-dan { min-height: 220px; font-family: var(--khai); font-size: 1.05rem; line-height: 1.9; }
.kh-o-nhap:focus, .kh-o-dan:focus { outline: none; border-color: var(--oliu); }
.kh-hang { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.kh-nhan { font-size: .82rem; font-weight: 700; color: var(--nau-nhat); display: block; margin-bottom: 5px; }

/* ================= 📄 MÀN THẢ TỆP (nạp sách) — chỉ hiện ở bàn quản trị ================= */
.kh-tha {
  display: block; width: 100%; border: 2px dashed var(--vien); border-radius: 16px;
  background: #fcf8ee; padding: 34px 16px; text-align: center; cursor: pointer;
  color: var(--nau-nhat); font: inherit; transition: border-color .15s, background .15s, transform .08s;
}

/* 4/9/2026 — bọc @media (hover: hover) để ĐIỆN THOẠI không dính màu sau khi chạm
   (iOS/Android giữ trạng thái hover ở chỗ vừa chạm cho tới khi chạm chỗ khác), và thêm
   luật :active song sinh để lúc đè ngón tay vẫn có phản hồi. Màu GIỮ NGUYÊN như cũ.
   Gốc của việc này: ghi chú ⚠️ trong public/style.css. */
@media (hover: hover) {
  .kh-tha:hover { border-color: var(--oliu); background: #f8f3e3; }
}
.kh-tha:active { border-color: var(--oliu); background: #f8f3e3; }
.kh-tha:active { transform: scale(.995); }
.kh-tha.dang { border-color: var(--oliu); background: #f1f5e6; }
.kh-tha .bt { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.kh-tha .to { color: var(--nau); font-size: 1.05rem; font-weight: 800; margin-bottom: 3px; }
.kh-tha .nho { font-size: .85rem; }

.kh-nap-hang { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--nau-nhat); }
.kh-thanh { height: 9px; border-radius: 99px; background: #eee5cd; overflow: hidden; margin-top: 9px; }
.kh-thanh i { display: block; height: 100%; background: var(--oliu); transition: width .2s; }

.kh-oso-hang { display: flex; gap: 9px; flex-wrap: wrap; }
.kh-oso {
  flex: 1; min-width: 88px; background: var(--kem-sang); border: 1px solid var(--vien);
  border-radius: 13px; padding: 9px; text-align: center;
}
.kh-oso b { display: block; font-size: 1.35rem; color: var(--oliu-dam); }
.kh-oso span { font-size: .72rem; color: var(--nau-nhat); }

/* ⚖️ Ba nút chọn chế độ pháp lý. Cố ý là NÚT TO có lời giải thích, không phải ô select một dòng:
   đây là quyết định pháp lý cho cả cuốn sách, không phải một tuỳ chọn kỹ thuật. */
/* ⚠️ TÊN LỚP PHẢI LÀ `kh-phaply`, KHÔNG được đặt là `kh-che`. Trang này đã có sẵn `.kh-che` =
   MÀN CHE của hộp xem video (`position:fixed; inset:0`, nền tối) ở phía dưới tệp này. Đặt trùng tên
   thì ba nút chọn chế độ biến thành ba tấm màn tối phủ kín màn hình, chữ chồng lên nhau một dòng —
   Zhenyin gặp đúng cảnh ấy ngày 4/9/2026 khi mở bàn nạp sách. */
.kh-phaply-hang { display: flex; gap: 10px; flex-wrap: wrap; }
.kh-phaply {
  flex: 1; min-width: 200px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--vien); border-radius: 14px; background: var(--kem-sang);
  padding: 11px 13px; color: var(--nau); transition: border-color .15s, background .15s;
}
.kh-phaply:hover { border-color: var(--oliu); }
.kh-phaply.chon { border: 2px solid var(--oliu); background: #f3f6ea; padding: 10px 12px; }
.kh-phaply .ten { font-weight: 800; font-size: .95rem; }
.kh-phaply .mo { font-size: .79rem; color: var(--nau-nhat); margin-top: 3px; line-height: 1.5; }

/* ⏳ CỬA SỔ TIẾN ĐỘ — nhỏ, neo góc dưới bên phải, KHÔNG che nội dung trang.
   ⚠️ z-index phải THẤP hơn màn che xem video (.kh-che dùng 200) để không đè lên nó. */
.kh-tiendo {
  position: fixed; right: 18px; bottom: 18px; z-index: 180;
  width: min(340px, calc(100vw - 28px));
  background: var(--kem-sang); border: 1px solid var(--vien); border-radius: 16px;
  padding: 13px 15px; box-shadow: 0 12px 34px -12px rgba(60, 45, 10, .55);
  animation: kh-len .22s ease-out;
}
@keyframes kh-len { from { transform: translateY(12px); opacity: 0; } }
.kh-tiendo .dau { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.kh-tiendo .dau b { flex: 1; font-size: .93rem; color: var(--nau); }
.kh-tiendo .x {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--kem-sau); color: var(--nau-nhat); cursor: pointer; font-size: .85rem;
}
.kh-tiendo .thanh { height: 9px; border-radius: 99px; background: #eee5cd; overflow: hidden; }
.kh-tiendo .thanh i { display: block; height: 100%; width: 0; background: var(--oliu); transition: width .25s; }
.kh-tiendo .thanh i.xong { background: #3d7a2e; }
.kh-tiendo .pt { font-size: 1.25rem; font-weight: 800; color: var(--oliu-dam); margin-top: 7px; }
.kh-tiendo .loi { font-size: .82rem; color: var(--nau-nhat); line-height: 1.5; }
.kh-tiendo .phu { font-size: .76rem; color: var(--nau-nhat); margin-top: 4px; opacity: .85; }
.kh-tiendo .phu:empty { display: none; }
.kh-tiendo.xong { border-color: #3d7a2e; }
.kh-tiendo.xong .pt { color: #3d7a2e; }
.kh-tiendo.hong { border-color: #b5453f; }
.kh-tiendo.hong .pt { color: #a03b34; font-size: 1rem; }

.kh-canh { border-radius: 12px; padding: 10px 13px; font-size: .88rem; line-height: 1.65; }
.kh-canh.vang { background: #fdf6e3; border-left: 3px solid var(--vang); color: #8a6a12; }
.kh-canh div + div { margin-top: 4px; }

/* ---- hộp xem video ---- */
.kh-che {
  position: fixed; inset: 0; z-index: 200; background: rgba(40, 32, 14, .62);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.kh-che .khung { width: min(900px, 100%); background: #000; border-radius: var(--r-the); overflow: hidden; box-shadow: var(--bong-nang); }
.kh-che iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.kh-che .dong {
  position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255, 253, 246, .92); font-size: 1.2rem; cursor: pointer; color: var(--nau);
}

/* ===================== 🔑 一字六訣 NHẤT TỰ LỤC QUYẾT (13/9/2026) =====================
   Bảng màu RIÊNG cho Bảo Thư Các / Lục Quyết — không dùng --tng-* (biến của Thiên Ngữ Giới, trang
   này không nạp CSS đó). Đặt tên bt- để không đụng biến sẵn có. */
:root {
  --bt-son: #a8452f;
  --bt-tren-son: #fffdf6;
  --bt-kim: #b8892b;
  --bt-oliu-cho: #5e6b3a;
}
.kh-lq-man {
  position: fixed; inset: 0; z-index: 300; background: rgba(40, 32, 14, .62);
  display: flex; align-items: flex-start; justify-content: center; padding: 26px 14px; overflow-y: auto;
}
.kh-lq-hop {
  width: min(640px, 100%); margin: auto; background: var(--kem-sang); border-radius: var(--r-the);
  box-shadow: var(--bong-nang); padding: 26px 22px 22px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
}
.kh-lq-trong { flex: 1; min-height: 0; overflow-y: auto; }
.kh-lq-dong {
  position: fixed; top: 20px; right: max(20px, calc(50vw - 340px)); width: 42px; height: 42px;
  border-radius: 50%; border: 0; background: rgba(255, 253, 246, .92); font-size: 1.1rem; cursor: pointer;
}
@media (hover: hover) { .kh-lq-dong:hover { filter: brightness(1.06); } }
.kh-lq-dong:active { transform: scale(.94); }

/* Cột dọc căn giữa (chốt lần 2, 13/9/2026 — khớp đúng ảnh "Pháp"): tiêu đề → vòng → "Đã thành x/6",
   KHÔNG phải hàng ngang icon-trái/chữ-phải (bản "Hảo" trước đó bị chỉ ra là sai). */
.kh-lq-dau { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 18px; }
.kh-lq-vong { position: relative; width: 250px; height: 250px; flex: 0 0 auto; margin: 0 auto; }
.kh-lq-chuGiua {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 108px; height: 108px; border-radius: 50%; background: var(--kem-sau);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--khai); font-size: 3.4rem; color: var(--do-chu); transition: color .2s;
}
.kh-lq-vong.vien-man .kh-lq-chuGiua { color: var(--bt-kim); }
.kh-lq-an {
  position: absolute; width: 50px; height: 50px; border-radius: 12px; background: var(--kem-sau);
  border: 1px solid var(--vien); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--khai); font-size: .95rem; line-height: 1.15; color: var(--nau-nhat); transition: background .2s, color .2s;
}
.kh-lq-an.xong { background: var(--bt-son); color: var(--bt-tren-son); border-color: var(--bt-son); }
.kh-lq-vong.vien-man .kh-lq-an.xong { background: var(--bt-kim); border-color: var(--bt-kim); }
.kh-lq-tieu > div:first-child { font-family: var(--khai); font-size: 1.7rem; color: var(--bt-son); letter-spacing: 4px; }
.kh-lq-tieu .phu { font-size: .8rem; letter-spacing: 3px; color: var(--nau-nhat); margin-top: 4px; }
.kh-lq-tieu .vach { width: 46px; height: 1px; background: var(--vien); margin: 12px auto; }
.kh-lq-tieu .kh-mo { font-size: .88rem; }
.kh-lq-vienman-nhan {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--bt-kim); color: #fff; font-size: .82rem; font-weight: 700;
}
.kh-lq-daThanh { font-size: .95rem; font-weight: 700; color: var(--bt-son); }

/* Ba viên thuốc riêng, xếp hàng căn giữa — không phải một khối chữ chảy liền. */
.kh-lq-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 18px; }
.kh-lq-meta .pill { background: var(--kem-sau); border-radius: 999px; padding: 8px 16px; font-size: .85rem; color: var(--nau-nhat); }
.kh-lq-meta .pill.muc { font-weight: 700; color: var(--bt-son); }
.kh-lq-meta .pill.doc { font-family: var(--khai); font-size: .95rem; color: var(--do-chu); }

.kh-lq-acc { border: 1px solid var(--vien); border-radius: 14px; overflow: hidden; }
.kh-lq-muc + .kh-lq-muc { border-top: 1px solid var(--vien-nhat); }
.kh-lq-mucDau {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0;
  background: var(--kem-sang); cursor: pointer; font: inherit; text-align: left; color: var(--nau);
}
@media (hover: hover) { .kh-lq-mucDau:hover { filter: brightness(.98); } }
.kh-lq-mucDau:active { transform: scale(.997); }
.kh-lq-mucDau:focus { outline: none; }
.kh-lq-mucDau:focus-visible { outline: 2px solid var(--bt-son); outline-offset: -2px; }
/* Đã thành (13/9/2026, bàn giao khớp ảnh mẫu): đổ nền xanh lá mờ cả dòng, badge xanh lá đậm —
   KHÁC với vòng lục quyết ở đầu ngăn (đỏ `--bt-son`, đánh dấu 6 quyết trên MỘT vòng tròn); ở đây
   mỗi quyết là một MỤC riêng trong danh sách accordion nên dùng tông "đã xong" quen thuộc của dự án
   (xanh lá, cùng `#3d7a2e` với `.dau`/`.kh-lq-thanh`), không tô đỏ trùng màu "sắp học". */
.kh-lq-mucDau.thanh { background: #eaf3e2; }
.kh-lq-mucDau .so {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--kem-sau);
  display: flex; align-items: center; justify-content: center; font-family: var(--khai);
  font-size: .95rem; line-height: 1.15; color: var(--nau-nhat); text-align: center;
}
.kh-lq-mucDau.thanh .so { background: #3d7a2e; color: #fff; }
.kh-lq-mucDau .nhan { flex: 1; min-width: 0; }
.kh-lq-mucDau .nhan .ten { font-weight: 700; font-family: var(--khai); }
.kh-lq-mucDau .nhan .ta { font-size: .8rem; color: var(--nau-nhat); margin-top: 1px; }
.kh-lq-mucDau .dau { flex: 0 0 auto; color: #3d7a2e; font-size: .85rem; font-weight: 700; }
.kh-lq-mucDau .mo-r { flex: 0 0 auto; color: var(--nau-nhat); }
.kh-lq-mucThan { padding: 4px 16px 18px; }
.kh-lq-the { display: inline-block; background: var(--kem-sau); border-radius: 999px; padding: 5px 14px; font-size: .8rem; font-weight: 700; color: var(--bt-son); margin-bottom: 10px; }
.kh-lq-de { font-weight: 700; margin: 6px 0 12px; }
.kh-lq-khoiDay { background: var(--kem-sau); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; line-height: 1.85; }
.kh-lq-khoiDay p { margin: 0 0 8px; }
.kh-lq-khoiDay p:last-child { margin-bottom: 0; }
.kh-lq-khoiDay.bacCau { border-left: 3px solid var(--bt-oliu-cho); font-style: italic; color: var(--nau-nhat); }

.kh-lq-sodo { display: flex; gap: 6px; margin-bottom: 14px; height: 90px; }
.kh-lq-sodo.trên, .kh-lq-sodo.dưới, .kh-lq-sodo.ngoài, .kh-lq-sodo.trong { flex-direction: column; height: 130px; }
.kh-lq-sodo .o {
  flex: 1; border: 1.5px solid var(--vien); border-radius: 10px; background: var(--kem-sau);
  display: flex; align-items: center; justify-content: center;
}
.kh-lq-sodo .o { font-family: var(--khai); font-size: 2rem; color: var(--do-chu); }

.kh-lq-luaChon { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.kh-lq-opt {
  padding: 14px 10px; border: 1.5px solid var(--vien); border-radius: 12px; background: var(--kem-sang);
  cursor: pointer; font: inherit; text-align: center;
}
.kh-lq-opt.han { font-family: var(--khai); font-size: 1.5rem; color: var(--do-chu); }
@media (hover: hover) { .kh-lq-opt:hover:not(:disabled) { filter: brightness(.97); } }
.kh-lq-opt:active:not(:disabled) { transform: scale(.98); }
.kh-lq-opt.dung { border-color: #3d7a2e; background: #e9f3e4; }
.kh-lq-opt.sai { border-color: #b5453f; background: #fbeceb; }
.kh-lq-opt:disabled { opacity: .55; cursor: default; }

.kh-lq-thanh {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #e9f3e4; color: #2e6321;
  font-weight: 700;
}
.kh-lq-oNet { width: 220px; height: 220px; margin: 0 auto 12px; background: var(--kem-sau); border-radius: 10px; position: relative; }
.kh-lq-ghichep { margin-top: 16px; }
.kh-lq-ghichep .nhan { font-weight: 700; margin-bottom: 6px; font-size: .9rem; }
.kh-lq-ghichep textarea {
  width: 100%; border: 1px solid var(--vien); border-radius: 10px; padding: 9px 11px; font: inherit;
  resize: vertical; background: var(--kem-sang);
}

/* ===================== ĐIỆN THOẠI & MÁY TÍNH BẢNG =====================
   Bố cục đổi, DNA giữ nguyên: vẫn nền kem, vẫn thẻ mềm, vẫn chữ Hán to và nút đủ lớn để bấm. */
@media (max-width: 1180px) {
  .kh-luoi.bon, .kh-luoi.nam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-luoi.ba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ⚠️ Ô TRA KHÔNG ĐƯỢC BÓP CÒN 0 (4/9/2026 — đo thật ở bề ngang 999px sau khi thêm nút 🏠 Cổng học
   viên): cột trái ăn 264px, bốn nút có chữ ăn hơn 520px nữa, ô tra co hết cỡ rồi biến mất và chữ
   của các nút chồng lên nhau. Rút chữ trong nút SỚM hơn — từ 1180px là chỉ còn biểu tượng — và
   đặt sàn bề ngang cho ô tra để nó không bao giờ tụt về 0 lần nữa. */
@media (max-width: 1180px) {
  .kh-cua .chuText, .kh-ve-cong .chuText { display: none; }
}
@media (max-width: 980px) {
  .kh-luoi.hai, .kh-luoi.tn { grid-template-columns: minmax(0, 1fr); }
  .kh-triet { grid-template-columns: minmax(0, 1fr); }
  .kh-nut { padding: 12px 14px; }
}
@media (max-width: 860px) {
  .kh-ben {
    position: fixed; z-index: 60; left: 0; top: 0; height: 100vh;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--bong-nang);
    background: var(--kem);
  }
  body.kh-mo-ben .kh-ben { transform: none; }
  body.kh-mo-ben::after { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(40, 32, 14, .4); }
  .kh-nut.kh-motay { display: flex; }
  .kh-tren { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  /* Thứ tự trên điện thoại: ☰ · ba cửa vào · ô chữ cái tắt · ô tra chiếm trọn dòng dưới.
     (Không đặt order cho .kh-toi thì nó dính ngay cạnh ☰ — trông như hai nút cùng nhóm.) */
  .kh-otim { order: 4; flex: 1 0 100%; max-width: none; }
  .kh-cua { order: 2; margin-left: auto; }
  .kh-toi { order: 3; }
  .kh-than { padding: 16px 14px 70px; }
  .kh-luoi.bon, .kh-luoi.nam, .kh-luoi.ba { grid-template-columns: minmax(0, 1fr); }
  .kh-nhanh { flex-direction: column; gap: 12px; }
  .kh-matchu { width: 100%; border-right: 0; border-bottom: 1px solid var(--vien-nhat); padding: 0 0 14px; }
  .kh-matchu .lon { font-size: 5rem; }
  .kh-tin .py { font-size: 1.7rem; }
  .kh-o-luoi { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .kh-doc p { font-size: 1.2rem; line-height: 2; }
}

/* ═══ PHỒN THỂ trước, GIẢN THỂ sau (4/9/2026, Zhenyin chốt) ═══════════════════════════════════
   滅（灭）· 滅亡（灭亡）. Chữ dùng chung (亡 死 人 水) KHÔNG có ngoặc — hai span này chỉ được
   sinh ra khi hai thể chữ thật sự khác nhau (`U.chuHan` trong kho-app.js). Luật chuyển thể và
   vì sao không đổi bừa: xem đầu tệp `public/kho/kho-the-chu.js`.
   Giản thể luôn NHẠT HƠN và NHỎ HƠN mặt chữ chính: kho của trung tâm dạy phồn thể, giản thể ở
   đây là chú thích để học viên đối chiếu, không phải mặt chữ ngang hàng. */
.kh-gian {
  font-family: var(--khai);
  color: var(--nau-nhat);
  font-size: .78em;      /* theo cỡ chữ mẹ, nên tự co ở mọi chỗ: mặt chữ 6.2rem lẫn dòng 1.5rem */
  font-weight: 400;
  white-space: nowrap;   /* KHÔNG cho （灭）rớt xuống dòng lìa khỏi chữ phồn của nó */
}
/* Giản thể của cả một CÂU (câu ví dụ thành ngữ, 12/10/2026): nowrap ở đây đẩy câu dài tràn ngang
   480px trên điện thoại. Quá 6 chữ thì cho xuống dòng như văn bản thường. */
.kh-gian.kh-gian-dai { white-space: normal; }
/* Ô CHỮ trong lưới duyệt (vần · chủ đề · họ âm · họ ý): giản thể xuống dòng riêng, cỡ nhỏ —
   nhét （灭）cùng hàng thì ô chật lại và mặt chữ chính, thứ học viên cần nhìn, bị nhỏ đi. */
.kh-gian-duoi {
  display: block;
  font-family: var(--khai);
  color: var(--nau-nhat);
  font-size: .5em;
  line-height: 1.15;
  margin-top: 1px;
  opacity: .85;
}
/* Chỗ mặt chữ RẤT TO (thẻ nhanh 6.2rem · đỉnh bản đồ cấu tạo · chữ kết quả của sơ đồ chiết tự):
   .78em hoá ra gần 5rem, cặp （灭）chiếm gần nửa thẻ và mặt chữ chính mất thế đứng — đo bằng ảnh
   chụp 4/9/2026. Ở những chỗ này giản thể chỉ còn cỡ 0.3em, đủ đọc mà không tranh chỗ. */
.kh-matchu .lon .kh-gian,
.kh-bando .dinh .kh-gian,
.kh-ra .kh-gian { font-size: .3em; }

/* ═══ Hàng TỪ GHÉP trên điện thoại: nghĩa tiếng Việt xuống HẲN dòng dưới (4/9/2026) ═══════════
   Zhenyin báo từ chính máy anh: "Hiển thị chữ Việt bị vắt dòng — *bị tiêu / diệt*, *bị / thương /
   và chết*. Vậy cho hẳn xuống dòng bên dưới nhé." Hàng đang xếp bốn thứ trên MỘT dòng ngang —
   chữ Hán + （giản thể）+ pinyin + nghĩa — nên trên màn 375px phần nghĩa chỉ còn hơn trăm pixel
   và bị bẻ vụn giữa chừng. Cặp （灭亡）thêm vào 4/9/2026 làm chỗ ấy chật thêm.
   Cách chữa: cho hàng xuống dòng, khoá pinyin dính liền chữ Hán ở dòng trên, còn nghĩa chiếm
   TRỌN dòng dưới — vẫn đọc theo lối "mỗi mục một ô", không vắt giữa chừng nữa.
   ⚠️ Phải bỏ `-webkit-line-clamp: 2` ở đây: nghĩa dài (vd "trốn đi nước ngoài, sống lưu vong")
   nằm trọn dòng riêng thì cắt còn 2 dòng là mất chữ mà không có dấu hiệu gì. */
@media (max-width: 620px) {
  .kh-dong { flex-wrap: wrap; row-gap: 3px; align-items: baseline; }
  .kh-dong .m { flex: 0 0 auto; }
  .kh-dong .p { flex: 0 0 auto; min-width: 0; }
  .kh-dong .n {
    flex: 1 0 100%;            /* chiếm trọn một dòng riêng, luôn nằm dưới chữ Hán + pinyin */
    -webkit-line-clamp: initial; display: block; overflow: visible;
  }
  .kh-dong .he { order: 3; }   /* nhãn "trong bài" theo xuống cùng dòng nghĩa, không chen ngang */
}

/* ═══════════════════════════════════════════════════════════════════════════
   🧷 BÀN GHÉP ĐOẠN (4/9/2026) — nguyên văn ↔ bản dịch chính thức.
   Màn của THẦY, nằm trong bàn quản trị thư viện. Hai cột chữ đặt cạnh nhau để mắt dóng được ngay;
   trên điện thoại thì xếp dọc (thầy vẫn hay soát bằng iPad dựng đứng).
   ═══════════════════════════════════════════════════════════════════════════ */
.gd-ds { display: flex; flex-direction: column; gap: 8px; }
.gd-hang {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--kem-sang); border: 1px solid var(--vien); border-radius: 14px;
  padding: 11px 14px; cursor: pointer; min-height: 56px; color: inherit; font: inherit;
}
@media (hover: hover) { .gd-hang:hover { border-color: var(--oliu-dam); } }
.gd-hang:active { background: var(--kem-sau); }
.gd-hang .so { font-weight: 800; color: var(--oliu-dam); min-width: 56px; }
.gd-hang .ten { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gd-hang .ten .mo { font-size: .78rem; color: var(--nau-nhat); }

.gd-vien {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: .75rem; font-weight: 800; white-space: nowrap;
}
.gd-vien.xanh      { background: #E7F2E0; color: #3D7A2E; }
.gd-vien.xanh-nhat { background: var(--kem-sau); color: var(--nau-nhat); }
.gd-vien.vang      { background: #FDF1D8; color: #A8791A; }
.gd-vien.do        { background: #FDEEEC; color: #A83A2E; }
.gd-vien.xam       { background: var(--kem-sau); color: var(--nau-nhat); }

.gd-tom { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gd-o {
  flex: 1 1 96px; background: var(--kem-sau); border-radius: 13px; padding: 9px 11px; text-align: center;
}
.gd-o .n { font-size: 1.4rem; font-weight: 800; color: var(--oliu-dam); line-height: 1.2; }
.gd-o .l { font-size: .72rem; color: var(--nau-nhat); line-height: 1.4; margin-top: 2px; }

.gd-thanh { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gd-loc { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--nau-nhat); min-height: 48px; cursor: pointer; }
.gd-loc input { width: 20px; height: 20px; }

.gd-ban { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.gd-cap { border: 1px solid var(--vien); border-radius: 16px; background: var(--kem-sang); overflow: hidden; }
.gd-cap.soat { border-color: #E0BE72; box-shadow: inset 3px 0 0 #E0BE72; }
.gd-cap-dau {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 7px 13px; background: var(--kem-sau);
}
.gd-cap-dau .vt { font-size: .76rem; font-weight: 700; color: var(--nau-nhat); }
.gd-cap-than { display: grid; grid-template-columns: 1fr 1fr; }
.gd-ben { padding: 10px 13px; min-width: 0; }
.gd-ben.goc { border-right: 1px dashed var(--vien); }
.gd-ben-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gd-ben-dau .n {
  font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--nau-nhat);
}
.gd-doi { display: flex; gap: 4px; }
.gd-ti {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--vien);
  background: var(--kem); color: var(--oliu-dam); font-weight: 800; cursor: pointer; line-height: 1;
}
@media (hover: hover) { .gd-ti:hover { background: var(--kem-sau); } }
.gd-ti:active { background: var(--kem-sau); }
.gd-doan { margin: 0 0 7px; font-size: .87rem; line-height: 1.75; }
/* ⚠️ Dùng `--khai` như cả kho, nhưng ĐÈ màu về màu chữ thường: luật chung `.han` tô màu son
   (--do-chu) cho MẶT CHỮ đứng lẻ trong thẻ tra cứu, còn ở đây là nguyên một đoạn văn — cả đoạn màu
   son thì nhức mắt và thầy phải soát hàng chục đoạn liền. */
.gd-doan.han { font-family: var(--khai); color: var(--nau); line-height: 1.9; }
/* Tiêu đề mục đi CHUNG cặp với đoạn văn liền sau (Zhenyin chốt 4/9/2026) — nên nó phải nhìn ra
   ngay là tiêu đề, không thì thầy tưởng bảng ghép nuốt nhầm một đoạn văn vào cặp. */
.gd-doan.demuc { font-weight: 800; font-size: 1.02rem; color: var(--oliu-dam); }
.gd-trong { font-size: .82rem; color: var(--nau-nhat); font-style: italic; line-height: 1.6; }
.gd-cap-nut { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 13px 11px; }

@media (max-width: 720px) {
  .gd-cap-than { grid-template-columns: 1fr; }
  .gd-ben.goc { border-right: 0; border-bottom: 1px dashed var(--vien); }
}


/* ===================== 🪟 CHẾ ĐỘ KHUNG CỬA SỔ NHỎ (`?khung=1`, 4/9/2026) =====================
   📖 Bảo Thư Các nhúng chính trang này vào một khung để học viên tra chữ mà KHÔNG rời trang sách
   (Zhenyin 4/9/2026: *"nên mở hồ sơ hoặc soi ở 1 khung cửa sổ nhỏ, tôi đọc luôn trên đó, đỡ phải
   chuyển qua chuyển lại"*).

   ⚠️ CÙNG MỘT TRANG, chỉ giấu bớt. Không có bản Kho chữ Hán rút gọn thứ hai — hai bản là hai chỗ
   để lệch nhau, mà chỗ lệch bao giờ cũng là chỗ không ai mở ra xem.
   ⚠️ Chỉ giấu những thứ ĐI RA KHỎI KHO (cột mục lục · 🏠 Cổng học viên · ảnh đại diện · nút ☰):
   trong một cửa sổ nhỏ chúng vừa chiếm chỗ vừa lái nhầm cả trình đọc vào trong khung. Ô tra cứu và
   ba nút ✍️ 🔤 🗂️ thì GIỮ — đó là việc người ta mở cửa sổ này ra để làm. */
.kh-khung .kh-ben,
.kh-khung .kh-ve-cong,
.kh-khung .kh-toi,
.kh-khung .kh-nut.kh-motay { display: none !important; }
.kh-khung .kh-tren { padding: 10px 14px; gap: 10px; }
.kh-khung .kh-than { padding: 14px 16px 40px; }
/* Trên điện thoại cửa sổ chỉ còn một cột hẹp: ba nút ✍️ 🔤 🗂️ bị đẩy xuống dòng riêng, ăn mất một
   phần ba chiều cao mà không giúp gì cho việc đang làm (xem hồ sơ MỘT chữ). Giấu chúng, giữ ô tra. */
@media (max-width: 560px) {
  .kh-khung .kh-cua { display: none; }
}

/* ===== 🧩 BÀN VĂN CÚ (5/9/2026) — cùng lối bày với .gd-* của bàn ghép đoạn ngay trên ===== */
.vc-chuong, .vc-doan { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vc-tom { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-o { flex: 1 1 96px; background: var(--kem-sau); border-radius: 13px; padding: 9px 11px; text-align: center; }
.vc-o .n { font-size: 1.4rem; font-weight: 800; color: var(--oliu-dam); line-height: 1.2; }
.vc-o .l { font-size: .72rem; color: var(--nau-nhat); line-height: 1.4; margin-top: 2px; }
/* Câu nguyên văn: mỗi cụm một miếng, gạch chân theo màu vai trò — nhìn là thấy đã gán tới đâu. */
.vc-cau-chu {
  font-family: "Songti TC", "Songti SC", "STSong", "SimSun", serif;
  font-size: 1.5rem; line-height: 2.1; margin-bottom: 10px; word-break: break-word;
}
.vc-mieng { padding-bottom: 2px; }
.vc-mau { font-size: .84rem; color: var(--nau-nhat); margin-bottom: 8px; }
.vc-cum { display: flex; flex-direction: column; gap: 8px; }
.vc-dong { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vc-mat {
  font-family: "Songti TC", "Songti SC", "STSong", "SimSun", serif;
  font-size: 1.15rem; min-width: 92px; flex: 0 0 auto;
}
.vc-chon { min-height: 48px; border-radius: 12px; border: 1px solid var(--vien); background: var(--kem-sang);
  padding: 0 10px; font-size: .92rem; font-weight: 700; }
.vc-ghi { flex: 1 1 180px; min-height: 48px; border-radius: 12px; border: 1px solid var(--vien);
  background: var(--kem-sang); padding: 0 12px; font-size: .92rem; }
.vc-ghi-cau { width: 100%; margin-top: 10px; border-radius: 14px; border: 1px solid var(--vien);
  background: var(--kem-sang); padding: 10px 12px; font: inherit; font-size: .92rem; resize: vertical; }
.vc-thanh { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
@media (max-width: 560px) {
  .vc-dong { gap: 6px; }
  .vc-mat { min-width: 100%; }
  .vc-chon, .vc-ghi { flex: 1 1 100%; }
}

/* ===== 📥 NẠP TỪ NGUỒN (5/9/2026) ===== */
.nn-form { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.nn-dong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nn-nhan { flex: 0 0 190px; font-size: .86rem; font-weight: 700; color: var(--nau-nhat); }
.nn-o { flex: 1 1 220px; min-height: 48px; border-radius: 12px; border: 1px solid var(--vien);
  background: var(--kem-sang); padding: 0 12px; font: inherit; font-size: .92rem; }
.nn-dong.rong .nn-o { flex: 1 1 100%; }
.nn-dong input[type="checkbox"] { width: 22px; height: 22px; }
.nn-thanh { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.nn-ban { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nn-hang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--vien); border-radius: 14px; background: var(--kem-sang); padding: 9px 12px; }
.nn-hang.xong { border-color: #9CBE86; background: #F3F7EC; }
.nn-so { flex: 0 0 34px; text-align: center; font-weight: 800; color: var(--oliu-dam); font-size: 1.05rem; }
.nn-ten { flex: 1 1 220px; min-width: 0; }
.nn-ten .t { font-weight: 700; }
.nn-xem { font-family: "Songti TC", "Songti SC", "STSong", "SimSun", serif; font-size: .95rem;
  color: var(--nau-nhat); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .nn-nhan { flex: 1 1 100%; }
  .nn-o { flex: 1 1 100%; }
}

/* ===== 📌 KHO TỪ CỦA SÁCH (6/9/2026) ===== */
.ts-ban { display: flex; flex-direction: column; gap: 8px; }
.ts-hang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--vien); border-radius: 14px; background: var(--kem-sang); padding: 9px 12px; }
.ts-tu { flex: 0 0 auto; min-width: 92px; }
.ts-tu .han { font-family: "Songti TC", "Songti SC", "STSong", "SimSun", serif; font-size: 1.35rem; }
.ts-tu .py { font-size: .78rem; color: var(--nau-nhat); }
.ts-nghia { flex: 1 1 220px; min-width: 0; font-size: .92rem; }
.ts-goi { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ts-goi .kh-nut { display: inline-flex; align-items: center; gap: 7px; }
.ts-goi .han { font-family: "Songti TC", "Songti SC", "STSong", "SimSun", serif; font-size: 1.1rem; }
.ts-goi .so { background: var(--kem-sau); border-radius: 99px; padding: 1px 7px; font-size: .72rem; color: var(--nau-nhat); }
@media (max-width: 560px) { .ts-tu { flex: 1 1 100%; } }

/* ---- 📗 TẦNG TỪ (7/9/2026) — thẻ từ ghép ở kết quả tra + hồ sơ từ ---- */
/* Viền vàng + bóng nặng như thẻ 🏛️ Chiết tự: đây là thứ đứng trên cùng khi gõ một TỪ. */
.the.tu { border: 1.5px solid var(--vang); box-shadow: var(--bong-nang); }
.the.tu .the-dau { color: #8a6a1f; }
.the.tu .kh-matchu .lon { line-height: 1.15; }
/* Chip từng chữ trong thẻ từ — bấm là sang hồ sơ chữ; bọc @media (hover: hover) để điện thoại không dính màu. */
.kh-chip-chu {
  background: var(--kem-sau); border: 1px solid var(--vien-nhat); border-radius: 999px;
  padding: 6px 13px; font: inherit; font-size: .88rem; color: var(--nau); font-weight: 700;
  cursor: pointer; min-height: 36px;
}
@media (hover: hover) { .kh-chip-chu:hover { border-color: var(--oliu); color: var(--oliu-dam); } }
.kh-chip-chu:active { border-color: var(--oliu); color: var(--oliu-dam); }
/* Hai/ba cột "từ cùng chữ" trong hồ sơ từ — xuống một cột ở điện thoại. */
.kh-tu-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.kh-lien { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--oliu); cursor: pointer; padding: 0; }
.kh-lien:hover { text-decoration: underline; }
/* Dòng ghi nguồn CC BY-SA dưới khối từ — nhỏ, mờ, nhưng phải có. */
.kh-nguon-tu { margin-top: 8px; padding: 0 6px; font-size: .78rem; }
/* Mảnh khi tách cụm dài thành từ: mảnh ghép được (.ghep) tô ô-liu, chữ lẻ để mờ. Tên lớp RIÊNG —
   không mượn `.kh-chip-nho span.on` đang dùng cho chip chọn ở nơi khác. */
.kh-chip-nho .kh-manh-tu { font-family: var(--khai); font-size: 1rem; }
.kh-chip-nho .kh-manh-tu.ghep { background: var(--oliu-nhat); border-color: var(--oliu-nhat); color: var(--oliu-dam); font-weight: 800; }

/* ---- 📖 THUẬT NGỮ BẢO THƯ CÁC (7/9/2026) — sắc XANH LAM nhạt, cố ý khác vàng của 📗 từ điển ---- */
.the.btc { border: 1.5px solid #6d8bb0; background: #f7f9fc; box-shadow: var(--bong-nang); }
.the.btc .the-dau { color: #2f4a6e; }
.btc-dong { margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: #eef2f8; border: 1px solid #cfdaea; color: #1f3350; line-height: 1.6; }
.btc-dong .he { margin-left: 6px; }
.kh-dong .he.tk { background: var(--oliu-nhat); color: var(--oliu-dam); }
.kh-dong .he.tk.thongke, .btc-dong .he.tk.thongke { background: #e8eef6; color: #2f4a6e; }
/* bảng thuật ngữ ở bàn 📌 Kho từ */
.tn-hang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 11px; border: 1px solid var(--vien-nhat); border-radius: 14px; background: var(--kem-sang); margin-top: 7px; }
.tn-hang .han { font-family: var(--khai); font-size: 1.45rem; color: var(--do-chu); min-width: 74px; }
.tn-hang .py { min-width: 74px; color: var(--nau-nhat); font-size: .84rem; }
.tn-hang .vi { flex: 1 1 220px; min-width: 0; font-size: .92rem; }
.tn-hang.thay { border-color: var(--vang); }
.tn-loc { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

/* ---- 🎬 Dựng video (Xuất video chiết tự, 17/9/2026) — chỉ admin/giáo viên thấy nút mở hộp này. ---- */
.kh-xv-hop {
  position: fixed; inset: 0; z-index: 401; background: rgba(40, 32, 14, .62);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.kh-xv-dong {
  background: var(--kem-sang); border-radius: var(--r-ngoai); max-width: 900px; width: 100%;
  max-height: 100%; display: flex; flex-direction: column; box-shadow: var(--bong-nang);
}
.kh-xv-dau {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; font-weight: 800; color: var(--nau); border-bottom: 1px solid var(--vien-nhat);
}
.kh-xv-than { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; }
.kh-xv-hang { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.kh-xv-xem { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kh-xv-canvas {
  width: 220px; height: auto; max-height: 55vh; border-radius: 10px; background: #F3EAD7;
  border: 1px solid var(--vien-nhat); box-shadow: var(--bong);
}
.kh-xv-dieukhien { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.kh-xv-dieukhien label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 700; color: var(--nau); }
.kh-xv-dieukhien select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--vien-nhat); background: #fff; color: var(--nau); }
.kh-xv-cong-tac { flex-direction: row !important; align-items: center; gap: 8px !important; flex-wrap: wrap; }
.kh-xv-tro-ly { font-weight: 400; font-size: .78rem; color: var(--nau-nhat); flex-basis: 100%; }
.kh-xv-bang { margin-top: 16px; border-top: 1px solid var(--vien-nhat); padding-top: 12px; }
.kh-xv-hang-kb { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 8px 0; border-bottom: 1px dashed var(--vien-nhat); }
.kh-xv-hang-kb .nhan { flex: 0 0 96px; font-size: .78rem; font-weight: 800; color: var(--oliu-dam); align-self: center; }
.kh-xv-hang-kb .truong { flex: 1 1 160px; min-width: 140px; }
.kh-xv-hang-kb .truong .nh { font-size: .68rem; font-weight: 700; color: var(--nau-nhat); margin-bottom: 2px; }
.kh-xv-hang-kb input[type="text"] { width: 100%; font: inherit; font-size: .86rem; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--vien-nhat); background: #fff; color: var(--nau); box-sizing: border-box; }
.kh-xv-hchan {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vien-nhat);
}
.kh-xv-tiendo { flex: 1 1 120px; min-width: 90px; height: 8px; border-radius: 999px; background: var(--oliu-nhat); overflow: hidden; }
.kh-xv-tiendo .muc { height: 100%; width: 0; background: var(--oliu); transition: width .2s; }
@media (min-width: 640px) { .kh-xv-canvas { width: 260px; } }

/* ===================== 🌐 BẢN CÔNG KHAI — hạn mức 10 chữ/từ · 3 giờ (24/9/2026) =====================
 * Dùng RIÊNG bởi public/kho-cong-khai/*.js (bản sao public/kho/*.js cho khách chưa đăng nhập). Trang
 * học viên (public/kho/*.js) không gọi tới các lớp này — thêm mới, không đụng luật cũ nào ở trên. */
.kh-han-muc {
  margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-trong); background: var(--kem-sau);
  border: 1px solid var(--vien-nhat); font-size: .86rem; color: var(--nau-nhat);
}
.kh-han-muc b { color: var(--nau); }
.kh-han-muc.het { background: var(--vang-nhat); border-color: var(--vang); color: #7a5a12; }
/* 🎁 Tuần dùng thử full 7 ngày đầu (24/9/2026) — không giới hạn, tông xanh ô-liu khác hẳn tông vàng "hết hạn mức". */
.kh-han-muc.tuan-thu { background: var(--oliu-nhat); border-color: var(--oliu); color: var(--oliu-dam); }
.kh-han-muc.tuan-thu b { color: var(--oliu-dam); }
.kh-anh-khoa {
  background: var(--vang-nhat); border: 1px dashed var(--vang); border-radius: var(--r-trong);
  padding: 18px 14px; text-align: center; color: #7a5a12; display: flex; flex-direction: column;
  align-items: center; gap: 6px; justify-content: center; min-height: 140px;
}
.kh-anh-khoa .oi { font-size: 1.9rem; }
.kh-anh-khoa b { display: block; color: #6a4a10; font-size: .92rem; }
.kh-anh-khoa .m { font-size: .8rem; line-height: 1.5; }
.kh-khoa {
  background: var(--kem-sang); border: 1px solid var(--vien); border-radius: var(--r-the);
  padding: 26px 20px; text-align: center; max-width: 480px; margin: 24px auto;
}
.kh-khoa .oi { font-size: 2.6rem; }
.kh-khoa h2 { margin: 8px 0 4px; font-size: 1.25rem; color: var(--nau); }
.kh-khoa .dem {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.8rem; font-weight: 800;
  color: var(--do-chu); margin: 10px 0 2px;
}
.kh-khoa .moLai { color: var(--nau-nhat); font-size: .86rem; margin-top: 4px; }
.kh-khoa .form-dk { text-align: left; background: var(--kem-sau); border-radius: var(--r-trong); padding: 14px; margin: 16px 0 6px; }
.kh-khoa .form-dk label { display: block; font-size: .8rem; font-weight: 700; color: var(--nau-nhat); margin: 8px 0 4px; }
.kh-khoa .form-dk label:first-child { margin-top: 0; }
.kh-khoa .form-dk input {
  width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vien);
  font-size: 1rem; box-sizing: border-box; font-family: inherit; background: #fff; color: var(--nau);
}
.kh-khoa .loi-dk { color: var(--do-chu); font-size: .84rem; margin-top: 6px; min-height: 1.1em; }
.kh-khoa .form-dk-ok { text-align: center; background: var(--oliu-nhat); border-radius: var(--r-trong); padding: 16px; margin: 16px 0 6px; color: var(--oliu-dam); font-weight: 700; }

/* ═══ 🀄 PHỒN ⇄ GIẢN (6/10/2026) — màn /phon-gian + thẻ trong hồ sơ chữ (kho/kho-phon-gian.js).
   Tiền tố `pg-`. Phồn = đỏ chữ (--do-chu), giản = xanh mực (--pg-xanh): hai màu cố định ở mọi chỗ
   để mắt học viên quen "đỏ là phồn, xanh là giản". ═══ */
.kh-trang { --pg-xanh: #2f6a8a; --pg-xanh-nhat: #e4eff5; }
.pg-ph { font-family: var(--khai); color: var(--do-chu); }
.pg-gi { font-family: var(--khai); color: var(--pg-xanh); }
.pg-mui { color: var(--vang); font-size: .62em; margin: 0 3px; }
.pg-dau h1 { margin: 0; font-size: 1.55rem; color: var(--oliu-dam); }
.pg-dau p { margin: 4px 0 12px; color: var(--nau-nhat); }
.pg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tabs .kh-chip { flex: 0 0 auto; }
.pg-so-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) {
  .pg-so-luoi { gap: 8px; }
  .pg-so { padding: 10px 6px; font-size: .74rem; line-height: 1.35; }
  .pg-so b { font-size: 1.45rem; }
  .pg-so > span:last-child { display: none; }
}
.pg-so { background: var(--kem-sang); border: 1px solid var(--vien); border-radius: var(--r-the); padding: 14px; text-align: center; font-size: .86rem; color: var(--nau-nhat); }
.pg-so b { display: block; font-size: 2.1rem; line-height: 1.15; color: var(--oliu-dam); margin-top: 2px; }
.pg-so .thanh { height: 8px; border-radius: 99px; background: var(--vien-nhat); margin: 9px 0 5px; overflow: hidden; }
.pg-so .thanh i { display: block; height: 100%; background: var(--oliu); }
.pg-ss { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.pg-o { background: #fff; border: 1px solid var(--vien); border-radius: var(--r-the); padding: 10px; text-align: center; min-width: 0; }
.pg-o .nhan { font-size: .76rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.pg-o.p .nhan { color: var(--do-chu); }
.pg-o.g .nhan { color: var(--pg-xanh); }
.pg-o .ve { width: 160px; height: 160px; margin: 4px auto; position: relative; border: 1px dashed var(--vien); border-radius: 8px;
  background: linear-gradient(var(--vien-nhat), var(--vien-nhat)) center/1px 100% no-repeat,
              linear-gradient(var(--vien-nhat), var(--vien-nhat)) center/100% 1px no-repeat; }
.pg-o .ve .tinh { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; line-height: 1; }
.pg-o .net { font-size: .86rem; color: var(--nau-nhat); }
.pg-o .net b { font-size: 1.1rem; color: var(--nau); }
.pg-giua { font-size: 1.7rem; color: var(--vang); text-align: center; }
.pg-giua small { display: block; font-size: .74rem; color: var(--nau-nhat); max-width: 80px; }
@media (max-width: 560px) {
  .pg-o .ve { width: 120px; height: 120px; }
  .pg-o .ve .tinh { font-size: 90px; }
  .pg-ss { gap: 4px; }
  .pg-giua small { max-width: 44px; }
}
.pg-hang-nut { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.pg-giai { margin-top: 12px; background: var(--vang-nhat); border-radius: var(--r-trong); padding: 11px 14px; line-height: 1.6; }
.pg-giai .pg-ph, .pg-giai .pg-gi { font-size: 1.15em; }
.pg-chip { display: inline-flex; align-items: center; border: 1px solid var(--vien); background: #fff; border-radius: 12px;
  padding: 6px 11px; margin: 3px; cursor: pointer; font-size: 1.35rem; min-height: 44px; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.pg-chip:active { transform: scale(.94); }
.pg-chip.on { outline: 2px solid var(--oliu); outline-offset: 1px; background: var(--oliu-nhat); }
@media (hover: hover) { .pg-chip:hover { background: var(--oliu-nhat); } .pg-bang tr:hover { background: var(--oliu-nhat); } }
.pg-nhan { display: inline-block; background: var(--oliu-nhat); color: var(--oliu-dam); border-radius: 99px; padding: 2px 10px; font-size: .8rem; font-weight: 700; }
.pg-nhan.gi { background: var(--pg-xanh-nhat); color: var(--pg-xanh); font-family: inherit; }
.pg-nhan.ph { background: #fbe9e5; color: var(--do-chu); font-family: inherit; }
.pg-bang { width: 100%; border-collapse: collapse; }
.pg-bang td, .pg-bang th { padding: 8px 6px; border-bottom: 1px solid var(--vien-nhat); text-align: left; vertical-align: middle; }
.pg-bang th { font-size: .74rem; color: var(--nau-nhat); text-transform: uppercase; letter-spacing: .3px; }
.pg-bang tr { cursor: pointer; }
.pg-bang td .pg-ph, .pg-bang td .pg-gi { font-size: 1.7rem; }
@media (max-width: 560px) { .pg-bang th:last-child, .pg-bang td:last-child { display: none; } }
.pg-dtg { position: relative; padding-left: 22px; }
.pg-dtg:before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--vien); }
.pg-dtg div { position: relative; margin-bottom: 11px; line-height: 1.55; }
.pg-dtg div:before { content: ""; position: absolute; left: -20px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--oliu); }
.pg-dtg div.huy:before { background: var(--do-chu); }
.pg-dtg b { color: var(--oliu-dam); }
.pg-nguon { margin: 0; padding-left: 18px; font-size: .9rem; line-height: 1.6; }
.pg-nguon a { color: var(--oliu-dam); }
.pg-cach { border: 1px solid var(--vien); border-radius: var(--r-the); padding: 14px; background: var(--kem-sang); }
.pg-cach h3 { margin: 0 0 6px; font-size: 1.02rem; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pg-cach .stt { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--oliu); color: #fff; align-items: center; justify-content: center; font-size: .85rem; }
.pg-cach .zh { font-family: var(--khai); color: var(--nau-nhat); font-weight: 400; font-size: .9rem; }
.pg-bo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pg-bo button { border: 1px solid var(--vien); background: #fff; border-radius: var(--r-the); padding: 11px 6px; cursor: pointer; font-family: inherit; color: var(--nau); transition: transform .12s; }
.pg-bo button:active { transform: scale(.96); }
.pg-bo button.on { background: var(--oliu-nhat); border-color: var(--oliu); }
.pg-bo .cap { font-size: 1.9rem; line-height: 1.25; }
.pg-bo .ten { font-size: .84rem; font-weight: 700; }
.pg-bo .dem { font-size: .78rem; color: var(--nau-nhat); }
.pg-bay { border: 1px solid var(--vien); border-radius: var(--r-the); background: var(--kem-sang); padding: 14px; display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: start; }
.pg-bay .lon { font-size: 3.3rem; line-height: 1; text-align: center; }
.pg-bay .lon small { display: block; font-size: .72rem; font-weight: 700; color: var(--pg-xanh); margin-top: 4px; }
.pg-bay .nhanh { border-left: 3px solid var(--do-chu); padding: 3px 10px; margin: 0 0 8px; }
.pg-bay .nhanh > .pg-ph { font-size: 1.55rem; }
.pg-bay .vd { font-size: .88rem; color: var(--nau-nhat); }
.pg-bay .vd .pg-ph, .pg-bay .vd .pg-gi { font-size: 1.05rem; }
.pg-che { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pg-che button { text-align: left; border: 1px solid var(--vien); background: #fff; border-radius: var(--r-the); padding: 14px; cursor: pointer; font-family: inherit; color: var(--nau); min-height: 96px; transition: transform .12s; }
.pg-che button:active { transform: scale(.97); }
.pg-che button b { display: block; font-size: 1rem; color: var(--oliu-dam); margin-bottom: 4px; }
.pg-che button span { font-size: .86rem; color: var(--nau-nhat); }
.pg-che button i { font-style: normal; font-size: 1.3rem; float: right; font-family: var(--khai); color: var(--do-chu); }
.pg-diem { display: flex; justify-content: space-between; font-weight: 700; color: var(--nau-nhat); font-size: .9rem; }
.pg-tien { height: 10px; background: var(--vien-nhat); border-radius: 99px; overflow: hidden; margin: 6px 0 12px; }
.pg-tien i { display: block; height: 100%; background: var(--oliu); transition: width .3s; }
.pg-de { text-align: center; padding: 6px 0 2px; }
.pg-de .hoi { font-size: .92rem; color: var(--nau-nhat); font-weight: 700; }
.pg-de .chu { font-size: 5.4rem; line-height: 1.2; }
.pg-de .chu .tu { font-size: 2.4rem; }
.pg-de .chu .pg-mui { font-size: .4em; }
.pg-da { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.pg-da button { min-height: 72px; border: 2px solid var(--vien); background: #fff; border-radius: var(--r-the); font-size: 2.3rem; cursor: pointer; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.pg-da button.chu-nho { font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--nau); padding: 8px; }
.pg-da button:active { transform: scale(.95); }
.pg-da button.dung { border-color: #2e7d4f; background: #e7f4ec; }
.pg-da button.sai { border-color: var(--do-chu); background: #fbe9e5; }
.pg-da button:disabled { cursor: default; }
.pg-phan-hoi { margin-top: 12px; border-radius: var(--r-trong); padding: 11px 14px; display: none; line-height: 1.6; }
.pg-phan-hoi.dung { display: block; background: #e7f4ec; }
.pg-phan-hoi.sai { display: block; background: #fbe9e5; }
.pg-phan-hoi a, .pg-giai a { color: var(--oliu-dam); font-weight: 700; }
.pg-vao { width: 100%; min-height: 84px; box-sizing: border-box; border: 1px solid var(--vien); border-radius: var(--r-trong); padding: 12px;
  font: 1.25rem var(--khai); background: #fff; color: var(--nau); resize: vertical; }
.pg-soi { font-family: var(--khai); font-size: 1.5rem; line-height: 2.1; background: #fff; border: 1px solid var(--vien); border-radius: var(--r-trong); padding: 12px; margin: 10px 0 6px; min-height: 56px; word-break: break-all; }
.pg-soi .doi { background: var(--pg-xanh-nhat); border-radius: 6px; padding: 0 3px; position: relative; }
.pg-soi .doi sup { font-size: .5em; color: var(--do-chu); position: absolute; top: -1.05em; left: 50%; transform: translateX(-50%); line-height: 1; }
.pg-canh { background: #fbe9e5; border-radius: var(--r-trong); padding: 10px 12px; margin-top: 12px; font-size: .94rem; line-height: 1.6; }
.pg-ho-dau { margin: 14px 0 4px; font-size: .94rem; }
.pg-ho-dau .pg-ph, .pg-ho-dau .pg-gi { font-size: 1.2em; }