/*
 * TẦNG TRANG — kiểu riêng của từng trang, bắt đầu bằng TRANG CHỦ.
 *
 * Phạm vi: chỉ những gì không dùng lại được ở nơi khác. Khung chung nằm ở
 * layout.css, thành phần dùng lại nằm ở components.css. Thấy thứ gì ở đây bắt
 * đầu lặp lại trên nhiều trang thì chuyển xuống hai file kia, đừng chép.
 *
 * NĂM ĐIỀU CẦN BIẾT TRƯỚC KHI SỬA FILE NÀY
 *
 * 1. MỌI SỐ ĐO Ở ĐÂY ĐỀU ĐỌC RA TỪ `_nguon/template.html`, không ước lượng.
 *    Chiều cao ảnh 620/600/560px, hero `100vh` / `min-height:720px`, dải 05
 *    `88vh` / `min-height:620px`, hai lớp phủ gradient của hero, dải kẻ mờ
 *    190px ở đáy bộ ảnh dải 02 — tất cả là con số của bản gốc. Chỗ nào tôi cố
 *    ý làm khác đều có chú thích "KHÁC BẢN GỐC" kèm lý do ngay tại chỗ.
 *
 * 2. NỘI DUNG MẶC ĐỊNH HIỆN. File này không đặt `opacity:0`, không `display:none`
 *    cho nội dung. Hiệu ứng là việc của base.css và chỉ bật khi có JS.
 *
 * 3. HAI ĐIỂM OVERLAP của trang chủ nằm ở mục 9. Quy tắc AUDIT-BO-CUC.md:
 *    mỗi trang nhiều nhất hai điểm, chỉ đặt lên vùng ảnh hoặc nền trống,
 *    không bao giờ đè chữ, tự tắt khi cột xếp chồng.
 *
 * 4. Đừng đổi `.tgs-khoi-06__ds` về `repeat(4, 1fr)`. Bốn thẻ KHÔNG đều nhau
 *    là chỗ chữa LỖI 2 của audit — xem chú thích dài trong components.css.
 *
 * 5. Chiều cao ảnh khai bằng `height` + `object-fit:cover` (đúng bản gốc).
 *    base.css có `img { height: auto }` nên phải khai lại `height` ở đây cho
 *    từng chỗ, và luôn kèm `object-position` để chủ thể không bị cắt trượt.
 */

/* ============================================================
 * 1 · HERO
 *
 * Bản gốc: `height:100vh; min-height:720px; overflow:hidden;
 * display:flex; align-items:flex-end` — chữ nằm sát đáy màn hình.
 * ============================================================ */

.tgs-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--tgs-muc);
}

/*
 * 100vh trên di động tính theo thanh địa chỉ lúc thu gọn, nên hero bị hụt hoặc
 * nhảy khi thanh đó hiện ra. `dvh` là đơn vị theo khung nhìn động, sửa đúng
 * việc này. Khai sau `vh` để trình duyệt cũ không hiểu `dvh` vẫn dùng dòng trên.
 */
@supports (height: 100dvh) {
  .tgs-hero { height: 100dvh; }
}

.tgs-hero__anh {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/*
 * `<picture>` PHẢI ĐƯỢC KHAI, KHÔNG PHẢI THẺ TRONG SUỐT.
 *
 * Trang chủ bọc ảnh hero trong `<picture>` để đổi bản cắt ở khổ hẹp (việc 20).
 * `<picture>` mặc định là `display: inline`, cao theo nội dung — mà `img` bên
 * trong lấy `height: 100%`, tức là 100% CỦA CHA TRỰC TIẾP. Không khai khối này
 * thì chiều cao đó tính theo một hộp inline cao tự động, ra `auto`, và ảnh hero
 * tụt về đúng chiều cao ảnh gốc thay vì phủ kín ô. Bảy trang kia không bọc
 * `<picture>` nên không đụng gì tới chúng.
 */
.tgs-hero__anh picture {
  position: absolute;
  inset: 0;
  display: block;
}

.tgs-hero__anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 50%;
}

/*
 * M5 — KHUNG CẮT HERO Ở KHỔ HẸP. Chỉ trang chủ, chỉ ≤ 475px.
 *
 * Vì sao chỉ trang chủ: `.tgs-hero__anh` trần chỉ có ở `front-page.php`. Bảy
 * trang kia đều mang thêm `--story / --collection / --craft / --community /
 * --contact / --journal / --bai`, mỗi cái tự khai `object-position` RIÊNG ở
 * cuối file này. Cùng độ đặc hiệu (0-2-0) mà khai sau, nên chúng vẫn thắng luật
 * dưới đây. ĐÃ KIỂM bằng `getComputedStyle` ở cả 6 khổ, không suy luận: hero
 * `/craft/` vẫn ra `50% 55%` sau khi thêm khối này — nghĩa là D3 không bị đụng.
 * Thêm modifier mới cho trang nào thì phải khai `object-position` cho nó, nếu
 * không nó rơi vào luật này.
 *
 * Vì sao 72% chứ không phải số khác — tính chứ không ướm:
 *   Ảnh gốc 1500 × 844. Chủ thể (đôi dép) nằm ở cột x = 800…1379, tức
 *   53,3%…91,9% bề ngang, rộng 579px. Đo bằng ngưỡng sáng < 25 trong dải
 *   y = 250…620 (loại mặt nước ở góc trái dưới, cũng tối). Lặp lại được.
 *   Ô hero ở 375 là 360 × 662 → `cover` chỉ lọt 459px ảnh gốc; ở 320 là
 *   305 × 679 → 379px. Cả hai ĐỀU HẸP HƠN 579px của chủ thể, nên KHÔNG giá trị
 *   nào cho thấy đủ đôi dép — trần lý thuyết là 79,3% ở 375 và 65,5% ở 320.
 *
 *   Ứng viên đầu là 80% (đúng tâm chủ thể, chạm trần ở cả hai khổ). ĐÃ ĐO VÀ
 *   BỎ: nó kéo mảng tường sáng ở góc trên phải xuống dưới `.tgs-nhan`
 *   ("TOGASHYAMO — A contemporary…", 10px, tức chữ nhỏ, ngưỡng AA 4,5:1) và
 *   làm tỉ số tụt DƯỚI ngưỡng: 5,18 → 4,46 ở 375 và 5,13 → 4,33 ở 320.
 *   Sửa một lỗi bằng cách đẻ ra lỗi khác thì không tính là sửa.
 *
 *   72% là giá trị lớn nhất giữ được `.tgs-nhan` ≥ 4,5:1 ở MỌI bề rộng trong
 *   dải này. Chỗ chặt nhất là mép trên 475px: **4,52:1** — sát ngưỡng, ai đổi
 *   số này phải đo lại đúng 475px trước. Bảng tỉ số của nhãn theo bề rộng ở
 *   72%: 475 → 4,52 · 430 → 4,90 · 375 → 4,81 · 362 → 4,68 · 320 → 4,59.
 *   (Ở 76% thì 375 còn đạt 4,62 nhưng 320 tụt 4,42 — hỏng.)
 *
 *   Giá phải trả của việc lùi 80% → 72%: ở 320 và 362 KHÔNG mất gì, cả hai vẫn
 *   chạm trần lý thuyết. Chỉ 375 (79,3 → 70,6) và 430 (88,1 → 75,0) nhường
 *   phần đuôi. Đổi lại H1 còn ĐƯỢC thêm: 4,56 → 6,26 ở 375.
 *
 * Vì sao 475px: đó là điểm dừng SẴN CÓ của theme (`--tgs-bu-neo`, layout.css
 * dòng 174 — dải "menu xuống 4 dòng"). Không đẻ breakpoint mới.
 *
 * KHÔNG đổi ảnh, KHÔNG đổi tỉ lệ ô hero, KHÔNG đổi khổ rộng — hai điều kiện
 * của M5 trong DANH-GIA-UX-UI.md dòng 1094.
 *
 * LƯU Ý: con số "còn 31% bề ngang ở 375" của mục 16.7.1 KHÔNG đổi và không thể
 * đổi bằng `object-position` — nó do tỉ lệ ô hero quyết định. Cái sửa được, và
 * là lỗi thật, là PHẦN CHỦ THỂ nằm trong khung. Đo lại đúng số đó, xem 17.14.
 */
@media (max-width: 475px) {
  .tgs-hero__anh img { object-position: 72% 50%; }
}

/*
 * VIỆC 20 — BẢN CẮT DỌC Ở ≤ 400px. Khai SAU khối 475 để thắng nó ở dải hẹp.
 *
 * Ở ≤ 420px `front-page.php` đổi sang `hero-stone-ledge-doc` (538×844, cắt từ
 * chính ảnh hero tại x = 700). Toạ độ trong bản dọc lệch 700px so với bản
 * ngang nên `72%` của bản ngang KHÔNG có nghĩa gì ở đây — phải đặt lại.
 *
 * VÌ SAO 100% MÀ KHÔNG SỢ LẶP LẠI LỖI CỦA 80% (mục 17.14.3):
 * 80% trên bản NGANG kéo cửa sổ tới x = 897…1276 của ảnh gốc, tức là lôi mảng
 * tường sáng ở phải vào dưới `.tgs-nhan`. Bản dọc CẮT ĐỨT ở x = 1238, nên dù
 * đẩy hết cỡ thì cửa sổ cũng chỉ tới 1238 — mảng tường đó nằm NGOÀI file ảnh,
 * không có đường nào lọt vào. Đo lại trên trang: nhãn 3,65 → 3,57 ở 375 và
 * 3,58 → 3,58 ở 420 (chênh ≤ 0,08, cùng phép đo), H1 6,94 → 7,18 ở 420.
 *
 * PHẦN CHỦ THỂ LỌT KHUNG (cùng định nghĩa với 17.14: cột x = 800…1379 của ảnh
 * gốc, rộng 579px), đo bằng `getComputedStyle` + hình học `cover` trên trang
 * thật: 320 → 65,5 % KHÔNG ĐỔI · 375 → 70,6 → 75,6 · 390 → 71,5 → 75,6 ·
 * 430 → 75,0 → 75,6 (ngoài dải, ghi để đối chiếu) · 420 → 74,4 → 75,6.
 *
 * Ở 320 KHÔNG NÂNG ĐƯỢC, và đó là điều đáng ghi nhất: `cover` phóng theo CHIỀU
 * CAO, hai bản ảnh cao bằng nhau (844px), nên cửa sổ nhìn thấy tính bằng pixel
 * ảnh gốc là NHƯ NHAU — ở 320 nó rộng 379px, hẹp hơn chủ thể 579px. Trần của
 * bản dọc là 438/579 = 75,6 % vì nó cắt mất 141px đuôi chủ thể.
 * B-17-C5 GIẢM chứ CHƯA GỠ HẲN — xem PROJECT_STATE.
 *
 * 400px là điểm dừng SẴN CÓ (`configurator.css`, ô size 44px). KHÔNG đẻ mốc
 * mới — cùng lý do 17.14 chọn 475.
 */
@media (max-width: 400px) {
  .tgs-hero__anh img { object-position: 100% 50%; }
}

/*
 * ĐÃ THỬ VÀ ĐÃ BỎ: trả lại `72%` ở ≤ 362px.
 *
 * Lý lẽ ban đầu: cửa sổ nhìn thấy rộng `W ÷ (H/844)`; khi nó hẹp hơn chủ thể
 * trong bản cắt (438px) thì phần lọt khung bằng đúng bề rộng cửa sổ, không phụ
 * thuộc `object-position` — nên ở khổ hẹp nhất cứ giữ khung 17.14 đã cân.
 *
 * ĐO XONG THÌ SAI, vì ô hero KHÔNG cao đều: 320 → 305×679 nhưng 362 → 347×662.
 * Chiều cao tụt 17px làm cửa sổ ở 362 rộng 442px, tức là ĐÃ VƯỢT 438 — vẫn còn
 * chỗ để dịch. Đặt 72% ở đó làm phần lọt khung tụt 75,6 → 71,0. Ngưỡng thật
 * nằm quanh 359px, không có điểm dừng sẵn nào ở đó.
 *
 * Nên bỏ: `100%` cho cả dải ≤ 400. Ở 320 nó KHÔNG mất gì (65,5 % ở cả hai giá
 * trị, nhãn 3,81 so với 3,72 — chênh 0,09 trên cùng phép đo).
 */

/*
 * HAI lớp phủ, đúng bản gốc — không phải một.
 *   ::before nghiêng 96deg, tối bên trái  → chữ ở cột trái đọc được.
 *   ::after  dọc 180deg, tối trên và dưới → tách hero khỏi header ở đỉnh và
 *            khỏi dải 01 ở đáy.
 * Thiếu lớp thứ hai thì chữ trắng nằm trên vùng sáng của ảnh.
 */
.tgs-hero__anh::before,
.tgs-hero__anh::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tgs-hero__anh::before {
  background: linear-gradient(96deg,
              rgba(11, 11, 11, 0.72) 0%,
              rgba(11, 11, 11, 0.30) 46%,
              rgba(11, 11, 11, 0.10) 72%);
}

.tgs-hero__anh::after {
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0.50) 0%,
              rgba(11, 11, 11, 0.08) 34%,
              rgba(11, 11, 11, 0.82) 100%);
}

/*
 * KHÁC BẢN GỐC — đệm đáy 132px thay vì 84px.
 *
 * Lý do đo được, không phải thẩm mỹ: dải 01 bên dưới kéo lên 48px để trùm mép
 * hero (điểm overlap thứ hai, mục 9). Giữ nguyên 84px thì nền ngà của dải 01
 * ăn vào 48px cuối của hero, tức là ĐÈ LÊN NÚT — quy tắc overlap cấm đè chữ.
 * 132 = 84 (khoảng hở thị giác của bản gốc) + 48 (phần bị trùm). Sau khi trùm,
 * mắt vẫn thấy đúng 84px như bản gốc.
 *
 * Sửa một trong hai số thì phải sửa số kia. Chúng ràng nhau.
 */
.tgs-hero__trong {
  position: relative;
  z-index: 1;
  padding-bottom: 132px;
}

.tgs-hero__trong h1 {
  margin-top: 26px;
  line-height: 0.98;
}

/*
 * KHÁC BẢN GỐC — không `white-space: nowrap` cho H1.
 * Bản gốc ép "WALK YOUR OWN WAY." nằm một dòng. Ở WordPress dòng này là ô nhập
 * liệu: khách gõ dài hơn là tràn ngang màn hình, và tràn ngang thì không có
 * cách nào chữa từ phía CSS. Cho xuống dòng, giữ `text-wrap: balance` của
 * base.css để các dòng cân nhau.
 */

.tgs-hero__dan {
  margin-top: 30px;
  max-width: 50ch;
  color: rgba(243, 240, 232, 0.80);
}

.tgs-hero__nut {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgs-k2);
  margin-top: 44px;
}

/* Nhãn hero giãn rộng nhất trong thang chữ — 10px/0.30em, đếm được 8 lần. */
.tgs-hero .tgs-nhan--rong { color: var(--tgs-nga-72); }

/* ============================================================
 * 1B · NHỊP CHỮ TRONG DẢI — nhãn → tiêu đề → đoạn → nút
 *
 * LỖI THẬT, ĐO ĐƯỢC, không phải chỉnh cho đẹp. Trước luật này khoảng cách
 * trên trang là 16px / 0px / 26px, trong khi bản gốc dùng 26px / 30px / 40px
 * ở CẢ BẢY dải. Chỗ 0px là tiêu đề dính sát đoạn văn — h1…h4 của base.css
 * `margin:0`, còn `p` chỉ có margin đáy nên không có gì đẩy chúng ra.
 * Lỗi này nằm im từ bước 1 vì lúc đó chưa có markup thật để nhìn thấy.
 *
 * PHẠM VI: MỌI TRANG. Selector là `.tgs-khoi`, mà cả bảy trang trong đều đặt
 * class đó lên từng dải — nên luật này chưa bao giờ chỉ thuộc về trang chủ.
 *
 * CHỐT 30/08 (h), sau khi đo đủ ba trang: bản gốc dùng 26/28 ở trang chủ,
 * 24/28 ở Our Story, 22/28 ở Collection. Ba trang ba con số nghĩa là nhiễu của
 * bản dựng, không phải ý đồ — nên cả site giữ MỘT nhịp 26/30.
 * KHÔNG chuyển khối này xuống components.css như phiên (f) từng hẹn: nó đã
 * dùng chung sẵn rồi, chuyển file không đổi một pixel nào mà lại phải đo lại
 * cả ba trang.
 *
 * HỆ QUẢ PHẢI NHỚ: luật ở đây là HAI class, độ ưu tiên (0,2,0). Luật riêng của
 * một trang muốn đè nó cũng phải hai class — `.tgs-khoi .tgs-col-03__tieu-de`,
 * không phải `.tgs-col-03__tieu-de`. Đã có một luật viết một class và thua im
 * lặng suốt một phiên; xem BAI_HOC.md.
 * ============================================================ */

.tgs-khoi h2,
.tgs-khoi h3           { margin-top: 26px; }
.tgs-khoi .tgs-nhan    { margin-bottom: 0; }
.tgs-khoi .tgs-nut-chu { margin-top: var(--tgs-k4); }

/*
 * Đoạn dẫn: đẩy 30px xuống, KHÔNG chừa đáy.
 *
 * `p { margin-bottom: 16px }` của base.css cộng dồn vào margin-trên của thứ
 * đứng sau, nên khoảng cách thật ra 56px thay vì 40px (đo được), và chip phối
 * màu ở dải 03 ra 54px thay vì 38px. Khoảng cách của phần tử sau đã khai đủ
 * ở đây rồi; để cả hai bên cùng khai là chỗ sinh ra số lệch.
 */
.tgs-khoi .tgs-doan { margin-top: 30px; margin-bottom: 0; }

/* Tiêu đề đứng ngay đầu một cột thì không cần đẩy xuống nữa. */
.tgs-khoi h2:first-child,
.tgs-khoi h3:first-child { margin-top: 0; }

/* ============================================================
 * 2 · KHỐI 01 · KHỞI NGUỒN THƯƠNG HIỆU
 * ============================================================ */

/*
 * `position: relative` ở đây là BẮT BUỘC, không phải cho đẹp.
 * `.tgs-cham-son` là `position:absolute; left:-34px`. Không có neo thì nó bám
 * vào phần tử có position gần nhất — cuối cùng là <body> — và chấm son bay ra
 * góc trang. Đây chính là lý do phiên trước chưa đưa chấm son vào markup.
 */
.tgs-khoi-01__anh {
  position: relative;
  margin: 0;
}

.tgs-khoi-01__anh img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  object-position: 50% 42%;
}

/* ============================================================
 * 3 · KHỐI 02 · DÁNG ĐẶC TRƯNG
 *
 * Bản gốc: MỘT ảnh lớn 600px kèm hai nút mũi tên, cộng một cột 340px gồm 5
 * ảnh nhỏ bấm để đổi. Ở đây hiện ĐỦ CẢ 5 — nút chuyển ảnh là JS, mà nội dung
 * không được phụ thuộc JS. Bù lại phải tự đặt nhịp cho 5 mục, vì lưới
 * `auto-fill` của `.tgs-luoi-the` sẽ chia chúng đều nhau — đúng thứ LỖI 2 của
 * audit cấm.
 *
 * Nhịp: mục 01 chiếm 4/6 cột và cao gấp đôi (thay chỗ ảnh lớn 600px của bản
 * gốc), bốn mục còn lại chia phần thừa theo 2+2 rồi 3+3. Không hàng nào lặp
 * lại hàng trước và không còn ô trống.
 */

.tgs-khoi-02__bo {
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 80px;   /* bản gốc: 80px giữa đầu dải và bộ ảnh */
}

.tgs-khoi-02__muc { min-width: 0; }

.tgs-khoi-02__muc .tgs-the-anh { height: 292px; }

/* 292 × 2 + 16 khe = 600px, đúng chiều cao ảnh lớn của bản gốc. */
.tgs-khoi-02__bo > :nth-child(1) { grid-column: span 4; grid-row: span 2; }
.tgs-khoi-02__bo > :nth-child(1) .tgs-the-anh { height: 600px; }
.tgs-khoi-02__bo > :nth-child(2),
.tgs-khoi-02__bo > :nth-child(3) { grid-column: span 2; }
.tgs-khoi-02__bo > :nth-child(4),
.tgs-khoi-02__bo > :nth-child(5) { grid-column: span 3; }

/*
 * Chú thích của ảnh lớn được thở rộng hơn — bản gốc để chữ ở 34px/32px so với
 * mép ảnh chính, còn ảnh nhỏ thì sát hơn nhiều.
 */
.tgs-khoi-02__bo > :nth-child(1) figcaption {
  padding: 190px var(--tgs-k4) 32px 34px;
}

/*
 * BỐN ẢNH NHỎ PHẢI CÓ CHÚ THÍCH GỌN HƠN — đo được, không phải cảm giác.
 *
 * `.tgs-the-anh figcaption` của components.css có đệm trên 64px và cỡ chữ dành
 * cho ảnh vuông lớn. Đặt nguyên bộ đó lên ảnh cao 292px thì chú thích chiếm
 * **70%** chiều cao ảnh (đo: 204/292) — dải mờ nuốt gần hết ảnh, còn đúng thứ
 * dải này tồn tại để khoe là hình dáng sản phẩm thì không nhìn ra.
 *
 * Bản gốc cũng phân biệt: ảnh lớn dùng tên cỡ 30px, còn năm ảnh nhỏ trong cột
 * bên phải dùng 13px. Đây là chép lại cách phân cấp đó, không phải tự nghĩ.
 */
.tgs-khoi-02__bo > :not(:nth-child(1)) figcaption {
  padding: var(--tgs-k4) var(--tgs-k3) 18px;
}
.tgs-khoi-02__bo > :not(:nth-child(1)) .tgs-the-anh__ten { font-size: 16px; }
.tgs-khoi-02__bo > :not(:nth-child(1)) .tgs-the-anh__phu {
  font-size: 10.5px;
  line-height: 1.6;
}

/* ============================================================
 * 4 · KHỐI 03 · TỰ TAY CHỌN
 * ============================================================ */

/*
 * Nền ngà ĐẬM, không phải ngà thường.
 * `--tgs-nga-dam` (#E7E1D5) là màu bản gốc dùng cho đúng dải này. Nó tối hơn
 * ngà một bậc nên hai dải sáng liền nhau (01 rồi 03) không dính thành một
 * mảng phẳng. Selector hai class để thắng `.tgs-dai--sang` mà không cần
 * `!important`.
 */
.tgs-khoi-03.tgs-dai--sang {
  background: var(--tgs-nga-dam);
  padding-block: 150px;
}

/*
 * Bốn chip phối màu ĐANG XẾP DỌC nếu không có luật này: chúng nằm trong <li>,
 * mà <li> là block. `.tgs-ds-tron` chỉ bỏ chấm đầu dòng, không đổi hướng.
 */
.tgs-khoi-03__goi-y {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
}

/* Chip có chấm màu bên trái, nên nút phải là flex chứ không phải chữ trơn. */
.tgs-khoi-03__goi-y .tgs-nut {
  display: inline-flex;
  align-items: center;
  gap: var(--tgs-k1);
}

.tgs-khoi-03__nut { margin-top: var(--tgs-k4); }

/*
 * Cột phải. Bản gốc là ảnh xem trước dạng SVG tô màu theo lựa chọn, cao tối
 * thiểu 560px — thứ đó thuộc BƯỚC 12 (trang Made Personal). Hiện là một ảnh
 * phối màu thật. Giữ đúng khoảng chiếm chỗ 560px để khi thay bằng SVG thì bố
 * cục không nhảy.
 */
.tgs-khoi-03__anh {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  margin: 0;
}

.tgs-khoi-03__anh img {
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* ============================================================
 * 5 · KHỐI 04 · CÁCH LÀM
 * ============================================================ */

.tgs-khoi-04__anh { margin: 0; }

.tgs-khoi-04__anh img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: 50% 45%;
}

/* ============================================================
 * 6 · KHỐI 05 · NHỊP SỐNG CHẬM — ảnh phủ rộng, chữ đè lên
 *
 * Bản gốc: `88vh`, `min-height:620px`, chữ căn giữa theo chiều dọc, lớp phủ
 * nghiêng 90deg tối mạnh bên trái.
 * ============================================================ */

.tgs-khoi-05 {
  position: relative;
  display: flex;
  align-items: center;
  height: 88vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--tgs-muc);
  color: var(--tgs-nga);
}

@supports (height: 88dvh) {
  .tgs-khoi-05 { height: 88dvh; }
}

.tgs-khoi-05__anh {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tgs-khoi-05__anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/*
 * LỚP PHỦ BẮT BUỘC. Chữ ngà nằm thẳng trên ảnh ngoài trời sáng thì không đọc
 * được — đây là lỗi tương phản, không phải lựa chọn thẩm mỹ. Ba điểm dừng lấy
 * đúng bản gốc: đặc 0.82 ở mép trái nơi có chữ, nhạt 0.25 ở giữa để thấy ảnh,
 * đậm lại 0.5 ở mép phải cho khung hình khép lại.
 */
.tgs-khoi-05__anh::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(11, 11, 11, 0.82) 0%,
              rgba(11, 11, 11, 0.25) 62%,
              rgba(11, 11, 11, 0.50) 100%);
}

.tgs-khoi-05__trong {
  position: relative;
  z-index: 1;
  width: 100%;
}

.tgs-khoi-05__trong h2 { margin-top: 24px; }

.tgs-khoi-05__trong .tgs-doan {
  margin-top: 30px;
  max-width: 44ch;
  color: rgba(243, 240, 232, 0.80);
}

.tgs-khoi-05__trong .tgs-nhan { color: rgba(243, 240, 232, 0.70); }

/*
 * Hiệu ứng trôi chậm của ảnh nền — bản gốc `tg-drift 30s`. `@keyframes tgs-troi`
 * đã có sẵn trong base.css. Chỉ bật khi người dùng KHÔNG xin giảm chuyển động;
 * viết theo chiều "bật khi cho phép" nên mặc định là đứng yên, an toàn hơn.
 */
@media (prefers-reduced-motion: no-preference) {
  .tgs-khoi-05__anh img {
    animation: tgs-troi 30s ease-in-out infinite alternate;
  }
}

/* ============================================================
 * 7 · KHỐI 06 · GIỚI THIỆU BỘ SƯU TẬP
 * ============================================================ */

/* Đầu dải có đường kẻ ngăn với lưới thẻ — bản gốc: viền 1px + đệm đáy 40px. */
.tgs-khoi-06 .tgs-luoi-6040--dau {
  padding-bottom: var(--tgs-k4);
  border-bottom: 1px solid var(--tgs-nga-16);
}

.tgs-khoi-06 .tgs-luoi-6040--dau .tgs-doan { max-width: 38ch; }

.tgs-khoi-06__ds { margin-top: 70px; }

/*
 * ĐƯỜNG KẺ MẢNH VẼ TRÊN TỪNG THẺ, KHÔNG PHẢI TRÊN NỀN LƯỚI.
 *
 * `.tgs-the-lien` vẽ khe 1px bằng cách đặt màu nền cho cả lưới rồi để các thẻ
 * nền mực che đi. Cách đó chỉ đúng khi lưới KÍN. Lưới ở đây cố ý không kín —
 * bốn thẻ chia 6/3/3/4 trên 12 cột (chỗ chữa LỖI 2), nên 8 cột của hàng hai
 * không có thẻ nào phủ và nền lộ ra thành một mảng xám lớn.
 *
 * Sửa: bỏ nền lưới, cấp đường kẻ cho từng thẻ bằng `box-shadow` — không chiếm
 * chỗ trong bố cục nên bề rộng bốn thẻ giữ nguyên, LỖI 2 vẫn đạt.
 * KHÔNG chữa bằng cách cho thẻ thứ tư span 12: làm thế là kéo lưới về đối
 * xứng, tức phá đúng thứ vừa chữa.
 */
.tgs-khoi-06__ds.tgs-the-lien { background: none; }

.tgs-khoi-06__ds .tgs-the {
  box-shadow: inset 0 0 0 1px var(--tgs-nga-12);
  display: flex;
  flex-direction: column;
}

.tgs-khoi-06__ds .tgs-the__ten { margin-top: 34px; }

.tgs-khoi-06__nut { margin-top: 70px; }

/* ============================================================
 * 8 · KHỐI 07 · CỘNG ĐỒNG
 * ============================================================ */

.tgs-khoi-07__anh { margin: 0; }

.tgs-khoi-07__anh img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 60%;
}

/* ============================================================
 * 9 · HAI ĐIỂM OVERLAP CỦA TRANG CHỦ — LỖI 1 của AUDIT-BO-CUC.md
 *
 * Audit đo được: 0 margin âm, 0 translateY âm trong toàn bộ mã gốc. Mọi dải
 * xếp chồng phẳng, cắt nhau bằng đường ngang — thứ làm giao diện trông như
 * template dựng sẵn.
 *
 * Điểm 1 (đã có từ bước 4): cột ảnh dải 01 mang `.tgs-de-len`, kéo lên 88px
 *   trên nền ngà trống của chính dải đó.
 * Điểm 2 (thêm ở bước này): cả dải 01 kéo lên 48px trùm mép dưới ảnh hero.
 *
 * Đúng hai điểm — mức trần audit cho phép. Đừng thêm điểm thứ ba.
 *
 * Vì sao 48 chứ không phải 88: hero chừa đáy 132px (mục 1), chữ và nút hero
 * kết thúc ở 132px trên mép dưới. Trùm 48px thì vùng bị phủ hoàn toàn là nền
 * trống, còn dư 84px khoảng hở tới nút — đúng khoảng hở của bản gốc. Trùm 88px
 * thì vẫn không chạm chữ, nhưng khoảng hở còn 44px, chật hơn bản gốc rõ rệt.
 * ============================================================ */

.tgs-khoi-01 {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

/* ============================================================
 * 10 · MÀN HÌNH NHỎ
 *
 * Thứ tự đúng: hạ chiều cao trước, rồi mới xếp chồng cột. Overlap tắt ở
 * layout.css khi cột xếp chồng — nhưng `.tgs-khoi-01` không mang class
 * `.tgs-de-len` nên luật tắt đó KHÔNG với tới nó. Phải tắt riêng ở đây.
 * ============================================================ */

@media (max-width: 1180px) {
  /* Ảnh cao 600–620px chiếm gần trọn màn hình laptop nhỏ. Hạ theo tỷ lệ. */
  .tgs-khoi-01__anh img { height: 520px; }
  .tgs-khoi-04__anh img { height: 500px; }
  .tgs-khoi-07__anh img { height: 470px; }

  .tgs-khoi-03.tgs-dai--sang { padding-block: var(--tgs-k7); }
  .tgs-khoi-03__anh { min-height: 440px; }

  .tgs-khoi-02__bo > :nth-child(1) .tgs-the-anh { height: 500px; }
  .tgs-khoi-02__muc .tgs-the-anh { height: 242px; }
}

@media (max-width: 960px) {
  /*
   * Bộ 5 ảnh về lưới 2 cột đều nhau. Ở khổ này mục 01 chiếm 4/6 cột còn lại
   * chỉ rộng ~200px, chú thích trong ảnh không còn chỗ đọc.
   */
  .tgs-khoi-02__bo { grid-template-columns: repeat(2, 1fr); }
  .tgs-khoi-02__bo > :nth-child(1),
  .tgs-khoi-02__bo > :nth-child(2),
  .tgs-khoi-02__bo > :nth-child(3),
  .tgs-khoi-02__bo > :nth-child(4),
  .tgs-khoi-02__bo > :nth-child(5) { grid-column: span 1; grid-row: auto; }

  .tgs-khoi-02__bo > :nth-child(1) .tgs-the-anh,
  .tgs-khoi-02__muc .tgs-the-anh { height: 300px; }

  .tgs-khoi-02__bo > :nth-child(1) figcaption {
    padding: var(--tgs-k5) var(--tgs-k3) var(--tgs-k3);
  }

  /* Số lẻ mục: mục cuối đứng một mình thì cho nó chiếm cả hàng, không bỏ trống. */
  .tgs-khoi-02__bo > :nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /*
   * Hero bỏ `100vh`. Trên điện thoại nằm ngang, 100vh chỉ còn ~380px mà chữ
   * hero cần hơn thế — chữ sẽ bị `overflow:hidden` cắt mất. Cho hero cao theo
   * nội dung, giữ sàn 560px để vẫn ra dáng ảnh bìa.
   */
  .tgs-hero {
    height: auto;
    min-height: 560px;
    padding-top: 140px;   /* chừa chỗ cho header dính, menu ở khổ này 2–3 dòng */
  }

  .tgs-hero__trong { padding-bottom: var(--tgs-k5); }
  .tgs-hero__nut   { margin-top: var(--tgs-k4); }
  .tgs-hero__nut .tgs-nut { flex: 1 1 auto; text-align: center; }

  /*
   * TẮT ĐIỂM OVERLAP THỨ HAI. Khi cột đã xếp chồng, thứ nằm ngay trên dải 01
   * không còn là nền trống của hero mà là nút bấm — đè vào là mất nút.
   * layout.css tắt `.tgs-de-len`, nhưng dải này dùng margin âm riêng nên phải
   * tắt riêng.
   */
  .tgs-khoi-01 { margin-top: 0; }

  .tgs-khoi-01__anh img { height: 420px; }
  .tgs-khoi-04__anh img { height: 380px; }
  .tgs-khoi-07__anh img { height: 380px; }

  .tgs-khoi-02__bo {
    grid-template-columns: 1fr;
    gap: var(--tgs-k3);
    margin-top: var(--tgs-k5);
  }
  .tgs-khoi-02__bo > :nth-child(1),
  .tgs-khoi-02__bo > :nth-child(2),
  .tgs-khoi-02__bo > :nth-child(3),
  .tgs-khoi-02__bo > :nth-child(4),
  .tgs-khoi-02__bo > :nth-child(5) { grid-column: 1 / -1; }

  .tgs-khoi-02__bo > :nth-child(1) .tgs-the-anh,
  .tgs-khoi-02__muc .tgs-the-anh { height: 340px; }

  .tgs-khoi-03.tgs-dai--sang { padding-block: var(--tgs-k7); }
  .tgs-khoi-03__anh { min-height: 0; }
  .tgs-khoi-03__goi-y .tgs-nut { flex: 1 1 auto; justify-content: center; }

  /* Dải 05 bỏ chiều cao theo màn hình, lấy đệm dọc để chữ không dính mép. */
  .tgs-khoi-05 {
    height: auto;
    min-height: 0;
    padding-block: var(--tgs-k7);
  }

  /*
   * Lớp phủ đổi từ nghiêng ngang sang dọc. Ở màn hình hẹp chữ chiếm gần trọn
   * bề ngang nên phủ theo chiều ngang không còn che đúng chỗ có chữ.
   */
  .tgs-khoi-05__anh::after {
    background: linear-gradient(180deg,
                rgba(11, 11, 11, 0.62) 0%,
                rgba(11, 11, 11, 0.78) 100%);
  }

  .tgs-khoi-06 .tgs-luoi-6040--dau { padding-bottom: var(--tgs-k3); }
  .tgs-khoi-06__ds  { margin-top: var(--tgs-k5); }
  .tgs-khoi-06__nut { margin-top: var(--tgs-k5); }
}

@media (max-width: 760px) and (orientation: landscape) {
  /* Điện thoại nằm ngang: sàn 560px vẫn quá cao, hạ tiếp. */
  .tgs-hero { min-height: 460px; }
}

/* ============================================================
 * 11 · IN GIẤY
 *
 * Ảnh nền và lớp phủ không in ra được gì có ích — chỉ tốn mực và làm chữ đè
 * lên vùng xám. Bỏ hẳn, trả chữ về màu mực trên nền trắng.
 * ============================================================ */

@media print {
  .tgs-hero,
  .tgs-khoi-05 {
    height: auto;
    min-height: 0;
    padding-block: var(--tgs-k4);
    background: none;
    color: #000;
  }

  .tgs-hero__anh,
  .tgs-khoi-05__anh { display: none; }

  .tgs-hero__trong { padding-bottom: 0; }

  .tgs-khoi-01 { margin-top: 0; }

  .tgs-khoi-01__anh img,
  .tgs-khoi-04__anh img,
  .tgs-khoi-07__anh img { height: auto; }

  .tgs-khoi-05__trong .tgs-doan,
  .tgs-khoi-05__trong .tgs-nhan { color: #000; }
}

/* ============================================================
 * 12 · TRANG OUR STORY (page-story.php)
 *
 * VÌ SAO ĐẶT SAU MỤC 11 chứ không xen vào giữa: mục 1–11 là trang chủ và đã
 * được đo xong. Chèn vào giữa là dịch số dòng của mọi bằng chứng đã ghi trong
 * PROJECT_STATE. Khối này tự mang theo phần màn hình nhỏ và phần in giấy của
 * riêng nó ở cuối, nên đọc một mạch là đủ.
 *
 * MỘT HỆ QUẢ CỦA THỨ TỰ, phải nhớ: mục 10 (màn hình nhỏ của trang chủ) nằm
 * TRƯỚC khối này. Luật `@media (max-width:760px) .tgs-hero { height:auto }`
 * ở đó và luật `.tgs-hero--trang { height:78vh }` ở đây có cùng độ ưu tiên
 * (0,1,0), nên luật viết sau thắng. Vì thế chiều cao hero khổ nhỏ PHẢI được
 * khai lại trong khối 760px ở cuối mục này. Bỏ quên là hero trang Story cao
 * 78vh trên điện thoại nằm ngang và cắt mất chữ.
 *
 * Số đo đọc từ `_nguon/template.html`, không ước lượng: hero 78vh/560px,
 * đệm dải 160px · 150px · 190px, cột phải lệch xuống 60px, cặp ảnh cao 460px
 * theo lưới 1fr 1.5fr khe 20px, câu tiếng Nhật 22px/0.16em cách trên 56px,
 * hàng thông tin cách trên 44px với khe 44px, chấm son 64px, trích dẫn 52px.
 * ============================================================ */

/* ---- 12.1 · Hero của trang phụ ----
 *
 * Modifier chứ không phải class mới: bảy trang còn lại đều mở đầu bằng đúng
 * kiểu hero này, chỉ khác ảnh và chữ. Bản gốc cho trang chủ 100vh/720px, cho
 * các trang trong 78vh/560px — thấp hơn một bậc là có chủ ý, trang trong
 * không cần chiếm trọn màn hình.
 */
.tgs-hero--trang {
  height: 78vh;
  min-height: 560px;
}

@supports (height: 78dvh) {
  .tgs-hero--trang { height: 78dvh; }
}

/*
 * KHÁC BẢN GỐC — đệm đáy 128px thay vì 80px. Cùng lý do và cùng phép cộng như
 * hero trang chủ: 128 = 80 (khoảng hở thị giác của bản gốc) + 48 (phần bị dải
 * 01 trùm lên, xem 12.5). Sửa một số thì phải sửa số kia.
 */
.tgs-hero--trang .tgs-hero__trong { padding-bottom: 128px; }

/* Bản gốc cho đoạn dẫn của trang này 52ch, rộng hơn trang chủ 2ch. */
.tgs-hero--trang .tgs-hero__dan { max-width: 52ch; }

/*
 * MỘT lớp phủ, không phải hai — khác trang chủ, và đây là số của bản gốc:
 * `linear-gradient(180deg, .6 0%, .2 40%, .9 100%)`. Chữ nằm sát đáy, mà đáy
 * đã tối 0.9 nên không cần thêm lớp nghiêng ngang. Phải tắt tường minh lớp
 * ::before, nếu không nó vẫn còn từ luật hero chung ở mục 1.
 */
.tgs-hero__anh--story::before { background: none; }

.tgs-hero__anh--story::after {
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0.60) 0%,
              rgba(11, 11, 11, 0.20) 40%,
              rgba(11, 11, 11, 0.90) 100%);
}

/* Bản gốc: `object-position: 66% 50%` — chủ thể lệch phải, chữ nằm bên trái. */
.tgs-hero__anh--story img { object-position: 66% 50%; }

/* ---- 12.2 · Dải 01+02 · cảm hứng và cách diễn giải lại ---- */

.tgs-story-01 { padding-block: 160px; }

/*
 * Cột phải tụt xuống 60px — nhịp lệch của bản gốc, và cũng là thứ giữ cho hai
 * cột chữ không đọc thành một bảng hai ô cân đối. Tắt khi cột xếp chồng, vì
 * lúc đó 60px chỉ còn là một khoảng hở thừa giữa hai khối chữ.
 */
.tgs-story-01 .tgs-luoi-6040 > :nth-child(2) { margin-top: 60px; }

/*
 * CÂU TIẾNG NHẬT — điểm bẻ lưới mà AUDIT-BO-CUC.md chỉ định cho trang này.
 *
 * `calc(var(--tgs-le) * -1)` chứ không phải một số cố định: câu chữ tràn ra
 * đúng bằng đệm ngang hiện hành, tức là dừng CHÍNH XÁC ở mép container và
 * không bao giờ đi xa hơn. Đặt số cố định (-56px) thì ở khổ 1180 xuống, đệm
 * chỉ còn 40px và câu chữ lòi ra ngoài khung nhìn — tràn ngang, thứ không có
 * cách nào chữa từ phía CSS.
 *
 * Bên dưới câu này là nền ngà trống, không có chữ nào. Đã quét phần tử có chữ
 * giao với vùng của nó — rỗng.
 */
.tgs-story-01__nhat {
  margin-top: 56px;
  margin-bottom: 0;
  margin-inline-start: calc(var(--tgs-le) * -1);
  /* Họ chữ Noto Serif JP lấy từ class `.tgs-nhat` của base.css, không khai lại. */
  font-size: 22px;
  letter-spacing: 0.16em;
  color: var(--tgs-muc-35);
}

/*
 * Cặp ảnh. Lưới `1fr 1.5fr` là của bản gốc — đã lệch sẵn nên KHÔNG nằm trong
 * 13 chỗ `1fr 1fr` của LỖI 3. Đừng "thống nhất" nó về .tgs-luoi-6040: khe hở
 * ở đây là 20px, còn .tgs-luoi-6040 dùng 96px — hai thứ khác mục đích, một
 * bên là hai cột nội dung, một bên là một cặp ảnh dính nhau.
 */
.tgs-story-01__cap {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  margin-top: 110px;
}

.tgs-story-01__cap figure { margin: 0; }

.tgs-story-01__cap img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}

/* Ảnh trái là ảnh dọc, ảnh phải là ảnh ngang — neo chủ thể cho đúng. */
.tgs-story-01__cap > :first-child img { object-position: 50% 45%; }
.tgs-story-01__cap > :last-child  img { object-position: 50% 55%; }

/* ---- 12.3 · Dải 03 · câu chuyện vận hành ---- */

/* Nền ngà đậm hơn một bậc, đúng bản gốc `#E7E1D5`. */
.tgs-story-03 {
  padding-block: 150px;
  background: var(--tgs-nga-dam);
}

/* Tiêu đề và đoạn văn căn giữa theo chiều dọc — bản gốc `align-items:center`. */
.tgs-story-03 .tgs-luoi-6040 { align-items: center; }

/*
 * Đoạn này chiếm trọn cột của nó, không giới hạn 50ch như đoạn dẫn thường, và
 * KHÔNG lấy khoảng cách trên 30px của nhịp 1B: nó đứng đầu cột chứ không đứng
 * sau tiêu đề nào. Để nguyên 30px thì hai cột lệch nhau đúng 30px trong khi
 * bản gốc căn giữa theo chiều dọc.
 */
/*
 * HAI class chứ không một — SỬA 30/08 (h), lỗi của phiên (g).
 * Phiên (g) viết `.tgs-story-03__dan` một class, độ ưu tiên (0,1,0), trong khi
 * mục 1B có `.tgs-khoi .tgs-doan { margin-top: 30px }` ở (0,2,0). Luật một
 * class THUA bất kể nằm sau bao nhiêu dòng — độ ưu tiên quyết định trước, thứ
 * tự chỉ phân định khi bằng điểm. Đo trên `/story/` trước khi sửa: margin-top
 * ra đúng 30px, tức là ý đồ ghi trong chú thích chưa bao giờ có hiệu lực.
 */
/*
 * `none` → `60ch` — SỬA 30/08, mục D11. Ý ĐỒ CŨ VẪN CÒN, chỉ hạ trần:
 * chú thích trên nói "không giới hạn 50ch như đoạn dẫn thường", và 60ch vẫn
 * rộng hơn 50ch của `.tgs-doan`, nên đoạn này vẫn là đoạn rộng nhất trang.
 * Cái bỏ đi là bề rộng VÔ HẠN: ở 1440 dòng dài nhất đếm được 90 ký tự thật,
 * quá dải dễ đọc 45–75. Ở 1024 cột đã hẹp hơn 60ch nên luật này im — tức
 * phần "chiếm trọn cột" của ý đồ cũ vẫn đúng ở mọi khổ ≤ 1024.
 *
 * Cột lưới KHÔNG xê dịch: `.tgs-luoi-6040` chia bằng `fr`, không theo nội
 * dung, nên trần này chỉ đổi chỗ ngắt dòng. Cái phải đo lại là CHIỀU CAO:
 * đoạn thêm dòng thì dải cao thêm, và `align-items: center` sẽ dồn lại.
 */
.tgs-khoi .tgs-story-03__dan { max-width: 60ch; margin-top: 0; }

.tgs-story-03__muc {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--tgs-muc-20);
}

/*
 * `.tgs-nhan` trên nền sáng là màu son (layout.css). Ở đây bản gốc dùng xám
 * mờ 0.5 — nhãn này là chú thích của một cặp thuật ngữ, không phải nhãn mở
 * đầu một dải, nên không lấy màu nhấn.
 */
.tgs-dai--sang .tgs-story-03__muc dt { color: var(--tgs-muc-50); }

.tgs-story-03__muc dd {
  margin: 8px 0 0;
  font-family: var(--tgs-chu-de);
  font-size: 22px;
}

/* ---- 12.4 · Dải 04 · trích dẫn ---- */

.tgs-story-04 {
  padding-block: 190px;
  text-align: center;
}

/*
 * Bản gốc bọc dải này trong `max-width:1200px` — chỗ lạc nhịp duy nhất khỏi
 * lưới 1440 mà AUDIT-BO-CUC.md ghi nhận. Ở đây giữ container chuẩn 1440 và
 * đặt giới hạn lên chính đoạn trích: 1088px = 1200 − 2×56, tức là bề rộng
 * chữ không đổi một pixel nào, mà lưới trang thì chỉ còn một loại container.
 */
.tgs-story-04__trich {
  max-width: 1088px;
  margin: 0 auto;
  font-family: var(--tgs-chu-de);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: 0.005em;
}

/*
 * Bản gốc cố định 52px. Ở đây `clamp` để câu 25 từ không vỡ trên điện thoại,
 * trần vẫn đúng 52px nên trên màn hình rộng không khác bản gốc.
 */
.tgs-story-04__trich p {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 52px);
}

/* Chấm son tròn 64px, cách đoạn trích 56px — trang trí, aria-hidden ở markup. */
.tgs-story-04__cham {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 56px;
  border-radius: 50%;
  background: var(--tgs-son);
}

.tgs-story-04__nut { margin: 64px 0 0; }

/* ---- 12.5 · HAI ĐIỂM CỦA TRANG NÀY — LỖI 1 của AUDIT-BO-CUC.md ----
 *
 * Điểm 1 · câu tiếng Nhật tràn khỏi cột chữ (12.2). Đây là điểm audit chỉ
 *   định đích danh cho trang Our Story.
 * Điểm 2 · dải 01 kéo lên 48px trùm mép dưới ảnh hero — cùng kỹ thuật và
 *   cùng con số với trang chủ, vì cùng một quan hệ hero → dải đầu.
 *
 * Đúng hai điểm, mức trần audit cho phép. Đừng thêm điểm thứ ba.
 * Vùng bị trùm là nền trống của ảnh hero: chữ hero kết thúc ở 128px trên mép
 * dưới, trùm 48px thì còn dư 80px khoảng hở — đúng khoảng hở bản gốc.
 */
.tgs-story-01 {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

/* ---- 12.6 · Màn hình nhỏ ---- */

@media (max-width: 1180px) {
  .tgs-story-01 { padding-block: var(--tgs-k7); }
  .tgs-story-03 { padding-block: var(--tgs-k7); }
  .tgs-story-04 { padding-block: 150px; }

  .tgs-story-01__cap { margin-top: var(--tgs-k5); }
  .tgs-story-01__cap img { height: 380px; }

  .tgs-story-01 .tgs-luoi-6040 > :nth-child(2) { margin-top: var(--tgs-k4); }
}

@media (max-width: 960px) {
  /* Hai mục thông tin đứng cạnh nhau còn ~150px mỗi mục thì chữ vỡ dòng. */
  .tgs-story-03__muc { gap: var(--tgs-k3) var(--tgs-k4); }

  .tgs-story-01__cap img { height: 320px; }
}

@media (max-width: 760px) {
  /*
   * KHAI LẠI chiều cao hero. Luật `height:auto` ở mục 10 nằm TRƯỚC khối 12
   * nên bị `.tgs-hero--trang` ghi đè — xem ghi chú ở đầu mục 12.
   */
  .tgs-hero--trang {
    height: auto;
    min-height: 480px;
  }

  .tgs-hero--trang .tgs-hero__trong { padding-bottom: var(--tgs-k5); }

  /*
   * TẮT CẢ HAI ĐIỂM. Cột đã xếp chồng: thứ nằm trên dải 01 không còn là nền
   * trống của hero mà là đoạn dẫn, và câu tiếng Nhật tràn ra 24px thì chạm
   * mép khung nhìn.
   */
  .tgs-story-01 { margin-top: 0; }
  .tgs-story-01__nhat { margin-inline-start: 0; margin-top: var(--tgs-k4); }

  .tgs-story-01 .tgs-luoi-6040 > :nth-child(2) { margin-top: 0; }

  .tgs-story-01__cap {
    grid-template-columns: 1fr;
    gap: var(--tgs-k2);
    margin-top: var(--tgs-k5);
  }
  .tgs-story-01__cap img { height: 300px; }

  .tgs-story-03__muc { gap: var(--tgs-k3); }
  .tgs-story-03__muc > * { flex: 1 1 40%; }

  .tgs-story-04 { padding-block: var(--tgs-k7); }
  .tgs-story-04__cham { width: 48px; height: 48px; margin-bottom: var(--tgs-k4); }
  .tgs-story-04__nut  { margin-top: var(--tgs-k4); }
}

@media (max-width: 760px) and (orientation: landscape) {
  .tgs-hero--trang { min-height: 420px; }
}

/* ---- 12.7 · In giấy ---- */

@media print {
  .tgs-hero--trang {
    height: auto;
    min-height: 0;
  }

  .tgs-hero--trang .tgs-hero__trong { padding-bottom: 0; }

  .tgs-story-01 { margin-top: 0; }
  .tgs-story-01__nhat { margin-inline-start: 0; color: #000; }
  .tgs-story-01__cap img { height: auto; }

  .tgs-story-03 { background: none; }

  .tgs-story-04 {
    background: none;
    color: #000;
    padding-block: var(--tgs-k4);
  }

  /* Chấm son đặc 64px in ra là một khối mực đen, không mang thông tin nào. */
  .tgs-story-04__cham { display: none; }
}

/* ============================================================
 * 13 · TRANG THE SIGNATURE COLLECTION (page-collection.php)
 *
 * ĐẶT SAU MỤC 12, cùng lý do đã ghi ở đầu mục 12: chèn vào giữa là dịch số
 * dòng của mọi bằng chứng đã ghi trong PROJECT_STATE. Khối này tự mang theo
 * phần màn hình nhỏ và phần in giấy của riêng nó ở cuối.
 *
 * HAI HỆ QUẢ CỦA THỨ TỰ, phải nhớ:
 *   1. Mục 12.6 có `@media (max-width:760px) .tgs-hero--trang .tgs-hero__trong
 *      { padding-bottom: 64px }` với độ ưu tiên (0,2,0). Luật đệm đáy hero của
 *      trang này cũng (0,2,0) nhưng viết SAU nên thắng ở mọi khổ — kể cả khổ
 *      nhỏ, nơi nó KHÔNG được thắng. Vì thế 13.5 phải khai lại. Khối `@media`
 *      không cộng thêm độ ưu tiên nào; xem BAI_HOC.md.
 *   2. Mục 1B cho `.tgs-khoi h2 { margin-top: 26px }` với độ ưu tiên (0,2,0).
 *      Tiêu đề dải 03 cần `margin:0` nên phải viết bằng selector hai class
 *      `.tgs-khoi .tgs-col-03__tieu-de`, không phải một class.
 *
 * Số đo đọc từ `_nguon/template.html`, không ước lượng: hero 76vh/540px với
 * đệm đáy 80px và gradient 180deg ba điểm dừng (.55/.15/.90); dải 01 đệm dọc
 * 150px, lưới `1.25fr 1fr` khe 88px, bộ ảnh lưới hai cột khe 20px, bảng thông
 * số đệm dòng 18px cỡ chữ 14.5px, nút cách trên 44px; dải 02 đệm dọc 160px,
 * lưới thẻ cách trên 70px khe 24px, thẻ đệm `34px 30px 30px`; dải 03 nền
 * `#D83A22` đệm dọc 120px, khe 64px.
 * ============================================================ */

/* ---- 13.1 · Hero ----
 *
 * DÙNG LẠI `.tgs-hero--trang` (78vh/560px) thay vì thêm modifier riêng cho
 * 76vh/540px của bản gốc. Chênh 2vh và 20px là nhiễu của bản dựng, không phải
 * ý đồ — và mỗi `.tgs-hero--*` mới lại phải kéo theo một khối `@media` riêng
 * (BAI_HOC.md). Ba trang trong dùng chung một chiều cao hero là thứ dễ giữ
 * đúng hơn ba con số gần bằng nhau.
 */

/*
 * MỘT lớp phủ, không phải hai — giống trang Our Story, và đây là số của bản
 * gốc trang này: `linear-gradient(180deg, .55 0%, .15 42%, .9 100%)`.
 * Phải tắt tường minh lớp ::before, nếu không nó vẫn còn từ luật hero chung.
 */
.tgs-hero__anh--collection::before { background: none; }

.tgs-hero__anh--collection::after {
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0.55) 0%,
              rgba(11, 11, 11, 0.15) 42%,
              rgba(11, 11, 11, 0.90) 100%);
}

/*
 * Bản gốc KHÔNG khai object-position cho ảnh hero trang này, tức là để mặc
 * định giữa. Luật hero chung ở mục 1 đang đặt `64% 50%` cho trang chủ, nên
 * phải trả về giữa tường minh.
 */
.tgs-hero__anh--collection img { object-position: 50% 50%; }

/*
 * KHÁC BẢN GỐC — đệm đáy 168px thay vì 80px.
 * 168 = 80 (khoảng hở thị giác của bản gốc) + 88 (phần bị bộ ảnh phối màu
 * trùm lên, xem 13.2). Cùng phép cộng như hero trang chủ (132 = 84 + 48) và
 * hero Our Story (128 = 80 + 48). Sửa một số thì phải sửa số kia.
 */
.tgs-hero--trang .tgs-col-hero__trong { padding-bottom: 168px; }

/* ---- 13.2 · Dải 01 · sản phẩm chủ lực ----
 *
 * Đệm đáy 198 = 150 (bản gốc) + 48 (phần bị dải 02 trùm lên, xem 13.3).
 */
.tgs-col-01 { padding-block: 150px 198px; }

/*
 * Lưới `1.25fr 1fr` của bản gốc. ĐÃ LỆCH SẴN nên KHÔNG nằm trong 13 chỗ
 * `1fr 1fr` của LỖI 3, và không ép về `.tgs-luoi-6040`: khe ở đây là 88px,
 * `.tgs-luoi-6040` dùng 96px, và tỷ lệ 1.25 giữ cho cột phải đủ rộng để bảng
 * thông số bốn dòng không vỡ chữ. Cùng cách xử lý như cặp ảnh `1fr 1.5fr` của
 * trang Our Story: bản gốc đã lệch thì giữ nguyên số của bản gốc.
 */
.tgs-col-01__luoi {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 88px;
  align-items: start;
}

/*
 * BỘ ẢNH PHỐI MÀU — hai việc trong một khối, đọc kỹ trước khi sửa.
 *
 * (1) LỖI 2 của AUDIT. Bản gốc xếp bốn ảnh trên lưới `1fr 1fr` — bốn khối đều
 *     tăm tắp. Ở đây là lưới BA cột với nhịp 2·1·1·2: ảnh đầu và ảnh cuối rộng
 *     gấp đôi, hai ảnh giữa hẹp. Lưới vẫn KÍN (2+1 và 1+2 = hai hàng đủ ba
 *     cột) nên không có ô trống lộ nền — bài học của phiên (f).
 *     Nhịp này khác hẳn `.tgs-luoi-4` (6·3·3·4) của khối 06 trang chủ và khác
 *     `--doi-nhip` (3·3·6·12) của dải 02 ngay bên dưới. Audit cấm hai dải cùng
 *     dạng lặp y nguyên; ba nhịp khác nhau là đủ xa nhau.
 *
 * (2) LỖI 1 của AUDIT — điểm overlap mà audit chỉ định đích danh cho trang
 *     này: "thẻ phối màu đầu tiên nhô lên khỏi dải nền".
 *     `margin-top: -238px` = -(150 đệm trên của dải + 88 phần nhô ra ngoài).
 *     KHÔNG dùng `.tgs-de-len`: class đó kéo đúng 88px, mà 88px chỉ đưa ảnh
 *     lên 62px so với mép dải, tức vẫn nằm trong dải và không nhô đi đâu cả.
 *     `z-index: 2` để ảnh nằm trên lớp phủ gradient của hero.
 *     Vùng bị trùm là nền ảnh hero. Chữ hero cách vùng đó 80px nhờ đệm đáy
 *     168px ở 13.1 — hai số ràng nhau.
 */
.tgs-col-01__anh {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  position: relative;
  z-index: 2;
  margin-top: -238px;
}

.tgs-col-01__anh > :nth-child(1),
.tgs-col-01__anh > :nth-child(4) { grid-column: span 2; }

/*
 * 340px, không phải 260px. Đây là số ĐO RA chứ không phải chọn cho đẹp: bộ ảnh
 * bị kéo lên 238px nên nó kết thúc sớm hơn cột chữ bên phải. Ở 260px khoảng
 * trống dưới bộ ảnh đo được 281px — gần bằng nửa chiều cao cột chữ, nhìn ra
 * là một mảng ngà rỗng. Ở 340px hai cột chỉ còn lệch khoảng 120px.
 * Bản gốc để ảnh cao tự nhiên theo tỷ lệ vuông, nhưng bản gốc cũng không có
 * điểm overlap nào — con số này ràng với -238px ở trên, sửa một phải tính lại
 * số kia.
 */
.tgs-col-01__anh .tgs-the-anh { height: 340px; }

/*
 * Chú thích nhỏ hơn bản chuẩn của components.css. Cùng lý do đã đo ở phiên
 * (f): bộ đệm 64px và cỡ chữ 19px được đặt cho ảnh vuông lớn; đặt nguyên bộ
 * đó lên ảnh cao 260px thì dải mờ nuốt gần hết ảnh, mà đúng thứ dải này tồn
 * tại để khoe là màu sản phẩm.
 */
.tgs-col-01__anh figcaption { padding: var(--tgs-k4) var(--tgs-k3) var(--tgs-k3); }
.tgs-col-01__anh .tgs-the-anh__ten { font-size: 16px; }

/*
 * Bảng thông số bốn dòng. Kẻ NẰM TRÊN cho cả khối, mỗi dòng có kẻ dưới —
 * đúng cấu trúc bản gốc. Bản gốc dùng `rgba(11,11,11,0.12)` cho kẻ dòng;
 * ở đây lấy token `--tgs-muc-14` (0.14) thay vì thêm một token mới cho 0.02
 * chênh lệch không nhìn thấy được.
 */
.tgs-col-01__ds {
  margin-top: var(--tgs-k4);
  border-top: 1px solid var(--tgs-muc-20);
}

.tgs-col-01__ds li {
  padding: 18px 0;
  border-bottom: 1px solid var(--tgs-muc-14);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.5;
}

.tgs-col-01__nut { margin: 44px 0 0; }

/* ---- 13.3 · Dải 02 · bốn câu chuyện màu ----
 *
 * ĐIỂM OVERLAP THỨ HAI: dải nền mực kéo lên 48px trùm mép dưới dải 01 nền
 * ngà. Vùng bị trùm là 48px cuối của đệm đáy 198px — nền ngà trống, không có
 * chữ nào. Cùng con số và cùng kỹ thuật với hai trang trước.
 * Đúng hai điểm, mức trần audit cho phép. Đừng thêm điểm thứ ba.
 */
.tgs-col-02 {
  padding-block: 160px;
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

/* Bản gốc giới hạn tiêu đề dải này ở 24ch. */
.tgs-col-02__tieu-de { max-width: 24ch; }

/*
 * Khe 24px của bản gốc, không phải 40px mặc định của `.tgs-luoi-4`. Thẻ ở đây
 * có viền rời — khác hẳn `.tgs-the-lien` khe 1px của khối 06 trang chủ, và
 * đó là chủ ý: hai dải bốn khối trên cùng một site không được nhìn giống nhau.
 */
.tgs-col-02__ds {
  gap: var(--tgs-k3);
  margin-top: 70px;
}

/* ---- 13.4 · Dải 03 · lời mời ----
 *
 * Dải duy nhất của cả site dùng nền son đặc.
 */
.tgs-col-03 {
  padding-block: 120px;
  background: var(--tgs-son);
  color: var(--tgs-nga);
}

.tgs-col-03__trong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tgs-k5);
}

/*
 * Hai class chứ không một: mục 1B cho `.tgs-khoi h2 { margin-top: 26px }` với
 * cùng độ ưu tiên (0,2,0) và nằm phía trên. Một class là thua.
 */
.tgs-khoi .tgs-col-03__tieu-de {
  margin: 0;
  max-width: 20ch;
}

.tgs-col-03__nut {
  margin: 0;
  flex-shrink: 0;
}

/*
 * LỖI THẬT, không phải chỉnh cho đẹp: `.tgs-nut--toi` khi rê chuột đổi nền
 * sang màu son (components.css). Trên dải này nền vốn đã là son, nên nút sẽ
 * TÀNG HÌNH đúng lúc người dùng đưa chuột vào nó. Bản gốc đổi sang nền ngà
 * chữ mực. Đây là lần đầu `.tgs-nut--toi` được đặt lên nền son, nên lỗi này
 * nằm im từ bước 2 — đúng dạng "class chưa ai dùng thì chưa được kiểm".
 */
.tgs-col-03 .tgs-nut--toi:hover,
.tgs-col-03 .tgs-nut--toi:focus-visible {
  background: var(--tgs-nga);
  border-color: var(--tgs-nga);
  color: var(--tgs-muc);
}

/* ---- 13.5 · Màn hình nhỏ ---- */

@media (max-width: 1180px) {
  /* Đệm trên hạ về 140 thì phép cộng của overlap cũng phải hạ theo: 140 + 88. */
  .tgs-col-01 { padding-block: var(--tgs-k7) 188px; }
  .tgs-col-01__anh { margin-top: -228px; }
  .tgs-col-01__luoi { gap: var(--tgs-k5); }

  .tgs-col-02 { padding-block: var(--tgs-k7); }
  .tgs-col-03 { padding-block: var(--tgs-k6); }
}

@media (max-width: 960px) {
  /*
   * Cột chữ xuống dưới bộ ảnh. Overlap GIỮ NGUYÊN: thứ nằm trên bộ ảnh vẫn là
   * nền ảnh hero, chưa phải chữ.
   */
  .tgs-col-01__luoi {
    grid-template-columns: 1fr;
    gap: var(--tgs-k5);
  }

  .tgs-col-01__anh .tgs-the-anh { height: 300px; }

  .tgs-col-03__trong { gap: var(--tgs-k4); }
}

@media (max-width: 760px) {
  /*
   * KHAI LẠI đệm đáy hero. Luật 64px của mục 12.6 có cùng độ ưu tiên (0,2,0)
   * nhưng nằm TRƯỚC khối 13, nên bị 168px ở 13.1 ghi đè. Bỏ quên dòng này là
   * hero trang Collection chừa 168px trống dưới chữ trên điện thoại.
   */
  .tgs-hero--trang .tgs-col-hero__trong { padding-bottom: var(--tgs-k5); }

  /*
   * TẮT CẢ HAI ĐIỂM OVERLAP. Cột đã xếp chồng: thứ nằm trên bộ ảnh không còn
   * là nền ảnh hero mà là đoạn dẫn, và dải 02 kéo lên là trùm vào nút.
   */
  .tgs-col-01 { padding-block: var(--tgs-k7); }
  .tgs-col-01__anh { margin-top: 0; }
  .tgs-col-02 { margin-top: 0; padding-block: var(--tgs-k7); }

  /* Ba cột trong 272px lòng container thì mỗi ảnh còn 77px — về một cột. */
  .tgs-col-01__anh {
    grid-template-columns: 1fr;
    gap: var(--tgs-k2);
  }
  .tgs-col-01__anh > :nth-child(1),
  .tgs-col-01__anh > :nth-child(4) { grid-column: 1 / -1; }
  .tgs-col-01__anh .tgs-the-anh { height: 300px; }

  .tgs-col-02__ds { margin-top: var(--tgs-k5); }

  .tgs-col-03 { padding-block: var(--tgs-k6); }
  .tgs-col-03__trong {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tgs-k4);
  }
}

/* ---- 13.6 · In giấy ---- */

@media print {
  .tgs-hero--trang .tgs-col-hero__trong { padding-bottom: 0; }

  .tgs-col-01 { padding-block: var(--tgs-k4); }
  .tgs-col-01__anh { margin-top: 0; }
  .tgs-col-01__anh .tgs-the-anh { height: auto; }
  .tgs-col-01__anh .tgs-the-anh img { height: auto; }

  .tgs-col-02 { margin-top: 0; padding-block: var(--tgs-k4); }

  .tgs-col-03 {
    background: none;
    color: #000;
    padding-block: var(--tgs-k4);
  }
}

/* ============================================================
 * 14 · TRANG CRAFTSMANSHIP (page-craft.php)
 *
 * ĐẶT SAU MỤC 13, cùng lý do đã ghi ở đầu mục 12 và 13: chèn vào giữa là dịch
 * số dòng của mọi bằng chứng đã ghi trong PROJECT_STATE. Khối này tự mang theo
 * phần màn hình nhỏ và phần in giấy của riêng nó ở cuối.
 *
 * BA HỆ QUẢ CỦA THỨ TỰ, phải nhớ:
 *   1. Trang này KHÔNG khai class riêng cho lòng hero — dùng thẳng
 *      `.tgs-hero__trong`. Nhờ thế nó thừa hưởng cả đệm đáy 128px của 12.1 lẫn
 *      luật 64px cho màn hình nhỏ của 12.6, không phải khai lại dòng nào. Đây
 *      là khác biệt cố ý so với trang Collection: Collection cần 168px nên
 *      buộc phải có class riêng, và vì có class riêng nên phải nhớ khai lại
 *      luật khổ nhỏ (13.5). Trang này không cần, nên không tạo thêm.
 *      Con số khớp sẵn: bản gốc trang này cũng để đệm đáy hero 80px, và
 *      128 = 80 + 48 đúng bằng phần bị dải 01 trùm lên.
 *   2. Mục 1B cho `.tgs-khoi h2 { margin-top: 26px }` và
 *      `.tgs-khoi .tgs-doan { margin-top: 30px }`, đều (0,2,0). Tiêu đề và
 *      đoạn trong bốn mục CRAFT cần `margin:0` như bản gốc — khoảng cách ở đó
 *      do LƯỚI cấp, không do margin. Nên luật của 14.2 phải viết HAI class.
 *      Một class là thua im lặng; xem BAI_HOC.md.
 *   3. `.tgs-luoi-6040` của layout.css có `gap: var(--tgs-k6)` = 96px. Bản gốc
 *      dải 02 dùng 80px, nên 14.3 khai lại khe. Giữ số của bản gốc chứ không
 *      nuốt nó vào token cho gọn.
 *
 * Số đo đọc từ `_nguon/template.html` (offset 287915 · 289303 · 290094), không
 * ước lượng: hero 74vh/520px, gradient 180deg ba điểm dừng (.5 / .15 tại 40% /
 * .9), ảnh `object-position: 50% 55%`, đệm đáy hero 80px; dải 01 nền `#F3F0E8`
 * đệm dọc 150px, mỗi hàng lưới `80px 1fr 1.1fr` khe 64px, kẻ trên 1px
 * `rgba(11,11,11,0.2)`, đệm hàng 52px, số 26px màu son, tiêu đề 38px/1.1,
 * đoạn 16px/1.8 `rgba(11,11,11,0.72)`; dải 02 nền `#0B0B0B` đệm dọc 140px,
 * lưới khe 80px căn giữa, ảnh cao 520px, đoạn 44ch.
 * ============================================================ */

/* ---- 14.1 · Hero ----
 *
 * DÙNG LẠI `.tgs-hero--trang` (78vh/560px) thay vì thêm modifier cho 74vh/520px
 * của bản gốc. Cùng quyết định đã chốt ở 13.1: chênh 4vh và 40px là nhiễu của
 * bản dựng, và mỗi `.tgs-hero--*` mới lại kéo theo một khối `@media` riêng phải
 * nhớ khai (BAI_HOC.md). Bốn trang trong dùng chung một chiều cao hero là thứ
 * dễ giữ đúng hơn bốn con số gần bằng nhau.
 */

/*
 * MỘT lớp phủ, không phải hai — giống hai trang trong kia. Số của bản gốc trang
 * này: `linear-gradient(180deg, .5 0%, .15 40%, .9 100%)`. Phải tắt tường minh
 * lớp ::before, nếu không nó vẫn còn từ luật hero chung ở mục 1.
 *
 * D3 (bước 17, nhóm C lượt 2) — ĐÃ DỜI CỬA SỔ SÁNG, KHÔNG PHẢI "TÔ ĐẬM HƠN".
 *
 * Ba con số mốc của bản gốc GIỮ NGUYÊN: 0.50 ở đỉnh, 0.15 là chỗ nhạt nhất,
 * 0.90 ở đáy. Chỉ VỊ TRÍ của chỗ nhạt nhất đổi: 40% → 22%, và thêm một điểm
 * dừng 0.78 ở 27% để dốc lên trước khi chạm chữ.
 *
 * Vì sao: bản gốc đặt cửa sổ sáng ở 40% vì giả định chữ nằm sát đáy. Trang này
 * H1 "EVERY DETAIL HAS A PURPOSE." xuống 3 dòng nên chữ bắt đầu từ **31,6%**
 * chiều cao hero (1440) và kéo tới 81,8% — tức cửa sổ sáng 0.15 rơi ĐÚNG vào
 * giữa vùng chữ. Đo ở 1440 (khung glyph thật, không phải hộp khối):
 * nhãn 10px p10 **1,39** · H1 **1,61** · đoạn 16px **3,46**
 * (ngưỡng 4,5 / 3,0 / 4,5). Đây là hero tệ nhất site.
 *
 * VÌ SAO 22%/27% CHỨ KHÔNG PHẢI 24%/31%: bản 24/31 đạt ở 1440–430 nhưng
 * **HỎNG ở 375 và 320** (nhãn 3,09 và 3,47). Ở khổ hẹp hero thấp lại còn
 * 503px và nhãn trèo lên **27,8%**, tức vào trong cửa sổ sáng. Mép trên nhãn
 * theo khổ: 1440 31,6% · 1024 39,7% · 768 44,7% · 430 38,1% · 375 27,8% ·
 * 320 27,8%. Điểm dừng phải nằm TRƯỚC số nhỏ nhất trong dãy đó.
 * → **Đổi mốc này là phải đo lại CẢ SÁU khổ, không được chỉ đo 1440.**
 *
 * GIÁ PHẢI TRẢ, đã đo: độ sáng trung bình toàn ảnh ở 1440
 * 0,1390 → **0,0721 (−48%)**.
 * Nhưng dải 0–22% (phần ảnh còn thấy) lại SÁNG HƠN bản gốc, vì cùng đi từ 0.50
 * xuống 0.15 mà quãng ngắn hơn: ở y=15% alpha là 0,261 thay vì 0,369.
 * Phần tối thêm nằm trọn dưới 22%, nơi có chữ đè.
 */
.tgs-hero__anh--craft::before { background: none; }

.tgs-hero__anh--craft::after {
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0.50) 0%,
              rgba(11, 11, 11, 0.15) 22%,
              rgba(11, 11, 11, 0.78) 27%,
              rgba(11, 11, 11, 0.90) 100%);
}

/* Bản gốc: `object-position: 50% 55%` — chủ thể hơi thấp hơn giữa khung. */
.tgs-hero__anh--craft img { object-position: 50% 55%; }

/* ---- 14.2 · Dải 01 · bốn mục Craft ----
 *
 * ĐIỂM OVERLAP THỨ NHẤT: cả dải nền ngà kéo lên 48px trùm mép dưới ảnh hero.
 * Vùng bị trùm là nền ảnh, không có chữ — đệm đáy hero 128px của 12.1 đã chừa
 * đúng 80px hở như bản gốc sau khi trừ 48px bị trùm. Hai số ràng nhau.
 *
 * Đệm đáy 222 = 150 (bản gốc) + 72 (phần bị ảnh dải 02 nhô vào, xem 14.3).
 * Đây là lý do đệm trên và đệm đáy của dải này KHÔNG bằng nhau dù bản gốc để
 * bằng nhau. Sửa một số phải tính lại số kia.
 */
.tgs-craft-01 {
  padding-block: 150px 222px;
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

/*
 * MỘT HÀNG = MỘT MỤC. Lưới `80px 1fr 1.1fr` của bản gốc, giữ nguyên.
 *
 * VÌ SAO KHÔNG PHÁ NHỊP BỐN HÀNG NÀY — đã đếm, không phải bỏ qua: cả 5 chỗ
 * `repeat(4,1fr)` của LỖI 2 nằm ở trang chủ, Collection dải 02, Made Personal
 * (2 chỗ) và Journal. Không chỗ nào ở trang này. Bốn mục ở đây là bốn hàng của
 * một DANH SÁCH có kẻ ngăn, và lưới của nó đã lệch sẵn (80 · 1 · 1.1). Làm
 * hàng này rộng hơn hàng kia là phá đúng thứ khiến nó đọc được như một danh
 * sách. Cùng cách kết luận như LỖI 3 trên trang Collection: không sửa chỉ để
 * có sửa.
 *
 * `align-items: start` để số và tiêu đề thẳng hàng với dòng đầu của đoạn, kể
 * cả khi đoạn dài 3–4 dòng.
 */
.tgs-craft-01__muc {
  display: grid;
  grid-template-columns: 80px 1fr 1.1fr;
  gap: var(--tgs-k5);
  align-items: start;
  padding-block: 52px;
  border-top: 1px solid var(--tgs-muc-20);
}

/*
 * Số mục: chữ tiêu đề, 26px, màu son. `aria-hidden` trong template vì nó lặp
 * lại thứ tự mà trình đọc màn hình đã biết; ở đây chỉ lo phần nhìn.
 */
.tgs-craft-01__so {
  font-family: var(--tgs-chu-de);
  font-size: 26px;
  line-height: 1;
  color: var(--tgs-son);
}

/*
 * HAI CLASS, không một. Mục 1B cho `.tgs-khoi h2 { margin-top: 26px }` cùng độ
 * ưu tiên (0,2,0) và nằm phía trên; một class là thua. Bản gốc để `margin:0`
 * cho cả tiêu đề lẫn đoạn — khoảng cách giữa chúng do KHE LƯỚI 64px cấp.
 *
 * 38px của bản gốc nhỏ hơn h2 của một dải (46–52px) vì đây là tiêu đề MỤC
 * trong danh sách, không phải tiêu đề dải. Cho co giãn thay vì cố định để nó
 * không nuốt hết cột giữa ở khổ hẹp.
 */
.tgs-khoi .tgs-craft-01__ten {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.1;
}

.tgs-khoi .tgs-craft-01__than {
  margin: 0;
  font-size: var(--tgs-cd-than);
  font-weight: 300;
  line-height: 1.8;
}

/* ---- 14.3 · Dải 02 · quality control ----
 *
 * `z-index: 3` chứ không phải 2: dải 01 ở trên đã lấy 2, và ảnh của dải này
 * phải vẽ ĐÈ lên nền ngà của dải 01 chứ không chui xuống dưới. Cho cả dải một
 * ngữ cảnh xếp lớp cao hơn là cách gọn nhất, và an toàn vì dải này không kéo
 * lên nên không che gì của dải trên ngoài đúng vùng ảnh nhô ra.
 */
.tgs-craft-02 {
  padding-block: 140px;
  position: relative;
  z-index: 3;
}

/* Khe 80px của bản gốc, không phải 96px mặc định của `.tgs-luoi-6040`. */
.tgs-craft-02__luoi { gap: 80px; }

/*
 * ĐIỂM OVERLAP THỨ HAI — hình dáng chưa trang nào dùng: một KHỐI ẢNH nhô LÊN
 * khỏi mép trên của dải chứa nó.
 *
 * `margin-top: -212px` = -(140 đệm trên của dải + 72 phần nhô ra ngoài).
 * Vùng bị trùm là 72px cuối trong đệm đáy 222px của dải 01 — nền ngà trống,
 * mục CRAFT cuối cùng kết thúc trước đó 150px.
 *
 * `align-self: start` là bắt buộc: `.tgs-luoi-6040` căn giữa theo chiều dọc,
 * mà căn giữa thì margin âm bị chia đôi thành khoảng hở trên–dưới thay vì đẩy
 * hẳn khối lên.
 *
 * KHÔNG dùng `.tgs-de-len` (kéo cứng 88px): trong một dải có đệm trên 140px
 * thì 88px vẫn để ảnh nằm gọn bên trong, không nhô đi đâu cả.
 */
.tgs-craft-02__anh {
  align-self: start;
  margin-top: -212px;
}

/*
 * 520px của bản gốc. Ảnh nguồn chỉ 595×596 nên ở cột rộng (~740px tại khổ
 * 1440) nó bị phóng khoảng 1,25 lần — biết trước, đã ghi vào Blockers. Đừng
 * hạ chiều cao xuống cho "nét hơn": làm thế là đổi bố cục để che một thiếu
 * hụt dữ liệu, và người sau sẽ không hiểu vì sao con số lệch bản gốc.
 */
.tgs-craft-02__anh img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
}

/*
 * Bản gốc giới hạn đoạn của dải này ở 44ch và cho màu ngà 72%.
 *
 * Màu phải khai ở đây: `.tgs-doan` của layout.css chỉ đặt bề ngang, nên đoạn
 * này thừa hưởng màu ngà đặc của body. Dải 01 thì KHÔNG cần khai màu — nó nằm
 * trong `.tgs-dai--sang`, và luật `.tgs-dai--sang p` của layout.css đã cho đúng
 * `rgba(11,11,11,0.72)` của bản gốc.
 */
.tgs-craft-02__than {
  max-width: 44ch;
  color: var(--tgs-nga-72);
}

.tgs-craft-02__nut { margin: var(--tgs-k4) 0 0; }

/* ---- 14.4 · Màn hình nhỏ ---- */

@media (max-width: 1180px) {
  /* Đệm trên hạ về 140 thì phép cộng của đệm đáy hạ theo: 140 + 72. */
  .tgs-craft-01 { padding-block: var(--tgs-k7) 212px; }

  .tgs-craft-01__muc {
    grid-template-columns: 64px 1fr 1.1fr;
    gap: var(--tgs-k4);
  }

  .tgs-craft-02__luoi { gap: var(--tgs-k5); }
}

@media (max-width: 960px) {
  /*
   * Số và tiêu đề về một hàng, đoạn xuống dưới. Overlap GIỮ NGUYÊN ở cả hai
   * điểm: thứ nằm dưới ảnh dải 02 vẫn là nền ngà trống, chưa phải chữ.
   */
  .tgs-craft-01__muc {
    grid-template-columns: 56px 1fr;
    gap: var(--tgs-k3) var(--tgs-k4);
    padding-block: var(--tgs-k4);
  }

  .tgs-khoi .tgs-craft-01__than { grid-column: 2; }

  .tgs-craft-02__anh img { height: 420px; }
}

@media (max-width: 760px) {
  /*
   * TẮT CẢ HAI ĐIỂM OVERLAP. Cột đã xếp chồng: dải 01 kéo lên là trùm vào đoạn
   * dẫn hero, và ảnh dải 02 kéo lên là đè lên mục CRAFT cuối.
   *
   * Đệm đáy hero KHÔNG phải khai lại ở đây — trang này dùng `.tgs-hero__trong`
   * chung nên luật 64px của 12.6 áp thẳng. Khác Collection, chỗ đó có class
   * riêng nên buộc phải khai lại; xem hệ quả 1 ở đầu mục 14.
   */
  .tgs-craft-01 {
    margin-top: 0;
    padding-block: var(--tgs-k7);
  }

  .tgs-craft-02__anh { margin-top: 0; }

  /* Số xuống thành một dòng riêng phía trên tiêu đề. */
  .tgs-craft-01__muc {
    grid-template-columns: 1fr;
    gap: var(--tgs-k2);
    padding-block: var(--tgs-k4);
  }

  .tgs-khoi .tgs-craft-01__than { grid-column: 1; }

  .tgs-craft-02__anh img { height: 300px; }
}

/* ---- 14.5 · In giấy ---- */

@media print {
  .tgs-craft-01 {
    margin-top: 0;
    padding-block: var(--tgs-k4);
  }

  .tgs-craft-01__muc { break-inside: avoid; }

  .tgs-craft-02 { padding-block: var(--tgs-k4); }
  .tgs-craft-02__anh { margin-top: 0; }
  .tgs-craft-02__anh img { height: auto; }
}

/* ============================================================
 * 15 · TRANG COMMUNITY (page-community.php)
 *
 * ĐẶT SAU MỤC 14, cùng lý do đã ghi ở đầu mục 12, 13 và 14: chèn vào giữa là
 * dịch số dòng của mọi bằng chứng đã ghi trong PROJECT_STATE. Khối này tự mang
 * theo phần màn hình nhỏ và phần in giấy của riêng nó ở cuối.
 *
 * BỐN HỆ QUẢ CỦA THỨ TỰ, phải nhớ:
 *   1. Trang này KHÔNG khai class riêng cho lòng hero — dùng thẳng
 *      `.tgs-hero__trong`, giống trang Craft. Nhờ thế nó thừa hưởng cả đệm đáy
 *      128px của 12.1 lẫn luật 64px cho màn hình nhỏ của 12.6, không phải khai
 *      lại dòng nào. Con số khớp sẵn: bản gốc trang này để đệm đáy hero 80px,
 *      và 128 = 80 + 48 đúng bằng phần bị dải 01 trùm lên.
 *   2. `.tgs-luoi-6040` của layout.css có `gap: var(--tgs-k6)` = 96px, ĐÚNG
 *      BẰNG khe của cả ba dải trang này. Khác trang Craft (bản gốc 80px, phải
 *      khai lại). Không khai lại khe ở đây — thêm một dòng trùng token là thêm
 *      một chỗ để lệch về sau.
 *   3. Mục 1B cho `.tgs-khoi h2 { margin-top: 26px }` và
 *      `.tgs-khoi .tgs-doan { margin-top: 30px }`, đều (0,2,0). Bản gốc trang
 *      này để 22px và 26px. GIỮ NHỊP CHUNG 26/30 của site, đúng quyết định đã
 *      chốt ở phiên (h) cho trang Collection — không đi sửa từng trang về số lẻ
 *      của bản dựng. Chỗ nào cần đè mục 1B thì phải viết HAI class; xem 15.4.
 *   4. Dải 03 dùng `.tgs-dai--sang` để thừa hưởng màu chữ và màu nhãn của nền
 *      sáng, nhưng nền của nó là `#E7E1D5` chứ không phải `#F3F0E8`. Luật đổi
 *      nền phải HAI class (`.tgs-dai--sang.tgs-cong-03`) mới thắng được
 *      `.tgs-dai--sang` — bằng điểm rồi trông vào thứ tự file là cái bẫy đã ghi
 *      trong BAI_HOC.md.
 *
 * Số đo đọc từ `_nguon/template.html` (nhánh `isCommunity`, offset
 * 294604–299693), không ước lượng: hero 76vh/520px, gradient 180deg ba điểm
 * dừng (.5 / .2 tại 42% / .9), ảnh `object-position: 50% 62%`, đệm đáy hero
 * 80px; dải 01 nền `#F3F0E8` đệm dọc 150px, lưới khe 96px căn đầu, tiêu đề
 * 54px/1.05, đoạn 44ch, khung viền `rgba(11,11,11,0.2)` đệm 56px 48px, vòng
 * tròn 44px viền son, lời 28px/1.3 cách trên 32px, ghi chú 13.5px/1.8
 * `rgba(11,11,11,0.6)` cách trên 22px; dải 02 nền `#0B0B0B` đệm dọc 150px, ảnh
 * cao 520px `object-position:70% 50%`, tiêu đề 58px/1.04, đoạn 42ch; dải 03 nền
 * `#E7E1D5` đệm dọc 120px, tiêu đề 48px/1.06, đoạn 42ch 15.5px, đường kẻ chân
 * `rgba(11,11,11,0.4)` đệm đáy 14px.
 * ============================================================ */

/* ---- 15.1 · Hero ----
 *
 * DÙNG LẠI `.tgs-hero--trang` (78vh/560px) thay vì thêm modifier cho 76vh/520px
 * của bản gốc. Cùng quyết định đã chốt ở 13.1 và 14.1: chênh 2vh và 40px là
 * nhiễu của bản dựng, và mỗi `.tgs-hero--*` mới lại kéo theo một khối `@media`
 * riêng phải nhớ khai (BAI_HOC.md).
 */

/*
 * MỘT lớp phủ, không phải hai — giống ba trang trong kia. Số của bản gốc trang
 * này: `linear-gradient(180deg, .5 0%, .2 42%, .9 100%)`. Điểm dừng giữa ở 42%
 * chứ không phải 40% như Story và Craft; giữ đúng số đọc được. Phải tắt tường
 * minh lớp ::before, nếu không nó vẫn còn từ luật hero chung ở mục 1.
 */
.tgs-hero__anh--community::before { background: none; }

.tgs-hero__anh--community::after {
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0.50) 0%,
              rgba(11, 11, 11, 0.20) 42%,
              rgba(11, 11, 11, 0.90) 100%);
}

/*
 * Bản gốc: `object-position: 50% 62%` — khung ngắm hạ xuống dưới giữa khá
 * nhiều. Có lý do: đây là ảnh BA NGƯỜI, phần cần thấy là chân và giày ở nửa
 * dưới khung, không phải mặt người. Đừng "căn lại cho cân".
 */
.tgs-hero__anh--community img { object-position: 50% 62%; }

/* ---- 15.2 · Dải 01 · Community stories ----
 *
 * ĐIỂM OVERLAP THỨ NHẤT: cả dải nền ngà kéo lên 48px trùm mép dưới ảnh hero.
 * Vùng bị trùm là nền ảnh, không có chữ — đệm đáy hero 128px của 12.1 đã chừa
 * đúng 80px hở như bản gốc sau khi trừ 48px bị trùm. Hai số ràng nhau.
 *
 * `z-index: 2` để dải này nằm trên dải 02 (z-index 1 ở 15.3). Cần cho điểm
 * overlap thứ hai, xem ngay dưới.
 */
.tgs-cong-01 {
  padding-block: 150px;
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

/*
 * `align-items: start` của bản gốc — khung bên phải không được kéo cao bằng cột
 * chữ. `.tgs-luoi-6040` mặc định căn giữa, nên phải có `--dau` ở HTML; luật này
 * chỉ ghi lại cho người đọc file, không thêm gì.
 */

/* Bản gốc giới hạn đoạn dẫn của dải này ở 44ch, hẹp hơn `.tgs-doan` (50ch). */
.tgs-cong-01__dan { max-width: 44ch; }

/*
 * KHUNG TRẠNG THÁI RỖNG. `.tgs-the` đã cấp viền và `min-width:0`; ở đây chỉ
 * thay đệm 34/30/30 của thẻ bằng 56/48 của bản gốc.
 *
 * NỀN NGÀ ĐẶC, không trong suốt như `.tgs-the` — và đây KHÔNG phải thay đổi
 * thẩm mỹ. Ở trạng thái rỗng, khung này thõng 72px xuống dải nền mực (xem
 * 15.2b). Viền của nó là `rgba(11,11,11,0.2)`: trên nền ngà thì thấy, trên nền
 * mực thì gần như biến mất, và lúc đó khung trông như bị cắt cụt thay vì đè
 * lên. Nền đặc làm phần thõng xuống đọc được thành một khối liền. Trên nền ngà
 * màu này TRÙNG ĐÚNG màu dải nên phần nằm trong dải không đổi gì so với bản
 * gốc — đã so bằng mắt trên ảnh chụp, không phải suy.
 */
.tgs-cong-01__khung {
  padding: 56px 48px;
  background: var(--tgs-nga);
}

/* Vòng tròn 44px viền son — bản gốc là một <div> trống, ở đây là <span> có
   aria-hidden. Cần `display:block` vì span mặc định là inline. */
.tgs-cong-01__vong {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--tgs-son);
}

/*
 * Lời của trạng thái rỗng: chữ tiêu đề 28px, nhưng là thẻ <p> chứ không phải
 * <h*> — nó là một câu nói, không phải một mục trong dàn ý. Vì là <p> nên
 * `.tgs-dai--sang p { color: rgba(11,11,11,0.72) }` của layout.css áp vào, mà
 * bản gốc cho câu này màu mực đặc. Phải khai lại màu.
 *
 * HAI CLASS, không một — và tôi đã viết một class ở bản đầu rồi phải sửa.
 * `.tgs-dai--sang p` là (0,2,0); `.tgs-cong-01__loi` chỉ (0,1,0) nên thua dù
 * pages.css nạp sau. Đo trên trang thật: `color` ra `rgba(11,11,11,0.72)`,
 * đúng cái vừa định đè. Không đọc file để kết luận — mở trang, getComputedStyle.
 * Đây là lần thứ BA của cùng một bẫy trong dự án này; xem BAI_HOC.md.
 */
.tgs-dai--sang .tgs-cong-01__loi {
  margin: 32px 0 0;
  font-family: var(--tgs-chu-de);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: var(--tgs-muc);
}

/*
 * HAI CLASS, cùng lý do và cùng bẫy như `.tgs-cong-01__loi` ngay trên: bản gốc
 * cho ghi chú này màu mực 60%, nhưng `.tgs-dai--sang p` (0,2,0) cấp 72%. Một
 * class thì im lặng thua, và chênh 12% màu là thứ nhìn ảnh chụp không thấy.
 */
.tgs-dai--sang .tgs-cong-01__ghi-chu {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(11, 11, 11, 0.6);
}

/* ---- 15.2b · ĐIỂM OVERLAP THỨ HAI ----
 *
 * HÌNH DÁNG CHƯA TRANG NÀO DÙNG: một khối thõng XUỐNG, cắt qua mép DƯỚI của
 * dải chứa nó. Trang chủ, Our Story và Collection đều kéo khối LÊN; Craft đẩy
 * ảnh LÊN khỏi mép trên. Đây là chiều ngược lại.
 *
 * PHÉP CỘNG, ba dòng ràng nhau — sửa một dòng phải tính lại cả ba:
 *   · dải bỏ đệm đáy      → mép dưới dải TRÙNG mép dưới hàng lưới;
 *   · cột chữ tự mang 150px đệm đáy → chữ vẫn có khoảng thở đúng bằng bản gốc;
 *   · khung `align-self: end` + `margin-bottom: -72px` → mép dưới khung nằm
 *     dưới mép dải đúng 72px.
 *
 * VÌ SAO `align-self: end` LÀ BẮT BUỘC, không phải chọn cho đẹp: với
 * `align-self: start` (mặc định của lưới này) thì margin âm chỉ làm khung đóng
 * góp ít hơn vào chiều cao hàng — hàng cao bằng cột chữ, khung vẫn nằm gọn bên
 * trong, KHÔNG thõng đi đâu cả. Cùng họ với bẫy đã ghi ở 14.3 cho ảnh trang
 * Craft, nhưng ngược chiều.
 * Với `align-self: end`, đáy hộp lề của khung trùng đáy hàng, mà đáy hộp lề =
 * đáy khung + (−72), nên đáy khung rơi xuống dưới đáy hàng 72px. Đúng thứ cần.
 *
 * 72px này rơi vào 72px ĐẦU trong đệm trên 150px của dải 02 — nền mực trống,
 * ảnh và chữ của dải đó bắt đầu sau đó 78px nữa.
 *
 * CHỈ BẬT KHI CHƯA CÓ CÂU CHUYỆN NÀO (class `--trong`, đặt từ PHP). Có câu
 * chuyện thì dưới khung là danh sách thẻ chứ không còn nền trống, và quy tắc
 * overlap của AUDIT-BO-CUC.md cấm đè lên chữ.
 */
.tgs-cong-01--trong { padding-bottom: 0; }

.tgs-cong-01--trong .tgs-cong-01__gioi-thieu { padding-bottom: 150px; }

.tgs-cong-01--trong .tgs-cong-01__khung {
  align-self: end;
  margin-bottom: -72px;
}

/* ---- 15.2c · Danh sách câu chuyện ----
 *
 * Chỉ in ra khi có bài đã tick đồng ý đăng — xem điều 3 ở đầu
 * page-community.php. Lưới `.tgs-luoi-the` TỰ CO theo bề ngang, không ép số
 * cột: số câu chuyện chưa biết trước, mà `repeat(4,1fr)` chính là LỖI 2 của
 * audit. Class này đã có sẵn ở layout.css cùng hai lỗi tràn ngang đã sửa.
 */
.tgs-cong-01__ds { margin-top: var(--tgs-k6); }

.tgs-cong-01__the-anh {
  margin: -34px -30px 0;   /* ảnh tràn ra sát viền thẻ, đúng đệm của `.tgs-the` */
  overflow: hidden;
}

.tgs-cong-01__the-anh img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* ---- 15.3 · Dải 02 · Invitation ----
 *
 * `z-index: 1` để nằm DƯỚI dải 01 — phần thõng của khung trạng thái rỗng phải
 * vẽ đè lên nền mực này. Không có dòng này thì dải 02 vẽ sau và che mất, vì
 * trong dòng chảy DOM nó đứng sau.
 */
.tgs-cong-02 {
  padding-block: 150px;
  position: relative;
  z-index: 1;
}

/*
 * ẢNH Ở CỘT RỘNG (`.tgs-luoi-6040` thường, 1.5fr 1fr) — cùng hình với dải 02
 * trang Craft, và ĐÓ LÀ KẾT QUẢ CỦA SỐ ĐO, không phải chép lại.
 *
 * Bản nháp đầu của mục này dùng `--dao` cho ảnh vào cột hẹp, lý do ghi là "ảnh
 * gốc khổ dọc". Đo lại file thì SAI: `_nguon/anh/img10_1f0d7f9d.jpg` là
 * **1500×643**, tỷ lệ 2,33:1 khổ NGANG. Con số 1122×1402 tôi lấy từ phần văn
 * xuôi của `AUDIT-BO-CUC.md` — đó là cỡ của bảy ảnh KHÁC trong cùng thư mục,
 * không phải ảnh này.
 *
 * Hệ quả đo được, đây mới là căn cứ chọn cột:
 *   cột hẹp  ~493px → khung 493×520 (0,95:1) cắt mất 59% bề ngang ảnh;
 *   cột rộng ~740px → khung 740×520 (1,42:1) cắt mất 39%.
 * Ảnh ngang dẹt cần bề NGANG. "Cho khác hình trang bên cạnh" là sở thích, quy
 * tắc chọn bên rộng theo nội dung của audit là luật — luật thắng.
 *
 * KHÔNG có upscale ở đây: 520 / 643 = 0,81 lần, ảnh thu nhỏ chứ không phóng to.
 * Khác hai ảnh trang Craft, và khác cả ảnh hero của chính trang này.
 */

.tgs-cong-02__anh img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  /* Bản gốc: chủ thể lệch phải trong khung. */
  object-position: 70% 50%;
}

/*
 * Bản gốc giới hạn đoạn của dải này ở 42ch và cho màu ngà 72%.
 *
 * Màu phải khai ở đây: `.tgs-doan` của layout.css chỉ đặt bề ngang, nên đoạn
 * này thừa hưởng màu ngà đặc của body. Cùng lý do như 14.3 của trang Craft.
 */
.tgs-cong-02__than {
  max-width: 42ch;
  color: var(--tgs-nga-72);
}

.tgs-cong-02__nut { margin: var(--tgs-k4) 0 0; }

/* ---- 15.4 · Dải 03 · Join the Circle ----
 *
 * HAI CLASS để đổi nền: `.tgs-dai--sang` (0,1,0) đã đặt nền `#F3F0E8`, một
 * class nữa cùng điểm thì chỉ thắng nhờ thứ tự file — đúng cái bẫy đã ghi
 * trong BAI_HOC.md. `.tgs-dai--sang.tgs-cong-03` là (0,2,0), thắng bằng điểm.
 * Vẫn giữ `.tgs-dai--sang` ở HTML vì cần màu chữ, màu nhãn son và màu đoạn
 * `rgba(11,11,11,0.72)` mà nó cấp.
 *
 * `.tgs-dai--vua` cho `padding-block: var(--tgs-k6)` = 96px; bản gốc dải này là
 * 120px. Cùng lý do trên, khai bằng hai class.
 */
.tgs-dai--sang.tgs-cong-03 { background: var(--tgs-nga-dam); }
.tgs-dai--vua.tgs-cong-03  { padding-block: 120px; }

/*
 * HAI CLASS, không một. Mục 1B cho `.tgs-khoi h2 { margin-top: 26px }` (0,2,0);
 * bản gốc dải này để `margin: 0` cho tiêu đề vì nó là phần tử ĐẦU của cột và
 * dải không có nhãn đứng trên. Một class là thua im lặng.
 * (Mục 1B đã có `.tgs-khoi h2:first-child { margin-top: 0 }` cùng điểm và nằm
 * trên — dựa vào nó là dựa vào thứ tự file. Khai thẳng cho chắc.)
 */
.tgs-khoi .tgs-cong-03__tieu-de {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.06;
}

/* Bản gốc: 15.5px, hẹp hơn nửa point so với chữ thân 16px, và 42ch. */
.tgs-khoi .tgs-cong-03__dan {
  margin-top: 22px;
  max-width: 42ch;
  font-size: 15.5px;
}

/*
 * LỜI MỜI — đọc điều 4 ở đầu page-community.php trước khi sửa khối này.
 *
 * Đường kẻ chân và đệm đáy 14px là của bản gốc, giữ nguyên. Cái ĐÃ BỎ là ô
 * `<input type="email">` nằm trên đường kẻ đó, vì chưa có nơi nhận địa chỉ.
 * Khi có nơi nhận thì thêm ô nhập vào chính khối này, không phải dựng lại dải.
 *
 * `justify-self: start` là dòng quan trọng, và đây là thứ chỉ ảnh chụp mới cho
 * thấy: bản gốc để đường kẻ chạy hết bề ngang cột, vì dưới đường kẻ đó có một
 * ô nhập chiếm chỗ (`flex:1`). Bỏ ô nhập mà giữ nguyên thì còn lại một gạch
 * dài 493px với bốn chữ nhỏ ở đầu — trông đúng như một ô nhập liệu bị hỏng,
 * tức là tệ hơn cả thứ đang tránh.
 *
 * ĐÃ THỬ `display: inline-flex` TRƯỚC, KHÔNG ĂN THUA — đừng thử lại. Đo được:
 * bề ngang vẫn 493px. Lý do: khối này là CON TRỰC TIẾP của một grid container,
 * mà con của grid/flex bị "blockify" — `inline-flex` tính ra thành `flex`.
 * Thứ điều khiển bề ngang của một grid item là `justify-self`, không phải
 * `display`.
 *
 * Thêm lại ô nhập thì bỏ `justify-self` để đường kẻ dài lại. Hai dòng ràng nhau.
 */
.tgs-cong-03__moi {
  display: flex;
  align-items: center;
  justify-self: start;
  /*
   * BƯỚC 17 · M4/D6 — đệm đáy hạ 14px → 7px, bù đúng 7px đệm dọc vừa thêm cho
   * `.tgs-cong-03__nut` bên dưới. Cộng lại vẫn 14px từ đáy chữ xuống đường kẻ,
   * tức HÌNH KHÔNG ĐỔI; chỉ hộp bấm cao thêm 7px về phía trên.
   */
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(11, 11, 11, 0.4);
}

/*
 * Chữ "Join the Circle" của bản gốc: 10px/0.24em, hoa, màu son, KHÔNG có đường
 * kẻ riêng — đường kẻ là của cả hàng. `.tgs-nut-chu` mang sẵn cỡ chữ và giãn
 * cách đúng nhưng kèm một `border-bottom`; tắt nó đi ở đây.
 *
 * Độ ưu tiên: `.tgs-dai--sang .tgs-nut-chu` bên components.css là (0,2,0).
 * `.tgs-cong-03 .tgs-cong-03__nut` cũng (0,2,0) nhưng pages.css nạp SAU nên
 * thắng. Đây là chỗ CỐ Ý dựa vào thứ tự file, và ghi ra để người sau biết là
 * cố ý: đổi thứ tự nạp CSS trong functions.php là hỏng dòng này.
 */
.tgs-cong-03 .tgs-cong-03__nut {
  /*
   * BƯỚC 17 · M4/D6 — đo trước khi sửa: 114,31 × 10px, tức đúng chiều cao của
   * chữ, không có đệm dọc nào. Đây là đích bấm tệ nhất site (23% chuẩn 44px,
   * 42% chuẩn WCAG 2.5.8 là 24px).
   * `padding-block: 7px` cho 10 + 14 = 24px, đủ ngưỡng AA. KHÔNG lên thẳng
   * 44px: thêm 34px đệm quanh một dòng chữ 10px là phá hẳn nhịp tối giản của
   * bản gốc — 44px ghi lại thành việc chờ người vận hành quyết.
   */
  padding-block: 7px;
  border-bottom: 0;
  /*
   * BƯỚC 19 · B-15-2 — 10px = chữ nhỏ. Nền ở đây KHÔNG phải ngà mà là ngà đậm
   * `#E7E1D5`, đo được trên trang: son gốc chỉ 3,55:1. Biến thể sáng đưa lên
   * 4,10 — khá hơn nhưng VẪN TRƯỢT AA. Ghi BLOCKER B-19-1, không tự đặt màu
   * thứ ba để "cho đủ điểm".
   */
  color: var(--tgs-son-tren-sang);
  white-space: nowrap;
}

.tgs-cong-03 .tgs-cong-03__nut:hover,
.tgs-cong-03 .tgs-cong-03__nut:focus-visible {
  color: var(--tgs-muc);
}

/* ---- 15.5 · Màn hình nhỏ ---- */

@media (max-width: 1180px) {
  /* Khe lưới đã tự hạ về 64px ở layout.css; ở đây chỉ hạ đệm dải. */
  .tgs-cong-01,
  .tgs-cong-02 { padding-block: var(--tgs-k7); }

  /* Đệm đáy cột chữ đi theo đệm dải, giữ nguyên phép cộng của 15.2b. */
  .tgs-cong-01--trong { padding-bottom: 0; }
  .tgs-cong-01--trong .tgs-cong-01__gioi-thieu { padding-bottom: var(--tgs-k7); }

  .tgs-cong-01__khung { padding: 48px 40px; }
}

@media (max-width: 960px) {
  .tgs-cong-02__anh img { height: 420px; }
  .tgs-cong-01__the-anh img { height: 220px; }
}

@media (max-width: 760px) {
  /*
   * TẮT CẢ HAI ĐIỂM OVERLAP. Cột đã xếp chồng: dải 01 kéo lên là trùm vào đoạn
   * dẫn hero, và khung trạng thái rỗng thõng xuống là đè lên ẢNH của dải 02 —
   * lúc xếp chồng, thứ nằm ngay dưới khung không còn là nền trống.
   *
   * Đệm đáy hero KHÔNG phải khai lại ở đây — trang này dùng `.tgs-hero__trong`
   * chung nên luật 64px của 12.6 áp thẳng. Giống trang Craft, khác Collection.
   *
   * Ba dòng của 15.2b phải TRẢ LẠI ĐỦ BA, không chỉ bỏ margin âm: bỏ mỗi margin
   * mà quên `padding-bottom` là dải mất hẳn 150px đệm đáy và chữ dính vào dải
   * sau.
   */
  .tgs-cong-01 { margin-top: 0; }

  .tgs-cong-01--trong { padding-bottom: var(--tgs-k7); }
  .tgs-cong-01--trong .tgs-cong-01__gioi-thieu { padding-bottom: 0; }
  .tgs-cong-01--trong .tgs-cong-01__khung {
    align-self: auto;
    margin-bottom: 0;
  }

  .tgs-cong-01__khung { padding: var(--tgs-k4) var(--tgs-k3); }

  .tgs-cong-01__ds { margin-top: var(--tgs-k5); }

  .tgs-cong-02__anh img { height: 300px; }

  /*
   * ĐO ĐƯỢC RỒI MỚI THÊM DÒNG NÀY. Ba dải kia dùng `var(--tgs-k7)`, mà
   * layout.css hạ token đó 140px → 88px trong chính khối 760px này. Dải 03 khai
   * số cứng 120px nên nó KHÔNG đi theo: đo ở khổ 320 thấy `padding-top` vẫn
   * 120px trong khi hai dải trên đã về 88px — một dải thưa hơn hẳn hai dải kia
   * ngay dưới nó.
   * Đây là mặt trái của việc khai số cứng thay vì token, chấp nhận ở 15.4 vì
   * bản gốc để 120px chứ không phải 140px. Hệ quả thì phải trả ở đây.
   */
  .tgs-dai--vua.tgs-cong-03 { padding-block: var(--tgs-k7); }

  /*
   * Lời mời xuống dòng riêng dưới đoạn văn — lưới đã về một cột nên nó không
   * còn nằm cạnh chữ nữa, cần khoảng cách. `inline-flex` đã khai ở 15.4 cho
   * mọi khổ, không lặp lại ở đây.
   */
  .tgs-cong-03__moi { margin-top: var(--tgs-k4); }
}

/* ---- 15.6 · In giấy ---- */

@media print {
  .tgs-cong-01 {
    margin-top: 0;
    padding-block: var(--tgs-k4);
  }

  .tgs-cong-01--trong { padding-bottom: var(--tgs-k4); }
  .tgs-cong-01--trong .tgs-cong-01__gioi-thieu { padding-bottom: 0; }
  .tgs-cong-01--trong .tgs-cong-01__khung {
    align-self: auto;
    margin-bottom: 0;
  }

  .tgs-cong-01__the,
  .tgs-cong-01__khung { break-inside: avoid; }

  .tgs-cong-02,
  .tgs-dai--vua.tgs-cong-03 { padding-block: var(--tgs-k4); }

  .tgs-cong-02__anh img,
  .tgs-cong-01__the-anh img { height: auto; }
}

/* ============================================================
 * 16 · TRANG CONTACT (page-contact.php)
 *
 * Số đo đọc từ `_nguon/template.html`, nhánh `isContact`, offset
 * 299710–305563. Không ước lượng:
 *   hero 62vh/440px, lớp phủ 180deg .5 0% · .25 40% · .92 100%, đệm đáy 74px,
 *   đoạn dẫn 54ch; dải 01 đệm dọc 140px trên và 160px dưới, lưới `1fr 1.4fr`
 *   khe 96px căn đầu; bảng kê cách nhãn 26px, kẻ trên 20%, mỗi dòng đệm dọc
 *   17px cỡ 15px kẻ dưới 12%; ghi chú 13.5px/1.8 màu 60% cách trên 34px;
 *   lưới ô nhập khe 28px, kẻ chân ô 25% đệm đáy 10px, nhãn ô 9px/0.22em màu
 *   50%, ô nhập 15px cách nhãn 8px, hai ô rộng cách trên 28px, nút cách 38px.
 * ============================================================ */

/* ---- 16.1 · Hero THẤP ----
 *
 * ĐÂY LÀ MODIFIER HERO ĐẦU TIÊN ĐƯỢC THÊM SAU `--trang`, và nó đi ngược quyết
 * định đã chốt ở 13.1 · 14.1 · 15.1 ("dùng lại 78vh/560px cho mọi trang
 * trong"). Lý do là số, không phải sở thích: ba trang kia lệch 2–4vh và 40px
 * so với `--trang` — nhiễu của bản dựng. Trang này lệch **16vh và 120px**
 * (62vh/440px so với 78vh/560px), tức là thấp hơn một phần năm. Bản gốc cố ý
 * làm trang tiện ích ngắn hơn trang kể chuyện. Nuốt 120px đó là đổi thiết kế,
 * không phải bỏ qua nhiễu.
 *
 * GIÁ PHẢI TRẢ, đã trả đủ ở 16.6 và 16.7: mỗi `.tgs-hero--*` mới kéo theo
 * nghĩa vụ khai lại trong MỌI khối `@media` mà `.tgs-hero--trang` đã khai —
 * vì các khối đó nằm TRƯỚC mục này trong file, mà luật ở đây cùng độ ưu tiên
 * và viết sau thì thắng. Bỏ quên một khối là hero 62vh nằm nguyên trên điện
 * thoại. Xem BAI_HOC.md.
 */
.tgs-hero--thap {
  height: 62vh;
  min-height: 440px;
}

@supports (height: 62dvh) {
  .tgs-hero--thap { height: 62dvh; }
}

/*
 * KHÁC BẢN GỐC — đệm đáy 122px thay vì 74px. Cùng phép cộng như bốn trang kia:
 * 122 = 74 (khoảng hở thị giác của bản gốc) + 48 (phần bị dải 01 trùm lên,
 * xem 16.2). Sửa một số thì phải sửa số kia. Chúng ràng nhau.
 */
.tgs-hero--thap .tgs-hero__trong { padding-bottom: 122px; }

/* Bản gốc cho đoạn dẫn trang này 54ch — rộng nhất trong tám trang. */
.tgs-hero--thap .tgs-hero__dan { max-width: 54ch; }

/*
 * MỘT lớp phủ, không phải hai — giống bốn trang trong kia. Số của bản gốc
 * trang này: `linear-gradient(180deg, .5 0%, .25 40%, .92 100%)`. Điểm dừng
 * giữa 0.25 và điểm cuối 0.92 đều KHÁC ba trang kia; giữ đúng số đọc được.
 * Phải tắt tường minh lớp ::before, nếu không nó vẫn còn từ luật hero chung
 * ở mục 1.
 */
.tgs-hero__anh--contact::before { background: none; }

.tgs-hero__anh--contact::after {
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0.50) 0%,
              rgba(11, 11, 11, 0.25) 40%,
              rgba(11, 11, 11, 0.92) 100%);
}

/*
 * Bản gốc KHÔNG khai `object-position` cho ảnh hero trang này, tức là dùng mặc
 * định `50% 50%`. Phải khai lại tường minh: luật hero chung ở mục 1 đặt
 * `64% 50%` và nó vẫn còn hiệu lực ở đây.
 */
.tgs-hero__anh--contact img { object-position: 50% 50%; }

/* ---- 16.2 · Dải 01 · đệm dọc và ĐIỂM OVERLAP THỨ NHẤT ---- */

/*
 * ĐIỂM OVERLAP 1 — dải ngà kéo lên 48px trùm mép dưới ảnh hero.
 * `position: relative` + `z-index: 1` là bắt buộc: không có nó thì nền ngà vẽ
 * dưới ảnh hero và phần trùm không nhìn thấy được.
 * Bên dưới vùng bị trùm là ẢNH, không phải chữ — đệm đáy 122px ở 16.1 đã chừa
 * cho đoạn dẫn hero đứng cách vùng trùm đúng 74px.
 *
 * Đệm dọc 140/160 là số bản gốc, KHÔNG dùng `.tgs-dai`: class đó cấp
 * `padding-block: var(--tgs-k7)` tức 140px cả trên lẫn dưới, mất mất 20px
 * chênh lệch mà bản gốc cố ý để ở đáy.
 */
.tgs-lien-01 {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  padding-block: 140px 160px;
}

/* ---- 16.3 · Lưới hai cột của dải 01 ----
 *
 * `1fr 1.4fr` là SỐ CỦA BẢN GỐC — đã lệch sẵn nên KHÔNG nằm trong 13 chỗ
 * `1fr 1fr` của LỖI 3. Đừng "thống nhất" về `.tgs-luoi-6040--dao` (1fr 1.5fr):
 * cùng lý do đã ghi cho cặp ảnh của trang Our Story ở 12.2 — giữ số đo thật
 * quan trọng hơn giữ một class.
 *
 * `align-items: start` vì hai cột cao lệch hẳn nhau: bảng kê 5 dòng ngắn hơn
 * form 6 ô. Căn giữa thì bảng kê trôi xuống lưng chừng, mất đường ngang chung
 * với ô nhập đầu tiên.
 */
.tgs-lien-01__luoi {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--tgs-k6);
  align-items: start;
}

/* ---- 16.4 · Bảng kê loại yêu cầu và ĐIỂM OVERLAP THỨ HAI ---- */

/*
 * ĐIỂM OVERLAP 2 — ĐƯỜNG KẺ tràn ra ngoài lưới chữ, CHỮ THÌ ĐỨNG YÊN.
 *
 * `AUDIT-BO-CUC.md` liệt kê "tràn ra ngoài lưới chữ" là một cách sửa LỖI 1
 * (ví dụ nó nêu: câu tiếng Nhật trang Our Story, đã dựng ở 12.2). Hình ở đây
 * KHÁC: Our Story đẩy cả một dòng CHỮ ra ngoài; ở đây chỉ có kẻ ngang đi ra,
 * còn chữ giữ nguyên mép lưới. Chưa trang nào làm hình này.
 *
 * Cặp `margin` âm + `padding` dương đúng bằng nhau, và cả hai đọc
 * `var(--tgs-le)` chứ không phải số cố định: đường kẻ dừng CHÍNH XÁC ở mép
 * container ở mọi khổ, không bao giờ đi xa hơn. Đặt -56px cứng thì ở khổ 1180
 * xuống, đệm chỉ còn 40px và kẻ lòi ra ngoài khung nhìn — tràn ngang, thứ
 * không có cách nào chữa từ phía CSS. Đây đúng là lỗi mà 12.2 đã tránh.
 *
 * An toàn tuyệt đối về mặt quy tắc "không đè chữ": thứ đi ra ngoài lưới là
 * đường kẻ 1px, không phải chữ, và bên trái nó là nền ngà trống.
 *
 * `.tgs-khoi .tgs-nhan { margin-bottom: 0 }` ở 1B đã lo phần trên, nên 26px
 * ở đây là khoảng cách thật giữa nhãn và kẻ đầu tiên.
 */
.tgs-lien-01__loai {
  margin-top: 26px;
  border-top: 1px solid var(--tgs-muc-20);
  margin-inline-start: calc(var(--tgs-le) * -1);
  padding-inline-start: var(--tgs-le);
}

.tgs-lien-01__loai-muc {
  padding: 17px 0;
  border-bottom: 1px solid var(--tgs-muc-12);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
}

/*
 * HAI CLASS, không phải một. `.tgs-dai--sang p { color: … }` ở layout.css có
 * độ ưu tiên (0,1,1); một class ở đây là (0,1,0) và thua im lặng — đúng lỗi
 * đã ghi trong BAI_HOC.md với `.tgs-story-03__dan`.
 */
.tgs-lien-01 .tgs-lien-01__ghi-chu {
  margin: 34px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--tgs-muc-60);
  max-width: 46ch;
}

/* ---- 16.4b · Liên hệ thẳng (đường lui khi form còn khoá) ----
 *
 * Nằm dưới ghi chú của cột trái. Cố ý KHÔNG lấy điểm overlap tràn lề của
 * `.tgs-lien-01__loai` ở 16.4 — khối kia là hoa văn, khối này là thông tin
 * người ta cần đọc và bấm, nên nó ở nguyên trong lòng container.
 *
 * Vùng bấm cao 44px theo khuyến nghị ngón tay; nhãn và liên kết xếp chồng để
 * ở khổ 320 địa chỉ email dài không đẩy tràn ngang.
 */
.tgs-lien-01 .tgs-lien-01__thang {
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tgs-lien-01 .tgs-lien-01__thang-muc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tgs-lien-01 .tgs-lien-01__thang-lk {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--tgs-muc);
  text-decoration: none;
  border-bottom: 1px solid var(--tgs-muc-20);
  padding-bottom: 3px;
  align-self: flex-start;
  /* Địa chỉ dài không được đẩy trang tràn ngang ở khổ 320. */
  word-break: break-word;
  transition: border-color var(--tgs-vua) var(--tgs-nhip),
			  color var(--tgs-vua) var(--tgs-nhip);
}

.tgs-lien-01 .tgs-lien-01__thang-lk:hover,
.tgs-lien-01 .tgs-lien-01__thang-lk:focus-visible {
  color: var(--tgs-son-tren-sang);   /* 15px trên nền ngà — BƯỚC 19 */
  border-bottom-color: var(--tgs-son);
}

/* ---- 16.5 · Form ----
 *
 * `<fieldset>` ở đây KHÔNG phải để trang trí: thuộc tính `disabled` của nó
 * khoá mọi ô con cùng lúc, kể cả nút submit, và trình duyệt tự lo — không cần
 * một dòng JS nào. Lý do khoá: xem điều 1 ở đầu `page-contact.php`.
 * `min-width: 0` là bắt buộc cho fieldset trong lưới: mặc định nó có
 * `min-width: min-content` và sẽ đẩy lưới tràn ngang ở khổ hẹp.
 */
.tgs-lien-01__nhom {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Khoá thấy được bằng mắt, không chỉ bằng con trỏ chuột. */
.tgs-lien-01__nhom[disabled] { opacity: 0.6; }

/*
 * LỖI 3 của AUDIT, chỗ duy nhất trên trang này (offset 302595): bốn ô nhập
 * chia `1fr 1fr`. Phá về `1fr 1.2fr`, CỘT PHẢI rộng hơn — chọn theo nội dung
 * đúng như audit yêu cầu, không phải tìm-thay: cột phải giữ Email và Country,
 * hai giá trị dài nhất của form (một địa chỉ email đầy đủ, một tên nước kiểu
 * "United Arab Emirates"); cột trái giữ tên người và số điện thoại.
 * Nhãn dài nhất là "Phone / WhatsApp" và nó nằm ở cột TRÁI: đã đo ở khổ 1440,
 * nhãn 9px/0.22em chiếm ~112px trong cột rộng ~326px — không xuống dòng.
 */
.tgs-lien-01__doi {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
}

.tgs-o {
  display: block;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tgs-muc-25);
  transition: border-color var(--tgs-vua) ease;
}

.tgs-o--rong { margin-top: 28px; }

/*
 * BƯỚC 17 · D4 — BẢN SAO của luật cùng tên trong `configurator.css`.
 * `configurator.css` nạp SAU nên bản đó mới là bản có hiệu lực; sửa mỗi file
 * này thì đo lại vẫn ra 9px. Giữ hai bản giống hệt nhau để bất kỳ ai đọc file
 * nào cũng thấy đúng giá trị đang chạy. 9px/3,59:1 → 11px/4,99:1.
 */
.tgs-o__nhan {
  display: block;
  font-size: var(--tgs-cd-nhan-form);
  letter-spacing: var(--tgs-gian-ti);
  text-transform: uppercase;
  color: var(--tgs-muc-60);
}

.tgs-o__nhap {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tgs-muc);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}

/*
 * KHÁC BẢN GỐC, CÓ CHỦ Ý — hai chỗ, cùng một lý do là dùng được bằng bàn phím.
 *
 * 1. Bản gốc đặt `outline: none` trên mọi ô và KHÔNG thay bằng gì cả: người
 *    dùng bàn phím tab qua form mà không thấy mình đang ở ô nào. Ở đây vẫn bỏ
 *    viền mặc định của trình duyệt (để giữ đúng hình của bản gốc) nhưng đổi
 *    KẺ CHÂN của ô sang màu son khi ô đang được nhập — cùng cách đánh dấu đã
 *    dùng cho tab và accordion ở components.css.
 *    `:focus-within` đặt trên `.tgs-o` chứ không phải trên ô: kẻ chân thuộc về
 *    khung, không thuộc về ô.
 * 2. `resize: vertical` thay cho `resize: none` của bản gốc. Khoá hẳn nghĩa là
 *    người viết lời nhắn dài chỉ được nhìn 4 dòng một lúc. Kéo dọc không phá
 *    bố cục (cột co theo chiều cao nội dung), kéo ngang thì có — nên chỉ mở
 *    chiều dọc.
 */
.tgs-o__nhap:focus { outline: none; }
.tgs-o:focus-within { border-bottom-color: var(--tgs-son); }

.tgs-o__nhap--dai {
  resize: vertical;
  min-height: 6.4em;
}

.tgs-lien-01__gui { margin: 38px 0 0; }

/*
 * Câu báo form đang khoá. Màu son vì đây là thông tin người dùng BẮT BUỘC phải
 * đọc trước khi gõ, không phải chú thích phụ. Hai class — cùng lý do độ ưu
 * tiên đã ghi ở 16.4.
 */
.tgs-lien-01 .tgs-lien-01__chua-noi {
  margin: var(--tgs-k3) 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--tgs-son-tren-sang);   /* 13,5px trên nền ngà — BƯỚC 19 */
  max-width: 52ch;
}

/* ---- 16.6 · Màn hình nhỏ ---- */

@media (max-width: 1180px) {
  /* Khe 96px là quá rộng khi container đã hạ đệm xuống 40px. */
  .tgs-lien-01__luoi { gap: var(--tgs-k5); }
}

@media (max-width: 960px) {
  /*
   * Xếp chồng SỚM hơn 760px, có lý do đo được: ở 960 lòng container còn 880px,
   * cột form được 880 × 1.4/2.4 − 32 = 481px, và lưới ô nhập bên trong lại
   * chia tiếp thành 208 / 245. Nhãn "Phone / WhatsApp" ~112px thì còn vừa,
   * nhưng ô nhập 208px cho một địa chỉ email là chật đến mức khó gõ. Một cột
   * ở đây cho form nguyên 880px, rộng hơn cả khổ 1440 trước khi chia.
   */
  .tgs-lien-01__luoi {
    grid-template-columns: 1fr;
    gap: var(--tgs-k5);
  }

  .tgs-lien-01 { padding-block: 120px 130px; }
}

@media (max-width: 760px) {
  /*
   * KHAI LẠI chiều cao hero. Luật `height:auto` ở mục 10 và luật
   * `.tgs-hero--trang { height:auto }` ở 12.6 đều nằm TRƯỚC mục này, nên
   * `.tgs-hero--thap { height:62vh }` ở 16.1 (cùng độ ưu tiên, viết sau) ghi
   * đè cả hai. Bỏ quên khối này là hero 62vh nằm nguyên trên điện thoại.
   */
  .tgs-hero--thap {
    height: auto;
    min-height: 420px;
  }

  .tgs-hero--thap .tgs-hero__trong { padding-bottom: var(--tgs-k5); }

  /*
   * TẮT CẢ HAI ĐIỂM OVERLAP. Cột đã xếp chồng nên thứ nằm trên dải 01 không
   * còn là ảnh hero mà là đoạn dẫn; và ở khổ này đệm ngang chỉ còn 24px, kẻ
   * tràn ra là chạm mép khung nhìn.
   */
  .tgs-lien-01 { margin-top: 0; }

  .tgs-lien-01__loai {
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  .tgs-lien-01 { padding-block: var(--tgs-k7); }

  /* Bốn ô nhập về một cột — 320px không đủ cho hai ô cạnh nhau. */
  .tgs-lien-01__doi {
    grid-template-columns: 1fr;
    gap: var(--tgs-k3);
  }

}

@media (max-width: 760px) and (orientation: landscape) {
  .tgs-hero--thap { min-height: 400px; }
}

/* ---- 16.7 · In giấy ---- */

@media print {
  .tgs-hero--thap {
    height: auto;
    min-height: 0;
  }

  .tgs-hero--thap .tgs-hero__trong { padding-bottom: 0; }

  .tgs-lien-01 {
    margin-top: 0;
    padding-block: var(--tgs-k4);
  }

  .tgs-lien-01__loai {
    margin-inline-start: 0;
    padding-inline-start: 0;
  }

  /* Khoá là chuyện của màn hình. Trên giấy form chỉ là một bảng để điền tay. */
  .tgs-lien-01__nhom[disabled] { opacity: 1; }

  .tgs-lien-01__loai-muc,
  .tgs-o { break-inside: avoid; }
}

/* ============================================================
 * 17 · JOURNAL (home.php · archive.php · single.php)
 *
 * Số đo đọc từ `_nguon/template.html`, nhánh `isJournal`, offset
 * 295870–297985. Không ước lượng:
 *   hero 72vh/500px, lớp phủ 180deg .5 0% · .2 40% · .92 100%, đệm đáy 80px,
 *   H1 74px/1.02 tối đa 26ch cách trên 22px, đoạn dẫn 52ch cách trên 28px;
 *   dải 01 đệm dọc 150px; hàng chủ đề khe 40px kẻ dưới 20% đệm đáy 64px, tên
 *   chủ đề 10px/0.26em son, thân 14px/1.75 màu 70% cách trên 16px;
 *   danh sách cách hàng chủ đề 34px, mỗi dòng lưới `120px 1fr 160px` khe 48px
 *   căn baseline, đệm dọc 38px kẻ dưới 14%, rê chuột đẩy vào 14px trong .5s;
 *   cột chủ đề 9.5px/0.24em son, tiêu đề 32px/1.18, cột trạng thái 9.5px/0.22em
 *   màu 45% căn phải; ghi chú cuối 14px/1.8 màu 55% cách trên 44px tối đa 52ch.
 *
 * BỐN ĐIỀU CẦN BIẾT TRƯỚC KHI SỬA MỤC NÀY
 *
 * 1. `single.php` KHÔNG CÓ SỐ ĐO GỐC. Bản thiết kế không dựng trang chi tiết
 *    bài viết — năm dòng bài trong bản demo có `cursor:pointer` nhưng không gắn
 *    sự kiện nào. Mọi số trong 17.7–17.9 là số tôi chọn, và tôi ghi rõ để người
 *    sau không tưởng chúng đọc ra từ bản gốc như sáu trang kia. Nguyên tắc
 *    chọn: dùng lại thang chữ và thang khoảng cách đã có, không thêm giá trị lạ.
 *
 * 2. KHÔNG THÊM `.tgs-hero--*` MỚI CHO TRANG NÀY, và đây là quyết định có số.
 *    Hero gốc của Journal là 72vh/500px, `.tgs-hero--trang` là 78vh/560px:
 *    lệch 6vh và 60px. So với các lần trước — Collection 74vh/520px (4vh/40px),
 *    Community 76vh/520px, Craft 76vh/540px — đây là lần lệch NHIỀU NHẤT trong
 *    số các trang được gộp, 7,7% chiều cao và 10,7% chiều cao tối thiểu. Vẫn
 *    gộp, vì mốc phân định đã đặt ở 16.1 là trang Contact: 16vh và 120px, tức
 *    20% — gấp hơn hai lần chỗ này, và ở đó bản gốc CỐ Ý làm trang tiện ích
 *    ngắn hơn trang kể chuyện. Ở đây không có ý đồ nào như vậy: 72–78vh là dải
 *    nhiễu của cùng một loại trang.
 *    LỢI ÍCH ĐO ĐƯỢC của việc gộp: mục này KHÔNG phải khai lại hero trong bốn
 *    khối `@media` và một khối `@media print` — nghĩa vụ mà 16.1 phải gánh vì
 *    có modifier riêng, và là thứ đã gây lỗi thật một lần (xem BAI_HOC.md).
 *    Ai thấy 60px đó đáng giá hơn thì phải trả đủ năm khối kia, đừng khai một
 *    dòng `height` rồi thôi.
 *
 * 3. HAI ĐIỂM OVERLAP của danh sách nằm ở 17.5, một điểm của trang bài ở 17.8.
 *    Cả ba TỰ TẮT ở 1180px, khi đệm ngang tụt từ 56px xuống 40px và lề trang
 *    không còn chỗ trống. Đó là điều kiện tắt, không phải tuỳ chọn.
 *
 * 4. HÀNG BỐN CHỦ ĐỀ DÙNG `.tgs-luoi-4`, KHÔNG PHẢI `repeat(4,1fr)`.
 *    Hàng này CHÍNH LÀ một trong năm chỗ `repeat(4,1fr)` mà LỖI 2 của
 *    `AUDIT-BO-CUC.md` đếm được. Đừng "sửa lại cho đều".
 * ============================================================ */

/* ---- 17.1 · Hero ----
 *
 * Chiều cao và đệm đáy thừa hưởng nguyên `.tgs-hero--trang` ở 12.1 — xem điều 2
 * ở trên. Ở đây chỉ khai ba thứ RIÊNG của trang này.
 */

/*
 * MỘT lớp phủ, không phải hai — giống năm trang trong kia. Số của bản gốc trang
 * này: `linear-gradient(180deg, .5 0%, .2 40%, .92 100%)`. Điểm dừng giữa 0.2
 * KHÁC mọi trang khác (Contact 0.25, trang chủ 0.08); giữ đúng số đọc được.
 * Phải tắt tường minh lớp ::before, nếu không nó vẫn còn từ luật hero chung.
 */
.tgs-hero__anh--journal::before,
.tgs-hero__anh--bai::before { background: none; }

.tgs-hero__anh--journal::after,
.tgs-hero__anh--bai::after {
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0.50) 0%,
              rgba(11, 11, 11, 0.20) 40%,
              rgba(11, 11, 11, 0.92) 100%);
}

/*
 * Bản gốc KHÔNG khai `object-position` cho ảnh hero trang này (mặc định
 * `50% 50%`). Phải khai lại tường minh: luật hero chung ở mục 1 đặt `64% 50%`.
 */
.tgs-hero__anh--journal img,
.tgs-hero__anh--bai img { object-position: 50% 50%; }

/*
 * H1 tối đa 26ch — SỐ RIÊNG CỦA TRANG NÀY, không trang nào khác khai. Bản gốc
 * dùng nó để ép tiêu đề dài xuống ba dòng thay vì trải hết bề ngang 1440px.
 * `--tgs-cd-h1` là clamp tới 104px; bản gốc trang này để 74px, tức là nhỏ hơn
 * hero trang chủ một bậc. Giữ clamp (co được theo màn hình) nhưng hạ trần
 * xuống 74px để không to hơn bản gốc trên màn hình rộng.
 */
.tgs-journal-hero__de {
  max-width: 26ch;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 1.02;
}

/*
 * Nhãn hero của trang chủ đề và trang bài là một LIÊN KẾT. Không đổi màu, chỉ
 * thêm gạch chân mờ để phân biệt với nhãn thường — nhãn hero đã là chữ nhỏ
 * giãn rộng, thêm màu nữa thì ồn.
 */
.tgs-journal-hero__ve {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--tgs-nga-30);
  padding-bottom: 3px;
  transition: border-color var(--tgs-vua) ease;
}

.tgs-journal-hero__ve:hover,
.tgs-journal-hero__ve:focus-visible { border-bottom-color: var(--tgs-son); }

/* ---- 17.2 · Dải 01 · đệm dọc và ĐIỂM OVERLAP THỨ NHẤT ---- */

/*
 * ĐIỂM OVERLAP 1 — dải ngà kéo lên 48px trùm mép dưới ảnh hero.
 * Giống năm trang trong kia. Đệm đáy hero 128px của 12.1 đã cộng sẵn 48 đó,
 * nên mắt vẫn thấy đúng khoảng hở 80px của bản gốc. Sửa một số phải sửa số kia.
 */
.tgs-jou-01 {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  padding-block: 150px;   /* số của bản gốc */
}

/* ---- 17.3 · Hàng bốn chủ đề ---- */

.tgs-jou-01__tru {
  gap: var(--tgs-k4);                                 /* 40px, số của bản gốc */
  padding-bottom: var(--tgs-k5);                      /* 64px, số của bản gốc */
  border-bottom: 1px solid var(--tgs-muc-20);         /* 20%, số của bản gốc */
}

/* Tên chủ đề: 10px/0.26em — GIÃN RIÊNG của bản gốc trang này, không phải 0.28em. */
.tgs-jou-tru__ten {
  font-size: var(--tgs-cd-nhan);
  letter-spacing: 0.26em;
  margin: 0;
}

.tgs-jou-tru__ten a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--tgs-vua) ease;
}

.tgs-jou-tru__ten a:hover,
.tgs-jou-tru__ten a:focus-visible { border-bottom-color: currentColor; }

/* Chủ đề đang xem: gạch chân đặc, không đổi màu — màu son đã dùng hết ở đây. */
.tgs-jou-tru--dang .tgs-jou-tru__ten a { border-bottom-color: currentColor; }

.tgs-jou-tru__than {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(11, 11, 11, 0.70);
}

/* ---- 17.4 · Danh sách bài ---- */

.tgs-jou-01__ds { margin-top: 34px; }   /* số của bản gốc */

/*
 * Mỗi dòng: `120px 1fr 160px` khe 48px, căn baseline — SỐ CỦA BẢN GỐC.
 * Ba cột không đều nên dòng này KHÔNG nằm trong LỖI 2 của audit; không phải sửa.
 *
 * `position: relative` là chỗ neo cho số thứ tự ở 17.5.
 */
.tgs-jou-dong {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr 160px;
  gap: 48px;
  align-items: baseline;
  padding-block: 38px;
  border-bottom: 1px solid var(--tgs-muc-14);
  transition: padding-inline-start .5s ease;
}

/* Bản gốc: rê chuột đẩy dòng vào 14px. Chỉ áp cho dòng BẤM ĐƯỢC. */
.tgs-jou-dong:not(.tgs-jou-dong--cho):hover,
.tgs-jou-dong:focus-within { padding-inline-start: 14px; }

.tgs-jou-dong__chu-de {
  font-size: var(--tgs-cd-nhan-be);   /* 9.5px */
  letter-spacing: var(--tgs-gian-be); /* 0.24em */
  margin: 0;
}

/*
 * Tiêu đề bài 32px/1.18. `.tgs-khoi h2 { margin-top: 26px }` ở mục 1B áp cho
 * mọi h2 trong dải, kể cả h2 này — phải khai lại `margin: 0` như bản gốc, nếu
 * không mỗi dòng bị đẩy lệch 26px so với hai cột bên cạnh và baseline gãy.
 */
.tgs-khoi .tgs-jou-dong__de {
  margin: 0;
  font-family: var(--tgs-chu-de);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.18;
}

.tgs-jou-dong__de a {
  color: inherit;
  text-decoration: none;
}

/* Vùng bấm phủ cả dòng, không chỉ mấy chữ tiêu đề — bản gốc cho cả dòng bấm được. */
.tgs-jou-dong__de a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* BƯỚC 19 · B-19-2 ĐÃ GỠ (30/08 11:55). Cỡ là clamp(22px, 2.6vw, 32px): dưới
   ~1231px nó tụt về 22px, tức chữ NHỎ theo WCAG (mốc 24px weight 400), cần
   4,5:1 mà son gốc chỉ cho 4,05. Lấy trường hợp XẤU NHẤT của clamp làm chuẩn —
   một luật CSS không thể đổi màu theo bề ngang, nên phải chọn màu đạt ở khổ
   hẹp. Biến thể nền sáng cho 5,18:1; ở khổ rộng nó vẫn thừa ngưỡng 3:1. */
.tgs-jou-dong__de a:hover,
.tgs-jou-dong__de a:focus-visible { color: var(--tgs-son-tren-sang); }

/* BƯỚC 17 · D10 — "In preparation": muc-45 cho 3,07:1, muc-60 cho 4,99:1.
   Cỡ 9,5px giữ nguyên, chỉ đổi độ đậm màu. */
.tgs-jou-dong__ngay {
  font-size: var(--tgs-cd-nhan-be);   /* 9.5px */
  letter-spacing: var(--tgs-gian-ti); /* 0.22em */
  text-transform: uppercase;
  text-align: end;
  color: var(--tgs-muc-60);
}

/*
 * Dòng CHƯA BẤM ĐƯỢC (trạng thái rỗng của bản thiết kế). Không đổi con trỏ
 * chuột thành `pointer` — bản gốc có làm thế và đó là lời hứa suông: bấm vào
 * không đi đâu cả. Ở đây chuột giữ nguyên hình mũi tên, đúng với sự thật.
 */
.tgs-jou-dong--cho .tgs-jou-dong__de { color: var(--tgs-muc-72); }

.tgs-jou-01__ghi-chu {
  margin: 44px 0 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 300;
  color: rgba(11, 11, 11, 0.55);
}

/* Chủ đề rỗng: câu này đứng MỘT MÌNH, không có danh sách phía trên để cách ra. */
.tgs-jou-01__ghi-chu--tren { margin-top: 0; }

/* ---- 17.5 · ĐIỂM OVERLAP THỨ HAI · số thứ tự tràn ra lề ----
 *
 * Số dòng bò ra ngoài mép trái lưới chữ, nằm trên phần đệm ngang trống của
 * container. Hình này chưa trang nào dùng: Contact tràn ĐƯỜNG KẺ, Our Story
 * tràn một DÒNG CHỮ, Craft nhô KHỐI ẢNH lên, Community thõng KHỐI xuống.
 *
 * VÌ SAO AN TOÀN, tính được chứ không đoán:
 *   · nó nằm trong vùng đệm 56px của `.tgs-container`, tức là VẪN TRONG
 *     container — không có cách nào đẩy nó ra ngoài khung nhìn;
 *   · `inset-inline-start: -40px` + bề ngang tối đa 40px ⇒ chiếm khoảng
 *     [-40px, 0], còn dư 16px đệm trước mép container;
 *   · nó là `aria-hidden`, nằm ngoài dòng đọc, nên không đè lên chữ nào kể cả
 *     khi tiêu đề bài dài thêm vài dòng.
 *
 * ĐIỀU KIỆN TẮT: dưới 1180px đệm ngang tụt còn 40px rồi 24px — không đủ chỗ.
 * Tắt ở 17.10, không phải tuỳ chọn.
 */
.tgs-jou-dong__so {
  position: absolute;
  inset-inline-start: -40px;
  top: 38px;                         /* thẳng hàng với đệm trên của dòng */
  font-family: var(--tgs-chu-de);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--tgs-muc-12);
  pointer-events: none;
  user-select: none;
}

/* ---- 17.6 · Phân trang ----
 *
 * KHÔNG CÓ TRONG BẢN GỐC — bản gốc chỉ có năm dòng cứng nên không cần. Ở
 * WordPress thì cần, nếu không bài thứ 11 biến mất khỏi site. Dùng lại thang
 * chữ của nút chữ, không phát minh cỡ mới.
 */
.tgs-phan-trang { margin-top: var(--tgs-k5); }

.tgs-phan-trang .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgs-k3);
  align-items: center;
}

.tgs-phan-trang .page-numbers {
  font-size: var(--tgs-cd-nut);
  letter-spacing: var(--tgs-gian-nut);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tgs-muc-45);
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
}

.tgs-phan-trang a.page-numbers:hover,
.tgs-phan-trang a.page-numbers:focus-visible {
  /* BƯỚC 19 — 10px. Nền sáng: luật gốc ngay trên dùng `--tgs-muc-45`. */
  color: var(--tgs-son-tren-sang);
  border-bottom-color: var(--tgs-son);
}

.tgs-phan-trang .page-numbers.current {
  color: var(--tgs-muc);
  border-bottom-color: var(--tgs-muc);
}

/* ---- 17.7 · Trang bài · hero ----
 *
 * SỐ Ở ĐÂY LÀ SỐ TÔI CHỌN, không đọc từ bản gốc — xem điều 1 đầu mục.
 */

/*
 * Bài KHÔNG CÓ ảnh đại diện. Giữ nguyên chiều cao hero để nhịp trang không đổi
 * giữa hai bài cạnh nhau; nền là mực đặc, đúng nền mặc định của `.tgs-hero`.
 * KHÔNG lùi về một ảnh mặc định nào — xem điều 3 của single.php.
 */
.tgs-bai-hero--khong-anh { min-height: 460px; }

.tgs-bai-hero__ngay {
  margin: 26px 0 0;
  font-size: var(--tgs-cd-be);
  font-weight: 300;
  color: var(--tgs-nga-60);
}

/* ---- 17.8 · Trang bài · thân bài và ĐIỂM OVERLAP ---- */

/*
 * Cùng phép trùm 48px như 17.2. Đây là điểm overlap DUY NHẤT của trang bài:
 * trang chỉ có một ảnh, phần còn lại là một tấm nền ngà liền khối — đặt thêm
 * điểm nữa thì hai mảng đặc gặp nhau và mắt không thấy có gì đè lên gì. Cùng
 * lý do đã ghi ở điều 5 của page-contact.php.
 */
.tgs-bai-than {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  padding-block: 130px;
}

.tgs-bai-than__dan {
  max-width: 60ch;
  font-size: var(--tgs-cd-dan);
}

/*
 * Bề ngang đoạn văn 72ch. `AUDIT-BO-CUC.md` ghi 760px là giới hạn bề ngang
 * đoạn văn của bản gốc và quy tắc cho phép; 72ch ở cỡ chữ 16px xấp xỉ đúng
 * ngần ấy. Khống chế bằng CSS, KHÔNG bằng cách sửa HTML của khách.
 */
.tgs-bai__than {
  max-width: 72ch;
  margin-top: var(--tgs-k4);
}

.tgs-bai__than > * + * { margin-top: 26px; }

.tgs-bai__than h2,
.tgs-bai__than h3 { margin-top: var(--tgs-k4); }

.tgs-bai__than img { max-width: 100%; }

.tgs-bai__than blockquote {
  margin-inline-start: 0;
  padding-inline-start: var(--tgs-k3);
  border-inline-start: 1px solid var(--tgs-son);
  font-family: var(--tgs-chu-de);
  font-weight: 300;
  font-size: var(--tgs-cd-h3);
  line-height: 1.3;
}

.tgs-bai__trang { margin-top: var(--tgs-k4); font-size: var(--tgs-cd-be); }

/* ---- 17.9 · Trang bài · điều hướng cuối ---- */

.tgs-bai-dieu-huong { padding-block: var(--tgs-k6); }

.tgs-bai-dieu-huong__o {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tgs-bai-dieu-huong__o--sau { text-align: end; }

/* Ô giữ chỗ khi không có bài trước. Không có nội dung, chỉ giữ cột. */
.tgs-bai-dieu-huong__o--trong { display: block; }

.tgs-bai-dieu-huong__de {
  display: block;
  margin-top: 14px;
  font-family: var(--tgs-chu-de);
  font-weight: 300;
  font-size: var(--tgs-cd-h3);
  line-height: 1.2;
}

/* BƯỚC 19 · B-19-2 ĐÃ GỠ (30/08 11:55). `--tgs-cd-h3` = clamp(22px, 2.2vw,
   30px): cùng tình huống với `.tgs-jou-dong__de` ở trên, lấy sàn 22px làm
   chuẩn. Biến thể nền sáng cho 5,18:1. */
.tgs-bai-dieu-huong__o:hover .tgs-bai-dieu-huong__de,
.tgs-bai-dieu-huong__o:focus-visible .tgs-bai-dieu-huong__de { color: var(--tgs-son-tren-sang); }

/*
 * Lối về danh sách. Cách khối trên bằng một đường kẻ mờ — nếu không có bài
 * trước/sau nào thì nó là thứ duy nhất trong dải và kẻ này không in ra.
 */
.tgs-bai-dieu-huong__ve { margin: 0; }

.tgs-bai-dieu-huong__luoi + .tgs-bai-dieu-huong__ve {
  margin-top: var(--tgs-k5);
  padding-top: var(--tgs-k4);
  border-top: 1px solid var(--tgs-nga-12);
}

/* ---- 17.10 · Màn hình nhỏ ---- */

@media (max-width: 1180px) {
  /*
   * TẮT CẢ HAI ĐIỂM OVERLAP của mục này — đệm ngang còn 40px, số thứ tự không
   * còn chỗ nằm; và dải kéo lên 48px trên hero thấp hơn thì ăn vào chữ.
   * Điều kiện tắt, không phải tuỳ chọn — xem điều 3 đầu mục.
   */
  .tgs-jou-dong__so { display: none; }

  .tgs-jou-01,
  .tgs-bai-than { margin-top: 0; }

  .tgs-jou-01 { padding-block: var(--tgs-k7); }

  .tgs-bai-than { padding-block: var(--tgs-k6); }

  .tgs-jou-dong { gap: var(--tgs-k4); }
}

@media (max-width: 960px) {
  /* Hai cột phụ (chủ đề, ngày) xuống dòng dưới tiêu đề, tiêu đề chiếm cả hàng. */
  .tgs-jou-dong {
    grid-template-columns: 1fr auto;
    gap: var(--tgs-k2) var(--tgs-k3);
    align-items: center;
  }

  .tgs-jou-dong__de { grid-column: 1 / -1; grid-row: 2; }
  .tgs-jou-dong__chu-de { grid-row: 1; }
  .tgs-jou-dong__ngay { grid-row: 1; }
}

@media (max-width: 760px) {
  /*
   * Hàng bốn chủ đề: `.tgs-luoi-4` đã về một cột ở layout.css. Thêm kẻ ngăn
   * giữa các mục, nếu không bốn đoạn chữ dính thành một khối liền.
   */
  .tgs-jou-01__tru { gap: var(--tgs-k3); }

  .tgs-jou-tru + .tgs-jou-tru {
    padding-top: var(--tgs-k3);
    border-top: 1px solid var(--tgs-muc-12);
  }

  .tgs-jou-dong { padding-block: var(--tgs-k3); }

  /* Rê chuột đẩy dòng vào 14px là cử chỉ của chuột. Trên cảm ứng thì tắt. */
  .tgs-jou-dong:not(.tgs-jou-dong--cho):hover,
  .tgs-jou-dong:focus-within { padding-inline-start: 0; }

  .tgs-bai-dieu-huong__o--sau { text-align: start; }

  .tgs-bai__than { max-width: none; }
}

/* ---- 17.11 · In giấy ---- */

@media print {
  .tgs-jou-01,
  .tgs-bai-than {
    margin-top: 0;
    padding-block: var(--tgs-k4);
  }

  .tgs-jou-dong__so { display: none; }

  /* Điều hướng và phân trang không có nghĩa gì trên giấy. */
  .tgs-bai-dieu-huong,
  .tgs-phan-trang { display: none; }

  .tgs-jou-dong,
  .tgs-jou-tru { break-inside: avoid; }
}