/* ============================================================
 * 18 · TRANG MADE PERSONAL (page-personal.php)
 *
 * File riêng, KHÔNG nhét vào pages.css. Lý do: đây là trang duy nhất có phần
 * tương tác thật, CSS của nó gắn với `assets/js/cau-hinh.js`; để chung thì
 * người sau sửa pages.css sẽ không biết mình đang đụng vào trạng thái do JS
 * điều khiển. `functions.php` đã liệt kê 'configurator' trong danh sách nạp
 * từ trước, đúng tên này — không phải tôi tự đặt thêm file.
 *
 * SỐ ĐO đọc từ `_nguon/template.html`, nhánh `isPersonal`, offset
 * 269188–287842. Không ước lượng:
 *   đầu trang đệm trên 180px; lưới `1fr 1fr` khe 80px căn đầu, cách đầu trang
 *   80px, đệm đáy 140px; khung xem trước nền #E7E1D5 dính top 120px, đệm dọc
 *   70px, cao tối thiểu 660px, hình vẽ rộng 310px, hộp vẽ `0 0 340 752`;
 *   ghi chú khung 9.5px/0.24em màu 40% ở góc trái dưới cách 28/24px;
 *   mỗi bước: kẻ trên 1px 20%, đệm trên 34px, cách bước trước 56px, số bước
 *   22px serif màu son, nhãn 10px/0.26em màu 50%, tiêu đề 28px serif cách 6px;
 *   ô chọn màu đệm `11px 16px 11px 12px` khe 10px, chấm 18px, chữ 11.5px/0.1em,
 *   hàng ô khe 14px cách tiêu đề 28px;
 *   ô hoạ tiết đệm `16px 14px`, lưới 4 cột khe 14px, chữ phụ 9px/0.16em cách
 *   8px; ghi chú 12.5px/1.7 màu 55% cách 18px;
 *   ô size 44×44 khe 9px cỡ 12.5px, nhãn nhóm 9.5px/0.24em, nhóm sau cách 30px;
 *   khối "Your design" nền mực đệm 44px cách 64px, nhãn 10px/0.28em son, bảng
 *   2×2 khe 1px trên nền 16%, mỗi ô đệm `20px 22px`, nhãn ô 9.5px/0.22em màu
 *   50%, giá trị 19px serif cách 8px; hàng nút cách 34px khe 14px;
 *   hộp hỏi hàng: nền phủ 72% blur 6px, hộp 760px đệm 56px, bảng kê nền
 *   #E7E1D5 đệm `22px 24px` 4 cột khe 18px, lưới ô nhập 2 cột khe 26px.
 *
 * BỐN ĐIỀU CẦN BIẾT TRƯỚC KHI SỬA
 *
 * 1. BA LỖI BỐ CỤC của AUDIT-BO-CUC.md trên trang này:
 *    · LỖI 1 (overlap) → HAI điểm, 18.4 và 18.9. Cả hai đặt trên NỀN TRỐNG,
 *      không điểm nào đè chữ. Phép cộng ghi ngay tại chỗ.
 *    · LỖI 2 (`repeat(4,1fr)`) → trang này có ĐÚNG HAI chỗ, và đây là hai
 *      trong năm chỗ mà audit đếm được (offset 276833 và 283878):
 *      lưới 4 ô hoạ tiết ở bước 3, và bảng kê 4 ô trong hộp hỏi hàng.
 *      Chỗ thứ nhất dùng `.tgs-luoi-4` (phá nhịp 6-3-3, xem layout.css).
 *      Chỗ thứ hai KHÔNG phá: xem lý do ở 18.11, có căn cứ, không phải bỏ sót.
 *    · LỖI 3 (`1fr 1fr`) → hai chỗ. Lưới chính đưa về `.tgs-luoi-6040--dao`
 *      (1fr 1.5fr), cột chữ rộng — lý do ở 18.3. Bảng "Your design" 2×2 giữ
 *      nguyên: bốn ô ngang hàng nhau là BẢNG SỐ LIỆU, không phải khối nội
 *      dung; xem 18.8.
 *
 * 2. KHUNG XEM TRƯỚC DÍNH ĐƯỢC LÀ NHỜ CỘT TRÁI CAO BẰNG LƯỚI. Bản gốc đặt
 *    `align-items:start` cho lưới, tức cột trái chỉ cao 660px rồi hết, nên
 *    `position:sticky` của khung chết ngay sau màn hình đầu — dính được đúng
 *    một đoạn ngắn rồi thôi. Ở đây lưới để `align-items` mặc định (stretch)
 *    và đẩy `align-self:start` xuống cho riêng cột phải. Khung nhờ đó dính
 *    suốt chiều dài trang, đúng ý `top:120px` của bản gốc. Đây cũng là điều
 *    kiện để ĐIỂM OVERLAP THỨ HAI có thật (18.9): khối mực chỉ trùm được lên
 *    khung khi khung còn ở đó lúc cuộn tới đáy.
 *
 * 3. Ô CHỌN LÀ `<input type="radio">` THẬT, ẩn đi bằng `opacity:0` chứ không
 *    `display:none`. `display:none` là gỡ khỏi thứ tự tab — bàn phím không
 *    chọn được nữa. Trạng thái vẽ bằng `input:checked + .…__mat`, KHÔNG dùng
 *    `:has()`: cùng kết quả, ít phụ thuộc hơn.
 *
 * 4. VÒNG TIÊU ĐIỂM LÀ BẮT BUỘC Ở ĐÂY. Bản gốc dùng `<div onClick>` nên không
 *    có tiêu điểm để mà vẽ. Đổi sang radio thật thì phải vẽ, nếu không người
 *    dùng bàn phím mất dấu con trỏ giữa 23 ô chọn.
 * ============================================================ */

/* ---- 18.1 · Khung trang ----
 *
 * Trang này KHÔNG có ảnh hero — bản gốc cho nền ngà và đệm trên 180px, khác
 * bảy trang kia. Vì thế `<main>` giữ nguyên `.tgs-main` (đệm trên 88px) và
 * KHÔNG thêm `.tgs-main--hero`; 180px của bản gốc đã tính cả chỗ cho header.
 */
.tgs-personal {
  background: var(--tgs-nga);
  color: var(--tgs-muc);
  padding-top: 92px;   /* 92 + 88 của .tgs-main = 180px của bản gốc */
}

/* ---- 18.2 · Đầu trang ---- */

.tgs-personal__dau h1 {
  font-weight: 300;
  margin-top: 22px;
}

.tgs-personal__dan {
  max-width: 44ch;
  margin-top: 26px;
  font-weight: 300;
}

/* ---- 18.3 · Lưới chính · LỖI 3 của audit ----
 *
 * Bản gốc `1fr 1fr` khe 80px. Đưa về `.tgs-luoi-6040--dao` = `1fr 1.5fr`,
 * tức cột CHỮ rộng. Chọn bên rộng theo đúng câu trong audit ("bên có chữ dài
 * thì rộng hơn"): cột phải mang bốn bước cấu hình, 23 ô chọn và khối tổng kết
 * — đo trong bản gốc là 12.400 ký tự mã; cột trái chỉ có một hình vẽ rộng cố
 * định 310px, cho nó thêm bề ngang là cho thêm khoảng trắng.
 *
 * Khe giữ 80px của bản gốc, không lấy `--tgs-k6` (96px) mà `.tgs-luoi-6040`
 * cấp sẵn — 16px đó là chỗ dựa của phép cộng ở 18.9.
 */
.tgs-personal__luoi {
  gap: 80px;
  margin-top: 80px;
  padding-bottom: 140px;

  /*
   * `align-items: stretch` PHẢI KHAI TƯỜNG MINH. `.tgs-luoi-6040` trong
   * layout.css đặt `align-items: center`, và class đó dùng cho những dải
   * ảnh–chữ cao bằng nhau nên căn giữa là đúng ở đó. Ở đây thì KHÔNG: cột trái
   * cao 826px, cột phải cao 1.576px, căn giữa đẩy cột trái xuống 305px so với
   * mép trên lưới — đo được trên trang thật, và nhìn thấy trên ảnh chụp: hình
   * xem trước tụt hẳn xuống dưới bước 02 thay vì ngang hàng bước 01.
   *
   * Hệ quả thứ hai, nặng hơn và không nhìn ra bằng mắt: cột trái không cao
   * bằng lưới thì `position:sticky` của khung chỉ dính được một đoạn ngắn, và
   * ĐIỂM OVERLAP THỨ HAI (18.9) không bao giờ xảy ra.
   */
  align-items: stretch;
}

/*
 * `min-width: 0` cho hai cột. Ô lưới mặc định là `min-width: auto`, tức là
 * KHÔNG BAO GIỜ hẹp hơn nội dung nhỏ nhất bên trong — một phần tử có bề ngang
 * cố định bên trong là cả trang tràn ngang ở khổ nhỏ, và lỗi hiện ra ở tận
 * `<html>` chứ không ở chỗ gây ra. Đã dính đúng lỗi này ở phiên dựng: hình vẽ
 * `width:310px` giữ sàn 383px ở khổ 320. Xem 18.13.
 */
.tgs-personal__luoi > * { min-width: 0; }

/* Chỉ cột PHẢI căn đầu. Cột trái phải cao bằng lưới, xem điều 2 ở đầu file. */
.tgs-personal__cot-chu { align-self: start; }

/* ---- 18.4 · Khung xem trước và ĐIỂM OVERLAP THỨ NHẤT ---- */

.tgs-personal__khung {
  position: sticky;
  top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 0;
  min-height: 660px;
  background: var(--tgs-nga-dam);
}

/*
 * ĐIỂM OVERLAP 1 — hình vẽ nhô LÊN 56px khỏi mép trên khung nền #E7E1D5, nằm
 * trên nền ngà trống của trang.
 *
 * DÙNG `top`, KHÔNG DÙNG `margin-top`, và đây là lỗi đã mắc rồi mới sửa trong
 * chính phiên dựng này. `margin-top: -56px` KHÔNG có tác dụng ở đây: khung là
 * flex `align-items:center`, mà margin âm của một flex item được tính vào kích
 * thước ngoài của nó TRƯỚC khi căn giữa, nên phép căn giữa hấp thụ hết 56px và
 * trả hình về đúng chỗ cũ. Đo trên trang thật: hình vẫn nằm THẤP HƠN mép khung
 * 14px, tức là điểm overlap không tồn tại — mà không có lỗi nào báo.
 *
 * `position: relative` + `top` dịch phần vẽ mà không đụng tới phép căn giữa,
 * nên số ghi ở đây là số thật. Đã đo lại sau khi sửa, ghi trong PROJECT_STATE.
 *
 * PHÉP CỘNG, hai số ràng nhau:
 *   126 = 70 (đệm trên của khung, số bản gốc) + 56 (phần thật sự nhô ra).
 * Đổi đệm khung thì phải đổi số này. Lần đầu tôi viết −56 và nhầm: −56 mới
 * kéo hình lên tới ĐỆM của khung, chưa qua khỏi MÉP khung — đo ra vẫn còn nằm
 * thấp hơn mép 14px (70 − 56). Đây đúng là dạng "công cụ báo thành công nhưng
 * kết quả thật thì không": luật CSS áp dụng đủ, `top` đọc ra `-56px`, chỉ có
 * điều overlap không tồn tại.
 *
 * Bên dưới vùng nhô ra là NỀN TRỐNG: đoạn dẫn của đầu trang giới hạn 44ch và
 * kết thúc cách đó hàng trăm pixel. Không có chữ nào bị đè.
 *
 * `overflow: visible` trên khung là bắt buộc — thiếu nó thì phần nhô bị cắt
 * và luật này im lặng không có tác dụng.
 */
.tgs-personal__khung { overflow: visible; }

.tgs-personal__ve {
  width: 310px;
  max-width: 100%;
  position: relative;
  top: -126px;   /* 70 đệm khung + 56 nhô ra — xem phép cộng ở trên */
  z-index: 2;
}

.tgs-personal__ve svg { display: block; overflow: visible; }

/*
 * BƯỚC 17 · D10 — tương phản. `--tgs-muc-40` trên nền ngà đậm `#E7E1D5` đo
 * được 2,59:1, thiếu xa ngưỡng 4,5:1 của chữ thường. Đổi sang `--tgs-muc-60`
 * (mốc đã có sẵn trong thang, không đặt màu mới) → 4,77:1.
 * GIỮ NGUYÊN cỡ chữ 9,5px: cỡ nhỏ là ý đồ bản gốc, chỉ sửa độ đậm màu.
 */
.tgs-personal__ghi {
  position: absolute;
  left: 28px;
  bottom: 24px;
  font-size: var(--tgs-cd-nhan-be);
  letter-spacing: var(--tgs-gian-be);
  text-transform: uppercase;
  color: var(--tgs-muc-60);
}

/* ---- 18.5 · Một bước cấu hình ---- */

/*
 * HAI CLASS TRONG SELECTOR, KHÔNG PHẢI MỘT — bắt buộc, và đây là lỗi đã mắc
 * rồi mới sửa trong phiên dựng này.
 *
 * Mỗi bước là một `<fieldset class="tgs-personal__nhom tgs-personal__buoc">`.
 * Mục 18.6 phải gỡ viền mặc định của `<fieldset>` bằng `.tgs-personal__nhom
 * { border: 0 }`, mà luật đó nằm SAU luật này trong file và cùng độ ưu tiên
 * (0,1,0), nên nó thắng và xoá luôn `border-top` của bước. Kết quả: bốn đường
 * kẻ phân tách biến mất hết. Không lỗi nào báo, chỉ ảnh chụp mới thấy —
 * đúng dạng bẫy đã ghi trong BAI_HOC.md khi dựng `.tgs-hero--thap`.
 *
 * Viết hai class cho độ ưu tiên (0,2,0) thì thắng bất kể thứ tự.
 */
.tgs-personal__nhom.tgs-personal__buoc {
  border-top: 1px solid var(--tgs-muc-20);
  padding-top: 34px;
  margin-top: 56px;
}
.tgs-personal__nhom.tgs-personal__buoc:first-of-type { margin-top: 0; }

.tgs-personal__buoc-dau {
  display: flex;
  align-items: baseline;
  gap: var(--tgs-k2);
}

/*
 * BƯỚC 19 · B-19-2 ĐÃ GỠ (30/08 11:55) — người vận hành chốt lấy mốc WCAG:
 * "chữ lớn" là 24px weight 400 (hoặc 18,66px in đậm). Chỗ này 22px / weight
 * 400 nên là chữ NHỎ, cần 4,5:1, mà son gốc chỉ cho 4,05:1 trên nền ngà.
 * Đổi sang biến thể nền sáng → 5,18:1. Nền dưới chữ này là `#F3F0E8` (đã đo,
 * không suy từ tên lớp — xem BAI_HOC B-19-1 về chuyện đoán nền theo `.tgs-dai--sang`).
 */
.tgs-personal__so {
  font-family: var(--tgs-chu-de);
  font-size: 22px;
  color: var(--tgs-son-tren-sang);
}

/* BƯỚC 17 · D10 — "Step one/two/three": muc-50 cho 3,59:1, muc-60 cho 4,99:1. */
.tgs-personal__nhan {
  font-size: var(--tgs-cd-nhan);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tgs-muc-60);
}

.tgs-personal__ten {
  font-family: var(--tgs-chu-de);
  font-size: 28px;
  line-height: 1.15;
  margin: 6px 0 0;
}

/*
 * Ghi chú nhỏ dưới một bước.
 *
 * `max-width` là SỬA 30/08 — mục D11. Ghi chú này chạy hết bề ngang cột cấu
 * hình: ở 1440 dòng dài nhất đếm được 122 ký tự, ở 1024 vẫn 87 — trong khi
 * dải dễ đọc là 45–75. Nó lại là cỡ chữ nhỏ nhất còn phải đọc thành câu
 * (12,5px), tức dài và nhỏ cùng lúc, mắt dễ lạc dòng khi nhảy sang dòng sau.
 *
 * 60ch chứ không phải 70ch của bảng đề xuất: đơn vị `ch` là bề rộng glyph "0"
 * KHÔNG kể letter-spacing, còn số ký tự thật trên một dòng thì có kể. Ở font
 * và cỡ này 70ch ra 83 ký tự thật — vẫn quá dải. 60ch ra ~71. 60ch cũng là
 * một bậc đã có trong thang của theme (components.css 586, pages.css 2823).
 *
 * Đây là trần, không phải bề rộng: ở khổ nào cột đã hẹp hơn thì luật này im.
 */
.tgs-personal__chu-thich {
  font-size: 12.5px;
  line-height: 1.7;
  margin-top: 18px;
  max-width: 60ch;
}
.tgs-dai--sang .tgs-personal__chu-thich,
.tgs-personal .tgs-personal__chu-thich { color: rgba(11, 11, 11, 0.55); }

/* ---- 18.6 · Ô chọn màu (bước 1 và 2) ----
 *
 * `<fieldset>` mang viền và đệm mặc định của trình duyệt — phải gỡ tường minh,
 * nếu không mỗi bước có thêm một khung xám không ai đặt.
 */
.tgs-personal__nhom {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;   /* fieldset mặc định là min-width:min-content, làm vỡ lưới */
}

.tgs-personal__hang-chon {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.tgs-chon { position: relative; display: block; }

/*
 * Ô chọn ẩn nhưng VẪN Ở TRONG THỨ TỰ TAB. Xem điều 3 ở đầu file.
 * Không dùng `.tgs-an-nhin`: class đó có `clip` và `position:absolute` với
 * kích thước 1px, dùng cho chữ đọc màn hình chứ không cho ô điều khiển nằm
 * chồng lên nhãn.
 */
.tgs-chon input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tgs-chon input:disabled { cursor: not-allowed; }

.tgs-chon__mat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 12px;
  border: 1px solid var(--tgs-muc-20);
  background: transparent;
  transition: border-color var(--tgs-vua) ease, background var(--tgs-vua) ease;
}

.tgs-chon__ten {
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

.tgs-chon input:checked + .tgs-chon__mat {
  border-color: var(--tgs-muc);
  background: var(--tgs-muc-05);
}

.tgs-chon input:focus-visible + .tgs-chon__mat {
  outline: 2px solid var(--tgs-son);
  outline-offset: 2px;
}

.tgs-chon input:disabled + .tgs-chon__mat {
  border-color: var(--tgs-muc-12);
  background: var(--tgs-muc-03);
  color: var(--tgs-muc-35);
}

/* ---- 18.7 · Ô hoạ tiết (bước 3) · LỖI 2 của audit ----
 *
 * Bản gốc `repeat(4,1fr)` khe 14px — một trong năm chỗ audit đếm được.
 * Dùng `.tgs-luoi-4` (12 cột, nhịp 6-3-3-4) để phá đối xứng. Khe của class đó
 * là `--tgs-k4` 40px, quá rộng cho bốn ô nhỏ, nên khai đè về 14px của bản gốc.
 */
.tgs-personal__luoi-ht {
  gap: 14px;
  margin-top: 28px;
}

.tgs-chon-ht .tgs-chon__mat {
  display: block;
  padding: 16px 14px;
  text-align: left;
}

.tgs-chon-ht .tgs-chon__ten {
  display: block;
  line-height: 1.5;
}

/* Chữ "Unavailable" — chỉ hiện trên ô đang bị chặn. */
.tgs-chon__khoa {
  display: none;
  margin-top: 8px;
  font-size: var(--tgs-cd-nhan-ti);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tgs-muc-40);
}
.tgs-chon input:disabled + .tgs-chon__mat .tgs-chon__khoa { display: block; }

/* ---- 18.8 · Ô size (bước 4) ---- */

.tgs-personal__nhom-size {
  font-size: var(--tgs-cd-nhan-be);
  letter-spacing: var(--tgs-gian-be);
  text-transform: uppercase;
  color: var(--tgs-muc-50);
  margin-top: 30px;
}
.tgs-personal__nhom-size:first-of-type { margin-top: 28px; }

.tgs-personal__hang-size {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.tgs-chon-size { position: relative; display: inline-block; }

.tgs-chon-size .tgs-chon__mat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  font-size: 12.5px;
  border: 1px solid var(--tgs-muc-20);
}

.tgs-chon-size input:checked + .tgs-chon__mat {
  border-color: var(--tgs-muc);
  background: var(--tgs-muc);
  color: var(--tgs-nga);
}

/* ---- 18.9 · Khối "Your design" và ĐIỂM OVERLAP THỨ HAI ---- */

.tgs-personal__tom-tat {
  background: var(--tgs-muc);
  color: var(--tgs-nga);
  padding: 44px;
  margin-top: 64px;
}

/* BƯỚC 19 — 10px trên nền mực (đo được bg 11,11,11): lấy biến thể tối. */
.tgs-personal__tom-tat .tgs-nhan { color: var(--tgs-son-tren-toi); }

/*
 * BƯỚC 17 · D1 — LỖI NẶNG NHẤT CỦA CẢ SITE, ĐO ĐƯỢC 1,00:1.
 *
 * `.tgs-nhan` ở `base.css` mặc định là `--tgs-nga-60` — đúng cho nền TỐI.
 * Nhãn "Made Personal" ở đầu trang này nằm trên nền NGÀ, nên là chữ ngà trên
 * nền ngà: vô hình hoàn toàn. `layout.css:46` đã lo trường hợp này bằng
 * `.tgs-dai--sang .tgs-nhan`, nhưng khối `.tgs-personal__dau` KHÔNG nằm trong
 * `.tgs-dai--sang` nên trượt luật đó.
 *
 * Dùng `--tgs-son` chứ không phải một màu xám mới: đây là nhãn đầu dải, và mọi
 * nhãn đầu dải trên nền sáng khắp site đều là son. Chọn màu khác cho riêng chỗ
 * này là tự đẻ ra một cách trình bày thứ hai.
 * 1,00:1 → 4,05:1. VẪN THIẾU 0,45 so với 4,5:1 — nhưng đó là B-15-2 (màu
 * thương hiệu chưa được khách chốt), chung số phận với 6 trang khác, và sẽ
 * được sửa một lượt khi khách quyết. Không tự đổi màu thương hiệu ở đây.
 *
 * BƯỚC 19 (30/08) — người vận hành ĐÃ QUYẾT, và đây chính là "một lượt" nói
 * ở trên. `--tgs-son` giữ nguyên là màu thương hiệu; chữ nhỏ đổi sang biến
 * thể cùng sắc. Nhãn 10px trên nền ngà: 4,05 → 4,69. Hết thiếu 0,45.
 */
.tgs-personal__dau .tgs-nhan { color: var(--tgs-son-tren-sang); }

/*
 * ĐIỂM OVERLAP 2 — khối mực lấn TRÁI 120px, trùm 40px lên mép phải của khung
 * xem trước.
 *
 * Phép cộng, ba số ràng nhau:
 *   120 = 80 (khe lưới, 18.3) + 40 (phần thật sự trùm lên khung).
 * Đổi khe lưới thì phải đổi số này.
 *
 * VÌ SAO KHÔNG ĐÈ CHỮ, đo được chứ không phỏng đoán: ở khổ 1440 lòng chữ là
 * 1328px, khe 80px, lưới `1fr 1.5fr` → cột trái 499px. Hình vẽ trong khung
 * rộng cố định 310px và căn giữa, nên mỗi bên còn (499−310)/2 ≈ 94px nền
 * trống. Trùm 40px chỉ ăn vào phần trống đó, còn cách mép hình vẽ 54px.
 * Ghi chú "Top view · schematic preview" nằm ở góc TRÁI dưới, phía đối diện.
 *
 * `z-index: 3` là bắt buộc: khung có `position:sticky` nên đã tạo ngữ cảnh
 * xếp lớp, không có z-index thì khối mực vẽ xuống dưới và phần trùm biến mất.
 *
 * ĐIỀU KIỆN ĐỂ ĐIỂM NÀY CÓ THẬT: khung phải còn dính ở đáy trang khi cuộn tới
 * khối này — xem điều 2 ở đầu file. Bỏ `align-self:start` ở 18.3 cho cột trái
 * là giết luôn điểm overlap này mà không có lỗi nào báo.
 */
@media (min-width: 1100px) {
  .tgs-personal__tom-tat {
    position: relative;
    z-index: 3;
    margin-inline-start: -120px;
  }
}

/*
 * Bảng 2×2 — GIỮ `1fr 1fr`, và đây là quyết định có căn cứ, không phải bỏ sót
 * lỗi 3 của audit. Bốn ô này là BẢNG SỐ LIỆU của một lựa chọn (Sole · Strap ·
 * Pattern · EU size), không phải bốn khối nội dung cạnh tranh nhau. Audit nhắm
 * vào "text–ảnh 50/50" và "bốn khối đều tăm tắp" — làm lệch một bảng tra cứu
 * là làm hỏng thứ đang đúng, cùng cách kết luận như bốn mục Craft (mục 14 của
 * pages.css) và ba chủ đề Collection.
 *
 * Khe 1px trên nền ngà 16% là cách bản gốc vẽ đường kẻ giữa các ô — không phải
 * border, nên mỗi ô phải tự tô nền mực lại.
 */
.tgs-tom-tat__luoi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 26px;
  background: var(--tgs-nga-16);
}

.tgs-tom-tat__o {
  background: var(--tgs-muc);
  padding: 20px 22px;
}

/*
 * BƯỚC 17 · D10 — nhãn bảng kê trên nền mực. nga-45 cho 4,10:1 (thiếu 0,40).
 * `--tgs-nga-55` là đúng mốc đã dùng cho chân trang ở D9 → 5,63:1.
 */
.tgs-tom-tat__nhan {
  font-size: var(--tgs-cd-nhan-be);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tgs-nga-55);
}

.tgs-tom-tat__gt {
  font-family: var(--tgs-chu-de);
  font-size: 19px;
  margin-top: 8px;
}

/*
 * BƯỚC 17 · M8 — KHE GIỮA "Send an Enquiry" VÀ "Reset Design".
 *
 * Đo được `gap: 14px` ở CẢ BẢY khổ 320/375/390/430/768/1024/1440, không riêng
 * di động. Nút đặt lại đo được **108,42 × 19px**: dưới 24px, nên nó KHÔNG được
 * hưởng ngoại lệ kích thước của WCAG 2.5.8 và luật khe 24px áp vào thật.
 *
 * VÌ SAO SỬA CHO MỌI KHỔ chứ không nhét vào media query di động: nút 19px cao
 * là 19px ở mọi khổ, con số 14px cũng vậy. Khe này là khe DUY NHẤT giữa "gửi
 * đơn" và "xoá sạch lựa chọn" — bấm nhầm là mất toàn bộ cấu hình khách vừa
 * dựng qua 4 bước. Ở 320/375/390 hai nút xếp chồng nên 24px là khe DỌC; từ
 * 430px trở lên chúng nằm ngang nên là khe NGANG. Một khai báo `gap` lo cả hai.
 *
 * KHÔNG nâng chiều cao nút đặt lại lên 24px ở lượt này: `.tgs-nut-chu` là kiểu
 * dùng chung nhiều trang, đổi nó là đổi hình ở chỗ chưa đo. Đã ghi lại thành
 * việc riêng, xem 17.11.
 */
.tgs-personal__hanh-dong {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 34px;
}

/* ---- 18.10 · Hộp hỏi hàng ----
 *
 * `<dialog>` THẬT, và đây là điểm mấu chốt của "tắt JS thì vẫn đọc được".
 * Server in ra `<dialog open>`: trạng thái đó nằm TRONG dòng chảy trang, ai
 * cũng đọc được, không cần một dòng JS nào. `cau-hinh.js` gỡ `open` ra rồi
 * mới nối nút vào `showModal()`. JS chết ở bất kỳ dòng nào → thẻ vẫn mở, nội
 * dung vẫn còn. Không có kịch bản mất nội dung.
 *
 * `:modal` phân biệt hai trạng thái đó. Trình duyệt không hiểu `:modal` thì
 * luật dưới không khớp, hộp giữ dạng nằm trong dòng chảy — vẫn đọc được.
 */
.tgs-hoi {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 64px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.tgs-hoi:not([open]) { display: none; }

.tgs-hoi__trong {
  background: var(--tgs-nga);
  color: var(--tgs-muc);
  padding: 56px;
}

/*
 * BƯỚC 19 — hộp hỏi hàng tự sơn nền NGÀ, nhưng nó là `<dialog>` nằm ngoài mọi
 * `.tgs-dai--sang`, nên `.tgs-nhan--son` ở đây rơi vào bản TỐI mặc định và đo
 * được 3,65:1. Trả về bản sáng: 3,65 → 4,69.
 * Đặt luật ngay dưới chỗ khai nền, để lần sau đổi nền là thấy luôn phải đổi cả
 * màu chữ — chứ không phải đi tìm ở file khác.
 */
.tgs-hoi__trong .tgs-nhan--son { color: var(--tgs-son-tren-sang); }

/*
 * BƯỚC 22 — CÙNG MỘT CÁI BẪY, LẦN THỨ HAI. Liên kết Privacy dưới nút gửi dùng
 * `.tgs-nut-chu--son`; trong hộp này nó cũng rơi vào bản TỐI và đo được
 * **3,54:1** trên nền ngà — trượt AA. Trả về bản sáng: 3,54 → 5,18.
 *
 * Dòng `:hover` KHÔNG phải viết cho đủ bộ. `.tgs-nut-chu--son:hover` mặc định
 * đổi chữ sang `--tgs-nga`, tức NGÀ TRÊN NGÀ: rê chuột vào là liên kết biến
 * mất hẳn. Bản `.tgs-dai--sang` đã xử lý chuyện đó bằng cách đổi sang mực,
 * nhưng hộp này không mang class đó nên phải nhắc lại ở đây.
 *
 * Quy tắc rút ra, ghi luôn cho lần sau: **mọi class có hai biến thể theo nền
 * đều phải có một dòng cho `.tgs-hoi__trong`**, vì `<dialog>` này tự sơn nền
 * ngà mà đứng ngoài mọi `.tgs-dai--sang`. Đã dính hai lần.
 */
.tgs-hoi__trong .tgs-nut-chu--son { color: var(--tgs-son-tren-sang); }
.tgs-hoi__trong .tgs-nut-chu--son:hover,
.tgs-hoi__trong .tgs-nut-chu--son:focus-visible {
  color: var(--tgs-muc);
  border-bottom-color: var(--tgs-muc);
}

/* Dạng phủ toàn màn hình — chỉ khi JS đã gọi showModal(). */
.tgs-hoi:modal {
  max-width: 760px;
  max-height: 86vh;
  margin: auto;
  overflow: auto;
}
.tgs-hoi:modal::backdrop {
  background: rgba(11, 11, 11, 0.72);
  backdrop-filter: blur(6px);
}

.tgs-hoi__dau {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--tgs-k3);
}

.tgs-hoi__tieu-de {
  font-family: var(--tgs-chu-de);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.1;
  margin: 16px 0 0;
}

/*
 * Nút đóng — ẩn khi chưa có JS, vì lúc đó hộp không đóng được đi đâu cả. Một
 * nút bấm không làm gì còn tệ hơn không có nút.
 *
 * CLASS MỐC LÀ `.tgs-co-cau-hinh`, KHÔNG PHẢI `.tgs-co-hieu-ung`. Hai class
 * khác nhau và đừng gộp: `.tgs-co-hieu-ung` do `header.php` gắn khi
 * `assets/js/site.js` tồn tại (hiệu ứng hiện dần toàn site, hiện CHƯA có file
 * đó); `.tgs-co-cau-hinh` do chính `cau-hinh.js` tự gắn khi nó chạy được.
 * Gộp lại là nút đóng phụ thuộc vào một file JS không liên quan.
 */
.tgs-hoi__dong {
  display: none;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--tgs-muc-45);
  cursor: pointer;
}
.tgs-co-cau-hinh .tgs-hoi__dong { display: block; }

/* ---- 18.11 · Bảng kê trong hộp hỏi hàng ----
 *
 * Bản gốc `repeat(4,1fr)` — chỗ thứ hai của lỗi 2 trên trang này. GIỮ NGUYÊN
 * bốn cột đều, cùng lý do như bảng 2×2 ở 18.9: đây là bảng tra cứu lựa chọn
 * người dùng vừa đặt, không phải bốn khối nội dung. Phá nhịp một dòng xác nhận
 * ngay trên form là làm người ta đọc chậm lại đúng lúc cần đọc nhanh.
 *
 * Ghi rõ ở đây để việc 14 rà soát không đếm nhầm thành "chỗ bỏ sót".
 */
.tgs-hoi__ke {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 34px;
  padding: 22px 24px;
  background: var(--tgs-nga-dam);
}

.tgs-hoi__ke-nhan {
  font-size: var(--tgs-cd-nhan-ti);
  letter-spacing: var(--tgs-gian-ti);
  text-transform: uppercase;
  color: var(--tgs-muc-50);
}

.tgs-hoi__ke-gt {
  font-size: 13.5px;
  margin-top: 7px;
}

/* ---- 18.12 · Ô nhập ----
 *
 * Giống mục 16 của pages.css: `resize: vertical` thay cho `resize:none` của
 * bản gốc, và có vòng tiêu điểm. Không lặp lại lý do ở đây, xem 16.
 */
.tgs-hoi__luoi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 34px;
}

.tgs-o {
  border-bottom: 1px solid var(--tgs-muc-25);
  padding-bottom: 10px;
}
.tgs-o--rong { grid-column: 1 / -1; }

/*
 * BƯỚC 17 · D4 — NHÃN Ô NHẬP CỦA FORM. Đây là chỗ site nhận đơn hỏi hàng,
 * nên là chỗ ít được phép khó đọc nhất. Đo được 9px / 3,59:1: nhỏ nhất site
 * VÀ dưới ngưỡng tương phản. Sửa hai thứ cùng lúc:
 *   cỡ  9px  → 11px  (`--tgs-cd-nhan-form`)
 *   màu muc-50 → muc-60  (3,59:1 → 4,99:1)
 * Vì sao 11px chứ không 13px: 11px vẫn nằm trong ngôn ngữ chữ-hoa-nhỏ của bản
 * gốc (menu chính cũng 11px), 13px thì nhãn to ngang chữ nhập, phá thứ bậc.
 * Luật này có BẢN SAO ở `pages.css` — sửa một chỗ là chưa đủ, phải sửa cả hai.
 */
.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 input,
.tgs-o textarea {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 300;
  margin-top: 8px;
  padding: 0;
  color: inherit;
  resize: vertical;
}
.tgs-o input:focus-visible,
.tgs-o textarea:focus-visible {
  outline: 2px solid var(--tgs-son);
  outline-offset: 3px;
}

/*
 * BƯỚC 17 · M1 — CỠ CHỮ Ô NHẬP TRÊN ĐIỆN THOẠI PHẢI ≥ 16px.
 *
 * Safari trên iOS TỰ PHÓNG TO trang khi hội tụ vào ô nhập có `font-size < 16px`
 * và KHÔNG tự thu lại. Đo được 15px — thiếu đúng 1px. Đây là suy ra từ hành vi
 * đã biết của iOS, không phải quan sát trên máy thật (chưa có iPhone để thử);
 * nhưng ngưỡng 16px là hằng số cứng và số đo 15px thì chắc chắn.
 *
 * VÌ SAO KHAI Ở ĐÂY CHỨ KHÔNG Ở `pages.css`: đã thử đặt `.tgs-o__nhap` trong
 * khối 760px của `pages.css` và ĐO LẠI THẤY KHÔNG ĂN — chỉ `<select>` đổi được
 * 16px, còn `<input>` và `<textarea>` vẫn 15px. Lý do: `.tgs-o input` ở trên
 * có độ ưu tiên (0,1,1) và `configurator.css` lại nạp SAU `pages.css`. Nguồn
 * sự thật của cỡ chữ ô nhập là khối `.tgs-o input, .tgs-o textarea` ngay trên,
 * nên bản vá phải nằm cạnh nó.
 *
 * Ngưỡng 760px chứ không phải 430px như đề xuất M1 ban đầu: điện thoại xoay
 * ngang rộng 640–760px vẫn là iOS Safari và vẫn dính đúng hành vi đó. Khổ rộng
 * không đổi nên hình của bản thiết kế giữ nguyên.
 */
@media (max-width: 760px) {
  .tgs-o input,
  .tgs-o select,
  .tgs-o textarea { font-size: 16px; }
}

/*
 * BƯỚC 17 · M2 — Ô NHẬP PHẢI CAO ≥ 44px Ở KHỔ ĐIỆN THOẠI.
 *
 * Đo được sau khi M1 nâng cỡ chữ: `<input>` cao **25,59px**, `<select>` cao
 * **24px** ở cả bốn khổ 320/375/390/430. Sàn WCAG 2.5.5 cho đích chạm là 44px,
 * tức đang đạt 58% và 55%. Đây là đích bấm quan trọng nhất của cả site — chỗ
 * khách gõ đơn hỏi hàng.
 *
 * DÙNG `padding-top` CHỨ KHÔNG DÙNG `padding-block`, và đây là lý do hình học:
 * gạch chân của ô là `border-bottom` của `.tgs-o`, cách đáy ô đúng 10px. Đệm
 * đều hai phía thì chữ nằm giữa hộp 44px, cách gạch chân 19+10 = 29px — ô nhập
 * trông rời khỏi đường kẻ của chính nó, phá đúng cái nhịp "chữ ngồi trên kẻ"
 * của bản thiết kế. Đệm một phía trên thì chữ vẫn sát kẻ như cũ, chỉ có vùng
 * chạm nở lên trên — chỗ đó là khoảng trắng sẵn có giữa nhãn và ô.
 *
 * `min-height` vẫn cần bên cạnh `padding-top`: 25,59 + 18 = 43,59px, thiếu
 * 0,41px. Hai khai báo cùng làm một việc, không thừa.
 *
 * KHÔNG áp cho `<textarea>`: nó đã có `min-height: 6.4em` (đo được 102,39px).
 *
 * Ngưỡng 760px giữ đúng ngưỡng của M1 ngay trên — cùng một tập thiết bị, tách
 * hai ngưỡng khác nhau cho cùng một form là mời lỗi về sau.
 */
@media (max-width: 760px) {
  .tgs-o input,
  .tgs-o select {
    min-height: 44px;
    padding-top: 18px;
  }
}

.tgs-hoi__nut { margin-top: 36px; }

/*
 * Bẫy mật ong. PHẢI ẩn bằng `position:absolute` + `left:-9999px`, KHÔNG dùng
 * `display:none`: một phần trình duyệt và phần mềm điền tự động bỏ qua ô
 * `display:none`, còn bot thì điền tất. Ẩn kiểu này thì bot vẫn thấy.
 * `aria-hidden` + `tabindex="-1"` để người thật không bao giờ chạm vào.
 */
.tgs-mat-ong {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Câu báo lỗi / báo khoá. */
.tgs-personal__loi {
  margin-top: var(--tgs-k3);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--tgs-son-tren-toi);   /* 12,5px trên nền mực — BƯỚC 19 */
}

.tgs-personal__khoa {
  margin-top: var(--tgs-k3);
  font-size: 12.5px;
  line-height: 1.7;
}

/* Form khoá khi chưa có bảng nhận đơn — giống trang Contact. */
.tgs-hoi fieldset[disabled] { opacity: 0.55; }

/* ============================================================
 * 18.13 · MÀN HÌNH NHỎ
 *
 * Ba ngưỡng, mỗi ngưỡng một lý do đo được, không phải chia đều cho đẹp.
 * ============================================================ */

/* Dưới 1100px: TẮT CẢ HAI ĐIỂM OVERLAP.
 *
 * Lý do là số: dưới ngưỡng này cột trái hẹp dần, phần nền trống hai bên hình
 * vẽ (94px ở khổ 1440) co lại nhanh hơn 40px của phần trùm, nên khối mực sẽ
 * bắt đầu ăn vào chính hình vẽ. Tắt trước khi tới đó, không đợi vỡ.
 * Luật `margin-inline-start` ở 18.9 nằm trong `@media (min-width:1100px)` nên
 * tự hết hiệu lực; ở đây chỉ còn phải tắt điểm thứ nhất.
 */
@media (max-width: 1099px) {
  .tgs-personal__ve { top: 0; }
}

/* Dưới 960px: lưới hai cột về một cột.
 *
 * `.tgs-luoi-6040` có luật một cột riêng trong layout.css ở ngưỡng nào thì
 * ngưỡng đó thắng — khai lại ở đây là để chắc chắn khung xem trước THÔI DÍNH
 * khi đã một cột. Khung dính cao 660px trên màn hình dọc 800px là đẩy toàn bộ
 * phần chọn ra khỏi tầm mắt.
 */
@media (max-width: 960px) {
  .tgs-personal__luoi {
    grid-template-columns: 1fr;
    gap: var(--tgs-k5);
    margin-top: var(--tgs-k5);
    padding-bottom: var(--tgs-k6);
  }

  /*
   * `flex-direction: column` LÀ BẮT BUỘC Ở ĐÂY, không phải cho đẹp.
   *
   * Khung là flex hàng ngang; ghi chú của nó ở khổ rộng là `position:absolute`
   * nên không chiếm chỗ. Ở đây ghi chú về `static` — nếu khung vẫn là hàng
   * ngang thì ghi chú nằm CẠNH hình vẽ, và bề ngang nhỏ nhất của khung thành
   * 310 (hình) + 73 (chữ) = 383px. Đo trên trang thật ở khổ 320: `scrollWidth`
   * đứng nguyên 407px bất kể khung nhìn hẹp bao nhiêu, tức là tràn ngang 87px.
   * Đây là lỗi đã mắc rồi mới sửa trong chính phiên dựng này.
   *
   * Chỉ đổi `position` của ghi chú mà quên đổi hướng flex là sửa nửa vời.
   */
  .tgs-personal__khung {
    position: static;
    flex-direction: column;
    min-height: 0;
    padding: var(--tgs-k4) 0;
  }

  /*
   * Bỏ bề ngang cố định 310px. Giữ nó lại thì ô lưới không hẹp xuống dưới
   * 310 + 2×24 đệm = 358px được, tức là mọi điện thoại đều tràn ngang.
   * `max-width` giữ đúng cỡ bản gốc ở những khổ còn đủ chỗ.
   */
  .tgs-personal__ve {
    width: 100%;
    max-width: 310px;
  }

  .tgs-personal__ghi {
    position: static;
    margin-top: var(--tgs-k3);
    text-align: center;
  }

  .tgs-hoi__ke { grid-template-columns: 1fr 1fr; }
}

/* Dưới 760px: hàng ô và hộp hỏi hàng về một cột. */
@media (max-width: 760px) {
  .tgs-personal { padding-top: var(--tgs-k5); }

  .tgs-personal__ten { font-size: 24px; }

  .tgs-personal__nhom.tgs-personal__buoc { margin-top: var(--tgs-k4); }

  .tgs-personal__tom-tat { padding: var(--tgs-k3); }

  .tgs-personal__hanh-dong .tgs-nut { flex: 1 1 auto; }

  .tgs-hoi__trong { padding: var(--tgs-k3); }
  .tgs-hoi__tieu-de { font-size: 28px; }
  .tgs-hoi__luoi { grid-template-columns: 1fr; gap: var(--tgs-k3); }
  .tgs-hoi__ke { grid-template-columns: 1fr; gap: var(--tgs-k2); }

  /*
   * Lưới 4 ô hoạ tiết: `.tgs-luoi-4` giữ 12 cột ở mọi khổ, ở 320px thì mỗi ô
   * span 3 chỉ còn ~60px — chữ "Asanoha Hemp Leaf" vỡ thành từng chữ cái.
   * Về hai cột đều, ở khổ này không còn lưới nào để mà phá nhịp.
   */
  .tgs-personal__luoi-ht { grid-template-columns: 1fr 1fr; }
  .tgs-personal__luoi-ht > *,
  .tgs-personal__luoi-ht > :first-child,
  .tgs-personal__luoi-ht > :nth-child(2),
  .tgs-personal__luoi-ht > :nth-child(3) { grid-column: auto; }
}

/* Ô size phải bấm được bằng ngón tay ở khổ hẹp nhất — 44px là sàn WCAG. */
@media (max-width: 400px) {
  .tgs-personal__hang-size { gap: 8px; }
  .tgs-chon-size .tgs-chon__mat { min-width: 44px; }
}

/*
 * Dưới 370px: hạ cỡ tiêu đề lớn. LÝ DO LÀ MỘT TỪ CỤ THỂ, không phải cảm giác.
 *
 * `--tgs-cd-h1` là `clamp(40px, 7vw, 104px)`, tức là ở mọi khổ dưới 571px nó
 * đứng ở SÀN 40px và không hạ thêm. Tiêu đề trang này là "CREATE YOUR
 * TOGASHYAMO." — từ "TOGASHYAMO." ở 40px đo được 279px, trong khi lòng chữ ở
 * khổ 320 chỉ có 257px (305 khung nhìn − 2×24 đệm). Từ đó không xuống dòng
 * được, nên đẩy `scrollWidth` lên 327px: TRÀN NGANG 22px.
 *
 * Bảy trang kia không dính vì tiêu đề của chúng không có từ nào dài bằng —
 * đây là ràng buộc của NỘI DUNG, không phải của lưới. Đo được: tắt riêng khối
 * `.tgs-personal__dau` thì `scrollWidth` về đúng 305px, bằng các trang kia.
 *
 * KHÔNG sửa bằng `overflow-wrap: break-word`: cách đó bẻ đôi tên thương hiệu
 * giữa dòng ("TOGASHY-AMO"), tức là sửa lỗi bố cục bằng cách làm hỏng brand.
 * Hạ cỡ chữ giữ nguyên từ.
 *
 * `10.6vw` chọn theo phép chia: 34px ở khổ 320 → từ dài 237px, còn dư 20px.
 */
@media (max-width: 370px) {
  .tgs-personal__dau h1 { font-size: clamp(30px, 10.6vw, 40px); }
}