/*
 * COMPONENTS — nút · thẻ · hàng · accordion · tab · nhãn
 *
 * Nguồn: bản thiết kế gốc `_nguon/template.html` dùng inline style, không có
 * class nào. Mỗi khối dưới đây ghi rõ giá trị gốc đo được và số lần xuất hiện,
 * để sau này ai đó so với bản demo còn biết chỗ nào là chép lại, chỗ nào là
 * tôi thêm vào.
 *
 * BA CHỖ CỐ Ý KHÁC BẢN GỐC, đều ghi lý do tại chỗ:
 *   1. `:focus-visible` — bản gốc dùng <span sc-camel-on-click>, bàn phím
 *      không tới được. Ở đây mọi thứ bấm được là <a>/<button> và có viền nét
 *      đứt khi tab tới.
 *   2. Accordion — bản gốc KHÔNG có. Dựng bằng <details>/<summary> để tắt JS
 *      vẫn mở ra được.
 *   3. Hiệu ứng rê chuột đổi khoảng đệm bị tắt khi người dùng xin giảm chuyển
 *      động.
 *
 * Mọi màu đọc từ `tokens.css`. Không viết mã màu thẳng ở file này.
 */

/* ============================================================
 * 1 · NÚT
 *
 * Bản gốc: `font-size:10px; letter-spacing:0.24em; text-transform:uppercase;
 * padding:17px 32px` — 21 lần. Nút trên header hẹp hơn: `13px 22px`.
 * Không bo góc ở bất kỳ nút nào, không đổ bóng. Giữ nguyên.
 * ============================================================ */

.tgs-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tgs-k1);
  padding: 17px 32px;
  font-size: var(--tgs-cd-nut);
  letter-spacing: var(--tgs-gian-nut);
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: inherit;
  transition: background var(--tgs-vua) ease,
              border-color var(--tgs-vua) ease,
              color var(--tgs-vua) ease,
              opacity var(--tgs-vua) ease;
}

/* Nút đặc màu ngà — dùng trên nền mực. Rê chuột đổi sang son. */
.tgs-nut--sang {
  background: var(--tgs-nga);
  border-color: var(--tgs-nga);
  color: var(--tgs-muc);
}
.tgs-nut--sang:hover,
.tgs-nut--sang:focus-visible {
  background: var(--tgs-son);
  border-color: var(--tgs-son);
  color: var(--tgs-nga);
}

/* Nút đặc màu mực — dùng trên nền ngà. Bản gốc dùng 6 lần trong các dải sáng. */
.tgs-nut--toi {
  background: var(--tgs-muc);
  border-color: var(--tgs-muc);
  color: var(--tgs-nga);
}
.tgs-nut--toi:hover,
.tgs-nut--toi:focus-visible {
  background: var(--tgs-son);
  border-color: var(--tgs-son);
  color: var(--tgs-nga);
}

/*
 * Nút son — chỉ dùng cho hành động chính duy nhất của một trang (gửi đơn).
 *
 * BƯỚC 19 · B-19-3 ĐÃ GỠ (30/08 11:55). Đây là chiều NGƯỢC LẠI của B-15-2:
 * son làm NỀN, chữ ngà nằm trên. Chữ nút là 10px nên cần 4,5:1, mà ngà
 * `#F3F0E8` trên son gốc `#D83A22` chỉ được 4,05. Đổi CHỮ sang mực không cứu
 * được — `#0B0B0B` trên `#D83A22` cũng chỉ 4,26; son gốc nằm gần đúng giữa ngà
 * và mực nên không màu chữ nào trong bảng thương hiệu đạt 4,5 trên nó.
 *
 * Người vận hành chốt: đậm NỀN một bậc, GIỮ chữ ngà. Nền dùng lại
 * `--tgs-son-tren-sang` (`#BA321D`) → **5,18:1**. Viền đổi theo nền để không
 * còn vành sáng hơn 1px quanh khối màu.
 */
.tgs-nut--son {
  background: var(--tgs-son-tren-sang);
  border-color: var(--tgs-son-tren-sang);
  color: var(--tgs-nga);
  padding: 17px 30px;   /* bản gốc hẹp hơn 2px so với nút đặc khác */
}

/*
 * CẢNH BÁO — `opacity` LÀM TỤT TƯƠNG PHẢN, và đây là BLOCKER B-19-4 chưa gỡ.
 *
 * Chữ nút là ngà `#F3F0E8`, đúng bằng nền trang. Hạ opacity cả nút xuống 0,85
 * thì chữ hoà về nền trang không đổi gì, nhưng NỀN NÚT nhạt đi — tức tỉ số tụt:
 *   nền nút `#D83A22` cũ → hover 3,40:1
 *   nền nút `#BA321D` mới → hover **4,12:1**  ← khá hơn nhưng VẪN dưới 4,5
 * (tính theo công thức WCAG, có cộng gộp lớp trong suốt lên nền trang `#F3F0E8`;
 * trên nền `#E7E1D5` ra 3,42 → 4,15, cùng kết luận.)
 *
 * KHÔNG tự đổi hiệu ứng hover: mọi cách "nhạt đi" trên nền sáng đều kéo tương
 * phản xuống, nên sửa được nó là đổi ý đồ thiết kế, phải người vận hành quyết.
 * Phương án đã tính sẵn nằm ở `PROJECT_STATE.md` · B-19-4.
 */
.tgs-nut--son:hover,
.tgs-nut--son:focus-visible { opacity: 0.85; }

/* Nút viền trên nền mực. */
.tgs-nut--vien {
  border-color: var(--tgs-nga-40);
  color: var(--tgs-nga);
}
.tgs-nut--vien:hover,
.tgs-nut--vien:focus-visible {
  background: var(--tgs-nga);
  border-color: var(--tgs-nga);
  color: var(--tgs-muc);
}

/* Nút viền trên nền ngà — bản gốc không có, suy ra từ nút viền nền mực. */
.tgs-nut--vien-toi {
  border-color: var(--tgs-muc-20);
  color: var(--tgs-muc);
}
.tgs-nut--vien-toi:hover,
.tgs-nut--vien-toi:focus-visible {
  background: var(--tgs-muc);
  border-color: var(--tgs-muc);
  color: var(--tgs-nga);
}

/* Nút nhỏ — đúng cỡ nút "Create Yours" trên header. */
.tgs-nut--nho {
  padding: 13px 22px;
  border-color: var(--tgs-nga-30);
  white-space: nowrap;
}
.tgs-nut--nho:hover,
.tgs-nut--nho:focus-visible {
  background: var(--tgs-son);
  border-color: var(--tgs-son);
  color: var(--tgs-nga);
}

/* Nút rộng hết cột — dùng trong form, bản gốc không có. */
.tgs-nut--day { width: 100%; }

.tgs-nut[disabled],
.tgs-nut[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Nút dạng chữ có gạch chân ----
 * Bản gốc: `border-bottom:1px solid rgba(11,11,11,0.4); padding-bottom:7px`
 * trên nền ngà — 3 lần. Trên nền mực dùng ngà 30% và đệm 5px.
 */

.tgs-nut-chu {
  display: inline-block;
  padding-bottom: 7px;
  font-size: var(--tgs-cd-nut);
  letter-spacing: var(--tgs-gian-nut);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--tgs-nga-30);
  color: var(--tgs-nga-60);
  transition: color var(--tgs-vua) ease, border-color var(--tgs-vua) ease;
}
/* BƯỚC 19 · B-15-2 — chữ nút 10px là chữ nhỏ: màu lấy biến thể theo nền.
   VIỀN giữ `--tgs-son` gốc: viền không phải chữ, ngưỡng của nó là 3:1. */
.tgs-nut-chu:hover,
.tgs-nut-chu:focus-visible {
  color: var(--tgs-son-tren-toi);
  border-bottom-color: var(--tgs-son);
}

/* Trên dải nền sáng thì đổi sang mực. Không cần thêm class ở HTML. */
.tgs-dai--sang .tgs-nut-chu {
  border-bottom-color: var(--tgs-muc-40);
  color: var(--tgs-muc);
}
.tgs-dai--sang .tgs-nut-chu:hover,
.tgs-dai--sang .tgs-nut-chu:focus-visible {
  color: var(--tgs-son-tren-sang);
  border-bottom-color: var(--tgs-son);
}

/* Biến thể son, cỡ nhỏ — bản gốc dùng cho "Configure this" trong thẻ. */
.tgs-nut-chu--son {
  font-size: var(--tgs-cd-nhan-be);
  letter-spacing: var(--tgs-gian-be);
  padding-bottom: 5px;
  color: var(--tgs-son-tren-toi);   /* 9,5px = chữ nhỏ — xem BƯỚC 19 */
  border-bottom-color: var(--tgs-son-50);
}
.tgs-dai--sang .tgs-nut-chu--son {
  color: var(--tgs-son-tren-sang);
  border-bottom-color: var(--tgs-son-50);
}
/* Rê chuột: son đổi sang màu chữ của nền đang đứng, không đổi sang son nữa. */
.tgs-nut-chu--son:hover,
.tgs-nut-chu--son:focus-visible {
  color: var(--tgs-nga);
  border-bottom-color: var(--tgs-nga);
}
.tgs-dai--sang .tgs-nut-chu--son:hover,
.tgs-dai--sang .tgs-nut-chu--son:focus-visible {
  color: var(--tgs-muc);
  border-bottom-color: var(--tgs-muc);
}

/*
 * BƯỚC 23 · GỠ B-22-D — ĐÍCH BẤM CỦA LIÊN KẾT CHỮ NHỎ LÊN SÀN 24px.
 *
 * Đo được trước khi sửa: liên kết "What happens to your details" ở trang
 * Contact là 217,77 × 15,50px. WCAG 2.2 mục 2.5.8 đặt sàn 24 × 24.
 *
 * BA CÁCH ĐÃ CÂN NHẮC, HAI CÁCH BỊ LOẠI VÌ ĐO RA HẬU QUẢ:
 *
 *  1. `min-height:24px` + `display:inline-flex` — hộp cao thêm 8,5px, đẩy mọi
 *     thứ dưới nó xuống. Người vận hành ghi rõ "KHÔNG được làm xê dịch bố cục".
 *  2. Thêm `padding` rồi bù `margin` âm — bù được, nhưng `margin` của phần tử
 *     này do luật KHÁC đặt (Contact đo được `margin:40px 0 0`), mà viết
 *     `margin-top` trong luật này là ĐÈ MẤT 40px đó, lệch bố cục 40px. Muốn
 *     đúng phải biết trước giá trị margin của từng chỗ dùng — ba chỗ, ba giá
 *     trị, và sẽ sai lần nữa khi có chỗ thứ tư. Loại.
 *     Ngoài ra `padding-bottom` chính là chỗ đặt gạch chân, nới nó ra là kéo
 *     gạch chân rời khỏi chữ — đổi diện mạo, không phải đổi đích bấm.
 *  3. NỚI VÙNG BẤM BẰNG PHẦN TỬ GIẢ — cách đang dùng. `::after` phủ trong suốt
 *     ra ngoài 4,25px trên và dưới: 15,50 + 8,50 = 24,00px. Phần tử giả không
 *     tham gia dòng chảy nên bố cục KHÔNG đổi một pixel nào, và nó thuộc về
 *     chính thẻ <a> nên cú bấm rơi vào nó vẫn là bấm vào liên kết.
 *
 * CHỈ ÁP CHO `a.` — CÓ CHỦ ĐÍCH, KHÔNG PHẢI VIẾT HỤT.
 * `.tgs-nut-chu--son` còn được dùng cho <span> trang trí nằm TRONG thẻ bấm
 * được lớn hơn (front-page "Configure this →", collection). Ở đó đích bấm là
 * cả tấm thẻ chứ không phải cái span, nới span ra là nới một vùng bấm không
 * tồn tại, lại còn phủ lên chữ bên cạnh. Ba thẻ <a> thật: Contact, Made
 * Personal, single.php.
 *
 * `z-index:0` + `position:relative` trên thẻ <a> để vùng phủ nằm trên nền
 * nhưng KHÔNG nằm trên chữ của phần tử khác — đã đo bằng `elementFromPoint`.
 */
a.tgs-nut-chu--son {
  position: relative;
}

a.tgs-nut-chu--son::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /*
   * KHAI CHIỀU CAO THẲNG, KHÔNG DÙNG `inset` ÂM — ĐÃ THỬ VÀ ĐÃ ĐO RA SAI.
   *
   * Bản đầu viết `inset: -4.25px 0`, tính theo hộp viền 15,50px: 15,50 + 8,50
   * = 24,00. Đo bằng `elementFromPoint` thì vùng bấm chỉ ra 23,0–23,75px, tức
   * là TRƯỢT sàn 24. Lý do: `position:absolute` của phần tử giả tính theo HỘP
   * ĐỆM của cha, mà hộp đệm không tính 1px `border-bottom` (chính là gạch chân
   * của kiểu nút này). 15,50 − 1,00 = 14,50; 14,50 + 8,50 = 23,00.
   *
   * Bài học: `inset` âm bù theo con số đo từ hộp VIỀN là sai mô hình hộp. Khai
   * thẳng chiều cao thì không phụ thuộc vào việc phần tử có viền hay không —
   * và không phải đo lại nếu sau này gạch chân đổi độ dày.
   *
   * `max(24px, 100%)` để vùng bấm không bao giờ NHỎ HƠN chính chữ, phòng chỗ
   * dùng nào đó có cỡ chữ lớn hơn.
   */
  height: max(24px, 100%);
  /* Trong suốt hoàn toàn — chỉ để bấm, không để nhìn. */
}

/*
 * Viền bàn phím. Bản gốc không có vì mọi thứ bấm được đều là <span> —
 * bàn phím không tới được, tức là không dùng được nếu không có chuột.
 * Dùng outline chứ không đổi border, để không làm nút nhảy 1px.
 */
.tgs-nut:focus-visible,
.tgs-nut-chu:focus-visible {
  outline: 2px solid var(--tgs-son);
  outline-offset: 3px;
}

/*
 * BƯỚC 17 · D8 — NHÓM LIÊN KẾT CHỈ ĐỔI MÀU KHI HỘI TỤ.
 *
 * Vấn đề đo được (mục 6.2): 12 liên kết menu mỗi trang, cùng 5 nhóm liên kết
 * khác, khi hội tụ bàn phím chỉ đổi MÀU CHỮ — ví dụ menu chính nhảy từ
 * ngà-60% lên ngà đặc. WCAG 1.4.11 đòi chỉ báo phi-văn-bản đạt 3:1 so với
 * trạng thái kề bên; chênh giữa hai sắc độ của cùng một màu không đạt. Người
 * nhìn kém hoặc mù màu không biết con trỏ đang ở đâu.
 *
 * Sửa bằng ĐÚNG mẫu đã dùng cho `.tgs-nut` ở trên, không phát minh kiểu mới.
 * Vì sao `outline` chứ không `border`: outline không chiếm chỗ trong luồng,
 * nên không đẩy menu nhảy 1px — cùng lý do đã ghi ở khối trên.
 *
 * Tương phản viền son: trên nền mực `#0B0B0B` 4,26:1, trên nền ngà `#F3F0E8`
 * 4,05:1 — cả hai đều vượt ngưỡng 3:1 của 1.4.11 (ngưỡng 4,5:1 là cho CHỮ,
 * không áp cho viền).
 *
 * Khe hẹp nhất giữa hai liên kết menu đo được 24px; viền 2px + offset 3px ăn
 * 5px mỗi bên nên hai viền vẫn cách nhau 14px, không dính vào nhau. Chiều cao
 * liên kết 26,69px + 10px = 36,69px, vẫn nằm gọn trong đầu trang 70px, nên
 * KHÔNG phải đo lại 7 mốc `--tgs-bu-neo`.
 *
 * Các luật đổi màu cũ được GIỮ NGUYÊN ở `layout.css` / `pages.css` — chúng
 * không thừa: màu là chỉ báo thứ hai cho người nhìn được màu. Ở đây chỉ THÊM
 * viền, không thay thế. Không luật nào trong hai file đó khai `outline` nên
 * không có xung đột thứ tự nạp.
 */
.tgs-nav a:focus-visible,
.tgs-dau__ten:focus-visible,
.tgs-jou-dong__de a:focus-visible,
.tgs-jou-tru__ten a:focus-visible,
.tgs-journal-hero__ve:focus-visible,
.tgs-lien-01__thang-lk:focus-visible,
.tgs-phan-trang a.page-numbers:focus-visible,
.tgs-bai-dieu-huong__o:focus-visible {
  outline: 2px solid var(--tgs-son);
  outline-offset: 3px;
}

/* ============================================================
 * 2 · NHÃN
 *
 * `.tgs-nhan` gốc nằm ở base.css (10px / 0.28em). Ở đây chỉ thêm biến thể
 * theo bốn cỡ đếm được ở bản gốc — xem bảng đếm trong `tokens.css`.
 * ============================================================ */

.tgs-nhan--be {
  font-size: var(--tgs-cd-nhan-be);
  letter-spacing: var(--tgs-gian-be);
}

.tgs-nhan--ti {
  font-size: var(--tgs-cd-nhan-ti);
  letter-spacing: var(--tgs-gian-ti);
}

/* Nhãn trên ảnh hero — giãn rộng nhất, nằm trên ảnh nên chữ phải sáng hơn. */
.tgs-nhan--rong {
  letter-spacing: var(--tgs-gian-rong);
  color: var(--tgs-nga-72);
}

/* BƯỚC 19 — nhãn là chữ 9,5–10px, đo được dùng trên CẢ hai nền, nên phải có
   cả hai biến thể. Mặc định nền mực; dải sáng ghi đè. */
.tgs-nhan--son { color: var(--tgs-son-tren-toi); }
.tgs-dai--sang .tgs-nhan--son { color: var(--tgs-son-tren-sang); }
.tgs-nhan--mo  { color: var(--tgs-nga-45); }
.tgs-dai--sang .tgs-nhan--mo { color: var(--tgs-muc-45); }

/* Nhãn số thứ tự cỡ lớn, kiểu chữ tiêu đề — dải Craftsmanship.
 * BƯỚC 19 — GIỮ `--tgs-son` gốc, có chủ ý: 26px ≥ 24px là "chữ lớn" theo WCAG
 * 1.4.3, ngưỡng 3:1, mà son gốc đã cho 4,05 trên ngà. Đổi màu ở đây là đổi
 * diện mạo thương hiệu mà không đổi lấy được gì. */
.tgs-nhan-so {
  font-family: var(--tgs-chu-de);
  font-size: 26px;
  line-height: 1;
  color: var(--tgs-son);
}

/*
 * Vạch son dưới tiêu đề hero. Bản gốc: 120px × 1px, chạy ra từ trái.
 * Không dùng animation ở đây — hiệu ứng thuộc lớp `.tgs-co-hieu-ung`.
 */
.tgs-vach-son {
  width: 120px;
  height: 1px;
  background: var(--tgs-son);
  border: 0;
  margin: var(--tgs-k4) 0 0;
}

/* ============================================================
 * 3 · THẺ
 * ============================================================ */

/*
 * Thẻ viền — bản gốc: `border:1px solid rgba(243,240,232,0.16);
 * padding:34px 30px 30px`. Dùng cho 4 phối màu ở trang Collection.
 */
.tgs-the {
  display: flex;
  flex-direction: column;
  /* min-width:0 — không có dòng này thì thẻ trong lưới không chịu hẹp lại
     dưới bề ngang nội dung, và lưới đẩy cả trang tràn ngang. */
  min-width: 0;
  padding: 34px 30px 30px;
  border: 1px solid var(--tgs-nga-16);
  background: none;
  color: inherit;
  transition: border-color var(--tgs-vua) ease, background var(--tgs-vua) ease;
}

.tgs-dai--sang .tgs-the { border-color: var(--tgs-muc-20); }

/*
 * Thẻ đặc — dùng bên trong `.tgs-the-lien`. Nền chính là màu nền trang, nên
 * khe hở 1px của lưới cha lộ ra thành đường kẻ mảnh. Đây là cách bản gốc vẽ
 * đường kẻ giữa 4 thẻ mà không cần border.
 */
.tgs-the--dac {
  padding: 40px 34px 34px;
  border: 0;
  background: var(--tgs-muc);
}
.tgs-the--dac:hover { background: var(--tgs-muc-nhat); }

/* Thẻ bấm được. Là <a> hoặc <button>, nên cần bỏ kiểu mặc định của trình duyệt. */
.tgs-the--bam {
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  width: 100%;
  font: inherit;
}
.tgs-the--bam:hover,
.tgs-the--bam:focus-visible { border-color: var(--tgs-nga-40); }
.tgs-dai--sang .tgs-the--bam:hover,
.tgs-dai--sang .tgs-the--bam:focus-visible { border-color: var(--tgs-muc); }
.tgs-the--bam:focus-visible {
  outline: 2px solid var(--tgs-son);
  outline-offset: 3px;
}

/*
 * Khung chứa các thẻ đặc. Khe 1px + nền là màu kẻ → ra lưới kẻ mảnh.
 * Nằm ở đây chứ không ở layout.css vì nó chỉ có nghĩa khi đi cùng
 * `.tgs-the--dac`; tách ra hai file thì sửa một bên là hỏng bên kia.
 */
/*
 * CỐ Ý KHÔNG khai `grid-template-columns` ở đây. Đừng "sửa lại cho đủ".
 *
 * Số cột do `.tgs-luoi-4` bên `layout.css` cấp — chính là chỗ phá lưới đối
 * xứng để chữa LỖI 2 của `AUDIT-BO-CUC.md`. `.tgs-the-lien` chỉ góp `gap:1px`
 * + nền, để khe hở lộ ra thành đường kẻ mảnh giữa các thẻ. Dùng đúng là ghép
 * hai class: `class="tgs-luoi-4 tgs-the-lien"`.
 *
 * `components.css` nạp SAU `layout.css` nên `gap:1px` thắng `gap:var(--tgs-k4)`
 * — đúng ý đồ, không phải va chạm.
 *
 * Nếu khai `repeat(4, 1fr)` ở đây thì lưới 4 khối đều tăm tắp quay lại và
 * LỖI 2 của AUDIT hỏng. Đã lỡ làm một lần rồi, xem `BAI_HOC.md`.
 */
.tgs-the-lien {
  display: grid;
  gap: 1px;
  background: var(--tgs-nga-12);
}

.tgs-the__ten {
  font-family: var(--tgs-chu-de);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.14em;
  margin: var(--tgs-k4) 0 0;
}
.tgs-the--dac .tgs-the__ten { font-size: 26px; }

.tgs-the__mo-ta {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tgs-nga-60);
  margin: 14px 0 0;
}
.tgs-dai--sang .tgs-the__mo-ta { color: var(--tgs-muc-72); }

/* Đẩy phần chân thẻ xuống đáy để các thẻ cạnh nhau thẳng hàng chân. */
.tgs-the__chan { margin-top: auto; padding-top: var(--tgs-k3); }

/* ---- Chấm màu ----
 * Bản gốc: 22px trong thẻ, 18px trong ô chọn. Vòng viền trong để chấm màu
 * sáng (Sand, Stone) không biến mất trên nền ngà.
 */
.tgs-cham-mau {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--tgs-nga-30);
}
.tgs-dai--sang .tgs-cham-mau { box-shadow: inset 0 0 0 1px var(--tgs-muc-20); }
.tgs-cham-mau--be { width: 18px; height: 18px; }

.tgs-cham-hang { display: flex; gap: var(--tgs-k1); }

/* ---- Thẻ ảnh có chú thích đè lên ----
 * Bản gốc dùng cho 4 phối màu: ảnh vuông, chú thích nằm trong dải mờ dưới
 * đáy ảnh. Dải mờ là bắt buộc — chữ ngà trên ảnh sáng sẽ không đọc được.
 */
.tgs-the-anh {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--tgs-muc-nhat);
}

.tgs-the-anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tgs-lau) var(--tgs-nhip);
}
.tgs-the-anh:hover img { transform: scale(1.04); }

.tgs-the-anh figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--tgs-k5) var(--tgs-k3) var(--tgs-k3);
  background: linear-gradient(180deg,
              rgba(11, 11, 11, 0) 0%,
              var(--tgs-muc-92) 100%);
  color: var(--tgs-nga);
}

/*
 * BƯỚC 19 — figcaption nằm TRÊN nền tối (`--tgs-muc-nhat` #151515 phủ dải mờ
 * tới `--tgs-muc-92`), nhưng cả thẻ ảnh lại đứng trong `.tgs-dai--sang`. Nên
 * luật `.tgs-dai--sang .tgs-nhan--son` bên trên bắn nhầm bản SÁNG vào đây và
 * đo được 3,42:1. Ghi đè lại bằng bản tối: 3,42 → 4,39.
 * Bài học nhỏ: `.tgs-dai--sang` nói về DẢI, không nói về nền thật dưới chữ.
 */
.tgs-dai--sang .tgs-the-anh .tgs-nhan--son { color: var(--tgs-son-tren-toi); }

.tgs-the-anh figcaption > * { display: block; }
.tgs-the-anh__ten {
  font-family: var(--tgs-chu-de);
  font-size: 19px;
  margin-top: 7px;
}
.tgs-the-anh__phu {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tgs-nga-72);
  margin-top: 5px;
}

/* ============================================================
 * 4 · HÀNG DANH SÁCH
 *
 * Bản gốc dùng cho danh sách bài Journal và 6 bước Craftsmanship: lưới nhiều
 * cột, kẻ ngang phân tách, rê chuột thì cả hàng dịch phải 14px.
 * ============================================================ */

.tgs-hang {
  display: grid;
  gap: var(--tgs-k4);
  align-items: baseline;
  padding: 38px 0;
  border-bottom: 1px solid var(--tgs-nga-12);
  transition: padding-left var(--tgs-lau) var(--tgs-nhip),
              border-color var(--tgs-vua) ease;
}
.tgs-dai--sang .tgs-hang { border-bottom-color: var(--tgs-muc-14); }

/* Ba cột: nhãn hẹp · tiêu đề co giãn · trạng thái căn phải. */
.tgs-hang--3 { grid-template-columns: 120px 1fr 160px; }

/* Dải Craftsmanship: số thứ tự · tiêu đề · đoạn mô tả. Kẻ nằm TRÊN. */
.tgs-hang--buoc {
  grid-template-columns: 80px 1fr 1.1fr;
  gap: var(--tgs-k5);
  align-items: start;
  padding: 52px 0;
  border-bottom: 0;
  border-top: 1px solid var(--tgs-nga-12);
}
.tgs-dai--sang .tgs-hang--buoc { border-top-color: var(--tgs-muc-20); }

.tgs-hang--bam { cursor: pointer; }
.tgs-hang--bam:hover,
.tgs-hang--bam:focus-within { padding-left: 14px; }

.tgs-hang__ten {
  font-family: var(--tgs-chu-de);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.18;
  margin: 0;
}
.tgs-hang__ten a { color: inherit; text-decoration: none; }
/* BƯỚC 19 — GIỮ son gốc: cỡ clamp(24px…32px), luôn ≥ 24px nên là chữ lớn. */
.tgs-hang__ten a:hover { color: var(--tgs-son); }

.tgs-hang__cuoi { text-align: right; }

/* Người xin giảm chuyển động thì bỏ luôn cú dịch ngang, không chỉ làm nhanh. */
@media (prefers-reduced-motion: reduce) {
  .tgs-hang--bam:hover,
  .tgs-hang--bam:focus-within { padding-left: 0; }
  .tgs-the-anh:hover img { transform: none; }
}

/* ---- Trụ nội dung: nhãn son + đoạn ngắn. Dùng cho 4 chủ đề Journal. ---- */
.tgs-tru__ten {
  font-size: var(--tgs-cd-nhan);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tgs-son-tren-toi);   /* 10px = chữ nhỏ — xem BƯỚC 19 */
}
/* Cùng lý do với `.tgs-tru p` ngay dưới: khối này dùng được ở cả hai nền. */
.tgs-dai--sang .tgs-tru__ten { color: var(--tgs-son-tren-sang); }
.tgs-tru p {
  font-size: 14px;
  line-height: 1.75;
  margin: var(--tgs-k2) 0 0;
  color: var(--tgs-nga-72);
}
.tgs-dai--sang .tgs-tru p { color: var(--tgs-muc-72); }

/* ============================================================
 * 5 · ACCORDION
 *
 * KHÔNG có trong bản thiết kế gốc — tôi thêm, cho các mục hỏi đáp và bảng
 * quy đổi size. Dựng bằng <details>/<summary>: trình duyệt tự lo mở/đóng và
 * tự lo cho trình đọc màn hình, nên TẮT JS VẪN MỞ ĐƯỢC.
 *
 * <details class="tgs-xep__muc">
 *   <summary class="tgs-xep__nut">Nhan đề</summary>
 *   <div class="tgs-xep__than">…</div>
 * </details>
 * ============================================================ */

.tgs-xep { border-top: 1px solid var(--tgs-nga-12); }
.tgs-dai--sang .tgs-xep,
.tgs-dai--sang .tgs-xep__muc { border-color: var(--tgs-muc-20); }

.tgs-xep__muc { border-bottom: 1px solid var(--tgs-nga-12); }

.tgs-xep__nut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tgs-k3);
  padding: var(--tgs-k3) 0;
  cursor: pointer;
  list-style: none;            /* bỏ tam giác mặc định */
  font-size: var(--tgs-cd-nut);
  letter-spacing: var(--tgs-gian-nut);
  text-transform: uppercase;
  color: inherit;
  transition: color var(--tgs-vua) ease;
}
.tgs-xep__nut::-webkit-details-marker { display: none; }
/* BƯỚC 19 — 10px = chữ nhỏ. `color: inherit` ở luật gốc cho thấy khối này
   dùng được ở cả hai nền, nên khai cả hai biến thể. `outline` bên dưới GIỮ
   son gốc: viền focus không phải chữ. */
.tgs-xep__nut:hover { color: var(--tgs-son-tren-toi); }
.tgs-dai--sang .tgs-xep__nut:hover { color: var(--tgs-son-tren-sang); }
.tgs-xep__nut:focus-visible {
  outline: 2px solid var(--tgs-son);
  outline-offset: 2px;
}

/*
 * Dấu cộng thành dấu trừ. Vẽ bằng hai vạch chứ không dùng ký tự "+" —
 * ký tự đổi hình theo font, hai vạch thì không.
 */
.tgs-xep__dau {
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.tgs-xep__dau::before,
.tgs-xep__dau::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--tgs-vua) var(--tgs-nhip);
}
.tgs-xep__dau::after { transform: rotate(90deg); }
[open] > .tgs-xep__nut .tgs-xep__dau::after { transform: rotate(0deg); }

.tgs-xep__than {
  padding: 0 0 var(--tgs-k3);
  max-width: 60ch;
  color: var(--tgs-nga-72);
}
.tgs-dai--sang .tgs-xep__than { color: var(--tgs-muc-72); }

/* ============================================================
 * 6 · TAB
 *
 * Lấy kiểu từ menu điều hướng của bản gốc (`navBase` trong `_nguon/app.js`):
 * chữ hoa 11px, gạch chân son khi đang chọn.
 *
 * HTML phải là <button role="tab" aria-selected="true|false">. Không dùng
 * class để đánh dấu mục đang chọn — trạng thái nằm ở thuộc tính ARIA thì
 * trình đọc màn hình mới biết, và CSS đọc theo đó là đủ.
 * ============================================================ */

.tgs-tab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tgs-k3);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--tgs-nga-12);
}
.tgs-dai--sang .tgs-tab { border-bottom-color: var(--tgs-muc-14); }

.tgs-tab__nut {
  padding: 0 0 var(--tgs-k2);
  margin-bottom: -1px;          /* gạch chân đè lên kẻ của thanh tab */
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  font-size: var(--tgs-cd-nav);
  letter-spacing: var(--tgs-gian-nav);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  color: var(--tgs-nga-60);
  transition: color var(--tgs-vua) ease, border-color var(--tgs-vua) ease;
}
.tgs-dai--sang .tgs-tab__nut { color: var(--tgs-muc-45); }

.tgs-tab__nut:hover { color: var(--tgs-nga); }
.tgs-dai--sang .tgs-tab__nut:hover { color: var(--tgs-muc); }

.tgs-tab__nut[aria-selected='true'] {
  color: var(--tgs-nga);
  border-bottom-color: var(--tgs-son);
}
.tgs-dai--sang .tgs-tab__nut[aria-selected='true'] { color: var(--tgs-muc); }

.tgs-tab__nut:focus-visible {
  outline: 2px solid var(--tgs-son);
  outline-offset: 3px;
}

/*
 * Bảng nội dung của tab. Khi JS chưa chạy thì KHÔNG có thuộc tính hidden nào
 * được đặt, nên mọi bảng đều hiện — đúng nguyên tắc "nội dung mặc định hiện".
 * JS chỉ việc thêm/bỏ `hidden`.
 */
.tgs-tab-noi-dung { padding-top: var(--tgs-k4); }
.tgs-tab-noi-dung[hidden] { display: none; }

/* ============================================================
 * 7 · MÀN HÌNH NHỎ
 *
 * Hàng nhiều cột phải về một cột trước khi cột giữa hẹp tới mức tiêu đề vỡ
 * từng chữ. Đo trên trang thật, không đoán.
 * ============================================================ */

@media (max-width: 960px) {
  .tgs-hang--buoc { gap: var(--tgs-k4); }
  .tgs-the        { padding: var(--tgs-k3); }
  .tgs-the--dac   { padding: var(--tgs-k4) var(--tgs-k3) var(--tgs-k3); }

}

@media (max-width: 760px) {
  .tgs-hang--3,
  .tgs-hang--buoc {
    grid-template-columns: 1fr;
    gap: var(--tgs-k2);
    padding: var(--tgs-k4) 0;
  }
  .tgs-hang__cuoi { text-align: left; }

  /* Bấm cả hàng trên điện thoại thì cú dịch ngang chỉ làm chữ nhảy. Bỏ. */
  .tgs-hang--bam:hover,
  .tgs-hang--bam:focus-within { padding-left: 0; }

  /* Số cột do `.tgs-luoi-4` lo, kể cả ở đây. Không khai lại. */

  /* Nút phải đủ rộng để bấm bằng ngón tay, nhưng không tràn ra ngoài lề. */
  .tgs-nut {
    padding: 15px 24px;
    max-width: 100%;
  }

  .tgs-tab { gap: var(--tgs-k2); }
}

/* ============================================================
 * 7b · CÂU TRẢ LỜI SAU KHI GỬI ĐƠN  (việc 13)
 *
 * Dùng chung cho trang Contact và trang Made Personal, nên nằm ở đây chứ
 * không nằm trong pages.css hay configurator.css — hai form, một câu trả lời,
 * một khai báo. In ra bởi `tgs_don_in_ket_qua()` trong inc/don-hoi-hang.php.
 *
 * KHÔNG có nền màu, không có biểu tượng, không có khung bo tròn — đó là ngôn
 * ngữ của một trang quản trị, không phải của bản thiết kế này. Bản gốc phân
 * cấp bằng KẺ MẢNH và KHOẢNG TRỐNG. Nên: một đường kẻ trên, chữ cỡ 13.5px
 * đúng cỡ của mọi ghi chú khác trên hai trang này, và chỉ MÀU CHỮ phân biệt
 * thành công với lỗi.
 *
 * `border-left` 2px là ngoại lệ duy nhất, và có lý do đo được: đây là câu
 * xuất hiện đột ngột sau khi tải lại trang, mắt cần một mỏ neo để tìm ra nó.
 * ============================================================ */

.tgs-ket-qua-don {
  margin: 0 0 var(--tgs-k4);
  padding: var(--tgs-k2) 0 var(--tgs-k2) var(--tgs-k2);
  border-left: 2px solid currentColor;
  font-size: 13.5px;
  line-height: 1.8;
  font-weight: 300;
  max-width: 52ch;
}

/*
 * Không tô màu chữ thành công bằng màu nhạt: đây vẫn là chữ phải đọc được.
 * Giữ nguyên màu mực của thân trang, chỉ vạch kẻ bên trái là dấu hiệu.
 */
.tgs-ket-qua-don--ok  { color: var(--tgs-muc); }
/* BƯỚC 19 — 13,5px = chữ nhỏ. Nền là NỀN SÁNG: bằng chứng nằm ngay ở dòng
   trên, biến thể "ok" dùng `--tgs-muc` thì khối này chỉ đọc được trên nền ngà.
   Đây lại đúng là câu báo LỖI của form — chỗ ít được phép mờ nhất site. */
.tgs-ket-qua-don--loi { color: var(--tgs-son-tren-sang); }

/*
 * `tabindex="-1"` trên thẻ này là để `#tgs-ket-qua-don` neo được con trỏ. Tắt
 * viền focus mặc định vì con trỏ tới đây do chuyển hướng chứ không do người
 * dùng bấm Tab — hiện viền là nói dối về vị trí bàn phím.
 */
.tgs-ket-qua-don:focus { outline: none; }

/* ============================================================
 * 8 · IN GIẤY
 * ============================================================ */

@media print {
  .tgs-the,
  .tgs-hang,
  .tgs-xep__muc { border-color: #999; }
  .tgs-the--dac { background: none; }
  .tgs-xep__dau { display: none; }

  /*
   * LƯU Ý, chưa giải quyết được bằng CSS: <details> đang đóng thì trình duyệt
   * giấu phần thân ở lớp shadow, CSS không mở ra được — in giấy sẽ MẤT nội
   * dung của các mục chưa mở. Cách sửa thật là JS thêm `open` khi
   * `beforeprint`. Làm ở bước dựng JS, đã ghi vào PROJECT_STATE.
   */
}