/*
 * TẦNG BỐ CỤC — container, header, footer, các lưới dùng lại.
 *
 * Phạm vi file này: khung. Không có màu nút, không có thẻ, không có accordion
 * — những thứ đó nằm ở components.css.
 *
 * BA ĐIỀU CẦN BIẾT TRƯỚC KHI SỬA FILE NÀY
 *
 * 1. Lưới chốt của dự án là 1440px / đệm 56px, đọc từ tokens.css. Con số này
 *    có lý do (ảnh sản phẩm khổ vuông và dọc), ghi trong CLAUDE.md.
 *
 * 2. Bản thiết kế gốc KHÔNG CÓ MỘT @media NÀO — đã đếm trong template.html,
 *    kết quả 0. Nghĩa là toàn bộ tầng màn hình nhỏ là do tôi thêm, không phải
 *    chép lại. Chỗ nào bạn thấy khác bản demo trên điện thoại thì đây là lý do.
 *
 * 3. Ba lưới `.tgs-luoi-*` bên dưới là chỗ sửa 2 trong 3 lỗi bố cục của
 *    AUDIT-BO-CUC.md. Dùng chúng thay vì viết `1fr 1fr` mới.
 */

/* ============================================================
 * 1 · CONTAINER
 * ============================================================ */

.tgs-container {
  width: 100%;
  max-width: var(--tgs-rong);
  margin-inline: auto;
  padding-inline: var(--tgs-le);
}

/*
 * Bề ngang đoạn văn. Bản gốc dùng 760px cho khối chữ dài và 46–50ch cho đoạn
 * dẫn — audit xếp chỗ này vào "quy tắc cho phép", không phải lỗi lệch lưới.
 */
.tgs-hep    { max-width: 760px; }
.tgs-doan   { max-width: 50ch; }
.tgs-doan-be{ max-width: 46ch; }

/* Dải nội dung. Bản gốc đệm dọc 170px cho dải lớn, 90px cho dải phụ. */
.tgs-dai        { padding-block: var(--tgs-k7); }
.tgs-dai--vua   { padding-block: var(--tgs-k6); }
.tgs-dai--sang  { background: var(--tgs-nga); color: var(--tgs-muc); }
.tgs-dai--toi   { background: var(--tgs-muc); color: var(--tgs-nga); }

/* Trên nền sáng, nhãn và chữ mờ phải đổi sắc độ, nếu không sẽ chìm. */
.tgs-dai--sang .tgs-nhan { color: var(--tgs-son-tren-sang); }  /* 10px — BƯỚC 19 */
.tgs-dai--sang p         { color: rgba(11, 11, 11, 0.72); }

/* ============================================================
 * 2 · HEADER
 *
 * Bản gốc: header trong suốt khi ở đỉnh trang, chuyển sang nền mực + blur khi
 * cuộn xuống. Tôi làm NGƯỢC MẶC ĐỊNH: nền mực là trạng thái mặc định, JS gỡ ra
 * bằng class .tgs-dau--trong khi thật sự đang ở đỉnh một trang có hero tối.
 *
 * Vì sao đảo: header trong suốt chỉ đọc được khi bên dưới là ảnh tối. Nếu JS
 * hỏng, hoặc nếu ai đó dựng một trang có nền sáng ở trên cùng, thì chữ ngà nằm
 * trên nền ngà — mất điều hướng hoàn toàn. Cùng một nguyên tắc với hiệu ứng
 * hiện dần trong base.css: mặc định phải là trạng thái đọc được.
 * ============================================================ */

.tgs-dau {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  padding-block: 18px;
  background: var(--tgs-muc-92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background 0.6s ease, backdrop-filter 0.6s ease, padding 0.6s ease;
}

/*
 * Thanh quản trị WordPress.
 *
 * Header dính `top:0` nên khi người quản trị đăng nhập, thanh admin cao 32px
 * đè lên và CẮT MẤT tên thương hiệu. Đã thấy tận mắt trên ảnh chụp, không phải
 * suy đoán. Khách sẽ luôn nhìn site trong trạng thái đã đăng nhập nên đây là
 * lỗi họ gặp mỗi ngày, dù người dùng cuối không thấy.
 *
 * 782px là ngưỡng WordPress tự đổi thanh admin sang cao 46px — con số của
 * WordPress, không phải breakpoint của theme này.
 * Dưới 600px thanh admin không còn dính nên không phải bù.
 */
body.admin-bar .tgs-dau { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .tgs-dau { top: 46px; }
}

@media screen and (max-width: 600px) {
  body.admin-bar .tgs-dau { top: 0; }
}

/* Trạng thái "đang ở đỉnh trang có hero tối" — JS gắn vào, JS gỡ ra. */
.tgs-dau--trong {
  padding-block: 30px;
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

.tgs-dau__trong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tgs-k4);
}

.tgs-dau__ten {
  flex-shrink: 0;
  font-family: var(--tgs-chu-de);
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tgs-nga);
}
.tgs-dau__ten:hover { color: var(--tgs-nga); }

/*
 * BƯỚC 23 — logo đã có, luật này nay đang chạy thật.
 *
 * `width:174px` là số có sẵn từ trước và ĐÚNG: `_nguon/template.html` offset
 * 233315 ghi `width:174px;height:auto` cho đúng thẻ <img> đầu trang. Giữ.
 *
 * `height:auto` là dòng PHẢI THÊM, không phải thêm cho đủ bộ. `<img>` có
 * thuộc tính `width`/`height` trong HTML — `wp_get_attachment_image()` luôn in
 * ra, ở đây là 1513×304 — và trình duyệt ánh xạ hai thuộc tính đó thành gợi ý
 * trình bày CSS. Luật của theme đè được `width` (174px) nhưng KHÔNG đè
 * `height`, nên nếu thiếu dòng này ảnh sẽ ra 174×304: bẹp dúm theo chiều
 * ngang. Đây là lý do cùng loại với `.tgs-duoi__logo img` bên dưới.
 *
 * `display:block` để bỏ khoảng trắng dưới đường cơ chữ của ảnh inline —
 * khoảng đó làm thẻ <a> cao hơn ảnh vài pixel và lệch nhịp đầu trang.
 */
.tgs-dau__ten img {
  display: block;
  width: 174px;
  height: auto;
  aspect-ratio: 1513 / 304;
}

.tgs-dau__nav { min-width: 0; }

/*
 * Header dính nên nó đè lên đỉnh trang.
 *
 * Trang có hero cao 100vh thì ĐÚNG là muốn bị đè — ảnh chạy lên dưới header.
 * Trang không có hero (Journal, kết quả tìm kiếm, 404) thì phải chừa chỗ, nếu
 * không dòng tiêu đề đầu tiên nằm khuất sau header. Gắn class này vào phần tử
 * đầu tiên của những trang đó.
 *
 * 88px = 18px đệm trên + 18px đệm dưới + chiều cao một dòng menu, làm tròn lên.
 */
.tgs-bu-dau { padding-top: 88px; }

/*
 * `.tgs-main` chừa chỗ sẵn — an toàn hơn là để lộ rồi đi vá từng trang.
 * Trang nào mở đầu bằng hero tràn màn hình thì thêm `.tgs-main--hero` để gỡ ra.
 */
.tgs-main { padding-block: 88px var(--tgs-k6); }
.tgs-main--hero { padding-top: 0; }

/* ---- Bù chiều cao đầu trang cố định cho mọi cú nhảy tới neo (M3) ----
 *
 * BA ĐIỀU ĐÃ ĐO, KHÔNG SUY:
 *
 * 1. `html { scroll-padding-top }` trước khi sửa KHÔNG do theme này khai. Giá
 *    trị 46px/32px đo được là của `admin-bar.min.css` (biến
 *    `--wp-admin--admin-bar--height`) và CHỈ nạp cho người đã đăng nhập.
 *    Khách vào site thì thuộc tính này là `auto`, tức bằng 0.
 * 2. Cái đang thật sự đỡ cho neo là `:target { scroll-margin-top: 96px }` bên
 *    dưới. Bảng "thiếu 38→176px" ở DANH-GIA-UX-UI.md 16.11.1 đo nhầm sang
 *    `scroll-padding-top`; số thiếu thật tính theo 96px, xem mục 17.
 * 3. Đầu trang KHÔNG cao đều theo breakpoint mà đổi theo chỗ menu xuống dòng.
 *    Đo `.tgs-dau` ở 37 bề rộng, tìm đúng chỗ đổi bằng cách kẹp từng pixel:
 *      222px (≤362) · 186px (363–475) · 150px (476–760) · 154px (761–783) ·
 *      109px (784–1180) · 121px (1181–~1282) · 70px (≥~1283).
 *    Dải 1181–1282 CAO HƠN CẢ 1440 vì khe menu 28px làm menu xuống hai dòng —
 *    đây là chỗ dễ bỏ sót nhất, và không breakpoint nào của theme nằm ở đó.
 *
 * Mỗi mốc dưới đây = chiều cao lớn nhất đo được trong dải + ~10px thở.
 * SỬA `.tgs-nav a` HAY ĐỆM CỦA `.tgs-dau` LÀ PHẢI ĐO LẠI BẢNG NÀY.
 */
:root { --tgs-bu-neo: 82px; }

@media (min-width: 1181px) and (max-width: 1282px) {
  :root { --tgs-bu-neo: 132px; }
}

@media (max-width: 1180px) { :root { --tgs-bu-neo: 120px; } }
@media (max-width: 783px)  { :root { --tgs-bu-neo: 164px; } }
@media (max-width: 760px)  { :root { --tgs-bu-neo: 160px; } }
@media (max-width: 475px)  { :root { --tgs-bu-neo: 196px; } }
@media (max-width: 362px)  { :root { --tgs-bu-neo: 232px; } }

html { scroll-padding-top: var(--tgs-bu-neo); }

/* Neo #anchor cũng phải chừa chỗ, nếu không nhảy tới là chữ nằm sau header. */
:target { scroll-margin-top: var(--tgs-bu-neo); }

/* ---- Danh sách menu do wp_nav_menu in ra ---- */

.tgs-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.tgs-nav a {
  display: inline-block;
  /*
   * BƯỚC 17 · D5 + M6 — đích bấm WCAG 2.5.8 (AA) đòi tối thiểu 24px.
   * Đo trước khi sửa: 22,69px ở khổ rộng (chữ 11px, line-height 18,7px + đệm
   * đáy 3px + kẻ 1px) và 21,0px ở khổ ≤760px (chữ 10px, line-height 17px).
   * Thiếu 1,31px và 3,0px. `padding-top: 4px` đưa cả hai qua ngưỡng
   * (26,69px và 25,0px) mà KHÔNG dịch khoảng cách chữ–kẻ chân: kẻ vẫn nằm
   * đúng 3px dưới chữ, hộp chỉ lớn thêm về phía trên.
   * Hệ quả phải đo lại: ở khổ menu xuống nhiều dòng thì đầu trang cao thêm —
   * xem bảng trước/sau trong DANH-GIA-UX-UI.md mục 17.
   */
  padding-top: 4px;
  padding-bottom: 3px;
  /* Menu có thang chữ riêng: 11px/0.16em, đúng `navBase` trong `_nguon/app.js`.
     Không dùng --tgs-cd-nhan ở đây — đó là nhãn đầu dải, 10px/0.28em. */
  font-size: var(--tgs-cd-nav);
  letter-spacing: var(--tgs-gian-nav);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tgs-nga-60);
  border-bottom: 1px solid transparent;
  transition: color var(--tgs-vua) ease, border-color var(--tgs-vua) ease;
}

.tgs-nav a:hover,
.tgs-nav a:focus-visible { color: var(--tgs-nga); }

/*
 * Mục đang xem. WordPress gắn nhiều class tuỳ loại trang — liệt kê đủ, nếu
 * không thì trang bài viết đơn lẻ và trang danh sách sẽ không sáng mục nào.
 */
.tgs-nav .current-menu-item > a,
.tgs-nav .current_page_item > a,
.tgs-nav .current-menu-ancestor > a,
.tgs-nav .current_page_parent > a {
  color: var(--tgs-nga);
  border-bottom-color: var(--tgs-son);
}

/*
 * Nút menu di động.
 *
 * MẶC ĐỊNH VẪN ẨN Ở MỌI KHỔ — không đổi. Nút chỉ hiện ở khối `.tgs-co-menu`
 * trong phần 6 bên dưới, tức chỉ khi `header.php` xác nhận
 * `assets/js/menu-di-dong.js` có thật. Lý lẽ cũ vẫn đúng nguyên: hiện một nút
 * bấm không có tác dụng còn tệ hơn không hiện nút.
 *
 * BƯỚC 21 đã tạo `#tgs-nav-di-dong` (chính `<nav class="tgs-dau__nav">`) nên
 * `aria-controls` trong `header.php` nay trỏ vào phần tử CÓ THẬT — đây là điều
 * kiện M9 đặt ra khi gỡ hai thuộc tính đó ở bước 17.
 *
 * Hai đích bấm dưới đây đều 44×44, đo được chứ không suy: nút ba vạch có
 * `min-width/min-height: 44px`; vạch giữa chỉ là hình vẽ, `pointer-events` vẫn
 * thuộc về nút.
 */
.tgs-dau__nut-menu {
  display: none;
  padding: 10px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.tgs-dau__vach {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

/*
 * Nút đóng nằm trong bảng menu. Cùng nguyên tắc: ẩn ở mọi khổ, chỉ khối
 * `.tgs-co-menu` mới bật. Không có JS thì `<nav>` là một dải menu bình thường
 * và một dấu × giữa dải menu là rác.
 */
.tgs-dau__dong { display: none; }

/* ============================================================
 * 3 · FOOTER
 *
 * Khớp với cấu trúc đang có trong footer.php: một khối mời tham gia, rồi một
 * dải cuối gồm bản quyền · nơi chốn · menu chân trang.
 * ============================================================ */

.tgs-duoi {
  padding: var(--tgs-k6) 0 44px;
  background: var(--tgs-muc);
  color: var(--tgs-nga);
  border-top: 1px solid var(--tgs-nga-12);
}

/*
 * BƯỚC 23 — chữ thương hiệu ở chân trang.
 *
 * 238px là số của bản thiết kế (`_nguon/template.html` offset 305858:
 * `display:block;width:238px;height:auto`), không phải số tự đặt. Đầu trang
 * dùng 174px của chính bản thiết kế đó — hai chỗ CỐ Ý khác nhau.
 *
 * `max-width:100%` là chốt chống tràn ngang ở khổ hẹp: khổ 320 chỉ còn
 * 320 − 2×20 = 280px trong `.tgs-container`, vẫn đủ cho 238px, nhưng dòng này
 * để không phải đo lại nếu sau này ai đó nới đệm container.
 *
 * `height:auto` bắt buộc phải khai: WordPress in sẵn `width`/`height` thật của
 * file (1513×304) vào thẻ <img>, thiếu `height:auto` thì ảnh bị bóp méo.
 * Khai luôn `aspect-ratio` để trình duyệt chừa đúng chỗ trước khi ảnh tải,
 * không gây nhảy bố cục.
 */
.tgs-duoi__logo {
  margin-bottom: var(--tgs-k4);
}

.tgs-duoi__logo img {
  display: block;
  width: 238px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1513 / 304;
}

/*
 * Khối mời tham gia.
 *
 * KHÔNG dùng grid ở đây. Tôi đã thử `grid-template-columns:1.4fr 1fr` và nó
 * hỏng: footer.php đặt ba phần tử con XẾP CHỒNG (nhãn · tiêu đề · đoạn dẫn),
 * nên grid hai cột đẩy tiêu đề sang cột phải còn đoạn dẫn rơi xuống hàng hai
 * cột trái — chữ đứt mạch, đọc không ra thứ tự. Thấy trên ảnh chụp.
 *
 * Bài học nhỏ: đọc markup thật trước khi chọn dạng lưới, đừng suy từ tên class.
 */
.tgs-duoi__moi h2 { margin-top: var(--tgs-k3); max-width: 20ch; }
.tgs-duoi__moi p  { color: var(--tgs-nga-60); max-width: 46ch; }
.tgs-duoi__moi p.tgs-nhan { color: var(--tgs-son-tren-toi); }  /* 10px, nền mực — BƯỚC 19 */

.tgs-duoi__duoi-cung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tgs-k3);
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--tgs-nga-12);
}

.tgs-duoi__ban-quyen,
.tgs-duoi__noi {
  margin: 0;
  font-size: var(--tgs-cd-nhan);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /*
   * BƯỚC 17 · D9 — `--tgs-nga-40` trên nền mực cho 3,46:1, dưới ngưỡng WCAG
   * AA 4,5:1 cho chữ thường. `.55` tính ra 5,62:1. Giữ nguyên cỡ 10px và
   * giãn cách để không phá nhịp chân trang.
   */
  color: var(--tgs-nga-55);
}

.tgs-duoi__noi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgs-k1) var(--tgs-k3);
}

.tgs-nav--duoi { gap: var(--tgs-k3); }

/* ============================================================
 * 4 · LƯỚI DÙNG LẠI — đây là chỗ sửa lỗi bố cục
 * ============================================================ */

/*
 * LỖI 3 của AUDIT: `1fr 1fr` xuất hiện 13 lần, là dạng lưới phổ biến nhất.
 * Chia đôi đều làm hai bên tranh nhau, mắt không biết đọc bên nào trước.
 *
 * Thay bằng 60/40. Bên rộng dành cho phần nội dung chính — theo audit:
 * "bên có chữ dài thì rộng hơn, bên có ảnh dọc thì hẹp lại". Nên KHÔNG có
 * class nào tên là "trái/phải"; chọn --dao khi phần chính nằm bên phải.
 */
.tgs-luoi-6040 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;   /* 60 / 40 */
  gap: var(--tgs-k6);
  align-items: center;
}
.tgs-luoi-6040--dao { grid-template-columns: 1fr 1.5fr; }
.tgs-luoi-6040--day { align-items: end; }    /* căn chân, như dải "02 · Signature form" */
.tgs-luoi-6040--dau { align-items: start; }

/*
 * LỖI 2 của AUDIT: `repeat(4,1fr)` 5 lần — bốn khối đều tăm tắp.
 *
 * Giữ 4 khối nhưng phá nhịp trên lưới 12 cột: khối đầu chiếm 6 cột và cao hơn,
 * ba khối còn lại chia 6 cột kia. Dải kế tiếp cùng dạng phải dùng --doi-nhip
 * để khối to rơi xuống cuối, không lặp y nguyên hình dáng dải trước.
 */
.tgs-luoi-4 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--tgs-k4);
}
.tgs-luoi-4 > * { grid-column: span 4; }
.tgs-luoi-4 > :first-child { grid-column: span 6; }
.tgs-luoi-4 > :nth-child(2),
.tgs-luoi-4 > :nth-child(3) { grid-column: span 3; }

/* Nhịp ngược: khối to nằm cuối. Dùng cho dải 4-khối THỨ HAI trên cùng một trang. */
.tgs-luoi-4--doi-nhip > :first-child  { grid-column: span 3; }
.tgs-luoi-4--doi-nhip > :nth-child(2) { grid-column: span 3; }
.tgs-luoi-4--doi-nhip > :nth-child(3) { grid-column: span 6; }
.tgs-luoi-4--doi-nhip > :nth-child(4) { grid-column: span 12; }

/* Lưới 3 khối lệch — dùng cho footer kiểu bản gốc và các dải 3 mục. */
.tgs-luoi-3 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--tgs-k5);
  align-items: start;
}

/*
 * Lưới thẻ tự co, không ép số cột. Dùng cho danh sách dài chưa biết bao nhiêu mục.
 *
 * HAI CHỖ ĐÃ SỬA khi dựng front-page.php — đây là lần đầu class này được dùng
 * thật, và cả hai lỗi chỉ lộ ra khi có markup thật:
 *
 * 1. `minmax(280px, 1fr)` KHÔNG co được dưới 280px. Ở khổ 320px lòng container
 *    chỉ còn 272px (320 − 24 − 24) nên rãnh 280px đẩy trang tràn ngang. Đã đo:
 *    scrollWidth 344 > innerWidth 320. `min(280px, 100%)` cho rãnh co theo
 *    container khi container hẹp hơn, giữ nguyên 280px khi đủ rộng.
 *
 * 2. Class này gần như luôn đặt trên <ul>/<ol>. Trình duyệt cho danh sách
 *    `padding-inline-start: 40px` mặc định, cộng thêm vào bề ngang → đây chính
 *    là 24px tràn còn lại. Lưới thì không bao giờ cần đệm đó.
 */
.tgs-luoi-the {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--tgs-k4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Danh sách dùng làm khung bố cục, không phải danh sách để đọc: bỏ chấm đầu
 * dòng và đệm mặc định, giữ nguyên thẻ <ul>/<ol> để trình đọc màn hình vẫn
 * đếm được số mục.
 */
.tgs-ds-tron {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
 * 5 · ĐIỂM ĐÈ LÊN (overlap)
 *
 * LỖI 1 của AUDIT: 0 margin âm, 0 translateY âm trong toàn bộ mã gốc.
 *
 * Quy tắc dùng, không được phá:
 *   · mỗi trang một điểm, nhiều nhất hai;
 *   · 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 — vì lúc đó bên dưới là chữ, không còn là ảnh.
 * ============================================================ */

.tgs-de-len       { position: relative; z-index: 2; margin-top: -88px; }
.tgs-de-len--nhe  { margin-top: -48px; }
.tgs-de-len--ngang{ margin-inline-start: -34px; }

/* Chấm son đè mép ảnh — bản gốc có sẵn ở dải "01 · Brand beginning". */
.tgs-cham-son {
  position: absolute;
  left: -34px;
  bottom: 56px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--tgs-son);
}

/* ============================================================
 * 6 · MÀN HÌNH NHỎ
 *
 * Không có trong bản gốc. Thứ tự: hạ đệm trước, rồi mới xếp chồng cột.
 * ============================================================ */

/* Máy tính nhỏ và tablet ngang: hạ đệm, thu khoảng cách cột. */
@media (max-width: 1180px) {
  :root { --tgs-le: 40px; }

  .tgs-luoi-6040 { gap: var(--tgs-k5); }
  .tgs-luoi-3    { gap: var(--tgs-k4); }
  .tgs-nav       { gap: var(--tgs-k2); }
}

/* Tablet dọc: 4 khối về 2 hàng đều, 3 khối về 2 cột. */
@media (max-width: 960px) {
  .tgs-luoi-4 > *,
  .tgs-luoi-4 > :first-child,
  .tgs-luoi-4 > :nth-child(2),
  .tgs-luoi-4 > :nth-child(3),
  .tgs-luoi-4--doi-nhip > *,
  .tgs-luoi-4--doi-nhip > :first-child,
  .tgs-luoi-4--doi-nhip > :nth-child(2),
  .tgs-luoi-4--doi-nhip > :nth-child(3),
  .tgs-luoi-4--doi-nhip > :nth-child(4) { grid-column: span 6; }

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

}

/* Điện thoại: mọi lưới về một cột, TẮT overlap. */
@media (max-width: 760px) {
  :root {
    --tgs-le: 24px;
    --tgs-k7: 88px;   /* 140px đệm dọc là quá thưa trên màn hình hẹp */
    --tgs-k6: 64px;
  }

  .tgs-luoi-6040,
  .tgs-luoi-6040--dao { grid-template-columns: 1fr; gap: var(--tgs-k4); }

  .tgs-luoi-4,
  .tgs-luoi-4--doi-nhip { grid-template-columns: 1fr; gap: var(--tgs-k3); }

  /*
   * PHẢI liệt kê ĐỦ selector như khối 960px, không được rút gọn thành `> *`.
   *
   * Lý do, đo được chứ không suy: `.tgs-luoi-4 > :first-child` có độ ưu tiên
   * (0,2,1), cao hơn `.tgs-luoi-4 > *` (0,1,0). Hai khối @media này cùng đúng
   * ở khổ 320px, nên `> *` KHÔNG đè được `span 6` của khối 960px — chỉ thẻ
   * thứ tư (thẻ duy nhất khớp mỗi `> *`) về đúng một cột.
   *
   * Hậu quả trước khi sửa, đo ở khổ 320: lưới sinh 6 cột ma
   * `252px 0 0 0 0 0`, ba thẻ đầu rộng 257px (252 + 5 khe 1px) còn thẻ thứ tư
   * 252px. Trang vẫn xếp chồng nên nhìn thì "ổn", nhưng đó là ăn may chứ
   * không phải ý đồ. Sau khi sửa cả bốn thẻ đều 257px.
   */
  .tgs-luoi-4 > *,
  .tgs-luoi-4 > :first-child,
  .tgs-luoi-4 > :nth-child(2),
  .tgs-luoi-4 > :nth-child(3),
  .tgs-luoi-4--doi-nhip > *,
  .tgs-luoi-4--doi-nhip > :first-child,
  .tgs-luoi-4--doi-nhip > :nth-child(2),
  .tgs-luoi-4--doi-nhip > :nth-child(3),
  .tgs-luoi-4--doi-nhip > :nth-child(4) { grid-column: 1 / -1; }

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

  /*
   * Overlap tắt ở đây. Khi cột đã xếp chồng thì thứ nằm ngay trên một khối
   * không còn là ảnh nữa mà là chữ của khối trước — đè vào là mất chữ.
   */
  .tgs-de-len,
  .tgs-de-len--nhe    { margin-top: 0; }
  .tgs-de-len--ngang  { margin-inline-start: 0; }
  .tgs-cham-son       { left: auto; right: var(--tgs-k2); bottom: -28px; width: 48px; height: 48px; }

  /*
   * ĐƯỜNG LUI KHI KHÔNG CÓ JS — giữ nguyên từ trước bước 21.
   *
   * Menu chính vẫn HIỆN, chỉ xuống dòng và co lại. Thà chật còn hơn mất điều
   * hướng. Khối `.tgs-co-menu` bên dưới đè lên khối này khi JS có thật.
   */
  .tgs-dau__trong { flex-wrap: wrap; gap: var(--tgs-k2); }
  .tgs-nav        { gap: var(--tgs-k2); row-gap: var(--tgs-k1); }
  .tgs-nav a      { font-size: 10px; letter-spacing: 0.12em; }

  .tgs-duoi__duoi-cung { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
 * 6b · BẢNG MENU DI ĐỘNG — BƯỚC 21, gỡ B-16-1
 *
 * ĐIỀU KIỆN BẬT: class `.tgs-co-menu` trên <html>, do `header.php` gắn CHỈ KHI
 * `assets/js/menu-di-dong.js` tồn tại. Không có class → mọi luật dưới đây chết,
 * đầu trang trở lại đúng dạng cũ. Đây là lý do không luật nào ở đây được viết
 * mà thiếu tiền tố `.tgs-co-menu`.
 *
 * VÌ SAO 760px: đó là breakpoint SẴN CÓ của theme (khối phần 6 ngay trên, và
 * `--tgs-bu-neo` cũng đổi ở đó). Bản nhiệm vụ cũng chốt ≤ 760px.
 *
 * VÌ SAO ĐÓNG BẰNG `display:none` CHỨ KHÔNG PHẢI `opacity:0` HAY
 * `visibility:hidden` + `transform`: `display:none` là cách duy nhất tự động
 * rút cả cây con khỏi chuỗi tab VÀ khỏi cây trợ năng. Mọi cách khác đòi phải
 * tự quản `tabindex="-1"` hoặc `inert` cho từng liên kết — thêm một chỗ để
 * quên. Giá phải trả là không có hiệu ứng mở; chấp nhận, vì đây là điều hướng
 * chứ không phải trang trí.
 * ============================================================ */

@media (max-width: 760px) {

  /* Nút ba vạch: 44×44 là sàn WCAG 2.5.5 (AAA) và cũng là số của Apple/Google. */
  .tgs-co-menu .tgs-dau__nut-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }

  /*
   * Đầu trang không còn phải chứa 8 mục menu → không cần xuống dòng nữa.
   * `flex-wrap: nowrap` trả lại một hàng: tên thương hiệu · nút.
   */
  .tgs-co-menu .tgs-dau__trong { flex-wrap: nowrap; }

  /* ---- Tấm phủ ---- */
  .tgs-co-menu .tgs-dau__nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;               /* trên `.tgs-dau` (80) — tấm phủ che cả đầu trang */
    /*
     * NỀN NGÀ ĐẶC, KHÔNG nền mờ trong suốt. Bản nhiệm vụ chốt như vậy và lý do
     * đo được: chữ mực trên nền ngà đặc cho 17,28:1; nếu để trong suốt thì tỉ
     * số phụ thuộc vào ảnh hero phía sau, tức không bảo đảm được ngưỡng nào.
     */
    background: var(--tgs-nga);
    color: var(--tgs-muc);
    padding: var(--tgs-k6) var(--tgs-le) var(--tgs-k5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* JS gắn/gỡ class này. Chỉ đúng một class quyết định đóng hay mở. */
  .tgs-co-menu .tgs-dau__nav.tgs-nav-mo { display: block; }

  /*
   * Thanh quản trị WordPress đè lên nút đóng — ĐÃ ĐO, không phải đề phòng.
   *
   * Thanh admin cao 46px, `position: fixed`, `z-index: 99999` (cao hơn 90 của
   * tấm phủ, không giành lại được và cũng không nên giành). Tấm phủ bắt đầu ở
   * y = 0, nút đóng nằm ở 24–68px → chồng nhau đúng **22px**, tức mất nửa đích
   * bấm 44px của nút đóng.
   *
   * Chỉ xảy ra ở 601–760px: dưới 601px WordPress đổi thanh admin sang
   * `position: absolute` (đo được: 320 và 600 đều `absolute`, chồng 0px) nên nó
   * cuộn đi cùng trang. 601 là số của WordPress, không phải mốc của theme.
   *
   * Người dùng cuối không đăng nhập nên không gặp; khách thì luôn nhìn site
   * trong trạng thái đã đăng nhập — cùng lý lẽ với `body.admin-bar .tgs-dau`
   * ở mục 2 của file này.
   */
  @media screen and (min-width: 601px) {
    .tgs-co-menu body.admin-bar .tgs-dau__nav { top: 46px; }
  }

  /*
   * Dưới 601px thanh admin là `absolute`, tức nó CUỘN ĐI cùng trang — đẩy cả
   * tấm phủ xuống 46px là sai, cuộn một cái là hở một dải trang ở đỉnh.
   *
   * Nhưng ở vị trí cuộn 0 nó vẫn nằm đè lên nút đóng: đo ở 320 thì
   * `elementFromPoint` tại mép trên nút trả về `ab-item` của thanh admin, chồng
   * đúng **22px** trên 44px. Nửa đích bấm bị ăn mất.
   *
   * Nên chỉ hạ RIÊNG NÚT ĐÓNG xuống 24 + 46 = 70px. Khi trang đã cuộn thì dấu ×
   * nằm thấp hơn một chút — không đẹp bằng, nhưng luôn bấm được, và tấm phủ có
   * 96px đệm trên nên không đụng vào mục menu đầu tiên.
   */
  @media screen and (max-width: 600px) {
    .tgs-co-menu body.admin-bar .tgs-dau__dong { top: 70px; }
  }

  /* Nút đóng — cũng 44×44, neo góc trên phải trong tấm phủ. */
  .tgs-co-menu .tgs-dau__dong {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--tgs-k3);
    right: var(--tgs-le);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--tgs-muc);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
  }

  /* ---- Danh sách bên trong tấm phủ ---- */
  .tgs-co-menu .tgs-dau__nav .tgs-nav {
    display: block;
    /* Bỏ `gap`/`row-gap` của khối 760px: ở dạng cột, khoảng cách do đệm của
       chính liên kết tạo ra, cộng dồn hai nguồn thì khe rộng gấp đôi. */
    gap: 0;
    row-gap: 0;
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav > li {
    border-bottom: 1px solid rgba(11, 11, 11, 0.12);
  }
  .tgs-co-menu .tgs-dau__nav .tgs-nav > li:last-child { border-bottom: 0; }

  /*
   * Đích bấm: `display:block` cho liên kết chiếm hết bề ngang; đệm 13px trên
   * dưới + dòng chữ 18px = 44px. Không dùng `min-height` một mình vì
   * `display:inline-block` bỏ qua nó trong vài trình duyệt cũ.
   */
  .tgs-co-menu .tgs-dau__nav .tgs-nav a {
    display: block;
    min-height: 44px;
    padding: 13px 0;
    font-size: 13px;
    letter-spacing: 0.14em;
    line-height: 18px;
    color: var(--tgs-muc);
    border-bottom: 0;           /* kẻ chân đã chuyển lên <li> */
  }

  .tgs-co-menu .tgs-dau__nav .tgs-nav a:hover,
  .tgs-co-menu .tgs-dau__nav .tgs-nav a:focus-visible { color: var(--tgs-son-tren-sang); }

  /*
   * Mục đang xem. Trên nền ngà thì chữ ngà của luật gốc là vô hình — phải đè.
   * Dùng `--tgs-son-tren-sang` (#BA321D, 5,18:1 trên ngà) chứ không dùng
   * `--tgs-son` (#D83A22, 4,05:1) vì chữ ở đây 13px, dưới ngưỡng chữ lớn.
   * Đây đúng là luật bước 19 đã chốt.
   */
  .tgs-co-menu .tgs-dau__nav .tgs-nav .current-menu-item > a,
  .tgs-co-menu .tgs-dau__nav .tgs-nav .current_page_item > a,
  .tgs-co-menu .tgs-dau__nav .tgs-nav .current-menu-ancestor > a,
  .tgs-co-menu .tgs-dau__nav .tgs-nav .current_page_parent > a {
    color: var(--tgs-son-tren-sang);
  }

  /* Khoá cuộn nền khi tấm phủ mở, JS gắn lên <html>. */
  .tgs-khoa-cuon, .tgs-khoa-cuon body { overflow: hidden; }

  /*
   * ĐÂY LÀ CÁI BẪY LỚN NHẤT CỦA VIỆC 21 — đọc trước khi sửa gì ở đây.
   *
   * `.tgs-dau` khai `backdrop-filter: blur(14px)`. Theo CSS Filter Effects,
   * một phần tử có `backdrop-filter` khác `none` trở thành KHỐI CHỨA cho mọi
   * con `position: fixed`. Tấm phủ `<nav>` là con của `.tgs-dau`, nên
   * `inset: 0` của nó sẽ tính theo ĐẦU TRANG CAO 80px chứ không theo màn hình
   * — bảng menu co lại thành một dải 80px. Không phải suy đoán: đã đo, xem
   * bảng "TRƯỚC/SAU" trong PROJECT_STATE mục việc 21.
   *
   * `.tgs-dau--trong` khai `blur(0)` — VẪN không phải `none`, vẫn tạo khối
   * chứa. Đổi 14px thành 0 không cứu được gì.
   *
   * Cách chữa: gỡ hẳn `backdrop-filter` TRONG LÚC tấm phủ mở. An toàn về mặt
   * nhìn vì đúng lúc đó tấm phủ đang che kín đầu trang, không ai thấy lớp mờ.
   * `transition: none` là bắt buộc: `.tgs-dau` có `transition: backdrop-filter
   * 0.6s`, để nguyên thì có một khoảng 0,6 giây thuộc tính chưa về `none` và
   * khối chứa vẫn còn — tấm phủ nhấp nháy sai kích thước rồi mới đúng.
   */
  .tgs-khoa-cuon .tgs-dau {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }
}

/*
 * `--tgs-bu-neo` PHẢI ĐO LẠI khi đầu trang đổi chiều cao — chú thích ở mục 2
 * của file này nói rõ vậy, và bước 21 vừa làm đầu trang thấp đi hẳn.
 *
 * Đo trên trang thật sau khi sửa: `.tgs-dau` cao 80px ở CẢ 320, 375 và 430 khi
 * `.tgs-co-menu` bật (một hàng: tên 24px + nút 44px + đệm 18×2). Ba mốc cũ
 * 160/196/232px được tính cho menu xuống 2–4 dòng nên nay thừa 80–152px —
 * để nguyên thì mọi cú nhảy tới neo dừng quá sớm, chữ tụt xuống giữa màn hình.
 *
 * 90px = 80 + 10px thở, đúng quy ước của bảng gốc.
 *
 * CHỈ đè trong nhánh `.tgs-co-menu`. Không có JS thì đầu trang vẫn cao như cũ
 * nên ba mốc cũ vẫn là số đúng cho trường hợp đó.
 */
@media (max-width: 760px) {
  html.tgs-co-menu { --tgs-bu-neo: 90px; }
}

/* ============================================================
 * 7 · IN GIẤY
 * Người ta có in trang sản phẩm và trang liên hệ. Bỏ header dính, trả nền trắng.
 * ============================================================ */

@media print {
  .tgs-dau { position: static; background: none; backdrop-filter: none; }
  .tgs-duoi__moi,
  .tgs-dau__nut-menu { display: none; }
  body { background: #fff; color: #000; }
}