/*
 * MENU NHIỀU CẤP 2026 — bảng con (dropdown) cho menu `chinh` ở đầu trang.
 *
 * PHẠM VI: mọi selector đều bắt đầu bằng `.tgs-dau__nav .tgs-nav`, không phải
 * `.tgs-nav` trần. Lý do đo được, không phải phòng xa suông: `layout.css` còn
 * giữ luật `.tgs-nav--duoi { gap: var(--tgs-k3) }` cho menu chân trang, tức
 * `tgs-nav` là class DÙNG CHUNG chứ không riêng đầu trang. `footer.php` bản
 * 13/09 đã bỏ menu đó (nay là `.tgs-chan__ds`) nên hiện chưa rò, nhưng neo vào
 * `.tgs-dau__nav` thì mai kia ai gắn lại `wp_nav_menu` xuống chân trang cũng
 * không kéo theo cả bảng dropdown nền mực.
 *
 * KHÔNG KHAI LẠI KIỂU CHỮ CỦA MỤC CẤP 1. Bản thiết kế đòi Noto Sans 11px /
 * weight 400 / letter-spacing .16em / UPPERCASE / rgba(243,240,232,.6), hover
 * #F3F0E8, transition màu .35s ease. ĐÃ ĐỐI CHIẾU TỪNG GIÁ TRỊ với mã đang
 * chạy — tất cả đã có sẵn và đã đúng:
 *   layout.css  `.tgs-nav a`        font-size: var(--tgs-cd-nav)      = 11px
 *                                   letter-spacing: var(--tgs-gian-nav) = .16em
 *                                   text-transform: uppercase
 *                                   color: var(--tgs-nga-60)  = rgba(243,240,232,.60)
 *                                   transition: color var(--tgs-vua) ease = .35s
 *   layout.css  `.tgs-nav a:hover`  color: var(--tgs-nga)     = #F3F0E8
 *   tokens.css  `--tgs-chu-than`    'Noto Sans', system-ui, … (kế thừa từ body)
 * Khai lại là dựng NGUỒN SỰ THẬT THỨ HAI cho cùng một con số: lần sau ai đổi
 * token thì menu lệch khỏi phần còn lại của site mà không ai biết. File này
 * CHỈ thêm phần chưa từng tồn tại — bảng menu con.
 *
 * KHÔNG ĐỤNG `.tgs-ngonngu`. Bốn nút EN/FR/JA/VI là `<li class="tgs-ngonngu">`
 * do `tgs_them_ngon_ngu_vao_menu()` (inc/da-ngon-ngu.php) chèn vào cuối CÙNG
 * MỘT `<ul class="tgs-nav">`. Nó không mang class `menu-item-has-children` và
 * không chứa `.sub-menu`, mà mọi luật dưới đây đều đòi một trong hai — nên nó
 * nằm ngoài tầm với của file này THEO CẤU TRÚC, không phải nhờ một luật
 * "trừ ra" có thể bị quên khi sửa selector.
 */

/* ============================================================
 * 1 · CHUNG CHO MỌI KHỔ
 * ============================================================ */

.tgs-dau__nav .tgs-nav .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * ĐÓNG BẰNG `display:none`, không phải `opacity:0` hay `visibility:hidden`.
 * Cùng lý lẽ đã ghi trong `layout.css` mục 6b: chỉ `display:none` mới tự 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 bắt phải tự
 * quản `tabindex="-1"` cho từng liên kết cấp 2 và cấp 3 — thêm một chỗ để
 * quên. Giá phải trả là không có hiệu ứng bung; chấp nhận, đây là điều hướng
 * chứ không phải trang trí.
 */
.tgs-dau__nav .tgs-nav .menu-item-has-children > .sub-menu { display: none; }

/* ============================================================
 * 2 · MÁY TÍNH (≥ 861px) — BẢNG NỔI
 * ============================================================ */

@media (min-width: 861px) {

  .tgs-dau__nav .tgs-nav .menu-item-has-children { position: relative; }

  .tgs-dau__nav .tgs-nav .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;      /* dính sát đáy mục cha: KHÔNG chừa khe cho chuột rơi ra */
    left: 0;
    min-width: 224px;
    /*
     * Đệm dọc 8px là "khe đệm" mà bản thiết kế đòi. Cố ý đặt Ở TRONG bảng chứ
     * không thêm `padding-bottom` cho mục cha: `.tgs-nav a` mang
     * `border-bottom` làm gạch chân mục đang xem, nới đệm đáy của nó là dời
     * gạch chân đó xuống — đổi diện mạo của thanh menu ở MỌI trang chỉ để lấy
     * vài pixel vùng rê chuột. Khoảng ân hạn thật do JS lo (trễ đóng 180ms).
     */
    padding-block: 8px;
    background: rgba(11, 11, 11, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(243, 240, 232, 0.14);
    border-radius: 0;
    /*
     * `.tgs-dau` có `backdrop-filter` nên nó TẠO NGỮ CẢNH XẾP LỚP riêng (đúng
     * cái bẫy `layout.css` mục 6b đã ghi cho tấm phủ di động). Hệ quả: z-index
     * ở đây chỉ so bì BÊN TRONG đầu trang, không so với phần còn lại của
     * trang — và không cần, vì cả đầu trang đã ở z-index 80, trên mọi nội dung.
     * 90 để chắc chắn bảng nằm trên mọi anh em trong đầu trang.
     */
    z-index: 90;
  }

  /*
   * MỞ = `:hover` HOẶC `:focus-within` HOẶC `.dang-mo`. Ba thứ này là phép
   * HỢP có chủ ý, không phải ba cách làm cùng một việc:
   *   · `:hover` / `:focus-within` là ĐƯỜNG LUI KHI JS CHẾT — chặn JS, lỗi JS,
   *     hay xoá nhầm file thì menu con vẫn mở được bằng chuột và bằng Tab.
   *     Đúng nguyên tắc "mặc định phải là trạng thái dùng được" của cả theme.
   *   · `.dang-mo` do JS gắn và GỠ CHẬM 180ms. Chuột rời mục cha thì `:hover`
   *     tắt tức thì, nhưng `.dang-mo` còn giữ bảng mở thêm 180ms — đó chính là
   *     khoảng ân hạn để chuột đi chéo qua khe mà bảng không sập.
   * Chỉ dùng `:hover` thì độ trễ của JS vô nghĩa; chỉ dùng `.dang-mo` thì JS
   * hỏng là mất luôn toàn bộ menu con.
   */
  .tgs-dau__nav .tgs-nav .menu-item-has-children:hover > .sub-menu,
  .tgs-dau__nav .tgs-nav .menu-item-has-children:focus-within > .sub-menu,
  .tgs-dau__nav .tgs-nav .menu-item-has-children.dang-mo > .sub-menu { display: block; }

  /*
   * Cấp 3 mở SANG BÊN PHẢI mục cha cấp 2, không đổ xuống dưới.
   * `margin-left: -1px` cho hai đường viền 1px chồng lên nhau: thiếu dòng này
   * hai bảng hở một khe 2px, chuột đi ngang qua khe đó là rời khỏi `:hover`.
   */
  .tgs-dau__nav .tgs-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: -1px;
  }

  .tgs-dau__nav .tgs-nav .sub-menu a {
    display: block;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 300;
    /*
     * Bỏ UPPERCASE và hạ giãn cách: đây là tên sản phẩm/danh mục đọc thành
     * câu, không phải nhãn điều hướng 11px. Chữ hoa toàn phần ở cỡ 13.5px
     * weight 300 làm mất đường viền chữ, đọc chậm hẳn.
     */
    text-transform: none;
    letter-spacing: 0.04em;
    line-height: 1.35;
    white-space: nowrap;
    /*
     * Bản thiết kế không ghi màu chữ NGHỈ cho mục trong bảng, chỉ ghi màu
     * hover. Chọn `--tgs-nga-72` — sắc độ đã có sẵn trong `tokens.css`, cho
     * 9,06:1 trên nền `rgba(11,11,11,.96)`, và sáng hơn `--tgs-nga-60` của
     * cấp 1 một bậc để bảng đang mở đọc rõ hơn thanh menu nền.
     */
    color: var(--tgs-nga-72);
    border-bottom: 0;   /* gạch chân của `.tgs-nav a` không thuộc về bảng con */
    transition: color var(--tgs-vua) ease, background-color var(--tgs-vua) ease;
  }

  /*
   * `#F13708` là số NGUYÊN VĂN của bản thiết kế, KHÔNG phải `--tgs-son`
   * (#D83A22) của theme. Cố ý giữ đúng bản thiết kế và đã kiểm được: #F13708
   * trên nền rgba(11,11,11,.96) cho 4,96:1 — qua ngưỡng WCAG AA 4,5:1 cho chữ
   * 13.5px. (`--tgs-son` chỉ đạt 4,26:1 trên nền mực, tức KHÔNG đạt — xem bảng
   * trong `tokens.css` bước 19. Đây là lần hiếm hoi màu của bản thiết kế đúng
   * hơn token của theme, nên không "sửa cho về token".)
   */
  .tgs-dau__nav .tgs-nav .sub-menu a:hover,
  .tgs-dau__nav .tgs-nav .sub-menu a:focus-visible {
    background: rgba(243, 240, 232, 0.06);
    color: #F13708;
  }
}

/* ============================================================
 * 3 · KHỔ HẸP (≤ 860px) — KHỐI THỤT LỀ, KHÔNG PHẢI BẢNG NỔI
 *
 * VÌ SAO 860 CHỨ KHÔNG PHẢI 760 — ĐỌC TRƯỚC KHI SỬA:
 * bản nhiệm vụ chốt 860px, nhưng mốc gãy THẬT của theme là 760px: tấm phủ
 * `.tgs-co-menu .tgs-dau__nav { position: fixed }` trong `layout.css` mục 6b
 * chỉ bật ở `@media (max-width: 760px)`. Nghĩa là dải 761–860px KHÔNG có tấm
 * phủ — ở đó `<nav>` vẫn là một dải menu NGANG, và bấm mục cha sẽ bung một
 * khối thụt lề ngay trong dải đó, đẩy đầu trang cao lên. Chấp nhận được (dải
 * chỉ rộng 100px, và chỉ khi người dùng chủ động bấm), nhưng nếu sau này thống
 * nhất một mốc thì đổi CẢ 860 ở đây, 860 trong `menu-2026.js`, và 760 trong
 * `layout.css` + `menu-di-dong.js` cho khớp.
 * ============================================================ */

@media (max-width: 860px) {

  /*
   * `<li>` thành khối: liên kết một dòng, bảng con nằm NGAY DƯỚI nó.
   * Đặt trên chính `<li>` chứ KHÔNG đụng `.tgs-nav`: `<ul class="tgs-nav">`
   * còn chứa `<li class="tgs-ngonngu">` ở cuối, đổi `display`/`align-items`
   * của cả `<ul>` là dời chỗ bốn nút ngôn ngữ — điều bản nhiệm vụ cấm.
   */
  .tgs-dau__nav .tgs-nav li.menu-item-has-children { display: block; }

  /*
   * Bảng con trở lại dòng chảy: bỏ `position`, nền, viền, blur.
   *
   * CỐ Ý KHÔNG KHAI MÀU CHỮ Ở ĐÂY. Hai dải có nền NGƯỢC NHAU:
   *   · ≤760px  tấm phủ nền NGÀ → `layout.css` đã cho
   *             `.tgs-co-menu .tgs-dau__nav .tgs-nav a { color: var(--tgs-muc) }`;
   *   · 761–860px thanh menu vẫn trên nền MỰC → `.tgs-nav a { color: var(--tgs-nga-60) }`.
   * Khai một màu cứng là sai ở đúng một trong hai dải. Để trống thì mỗi dải tự
   * lấy màu của luật đang có, và cả hai đều đọc được.
   */
  .tgs-dau__nav .tgs-nav .menu-item-has-children > .sub-menu {
    position: static;
    min-width: 0;
    padding: 0 0 0 20px;   /* thụt một bậc — đây là cấp 2 */
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
  }

  /* Cấp 3 thụt thêm một bậc nữa. */
  .tgs-dau__nav .tgs-nav .sub-menu .sub-menu { padding-left: 20px; }

  /*
   * CHỈ `.dang-mo` mới mở. Không `:hover` (ngón tay không có trạng thái "rê
   * qua"; trên iOS `:hover` dính lại sau cú chạm đầu tiên), không
   * `:focus-within` (sẽ bung menu ngay khi Tab vừa tới mục cha).
   */
  .tgs-dau__nav .tgs-nav .menu-item-has-children.dang-mo > .sub-menu { display: block; }

  /*
   * Chỉ đổi hai thứ cho mục trong bảng con: bỏ chữ hoa và cho xuống dòng.
   * KHÔNG khai `font-size` — ở ≤760px luật `.tgs-co-menu .tgs-dau__nav .tgs-nav a`
   * có độ ưu tiên (0,4,1), cao hơn (0,3,1) của luật này, nên một khai báo cỡ
   * chữ ở đây sẽ chết im lặng trong đúng dải hay dùng nhất. Cỡ 13px của tấm
   * phủ vốn đã hợp cho mục con.
   */
  .tgs-dau__nav .tgs-nav .sub-menu a {
    text-transform: none;
    letter-spacing: 0.10em;
    white-space: normal;
  }

  /*
   * Dấu +/− cho mục cha. KHÔNG phải trang trí thêm: ở khổ hẹp mục cha không
   * điều hướng nữa mà chỉ đóng/mở, nên không có dấu này thì cú chạm vào "SHOP"
   * trông hệt như một liên kết hỏng. `aria-hidden` không cần — nội dung
   * `content` của pseudo-element không vào cây trợ năng ở các trình duyệt hiện
   * hành, và trạng thái thật đã nằm ở `aria-expanded` do JS đặt.
   */
  .tgs-dau__nav .tgs-nav .menu-item-has-children > a::after {
    content: "+";
    margin-left: 8px;
    font-weight: 400;
  }

  .tgs-dau__nav .tgs-nav .menu-item-has-children.dang-mo > a::after {
    content: "\2212";   /* dấu trừ thật (U+2212), không phải gạch nối */
  }
}