/* ═══════════════ KHUNG TRANG A4 ═══════════════
   🔴 KHỐI NÀY TỪNG KHÔNG TỒN TẠI, VÀ ĐÓ LÀ MẢNH CUỐI CỦA f0ea02a.

   `lib/style.py` mang toàn bộ CSS bản in và đã bị xoá. Phía MÀN HÌNH được vá
   dần qua nhiều phiên (`.mnum`, `.chart figcaption`, `.dk`…), mỗi lần một chỗ,
   mỗi lần vì có người nhìn thấy. Phía BẢN IN thì chưa ai nhìn — nên 35 class mà
   `trang_in()` dựng ra không có một dòng rule nào, suốt từ đó tới 06/08/2026.

   Không có gì nổ. `/api/render` trả 200, `api/pdf.js` phân trang đúng, PDF ra
   đúng số trang và đủ một trăm mục. Nó chỉ không có bố cục: bìa mất nền tối nên
   chữ vàng cát nằm trên giấy trắng, runner đổ xuống thành hai dòng chữ lạ giữa
   thân bài, số mục dính liền tên mục, mục lục mất cột.

   Và đây là thứ khách TRẢ TIỀN để cầm. Phép kiểm 6g12 nay đòi mọi class mà
   `trang_in()` dựng ra phải có rule trong chính chuỗi này.

   Đơn vị: mm cho khoảng cách, pt cho chữ. Trộn px vào là bố cục trôi theo DPI
   của máy in. */
@page { size: A4; margin: 0; }

/* 🔴 BẢN IN KHÔNG NẠP MỘT DÒNG RESET NÀO. `* { margin:0; box-sizing:border-box }`
   nằm trong `CSS_APP`, mà `CSS_APP` chỉ đi cùng `trang_form()` — bản in ghép
   chuỗi riêng (xem `api/index.py:api_render`). Thiếu `border-box` thì
   `width: 210mm` cộng thêm 32mm padding và trang rộng 242mm: PDF A4 bị tràn
   sang phải, đều đặn ở mọi trang. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--paper); color: var(--ink);
  font-family: var(--serif); line-height: 1.6; }

.page {
  width: 210mm; min-height: 297mm; padding: 16mm 16mm 12mm;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  page-break-after: always; break-after: page; overflow: hidden;
}
.page:last-child { page-break-after: auto; break-after: auto; }
.body-area { flex: 1 1 auto; }

/* Bìa và trang cuối — ivory paper, coral accents (DS). */
.page-dark { background: var(--bg); color: var(--fg); }
.page-dark .kicker, .page-dark .runner, .page-dark .folio { color: var(--muted); }

/* Runner và folio: hai dải nhỏ trên/dưới mỗi trang. Thiếu `display:flex` thì
   hai `<span>` của chúng dán liền nhau thành một dòng chữ vô nghĩa giữa bài. */
.runner, .folio {
  display: flex; justify-content: space-between; gap: 6mm; flex: none;
  font-family: var(--mono); font-size: 6.8pt; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.runner { padding-bottom: 3mm; margin-bottom: 5mm; border-bottom: 0.25mm solid var(--hairline2); }
.folio { padding-top: 3mm; margin-top: 5mm; border-top: 0.25mm solid var(--hairline2); }

.kicker {
  font-family: var(--mono); font-size: 7pt; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-d);
}
/* Số trang cuối — `api/pdf.js` điền vào lúc phân trang, nên nó không có mặt
   trong HTML gốc và rất dễ bị bỏ quên khi soạn CSS. */
.so-cuoi { font-variant-numeric: tabular-nums; }
.lede { font-size: 10.5pt; line-height: 1.6; color: var(--ink2); max-width: 150mm; }
.note {
  border: 0.25mm solid var(--hairline); background: var(--nen);
  padding: 4mm 5mm; font-size: 9.5pt; line-height: 1.55; margin-top: 5mm;
}
.pull {
  border-left: 0.8mm solid var(--gold-d); padding: 1mm 0 1mm 4mm;
  margin: 4mm 0; font-size: 11.5pt; line-height: 1.5; color: var(--ink);
}

/* ── đầu mỗi phần ── */
.mod-head { margin: 0 0 6mm; border-top: 0.5mm solid var(--ink); padding-top: 4mm; }
.mod-head-row { display: flex; align-items: baseline; gap: 4mm; flex-wrap: wrap; }
.mod-num {
  font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-d); flex: none;
}
.mod-title { font-family: var(--display); font-weight: 800; font-size: 19pt; line-height: 1.15; }
.mod-sub { font-family: var(--mono); font-size: 7.5pt; color: var(--muted); margin-top: 1.5mm; }
.mod-nguon { font-size: 9pt; color: var(--muted); font-style: italic; margin-top: 1mm; }

/* ── một mục ── */
.pitem { break-inside: avoid; }
.muc { margin-bottom: 6mm; }
/* 🔴 `flex` + `baseline`: số mục là một cột riêng ở lề trái. Thiếu rule thì
   `<span class="mnum">34</span>` dán vào chữ đầu — "34Bản đồ chồng lấp" — trên
   cả một trăm tiêu đề. Đúng lỗi đã sửa cho MÀN HÌNH ở `CSS_BAO200`, chưa sửa
   cho bản in. */
.muc > h3 {
  display: flex; align-items: baseline; gap: 0 3mm; flex-wrap: wrap;
  font-family: var(--display); font-weight: 700; font-size: 13pt;
  line-height: 1.25; margin-bottom: 2mm;
}
.muc > h3 .mnum {
  flex: none; font-family: var(--mono); font-size: 8pt;
  font-weight: 400; color: var(--muted);
}
.muc p { font-size: 10pt; line-height: 1.62; margin-bottom: 2.5mm; }
.muc ul { margin: 2mm 0 3mm 5mm; }
.muc li { font-size: 10pt; line-height: 1.55; margin-bottom: 1.2mm; }

/* ── mục lục ── */
.toc { column-count: 2; column-gap: 8mm; margin-top: 5mm; }
.toc-mod { break-inside: avoid; margin-bottom: 5mm; }
.toc-mod-head {
  display: flex; align-items: baseline; gap: 3mm; flex-wrap: wrap;
  border-bottom: 0.25mm solid var(--hairline2); padding-bottom: 1.5mm; margin-bottom: 2mm;
}
.toc-num, .toc-page {
  font-family: var(--mono); font-size: 7pt; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-d); flex: none;
}
.toc-page { margin-left: auto; color: var(--muted); }
.toc-name { font-family: var(--display); font-weight: 700; font-size: 10.5pt; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { display: flex; gap: 2.5mm; font-size: 8.5pt; line-height: 1.4;
  color: var(--ink2); margin-bottom: 1mm; }
.toc-list li span { flex: none; font-family: var(--mono); font-size: 7pt;
  color: var(--muted); min-width: 7mm; }

/* ── bảng điều khiển, trang tĩnh thứ hai ── */
.in-h3 {
  font-family: var(--display); font-weight: 700; font-size: 10.5pt;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 0.25mm solid var(--hairline2); padding-bottom: 1.5mm;
  margin: 7mm 0 3mm;
}
.in-nho { margin: 0; padding-left: 6mm; }
.in-nho li { font-size: 10pt; line-height: 1.5; margin-bottom: 2.5mm; }
.in-nho .tc-so { font-family: var(--mono); font-size: 7.5pt; color: var(--muted); }
.in-tra { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.tc-o {
  border: 0.25mm solid var(--hairline2); background: var(--nen);
  padding: 3mm 3.5mm; break-inside: avoid;
}
.tc-o b { display: block; font-size: 9.5pt; margin-bottom: 1.5mm; }
/* 🔴 `display:flex` cho từng dòng tra cứu. Thiếu nó thì cả ba mục dính thành
   một dải: "24Điểm xung đột…27Vòng lặp…28Nút dừng…". */
.tc-o span { display: flex; gap: 2.5mm; align-items: baseline;
  font-size: 8.5pt; line-height: 1.4; color: var(--ink2); margin-bottom: 1mm; }
.tc-o i { flex: none; font-family: var(--mono); font-style: normal;
  font-size: 7pt; color: var(--muted); min-width: 6mm; }

/* ── bìa ── */
.cover-top { flex: none; }
.cover-bottom { flex: none; margin-top: auto; }

/* #flow phải đúng chiều rộng cột chữ (210 - 16 - 16) để đo chiều cao khớp bản in */
#flow { width: 178mm; }
.cover { display: flex; flex-direction: column; justify-content: space-between; }
.cover-rule { height: 1px; background: var(--border); margin-top: 3mm; }
.cover-mid { padding-top: 6mm; }
.cover-eyebrow {
  font-family: var(--mono); font-size: 7.5pt; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.cover .h1 {
  font-family: var(--display); font-weight: 600; font-size: 46pt;
  line-height: 1.04; letter-spacing: 0; text-transform: none;
  margin: 5mm 0 0; color: var(--fg);
}
.cover .h1 em {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--accent);
}
.cover-name {
  font-family: var(--display); font-weight: 600; font-size: 20pt; line-height: 1.15;
  text-transform: none; letter-spacing: 0; color: var(--accent-strong); margin-top: 9mm;
}
.cover-meta { font-size: 9.5pt; line-height: 1.65; color: var(--muted); margin-top: 2mm; }
.cover-gio {
  display: inline-block; margin-top: 3mm; padding: 1mm 2.5mm;
  border: 0.3mm solid var(--border); font-family: var(--mono);
  font-size: 8pt; letter-spacing: 0.06em; color: var(--accent-strong);
}
.cover-tutru {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  border-top: 1px solid var(--border); padding-top: 4mm;
}
/* 🔴 CĂN GIỮA CẢ CỘT, KHÔNG CHỈ CĂN CHỮ. `text-align` lo phần chữ trong mỗi
   vế; `align-items` lo chỗ đứng của chính hai vế trong cột flex. Thiếu vế thứ
   hai thì hai dòng vẫn dạt trái trong một cột đã căn giữa, và trông y hệt lúc
   chưa sửa gì.
   🔴 VÀ ĐỪNG VIẾT TÊN NGHỀ VÀO BÌNH LUẬN Ở ĐÂY. CSS đi nguyên vào bản in, nên
   một từ tầng 2 trong dấu chú thích là một lần vi phạm thật — `kiemtra` bắt
   bản đầu của chính đoạn này. Lần thứ mấy cùng bẫy. */
.ct-col { display: flex; flex-direction: column; gap: 1mm;
  align-items: center; text-align: center; }
.ct-lbl {
  font-family: var(--mono); font-size: 6.4pt; letter-spacing: 0.16em;
  /* 🔴 `--accent-ink`, KHÔNG PHẢI `--gold`. Đo trên bìa dựng thật: `--accent`
     ở 10px trên giấy ra tương phản 3,54, dưới AA 4,5 cho chữ thường. */
  text-transform: uppercase; color: var(--accent-ink);
}
/* 🔴 `--cream` LÀ MÀU GIẤY, KHÔNG PHẢI MÀU CHỮ — và bìa này đã đổi sang nền
   sáng từ lâu. Bốn trụ ở đây từng viết `color: var(--cream)` từ thời bìa còn
   nền olive tối; khi bìa thành `background: var(--bg)` thì tám chữ ở bốn cột
   trở thành giấy trên giấy, tương phản **1,00**. Không gì nổ: chữ vẫn nằm
   trong DOM, `sach` vẫn sạch, mọi phép kiểm vẫn xanh — chỉ là thứ đắt nhất
   trên bìa không hiện ra, ở cả màn hình lẫn PDF khách trả tiền để cầm.
   Cùng lớp lỗi với câu ghi ở đầu `CSS_IN` (*"bìa mất nền tối nên chữ vàng cát
   nằm trên giấy trắng"*): lượt ấy sửa nền, không sửa hết màu chữ theo. */
.ct-gz {
  font-family: var(--display); font-weight: 800; font-size: 15pt;
  text-transform: uppercase; letter-spacing: -0.015em; color: var(--fg);
}
/* 🔴 CAN MỘT DÒNG, CHI MỘT DÒNG, LUÔN LUÔN. Bốn cột hẹp mà để chuỗi tự ngắt
   thì trụ nào ngắn nằm một dòng, trụ nào dài xuống hai — hàng so le, và trên
   điện thoại nó đọc như chữ của cột này tràn sang cột kia. Ép hai dòng thì cả
   bốn cột cao bằng nhau ở mọi bề ngang. */
.ct-gz i { display: block; font-style: normal; }
.cover-foot {
  display: flex; flex-wrap: wrap; gap: 2mm 6mm; margin-top: 6mm; padding-top: 3mm;
  border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 7pt; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* Chú thích biểu đồ ở bản in — cùng lý do như CSS_BAO200: `style.py` mang bố
   cục của chúng và đã bị xoá. Thiếu ở đây thì PDF in ra dải chữ dính liền. */
.chart { display: flex; flex-direction: column; align-items: center; }
.chart figcaption { display: block; align-self: stretch; margin-bottom: 1.5mm; }
.c-title { display: block; font-size: 10pt; font-weight: 600; line-height: 1.35; }
.c-note { display: block; font-size: 9pt; color: var(--muted); margin-top: 0.5mm; }
.c-nguon { display: block; font-size: 8pt; color: var(--dim); margin-top: 1mm; font-style: italic; }
.c-svg { display: block; width: min(100%, 140mm); height: auto;
  margin: 2mm auto 0; }

/* Bộ lật tấm của `hinh.lat()`: radio ẩn + label làm nút, tấm hiện theo radio
   đang chọn; tối đa bốn tấm. In thì giấu nút, chỉ tấm đang chọn ra giấy. */
.c-lat { position: relative; }
.c-lat > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.c-lat__nut { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.c-lat__nut label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; }
.c-lat__nut label:hover { border-color: var(--accent); }
.c-lat__p { display: none; }
.c-lat > input:nth-of-type(1):checked ~ .c-lat__nut label:nth-of-type(1),
.c-lat > input:nth-of-type(2):checked ~ .c-lat__nut label:nth-of-type(2),
.c-lat > input:nth-of-type(3):checked ~ .c-lat__nut label:nth-of-type(3),
.c-lat > input:nth-of-type(4):checked ~ .c-lat__nut label:nth-of-type(4) {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.c-lat > input:nth-of-type(1):checked ~ .c-lat__o > .c-lat__p:nth-of-type(1),
.c-lat > input:nth-of-type(2):checked ~ .c-lat__o > .c-lat__p:nth-of-type(2),
.c-lat > input:nth-of-type(3):checked ~ .c-lat__o > .c-lat__p:nth-of-type(3),
.c-lat > input:nth-of-type(4):checked ~ .c-lat__o > .c-lat__p:nth-of-type(4) { display: block; }
@media print { .c-lat__nut { display: none; } }


/* ═══════════════ BẢNG BỐN CỘT Ở ĐẦU BÀI ═══════════════
   🔴 BA MƯƠI DÒNG NÀY LÀ MỘT MẢNH NỮA CỦA f0ea02a, VÀ NÓ NẰM IM LÂU HƠN CẢ
   khối trên. `CSS_MAN_HINH` có sẵn một khối `@media` chỉnh cỡ chữ cho
   `.tru`, `.gz-can`, `.tru-dl`, `.tc-head` — chép sang từ lâu — trong khi
   luật GỐC của chúng thì không tồn tại ở bất kỳ tờ nào. Một khối override
   không có thứ để override: nó không nổ, không hiện, và trông y hệt CSS đang
   phục vụ cái gì đó. Bốn cột này chỉ ra mặt hôm nay, nên cho tới hôm nay
   cũng chưa ai nhìn thấy chỗ trống.

   Bố cục theo bản tham chiếu: mỗi cột một trụ, hai chữ lớn xếp dọc, rồi bốn
   dòng dữ kiện tra cứu và một danh sách ngắn ở chân cột. Cột thứ ba mặc nền
   đậm vì nó là cột nói về chính đứa trẻ; ba cột kia là hoàn cảnh.

   🔴 VÀ ĐỪNG VIẾT TÊN NGHỀ VÀO ĐÂY. Bình luận CSS đi nguyên vào bản in, nên
   một từ tầng 2 trong dấu chú thích là một lần vi phạm thật — `kiemtra` bắt
   bản đầu của chính đoạn này bằng ba từ, ở đúng chỗ hai bình luận khác trong
   file đã dặn. Mô tả lớp việc, đừng dẫn chứng bằng chính thứ bị cấm.

   🔴 KHÔNG GÕ HEX. Sắc độ lấy bằng `color-mix` từ chính token đã duyệt —
   luật bề mặt cấm tự đặt màu, và một bảng tô tay sẽ trôi khỏi bảng olive ở
   đúng lần đổi màu tiếp theo. */
.tutru-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin: 4mm 0; }
/* 🔴 `color` PHẢI KHAI TƯỜNG MINH, KHÔNG ĐƯỢC THỪA KẾ. Bảng này còn đứng
   TRONG khối `.mdc` — khối nền tối, chữ màu kem. Ô `.tru` thì nền sáng, nên
   mọi phần tử bên trong không tự đặt màu sẽ thừa hưởng màu kem và biến mất
   trên nền sáng. Đo 09/08/2026: `.gz-can` và `.tc-can` mất trắng ở ba cột,
   chỉ cột trụ ngày còn đọc được vì nó nền tối. Bản tham chiếu không gặp ca
   này vì bảng của họ đứng trên giấy sáng. */
.tru { background: var(--warm); color: var(--ink); padding: 3.5mm 3mm;
  border-top: 2px solid var(--hairline); }
.tru-ngay { background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--fg); border-top-color: var(--accent); }
.tru-label { font-family: var(--mono); font-size: 6.6pt; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); }
.tru-ngay .tru-label { color: var(--accent-ink); }
.tru-ganzhi { display: flex; flex-direction: column; margin: 2mm 0 1mm; }
.gz-can, .gz-chi { font-family: var(--display); font-weight: 800;
  font-size: 21pt; line-height: 1.06; letter-spacing: -0.02em; }
.gz-chi { color: var(--gold-d); }
.tru-ngay .gz-can { color: var(--fg); }
.tru-ngay .gz-chi { color: var(--accent-ink); }
.tru-hanh { font-family: var(--mono); font-size: 7pt; color: var(--muted);
  letter-spacing: 0.04em; }
.tru-ngay .tru-hanh { color: var(--muted); }
.tru-tt { font-family: var(--display); font-weight: 600; font-size: 10pt;
  text-transform: none; margin: 1.5mm 0 2mm; padding-bottom: 1.5mm;
  border-bottom: 1px solid var(--hairline2); color: var(--ink); }
.tru-ngay .tru-tt { color: var(--accent-ink);
  border-bottom-color: color-mix(in srgb, var(--accent) 30%, transparent); }
/* ── Thẻ "hành ấy đi vào đời con", cùng họ `.tru` nhưng nhỏ hơn ──
   🔴 MÀU VÀO BẰNG BIẾN `--hv`, MÁY CHỦ ĐẶT TỪ `charts.HANH_MAU`. Không một mã
   hex nào ở đây: bảng màu hành là của `charts`, và tô tay một lần nữa ở tờ CSS
   là dựng bản sao thứ hai sẽ trôi ở lần đổi bảng tiếp theo (mục 10i). */
.hvao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin: 4mm 0; position: relative; }
.hvao-ten { position: absolute; top: -3.4mm; left: 0; font-family: var(--mono);
  font-size: 6.4pt; letter-spacing: 0.16em; text-transform: uppercase;
  /* 🔴 MỰC TÍNH TỪ CHÍNH `--hv`, KHÔNG THÊM MỘT BIẾN THỨ HAI. Bảng hành
     (`charts.HANH_MAU`) chọn để làm NỀN và làm cột biểu đồ; đặt nguyên nó làm
     chữ 10px thì hành Kim ra tương phản 2,34 và hành Mộc 4,32, đều dưới AA.
     Pha thêm 40% `--fg` đưa cả năm hành lên ≥4,98 mà vẫn giữ họ màu, và vì nó
     suy từ `--hv` nên không có bản sao thứ hai của bảng để trôi. */
  color: color-mix(in srgb, var(--hv, var(--accent)) 60%, var(--fg));
  font-weight: 600; }
/* 🔴 MÀU HÀNH THẤM CẢ NỀN, KHÔNG CHỈ VIỀN TRÊN. Bản đầu chỉ tô viền, và với
   hành Mộc (token của nó trong bảng olive gần như đen) thì cả thẻ đọc ra là
   không màu — chủ đầu tư xin "đẹp và có màu sắc hơn" thì một sợi viền đen
   không trả lời được. `color-mix` pha chính token ấy vào nền giấy, nên thẻ
   nhận sắc của hành mà không một mã màu mới nào được đặt ra.

   🔴 VÀ ĐỪNG CHÉP MÃ MÀU RA ĐÂY ĐỂ MINH HOẠ. Câu này từng dẫn chứng bằng đúng
   một chuỗi hex, và `k31` ③ — phép kiểm cấm gõ hex trong chính khối CSS này —
   đỏ vì nó, nhiều phiên liền. Dẫn chứng bằng thứ bị cấm là cách chắc nhất để
   một lời cảnh báo tự làm mình thành vi phạm. Gọi tên token là đủ. */
.hvao-o { color: var(--ink); padding: 3mm 3mm 3.4mm;
  background: color-mix(in srgb, var(--hv, var(--warm)) 8%, var(--warm));
  border-top: 2.5px solid var(--hv, var(--hairline)); }
.hvao-k { font-family: var(--mono); font-size: 6.4pt; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); }
.hvao-v { font-family: var(--display); font-weight: 700; font-size: 10.5pt;
  line-height: 1.3; margin-top: 1.6mm; color: var(--ink); }
.tru-dl { font-size: 7.4pt; line-height: 1.45; }
.tru-dl dt { font-family: var(--mono); font-size: 6.2pt; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-top: 1.2mm; }
/* 🔴 BỐN LUẬT `.tru-ngay` DƯỚI ĐÂY VIẾT CHO MỘT THẺ NỀN TỐI KHÔNG CÒN TỒN
   TẠI. Nền của nó nay là `color-mix(--accent 12%, --bg)` — một lớp hồng rất
   nhạt — nên `--cream` pha loãng đọc ra tương phản 1,22 và 1,78. Anh em cùng
   thẻ (`.tru-label`, `.gz-chi`, `.tru-tt`) đã chuyển sang `--accent-strong`
   từ lượt đổi nền; hai dòng chữ phụ thì không ai chuyển theo. Giữ vai của
   chúng, đổi đúng token: nhãn theo `--accent-strong`, giá trị theo `--muted`
   (tức bằng luật gốc, nên không cần luật đè nữa). */
.tru-ngay .tru-dl dt { color: var(--accent-ink); }
.tru-dl dd { color: var(--ink2); }
.tru-tangcan { margin-top: 2.5mm; padding-top: 2mm;
  border-top: 1px solid var(--hairline2); }
.tru-ngay .tru-tangcan {
  border-top-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.tc-head { font-family: var(--mono); font-size: 6.2pt; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1mm; }
.tru-ngay .tc-head { color: var(--accent-ink); }
.tc-row { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 7.2pt; }
.tc-can { font-family: var(--display); font-weight: 700; font-size: 8.6pt; }
.tc-meta { font-family: var(--mono); font-size: 6pt; color: var(--muted); }

/* ═══════════════ BẢNG TÀNG CAN (mục 5 của bản trọn đời) ═══════════════
   Bốn cột, mỗi cột một trụ: chữ lộ ở trên, địa chi, rồi những chữ nằm khuất
   bên trong chi ấy. Cùng họ với bảng bốn cột ngay trên nhưng nhẹ hơn hẳn —
   nó chỉ mang một câu chứ không mang chín dữ kiện.

   🔴 KHÔNG GÕ HEX, và luật này áp cho cả khối dưới đây: nó nằm sau mốc
   `BẢNG BỐN CỘT Ở ĐẦU BÀI`, tức trong đúng vùng `k31` ③ quét mã màu gõ tay.
   Sắc độ lấy bằng `color-mix` từ token đã duyệt.

   🔴 ĐỌC TOKEN MỚI (`--fg` · `--muted` · `--border`), KHÔNG ĐỌC ALIAS OLIVE
   (`--ink` · `--ink2` · `--dim` · `--hairline`) như mấy chục dòng ngay trên.
   Alias còn sống làm shim cho PDF và widget cũ; CSS viết mới thì đọc thẳng
   token, nếu không thì ngày ai đó gỡ shim, khối này đi theo.

   🔴 VIỀN CHỨ KHÔNG PHẢI NỀN, TRỪ CỘT NGÀY. Bốn ô nền đậm cạnh nhau thì
   không ô nào còn là điểm nhấn, và bản in đen trắng mất luôn câu "cột này
   nói về chính con" — cùng lý do bảng bốn cột chỉ tô một cột. */
.tangcan-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin: 4mm 0; }
.tangcan-grid .tc-col { color: var(--fg); padding: 3mm 2.6mm;
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tangcan-grid .tc-col-ngay {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: var(--accent); }
.tangcan-grid .tc-tru { font-family: var(--mono); font-size: 6.4pt;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tangcan-grid .tc-col-ngay .tc-tru { color: var(--accent-ink); }
.tangcan-grid .tc-lo { font-family: var(--display); font-weight: 700;
  font-size: 11pt; line-height: 1.2; margin-top: 1.6mm; }
.tangcan-grid .tc-chi { font-family: var(--display); font-weight: 600;
  font-size: 9.4pt; line-height: 1.2; color: var(--muted);
  padding-bottom: 1.6mm; border-bottom: 1px solid var(--border); }
.tangcan-grid .tc-tang { font-size: 7.4pt; line-height: 1.35;
  margin-top: 1.4mm; }
.tangcan-grid .tc-hanh, .tangcan-grid .tc-khi { font-family: var(--mono);
  font-size: 6.2pt; letter-spacing: 0.04em; color: var(--muted); }

/* ═══════════════ BỐN BẢNG CỦA BẢN GIẢI MÃ TÊN ═══════════════

   🔴 CÙNG LUẬT VỚI BẢNG BỐN CỘT NGAY TRÊN: token chứ không hex, viền chứ
   không nền (trừ ô muốn nhấn), và mỗi class phải có một rule ĐỨNG MỘT MÌNH ở
   tờ này. `k111` ③ đọc mọi thuộc tính class trong hình dựng ra rồi đòi từng
   tên có rule ở `CSS_IN` — thiếu một tên là PDF in ra một dải chữ dính liền
   trong khi màn hình vẫn đúng nhờ tờ khác, đúng cái lỗ ba tháng `k31` đã đo.
   🔴 VÀ ĐỪNG DẪN CHỨNG BẰNG MỘT THUỘC TÍNH `class` VIẾT ĐỦ TRONG GHI CHÚ NÀY:
   `kiemtra` gom mọi thuộc tính class viết cứng của trang rồi đòi mỗi nhóm có
   ít nhất một rule, và nó không bóc ghi chú trước khi gom. Bản đầu của chính
   đoạn này làm phép kiểm đỏ. Repo đã dính đúng hình dạng ấy ba lần.

   🔴 BẢNG CHỮ VẼ Ở BA CHỖ, MẶC MỘT ÁO: hình của mục 1, bìa web
   (`coverTenChu`) và bìa bản in (`_bia_in`). Ba tờ CSS cho một lưới là ba bản
   sẽ trôi; ở đây chỉ có tờ in và tờ màn hình, và tờ màn hình chỉ chỉnh CỠ. */
/* 🔴 FLEX CHIA ĐỀU, KHÔNG PHẢI LƯỚI BA CỘT. Tên khai sinh chạy từ HAI tiếng
   ("Nguyễn Bảo") tới BỐN ("Nguyễn Thị Minh Anh") — cả hai đều có thật trong
   bộ hồ sơ mẫu. Ghim ba cột thì tên hai tiếng chừa một khoảng trống bên phải
   và tên bốn tiếng rớt chữ cuối xuống một hàng riêng, đứng lệch hẳn. Chia
   đều theo SỐ Ô thì cụm nào cũng cân, và chiều rộng tự co. */
.tenchu-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 4mm 0; }
.tenchu-o { flex: 1 1 0; min-width: 24mm; color: var(--fg);
  padding: 3mm 2.6mm; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tenchu-vai { font-family: var(--mono); font-size: 6.4pt;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tenchu-chu { font-family: var(--display); font-weight: 700;
  font-size: 13pt; line-height: 1.2; margin-top: 1.4mm; }
/* 🔴 CHỮ HÁN ĐI QUA MỘT BỘ CHỮ KHÁC, VÀ ĐÓ LÀ NGOẠI LỆ CÓ CHỦ Ý. Ba bộ chữ
   của sản phẩm chỉ nhúng subset latin + vietnamese, nên một chữ Hán đặt trong
   `var(--display)` rơi về bộ chữ hệ thống — trên Chromium serverless thành ô
   vuông. Bảng tên của Câu Chuyện đã mở đúng cửa này (`.cc-han`); chép nguyên
   danh sách dự phòng ấy chứ đừng nghĩ ra một danh sách thứ hai. */
.tenchu-han { font-family: "Noto Serif CJK SC", "Songti SC", "PingFang SC",
  serif; font-size: 12pt; line-height: 1.2; margin-top: 0.8mm;
  color: var(--accent-ink); }
.tenchu-dong { font-family: var(--mono); font-size: 6.6pt;
  letter-spacing: 0.04em; color: var(--muted); margin-top: 1.4mm; }
.tenchu-nguon { font-size: 6.8pt; line-height: 1.3; color: var(--muted);
  margin-top: 0.8mm; }
.tenchu-doi { display: inline-block; margin-top: 1.2mm; padding: 0.4mm 1.4mm;
  font-family: var(--mono); font-size: 6pt; letter-spacing: 0.1em;
  color: var(--accent-ink); border: 0.3mm solid var(--border);
  border-radius: var(--radius-sm); }

/* Thẻ điểm tên trên bìa in (`_the_diem_in`). Bảng TĨNH: tổng cộng bốn hàng
   tên/điểm, không mờ và không bấm — bản in chỉ tới tay người đã mua.
   🔴 KHÔNG VẼ THANH Ở ĐÂY. Trên web thanh ngang là thứ đọc lướt được; trên
   bìa in nó tranh chỗ với bảng chữ ngay trên, và con số cộng nhãn "trên bao
   nhiêu" đã nói đủ. */
.td-in { margin: 4mm 0 0; padding-top: 2.4mm;
  border-top: 0.3mm solid var(--border); }
.td-in-tong { display: flex; align-items: baseline; gap: 2mm;
  margin-bottom: 1.6mm; }
.td-in-tong b { font-family: var(--mono); font-weight: 500; font-size: 20pt;
  line-height: 1; color: var(--accent-ink); }
.td-in-tong span { font-family: var(--mono); font-size: 6.6pt;
  letter-spacing: 0.08em; color: var(--muted); }
.td-in-h { display: flex; align-items: baseline; gap: 2mm;
  padding: 1.1mm 0; border-top: 0.2mm solid var(--border); }
.td-in-h span { flex: 1 1 auto; font-size: 7.8pt; line-height: 1.3; }
.td-in-h b { font-family: var(--mono); font-weight: 500; font-size: 9pt; }
.td-in-h i { font-family: var(--mono); font-style: normal; font-size: 6.4pt;
  color: var(--muted); }

/* Dải bằng / trắc. 🔴 KHÔNG PHÂN BIỆT BẰNG MÀU — nhãn chữ đứng ngay dưới mỗi
   tiếng, nên bản in đen trắng đọc y hệt bản màu. */
.thanh-dai { display: flex; flex-wrap: wrap; gap: 8px; margin: 4mm 0; }
.thanhdai-o { flex: 1 1 0; min-width: 22mm; text-align: center;
  padding: 2.6mm 2mm; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.thanhdai-vai { display: block; font-family: var(--mono); font-size: 6.4pt;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.thanhdai-chu { display: block; font-family: var(--display); font-weight: 700;
  font-size: 12pt; line-height: 1.2; margin-top: 1.2mm; }
.thanhdai-nhan { display: block; font-family: var(--mono); font-size: 7pt;
  letter-spacing: 0.08em; color: var(--muted); margin-top: 1mm; }

/* Hai thước đặt cạnh nhau. Hai cột BẰNG NHAU, cố ý: bên nào rộng hơn thì bên
   ấy đọc như bên đúng, mà cả khối tồn tại để nói hai bên không quy đổi. */
.haihe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 4mm 0; }
.haihe-cot { padding: 3mm 2.6mm; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.haihe-nhan { font-family: var(--mono); font-size: 6.4pt;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.haihe-lon { font-family: var(--display); font-weight: 700; font-size: 13pt;
  line-height: 1.2; margin-top: 1.4mm; color: var(--fg); }
.haihe-phu { font-size: 8pt; line-height: 1.45; color: var(--muted);
  margin-top: 1.6mm; }

/* ── bốn bảng của bản Bổ Khuyết Theo Mệnh ──
   🔴 BA HÀNH KHÁC MÀU NHAU, NHƯNG KHÔNG BAO GIỜ CHỈ KHÁC MÀU. Mỗi ô và mỗi
   hàng đều mang nhãn vai bằng chữ (cần bồi · hỗ trợ · bớt lại), nên bản in đen
   trắng đọc y hệt bản màu. Màu vào bằng `--hv`, máy chủ đặt từ
   `charts.HANH_MAU` — không một mã màu nào gõ ở đây. */
.boiky-dai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin: 4mm 0; }
.boiky-o { padding: 3mm 2.8mm; color: var(--fg);
  background: color-mix(in srgb, var(--hv, var(--accent)) 8%, var(--bg));
  border-top: 0.8mm solid var(--hv, var(--accent)); }
.boiky-vai { font-family: var(--mono); font-size: 6.4pt; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); }
.boiky-hanh { font-family: var(--display); font-weight: 700; font-size: 13pt;
  line-height: 1.15; margin-top: 1.2mm; }
.boiky-viec { font-size: 8pt; line-height: 1.45; color: var(--muted);
  margin-top: 1.2mm; }

/* Bảng quy chiếu. 🔴 HÀNG FLEX, KHÔNG LƯỚI GHIM CỘT: bảng hoạt động có BA cột
   (tiếp nhận · tạo tác · phối hợp) còn bốn bảng kia có hai, và `repeat()`
   không nhận một biến CSS làm số cột. Cùng cách bảng chữ đã chia đều ba tiếng
   của một cái tên. */
.bk-grid { margin: 4mm 0; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.bk-hang { display: flex; flex-wrap: wrap; gap: 2.6mm; padding: 2.4mm 2.8mm;
  border-top: 1px solid var(--border);
  border-left: 0.8mm solid var(--hv, transparent); }
.bk-dau { border-top: 0; border-left-color: transparent; }
.bk-vai { flex: 0 0 28%; }
.bk-dau .bk-vai, .bk-k { font-family: var(--mono); font-size: 6.4pt;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bk-k { flex: 1 1 0; }
.bk-role { display: block; font-family: var(--mono); font-size: 6.2pt;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bk-hanh { display: block; font-family: var(--display); font-weight: 700;
  font-size: 10.5pt; line-height: 1.2; margin-top: 0.6mm; }
.bk-bac { display: block; font-family: var(--mono); font-size: 6.2pt;
  letter-spacing: 0.06em; color: var(--muted); margin-top: 0.6mm; }
.bk-o { flex: 1 1 0; font-size: 8pt; line-height: 1.45; color: var(--fg); }
.bk-nguon { font-size: 7pt; line-height: 1.4; color: var(--muted);
  padding: 2mm 2.8mm; border-top: 1px solid var(--border); }

/* Nhà mình đang có / hướng bổ. Hai cột BẰNG NHAU, cùng lý do `.haihe-grid`:
   bên nào rộng hơn thì bên ấy đọc như bên đúng, mà bảng này chỉ đặt cạnh chứ
   không chấm điểm cho bên nào. */
.dangco-grid { margin: 4mm 0; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.dangco-hang { display: flex; flex-wrap: wrap; gap: 2.6mm; padding: 2.4mm 2.8mm;
  border-top: 1px solid var(--border); font-size: 8pt; line-height: 1.45; }
.dangco-dau { border-top: 0; }
.dangco-k { flex: 0 0 20%; font-family: var(--mono); font-size: 6.4pt;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dangco-co, .dangco-bo { flex: 1 1 0; }
.dangco-bo { color: var(--accent-ink); }
.dangco-dau .dangco-co, .dangco-dau .dangco-bo { font-family: var(--mono);
  font-size: 6.4pt; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); }
.dangco-trong { color: var(--muted); font-style: italic; }

/* Ba mức đổi. Cột khách chọn khác ba cột kia bằng VIỀN và NỀN, và tiêu đề của
   nó đổi mực — ba kênh, nên bản in đen trắng vẫn chỉ ra được cột ấy. */
.bamuc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin: 4mm 0; }
.bamuc-cot { padding: 3mm 2.8mm; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.bamuc-chon { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.bamuc-ten { font-family: var(--display); font-weight: 700; font-size: 10pt;
  line-height: 1.2; }
.bamuc-chon .bamuc-ten { color: var(--accent-ink); }
.bamuc-phu { font-size: 7.6pt; line-height: 1.4; color: var(--muted);
  margin-top: 1mm; }
.bamuc-ds { list-style: none; margin: 1.8mm 0 0; padding: 0; }
.bamuc-v { font-size: 8pt; line-height: 1.45; margin-top: 1.4mm;
  padding-left: 2.4mm; border-left: 1px solid var(--border); }
.bamuc-v b { font-weight: 700; }