/* TTHN4.1 css — giao diện Thaco Tải Hà Nội (.tthn-*). */
/* ==========================================================================
   Thaco Tải Hà Nội — skin CSS của child theme tungleads-theme-thacotaihanoi (parent: tungleads-theme)
   CSS tĩnh, enqueue sau bundle của parent. Không build step.
   Font: Be Vietnam Pro (hỗ trợ tiếng Việt tốt)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* TTHN4.2 — bảng màu theo demo: navy #102d56 + vàng #f2bd3d (trước đây: vàng nghệ + cam đất). */
  --tthn-bg: #ffffff;
  --tthn-surface: #f7f8fa;
  --tthn-text: #172b4d;
  --tthn-muted: #5a6a80;
  --tthn-line: #e4e9f0;

  --tthn-navy: #102d56;           /* nền header/footer/khối liên hệ */
  /* TTHN4.2 (2026-10-09) — màu nhấn chính = XANH LOGO THACO TRUCK (#00569a). Vàng chỉ còn dùng nơi cần tương phản
     trên nền tối (hero, ô tìm xe, khối liên hệ, chip trên thẻ danh mục): xem `--tthn-gold` + `skin-demo.css`. */
  --tthn-primary: #00569a;        /* xanh logo - nút, tab, icon, đường kẻ nhấn */
  --tthn-primary-dark: #00427a;   /* xanh đậm - hover + chữ/link trên nền sáng */
  --tthn-on-primary: #ffffff;     /* chữ đặt trên nền xanh */
  --tthn-primary-tint: #e6f0f9;   /* nền nhạt cho icon/chip xanh */
  --tthn-gold: #f2bd3d;           /* vàng - CHỈ dùng trên nền tối */
  --tthn-on-gold: #102d56;        /* chữ navy đặt trên nền vàng */
  --tthn-accent: #102d56;         /* nhấn CTA = navy */
  --tthn-sale: #e30613;           /* đỏ tươi - badge giảm giá trên ảnh */
  --tthn-accent-dark: #0b2850;
  --tthn-star: #e2a53a;           /* vàng sao đánh giá — dùng CHUNG cho mọi chỗ có sao (xem rule dưới) */

  --tthn-radius: 5px;
  --tthn-radius-sm: 5px;
  --tthn-shadow: 0 8px 20px rgba(23, 43, 77, 0.06);
  --tthn-shadow-lg: 0 16px 40px rgba(23, 43, 77, 0.14);
  --tthn-container: 1440px;
  --tthn-font: Arial, Helvetica, sans-serif;
}

/* ---------- Reset nhẹ ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body.tthn {
  margin: 0;
  font-family: var(--tthn-font);
  color: var(--tthn-text);
  background: var(--tthn-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tthn img { max-width: 100%; display: block; }
.tthn a { color: inherit; text-decoration: none; }
.tthn ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Màu icon sao (rating) — ĐỒNG BỘ toàn trang ----------
   2026-09-17 (yêu cầu Tùng): lấy ĐÚNG màu sao của trang chi tiết SP dùng chung cho MỌI chỗ có sao —
   nhất là **thẻ sản phẩm trong vòng lặp** (shop · danh mục · trang chủ · tìm kiếm · dải “Sản phẩm
   tương tự”). Đo TRƯỚC (trang danh mục `/danh-muc/cua-nhua-abs-han-quoc/`): sao trên thẻ card ăn màu
   CHỮ `--tthn-text` = `rgb(38,34,30)` vì không rule nào đặt màu ⇒ lệch hẳn với `rgb(226,165,58)` ở
   trang chi tiết.
   Sao RỖNG vẫn `#cfc8d8` — WooCommerce khai TRỰC TIẾP trong `.star-rating::before` (cố ý: rỗng nhạt
   để sao đầy nổi bật); rule dưới chỉ đặt `color` cho phần sao ĐẦY mà `.star-rating span::before` kế thừa. */
body.tthn .star-rating { color: var(--tthn-star); }

.tthn-container {
  width: 100%;
  max-width: var(--tthn-container);
  margin: 0 auto;
  padding: 0 20px;
}
/* Mobile (≤768px): lề 2 bên container 20px → 15px (yêu cầu Tùng 2026-10-11; trước đó 10px) */
@media (max-width: 768px) {
  .tthn-container { padding: 0 15px; }
}

/* ---------- Buttons ---------- */
.tthn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--tthn-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.tthn-btn:hover { transform: translateY(-1px); }
.tthn-btn-primary { background: var(--tthn-primary); color: var(--tthn-on-primary); }
.tthn-btn-primary:hover { background: var(--tthn-primary-dark); }
/* 2026-10-10 (Tùng): nút accent = VÀNG nổi (chữ navy đạt ~8:1 trên vàng) + bóng vàng; hover vàng đậm hơn */
.tthn-btn-accent { background: var(--tthn-gold); color: var(--tthn-on-gold); font-weight: 800; box-shadow: 0 6px 16px rgba(242, 189, 61, .45); }
.tthn-btn-accent:hover { background: #e6aa1f; }
.tthn-btn-ghost { background: transparent; color: var(--tthn-text); border-color: var(--tthn-line); }
.tthn-btn-ghost:hover { border-color: var(--tthn-primary-dark); color: var(--tthn-primary-dark); }

/* TTHN4.1 — mobile (yêu cầu Tùng 2026-09-15): nút gọn hơn `12px 22px` → `10px 14px`.
   Cao 50 → 46px (vẫn ≥ 44px tap target), mỗi nút hẹp lại 16px. Desktop giữ nguyên. */
@media (max-width: 768px) {
  .tthn-btn { padding: 10px 14px; }
}

/* Link có class nút riêng phải thắng ".tthn a { color: inherit }" (nếu không sẽ ăn màu chữ của khối cha) */
.tthn a.tthn-btn-primary { color: var(--tthn-on-primary); }
.tthn a.tthn-btn-accent { color: var(--tthn-on-gold); }
.tthn a.tthn-buynow,
.tthn a.tthn-contact-btn { color: #fff; }
.tthn a.tthn-side-support-tel { color: var(--tthn-accent); }

/* Chỉ báo focus cho bàn phím (chỉ hiện khi Tab, KHÔNG hiện khi bấm chuột) — ring thương hiệu
   2px vàng thay cho viền `auto 1px` mặc định của trình duyệt (mờ, khó thấy trên nền vàng). */
.tthn a:focus-visible,
.tthn button:focus-visible { outline: 2px solid var(--tthn-primary); outline-offset: 2px; }

/* ---------- Topbar ---------- */
.tthn-topbar {
  background: var(--tthn-primary);
  color: var(--tthn-on-primary);
  font-size: 12px;
}
.tthn-topbar .tthn-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  gap: 16px;
}
.tthn-topbar ul { display: flex; gap: 18px; flex-wrap: wrap; }
/* Hover: TRƯỚC là `#fff` — hợp với nền vàng đậm cũ, nhưng trên nền `--tthn-primary`
   (#f2bd3d) thì trắng/vàng chỉ đạt tương phản ~1.75:1 (gần như mất chữ). Dùng cam đất + gạch chân. */
.tthn-topbar a:hover { color: var(--tthn-accent); text-decoration: underline; }
.tthn-topbar-right { display: flex; gap: 18px; align-items: center; }

/* ---------- Header ---------- */
.tthn-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--tthn-line);
}
.tthn-header .tthn-container {
  display: flex;
  align-items: center;
  min-height: 76px;
}
.tthn-logo { display: flex; align-items: center; gap: 12px; }
.tthn-logo-mark {
  width: 44px; height: 44px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--tthn-primary), var(--tthn-accent));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 20px;
}
.tthn-logo-text b { display: block; font-size: 19px; font-weight: 800; letter-spacing: .3px; }
.tthn-logo-text span { display: block; font-size: 12px; color: var(--tthn-muted); text-transform: uppercase; letter-spacing: 2px; }

.tthn-nav { margin-left: auto; padding-right: 20px; }
.tthn-nav ul { display: flex; gap: 26px; }
.tthn-nav a {
  font-weight: 600;
  font-size: 15px;
  padding: 8px 0;
  position: relative;
  color: var(--tthn-text);
}
.tthn-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--tthn-primary);
  transition: width .2s ease;
}
.tthn-nav a:hover::after, .tthn-nav a.is-active::after { width: 100%; }
.tthn-nav a.is-active { color: var(--tthn-primary-dark); }

/* ---------- TTHN1.4 — Menu chính: dropdown cấp 2 + mega 3 cấp (TTHN1.4b) ----------
   Mở bằng `:hover` (trễ 120ms — hover intent) hoặc `:has(:focus-visible)` khi dùng Tab.
   KHÔNG dùng `:focus-within` — xem giải thích ở rule mở dropdown bên dưới. */
.tthn-nav li { position: relative; }
.tthn-nav .menu-item-has-children > a { padding-right: 15px; }
/* Mũi tên chi dấu có menu con — dùng `::before` vì `::after` đã là gạch chân của cấp 1 */
.tthn-nav .menu-item-has-children > a::before {
  content: ""; position: absolute; right: 1px; top: 50%;
  width: 5px; height: 5px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.tthn-nav li:hover > a::before,
.tthn-nav li:has(:focus-visible) > a::before { transform: rotate(-135deg); margin-top: -1px; }
.tthn-nav .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 250px; margin: 0; padding: 8px;
  display: block; visibility: hidden; opacity: 0; transform: translateY(6px);
  /* Panel đang đóng KHÔNG nhận chuột. Cần thiết vì `opacity: 0` không chặn hit-test trong
     Chromium: chỉ cần một phần tử con lỡ có `visibility: visible` là cả panel bắt hover. */
  pointer-events: none;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
  box-shadow: var(--tthn-shadow-lg);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Mở dropdown bằng chuột (`:hover`) hoặc bàn phím. Dùng `:has(:focus-visible)` chứ KHÔNG dùng
   `:focus-within`: click chuột vào mục cũng làm link nhận focus, `:focus-within` khiến panel
   giữ mở mãi — triệu chứng: chưa hover mà panel đã hiện sẵn (Tùng báo).
   `:focus-visible` chỉ đúng khi focus do bàn phím (Tab) → vẫn Tab được vào menu con. */
.tthn-nav li:hover > .sub-menu,
.tthn-nav li:has(:focus-visible) > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
/* "Hover intent": trễ 120ms khi mở bằng CHUỘT để lướt ngang qua mục không làm panel bật lên.
   (Bàn phím vẫn hiện ngay — rule dưới khai `transition-delay: 0s` và đứng sau nên thắng.) */
.tthn-nav li:hover > .sub-menu { transition-delay: .12s; }
.tthn-nav li:has(:focus-visible) > .sub-menu { transition-delay: 0s; }
/* 2 mục cuối canh phải để dropdown không tràn khỏi khung — TRỪ mục mega (mega là dải ngang
   full chiều rộng, nếu bị `right: 0` + `left: auto` sẽ co lại chỉ còn 1 cột). */
.tthn-nav > ul > li:nth-last-child(-n+2):not(.tthn-mega) > .sub-menu { left: auto; right: 0; }
.tthn-nav .sub-menu a {
  display: block; padding: 9px 12px; border-radius: 5px;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
/* Reset gạch chân + mũi tên của cấp 1 khi ở trong submenu (WP vẫn gắn class menu-item-has-children
   cho mục còn con ở cấp sâu hơn dù `depth => 2` không in ra) */
.tthn-nav .sub-menu a::after,
.tthn-nav .sub-menu a::before { content: none; }
.tthn-nav .sub-menu a:hover { background: var(--tthn-surface); color: var(--tthn-primary-dark); }
.tthn-nav .sub-menu .current-menu-item > a,
.tthn-nav .sub-menu .current_page_item > a { background: var(--tthn-surface); color: var(--tthn-primary-dark); }

/* Nút mở menu con trong panel mobile — JS (TTHN1.5) tạo, ẩn ở desktop */
.tthn-nav__toggle { display: none; }

/* ---------- TTHN1.4b — Mega menu 3 cấp (VD mục \"Các Loại Cửa\") ----------
   JS (nav-menu.js) gắn `.tthn-mega` cho mục cấp 1 có menu cấp 3 và `.sub-menu--mega` cho menu cấp 2.
   Cấu trúc: cấp 2 = TIÊU ĐỀ CỘT, cấp 3 = danh sách phẳng trong cột. Chỉ áp ở desktop (≥769px). */
@media (min-width: 769px) {
  /* Bỏ `position` của <li> để panel neo vào `.tthn-header` (đang sticky) → thành DẢI NGANG
     hết chiều rộng, không bị tràn ra ngoài màn hình như khi neo vào từng mục nav. */
  .tthn-nav li.tthn-mega { position: static; }
  .tthn-nav li.tthn-mega > a { position: relative; }      /* giữ mũi tên ▾ neo theo link */
  .tthn-nav li.tthn-mega > .sub-menu {
    left: 0; right: 0; top: 100%; min-width: 0; padding: 18px 20px;
    /* `auto-fit` + bước cột cố định: 3 cột thì nằm 1 hàng, menu nhiều cột thì TỰ XUỐNG HÀNG
       (nếu dùng `grid-auto-flow: column` thì 12 cột sẽ nở ngang và tràn ra ngoài màn hình). */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
    justify-content: start; gap: 18px 26px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .tthn-nav .sub-menu--mega > li { padding: 0 22px; border-left: 1px solid var(--tthn-line); }
  .tthn-nav .sub-menu--mega > li:first-child { padding-left: 0; border-left: 0; }
  .tthn-nav .sub-menu--mega > li:last-child { padding-right: 0; }
  /* Cột ĐẦU TIÊN của một HÀNG mới khi panel xuống dòng: bỏ gạch dọc + thụt lề trái cho thẳng
     hàng với cột đầu hàng 1. JS (nav-menu.js) gắn `.tthn-row-start` vì grid `auto-fit` không cho
     CSS biết cột nào bắt đầu hàng mới. Đặt SAU `:first-child` (cùng độ ưu tiên → rule sau thắng). */
  .tthn-nav .sub-menu--mega > li.tthn-row-start { padding-left: 0; border-left: 0; }
  /* Cấp 2 = tiêu đề cột: chữ hoa, gạch chân vàng như mẫu tham khảo.
     `min-height` = 2 dòng tiêu đề (13px × 1.4 × 2) + padding 8 + border 2 → tiêu đề nào cũng cao
     bằng nhau, nhờ đó danh sách của MỌI cột bắt đầu cùng một hàng (tiêu đề 1 dòng không làm
     danh sách phía dưới bị "nhảy" lên so với tiêu đề 2 dòng). */
  .tthn-nav .sub-menu--mega > li > a {
    display: block; padding: 0 0 8px; margin: 0 0 10px; min-height: calc(2.8em + 10px);
    white-space: normal;
    font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    color: var(--tthn-primary-dark); border-bottom: 2px solid var(--tthn-primary);
  }
  .tthn-nav .sub-menu--mega > li > a:hover { background: none; color: var(--tthn-accent); }
  /* Cấp 3 = danh sách phẳng, KHÔNG bo góc/nền như dropdown thường.
     ⚠️ KHÔNG đặt `visibility: visible` trong khối reset này: cấp 3 cũng mang class `.sub-menu`
     nên nó khớp luôn rule gốc `visibility: hidden`; nếu set thẳng `visible` thì khi panel ĐANG
     ĐÓNG, danh sách cấp 3 vẫn nhận chuột (opacity 0 không chặn hit-test) → vùng panel mega
     (full chiều rộng × cao ~620px) tự bắt hover và menu tự mở dù chuột chưa tới chữ.
     Vì vậy `visibility` nằm ở rule CÓ ĐIỀU KIỆN hover/focus ngay dưới. */
  .tthn-nav .sub-menu--mega > li > .sub-menu {
    position: static; opacity: 1; transform: none;
    display: block; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none;
  }
  .tthn-nav li:hover > .sub-menu--mega > li > .sub-menu,
  .tthn-nav li:has(:focus-visible) > .sub-menu--mega > li > .sub-menu { visibility: visible; }
  /* "Cầu" hover — dải TRONG SUỐT lấp khoảng hở giữa ĐÁY link cấp 1 và MÉP TRÊN panel mega, để rê
     chuột từ chữ xuống panel không mất hover giữa đường.
     ⚠️ 2026-09-17 — ĐỔI LẦN 2 (Tùng báo: "nền trắng không phủ hết tất cả các ô menu" + "toàn bộ
     ô menu dịch lên trên quá cao"): cách của 2026-09-16 (kéo mép panel lên bằng `margin-top` âm +
     `padding-top` bù + `background-clip: content-box`) làm HỘP panel cao hơn thân panel 30px ⇒ mép
     trên hộp nằm TRONG header (đo 1440: panel.top 76 vs đáy header 107 = −31px, kèm vạch border 1px
     cắt ngang header) và nền trắng chỉ phủ CONTENT box ⇒ hở dải 48px trên · 20px hai bên · 18px
     dưới (đo pixel 1440 mép trái: rgb(249,247,245) = nền trang, không phải #fff).
     Cách mới: TRẢ panel về `top: 100%` (mép trên = đáy header ⇒ nền trắng phủ HẾT hộp, liền mạch với
     header như trước 2026-09-16) và đặt cầu hover lên pseudo của CHÍNH `<li>` — `<li>` không phải
     khung cuộn nên KHÔNG bị `overflow-y: auto` của panel cắt (đó là lý do 2026-09-16 phải bỏ pseudo).
     `:hover` nằm trong selector ⇒ dải chỉ tồn tại khi panel ĐANG mở: chưa rê tới chữ thì không có
     vùng "ma" nào bắt chuột (lỗi "menu tự mở" đã sửa 2026-09-14 không quay lại). */
  .tthn-nav li.tthn-mega:hover::before {
    content: "";
    /* `li.tthn-mega` là `position: static` ⇒ gốc định vị là `.tthn-header` (sticky) ⇒ `top: 100%` =
       đáy header = mép trên panel; trừ `--tthn-bridge` ⇒ dải nằm đúng khoảng hở dưới chữ.
       `--tthn-bridge` do JS đo (nav-menu.js 0c) · `0px` ⇒ KHÔNG có dải (đúng cho ≤1024, xem JS). */
    position: absolute; left: 0; right: 0;
    top: calc(100% - var(--tthn-bridge, 28px));
    height: var(--tthn-bridge, 28px);
  }
  .tthn-nav li.tthn-mega > .sub-menu {
    /* max-height do JS đặt (`--tthn-mega-max` = viewport − đáy header − 10px, xem nav-menu.js 0c);
       giá trị dự phòng dưới đây dùng khi JS tắt. */
    max-height: var(--tthn-mega-max, calc(100vh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Padding 18/20px như trước 2026-09-16: `background-clip` mặc định (border-box) ⇒ nền trắng phủ
       HẾT hộp panel, kể cả dải padding hai bên + dưới ⇒ không còn "hở nền" ở mép panel. */
    padding: 18px 20px;
  }
  .tthn-nav .sub-menu--mega .sub-menu a {
    padding: 4px 0; font-size: 14px; font-weight: 500; white-space: nowrap;
    /* Tên danh mục quá dài (VD "Cửa gỗ công nghiệp MDF Melamine" ≈ 242px trong khi cột chỉ
       rộng 195px) trước đây tràn `overflow: visible` sang cột bên cạnh → vỡ lưới cột.
       Cắt đuôi bằng "…"; tên đầy đủ nằm ở trang danh mục khi bấm vào. */
    overflow: hidden; text-overflow: ellipsis;
  }
  .tthn-nav .sub-menu--mega .sub-menu a:hover { background: none; color: var(--tthn-accent); }
  /* TTHN1.4b — TRƯỚC ĐÂY có rule `.tthn-mega__misc::before` (spacer cho cột GOM các mục cấp 2
     không có danh mục con). JS đã bỏ việc gom cột (2026-09-16, yêu cầu Tùng) ⇒ cột gom không
     còn tồn tại nên spacer cũng bỏ: mỗi mục cấp 2 giờ là 1 cột với tiêu đề in hoa + gạch vàng
     như mọi cột khác, chiều cao tiêu đề đã được canh bằng `min-height` ở rule `> li > a`. */
}

.tthn-header-cta { display: flex; align-items: center; gap: 14px; }
/* Tap target ≥ 44px (Apple/Material) cho các phần tử bấm trên header — WCAG 2.2 chỉ yêu cầu
   24px nhưng 44px mới đủ thoải mái trên mobile. Không làm header cao thêm vì chiều cao hàng
   đang do logo (46px) quyết định. */
.tthn-hotline { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tthn-hotline .ic {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tthn-surface); display: grid; place-items: center;
  color: var(--tthn-accent);
}
.tthn-hotline small { display: block; font-size: 11.5px; color: var(--tthn-muted); }
.tthn-hotline b { font-size: 17px; color: var(--tthn-accent); }

.tthn-burger { display: none; background: none; border: 0; cursor: pointer; padding: 0; }
.tthn-burger span { display: block; width: 24px; height: 2px; background: var(--tthn-text); margin: 5px 0; }

/* Nút mở ô search trên mobile (desktop ẩn — desktop đã có sẵn ô search trong hàng) */
.tthn-search-toggle {
  display: none; flex: 0 0 auto; width: 35px; height: 35px; padding: 0; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--tthn-surface); color: var(--tthn-text); place-items: center;
}
.tthn-search-toggle:hover { background: var(--tthn-primary); color: var(--tthn-on-primary); }
.tthn-search-toggle svg { width: 20px; height: 20px; }

/* ---------- TTHN1.6 — Ô tìm kiếm trên header ---------- */
/* Là con trực tiếp của `.tthn-container` → tự có khoảng cách với nav (margin) vì container
   đã bỏ `gap` theo yêu cầu trước đó. */
.tthn-search {
  display: flex; align-items: center; flex: 0 0 auto;
  width: 230px; height: 40px;
  background: var(--tthn-surface); border: 1px solid var(--tthn-line); border-radius: 999px;
}
.tthn-search:focus-within { background: #fff; border-color: var(--tthn-primary-dark); }
.tthn-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px 0 14px;
  background: none; border: 0; outline: 0; font: inherit; font-size: 14px; color: var(--tthn-text);
  /* `appearance: none` là điều kiện để Chrome cho phép ẩn pseudo-element bên dưới (từ Chrome 83
     không style được `::-webkit-search-cancel-button` nếu input còn appearance mặc định) */
  -webkit-appearance: none; appearance: none;
}
/* Bỏ nút xoá nhanh (×) của Chrome/Safari cho `input[type=search]` — 21:15 ngày 2026-09-14 */
.tthn-search input[type="search"]::-webkit-search-cancel-button,
.tthn-search input[type="search"]::-webkit-search-decoration,
.tthn-search input[type="search"]::-webkit-search-results-button,
.tthn-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none; appearance: none; display: none;
}
.tthn-search input[type="search"]::placeholder { color: var(--tthn-muted); }
/* Chrome phủ nền xanh #e8f0fe khi nó tự điền / gợi ý giá trị đã gõ vào ô này (rule UA
   `input:-internal-autofill-selected` — KHÔNG xoá được, xem khối "autofill" bên dưới).
   Ô search nằm trong pill nền `--tthn-surface` nên phủ ĐÚNG màu đó (không dùng #fff như rule chung)
   — selector này đặc thù hơn rule chung nên thắng dù khai báo trước. */
.tthn-search input[type="search"]:-webkit-autofill,
.tthn-search input[type="search"]:-webkit-autofill:hover,
.tthn-search input[type="search"]:-webkit-autofill:focus,
.tthn-search input[type="search"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--tthn-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--tthn-surface) inset !important;
}
.tthn-search button {
  flex: 0 0 auto; width: 42px; height: 100%; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--tthn-muted);
}
.tthn-search button:hover { color: var(--tthn-primary-dark); }
.tthn-search button svg { width: 18px; height: 18px; }

/* ---------- TTHN1.7 — Icon giỏ hàng trên header ---------- */
.tthn-cart-link {
  position: relative; flex: 0 0 auto; display: grid; place-items: center;
  width: 35px; height: 35px; border-radius: 50%; /* 35px theo yêu cầu Tùng (trước 44px) */
  background: var(--tthn-surface); color: var(--tthn-text);
}
.tthn-cart-link:hover { background: var(--tthn-primary); color: var(--tthn-on-primary); }
.tthn-cart-link__ic { width: 20px; height: 20px; }
.tthn-cart-link__count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; background: var(--tthn-accent); color: #fff;
  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1;
}

/* ---------- Hero ---------- */
.tthn-hero {
  position: relative;
  background: linear-gradient(180deg, var(--tthn-surface) 0%, #fff 100%);
  overflow: hidden;
}
.tthn-hero .tthn-container {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}
.tthn-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--tthn-line);
  color: var(--tthn-primary-dark); font-weight: 600; font-size: 13.5px;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
  box-shadow: var(--tthn-shadow);
}
.tthn-hero h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.tthn-hero h1 em { color: var(--tthn-primary-dark); font-style: normal; }
.tthn-hero p { font-size: 17px; color: var(--tthn-muted); margin: 0 0 26px; max-width: 520px; }
.tthn-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Feature strip ---------- */
.tthn-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: -34px;
  position: relative;
  z-index: 2;
}
.tthn-feature {
  background: #fff;
  border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--tthn-shadow);
}
.tthn-feature .ic {
  width: 42px; height: 42px; border-radius: 5px;
  background: var(--tthn-surface); color: var(--tthn-primary-dark);
  display: grid; place-items: center; flex: none;
}
.tthn-feature b { display: block; font-size: 15.5px; }
.tthn-feature span { font-size: 13px; color: var(--tthn-muted); }
/* TTHN2.10 — ảnh icon upload ở Customizer THAY icon SVG mặc định: lấp đầy ô 42×42, giữ tỉ lệ ảnh.
   (Khác `.tthn-feature span` ở trên: ảnh không bị ép `font-size`/màu chữ.) */
.tthn-feature .ic img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* ---------- Section ---------- */
/* 2026-09-15 (yêu cầu Tùng): `64px 0` → `40px 0` — áp cho các khối DÙNG rule gốc này:
  5 khối trang chủ, `.tthn-section` trang cửa hàng/danh mục SP (TTHN3.1), `.tthn-section.tthn-news-section`
  (TTHN5.1), dải CTA trong trang chi tiết SP. Các khối có padding RIÊNG thì KHÔNG đổi:
  `.tthn-single-section` 28/0, `.tthn-thankyou-section` 40/120, `.tthn-related-band` 40/44,
  `.tthn-article-section` 26/44, `.tthn-page-section` 28/44. (`.tthn-cart-section` + `.tthn-checkout-section`
  từng có padding riêng 40/64 nhưng rule đó đã XOÁ 2026-09-15 vì là CSS mồ côi — trang giỏ/thanh toán
  thực tế dùng `.tthn-pagehero` + `.tthn-section` + `.tthn-shop*`.) */
.tthn-section { padding: 40px 0; }
.tthn-section.alt { background: var(--tthn-surface); }
/* 2026-09-15 (yêu cầu Tùng) — DESKTOP: tiêu đề khối "nổi bật + hiện đại" hơn:
   nhãn nhỏ thành CHIP bo tròn (nền vàng nhạt), h2 to hơn (clamp 26→38px, weight 800,
   letter-spacing -.6px), gạch nhấn vàng 56×4px dưới tiêu đề, và một đường kẻ mảnh
   dưới cả khối tiêu đề. H2 ::after dùng CHUNG với mobile (46×3px, khai lại ở block ≤768px). */
.tthn-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--tthn-line);
  margin-bottom: 34px;
}
.tthn-eyebrow {
  display: inline-block;
  color: var(--tthn-accent);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
/* Trong khối tiêu đề → chip (0,2,0 thắng `.tthn-eyebrow` 1 class ở trên) */
.tthn-section-head .tthn-eyebrow {
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--tthn-primary-tint);
  /* `--tthn-accent-dark` (không phải `--tthn-accent`): chữ 11.5px trên nền chip vàng nhạt
     chỉ đạt 4.32:1 với `#102d56` (< 4.5:1), đổi sang `#0b2850` → 5.91:1 trên nền trắng,
     5.46:1 trên nền kem `.tthn-section.alt` (đo theo công thức WCAG). */
  color: var(--tthn-accent-dark);
  font-size: 11.5px;
  letter-spacing: 1.4px;
  margin-bottom: 12px;
}
.tthn-section-head h2 {
  font-size: clamp(26px, 2.7vw, 38px);
  margin: 0;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.2;
}
/* Gạch nhấn dưới tiêu đề — desktop 56×4px (mobile 46×3px) */
.tthn-section-head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--tthn-primary);
}
.tthn-section-head p { margin: 10px 0 0; color: var(--tthn-muted); max-width: 560px; }
.tthn-link-more { color: var(--tthn-primary-dark); font-weight: 600; white-space: nowrap; }
.tthn-link-more:hover { color: var(--tthn-primary-dark); }

/* ---------- Category grid ---------- */
.tthn-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* TTHN2.6 — Admin chọn bố cục trong Customizer ("Trang chủ — Danh mục nổi bật").
   Modifier (0,2,0) MẠNH hơn `.tthn-cats` (0,1,0) dùng trong media query cũ → phải khai lại
   breakpoint ở dưới, nếu không lưới 6/4 cột sẽ đè luôn rule mobile. */
.tthn-cats--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tthn-cats--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tthn-cats--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* "Hiển thị ngang": 1 hàng cuộn — `contain: paint` là BẮT BUỘC (bài học TTHN2.4: thiếu nó, overflow
   của dải cuộn lan ra document → tràn ngang ở 390px dù container vẫn cuộn đúng). */
.tthn-cats--horizontal {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; contain: paint; padding: 8px 0;
}
.tthn-cats--horizontal .tthn-cat { flex: 1 1 220px; min-width: 200px; scroll-snap-align: start; }
.tthn-cat {
  position: relative;
  border-radius: var(--tthn-radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--tthn-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tthn-cat:hover { transform: translateY(-4px); box-shadow: var(--tthn-shadow-lg); }
.tthn-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tthn-cat:hover img { transform: scale(1.05); }
.tthn-cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(38,34,30,.82) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; color: #fff;
}
.tthn-cat-overlay b { font-size: 19px; }
.tthn-cat-overlay span { font-size: 13.5px; opacity: .85; }

/* TTHN2.6 — responsive cho bố cục do Admin chọn (xem ghi chú ở `.tthn-cats--cols-*`) */
@media (max-width: 1200px) {
  .tthn-cats--cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .tthn-cats--cols-6,
  .tthn-cats--cols-4,
  .tthn-cats--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  /* 2026-09-15 (yêu cầu Tùng): "Danh mục nổi bật" trên mobile = 1 HÀNG 3 CỘT, phần còn lại
     xem bằng cuộn ngang + 2 nút ‹ › (TTHN2.8). Bỏ lưới 2 cột cũ (và 1 cột ở ≤520px) — dù Admin
     chọn bố cục nào (cols-6/4/3/horizontal) thì mobile vẫn 1 hàng 3 cột cho đồng nhất.
     `contain: paint` BẮT BUỘC (bài học TTHN2.4: thiếu nó, overflow của dải lan ra document →
     tràn ngang ở 390px dù dải cuộn đúng). */
  .tthn-cats,
  .tthn-cats--cols-6,
  .tthn-cats--cols-4,
  .tthn-cats--cols-3,
  .tthn-cats--horizontal {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; contain: paint; padding: 8px 0;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .tthn-cats::-webkit-scrollbar { display: none; }
  .tthn-cats .tthn-cat,
  .tthn-cats--horizontal .tthn-cat {
    flex: 0 0 calc((100% - 20px) / 3); /* 3 cột = trừ 2 khe gap 10px */
    min-width: 0; scroll-snap-align: start;
  }
  /* Thẻ chỉ còn ~110px ở 390px → chữ gọn lại; mô tả cắt 2 dòng để không tràn khỏi thẻ */
  .tthn-cat-overlay { padding: 10px; }
  .tthn-cat-overlay b { font-size: 13px; line-height: 1.3; }
  .tthn-cat-overlay span {
    font-size: 11px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}
@media (max-width: 520px) {
  /* Mobile vẫn giữ 1 HÀNG 3 CỘT (dải cuộn) — xem block `≤768px` ở trên, không về lưới 1 cột nữa */
  .tthn-cats--cols-6,
  .tthn-cats--cols-4,
  .tthn-cats--cols-3 { grid-template-columns: none; }
}

/* ---------- Product grid ---------- */
.tthn-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tthn-card {
  background: #fff;
  border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.tthn-card:hover { transform: translateY(-4px); box-shadow: var(--tthn-shadow-lg); }
.tthn-card-media { position: relative; aspect-ratio: 4 / 5; background: var(--tthn-surface); overflow: hidden; }
.tthn-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tthn-card:hover .tthn-card-media img { transform: scale(1.04); }
.tthn-badge {
  position: absolute; top: 0; left: 0; z-index: 2; /* ảnh đứng sau có transform khi hover → nếu thiếu z-index sẽ đè mất badge */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px;
  background: var(--tthn-sale); color: #fff;
  font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: .5px;
  border: 0; border-radius: 0 0 5px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.tthn-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tthn-card-cat { font-size: 12px; color: var(--tthn-muted); text-transform: uppercase; letter-spacing: 1px; }
.tthn-card-title { font-size: 15.5px; font-weight: 600; margin: 0; line-height: 1.4; }
.tthn-card-title a:hover { color: var(--tthn-primary-dark); }
.tthn-price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.tthn-price b { font-size: 17px; color: var(--tthn-accent); }
.tthn-price del { font-size: 13px; color: var(--tthn-muted); }

/* ---------- CTA band ---------- */
/* Nền dải CTA: dùng tông CAM ĐẤT đậm (`--tthn-accent-dark` → `--tthn-accent`) để chữ trắng đạt
   WCAG AA — đo được 6.6:1 ở đầu đậm và 4.8:1 ở đầu nhạt (nền vàng cũ chỉ 1.9–3.0:1, dưới chuẩn).
   Muốn quay lại nền vàng thì đổi 2 biến này và đổi `color` sang `--tthn-on-primary` (8.9:1). */
.tthn-cta {
  background: linear-gradient(120deg, var(--tthn-accent-dark), var(--tthn-accent));
  color: #fff;
  border-radius: 5px;
  padding: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.tthn-cta h3 { font-size: 26px; margin: 0 0 8px; font-weight: 800; }
.tthn-cta p { margin: 0; opacity: .9; }
.tthn-cta .tthn-btn-accent { box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }

/* ---------- Footer ---------- */
/* TTHN1.3 — nền footer tuỳ biến: ẢNH nền trên `.tthn-footer`, LỚP MÀU đè lên ảnh là `::before` với
   `opacity: var(--tthn-footer-bg-op)` (giá trị do `tthn_footer_style()` ở functions.php in ra).
   Không chọn ảnh thì lớp màu trùng màu nền → giao diện y như trước. */
.tthn-footer {
  position: relative;
  /* 2026-09-15 (yêu cầu Tùng): ĐƯỜNG LINE NGANG 7px MÀU VÀNG CHỦ ĐẠO ở sát mép trên footer.
     Dùng `border-top` chứ không dùng `::after`: `.tthn-footer::before` đã là LỚP MÀU đè ảnh nền, còn
     border nằm NGOÀI padding-box nên lớp `::before` (`inset: 0`) không phủ lên line. */
  border-top: 7px solid var(--tthn-primary);
  background-color: var(--tthn-footer-bg, #081a31);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: var(--tthn-footer-fg, #fff); padding: 56px 0 0; font-size: 14.5px;
}
.tthn-footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-color: var(--tthn-footer-bg, #081a31);
  opacity: var(--tthn-footer-bg-op, 1);
  pointer-events: none;
}
.tthn-footer > .tthn-container { position: relative; z-index: 1; }
.tthn-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; }
/* TTHN1.3 — "Số cột" = 3 (Customizer): lưới 3 cột đều nhau, chỉ render Cột 1–3. */
.tthn-footer-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Chữ do THEME quyết định (KHÔNG thuộc ô soạn thảo) — lấy từ biến để tự đổi theo nền footer:
   `tthn_footer_style()` (functions.php) in `--tthn-footer-title/fg/muted/line` khi nền là SÁNG; nếu không
   thì tiêu đề/`p` màu sáng nằm trên nền sáng = vô hình (tiêu đề `#fff` đo được contrast **1.18**).
   Giá trị sau dấu phẩy = bảng màu NỀN TỐI (giữ nguyên giao diện cũ khi nền tối). */
.tthn-footer h4 { color: var(--tthn-footer-title, #fff); font-size: 16px; margin: 0 0 16px; }
.tthn-footer a:hover { color: var(--tthn-footer-title, #fff); }
.tthn-footer li { margin-bottom: 9px; }
.tthn-footer .tthn-logo-text b { color: var(--tthn-footer-title, #fff); }
.tthn-footer .tthn-logo-text span { color: var(--tthn-footer-muted, #fff); }
/* Logo footer cố định 120px (yêu cầu Tùng 2026-10-11, mọi màn hình — không giới hạn max-width). Trước đó logo footer
   ăn cỡ GỐC của ảnh (473px). Selector PHẢI là `.tthn-footer .custom-logo` (ảnh không nằm trong `.tthn-logo` — xem `footer.php`). */
.tthn-footer .custom-logo { width: 120px; height: auto; display: block; }
.tthn-footer p { color: var(--tthn-footer-muted, #fff); line-height: 1.7; }

/* TTHN1.3 — mỗi cột = tiêu đề + 1 ô soạn thảo (TinyMCE) → chuẩn hoá lại các thẻ HTML trong ô đó:
   giữ tông màu footer hiện hành (chữ + phụ mặc định #fff). Danh sách (`ul`/`ol`) NAY GIỮ NGUYÊN
   định dạng như trong ô soạn thảo — xem ghi chú ở rule `ul, ol` bên dưới (Tùng báo 2026-09-15). */
.tthn-foot-col { min-width: 0; }
/* Ô soạn thảo là nội dung tự do → chuỗi dài không có khoảng trắng (email, URL) phải ngắt được,
   nếu không sẽ đẩy tràn ngang cả trang (đo ở 390px: `thacotaihanoidoor@gmail.com` rộng **183px** trong cột
   157px → `scrollWidth` 396 > 390). `break-word` chỉ cắt khi từ không vừa dòng. */
.tthn-footer .tthn-col__body { min-width: 0; overflow-wrap: break-word; }
/* 2026-09-16 (yêu cầu Tùng): 20px từ logo xuống nội dung bên dưới. Có 2 DOM:
   (a) CÓ custom logo → `<a class="custom-logo-link"><img></a>` rồi tới `.tthn-col__body`
       (KHÔNG còn `<a class="tthn-logo">` bọc ngoài — xem ghi chú ở `footer.php`);
   (b) KHÔNG có custom logo → `<a class="tthn-logo">` (chữ) rồi tới `.tthn-col__body`. */
.tthn-footer .custom-logo-link { display: block; }
.tthn-footer .custom-logo-link + .tthn-col__body,
.tthn-footer .tthn-logo + .tthn-col__body { margin-top: 20px; }
.tthn-footer .tthn-col__body > *:first-child { margin-top: 0; }
.tthn-footer .tthn-col__body > *:last-child { margin-bottom: 0; }
.tthn-footer .tthn-col__body p { margin: 0 0 12px; }
/* 2026-09-15 (Tùng báo: "dùng ul/li trong ô soạn thảo mà ra trang không thấy"):
   Trước đây rule này ép `list-style: none; padding: 0` (cộng với reset chung `.tthn ul` ở dòng 48) ⇒
   `<ul>/<li>` hiện ra như dòng chữ thường, KHÔNG có dấu đầu dòng và không thụt lề (đo: chữ lệch so với
   `<ul>` = **0px**). Nay giữ ĐÚNG định dạng danh sách như trong ô soạn thảo (TinyMCE dùng dấu `disc`).
   Cột nguồn "Menu" không đi qua `.tthn-col__body` nên vẫn không có dấu (giữ như thiết kế). */
.tthn-footer .tthn-col__body ul,
.tthn-footer .tthn-col__body ol { margin: 0 0 12px; padding-left: 20px; }
.tthn-footer .tthn-col__body ul { list-style: disc; }
.tthn-footer .tthn-col__body ol { list-style: decimal; }
.tthn-footer .tthn-col__body ul ul { list-style: circle; }
.tthn-footer .tthn-col__body ol ol { list-style: lower-alpha; }
.tthn-footer .tthn-col__body a { color: inherit; }
/* 2026-09-15 (yêu cầu Tùng: "định dạng chữ trong ô soạn thảo phải hiện y như đã nhập"):
   BỎ mọi rule ép màu/size cho chữ trong ô soạn thảo —
   • `strong, b { color: #fff }` đã XOÁ: Tùng đặt nền footer SÁNG (`#d6d6d6` + ảnh, opacity 95%)
     và nhập chữ ĐEN (`color:#000000`) → ép #fff làm chữ đậm trắng trên nền sáng = mất chữ.
   • `h5` chỉ còn giữ khoảng cách, KHÔNG ép màu/cỡ (nếu ép thì cỡ chữ Tùng chọn trong editor bị đè).
   Trỏ chuột vào link dùng `opacity` (không đổi màu) để không phá màu chữ Tùng đặt. */
.tthn-footer .tthn-col__body a:hover { opacity: .78; }
.tthn-footer .tthn-col__body h5 { margin: 0 0 10px; }
.tthn-footer .tthn-col__body img { max-width: 100%; height: auto; border-radius: var(--tthn-radius-sm); }
/* 2026-09-15 (Tùng nhúng bản đồ ở cột “VỊ TRÍ CỬA HÀNG”): iframe mã nhúng (Google Maps/YouTube) thường
   ghi `width="600"` cứng → trong cột footer chỉ ~157–346px nên TRÀN NGANG (đo: `overflow` 257/234/423
   ở 1440/768/390). `max-width` ép iframe co theo cột; `height` giữ nguyên của mã nhúng. */
.tthn-footer .tthn-col__body iframe {
  max-width: 100%; border: 0; border-radius: var(--tthn-radius-sm); display: block;
}
/* Icon cho link liên hệ (thay icon SVG cũ bằng mask → không phải nhúng SVG vào ô soạn thảo) */
.tthn-footer .tthn-col__body a[href^="tel:"]::before,
.tthn-footer .tthn-col__body a[href^="mailto:"]::before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 8px;
  vertical-align: -3px; background-color: var(--tthn-accent);
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.tthn-footer .tthn-col__body a[href^="tel:"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.tthn-footer .tthn-col__body a[href^="mailto:"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}
.tthn-footer-bottom {
  border-top: 1px solid var(--tthn-footer-line, rgba(255,255,255,.1));
  margin-top: 40px; padding: 20px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--tthn-footer-muted, #fff); font-size: 13px;
}
/* 2026-09-16 — Dòng ghi công "Thiết kế bởi tungleads.com" là markup CỐ ĐỊNH ở `footer.php` (có link).
   `.tthn a` chung đã bỏ gạch chân nên phải thêm lại để nhìn ra là link; giữ màu chữ của dòng cuối.
   2026-09-24 (Tùng yêu cầu) — BỎ GẠCH CHÂN tên miền (bỏ `text-decoration: underline` + `text-underline-offset`)
   và link đã thêm `rel="nofollow"` trong `footer.php`. Affordance "đây là link" nay chỉ còn ở ĐỔI MÀU khi
   hover (`--tthn-footer-title`) — cố ý `text-decoration: none` cả ở trạng thái hover để không gạch chân trở lại. */
.tthn-footer-bottom .tthn-footer-credit a { color: inherit; text-decoration: none; }
.tthn-footer-bottom .tthn-footer-credit a:hover { color: var(--tthn-footer-title, #fff); text-decoration: none; }
/* Tùng muốn dòng ghi công SÁT LỀ PHẢI: desktop đã sát nhờ `justify-content: space-between`, nhưng ở ≤560px
   dòng cuối xuống hàng thì món mới nằm bên TRÁI → `margin-left: auto` đẩy sang phải ở mọi bề rộng. */
.tthn-footer-bottom .tthn-footer-credit { margin-left: auto; }
/* Mobile (≤768px): 2 dòng bản quyền + ghi công xếp dọc, CANH GIỮA (đè `margin-left: auto` ở trên) */
@media (max-width: 768px) {
  .tthn-footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .tthn-footer-bottom .tthn-footer-credit { margin-left: 0; }
}
/* 2026-09-16 (Tùng yêu cầu): dòng ghi công HIỂN THỊ SÁT LỀ PHẢI ở MỌI bề rộng (bỏ `padding-right: 84px`,
   thêm `margin-left: auto` cho trường hợp xuống hàng ở ≤560px).
   ĐÁNH ĐỔI cũ (giờ ĐÃ HẾT): `.tthn-fab` phủ **832px²** lên link ghi công khi cuộn tới đáy — nút gọi nổi
   đã bị XOÁ HẲN ở TTHN1.3 (cùng ngày, cùng yêu cầu) nên link ghi công nay bấm được ở MỌI điểm, kể cả
   chính giữa (trước đây bấm giữa lại trúng `A.call`). */

/* ---------- Page hero (danh mục · giỏ hàng · thanh toán · hoàn tất đơn) ---------- */
.tthn-pagehero {
  /* Tông SÁNG (thay dải vàng đậm cũ): nền trắng → kem nhạt, viền dưới mảnh, chữ đậm.
     Breadcrumb dùng đúng tông với `.tthn-breadcrumb--bar` ở trang chi tiết SP (13.5px, --tthn-muted). */
  background: linear-gradient(180deg, #fff, var(--tthn-surface));
  border-bottom: 1px solid var(--tthn-line);
  color: var(--tthn-text); padding: 20px 0;
}
.tthn-pagehero h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; font-weight: 800; }
.tthn-breadcrumb { font-size: 13.5px; color: var(--tthn-muted); }
.tthn-breadcrumb a { color: var(--tthn-muted); }
.tthn-breadcrumb a:hover { color: var(--tthn-primary-dark); text-decoration: underline; }

/* ---------- Layout with sidebar ---------- */
.tthn-shop { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.tthn-shop-aside { display: grid; gap: 20px; align-content: start; } /* nội dung dùng .tthn-side-box / .tthn-side-cats (khối TTHN3.2); gap = khoảng cách giữa "Danh mục" và "Sản phẩm nổi bật" */
/* Dính khi cuộn CHỈ khi màn hình đủ cao để chứa cả 2 hộp (cột cao hơn màn hình mà dính thì phần đáy bị cắt). */
@media (min-width: 1025px) and (min-height: 1000px) { .tthn-shop-aside { position: sticky; top: 96px; } }
.tthn-shop .tthn-products { grid-template-columns: repeat(3, 1fr); }

/* ---------- Contact ---------- */
.tthn-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.tthn-contact-info li { display: flex; gap: 14px; margin-bottom: 22px; }
.tthn-contact-info .ic {
  width: 46px; height: 46px; border-radius: 5px; flex: none;
  background: var(--tthn-surface); color: var(--tthn-primary-dark);
  display: grid; place-items: center;
}
.tthn-contact-info b { display: block; font-size: 15.5px; }
.tthn-contact-info span { color: var(--tthn-muted); font-size: 14.5px; }

/* ---------- Single product (WooCommerce style) ---------- */
.tthn-single { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.tthn-single-price { display: flex; align-items: baseline; gap: 12px; padding: 18px 0; border-top: 1px solid var(--tthn-line); border-bottom: 1px solid var(--tthn-line); margin-bottom: 20px; }
.tthn-single-price b { font-size: 30px; color: var(--tthn-accent); font-weight: 800; }
.tthn-single-price del { font-size: 17px; color: var(--tthn-muted); }
.tthn-short-desc { color: var(--tthn-muted); margin: 0 0 22px; }

.tthn-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.tthn-buy .tthn-btn { height: 46px; }

/* Tabs */
.tthn-tabs { margin-top: 56px; }
.tthn-tab-panel { display: none; padding: 26px 2px; color: var(--tthn-muted); line-height: 1.8; }
.tthn-tab-panel.is-active { display: block; }
.tthn-tab-panel h3 { color: var(--tthn-text); font-size: 18px; margin: 22px 0 10px; }
.tthn-tab-panel h3:first-child { margin-top: 0; }
.tthn-tab-panel ul { list-style: disc; padding-left: 20px; margin: 0 0 14px; }
.tthn-tab-panel table { width: 100%; border-collapse: collapse; }
.tthn-tab-panel table th, .tthn-tab-panel table td { text-align: left; padding: 11px 14px; border: 1px solid var(--tthn-line); font-size: 14.5px; }
.tthn-tab-panel table th { background: var(--tthn-surface); color: var(--tthn-text); width: 40%; }

/* ---------- Floating hotline — ĐÃ XOÁ (TTHN1.3, 2026-09-16 theo yêu cầu Tùng) ----------
   Nút gọi nổi `.tthn-fab` (kèm `.tthn-fab a`, `.tthn-fab .call`, `.tthn-fab .zalo`) đã xoá khỏi `footer.php`
   và xoá khỏi file này; `@keyframes tthn-pulse` cũng xoá luôn vì CHỈ `.tthn-fab a` dùng nó.
   Thay thế: plugin riêng `button-call-zalo-tungleads` (widget Gọi/Zalo neo lề phải, số nhập ở
   Settings → Button Call/Zalo) — không phải CSS mồ côi, đừng khôi phục lại ở đây. */

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .tthn-features { grid-template-columns: repeat(2, 1fr); }
  .tthn-products { grid-template-columns: repeat(3, 1fr); }
  .tthn-footer-grid { grid-template-columns: 1fr 1fr; }
  .tthn-shop { grid-template-columns: 1fr; }
  .tthn-shop-aside { position: static; order: 2; } /* 2026-09-15 (yêu cầu Tùng): ≤1024px lưới về 1 cột
     → đẩy khối "Danh mục sản phẩm" XUỐNG DƯỚI lưới sản phẩm (đo ở 390px TRƯỚC khi sửa: hộp danh mục
     cao 1603.8px nằm TRÊN `.tthn-shop-main`, main bắt đầu ở y=1870). Dùng `order` (KHÔNG đổi DOM) nên
     thứ tự đọc của screen reader / DOM giữ nguyên như trước — chỉ đổi thứ tự HIỂN THỊ. */
  .tthn-shop-main { order: 1; }
  .tthn-shop .tthn-products { grid-template-columns: repeat(3, 1fr); }
  /* TTHN1.6 — ≤1024px: ô tìm kiếm xuống hàng riêng, full chiều ngang.
     Dùng `order` (không đổi thứ tự DOM) vì ở desktop `.tthn-search` phải nằm TRÁI khối hotline,
     còn ở đây cần nó xuống dưới cùng sau khi khối CTA đã chiếm hàng đầu. */
  .tthn-header .tthn-container { flex-wrap: wrap; }
  /* Ô search nằm TRONG `.tthn-header-cta` → khối cta chiếm hết hàng rồi tự `flex-wrap`:
     hàng 1 = hotline/giỏ/burger (canh phải), hàng 2 = ô search full chiều ngang. */
  .tthn-header-cta { order: 1; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
  /* 44px: ô search + nút kính lúp là tap target trên mobile/tablet */
  .tthn-search { order: 2; flex: 1 1 100%; width: auto; height: 44px; margin: 8px 0 2px; }
}
@media (max-width: 768px) {
  /* 2026-09-16 (yêu cầu Tùng): FOOTER VỀ **1 CỘT** trên mobile. Trước đây `@media (max-width:1024px)`
     chỉ đổi `.tthn-footer-grid` sang `1fr 1fr` (2 cột) và KHÔNG có rule nào cho mobile ⇒ đo ở 390px mỗi
     cột chỉ **157px** (4 cột xếp 2 hàng, chữ bị bóp). Ghi đè ở đây vì media block này nằm SAU (cùng độ
     ưu tiên ⇒ thắng theo thứ tự nguồn). Chọn breakpoint 768 = đúng breakpoint "mobile" của theme (header
     mobile + menu burger). Muốn chỉ ≤480 mới 1 cột thì đổi số ở đây. */
  .tthn-footer-grid,
  .tthn-footer-grid--cols-3 { grid-template-columns: 1fr; }
  /* ---------- TTHN1.5 — Menu mobile: panel dọc dưới header ---------- */
  .tthn-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 6px 0 10px;
    background: #fff; border-top: 1px solid var(--tthn-line); border-bottom: 1px solid var(--tthn-line);
    box-shadow: var(--tthn-shadow-lg);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .tthn-nav.is-open { display: block; }
  body.tthn-nav-open { overflow: hidden; }
  .tthn-nav ul { display: block; gap: 0; }
  .tthn-nav a {
    display: block; padding: 13px 20px; border-radius: 0;
    border-bottom: 1px solid var(--tthn-line); font-size: 15.5px;
  }
  .tthn-nav a::after { content: none; }
  .tthn-nav li.menu-item-has-children > a { padding-right: 68px; }
  .tthn-nav li.menu-item-has-children > a::before { content: none; }
  .tthn-nav .sub-menu {
    position: static; visibility: visible; opacity: 1; transform: none;
    min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    display: none; background: var(--tthn-surface);
    /* Bật lại vì rule base đặt `pointer-events: none` cho panel ĐÓNG ở desktop (mobile mở panel
       bằng class `.is-open`, không đi qua `:hover` nên nếu thiếu dòng này link con không bấm được) */
    pointer-events: auto;
  }
  .tthn-nav li.is-open > .sub-menu { display: block; }
  /* (2026-09-16) ĐÃ BỎ rule `.tthn-nav li.tthn-mega__misc > .sub-menu { display: block }`: JS không còn
     gom các mục cấp 2 không có danh mục con vào cột `.tthn-mega__misc` nữa (xem nav-menu.js TTHN1.4b). */
  .tthn-nav .sub-menu a { padding-left: 36px; font-size: 14.5px; }
  .tthn-nav .sub-menu .sub-menu a { padding-left: 52px; }
  .tthn-nav__toggle {
    /* 2026-09-15 — Tùng yêu cầu `top: 5px` trong `@media (max-width: 768px)` (trước là 11px).
       Đo ở 390px: `<li>` cao 51.8px; nút 30×30 → tâm nút = 5 + 15 = 20px (trước: 26px = tâm hàng).
       Hệ quả: chevron cao hơn tâm hàng 5.9px; vùng bấm 44px phủ `-2 .. 42px` → **nhô lên 2px**
       trên mép hàng (trước: 4..48px nằm gọn trong hàng) ⇒ 2px đáy của mục menu TRÊN có thể bị nút
       này bắt. Muốn về lại đúng tâm hàng thì đổi về `top: 11px`. */
    display: block; position: absolute; top: 5px; right: 8px; z-index: 2;
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    background: var(--tthn-surface); border: 1px solid var(--tthn-line); border-radius: 5px;
  }
  /* Vùng BẤM 44px (chuẩn a11y) trong khi nút vẫn HIỂN THỊ 30px: lớp phủ trong suốt
     44×44 căn giữa theo nút (nới 7px mỗi bên). Với `top: 5px` (đo ở 390px, hàng cao 51.8px):
     tâm nút = 20px → lớp phủ phủ `-2 .. 42px` (nhô 2px trên mép hàng). `top` phải là số CỐ ĐỊNH
     (không dùng `top: 50%`): khi mở menu con, <li> cao thêm cả submenu nên `50%` sẽ đẩy nút
     xuống giữa submenu. */
  .tthn-nav__toggle::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .tthn-nav__toggle span {
    display: block; width: 9px; height: 9px; margin: 0 auto;
    border-right: 2px solid var(--tthn-text); border-bottom: 2px solid var(--tthn-text);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
  }
  .tthn-nav li.is-open > .tthn-nav__toggle span { transform: rotate(-135deg) translate(-2px, -2px); }

  .tthn-burger { display: block; min-width: 44px; min-height: 44px; }
  /* ---------- TTHN1.2b — Header mobile 1 HÀNG: [burger trái] [logo giữa] [search icon][giỏ phải] ----------
     Logo căn giữa bằng PHẦN KHOẢNG TRỐNG còn lại (`.tthn-logo { flex: 1 1 auto; justify-content: center }`)
     — KHÔNG dùng `position: absolute; left: 50%`: logo rộng 188px sẽ ĐÈ LÊN icon search (đã đo thực tế:
     icon không bấm được). Thu nhỏ logo để vừa 1 hàng (xem rule bên dưới). Hotline ẩn trên mobile. */
  /* KHÔNG khai báo lại `gap`/`min-height`: rule `.tthn-header .tthn-container` ở dưới (cuối media query này)
     đã đặt `gap: 12px; min-height: 64px` — khai báo trùng sẽ thành CSS chết, dễ gây nhầm khi sửa sau. */
  .tthn-header .tthn-container { flex-wrap: nowrap; align-items: center; position: relative; }
  .tthn-burger { order: -1; }
  /* Logo vào ĐÚNG TÂM container: `justify-content: center` chỉ căn giữa theo KHOẢNG TRỐNG còn lại —
     khối bên phải (2 icon: 35 + 10 + 35 = 80px) rộng hơn burger (44px) nên bị lệch 18px sang trái.
     `padding-left` = (khối phải − burger) = 80 − 44 = 36px bù lại phần lệch đó (đổi cỡ icon thì phải đổi số này). */
  .tthn-logo { flex: 1 1 auto; min-width: 0; justify-content: center; margin: 0; padding-left: 36px; }
  /* Giỏ TẮT (chỉ còn icon search 35px) → khối phải = burger (44px): đặt min-width 44px + bỏ bù lệch để logo đúng tâm. */
  .tthn-header-cta { min-width: 44px; justify-content: flex-end; }
  .tthn-header.tthn-hide-cart .tthn-logo { padding-left: 0; }
  /* (0,3,0) — phải mạnh hơn rule `.tthn-header .custom-logo` (0,2,0) nằm CUỐI file (width: 250px).
     CHỈ dùng `max-width` (không thêm `max-height`/`height`): clamp 2 chiều cùng lúc làm box lệch tỉ lệ
     (đo thực tế: 169×26 trong khi tỉ lệ ảnh gốc 473×87 = 5.44) → logo bị bóp méo. */
  .tthn-header .tthn-logo .custom-logo { width: auto; height: auto; max-width: min(107px, 100%); margin: 0 auto; object-fit: contain; } /* 107 = 2/3 của 160 (Tùng 2026-10-10) */
  .tthn-header-cta { order: 1; margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 10px; }
  .tthn-hotline { display: none; }
  .tthn-search-toggle { display: grid; }
  /* Ô search ẩn sẵn, chỉ hiện khi bấm icon (JS gắn `.is-search-open` ở `.tthn-header`).
     Khi mở: trượt xuống THÀNH DẢI RIÊNG dưới header (`position: absolute` + `top: 100%`) —
     KHÔNG cho wrap trong hàng vì `.tthn-header-cta` sẽ bị đẩy xuống hàng mới làm vỡ layout (đã đo). */
  .tthn-search { display: none; }
  .tthn-header.is-search-open .tthn-search {
    display: flex; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
    width: auto; height: 48px; margin: 0; padding: 0 14px;
    border-radius: 0; border-left: 0; border-right: 0; background: #fff;
    box-shadow: var(--tthn-shadow-lg);
  }
  .tthn-burger span { transition: transform .2s ease, opacity .2s ease; }
  .tthn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .tthn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .tthn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .tthn-header .tthn-container { gap: 12px; min-height: 64px; }
  .tthn-logo-mark { width: 38px; height: 38px; font-size: 16px; }
  .tthn-logo-text b { font-size: 15px; letter-spacing: 0; }
  .tthn-logo-text span { font-size: 10px; letter-spacing: 1px; }
  .tthn-header-cta { margin-left: auto; }
  .tthn-header-cta .tthn-hotline small { display: none; }
  .tthn-header-cta .tthn-hotline .ic { display: none; }
  .tthn-header-cta .tthn-hotline b { font-size: 15px; }
  .tthn-hero .tthn-container { grid-template-columns: 1fr; padding-top: 40px; }
  .tthn-hero-media { order: -1; }
  .tthn-cats { grid-template-columns: repeat(2, 1fr); }
  .tthn-products, .tthn-shop .tthn-products { grid-template-columns: repeat(2, 1fr); }
  .tthn-contact { grid-template-columns: 1fr; }
  .tthn-topbar { display: none; }
  .tthn-cta { padding: 28px; }
  .tthn-single { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .tthn-features { grid-template-columns: 1fr; }
  .tthn-cats { grid-template-columns: 1fr; }
  .tthn-products, .tthn-shop .tthn-products { grid-template-columns: 1fr 1fr; }
}

/* ---------- Ô nhập bị trình duyệt tự điền (autofill) ----------
   Chrome/Edge phủ nền xanh nhạt lên ô vừa autofill — DevTools hiển thị nguyên nhân là rule
   "user agent stylesheet": `input:-internal-autofill-selected { background-color: rgb(232,240,254) }`.
   Rule đó THUỘC TRÌNH DUYỆT nên: (1) không nằm trong file nào của mình để mà xoá; (2) author CSS
   cũng KHÔNG viết được selector `:-internal-*` (chỉ dành cho UA stylesheet); (3) `background-color`
   thường không thắng được. Cách duy nhất là ĐÈ bằng box-shadow inset cùng màu nền input (#fff).
   Đổi màu nền ô nhập thì sửa số màu ở đây cho khớp. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--tthn-text) !important;
  caret-color: var(--tthn-text);
}

/* ---------- Tôn trọng cài đặt giảm chuyển động của người dùng ----------
   Người bật "giảm chuyển động" (tiền đình nhạy cảm) sẽ không thấy hiệu ứng trượt/pulse;
   nội dung vẫn hiện đủ vì các hiệu ứng đều là transition trang trí. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- WordPress adaptations ---------- */
/* wp_nav_menu markup: đánh dấu mục hiện tại như .is-active của mockup */
.tthn-nav .current-menu-item > a,
.tthn-nav .current_page_item > a { color: var(--tthn-primary-dark); }
.tthn-nav .current-menu-item > a::after,
.tthn-nav .current_page_item > a::after { width: 100%; }
/* Ghi chú: KHÔNG ẩn `.sub-menu` ở đây nữa — dropdown desktop đã xây ở khối TTHN1.4
   (ẩn bằng `visibility` để còn chạy transition), panel mobile ẩn/hiện bằng `.is-open` ở TTHN1.5. */

/* custom-logo — TTHN1.2
   LƯU Ý selector: PHẢI là `.tthn-header .custom-logo`, KHÔNG dùng `.tthn-logo .custom-logo` (selector cũ
   là selector CHẾT): `the_custom_logo()` in ra `<a class="custom-logo-link">` LỒNG trong
   `<a class="tthn-logo">`, HTML lồng thẻ <a> không hợp lệ nên trình duyệt tự đóng thẻ <a> ngoài →
   logo nằm trực tiếp trong `.tthn-container`, không phải con của `.tthn-logo` (vì vậy rule cũ
   `width: 200px` chưa bao giờ có tác dụng, logo vẫn hiện đúng cỡ gốc).
   `height: auto` giữ đúng tỷ lệ ảnh gốc (không méo). */
.tthn-header .custom-logo {
  width: 138px; height: auto; max-width: 100%; display: block;
}

/* skip-link (kế thừa a11y từ theme cha) */
.tthn-header .skip-link,
body.tthn .skip-link { position: absolute; left: -9999px; }
body.tthn .skip-link:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 16px; border-radius: 5px; }

/* WooCommerce price trong .tthn-price / .tthn-card */
.tthn-price .woocommerce-Price-amount { font: inherit; }
.tthn-price ins { text-decoration: none; }
.tthn-price del .woocommerce-Price-amount { color: var(--tthn-muted); }
.tthn-price ins .woocommerce-Price-amount { color: var(--tthn-accent); font-weight: 700; }
.tthn-card .tthn-price { flex-wrap: wrap; }

/* Bỏ padding-block mà theme cha đặt cho .tl-main (child dùng section riêng) */
body.tthn main#main { padding-block: 0; }

/* screen-reader-text (WooCommerce dùng nhiều cho nhãn giá) */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}

/* ==========================================================================
   TTHN3.1 — Trang cửa hàng / danh mục (skin qua hook, markup WooCommerce)
   ========================================================================== */
.tthn-shop-main {
  min-width: 0;
  background: #fff; border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius); box-shadow: var(--tthn-shadow); padding: 22px;
}
/* Header mặc định của archive-product.php: nội dung đã dời xuống .tthn-shop-desc */
.tthn-shop-main .woocommerce-products-header { display: none; }

/* Lưới sản phẩm: dùng .tthn-card đã có, chỉ reset markup WooCommerce */
.tthn-shop-main ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; /* 2026-10-10 (yêu cầu Tùng): lưới danh mục 3 cột (≤900px: 2 cột, xem media query bên dưới) */
}
/* WooCommerce chèn ::before/::after (clearfix) — trong grid/flex chúng chiếm 1 ô → ô đầu bị trống */
.tthn-shop-main ul.products::before,
.tthn-shop-main ul.products::after,
.woocommerce .tthn-related-band ul.products::before,
.woocommerce .tthn-related-band ul.products::after { content: none; display: none; }
.woocommerce .tthn-shop-main ul.products li.product,
.tthn-shop-main ul.products li.product {
  float: none; width: auto; margin: 0; padding: 0;
  background: #fff; border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tthn-shop-main ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--tthn-shadow-lg); }
.tthn-shop-main li.product .tthn-card-media { display: block; }
.tthn-shop-main li.product .tthn-card-media a { display: block; height: 100%; }
.tthn-shop-main li.product .woocommerce-loop-product__title,
.tthn-shop-main li.product .tthn-card-title { font-size: 15.5px; font-weight: 600; margin: 0; line-height: 1.4; }
.tthn-shop-main li.product .price { margin-top: auto; }
/* ⚠️ Phải đủ 5 class: WooCommerce có rule
   `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price`
   = (0,4,2) > selector 3-class cũ → ép giá trong card về màu olive `rgb(149,142,9)` và
   `font-size:.857em; font-weight:400` (đo được 13.71px). Selector dưới = (0,5,2) nên thắng lại. */
.woocommerce .tthn-shop-main ul.products li.product .price { color: var(--tthn-accent); font-weight: 700; font-size: 17px; }
.woocommerce .tthn-shop-main ul.products li.product .price del { color: var(--tthn-muted); font-weight: 400; font-size: 13px; }
/* `<ins>` mặc định của trình duyệt có gạch chân — `.tthn-price` (trang chủ) đã tắt nên card cũng tắt */
.woocommerce .tthn-shop-main ul.products li.product .price ins { text-decoration: none; }
.tthn-shop-main li.product .star-rating { font-size: 13px; margin: 2px 0; }

/* Phân trang WooCommerce (prefix .woocommerce để thắng CSS mặc định của plugin) */
.woocommerce .tthn-shop-main .woocommerce-pagination { margin-top: 40px; text-align: center; }
.woocommerce .tthn-shop-main .woocommerce-pagination ul {
  /* 2026-09-15: THÊM `flex-wrap: wrap` — shop có 19 trang → dãy `ul.page-numbers` rộng **458px**
     trong khung 350px ở 390px gây TRÀN NGANG toàn trang (`scrollWidth` 501 > 390); cho xuống hàng
     thì 390px còn 390 (không tràn). Desktop vẫn 1 hàng (không đủ chỗ mới wrap). */
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; margin: 0; padding: 0; border: 0;
}
.woocommerce .tthn-shop-main .woocommerce-pagination ul li { margin: 0; border: 0; }
.woocommerce .tthn-shop-main .woocommerce-pagination ul li a,
.woocommerce .tthn-shop-main .woocommerce-pagination ul li span {
  display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--tthn-line); border-radius: 5px; padding: 0 10px;
  color: var(--tthn-text); font-weight: 700; font-size: 15px; background: #fff;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.woocommerce .tthn-shop-main .woocommerce-pagination ul li a:hover {
  background: var(--tthn-surface); border-color: var(--tthn-primary-dark); color: var(--tthn-primary-dark);
}
.woocommerce .tthn-shop-main .woocommerce-pagination ul li .current {
  background: var(--tthn-primary); color: var(--tthn-on-primary); border-color: var(--tthn-primary-dark);
}
.woocommerce .tthn-shop-main .woocommerce-pagination ul li .dots { border-color: transparent; background: none; }
.woocommerce .tthn-shop-main .woocommerce-pagination ul li .prev,
.woocommerce .tthn-shop-main .woocommerce-pagination ul li .next { font-size: 0; }
.woocommerce .tthn-shop-main .woocommerce-pagination ul li .prev::after { content: "\2039"; font-size: 22px; }
.woocommerce .tthn-shop-main .woocommerce-pagination ul li .next::after { content: "\203a"; font-size: 22px; }

/* Thanh công cụ 2 hàng × 2 cột (xếp bằng `order`): [số kết quả | sắp xếp] / [logo thương hiệu | khoảng giá] */
.tthn-shop-toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px;
  margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--tthn-line);
}
.tthn-shop-toolbar > .woocommerce-result-count { order: 1; }
.tthn-shop-toolbar > .woocommerce-ordering { order: 2; }
.tthn-shop-toolbar > .tthn-brand-logos { order: 3; }
.tthn-shop-toolbar > .tthn-price-range { order: 4; grid-column: 2; } /* luôn cột phải kể cả khi không có dải logo */
.woocommerce .tthn-shop-toolbar .woocommerce-result-count {
  margin: 0; color: var(--tthn-muted); font-size: 14px; float: none;
}
.woocommerce .tthn-shop-toolbar .woocommerce-ordering { margin: 0; float: none; }
.woocommerce .tthn-shop-main .woocommerce-ordering select {
  height: 42px; padding: 0 42px 0 16px; border: 1px solid var(--tthn-line); border-radius: 5px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--tthn-text);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23241d05" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
  transition: border-color .18s ease;
}
.woocommerce .tthn-shop-main .woocommerce-ordering select:focus { outline: none; border-color: var(--tthn-primary-dark); }

/* Thanh kéo khoảng giá 2 đầu (TTHN3.1): 2 input range chồng nhau, chỉ nút kéo nhận chuột; đoạn giữa tô bằng --lo/--hi */
.tthn-price-range { width: 300px; max-width: 100%; }
.tthn-price-range__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; }
.tthn-price-range__label { font-size: 13px; font-weight: 600; color: var(--tthn-muted); }
.tthn-price-range__value { font-size: 14px; font-weight: 700; color: var(--tthn-primary-dark); }
.tthn a.tthn-price-range__reset { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tthn-muted); text-decoration: underline; }
.tthn-price-range__slider {
  --lo: 0%; --hi: 100%;
  position: relative; height: 22px;
}
.tthn-price-range__slider::before { /* rãnh xám + đoạn được chọn */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tthn-line) var(--lo), var(--tthn-primary) var(--lo), var(--tthn-primary) var(--hi), var(--tthn-line) var(--hi));
}
.tthn-price-range__slider input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0; padding: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.tthn-price-range__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab; box-sizing: border-box;
  width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tthn-primary-dark); box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tthn-price-range__slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: grab; box-sizing: border-box;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tthn-primary-dark); box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tthn-price-range__slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--tthn-primary); outline-offset: 2px; }
@media (max-width: 900px) { .tthn-price-range { width: 100%; } }

/* TTHN3.13 — Logo thương hiệu (hàng 2, bên trái khoảng giá): ô 96×51 (2026-10-10 Tùng: to hơn 1.5×; trước 64×34), logo `contain`, ảnh xám nhạt → màu khi hover/đang chọn */
.tthn-brand-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tthn-brand-logos__item {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 51px; padding: 6px 12px;
  border: 1px solid var(--tthn-line); border-radius: 5px; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tthn-brand-logos__item.is-static { cursor: default; }
.tthn-brand-logos__item img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .18s ease, opacity .18s ease; }
.tthn a.tthn-brand-logos__item:hover,
.tthn a.tthn-brand-logos__item.is-active { border-color: var(--tthn-primary-dark); }
.tthn-brand-logos__item:hover img,
.tthn-brand-logos__item.is-active img { filter: none; opacity: 1; }
.tthn a.tthn-brand-logos__item.is-active { box-shadow: 0 0 0 1px var(--tthn-primary-dark); }
@media (max-width: 900px) { /* mobile: toolbar 1 cột, dải logo 1 hàng chia đều (tối đa 64×34) */
  .tthn-shop-toolbar { grid-template-columns: minmax(0, 1fr); }
  .tthn-shop-toolbar > .tthn-price-range { grid-column: 1; }
  .tthn-brand-logos { flex-wrap: nowrap; gap: 6px; }
  .tthn .tthn-brand-logos__item { flex: 1 1 0; width: auto; height: 34px; max-width: 64px; min-width: 0; padding: 4px 6px; }
}

@media (max-width: 900px) {
  /* 2026-09-15 (yêu cầu Tùng): card trắng `.tthn-shop-main` `padding: 22px → 10px` trên mobile để
     lưới sản phẩm rộng hơn (đo ở 390px: card 147 → 159px). Desktop giữ 22px. */
  .tthn-shop-main { padding: 10px; }
  /* 2026-09-15 (yêu cầu Tùng): lưới sản phẩm 2 cột trên mobile → gap 22px quá rộng so với card
     141px (đo ở 390px), đổi về 10px. Đặt cùng breakpoint với lúc lưới về 2 cột; desktop (4 cột)
     vẫn 22px — muốn 10px cho cả desktop thì chuyển rule này ra ngoài media query. */
  .tthn-shop-main ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Mô tả danh mục dưới lưới — thu gọn sẵn + nút Xem thêm / Thu gọn */
.tthn-shop-desc { margin-top: 36px; border-top: 1px solid var(--tthn-line); padding-top: 22px; }
.tthn-shop-desc__body {
  position: relative; overflow: hidden; max-height: 12em;
  color: var(--tthn-muted); font-size: 14.5px; line-height: 1.7;
}
.tthn-shop-desc__body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4em;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
/* Nội dung SEO có thể rất dài → không animate max-height (jank); mở tức thì + fade nhẹ. */
.tthn-shop-desc.is-open .tthn-shop-desc__body { max-height: none; animation: tthn-desc-in .3s ease; }
.tthn-shop-desc.is-open .tthn-shop-desc__body::after { display: none; }
@keyframes tthn-desc-in { from { opacity: .3; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tthn-shop-desc__toggle {
  display: flex; align-items: center; gap: 8px;
  margin: 18px auto 0; padding: 2px 15px;
  background: #fff; border: 1px solid var(--tthn-primary); border-radius: 999px;
  cursor: pointer; font: inherit; font-weight: 700; color: var(--tthn-accent);
  transition: background .18s ease, color .18s ease;
}
.tthn-shop-desc__toggle:hover { background: var(--tthn-primary); color: var(--tthn-on-primary); }
.tthn-shop-desc__toggle::after { content: "\25be"; font-size: 12px; }
.tthn-shop-desc.is-open .tthn-shop-desc__toggle::after { content: "\25b4"; }
.tthn-shop-desc__less { display: none; }
.tthn-shop-desc.is-open .tthn-shop-desc__more { display: none; }
.tthn-shop-desc.is-open .tthn-shop-desc__less { display: inline; }

/* TTHN3.1 fix: badge sale về góc trái-trên như mockup; nút chi tiết full width */
.tthn-shop-main li.product { position: relative; }
.tthn-shop-main li.product .onsale,
.tthn-shop-main li.product .tthn-badge {
  position: absolute; top: 0; left: 0; right: auto; margin: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px;
  background: var(--tthn-sale); color: #fff; border-radius: 0 0 5px 0;
  font-size: 15px; font-weight: 800; min-height: 0; line-height: 1.1; letter-spacing: .5px;
  border: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* Ghi đè vị trí của WooCommerce (.woocommerce ul.products li.product .onsale { top:0; right:0 })
   để tag giảm giá dính sát góc trái-trên ảnh. */
.woocommerce .tthn-shop-main ul.products li.product .onsale,
.woocommerce .tthn-shop-main ul.products li.product .tthn-badge,
.woocommerce .tthn-related-band ul.products li.product .onsale {
  top: 0; left: 0; right: auto; margin: 0; /* huỷ margin-top:-.5em của WooCommerce */
}

/* Ảnh thumb phải lấp đầy ô 4/5 (WooCommerce ép img height:auto → dư/thiếu khoảng trắng) */
.woocommerce .tthn-shop-main ul.products li.product .tthn-card-media img,
.woocommerce .tthn-related-band ul.products li.product .tthn-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block; margin: 0;
}

/* ==========================================================================
   TTHN3.2 — Trang chi tiết sản phẩm (skin WooCommerce single qua hook + CSS)
   Bố cục theo demo: thẻ trắng nội dung + sidebar phải 9/3, hộp giá có badge %,
   2 nút mua lớn, tabs trong thẻ, "sản phẩm liên quan" carousel nền xám.
   ========================================================================== */
.tthn-single-section { padding: 28px 0 0; }

/* Breadcrumb dạng thanh mảnh (không còn hero gradient) */
.tthn-breadcrumb--bar {
  font-size: 13.5px; color: var(--tthn-muted); opacity: 1; margin-bottom: 18px;
}
.tthn-breadcrumb--bar a { color: var(--tthn-muted); }
.tthn-breadcrumb--bar a:hover { color: var(--tthn-primary-dark); text-decoration: underline; }

/* ---- Lưới 9/3: .tthn-single-main (cột chính) | .tthn-single-side ---- */
.tthn-single-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px; align-items: start;
}
.tthn-single-main { display: grid; gap: 24px; min-width: 0; }
/* grid item không được phình quá track (min-width:auto mặc định làm ảnh/gallery đẩy tràn) */
.tthn-single-main > * { min-width: 0; }
.woocommerce .tthn-single-main > div.product { overflow: hidden; }
.tthn-single-main > .woocommerce-notices-wrapper:empty { display: none; }

/* Thẻ trắng dùng chung cho thẻ sản phẩm + ô tabs */
.woocommerce .tthn-single-main > div.product,
.tthn-single-tabs.tthn-card {
  background: #fff; border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius); box-shadow: var(--tthn-shadow);
  padding: 28px; position: relative; margin: 0;
}

/* gallery | summary bên trong thẻ sản phẩm */
@media (min-width: 769px) {
  .woocommerce .tthn-single-main > div.product {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px; align-items: start;
    grid-template-rows: auto 1fr; /* hàng 1 = đúng chiều cao gallery; phần dư của summary dồn xuống hàng 2 */
  }
  .tthn.woocommerce div.product > .woocommerce-product-gallery,
  .tthn.woocommerce div.product > .summary { width: 100%; float: none; margin: 0; }
  .woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; }
  .woocommerce div.product > .summary { grid-column: 2; grid-row: 1 / span 2; }
  .woocommerce div.product > .upsells,
  .woocommerce div.product > .woocommerce-product-rating { grid-column: 1 / -1; }
}
.woocommerce div.product > .upsells { margin-top: 40px; }

/* TTHN3.17 — "Sản phẩm đã xem": dải ngang cuối trang (dưới "Sản phẩm tương tự"), tối đa 4 thẻ nhỏ.
   Thẻ `<section class="tthn-section tthn-recent" hidden>` — `recent-viewed.js` bỏ `hidden` khi có dữ liệu. */
.tthn-section.tthn-recent { padding: 36px 0 44px; }
.tthn-section.tthn-recent[hidden] { display: none; }
.tthn-recent__title { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: var(--tthn-text); }
.tthn-recent__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tthn .tthn-recent__list a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; height: 100%;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm); color: var(--tthn-text);
}
.tthn .tthn-recent__list a:hover { border-color: var(--tthn-primary-dark); color: var(--tthn-primary-dark); }
.tthn-recent__list img { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border-radius: 5px; background: var(--tthn-surface); }
.tthn-recent__list span { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1024px) { .tthn-recent__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tthn-recent__list { grid-template-columns: 1fr; } }

/* Sale flash → cờ "-N%" góc trái-trên ảnh */
.woocommerce div.product > span.onsale {
  position: absolute; top: 0; left: 0; right: auto; z-index: 2; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  background: var(--tthn-sale); color: #fff; border-radius: 0 0 5px 0;
  font-size: 19px; font-weight: 800; min-height: 0; line-height: 1.1; letter-spacing: .5px;
  border: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

/* ---- Gallery ---- */
/* container: block (KHÔNG grid — grid làm flexslider đo sai width → ảnh tràn phải),
   không viền: ảnh chính và ô thumbnail mỗi phần tự có viền riêng. */
.woocommerce div.product .woocommerce-product-gallery {
  position: relative; border: 0; background: none; margin: 0;
  width: 100%; max-width: 100%; float: none;
}
/* ảnh chính = ô riêng, không cho tràn khỏi cột */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  overflow: hidden; background: var(--tthn-surface);
  max-width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image { max-width: 100%; }

/* Nút zoom (kính lúp) trên ảnh SP: WooCommerce đặt `z-index: 99` — CAO HƠN cả header
   (`.tthn-header` z-index 50) lẫn panel menu cấp 2-3 (`.tthn-nav .sub-menu` z-index 60, nằm
   TRONG stacking context của header) → khi menu xổ xuống, nút zoom vẽ ĐÈ lên menu.
   Hạ về 9 (dưới header 50) → menu luôn nằm trên. Selector (0,4,2) thắng rule WooCommerce
   `.woocommerce-product-gallery__trigger` (0,1,0). Vẫn trên ảnh/thumbnail (z-index auto). */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { z-index: 9; }

/* ---- Ô thumbnail riêng dưới ảnh chính + nút mũi tên 2 đầu (do single-gallery.js bọc) ---- */
.tthn-thumbs {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  padding: 10px; background: #fff;
}
.tthn-thumbs .flex-control-thumbs {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 10px;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.tthn-thumbs .flex-control-thumbs::-webkit-scrollbar { display: none; }
.tthn-thumbs-nav {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--tthn-line); background: #fff; color: var(--tthn-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.tthn-thumbs-nav:hover:not(:disabled) { background: var(--tthn-surface); border-color: var(--tthn-primary-dark); color: var(--tthn-primary-dark); }
.tthn-thumbs-nav:disabled { opacity: .3; cursor: default; }
.tthn-thumbs-nav svg { width: 15px; height: 15px; }

/* thumbnail (áp dụng cả khi chưa/không bọc bởi JS) */
.woocommerce div.product .flex-control-thumbs {
  display: flex; flex-wrap: nowrap; gap: 10px; list-style: none;
  margin: 0; padding: 0; overflow-x: auto;
}
.woocommerce div.product .flex-control-thumbs li { width: 72px; flex: 0 0 72px; margin: 0; }
.woocommerce div.product .flex-control-thumbs img {
  width: 100%; border: 2px solid transparent; border-radius: 5px;
  cursor: pointer; aspect-ratio: 1; object-fit: cover;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { border-color: var(--tthn-primary-dark); }

/* Mũi tên prev/next của flexslider (ảnh chính) */
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav {
  list-style: none; margin: 0; padding: 0;
}
.woocommerce div.product .flex-direction-nav a {
  position: absolute; top: 42%; width: 40px; height: 40px; display: flex;
  align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(255, 255, 255, .92); box-shadow: var(--tthn-shadow);
  color: var(--tthn-text); font-size: 0; opacity: 0; transition: opacity .2s ease; z-index: 3;
}
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce div.product .flex-direction-nav a.flex-prev { left: 12px; }
.woocommerce div.product .flex-direction-nav a.flex-next { right: 12px; }
.woocommerce div.product .flex-direction-nav a::before {
  font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1;
}
.woocommerce div.product .flex-direction-nav a.flex-prev::before { content: "\276E"; }
.woocommerce div.product .flex-direction-nav a.flex-next::before { content: "\276F"; }

/* ---- Summary ---- */
.woocommerce div.product .summary { margin: 0; }
.woocommerce div.product .summary .tthn-card-cat { display: block; margin-bottom: 6px; font-size: 12.5px; }
.woocommerce div.product .summary .product_title {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; margin: 4px 0 16px; line-height: 1.3;
}
.woocommerce div.product .summary .woocommerce-product-rating { margin: 0 0 16px; font-size: 13.5px; color: var(--tthn-muted); }
.woocommerce div.product .summary .woocommerce-product-rating .star-rating { color: var(--tthn-star); }

/* Hộp giá + badge % giảm — 2026-09-17 (yêu cầu Tùng, sau TTHN3.9): muốn **số đánh giá của khách hàng
   nằm trên 1 DÒNG RIÊNG, phía dưới mới là phần giá**.
   DOM do WooCommerce in là CỐ ĐỊNH `[.woocommerce-product-rating][.price][.tthn-price-off]` (rating và
   price cùng prio 10 nên không chèn được `<div>` bọc giữa) ⇒ đổi flex row → GRID 2 cột:
   hàng 1 = số đánh giá (trải hết 2 cột), hàng 2 = giá (cột 1) + tag "Tiết kiệm" (cột 2, dồn phải).
   Đo TRƯỚC (1440): rating **159×54** nằm NGANG hàng giá — chữ "(N đánh giá của khách hàng)" bị
   xuống 2 hàng vì chỉ được 159px; SAU: rating **435×27** (1 hàng) rồi giá ở dòng dưới. */
.tthn-price-box {
  background: var(--tthn-surface); border-radius: var(--tthn-radius);
  padding: 16px 20px; margin: 0 0 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
}
/* Hàng 1 — số đánh giá: flex để sao + chữ luôn CÙNG MỘT HÀNG (WC đặt `.star-rating` float: right,
   trong flex thì float bị bỏ qua). */
.woocommerce div.product .summary .tthn-price-box .woocommerce-product-rating {
  grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  margin: 0; font-size: 13.5px;
}
/* Bỏ `margin-top` (~0.5em = 6.75px) mà WooCommerce/theme đặt cho `.star-rating`: giữ nó thì sao bị
   đẩy XUỐNG 3px so với dòng chữ cùng hàng (đo pixel 1440: tâm glyph sao y=317 vs tâm chữ y=314);
   bỏ đi thì `align-items: center` căn giữa đúng (tâm sao ≈ tâm chữ ≈ 314) ✓. */
.woocommerce div.product .summary .tthn-price-box .woocommerce-product-rating .star-rating { margin-top: 0; }
.woocommerce div.product .summary .tthn-price-box .price {
  min-width: 0;
  margin: 0; padding: 0; border: 0; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 12px; font-size: 20px; color: var(--tthn-accent); font-weight: 800;
}
.woocommerce div.product .summary .tthn-price-box .price del { font-size: 14px; color: var(--tthn-muted); font-weight: 400; opacity: 1; }
.woocommerce div.product .summary .tthn-price-box .price ins { text-decoration: none; }
/* Tag "Tiết kiệm <số tiền>" — cùng hàng với giá, dồn về mép phải (cột 2 của grid). */
.tthn-price-off {
  justify-self: end; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 4px;
  background: rgba(200, 71, 31, .1); color: var(--tthn-accent);
  font-weight: 700; font-size: 10px; padding: 5px 10px; border-radius: 999px;
}
.tthn-price-off .woocommerce-Price-amount { font-weight: 800; }

/* Mô tả ngắn — hộp nổi bật, hiện đầy đủ (2026-10-10 Tùng: bỏ nút Xem thêm / Thu gọn) */
.woocommerce div.product .summary .tthn-short-desc {
  margin: 4px 0 22px; padding: 16px 18px;
  background: var(--tthn-surface); border-left: 3px solid var(--tthn-primary);
  border-radius: var(--tthn-radius-sm);
}
.tthn-short-desc__body { color: var(--tthn-text); font-size: 15px; line-height: 1.75; }
.woocommerce div.product .summary .product_meta {
  font-size: 13.5px; color: var(--tthn-muted); display: grid; gap: 6px;
  border-top: 1px dashed var(--tthn-line); padding-top: 14px; margin-top: 4px;
}
.woocommerce div.product .summary .product_meta > span { display: block; }
.woocommerce div.product .summary .product_meta a { color: var(--tthn-text); }
.woocommerce div.product .summary .product_meta a:hover { color: var(--tthn-primary-dark); }
/* Ẩn dòng "Thẻ:" / tag khỏi trang chi tiết */
.woocommerce div.product .summary .product_meta .tagged_as { display: none; }
.woocommerce div.product .summary .stock { color: var(--tthn-accent); font-weight: 600; margin: 0 0 16px; }

/* ---- Form mua hàng: 2 nút lớn ---- */
.tthn-single-layout form.cart {
  /* 50/50: 2 nút chia đều chiều rộng. `minmax(0, 1fr)` cho phép co lại khi cột hẹp
     (nhãn "THÊM VÀO GIỎ HÀNG" cần ~195px, ở desktop mỗi nút ~228px nên vẫn 1 dòng). */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  align-items: stretch; margin: 0 0 12px;
}
/* WooCommerce: `.woocommerce div.product form.cart { margin-bottom: 2em; padding: ... }` thắng rule trên → khoảng cách 2 hàng nút bị phình (~30px + 12px đệm). Ghi đè để 2 hàng cách đúng 12px. */
.woocommerce .tthn-single-layout div.product form.cart { margin: 0 0 12px; padding: 0; }
.tthn-single-layout form.cart .quantity { display: none; }
/* clearfix ::before/::after của WooCommerce thành 2 ô lưới rỗng → đẩy nút xuống 14px + dư 10px dưới (đo) */
.woocommerce .tthn-single-layout div.product form.cart::before,
.woocommerce .tthn-single-layout div.product form.cart::after { content: none; display: none; }
.tthn-buynow {
  grid-column: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: left;
  background: #1a7f45; color: #fff; border-radius: var(--tthn-radius-sm);
  /* `min-height: 54px` = đúng chiều cao nút "Thêm vào giỏ hàng" (nút đó cũng có min-height 54px).
     Desktop 2 nút cùng hàng nên đã bằng nhau nhờ `align-items: stretch`; ở mobile mỗi nút 1 hàng
     nên PHẢI khai min-height, không thì nút này thấp hơn (đo được 46px so với 54px). */
  padding: 10px 16px; min-height: 54px; line-height: 1.3; transition: background .2s ease;
}
.tthn-buynow:hover { background: #146637; color: #fff; }
.tthn-buynow__ic { flex: 0 0 auto; display: inline-flex; }
.tthn-buynow__ic svg { width: 22px; height: 22px; }
.tthn-buynow__txt { display: flex; flex-direction: column; }
.tthn-buynow strong { font-size: 14.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.woocommerce .tthn-single-layout form.cart .single_add_to_cart_button {
  grid-column: 2; height: auto; min-height: 54px; border-radius: var(--tthn-radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: var(--tthn-primary); color: var(--tthn-on-primary); border: 0; float: none;
  font-weight: 700; font-size: 14.5px; text-transform: uppercase; letter-spacing: .4px;
}
.woocommerce .tthn-single-layout form.cart .single_add_to_cart_button::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce .tthn-single-layout form.cart .single_add_to_cart_button:hover { background: var(--tthn-primary-dark); }

/* Hàng nút liên hệ: Gọi (navy) + Zalo (xanh) */
.tthn-single-layout .tthn-contact-row { /* nằm NGOÀI form giỏ (summary @31) để hiện cả khi SP chưa có giá */
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px;
}
/* `padding: 10px` — Tùng chốt 2026-09-18: hiện KHÔNG đổi hình vì `height: 54px` + flex center đã lo phần đệm
   (đo 1280/1024/768/390 khi còn 48px: nút 192–342 × 48, số dòng chữ y hệt, tràn ngang 0). Giữ để code rõ ràng và sẵn
   khi nào bỏ `height` (bỏ height mà không có padding ⇒ chữ sát mép nút). */
.tthn-contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 10px; border-radius: var(--tthn-radius-sm);
  font-weight: 700; font-size: 14.5px; letter-spacing: .2px; transition: background .18s ease;
}
.tthn-contact-btn__ic { flex: 0 0 auto; display: inline-flex; }
.tthn-contact-btn__ic svg { width: 22px; height: 22px; }
.tthn-contact-btn--call { background: var(--tthn-accent); }
.tthn-contact-btn--call:hover { background: var(--tthn-accent-dark); }
.tthn-contact-btn--zalo { background: #0059d6; } /* #0068ff gốc: chữ trắng chỉ ~4.9:1 → đậm hơn ~6.4:1 */
.tthn-contact-btn--zalo:hover { background: #0049b0; }
/* TTHN3.15 — "Yêu cầu báo giá": hàng riêng, rộng bằng Gọi + Zalo cộng lại; vàng nổi (chữ navy) */
.tthn-contact-btn--quote { grid-column: 1 / -1; background: var(--tthn-gold); box-shadow: 0 6px 16px rgba(242, 189, 61, .4); }
.tthn-contact-btn--quote:hover { background: #e6aa1f; }
.tthn a.tthn-contact-btn--quote { color: var(--tthn-on-gold); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }

/* TTHN3.2 — Bảng trong nội dung admin (tab Mô tả/Đánh giá…) phải có kẻ: trình duyệt mặc định border 0.
   Loại `shop_attributes` (đã có skin riêng ở trên). Bảng rộng hơn khung → cuộn ngang thay vì tràn trang. */
.tthn-single-tabs table:not(.shop_attributes) {
  width: 100%; border-collapse: collapse; margin: 0 0 18px; table-layout: auto;
}
.tthn-single-tabs table:not(.shop_attributes) th,
.tthn-single-tabs table:not(.shop_attributes) td {
  border: 1px solid var(--tthn-line); padding: 10px 14px; vertical-align: top; text-align: left;
}
.tthn-single-tabs table:not(.shop_attributes) th { background: var(--tthn-surface); font-weight: 700; }
.tthn-single-tabs table:not(.shop_attributes) img { max-width: 100%; height: auto; }

/* ---- Sidebar phải ---- */
.tthn-single-side { position: sticky; top: 100px; display: grid; gap: 20px; }
/* TTHN3.17: cột phải DÍNH chỉ còn 2 hộp (Hỗ trợ + Cam kết ≈ 590px) để luôn nằm gọn trong 1 màn hình;
   hộp "Sản phẩm mới" đã bỏ khỏi cột này (trùng dải "Sản phẩm tương tự" ở dưới — hàm `tthn_single_new_products_box()` vẫn còn nếu cần gắn lại). */
.tthn-side-box {
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  box-shadow: var(--tthn-shadow); padding: 20px;
}
.tthn-side-box h4 {
  margin: 0 0 12px; font-size: 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--tthn-primary);
}
/* Ô "Cam kết Thaco Tải Hà Nội" — cột phải trang chi tiết SP */
.tthn-trust-list { display: grid; }
.tthn-trust-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--tthn-line);
}
.tthn-trust-item:first-child { padding-top: 0; }
.tthn-trust-item:last-child { border-bottom: 0; padding-bottom: 0; }
.tthn-trust-item__ic { flex: 0 0 auto; display: inline-flex; color: var(--tthn-primary-dark); }
.tthn-trust-item__ic svg { width: 30px; height: 30px; }
.tthn-trust-item__label {
  font-weight: 700; font-size: 13px; line-height: 1.35;
  text-transform: uppercase; letter-spacing: .5px; color: var(--tthn-text);
}

/* Box "Sản phẩm mới" — cột phải chi tiết SP */
.tthn-side-news { list-style: none; margin: 0; padding: 0; }
.tthn-side-news li[hidden] { display: none; }
.tthn-featured-box__more {
  display: block; width: 100%; margin-top: 10px; padding: 9px; background: none; cursor: pointer;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--tthn-primary-dark);
}
.tthn-featured-box__more:hover { border-color: var(--tthn-primary-dark); }
.tthn-side-news li { border-bottom: 1px dashed var(--tthn-line); }
.tthn-side-news li:last-child { border-bottom: 0; }
.tthn-side-news a { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.tthn-side-news__thumb {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 5px;
  overflow: hidden; background: var(--tthn-surface);
}
.tthn-side-news__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tthn-side-news__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tthn-side-news__name {
  font-size: 13.5px; font-weight: 600; color: var(--tthn-text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tthn-side-news a:hover .tthn-side-news__name { color: var(--tthn-primary-dark); }
.tthn-side-news__price { font-size: 13px; font-weight: 700; color: var(--tthn-accent); }
.tthn-side-news__price del { color: var(--tthn-muted); font-weight: 400; font-size: 12px; }

.tthn-side-cats { list-style: none; margin: 0; padding: 0; }
/* wp_list_categories: <li class="cat-item"><a>Tên</a> (n) — số đếm là text node, không phải span */
.tthn-side-cats li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0; border-bottom: 1px dashed var(--tthn-line);
  color: var(--tthn-muted); font-size: 13px;
}
.tthn-side-cats li:last-child { border-bottom: 0; }
.tthn-side-cats a { padding: 9px 0; color: var(--tthn-text); font-size: 14.5px; }
.tthn-side-cats a:hover { color: var(--tthn-primary-dark); }
.tthn-side-cats .children { flex-basis: 100%; padding-left: 12px; }
.tthn-side-support-label { margin: 0; font-weight: 600; font-size: 14px; }
.tthn-side-support-tel {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 8px;
  font-size: 22px; font-weight: 800; color: var(--tthn-accent);
}
.tthn-side-support-tel .ic { display: inline-flex; }
/* Hotline chi nhánh: mỗi dòng "tên — số" canh đều 2 mép, bấm gọi được */
.tthn-side-branches {
  list-style: none; margin: 0 0 14px; padding: 0;
  border-top: 1px dashed var(--tthn-line);
}
.tthn-side-branches li { border-bottom: 1px dashed var(--tthn-line); }
.tthn-side-branches li:last-child { border-bottom: 0; }
.tthn-side-branches a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 0; font-size: 13.5px;
}
.tthn-side-branches a:hover .tthn-side-branch__num { color: var(--tthn-accent-dark); }
.tthn-side-branch__name { color: var(--tthn-muted); }
.tthn-side-branch__num { font-weight: 700; color: var(--tthn-accent); white-space: nowrap; }
.tthn-side-support-note { margin: 0; color: var(--tthn-muted); font-size: 13px; }

/* ---- Tabs (trong thẻ) ---- */
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0;
  border-bottom: 1px solid var(--tthn-line);
}
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs li::before,
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs li a {
  display: block; padding: 14px 20px; font-weight: 600; color: var(--tthn-muted);
  position: relative; text-transform: uppercase; font-size: 13.5px; letter-spacing: .3px;
}
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs li.active a { color: var(--tthn-primary-dark); }
.woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs li.active a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--tthn-primary);
}
.woocommerce .tthn-single-tabs .woocommerce-Tabs-panel {
  padding: 24px 2px; color: var(--tthn-muted); line-height: 1.8;
}
.woocommerce .tthn-single-tabs .woocommerce-Tabs-panel > h2,
.woocommerce .tthn-single-tabs .woocommerce-Tabs-panel h3 { color: var(--tthn-text); font-size: 18px; margin: 22px 0 10px; }
.woocommerce .tthn-single-tabs .woocommerce-Tabs-panel > h2:first-child { margin-top: 0; }
.woocommerce .tthn-single-tabs table.shop_attributes th { background: var(--tthn-surface); color: var(--tthn-text); width: 40%; }
.woocommerce .tthn-single-tabs table.shop_attributes th,
.woocommerce .tthn-single-tabs table.shop_attributes td { border: 1px solid var(--tthn-line); padding: 11px 14px; }

/* TTHN3.8 — Tab "Mô tả" thu gọn sẵn + nút Xem thêm / Thu gọn (tái dùng NGUYÊN khối `.tthn-shop-desc`
   của TTHN3.1: thanh nút viên, gradient mờ dần, class `is-open`), chỉ chỉnh cho hợp ngữ cảnh TAB:
   - `.tthn-shop-desc` gốc là khối DƯỚI lưới danh mục nên có `margin-top: 36px` + `border-top` + padding
     trên → trong tab phải bỏ hết;
   - giữ đúng typography của panel tab (`color: var(--tthn-muted)` + `line-height: 1.8` của
     `.woocommerce-Tabs-panel`) ⇒ KHÔNG để body ăn `font-size: 14.5px` / `line-height: 1.7` của TTHN3.1;
   - ngưỡng thu gọn **24em** thay 12em: đo được nội dung mô tả dài 6430 ký tự (panel 5229px) nên 12em
     quá ngắn, 24em ≈ 12–14 dòng — đủ để "đọc thử" rồi mới bấm Xem thêm. */
.tthn-single-tabs .tthn-single-desc { margin-top: 0; border-top: 0; padding-top: 0; }
.tthn-single-tabs .tthn-single-desc .tthn-shop-desc__body {
  max-height: 24em; font-size: inherit; line-height: inherit; color: inherit;
}
/* BẪY specificity: rule trên (0,3,0) nằm SAU rule gốc `.tthn-shop-desc.is-open .tthn-shop-desc__body`
   cũng (0,3,0) của TTHN3.1 ⇒ `max-height: none` khi mở KHÔNG chạy (đo được: bấm “Xem thêm” nhãn đổi
   nhưng panel vẫn 499px). Phải nâng lên (0,4,0) cho trạng thái mở. */
.tthn-single-tabs .tthn-single-desc.is-open .tthn-shop-desc__body { max-height: none; }

/* TTHN3.2 — Thông số kỹ thuật (thẻ riêng dưới thẻ sản phẩm, trên ô mô tả) */
.tthn-spec { padding: 28px; margin-top: 24px; }
.tthn-spec__title {
  margin: 0 0 18px; font-size: 18px; font-weight: 700;
  padding-bottom: 12px; border-bottom: 2px solid var(--tthn-primary);
}
.tthn-spec__grid {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--tthn-line); border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius-sm); overflow: hidden;
}
.tthn-spec__row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #fff; }
.tthn-spec__ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--tthn-primary-tint); color: var(--tthn-primary-dark);
}
/* Nhãn + giá trị trên CÙNG 1 dòng ("Kích thước: 1m x 3m") — dùng dòng chảy inline
   thay vì flex để dấu cách và dấu ":" không phụ thuộc `gap`. */
.tthn-spec__text { min-width: 0; }
.tthn-spec__label {
  display: inline; margin: 0; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; color: var(--tthn-muted);
}
.tthn-spec__label::after { content: ": "; }
.tthn-spec__value { display: inline; margin: 0; font-size: 15px; font-weight: 600; color: var(--tthn-text); line-height: 1.5; }

/* ---- "Sản phẩm liên quan" — carousel cuộn ngang, nền xám full-width ---- */
.tthn-related-band { background: var(--tthn-surface); margin-top: 44px; padding: 40px 0 44px; }
.tthn-related-band .related > h2,
.tthn-related-band .upsells > h2 {
  font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; margin: 0 0 22px; text-transform: uppercase;
}
.woocommerce .tthn-related-band .related ul.products,
.woocommerce .tthn-related-band ul.products {
  list-style: none; margin: 0; padding: 4px 0 12px; display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.woocommerce .tthn-related-band ul.products li.product {
  float: none; width: auto; margin: 0; padding: 0;
  flex: 0 0 calc((100% - 60px) / 4); min-width: 0; scroll-snap-align: start; /* 4 cột/1 hàng; dư SP → nút ‹ › cuộn (TTHN3.7) */
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (max-width: 1024px) { .woocommerce .tthn-related-band ul.products li.product { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 640px) { .woocommerce .tthn-related-band ul.products li.product { flex-basis: calc((100% - 20px) / 2); } }
.woocommerce .tthn-related-band ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--tthn-shadow-lg); }
/* TTHN3.7 — ẩn thanh trượt của dải (giống dải cuộn TTHN2.8 trang chủ): người dùng cuộn bằng chuột/
   trackpad hoặc 2 nút ‹ › do JS (`assets/scroller.js`) gắn vào. `scrollbar-width` cho Firefox,
   `-ms-overflow-style` cho Edge cũ; bản WebKit/Blink ẩn bằng pseudo-element. */
.woocommerce .tthn-related-band ul.products { scrollbar-width: none; -ms-overflow-style: none; }
.woocommerce .tthn-related-band ul.products::-webkit-scrollbar { display: none; }
.woocommerce .tthn-related-band li.product .onsale {
  position: absolute; top: 0; left: 0; right: auto; margin: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px;
  background: var(--tthn-sale); color: #fff; border-radius: 0 0 5px 0;
  font-size: 15px; font-weight: 800; min-height: 0; line-height: 1.1; letter-spacing: .5px;
  border: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.woocommerce .tthn-related-band ul.products li.product .price { color: var(--tthn-accent); font-weight: 700; font-size: 17px; margin-top: auto; }
.woocommerce .tthn-related-band ul.products li.product .price del { color: var(--tthn-muted); font-weight: 400; font-size: 13px; }
.woocommerce .tthn-related-band ul.products li.product .price ins { text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .tthn-single-layout { grid-template-columns: 1fr; }
  .tthn-single-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Thẻ sản phẩm + ô tabs: giảm padding cho gọn trên mobile.
     Selector phải là `.tthn-single-main > div.product` (đúng cấu trúc DOM);
     bản cũ dùng `.tthn-single-layout > div.product` nên KHÔNG khớp phần tử nào. */
  .woocommerce .tthn-single-main > div.product,
  .tthn-single-tabs.tthn-card { padding: 15px; }
  /* Mobile (TTHN3.17): thẻ sản phẩm (giá → mô tả ngắn → nút) → Thông số → ô tabs (Mô tả/Đánh giá) → các hộp phụ ở cuối.
     `.tthn-single-side` là sibling của `.tthn-single-main` nên không chen vào giữa được bằng CSS
     thường → `display: contents` làm phẳng 2 container, các con thành item của `.tthn-single-layout` rồi xếp bằng `order`. */
  .tthn-single-layout { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
  .tthn-single-main, .tthn-single-side { display: contents; }
  .woocommerce .tthn-single-main > div.product { order: 1; }
  .tthn-single-main > .tthn-spec { order: 2; }
  .tthn-single-main > .tthn-single-tabs { order: 3; }
  .tthn-single-side > .tthn-side-support { order: 4; }
  .tthn-single-side > .tthn-trust-box { order: 5; }
  .woocommerce div.product > span.onsale { font-size: 16px; padding: 8px 14px; top: 0; left: 0; }
  /* Mobile: 1 CỘT — hàng 1 = số đánh giá, hàng 2 = giá, hàng 3 = tag "Tiết kiệm" (đủ chỗ, không
     cần dồn phải). Giữ đúng yêu cầu "số đánh giá 1 dòng riêng, dưới là giá" của desktop. */
  .tthn-price-box { padding: 14px 16px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tthn-price-box .tthn-price-off { justify-self: start; }
  .tthn-single-side { grid-template-columns: 1fr; }
  .tthn-single-layout form.cart { grid-template-columns: 1fr; }
  .tthn-buynow, .woocommerce .tthn-single-layout form.cart .single_add_to_cart_button { grid-column: 1; }
  /* Mobile: nhãn nút gọi chỉ còn "Gọi ngay", ẩn số hotline (số vẫn nằm trong href tel:) */
  .tthn-tel-num { display: none; }
  .woocommerce .tthn-single-tabs .woocommerce-tabs ul.tabs li a { padding: 12px 14px; font-size: 12.5px; }
  .tthn-spec { padding: 15px; }
  .tthn-spec__grid { grid-template-columns: 1fr; }
}

/* ================= TTHN3.3 — Popup "Đặt hàng nhanh" ================= */
.tthn-quick-order {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.tthn-quick-order[hidden] { display: none; }
.tthn-quick-order__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.tthn-quick-order__dialog {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: var(--tthn-radius); padding: 24px;
  box-shadow: var(--tthn-shadow-lg);
}
.tthn-quick-order__title-ic { flex: 0 0 auto; width: 22px; height: 22px; color: var(--tthn-primary); }
.tthn-quick-order__close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--tthn-muted);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.tthn-quick-order__close:hover { background: var(--tthn-surface); color: var(--tthn-text); }
.tthn-quick-order__title {
  margin: 0 0 14px; padding-right: 36px;
  font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
}
.tthn-quick-order__product {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px;
  background: var(--tthn-surface); border-radius: var(--tthn-radius-sm);
}
.tthn-quick-order__thumb img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 5px; }
.tthn-quick-order__meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tthn-quick-order__name { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.tthn-quick-order__price { color: var(--tthn-accent); font-size: 15px; font-weight: 800; }
.tthn-quick-order__price del { color: var(--tthn-muted); font-size: 13px; font-weight: 400; margin-right: 6px; }
/* Số lượng đặt ngay trong khối sản phẩm (input nằm trong <form> nên vẫn được gửi).
   Selector có tiền tố `.tthn-quick-order` để thắng rule input chung ở dưới. */
.tthn-quick-order__qty { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tthn-quick-order__qty-label { font-size: 12.5px; font-weight: 600; color: var(--tthn-muted); }
.tthn-quick-order .tthn-quick-order__qty input[type="number"] {
  width: 64px; padding: 5px 10px; text-align: center;
  font-weight: 700; background: #fff;
}
.tthn-quick-order__field { display: block; margin: 0 0 12px; }
.tthn-quick-order__field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.tthn-quick-order__field em { color: var(--tthn-sale); font-style: normal; }
.tthn-quick-order input[type="text"],
.tthn-quick-order input[type="tel"],
.tthn-quick-order input[type="number"],
.tthn-quick-order textarea {
  width: 100%; background: #fff;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
  font: inherit; font-size: 16px; /* 16px: iOS không tự zoom khi focus vào ô nhập */
  color: var(--tthn-text);
}
/* Ô nhập 1 dòng (họ tên / SĐT / số lượng): padding gọn; textarea để rộng rãi hơn. */
.tthn-quick-order input[type="text"],
.tthn-quick-order input[type="tel"],
.tthn-quick-order input[type="number"] { padding: 5px 10px; }
.tthn-quick-order textarea { padding: 11px 13px; resize: vertical; }
.tthn-quick-order input:focus,
.tthn-quick-order textarea:focus { outline: 2px solid var(--tthn-primary); outline-offset: 1px; border-color: var(--tthn-primary-dark); }
/* Honeypot: người thật không thấy, bot điền → server chặn */
.tthn-quick-order__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tthn-quick-order__submit {
  width: 100%; min-height: 52px; margin-top: 4px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tthn-accent); color: #fff; border-radius: var(--tthn-radius-sm);
  font: inherit; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  transition: background .18s ease, opacity .18s ease;
}
.tthn-quick-order__submit-ic { display: inline-flex; flex: 0 0 auto; }
.tthn-quick-order__submit-ic svg { width: 18px; height: 18px; }
.tthn-quick-order__submit:hover { background: var(--tthn-accent-dark); }
.tthn-quick-order__submit[disabled] { opacity: .65; cursor: default; }
.tthn-quick-order__msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; }
.tthn-quick-order__msg.is-error { color: var(--tthn-sale); }
.tthn-quick-order__msg.is-ok { color: #1f8a4c; }
.tthn-quick-order__note { margin: 10px 0 0; font-size: 12.5px; color: var(--tthn-muted); text-align: center; }
body.tthn-qo-open { overflow: hidden; }

@media (max-width: 480px) {
  .tthn-quick-order { padding: 10px; }
  .tthn-quick-order__dialog { padding: 18px; }
  .tthn-quick-order__title { font-size: 18px; }
  .tthn-quick-order__thumb img { width: 48px; height: 48px; }
}
/* ================= TTHN3.4 — Trang giỏ hàng (/cart/) ================= */
/* ⚠️ `.tthn-cart-section` do PHP GHÉP ĐỘNG — `tthn_woo_page_wrap()` (inc/woocommerce.php) in
   `'tthn-section ' . $class . '-section'` với `$class = 'tthn-cart'` → grep tên class trong PHP
   KHÔNG thấy. Audit "CSS mồ côi" phải kiểm DOM THẬT của /cart/ rồi mới được xoá. */
.tthn-cart-section { padding: 40px 0 64px; }
/* Shortcode bọc thêm `div.woocommerce` (chứa cả .woocommerce-notices-wrapper) nên lưới
   đặt trên wrapper này, và phải chỉ định cột tường minh — nếu không, notices-wrapper
   (dù rỗng) chiếm ô 1 và đẩy form sang cột 2. */
.tthn-cart .woocommerce {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start;
}
.tthn-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.tthn-cart .woocommerce-notices-wrapper:empty { display: none; }
.tthn-cart .woocommerce-cart-form { grid-column: 1; }
.tthn-cart .cart-collaterals { grid-column: 2; }

/* ---------- Thông báo WooCommerce (giỏ hàng · shop · sản phẩm) ----------
   Mặc định WooCommerce dùng xanh lá #8fae1b cho viền trên + icon → đổi về vàng thương hiệu.
   (Trang thanh toán có khối riêng `.tthn-checkout ...` ở dưới, đã bỏ hẳn icon.) */
.woocommerce-error, .woocommerce-info, .woocommerce-message { margin: 1em 0 2em; }
.woocommerce-message { border-top-color: var(--tthn-primary); }
.woocommerce-message::before { color: var(--tthn-primary); }

/* ---- Bảng giỏ: card trắng ---- */
.tthn-cart .woocommerce-cart-form {
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  box-shadow: var(--tthn-shadow); padding: 4px 24px 20px;
}
.tthn-cart table.cart { margin: 0; border: 0; border-collapse: collapse; background: transparent; border-radius: 0; }
.tthn-cart table.cart thead th {
  padding: 16px 8px !important; background: transparent; border: 0;
  border-bottom: 1px solid var(--tthn-line);
  text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tthn-muted);
}
.tthn-cart table.cart td {
  padding: 18px 8px; border: 0; border-top: 0; border-bottom: 1px dashed var(--tthn-line);
  vertical-align: middle; font-size: 14.5px; background: transparent;
}
.tthn-cart table.cart tbody tr:last-child td { border-bottom: 0; }
.tthn-cart table.cart .product-thumbnail { min-width: 0; }
.tthn-cart table.cart .product-thumbnail img {
  display: block; width: 72px; height: 72px !important; max-width: none;
  object-fit: cover; border-radius: 5px; box-shadow: none;
}
.tthn-cart table.cart .product-name a { color: var(--tthn-text); font-weight: 700; font-size: 15px; line-height: 1.4; }
.tthn-cart table.cart .product-name a:hover { color: var(--tthn-primary-dark); }
.tthn-cart table.cart .product-price .amount { font-weight: 600; }
.tthn-cart table.cart .product-subtotal .amount { color: var(--tthn-accent); font-weight: 800; font-size: 16px; }
.tthn-cart table.cart .product-remove a.remove {
  display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto;
  background: var(--tthn-surface); color: var(--tthn-muted) !important;
  font-size: 20px; line-height: 1; text-decoration: none;
}
.tthn-cart table.cart .product-remove a.remove:hover { background: var(--tthn-sale); color: #fff !important; }
.tthn-cart table.cart .quantity .qty {
  width: 76px; padding: 5px 10px !important; text-align: center; font-weight: 700;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
  font-size: 16px; color: var(--tthn-text);
}
.tthn-cart table.cart .quantity .qty:focus { outline: 2px solid var(--tthn-primary); outline-offset: 1px; border-color: var(--tthn-primary-dark); }

/* ---- Hàng coupon + cập nhật giỏ (selector phải đủ mạnh để thắng CSS WooCommerce) ---- */
/* KHÔNG đặt display:flex lên <td> này — làm vậy sẽ mất `colspan="6"` và ô bị co về cột đầu.
   Giữ table-cell, cho coupon float trái + căn phải nút (đúng cách WooCommerce làm). */
.woocommerce-cart .tthn-cart table.cart td.actions {
  padding: 16px 8px 10px; text-align: right;
}
.woocommerce-cart .tthn-cart table.cart td.actions .coupon { float: left; display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.woocommerce-cart .tthn-cart table.cart td.actions .coupon .input-text {
  float: none; min-width: 220px; margin: 0; padding: 10px 14px; background: #fff;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
  font-size: 16px; line-height: 1.4; color: var(--tthn-text);
}
.woocommerce-cart .tthn-cart table.cart td.actions .button {
  float: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-height: 44px; padding: 0 20px; cursor: pointer; white-space: nowrap;
  background: var(--tthn-primary); color: var(--tthn-on-primary);
  border: 0; border-radius: var(--tthn-radius-sm);
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.woocommerce-cart .tthn-cart table.cart td.actions .button:hover,
.woocommerce-cart .tthn-cart table.cart td.actions .button:focus { background: var(--tthn-primary-dark); color: var(--tthn-on-primary); }
.woocommerce-cart .tthn-cart table.cart td.actions .button:disabled { opacity: .5; cursor: default; }

/* ---- Khối tổng tiền ---- */
.tthn-cart .cart-collaterals .cart_totals {
  float: none; width: auto;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  box-shadow: var(--tthn-shadow); padding: 22px 24px 24px;
}
.tthn-cart .cart-collaterals .cart_totals > h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.tthn-cart .cart-collaterals .cart_totals table { width: 100%; margin: 0; border: 0; }
.tthn-cart .cart-collaterals .cart_totals table th {
  width: auto; padding: 12px 0; background: transparent; border: 0;
  border-bottom: 1px dashed var(--tthn-line); white-space: nowrap;
  text-align: left; font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--tthn-muted);
}
.tthn-cart .cart-collaterals .cart_totals table td {
  padding: 12px 0; border: 0; border-bottom: 1px dashed var(--tthn-line);
  text-align: right; font-size: 14.5px;
}
.tthn-cart .cart-collaterals .cart_totals table tr.order-total th,
.tthn-cart .cart-collaterals .cart_totals table tr.order-total td {
  padding-top: 16px; border-bottom: 0; color: var(--tthn-text); font-weight: 700;
}
.tthn-cart .cart-collaterals .cart_totals table tr.order-total .amount { color: var(--tthn-accent); font-size: 22px; font-weight: 800; }
/* Khối "Tính phí vận chuyển" của WooCommerce: dòng phụ nhỏ, gọn trong card; bỏ pseudo-element
   dùng icon font của WooCommerce (trên môi trường này glyph hiện ra ô vuông lỗi dù file font
   `WooCommerce.woff2` CÓ tồn tại trong plugin → không phải lỗi thiếu file). */
.tthn-cart .cart_totals .woocommerce-shipping-destination,
.tthn-cart .cart_totals .woocommerce-shipping-calculator p,
.tthn-cart .cart_totals .woocommerce-shipping-calculator .form-row {
  margin: 4px 0 0; font-size: 12.5px; color: var(--tthn-muted); line-height: 1.5;
}
.tthn-cart .cart_totals .shipping-calculator-button {
  display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--tthn-accent);
}
.tthn-cart .cart_totals .shipping-calculator-button::after { content: none; }
.tthn-cart .cart_totals .shipping-calculator-form { margin-top: 10px; text-align: left; }
.tthn-cart .cart_totals .shipping-calculator-form select,
.tthn-cart .cart_totals .shipping-calculator-form input[type="text"] {
  width: 100%; padding: 5px 10px; background: #fff;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
  font-size: 16px; color: var(--tthn-text);
}
.tthn-cart .cart_totals .shipping-calculator-form button.button {
  width: 100%; min-height: 42px; margin-top: 8px; cursor: pointer;
  background: var(--tthn-primary); color: var(--tthn-on-primary);
  border: 0; border-radius: var(--tthn-radius-sm);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.tthn-cart .wc-proceed-to-checkout { padding: 8px 0 0; }
.tthn-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; margin: 0; padding: 0 18px; border-radius: var(--tthn-radius-sm);
  background: var(--tthn-accent); color: #fff !important;
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}
.tthn-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--tthn-accent-dark); }
/* Cross-sells (nếu shop có bán chéo) — 2 cột gọn trong cột phải */
.tthn-cart .cross-sells ul.products { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---- Giỏ trống ---- */
.tthn-cart .cart-empty { margin: 0 0 6px; font-size: 17px; font-weight: 700; text-align: center; }
.tthn-cart .return-to-shop { margin-top: 18px; text-align: center; }
.tthn-cart .return-to-shop a.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: var(--tthn-radius-sm);
  background: var(--tthn-primary); color: var(--tthn-on-primary);
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .tthn-cart .woocommerce { grid-template-columns: 1fr; gap: 24px; }
  .tthn-cart .woocommerce-cart-form, .tthn-cart .cart-collaterals { grid-column: 1; }
}
@media (max-width: 768px) {
  .tthn-cart-section { padding: 28px 0 44px; }
  .tthn-cart .woocommerce-cart-form { padding: 2px 14px 16px; }
  /* Mỗi sản phẩm thành 1 thẻ dọc: dùng data-title có sẵn của WooCommerce làm nhãn.
     Lưu ý: `woocommerce-smallscreen.css` ép `text-align: right !important` cho mọi td
     → 2 ô cần canh trái (thumbnail, tên SP) phải ghi đè bằng !important. */
  .tthn-cart table.cart_responsive thead, .tthn-cart table.shop_table_responsive thead { display: none; }
  /* WooCommerce zebra-stripe ô trên mobile (nền xám) — bỏ để hợp card trắng của theme */
  .woocommerce-cart .tthn-cart table.shop_table_responsive tr td,
  .woocommerce-cart .tthn-cart table.cart_responsive tr td { background-color: transparent; }
  .tthn-cart table.cart_responsive tr.cart_item, .tthn-cart table.shop_table_responsive tr.cart_item {
    position: relative; display: block; padding: 14px 0 10px;
    border-bottom: 1px dashed var(--tthn-line);
  }
  .tthn-cart table.cart_responsive tr.cart_item:last-child,
  .tthn-cart table.shop_table_responsive tr.cart_item:last-child { border-bottom: 0; }
  .tthn-cart table.cart_responsive tr.cart_item td,
  .tthn-cart table.shop_table_responsive tr.cart_item td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 5px 0; border: 0; text-align: right;
  }
  .tthn-cart table.cart_responsive tr.cart_item td::before,
  .tthn-cart table.shop_table_responsive tr.cart_item td::before {
    content: attr(data-title); flex: 0 0 auto; text-align: left;
    font-size: 13px; font-weight: 600; color: var(--tthn-muted);
  }
  .tthn-cart table.shop_table_responsive tr.cart_item td.product-remove,
  .tthn-cart table.cart_responsive tr.cart_item td.product-remove { position: absolute; top: 10px; right: 0; padding: 0; }
  .tthn-cart table.shop_table_responsive tr.cart_item td.product-remove::before,
  .tthn-cart table.cart_responsive tr.cart_item td.product-remove::before { content: none; }
  .tthn-cart table.shop_table_responsive tr.cart_item td.product-thumbnail,
  .tthn-cart table.cart_responsive tr.cart_item td.product-thumbnail { display: block; padding: 0 0 8px; text-align: left !important; }
  .tthn-cart table.shop_table_responsive tr.cart_item td.product-thumbnail::before,
  .tthn-cart table.cart_responsive tr.cart_item td.product-thumbnail::before { content: none; }
  .tthn-cart table.cart .product-thumbnail img { width: 64px; height: 64px !important; }
  .tthn-cart table.shop_table_responsive tr.cart_item td.product-name,
  .tthn-cart table.cart_responsive tr.cart_item td.product-name { display: block; padding: 0 40px 6px 0; text-align: left !important; }
  .tthn-cart table.shop_table_responsive tr.cart_item td.product-name::before,
  .tthn-cart table.cart_responsive tr.cart_item td.product-name::before { content: none; }
  .woocommerce-cart .tthn-cart table.cart td.actions { padding-top: 14px; text-align: left; }
  .woocommerce-cart .tthn-cart table.cart td.actions .coupon { float: none; flex-direction: column; }
  .woocommerce-cart .tthn-cart table.cart td.actions .coupon .input-text { min-width: 0; width: 100%; }
  .woocommerce-cart .tthn-cart table.cart td.actions .coupon .button,
  .woocommerce-cart .tthn-cart table.cart td.actions > .button { display: flex; width: 100%; margin-top: 10px; }
}
/* ================= TTHN3.5 — Trang thanh toán (/checkout/) ================= */
/* `.tthn-checkout-section` cũng ghép động y như `.tthn-cart-section` (⚠️ xem ghi chú ở TTHN3.4). */
.tthn-checkout-section { padding: 40px 0 64px; }
.tthn-checkout form.checkout {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 8px 32px; align-items: start;
}
.tthn-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
/* WC 11 in tiêu đề "Đơn hàng của bạn" RA NGOÀI `#order_review` (form-checkout.php dòng 54)
   nên nó bị tách hẳn khỏi thẻ trắng (đo được: cách thẻ ~250px). Ẩn bản ngoài — bản thật in
   BÊN TRONG thẻ bằng `tthn_order_review_title()` (inc/woocommerce.php). */
.tthn-checkout #order_review_heading { display: none; }
/* Hai card cùng bắt đầu ở hàng 1 (form đã có `align-items: start`) → mép trên ngang nhau. */
.tthn-checkout #order_review { grid-column: 2; grid-row: 1 / span 2; }
.tthn-checkout .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.tthn-checkout .woocommerce-notices-wrapper:empty { display: none; }

/* Thông báo / khối coupon-login của WooCommerce: bỏ pseudo-element icon font (glyph hiện ô vuông lỗi) */
.tthn-checkout .woocommerce-info, .tthn-checkout .woocommerce-message, .tthn-checkout .woocommerce-error {
  margin: 0 0 16px; padding: 14px 18px; background: var(--tthn-surface);
  border: 0; border-left: 3px solid var(--tthn-primary); border-radius: var(--tthn-radius-sm);
  font-size: 14px; color: var(--tthn-text);
}
.tthn-checkout .woocommerce-info::before, .tthn-checkout .woocommerce-message::before, .tthn-checkout .woocommerce-error::before { content: none; }

/* ---- Hai card: thông tin khách | đơn hàng ---- */
.tthn-checkout #customer_details, .tthn-checkout #order_review {
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  box-shadow: var(--tthn-shadow); padding: 24px;
}
/* 1 cột: "Thông tin thanh toán" trước, rồi "Giao hàng đến một địa chỉ khác?" + "Ghi chú đơn hàng"
   xuống dưới (yêu cầu của Tùng). Bên trong mỗi khối vẫn là lưới 2 cột field. */
.tthn-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 24px; }
/* Gán cột TƯỜNG MINH: nếu để auto-placement thì `.col-2` (giao hàng) lại nằm cột trái
   và `.col-1` (thanh toán) nằm cột phải — đã kiểm chứng bằng cách gán inline. */
.tthn-checkout .col2-set .col-1 { float: none; width: auto; grid-column: 1; }
.tthn-checkout .col2-set .col-2 { float: none; width: auto; grid-column: 1; }
.tthn-checkout .woocommerce-billing-fields h3, .tthn-checkout .woocommerce-shipping-fields h3,
.tthn-checkout .woocommerce-additional-fields h3, .tthn-checkout .tthn-order-review__title {
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--tthn-line);
  font-size: 16px; font-weight: 800;
}
.tthn-checkout .woocommerce-billing-fields__field-wrapper,
.tthn-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px;
}
/* Ghi chú đơn hàng là 1 ô duy nhất cho cả đơn → chiếm hết chiều ngang
   (field này của WooCommerce chỉ có class `form-row notes`, không phải `form-row-wide`). */
.tthn-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr; }
/* WooCommerce tự chèn `<span class="optional">(tuỳ chọn)</span>` vào nhãn field không bắt buộc.
   Nhãn của ta đã ghi rõ "(không bắt buộc)" theo wording popup TTHN3.3 → ẩn span cho khỏi lặp chữ. */
.tthn-checkout .form-row label .optional { display: none; }
/* Ô "Ghi chú" đồng bộ với popup đặt hàng nhanh (TTHN3.3): nhãn 13px, textarea
   padding 11px 13px và cao 75px — số đo trực tiếp từ popup trên trang chi tiết SP. */
.tthn-checkout .form-row.notes label { font-size: 13px; }
/* Selector phải 3 class: rule gốc `.tthn-checkout .form-row textarea` (0,2,1) BỊ rule của
   WooCommerce `.woocommerce form .form-row textarea` (0,2,2) đè → bo góc phải khai ở đây mới ăn. */
.tthn-checkout .form-row.notes textarea { min-height: 75px; padding: 11px 13px; border-radius: var(--tthn-radius-sm); }
/* 3 class cho `-first`/`-last`: rule của WooCommerce `.woocommerce form .form-row-first` (0,2,2)
   đè `.tthn-checkout .form-row` (0,2,0) → không ghi rõ thì ô nửa hàng bị co còn 47% (đo được 170px). */
.tthn-checkout .form-row,
.tthn-checkout .form-row.form-row-first,
.tthn-checkout .form-row.form-row-last { float: none; width: auto; margin: 0 0 14px; padding: 0; }
.tthn-checkout .form-row-wide { grid-column: 1 / -1; }
.tthn-checkout .form-row label {
  display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--tthn-text);
}
.tthn-checkout .form-row .required { color: var(--tthn-sale); text-decoration: none; }
.tthn-checkout .form-row input.input-text,
.tthn-checkout .form-row textarea,
.tthn-checkout .form-row select {
  width: 100%; min-height: 44px; padding: 10px 14px; background: #fff;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
  font: inherit; font-size: 16px; color: var(--tthn-text);
}
.tthn-checkout .form-row textarea { min-height: 88px; resize: vertical; }
.tthn-checkout .form-row input.input-text:focus,
.tthn-checkout .form-row textarea:focus,
.tthn-checkout .form-row select:focus { outline: 2px solid var(--tthn-primary); outline-offset: 1px; border-color: var(--tthn-primary-dark); }
/* Select quốc gia/tỉnh của WooCommerce dùng select2 */
.tthn-checkout .select2-container .select2-selection--single {
  height: 44px; padding: 0 14px; background: #fff;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
}
.tthn-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 42px; font-size: 16px; color: var(--tthn-text);
}
.tthn-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 10px; }

/* ---- Bảng đơn hàng ---- */
.tthn-checkout table.woocommerce-checkout-review-order-table { width: 100%; margin: 0 0 14px; border: 0; border-collapse: collapse; }
.tthn-checkout table.woocommerce-checkout-review-order-table thead th {
  padding: 0 0 10px; background: transparent; border: 0; border-bottom: 1px solid var(--tthn-line);
  text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--tthn-muted);
}
.tthn-checkout table.woocommerce-checkout-review-order-table thead th:last-child,
.tthn-checkout table.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.tthn-checkout table.woocommerce-checkout-review-order-table td,
.tthn-checkout table.woocommerce-checkout-review-order-table tfoot th {
  padding: 12px 0; border: 0; border-bottom: 1px dashed var(--tthn-line);
  vertical-align: top; font-size: 14.5px;
}
.tthn-checkout table.woocommerce-checkout-review-order-table tbody td:first-child { padding-right: 14px; }
.tthn-checkout table.woocommerce-checkout-review-order-table tbody td:last-child { white-space: nowrap; text-align: right; }
.tthn-checkout table.woocommerce-checkout-review-order-table tr.cart_item:last-child td { border-bottom: 1px solid var(--tthn-line); }
.tthn-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.tthn-checkout table.woocommerce-checkout-review-order-table tr.order-total td { padding-top: 14px; border-bottom: 0; font-weight: 700; }
.tthn-checkout table.woocommerce-checkout-review-order-table .order-total .amount { color: var(--tthn-accent); font-size: 22px; font-weight: 800; }

/* ---- Phương thức thanh toán + nút đặt hàng ---- */
.tthn-checkout #payment { background: transparent; border-radius: 0; padding: 0; }
.tthn-checkout #payment ul.payment_methods { margin: 0 0 16px; padding: 0; border: 0; list-style: none; }
.tthn-checkout #payment ul.payment_methods li { padding: 12px 0; border-top: 1px dashed var(--tthn-line); }
.tthn-checkout #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.tthn-checkout #payment .payment_box {
  margin: 8px 0 0; padding: 12px 14px; background: var(--tthn-surface);
  border-radius: var(--tthn-radius-sm); font-size: 13.5px; color: var(--tthn-muted);
}
.tthn-checkout #payment div.form-row { margin: 0; padding: 0; }
.tthn-checkout #payment #place_order {
  width: 100%; min-height: 54px; margin: 0; border: 0; cursor: pointer;
  background: var(--tthn-accent); color: #fff; border-radius: var(--tthn-radius-sm);
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}
.tthn-checkout #payment #place_order:hover { background: var(--tthn-accent-dark); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .tthn-checkout form.checkout { grid-template-columns: 1fr; gap: 20px; }
  .tthn-checkout #customer_details, .tthn-checkout #order_review { grid-column: 1; grid-row: auto; }
}
@media (max-width: 768px) {
  .tthn-checkout-section { padding: 28px 0 48px; }
  .tthn-checkout #customer_details, .tthn-checkout #order_review { padding: 16px; }
  .tthn-checkout .col2-set { grid-template-columns: 1fr; gap: 20px; }
  .tthn-checkout .col2-set .col-1, .tthn-checkout .col2-set .col-2 { grid-column: 1; }
  .tthn-checkout .woocommerce-billing-fields__field-wrapper,
  .tthn-checkout .woocommerce-shipping-fields__field-wrapper,
  .tthn-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  .tthn-checkout #payment #place_order { font-size: 14px; }
}

/* ================= TTHN3.6 — Trang hoàn tất đơn hàng (/checkout/order-received/) =================
   CSS viết theo ĐÚNG DOM của WC 11 (đã dò): khối cảm ơn là `<p class="woocommerce-notice
   woocommerce-thankyou-order-received">`, tóm tắt là `<ul class="woocommerce-order-overview">`
   4 `<li>`, rồi `<section class="woocommerce-order-details">` chứa bảng sản phẩm. */
/* `padding-bottom` rộng hơn bình thường để nút hotline nổi (FAB 54px) không che dòng "Tổng" */
.tthn-thankyou-section { padding: 40px 0 120px; }

/* Khối "Cảm ơn bạn…" → thẻ trắng có vạch xanh. Phải ghi rõ 2 class để thắng
   `.woocommerce-notice--success` của WooCommerce (viền xanh mặc định). */
.tthn-thankyou .woocommerce-thankyou-order-received {
  margin: 0 0 20px; padding: 16px 20px; background: #fff;
  border: 1px solid var(--tthn-line); border-left: 4px solid #1f8a4c;
  border-radius: var(--tthn-radius-sm); box-shadow: var(--tthn-shadow);
  font-size: 16px; font-weight: 700; color: var(--tthn-text);
}

/* Tóm tắt đơn: 4 ô ngang. Phải tắt clearfix `::before/::after` của WooCommerce, nếu không lưới grid
   sinh thêm 2 ô rỗng ở đầu → 2 ô nội dung bị đẩy xuống hàng 2 (đã đo được lỗi này: 3 ô hàng 1 + 1 ô hàng 2).
   Selector cần 3 class (`.order_details`) vì WooCommerce khai `.woocommerce ul.order_details::before`
   = (0,2,1), mạnh hơn `.tthn-thankyou .woocommerce-order-overview::before` = (0,2,0). */
.tthn-thankyou .woocommerce-order-overview {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin: 0 0 26px; padding: 0; border: 0; list-style: none;
}
.tthn-thankyou .woocommerce-order-overview.order_details::before,
.tthn-thankyou .woocommerce-order-overview.order_details::after { content: none; }
/* Ô tóm tắt: WooCommerce khai `.woocommerce ul.order_details li` = (0,2,2) — MẠNH HƠN
   `.tthn-thankyou .woocommerce-order-overview li` = (0,2,1) — nên nó ép `padding-left: 0`,
   `padding-right: 2em`, `font-size: .715em`, `margin-right: 2em`, `float: left`,
   `border-right: 1px dashed`, làm chữ dính sát lề trái (đo được: cách mép ô 1px).
   Selector phải là `ul.…order_details li` (0,3,1) và phải reset từng thuộc tính đó. */
.tthn-thankyou ul.woocommerce-order-overview.order_details li {
  float: none; margin: 0; padding: 14px 16px; background: #fff; border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius-sm); box-shadow: var(--tthn-shadow);
  font-size: 12px; font-weight: 600; color: var(--tthn-muted);
  text-transform: uppercase; letter-spacing: .3px;
}
.tthn-thankyou .woocommerce-order-overview li strong {
  display: block; margin-top: 6px; font-size: 15px; font-weight: 800;
  color: var(--tthn-text); text-transform: none; letter-spacing: 0;
}

/* Ghi chú của cổng thanh toán: COD in \"Trả tiền mặt khi giao hàng\" bằng một `<p>` KHÔNG có class
   (hook `woocommerce_thankyou_cod`) → cho thành dải thông báo để không trơ giữa 2 card.
   Selector cấu trúc vì markup đó không có class nào để bám vào. */
.tthn-thankyou .woocommerce-order > p:not([class]) {
  margin: 0 0 20px; padding: 14px 18px; background: var(--tthn-surface);
  border: 1px solid var(--tthn-line); border-left: 3px solid var(--tthn-primary);
  border-radius: var(--tthn-radius-sm); font-size: 14px; font-weight: 600; color: var(--tthn-text);
}

/* Card chi tiết đơn (+ địa chỉ khách: đơn test chưa in ra, để sẵn cho đơn có địa chỉ giao riêng) */
.tthn-thankyou .woocommerce-order-details,
.tthn-thankyou .woocommerce-customer-details {
  margin: 0 0 20px; padding: 24px; background: #fff; border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius); box-shadow: var(--tthn-shadow);
}
.tthn-thankyou .woocommerce-order-details__title,
.tthn-thankyou .woocommerce-column__title {
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--tthn-line);
  font-size: 16px; font-weight: 800;
}
.tthn-thankyou table.shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.tthn-thankyou table.shop_table th,
.tthn-thankyou table.shop_table td {
  padding: 12px 0; border-bottom: 1px solid var(--tthn-line); font-size: 14.5px; text-align: left;
}
.tthn-thankyou table.shop_table thead th { font-size: 13px; font-weight: 700; color: var(--tthn-muted); text-transform: uppercase; }
/* "TỔNG" (cột tiền) canh phải cho thẳng với các con số bên dưới */
.tthn-thankyou table.shop_table thead th:last-child { text-align: right; }
.tthn-thankyou table.shop_table tbody td:last-child,
.tthn-thankyou table.shop_table tfoot td { text-align: right; white-space: nowrap; }
.tthn-thankyou table.shop_table tfoot tr:last-child th,
.tthn-thankyou table.shop_table tfoot tr:last-child td { padding-top: 14px; border-bottom: 0; font-weight: 800; }
.tthn-thankyou table.shop_table .order-total .amount { color: var(--tthn-accent); font-size: 20px; font-weight: 800; }
.tthn-thankyou .woocommerce-customer-details address {
  margin: 0; padding: 0; border: 0; font-style: normal; font-size: 14.5px; line-height: 1.7;
}

.tthn-thankyou-actions { margin-top: 4px; text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .tthn-thankyou-section { padding: 28px 0 110px; }
  .tthn-thankyou .woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tthn-thankyou ul.woocommerce-order-overview.order_details li { padding: 12px 14px; }
  .tthn-thankyou .woocommerce-order-details,
  .tthn-thankyou .woocommerce-customer-details { padding: 16px; }
  .tthn-thankyou table.shop_table th,
  .tthn-thankyou table.shop_table td { padding: 10px 0; font-size: 14px; }
}

/* ==========================================================================
   TTHN5.1 — Trang danh mục tin tức (`category.php`): hero + lưới 2 cột + thẻ bài viết
   ========================================================================== */
.tthn-news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
/* Cột phải KHÔNG sticky (khác `.tthn-shop-aside` / `.tthn-single-side`): 3 hộp ở đây cao hơn
   viewport → `position: sticky` sẽ chốt ở `top` và cắt mất phần đáy, không cuộn tới được. */
.tthn-news-aside { display: grid; gap: 20px; }

/* Hero: dòng "N bài viết" + breadcrumb tự viết (TTHN5.1) */
.tthn-pagehero__meta { margin: 4px 0 0; color: var(--tthn-muted); font-size: 14px; }
.tthn-pagehero__meta b { color: var(--tthn-text); }
.tthn-breadcrumb__sep { margin: 0 7px; opacity: .55; }
.tthn-breadcrumb__here { color: var(--tthn-text); font-weight: 600; }

/* ---- Danh sách bài viết ---- */
.tthn-news-list { display: grid; gap: 22px; }
.tthn-news-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  background: #fff;
  border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius);
  padding: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tthn-news-card:hover { transform: translateY(-3px); box-shadow: var(--tthn-shadow-lg); border-color: var(--tthn-primary-dark); }
.tthn-news-card__media {
  display: block; overflow: hidden; border-radius: var(--tthn-radius-sm);
  background: var(--tthn-surface); aspect-ratio: 4 / 3;
}
.tthn-news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tthn-news-card:hover .tthn-news-card__media img { transform: scale(1.04); }
.tthn-news-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tthn-news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
/* `.tthn a` có sẵn `color: inherit` → nhãn chuyên mục phải ghi `.tthn a.tthn-news-card__cat` mới ăn màu */
.tthn a.tthn-news-card__cat {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tthn-accent);
}
.tthn a.tthn-news-card__cat:hover { color: var(--tthn-accent-dark); text-decoration: underline; }
.tthn-news-card__date { display: inline-flex; align-items: center; gap: 6px; color: var(--tthn-muted); font-size: 13px; }
.tthn-news-card__clock { width: 14px; height: 14px; flex: none; }
.tthn-news-card__title { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; }
.tthn-news-card__title a:hover { color: var(--tthn-primary-dark); }
.tthn-news-card__excerpt {
  margin: 0; color: var(--tthn-muted); font-size: 14.5px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Bài ĐẦU của trang 1: ảnh trên / chữ dưới, tiêu đề lớn hơn */
.tthn-news-card--featured { grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; }
.tthn-news-card--featured .tthn-news-card__media { border-radius: 0; aspect-ratio: 21 / 9; }
.tthn-news-card--featured .tthn-news-card__body { padding: 20px 22px 24px; }
.tthn-news-card--featured .tthn-news-card__title { font-size: clamp(21px, 2.4vw, 27px); }
.tthn-news-card--featured .tthn-news-card__excerpt { -webkit-line-clamp: 2; }
.tthn-news-empty {
  margin: 0; padding: 30px; text-align: center; color: var(--tthn-muted);
  background: #fff; border: 1px dashed var(--tthn-line); border-radius: var(--tthn-radius);
}

/* ---- Phân trang (markup `.nav-links` + `.page-numbers` của WordPress core) ---- */
.tthn-pagination { margin-top: 34px; }
.tthn-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tthn-pagination .page-numbers {
  display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid var(--tthn-line); border-radius: 5px;
  background: #fff; color: var(--tthn-text); font-weight: 700; font-size: 15px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tthn-pagination a.page-numbers:hover { background: var(--tthn-surface); border-color: var(--tthn-primary-dark); color: var(--tthn-primary-dark); }
.tthn-pagination .page-numbers.current { background: var(--tthn-primary); border-color: var(--tthn-primary-dark); color: var(--tthn-on-primary); }
.tthn-pagination .page-numbers.dots { border-color: transparent; background: none; }
.tthn-pagination .page-numbers.prev,
.tthn-pagination .page-numbers.next { font-size: 22px; line-height: 1; }

/* ---- Sidebar: phần thêm cho hộp của TTHN3.2 ---- */
.tthn-side-news__date { font-size: 12.5px; color: var(--tthn-muted); }
.tthn-news-cats .current-cat > a { color: var(--tthn-primary-dark); font-weight: 700; }

/* Mô tả chuyên mục dùng lại khối thu gọn `.tthn-shop-desc` (TTHN3.1) — chỉ chỉnh khoảng cách */
.tthn-news-desc { margin-top: 34px; }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .tthn-news-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; }
  .tthn-news-card { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
  /* Thẻ nổi bật GIỮ 1 cột — ghi lại bằng rule CÙNG độ ưu tiên (0,1,0) nằm SAU, KHÔNG dùng
     `.tthn-news-card:not(...)` (0,2,0): nâng độ ưu tiên lên 0,2,0 sẽ đè luôn rule 1-cột của
     `@media (max-width: 768px)` → đo được cột chữ co còn 38px và trang tràn ngang 67px ở 390px. */
  .tthn-news-card--featured { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 1024px) {
  .tthn-news-layout { grid-template-columns: minmax(0, 1fr); }
  .tthn-news-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .tthn-news-aside { grid-template-columns: minmax(0, 1fr); }
  .tthn-news-card { grid-template-columns: minmax(0, 1fr); }
  .tthn-news-card__media { aspect-ratio: 16 / 9; }
  .tthn-news-card__title,
  .tthn-news-card--featured .tthn-news-card__title { font-size: 18.5px; }
  .tthn-news-card__excerpt { -webkit-line-clamp: 4; }
  .tthn-news-card--featured .tthn-news-card__body { padding: 16px; }
  .tthn-pagination .page-numbers { min-width: 38px; height: 38px; font-size: 14px; }
}

/* ==========================================================================
   TTHN5.3 — Trang THẺ (tag) — `/the/<slug>/`
   Thân trang DÙNG CHUNG với trang chuyên mục (`template-parts/news-archive.php`) nên KHÔNG khai lại
   `.tthn-pagehero` / `.tthn-news-layout` / `.tthn-news-card` / `.tthn-side-box` / `.tthn-pagination`.
   Chỉ thêm phần riêng của trang thẻ: hộp cột phải "Từ khoá phổ biến" — chip tái dùng
   `.tthn-article__tag` của TTHN5.2.
   ========================================================================== */
.tthn-side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Selector PHẢI có tiền tố `.tthn` + `a` (0,3,1) mới hơn rule gốc `.tthn a.tthn-article__tag` (0,2,1):
   ở bài viết chip cao CỐ ĐỊNH 32px + `padding: 0 14px`; trong cột phải 320px tên thẻ dài (site có
   thẻ ~30 ký tự) sẽ tràn khỏi chip → cho cao theo nội dung, giữ nhịp bằng `min-height`. */
.tthn .tthn-side-tags a.tthn-article__tag {
  height: auto; min-height: 32px; max-width: 100%; padding: 5px 12px;
  line-height: 1.35; white-space: normal;
}
.tthn-side-tags__count { font-size: 11.5px; font-weight: 400; color: var(--tthn-muted); }

/* ==========================================================================
   TTHN5.2 — Trang chi tiết tin tức (`single.php`): breadcrumb mảnh + thẻ bài + nội dung
   Tái dùng lưới `.tthn-news-layout` / `.tthn-news-aside` của TTHN5.1 (không khai lại).
   ========================================================================== */
.tthn-article-section { padding: 26px 0 44px; }

.tthn-article {
  background: #fff; border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius); box-shadow: var(--tthn-shadow);
  padding: 26px 28px 30px;
}
.tthn-article__title {
  font-size: clamp(24px, 3vw, 34px); line-height: 1.3; font-weight: 800;
  letter-spacing: -.4px; margin: 0 0 14px;
}
.tthn-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--tthn-line);
  color: var(--tthn-muted); font-size: 13.5px;
}
/* `.tthn a { color: inherit }` → nhãn chuyên mục phải ghi `.tthn a.…` mới ăn màu */
.tthn a.tthn-article__cat {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tthn-accent);
}
.tthn a.tthn-article__cat:hover { color: var(--tthn-accent-dark); text-decoration: underline; }
.tthn-article__date,
.tthn-article__author { display: inline-flex; align-items: center; gap: 6px; }
.tthn-article__icon { width: 14px; height: 14px; flex: none; }
.tthn-article__thumb {
  margin: 0 0 24px; border-radius: var(--tthn-radius-sm);
  overflow: hidden; background: var(--tthn-surface);
}
/* Ảnh đầu bài có thể là ảnh DỌC (đo: 992×1388 → cao 1388px, chiếm gần 2 màn hình). Chặn chiều
   cao bằng `max-height`, giữ nguyên tỉ lệ (KHÔNG crop, KHÔNG méo) và cho hộp ÔM THEO ảnh
   (`width: auto` + `margin-inline: auto`) — nếu để `width: 100%` thì hộp vẫn 990px và ảnh dọc
   nằm giữa với 2 dải nền `--tthn-surface` hai bên. Muốn cắt thành banner 16/9 thì đổi sang
   `aspect-ratio: 16 / 9` + `object-fit: cover` + `height: 100%`. */
.tthn-article__thumb img { width: auto; height: auto; max-width: 100%; max-height: 620px; margin-inline: auto; }

/* ---- Nội dung bài viết (typography) ---- */
/* `overflow-wrap: break-word`: bài viết có thể chứa chuỗi ký tự dài KHÔNG có khoảng trắng
   (bài mẫu có dải phân cách `<span>====…</span>` 73 ký tự) → đo được 1 span 731.8px gây tràn
   ngang ở 390px (scrollWidth 769 > 390). `break-word` chỉ cắt khi từ không vừa dòng nên không
   ảnh hưởng chữ thường. */
.tthn-article__content { font-size: 16.5px; line-height: 1.85; color: var(--tthn-text); overflow-wrap: break-word; }
.tthn-article__content > :first-child { margin-top: 0; }
.tthn-article__content p { margin: 0 0 18px; }
.tthn-article__content h2 {
  font-size: clamp(21px, 2.4vw, 26px); font-weight: 800; line-height: 1.35;
  margin: 36px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--tthn-primary);
}
.tthn-article__content h3 { font-size: 19px; font-weight: 700; margin: 28px 0 12px; }
.tthn-article__content h4 { font-size: 17px; font-weight: 700; margin: 22px 0 10px; }
/* Reset chung của skin là `.tthn ul { list-style: none; padding: 0 }` → phải TRẢ LẠI dấu đầu dòng
   cho nội dung bài. Cùng độ ưu tiên (0,1,1) nhưng rule này nằm SAU nên thắng. */
.tthn-article__content ul { list-style: disc; margin: 0 0 18px; padding-left: 24px; }
.tthn-article__content ol { list-style: decimal; margin: 0 0 18px; padding-left: 24px; }
.tthn-article__content li { margin-bottom: 8px; }
.tthn-article__content li::marker { color: var(--tthn-primary-dark); }
.tthn-article__content a { color: var(--tthn-accent); text-decoration: underline; text-underline-offset: 2px; }
.tthn-article__content a:hover { color: var(--tthn-accent-dark); }
.tthn-article__content img { border-radius: var(--tthn-radius-sm); }
.tthn-article__content figure { margin: 0 0 20px; }
.tthn-article__content figcaption { margin-top: 8px; font-size: 13px; color: var(--tthn-muted); text-align: center; }
.tthn-article__content blockquote {
  margin: 0 0 20px; padding: 16px 20px; font-style: italic;
  background: var(--tthn-surface); border-left: 4px solid var(--tthn-primary);
  border-radius: 0 var(--tthn-radius-sm) var(--tthn-radius-sm) 0;
}
.tthn-article__content blockquote p:last-child { margin-bottom: 0; }
.tthn-article__content table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 15px; }
.tthn-article__content th,
.tthn-article__content td { padding: 10px 12px; border: 1px solid var(--tthn-line); text-align: left; }
.tthn-article__content th { background: var(--tthn-surface); font-weight: 700; }
.tthn-article__content hr { border: 0; border-top: 1px solid var(--tthn-line); margin: 28px 0; }
.tthn-article__content iframe { max-width: 100%; }

/* ---- Chip tag + điều hướng bài trước/sau ---- */
.tthn-article__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--tthn-line);
}
.tthn-article__tags-label { font-size: 13.5px; font-weight: 700; }
.tthn a.tthn-article__tag {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 1px solid var(--tthn-line); border-radius: 999px; background: #fff;
  font-size: 13px; color: var(--tthn-text);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tthn a.tthn-article__tag:hover { background: var(--tthn-surface); border-color: var(--tthn-primary-dark); color: var(--tthn-primary-dark); }

/* Cột CỐ ĐỊNH 2 (không dùng auto-fit): bài mới nhất chỉ có "Bài trước" → auto-fit cho nó giãn
   hết 1048px (đo được item 1048×80.9); 2 cột thì mục lẻ vẫn nằm nửa hàng, còn "Bài sau" lẻ thì
   đẩy sang cột 2 để đúng vị trí bên phải. */
.tthn-article-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 26px;
}
.tthn-article-nav__item--next:only-child { grid-column: 2; }
.tthn a.tthn-article-nav__item {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  box-shadow: var(--tthn-shadow); transition: transform .2s ease, border-color .2s ease;
}
.tthn a.tthn-article-nav__item:hover { transform: translateY(-2px); border-color: var(--tthn-primary-dark); }
.tthn-article-nav__item--next { text-align: right; }
.tthn-article-nav__dir {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--tthn-accent);
}
.tthn-article-nav__item--next .tthn-article-nav__dir { justify-content: flex-end; }
.tthn-article-nav__title { font-size: 15px; font-weight: 600; line-height: 1.45; }

/* ---- Dải "Bài viết liên quan" (full chiều rộng, nền xám) ---- */
.tthn-news-related { background: var(--tthn-surface); margin-top: 40px; padding: 40px 0 46px; }
.tthn-news-related__title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; margin: 0 0 22px; }
.tthn-news-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tthn-news-mini {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tthn-news-mini:hover { transform: translateY(-4px); box-shadow: var(--tthn-shadow-lg); }
.tthn-news-mini__media { display: block; aspect-ratio: 4 / 3; background: var(--tthn-surface); overflow: hidden; }
.tthn-news-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.tthn-news-mini__title { font-size: 15.5px; font-weight: 600; line-height: 1.45; margin: 14px 16px 8px; }
.tthn-news-mini__title a:hover { color: var(--tthn-primary-dark); }
.tthn-news-mini__date { margin: auto 16px 16px; font-size: 12.5px; color: var(--tthn-muted); }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .tthn-news-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .tthn-news-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .tthn-article { padding: 18px 16px 22px; }
  .tthn-article__content { font-size: 16px; line-height: 1.8; }
  .tthn-article__content h2 { margin-top: 28px; }
  .tthn-article__thumb { margin-bottom: 18px; }
  .tthn-news-related { padding: 30px 0 36px; }
}
@media (max-width: 600px) {
  .tthn-news-related__grid { grid-template-columns: minmax(0, 1fr); }
  /* 1 cột: mục điều hướng lẻ không cần đẩy sang cột 2 (nếu giữ `grid-column: 2` sẽ tràn) */
  .tthn-article-nav { grid-template-columns: minmax(0, 1fr); }
  .tthn-article-nav__item--next:only-child { grid-column: auto; }
}

/* ==========================================================================
   TTHN2.4 + TTHN2.5 — Khối trang chủ theo danh mục: lưới sản phẩm / tin tức + cuộn ngang
   Số cột điều khiển bằng biến `--tthn-cols` (Admin chọn bố cục trong Customizer) — PHẢI khai lại
   trong media query vì `.tthn-cat-block .tthn-products` (0,2,0) mạnh hơn `.tthn-products` (0,1,0)
   dùng ở các breakpoint cũ (bẫy: rule mạnh hơn ở cuối file đè rule trong @media).
   ========================================================================== */
.tthn-cat-block { --tthn-cols: 4; }
.tthn-cat-block--cols-3 { --tthn-cols: 3; }
.tthn-cat-block--cols-2 { --tthn-cols: 2; }

.tthn-cat-block .tthn-products { grid-template-columns: repeat(var(--tthn-cols), minmax(0, 1fr)); }
.tthn-cat-block .tthn-cat-news {
  display: grid; grid-template-columns: repeat(var(--tthn-cols), minmax(0, 1fr)); gap: 20px;
}

/* Bố cục "Cuộn ngang": dải cuộn + scroll-snap (giống dải liên quan TTHN3.2 / TTHN5.2) */
.tthn-cat-block--scroll .tthn-products,
.tthn-cat-block--scroll .tthn-cat-news {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* `contain: paint` là BẮT BUỘC: thiếu nó, overflow của RIÊNG dải cuộn lan ra document →
     đo ở 390px `scrollWidth` **557** (tràn) trong khi container vẫn 350/1550 (cuộn nội bộ OK);
     thêm `contain: paint` → document còn **390**. Đã A/B loại trừ: bỏ `scroll-snap-type`,
     bỏ `grid-template-columns`, `max-width: 100%`, `overflow-y: hidden`, `width: 100%`
     đều KHÔNG sửa được (đều 557) — chỉ `contain` là đủ. `padding: 8px 0` để bóng/nhấc thẻ
     không bị cắt bởi containment. */
  contain: paint; padding: 8px 0;
}
.tthn-cat-block--scroll .tthn-products .tthn-card { flex: 0 0 250px; scroll-snap-align: start; }
.tthn-cat-block--scroll .tthn-cat-news .tthn-news-mini { flex: 0 0 300px; scroll-snap-align: start; }

/* ==========================================================================
   TTHN2.8 — Bố cục "Cuộn ngang": ẨN thanh trượt + nút cuộn ‹ › ở hai đầu danh sách
   ========================================================================== */
.tthn-cat-block--scroll .tthn-products,
.tthn-cat-block--scroll .tthn-cat-news {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge cũ */
}
.tthn-cat-block--scroll .tthn-products::-webkit-scrollbar,
.tthn-cat-block--scroll .tthn-cat-news::-webkit-scrollbar { display: none; }  /* Chrome · Safari */

.tthn-scroller { position: relative; }
.tthn-scroller__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  font: inherit; font-size: 22px; line-height: 1;
  color: var(--tthn-text); background: #fff;
  border: 1px solid var(--tthn-line); border-radius: 50%;
  box-shadow: var(--tthn-shadow);
  transition: opacity .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.tthn-scroller__btn:hover { background: var(--tthn-primary); border-color: var(--tthn-primary-dark); color: var(--tthn-on-primary); }
.tthn-scroller__btn--prev { left: -18px; }
.tthn-scroller__btn--next { right: -18px; }
/* Ẩn nút khi dải đã ở đầu/cuối (JS gắn `.is-start` / `.is-end`) hoặc không cuộn được */
.tthn-scroller.is-start .tthn-scroller__btn--prev,
.tthn-scroller.is-end .tthn-scroller__btn--next,
.tthn-scroller--static .tthn-scroller__btn { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  .tthn-scroller__btn { width: 34px; height: 34px; font-size: 19px; }
  /* Container mobile chỉ còn lề 10px → lệch -6px (nút nằm trọn trong màn hình, cách mép 4px) — 2 nút vẫn đối xứng 2 đầu */
  .tthn-scroller__btn--prev { left: -6px; }
  .tthn-scroller__btn--next { right: -6px; }
}

/* ==========================================================================
   TTHN2.5 — Bố cục "Nổi bật" của khối tin trang chủ: 1 bài LỚN bên TRÁI + danh sách bên PHẢI
   (Customize → "Trang chủ — Khối tin tức theo chuyên mục" → Bố cục = "Nổi bật — 1 bài trái,
   còn lại bên phải"). "Số lượng" của khối là TỔNG số bài: bài 1 → cột trái, các bài còn lại
   → cột phải. Yêu cầu Tùng 2026-09-15 (dựng theo demo).
   KHÔNG dùng lại `.tthn-news-card` (TTHN5.1): thẻ ở đây là `h3` (vì `h2` của khối đứng trên) và cần
   `sizes` ảnh riêng cho cột ~700px.
   CAO BẰNG NHAU (yêu cầu Tùng): `align-items: stretch` → 2 cột luôn cùng chiều cao; phần chênh được
   hấp thụ có chủ đích thay vì hở nền trắng — cột TRÁI cho ẢNH giãn (`flex: 1 1 auto`, ảnh crop nhẹ),
   cột PHẢI dãn đều các dòng (`justify-content: space-between`). ≤1024px (1 cột) không bị ảnh hưởng
   vì mỗi khối là 1 hàng lưới riêng (chiều cao = nội dung).
   ========================================================================== */
.tthn-news-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* ---- Cột TRÁI: thẻ lớn (ảnh trên / chữ dưới, có trích đoạn) ---- */
.tthn-news-feature__main {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tthn-news-feature__main:hover { transform: translateY(-3px); box-shadow: var(--tthn-shadow-lg); border-color: var(--tthn-primary-dark); }
.tthn-news-feature__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tthn-surface); }
/* ẢNH hấp thụ phần chênh chiều cao (cột trái cao bằng cột phải): `flex: 1 1 auto` cho ảnh giãn thêm,
   `object-fit: cover` crop nhẹ thay vì hở dải nền trắng dưới thẻ. Cột trái vốn ĐÃ cao hơn thì rule này
   không đổi gì (ảnh giữ đúng 16:9).
   `max-height: 520px` = TRẦN giãn: nếu danh sách phải quá dài ("Số lượng" 7–12 → 6–11 dòng) mà không có
   trần, ảnh sẽ bị kéo thành ảnh DỌC (đo 11 dòng: ảnh tỉ lệ 0.75 — trông lỗi). Hết trần thì phần chênh
   còn lại dồn xuống `.tthn-news-feature__body` (`flex: 1 1 auto`) → thẻ vẫn cao BẰNG cột phải. */
.tthn-news-feature__main .tthn-news-feature__media { flex: 1 1 auto; min-height: 0; max-height: 520px; }
.tthn-news-feature__main .tthn-news-feature__body { flex: 1 1 auto; }
.tthn-news-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tthn-news-feature__main:hover .tthn-news-feature__media img { transform: scale(1.04); }
.tthn-news-feature__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.tthn-news-feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
/* `.tthn a` = (0,1,1) → nhãn chuyên mục phải khai `.tthn a.<class>` mới ăn màu accent */
.tthn a.tthn-news-feature__cat {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tthn-accent);
}
.tthn a.tthn-news-feature__cat:hover { color: var(--tthn-accent-dark); text-decoration: underline; }
.tthn-news-feature__date { color: var(--tthn-muted); font-size: 13px; }
.tthn-news-feature__title { margin: 0; font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; line-height: 1.35; }
.tthn-news-feature__title a:hover { color: var(--tthn-primary-dark); }
.tthn-news-feature__excerpt {
  margin: 0; color: var(--tthn-muted); font-size: 14.5px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Cột PHẢI: danh sách dọc — ảnh nhỏ + tiêu đề + ngày, gạch phân cách giữa các dòng ---- */
.tthn-news-feature__list {
  display: flex; flex-direction: column; justify-content: space-between;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
  padding: 4px 18px;
}
.tthn-news-row {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--tthn-line);
}
.tthn-news-row:last-child { border-bottom: 0; }
/* Bài không có ảnh đại diện → chỉ 1 cột. Thiếu rule này, `.tthn-news-row__body` (con DUY NHẤT) rơi vào
   cột `108px` của lưới → đo ở 1440: body rộng **108** (thay vì 547.5), tiêu đề cao 65px vì bị dồn.
   PHẢI là 2 class (0,2,0): rule `.tthn-news-row { grid-template-columns: 88px 1fr }` trong
   `@media (max-width: 768px)` nằm SAU trong file, cùng 0,1,0 → sẽ đè lại và lỗi quay về ở mobile. */
.tthn-news-row.tthn-news-row--noimg { grid-template-columns: minmax(0, 1fr); }
.tthn-news-row__media {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--tthn-radius-sm); background: var(--tthn-surface);
}
.tthn-news-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tthn-news-row:hover .tthn-news-row__media img { transform: scale(1.05); }
.tthn-news-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tthn-news-row__title {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tthn-news-row__title a:hover { color: var(--tthn-primary-dark); }
.tthn-news-row__date { color: var(--tthn-muted); font-size: 12.5px; }

/* ---- Responsive: ≤1024px xếp DỌC (thẻ lớn trên — danh sách dưới) ---- */
@media (max-width: 1024px) {
  .tthn-news-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Full chiều ngang rồi nên ảnh ngang hơn (21/9) cho khỏi chiếm hết màn hình */
  .tthn-news-feature__media { aspect-ratio: 21 / 9; }
}
@media (max-width: 768px) {
  .tthn-news-feature__body { padding: 16px; }
  .tthn-news-feature__title { font-size: 18.5px; }
  .tthn-news-feature__excerpt { font-size: 14px; }
  .tthn-news-feature__list { padding: 2px 14px; }
  .tthn-news-row { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .tthn-news-row__title { font-size: 14.5px; -webkit-line-clamp: 2; }
}

@media (max-width: 1024px) {
  .tthn-cat-block { --tthn-cols: 3; }
  .tthn-cat-block--cols-2 { --tthn-cols: 2; }
}
@media (max-width: 768px) {
  .tthn-cat-block { --tthn-cols: 2; }
  .tthn-cat-block .tthn-products,
  .tthn-cat-block .tthn-cat-news { gap: 10px; }

  /* TTHN2.4/2.5 — mobile: link "Xem thêm →" của khối danh mục chuyển XUỐNG DƯỚI list và canh giữa.
     Dùng `display: contents` cho `.tthn-section-head` để link (đang là con của head) trở thành con
     trực tiếp của `.tthn-container` (flex column) → mới `order` được mà KHÔNG phải đổi DOM/JS. */
  .tthn-cat-block .tthn-container { display: flex; flex-direction: column; }
  .tthn-cat-block .tthn-section-head { display: contents; }
  .tthn-cat-block .tthn-section-head > div { order: 1; margin-bottom: 20px; }
  .tthn-cat-block > .tthn-container > .tthn-products,
  .tthn-cat-block > .tthn-container > .tthn-scroller,
  .tthn-cat-block > .tthn-container > .tthn-cat-news,
  .tthn-cat-block > .tthn-container > .tthn-news-feature { order: 2; }
  .tthn-cat-block .tthn-section-head .tthn-link-more { order: 3; align-self: center; margin-top: 20px; }
}

/* ==========================================================================
   TTHN2.2 — MOBILE trang chủ (≤768px): tiêu đề khối (`.tthn-section-head`) nổi bật hơn
   + link "Xem thêm →" thành BUTTON. Yêu cầu Tùng 2026-09-15.
   Lý do: cỡ h2 mobile là `clamp(24px, 3vw, 34px)` → 24px nhưng chưa có điểm nhấn, còn
   "Xem thêm" chỉ là chữ vàng (khó thấy là bấm được). Nay: h2 20px + gạch nhấn vàng
   46×3px dưới tiêu đề; head xếp DỌC (tiêu đề trên — nút dưới) để không bị chen ở 360px;
   nút pill nền primary `#f2bd3d` + chữ `--tthn-on-primary` (8.9:1) cao 44px (đủ tap target).
   CHỈ mobile — desktop ≥769px giữ nguyên (đã đo lại ở 1440px).
   Lưu ý specificity: `.tthn-section-head .tthn-link-more` = (0,2,0) → thắng `.tthn a` (0,1,1)
   (rule `.tthn-link-more` một class (0,1,0) KHÔNG đủ, chữ bị `color: inherit` của `.tthn a`).
   Khối danh mục (TTHN2.4/2.5) đã tách head bằng `display: contents` ở block trên → nút của
   chúng vẫn nằm DƯỚI list và canh giữa, không bị xếp dọc ảnh hưởng.
   ========================================================================== */
@media (max-width: 768px) {
  /* Reset các thuộc tính CHỈ dùng cho desktop ở rule gốc (kẻ mảnh dưới head + padding đáy) */
  .tthn-section-head { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 0; border-bottom: 0; margin-bottom: 20px; }

  .tthn-section-head h2 { font-size: 20px; line-height: 1.35; letter-spacing: -.2px; }
  /* Gạch nhấn vàng dưới tiêu đề — tạo điểm nhấn mà KHÔNG cần tăng cỡ chữ */
  .tthn-section-head h2::after {
    content: ""; display: block;
    width: 46px; height: 3px; margin-top: 9px;
    border-radius: 2px; background: var(--tthn-primary);
  }
  .tthn-section-head .tthn-eyebrow { padding: 4px 11px; font-size: 11px; letter-spacing: 1.3px; margin-bottom: 6px; }
  .tthn-section-head p { margin-top: 8px; font-size: 14px; }

  /* "Xem thêm →" → BUTTON (pill) thay vì chữ link */
  .tthn-section-head .tthn-link-more {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 20px;
    font-size: 14px; font-weight: 700;
    color: var(--tthn-on-primary);
    background: var(--tthn-primary); border: 1px solid var(--tthn-primary);
    border-radius: 999px;
    transition: background .2s ease, border-color .2s ease;
  }
  .tthn-section-head .tthn-link-more:active { background: var(--tthn-primary-dark); border-color: var(--tthn-primary-dark); }
}

/* ==========================================================================
   TTHN6.1 + TTHN6.2 — Trang nội dung tĩnh (`page.php`): hero + thẻ nội dung + sidebar sub-nav
   Tái dùng: `.tthn-pagehero` / `.tthn-breadcrumb` (TTHN3.1), lưới `.tthn-news-layout` / `.tthn-news-aside`
   (TTHN5.1, gồm cả 3 breakpoint), typography `.tthn-article__content` (TTHN5.2, gắn thêm class trong
   markup), hộp `.tthn-side-box` / `.tthn-side-cats` (TTHN3.2) → khối này CHỈ bổ sung phần riêng của trang.
   ========================================================================== */
.tthn-page-section { padding: 28px 0 44px; }

.tthn-page {
  background: #fff; border: 1px solid var(--tthn-line);
  border-radius: var(--tthn-radius); box-shadow: var(--tthn-shadow);
  padding: 26px 28px 30px;
}
/* `.tthn-page__content` là hook tinh chỉnh; typography thật lấy từ `.tthn-article__content` (TTHN5.2) */
.tthn-page__content > :last-child { margin-bottom: 0; }
.tthn-page__content img { border-radius: var(--tthn-radius-sm); }
.tthn-page__content iframe { max-width: 100%; }

/* Ảnh caption kiểu WordPress cũ: `[caption width="1000"]` in ra
   `<figure class="wp-caption aligncenter" style="width: 1000px">` → ở 390px figure vẫn rộng
   1000px, đo được `scrollWidth` **1037** (tràn 647px) ở cả 1024/768/390. Inline style chỉ bị đè
   bởi `!important` của author CSS → đây là 1 trong 2 chỗ ĐƯỢC PHÉP dùng `!important` trong skin
   (chỗ còn lại: chặn nền autofill của Chrome). Áp cho CẢ nội dung bài viết vì bài viết cũng có
   thể chứa caption cùng kiểu. */
.tthn-article__content .wp-caption,
.tthn-page__content .wp-caption { max-width: 100% !important; width: auto !important; }
.tthn-article__content .wp-caption img,
.tthn-page__content .wp-caption img { width: auto; max-width: 100%; height: auto; }

/* TTHN6.2 — sub-nav "Trong mục này": WordPress tự gắn `current_page_item` / `current_page_ancestor` */
.tthn-page-nav .current_page_item > a { color: var(--tthn-primary-dark); font-weight: 700; }
.tthn-page-nav .current_page_ancestor > a { font-weight: 600; color: var(--tthn-text); }

@media (max-width: 768px) {
  .tthn-page { padding: 18px 16px 22px; }
}

/* ==========================================================================
   TTHN2.9 — Khối "tab sản phẩm" trên trang chủ (4 tab cố định: Mới · Bán chạy · Hot · Khuyến mãi)
   Tab = nút pill; tab đang xem nền `--tthn-primary` + chữ `--tthn-on-primary` (8.9:1).
   Panel TÁI DÙNG `.tthn-cat-block` / `.tthn-cat-block--cols-*` / `.tthn-cat-block--scroll` của TTHN2.4
   + `.tthn-scroller` của TTHN2.8 → lưới, dải cuộn, nút ‹ › chạy y như khối sản phẩm theo danh mục.
   ⚠️ KHÔNG dùng tên `.tthn-tabs` / `.tthn-tab-panel` / `.tthn-tab-nav`: đã bị hệ tab CŨ (mockup,
   hiện không template nào dùng) chiếm ở dòng ~747 — `.tthn-tab-panel { display: none }` + `.tthn-tabs
   { margin-top: 56px }` sẽ đè lên khối này (đã dính thật: tab hiện ra cao 0px).
   ========================================================================== */
.tthn-tablist { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.tthn-tablist__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 18px;
  font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2;
  color: var(--tthn-text); background: #fff;
  border: 1px solid var(--tthn-line); border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* Icon SVG inline (16px) — `stroke: currentColor` nên tự đổi màu theo tab active */
.tthn-tablist__icon { display: inline-flex; flex: 0 0 auto; }
.tthn-tablist__icon svg { width: 16px; height: 16px; display: block; }
.tthn-tablist__btn:hover { border-color: var(--tthn-primary-dark); color: var(--tthn-primary-dark); }
.tthn-tablist__btn.is-active { background: var(--tthn-primary); border-color: var(--tthn-primary-dark); color: var(--tthn-on-primary); }
/* `hidden` của trình duyệt là `display: none` nhưng BẤT KỲ `display` nào của author cũng đè được
   → khai rõ để panel ẩn chắc chắn không chiếm chỗ (và không bị đo nhầm khi ẩn). */
.tthn-tabpane[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .tthn-tabpane:not([hidden]) { animation: tthn-tab-in .22s ease both; }
}
@keyframes tthn-tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Panel là `.tthn-cat-block` nên lưới đã theo `--tthn-cols`; chỉ cần canh khoảng cách cho dải cuộn */
.tthn-tabpane { min-height: 1px; }
@media (max-width: 768px) {
  /* 2026-09-15 (yêu cầu Tùng): thanh tab trên mobile xếp **1 DÒNG** + TRƯỢT ngang để xem tab còn lại
     (trước đây `flex-wrap: wrap` làm 4 tab xuống 2 hàng). Ẩn thanh trượt, `contain: paint` BẮT BUỘC
     (bài học TTHN2.4: thiếu nó, overflow của dải lan ra document → tràn ngang cả trang).
     `flex: 0 0 auto` để nút KHÔNG bị co lại (mặc định `flex-shrink: 1` sẽ bóp chữ). */
  .tthn-tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    contain: paint;
    padding: 4px 2px;
    gap: 8px;
    margin-bottom: 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tthn-tablist::-webkit-scrollbar { display: none; }
  .tthn-tablist__btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 13px;
    font-size: 13.5px;
    gap: 6px;
    scroll-snap-align: start;
  }
  .tthn-tablist__icon svg { width: 14px; height: 14px; }
}

/* ==========================================================================
   TTHN1.8 — HEADER + TOPBAR QUẢN TRỊ TRONG CUSTOMIZER
   Màu (topbar nền/chữ · header nền) · chiều cao header · cỡ logo (thanh kéo) ·
   bật/tắt + kéo thả 6 mục (logo · menu · search · tư vấn · giỏ · HTML) · 1 khối HTML cùng hàng.

   Phần ĐỘNG (màu · chiều cao · cỡ logo · `order` từng mục) do `tthn_header_style()`
   (`functions.php`, `wp_head` prio 100) in trong `<style id="tthn-header-css">`.
   Dưới đây CHỈ là rule TĨNH: ẩn mục bị tắt + giao diện khối HTML.
   ========================================================================== */

/* Ẩn mục bị TẮT trong Customizer — áp MỌI khổ màn hình (Tùng chốt 2026-09-16).
   `!important` là CẦN cho `.tthn-search` / `.tthn-search-toggle`: ở ≤768px rule
   `.tthn-header.is-search-open .tthn-search` (0,3,0) mạnh hơn selector (0,2,0) ở đây và sẽ mở lại
   dải search; tắt mục search thì phải tắt luôn nút mở nó. */
.tthn-header.tthn-hide-logo .tthn-logo,
.tthn-header.tthn-hide-menu .tthn-nav,
.tthn-header.tthn-hide-hotline .tthn-hotline,
.tthn-header.tthn-hide-cart .tthn-cart-link,
.tthn-header.tthn-hide-html .tthn-hitem--html { display: none !important; }

/* Search tắt trong Customizer: ô search ẩn ở DESKTOP; trên MOBILE (≤768px) vẫn giữ icon kính lúp
   + dải search bấm mở (yêu cầu Tùng 2026-10-10) — nên KHÔNG ẩn `.tthn-search-toggle` và chỉ ẩn ô ở >768px. */
@media (min-width: 769px) { .tthn-header.tthn-hide-search .tthn-search { display: none !important; } }

/* Khối HTML tự do (Customizer → Header & Topbar → "Dữ liệu HTML thêm vào header").
   Nội dung đã qua `wp_kses_post()`; các rule dưới chỉ canh hàng cho gọn trong header. */
.tthn-hitem--html { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.25; }
.tthn-hitem--html p { margin: 0; }
.tthn-hitem--html img { display: block; width: auto; max-height: 42px; }
.tthn-hitem--html a { font-weight: 600; color: var(--tthn-accent); }
.tthn-hitem--html a:hover { text-decoration: underline; }
/* Mặc định khối HTML CHỈ hiện ở desktop (>1024px) để không phá bố cục tablet/mobile đã đo
   (TTHN1.2b/TTHN1.6). Tắt tuỳ chọn "chỉ hiện ở desktop" trong Customizer nếu muốn hiện mọi khổ. */
@media (max-width: 1024px) { .tthn-hitem--html-desk { display: none; } }

/* ==========================================================================
   TTHN7.1 + TTHN7.2 — Trang hệ thống: 404 (`404.php`) + kết quả tìm kiếm (`search.php`)
   Tái dùng: `.tthn-pagehero` / `.tthn-breadcrumb` (TTHN3.1) · `.tthn-page` (TTHN6.1) · typography
   `.tthn-article__content` (TTHN5.2) · lưới `.tthn-news-layout` + `.tthn-news-card` + `.tthn-news-empty`
   (TTHN5.1) · hộp `.tthn-side-box` / `.tthn-side-cats` (TTHN3.2) · nút `.tthn-btn*` (TTHN4.1) · pill
   `.tthn-search` (TTHN1.6). Khối này CHỈ thêm phần riêng: ô search trong nội dung, nhãn "hoặc",
   dãy nút nhanh, giá ở kết quả là sản phẩm.
   ========================================================================== */
/* Ô search ĐẶT TRONG NỘI DUNG — cùng pill với header (TTHN1.6) nhưng giãn ra và cao hơn cho dễ bấm.
   Selector (0,2,0) để chắc thắng `.tthn-search { width: 230px; height: 40px }` (0,1,0).
   ⚠️ `display: flex` là BẮT BUỘC: TTHN1.6 ẩn `.tthn-search` ở ≤768px (`.tthn-search { display: none }`) vì
   header mobile chỉ mở ô search bằng nút `.tthn-search-toggle` — nếu không khai lại, ô search TRONG
   NỘI DUNG cũng bị ẩn theo (đo được `0×0` + `elementFromPoint` bị chặn ở 768/390). Không cần
   `!important`: rule này (0,2,0) khai SAU rule ẩn (0,1,0) nên thắng. */
.tthn-search.tthn-inline-search { display: flex; width: 100%; max-width: 460px; height: 46px; margin: 0 0 20px; }
.tthn-404__lead { margin: 0 0 18px; font-size: 16.5px; }
.tthn-404__or { margin: 0 0 12px; font-weight: 700; }
.tthn-404__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.tthn-404__links .tthn-btn { min-height: 44px; }

/* Giá trong kết quả tìm kiếm là sản phẩm: cùng hàng với nhãn danh mục, đậm hơn chữ meta.
   `ins` (giá khuyến mãi) không gạch chân — trình duyệt mặc định gạch, xem luật ở theme-assets. */
.tthn-search-card__price { font-size: 15px; font-weight: 700; color: var(--tthn-accent-dark); }
.tthn-search-card__price del { color: var(--tthn-muted); font-weight: 400; }
.tthn-search-card__price ins { text-decoration: none; font-weight: 700; }

@media (max-width: 768px) {
  .tthn-search.tthn-inline-search { max-width: 100%; }
  /* Nút nhanh giãn đều 2 bên cho dễ bấm bằng ngón tay (mỗi nút ≥ 44px chiều cao). */
  .tthn-404__links .tthn-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   MÀU CHỮ GIÁ (yêu cầu Tùng 2026-09-16): `.woocommerce-Price-amount.amount` → `--tthn-accent`
   ==========================================================================
   Vì sao cần `body.tthn` + `.amount`: WC chỉ khai `.woocommerce-Price-amount` (0,1,0) còn theme
   cha/child khai theo ngữ cảnh (`.tthn-price del .woocommerce-Price-amount` = (0,3,0)…). Riêng
   GIÁ THƯỜNG (không sale) ở khối trang chủ trước đây KHÔNG rule nào đặt màu ⇒ rơi về màu chữ
   `--tthn-text` rgb(38,34,30) — đo 2026-09-16: 19 span như vậy trên trang chủ.
   Selector dưới = (0,3,1), khai ở CUỐI file nên thắng mọi rule cũ có độ ưu tiên thấp hơn.
   GIỮ NGUYÊN `del` (giá gạch) = `--tthn-muted` — chủ ý đã chốt: giá cũ mờ để giá mới nổi
   (rule (0,3,2) khai sau, thắng rule accent). Muốn đổi luôn giá gạch thì bỏ 2 dòng `del` này.
   ========================================================================== */
body.tthn .woocommerce-Price-amount.amount { color: var(--tthn-accent); }
body.tthn del .woocommerce-Price-amount.amount { color: var(--tthn-muted); }




/* ================= TTHN3.9 — Đánh giá & bình luận (tab "Đánh giá") =================
   Layout theo demo tham khảo banhocthongminhbsuc.com: tiêu đề → hộp tổng kết (điểm TB + 5 thanh %
   theo số sao + nút "Đánh giá ngay") → thanh lọc sao → danh sách đánh giá → form.
   PHP: `inc/woocommerce.php` (tag `// TTHN3.9`) · JS: `assets/reviews.js` (enqueue chỉ ở `is_product()`).
   GIỮ markup core WooCommerce (`#reviews > #comments > ol.commentlist`, `#review_form`) ⇒ phần lớn
   việc ở đây là GHI ĐÈ mấy rule của WooCommerce (`woocommerce.css`):
     · `.star-rating` mặc định `float: right` ⇒ phải `float: none` mới canh giữa được;
     · `.comment-text` mặc định `margin-left: 50px` + `border: 1px solid #e1dde7` (dành cho avatar)
       ⇒ avatar bị ẩn nên trả `margin: 0` + dùng viền/khoảng đệm của skin.
   Vì rule của WooCommerce dùng 2 id (`#reviews #comments`, `#review_form #respond`) + các class
   (`.woocommerce`, `.commentlist`) nên selector ở đây cũng khai đủ chuỗi id để THẮNG chắc chắn
   (file này nạp SAU `woocommerce-general` nên cùng độ ưu tiên là thắng).
   ============================================================================ */

/* Tiêu đề của core in BÊN TRONG `#comments` (tức SAU hộp tổng kết) trong khi thứ tự mong muốn là
   "tiêu đề → tổng kết → danh sách" ⇒ ẩn, thay bằng `.tthn-rv__title` do PHP in. */
body.tthn .tthn-rv .woocommerce-Reviews-title { display: none; }
/* Chưa có đánh giá: tiêu đề trên đã nói rồi ⇒ ẩn dòng "Chưa có đánh giá nào." lặp lại của core. */
body.tthn .tthn-rv--empty .woocommerce-noreviews { display: none; }

.tthn-rv { display: flex; flex-direction: column; gap: 16px; }
.tthn-rv__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--tthn-text); }
.tthn-rv__title span { color: var(--tthn-primary-dark); }
.tthn-rv__empty { margin: -8px 0 0; font-size: 14.5px; color: var(--tthn-muted); }

/* ---- Hộp tổng kết: [điểm] [5 thanh %] [nút] ---- */
.tthn-rv__sum {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px;
  gap: 20px; align-items: center;
  padding: 20px 22px;
  background: var(--tthn-surface); border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
}
.tthn-rv__score { text-align: center; }
.tthn-rv__avg { margin: 0; font-size: 44px; font-weight: 800; line-height: 1.05; color: var(--tthn-primary-dark); }
.tthn-rv__avg-label { margin: 2px 0 6px; font-size: 13px; color: var(--tthn-muted); }
/* `.star-rating` của WooCommerce: `float: right` + rộng 5.4em + font icon riêng của WC. */
body.tthn .tthn-rv__score .star-rating { float: none; margin: 0 auto 6px; font-size: 16px; color: var(--tthn-star); }
.tthn-rv__count { margin: 0; font-size: 13px; font-weight: 600; color: var(--tthn-text); }

.tthn-rv__bars { display: flex; flex-direction: column; gap: 7px; }
.tthn-rv__row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 46px 92px;
  gap: 10px; align-items: center; font-size: 13px;
}
.tthn-rv__row-star { font-weight: 700; color: var(--tthn-text); white-space: nowrap; }
.tthn-rv__row-star i { font-style: normal; color: var(--tthn-star); }
.tthn-rv__bar { height: 8px; border-radius: 999px; background: #e7e2db; overflow: hidden; }
.tthn-rv__bar-fill { display: block; height: 100%; background: var(--tthn-primary); border-radius: 999px; }
.tthn-rv__row-pct { font-weight: 700; color: var(--tthn-text); text-align: right; }
.tthn-rv__row-num { overflow: hidden; color: var(--tthn-muted); white-space: nowrap; text-overflow: ellipsis; }

.tthn-rv__cta { text-align: right; }
.tthn-rv__open { min-height: 44px; }

/* ---- Thanh lọc theo số sao (JS `assets/reviews.js`) ---- */
.tthn-rv__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tthn-rv__chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 6px 14px;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tthn-text); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.tthn-rv__chip i { font-style: normal; color: var(--tthn-star); }
.tthn-rv__chip:hover { border-color: var(--tthn-primary-dark); }
.tthn-rv__chip.is-active { background: var(--tthn-primary); border-color: var(--tthn-primary-dark); color: var(--tthn-on-primary); }
.tthn-rv__chip.is-active i { color: var(--tthn-on-primary); }
.tthn-rv__chip-n { color: var(--tthn-muted); }
.tthn-rv__chip.is-active .tthn-rv__chip-n { color: var(--tthn-on-primary); }
.tthn-rv__noresult { margin: 12px 0 0; color: var(--tthn-muted); font-size: 14px; }

/* Dải xác nhận sau khi gửi (khách phải chờ duyệt ⇒ core chuyển hướng `?unapproved=…`). */
.tthn-rv__thanks {
  margin: 0; padding: 12px 16px;
  background: #eaf5ea; border: 1px solid #cfe7cf; border-radius: var(--tthn-radius-sm);
  color: #1f6b3d; font-size: 14.5px; font-weight: 600;
}
/* Dòng "đang chờ duyệt" — WooCommerce tự in `<em class="woocommerce-review__awaiting-approval">` trong
   `.meta` của đánh giá vừa gửi (thay cho tên + ngày). Cho nổi bật thành chip hổ phách. */
body.tthn .tthn-rv #reviews #comments ol.commentlist li .woocommerce-review__awaiting-approval {
  display: inline-block; padding: 3px 10px;
  background: #fff7e0; border: 1px solid #f0dca8; border-radius: 5px;
  color: #8a6100; font-size: 12.5px; font-style: normal; font-weight: 600;
}




/* ---- Danh sách đánh giá (markup core WooCommerce: `ol.commentlist > li > .comment_container > .comment-text`) ---- */
body.tthn .tthn-rv #reviews #comments ol.commentlist { display: flex; flex-direction: column; gap: 14px; }
body.tthn .tthn-rv #reviews #comments ol.commentlist li { margin: 0; }
body.tthn .tthn-rv #reviews #comments ol.commentlist li.is-hidden { display: none; }
/* Avatar: demo cũng ẩn (`no_avatar`) — gravatar mặc định của khách chưa đăng ký là hình "mystery man". */
body.tthn .tthn-rv #reviews #comments ol.commentlist li img.avatar { display: none; }
body.tthn .tthn-rv #reviews #comments ol.commentlist li .comment-text {
  margin: 0; padding: 16px 18px;
  background: #fff; border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
}
body.tthn .tthn-rv #reviews #comments ol.commentlist li .comment-text .star-rating {
  float: none; margin: 0 0 8px; font-size: 14px; color: var(--tthn-star);
}
body.tthn .tthn-rv #reviews #comments ol.commentlist li .comment-text .meta {
  margin: 0 0 6px; font-size: 13px; color: var(--tthn-muted);
}
body.tthn .tthn-rv #reviews #comments ol.commentlist li .woocommerce-review__author {
  color: var(--tthn-text); font-size: 14.5px; font-weight: 700;
}
/* Badge "Đã mua tại thacotaihanoi.vn" — WooCommerce tự in khi option
   `woocommerce_review_rating_verification_label = yes` (site đang bật). */
body.tthn .tthn-rv #reviews #comments ol.commentlist li .woocommerce-review__verified {
  display: inline-block; margin-left: 6px; padding: 2px 9px;
  background: #eaf5ea; color: #1f8a4c; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
body.tthn .tthn-rv #reviews #comments ol.commentlist li .woocommerce-review__published-date {
  color: var(--tthn-muted); font-size: 12.5px;
}
body.tthn .tthn-rv #reviews #comments ol.commentlist li .description {
  color: var(--tthn-text); font-size: 14.5px; line-height: 1.75;
}
body.tthn .tthn-rv #reviews #comments ol.commentlist li .description p { margin: 0 0 8px; }
body.tthn .tthn-rv #reviews #comments ol.commentlist li .description p:last-child { margin-bottom: 0; }

/* ---- Form đánh giá (`#review_form`) ---- */
body.tthn .tthn-rv #review_form_wrapper {
  padding: 20px 22px;
  background: var(--tthn-surface); border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius);
}
body.tthn .tthn-rv #review_form #respond p { margin: 0 0 14px; }
body.tthn .tthn-rv #review_form #respond .comment-reply-title {
  display: block; margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--tthn-text);
}
body.tthn .tthn-rv #review_form #respond .tthn-rv__note { margin: 0 0 14px; font-size: 13px; color: var(--tthn-muted); }
body.tthn .tthn-rv #review_form #respond label:not(.screen-reader-text) {
  display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--tthn-text);
}
body.tthn .tthn-rv #review_form #respond input[type="text"],
body.tthn .tthn-rv #review_form #respond input[type="email"],
body.tthn .tthn-rv #review_form #respond select,
body.tthn .tthn-rv #review_form #respond textarea {
  width: 100%; padding: 11px 13px; background: #fff; color: var(--tthn-text);
  border: 1px solid var(--tthn-line); border-radius: var(--tthn-radius-sm);
  font: inherit; font-size: 16px; /* 16px: iOS không tự zoom khi focus vào ô nhập */
}
body.tthn .tthn-rv #review_form #respond textarea { min-height: 120px; height: auto; resize: vertical; }
body.tthn .tthn-rv #review_form #respond input:focus,
body.tthn .tthn-rv #review_form #respond select:focus,
body.tthn .tthn-rv #review_form #respond textarea:focus {
  outline: 2px solid var(--tthn-primary); outline-offset: 1px; border-color: var(--tthn-primary-dark);
}
/* Tên + Email nằm cạnh nhau ở desktop như demo; ≤768px xuống 1 cột (khối @media cuối). */
body.tthn .tthn-rv #review_form #respond p.comment-form-author,
body.tthn .tthn-rv #review_form #respond p.comment-form-email {
  display: inline-block; width: calc(50% - 7px); margin: 0 0 14px; vertical-align: top;
}
body.tthn .tthn-rv #review_form #respond p.comment-form-email { margin-left: 10px; }
body.tthn .tthn-rv #review_form #respond p.comment-form-cookies-consent {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px;
  font-size: 12.5px; line-height: 1.6; color: var(--tthn-muted);
}
body.tthn .tthn-rv #review_form #respond p.comment-form-cookies-consent input[type="checkbox"] {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0;
}
body.tthn .tthn-rv #review_form #respond .form-submit { margin: 0; }
/* Nút gửi: WooCommerce khai `background-color: var(--wc-secondary)` (#e9e6ed) cho
   `input#submit` bằng selector 2 id (`.woocommerce #respond input#submit`…) nên phải `!important`
   mới chắc thắng — đo TRƯỚC: nền `rgb(233,230,237)` + bo góc 3px dù đã có rule `.tthn-rv #submit`. */
body.tthn .tthn-rv #submit {
  min-height: 48px; padding: 12px 30px !important;
  border: 0 !important; border-radius: var(--tthn-radius-sm) !important;
  background: #000 !important; color: #fff !important;
  box-shadow: none !important; text-shadow: none !important;
  font: inherit; font-size: 15px; font-weight: 700 !important;
  cursor: pointer; transition: background .18s ease;
}
body.tthn .tthn-rv #submit:hover { background: #333333 !important; }

/* Chấm sao trong form: WooCommerce's JS (`single-product.js`) ẨN `<select id="rating">`
   (đo: `display: none`) rồi dựng `p.stars` = 5 thẻ `<a role="radio">` dùng font icon của WC
   (`content: "\e021"` rỗng / `\e020"` đầy). Chỉ cần đổi MÀU sang vàng như `.star-rating`. */
body.tthn .tthn-rv #review_form .stars a::before { color: var(--tthn-star); }
body.tthn .tthn-rv #review_form .stars a:focus-visible { outline: 2px solid var(--tthn-primary); outline-offset: 2px; border-radius: 3px; }


/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .tthn-rv__sum { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
  .tthn-rv__cta { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 768px) {
  body.tthn .tthn-rv #review_form #respond p.comment-form-author,
  body.tthn .tthn-rv #review_form #respond p.comment-form-email { display: block; width: 100%; margin-left: 0; }
}
@media (max-width: 600px) {
  .tthn-rv__sum { grid-template-columns: 1fr; }
  .tthn-rv__score { text-align: left; }
  body.tthn .tthn-rv__score .star-rating { margin: 0 0 6px; }
  .tthn-rv__row { grid-template-columns: 34px minmax(0, 1fr) 42px 84px; gap: 8px; font-size: 12.5px; }
  body.tthn .tthn-rv #reviews #comments ol.commentlist li .woocommerce-review__verified {
    display: block; width: max-content; max-width: 100%; margin: 4px 0 0;
  }
}

/* ==========================================================================
   TTHN3.12 — Mô tả danh mục sản phẩm nay do TRÌNH SOẠN THẢO soạn (có <p>, <ul>, <h3>, <strong>…).
   Vì sao cần: reset chung `.tthn ul { margin:0; padding:0; list-style:none }` (dòng 49) làm MẤT dấu đầu
   dòng; đo 2026-09-17 trên /danh-muc/<cat>/: `list-style-type: none`, `padding-left: 0`. Mở lại đúng
   như đã làm cho footer (dòng 741) và tab sản phẩm (dòng 841).
   ========================================================================== */
.tthn-shop-desc__body p { margin: 0 0 12px; }
.tthn-shop-desc__body ul,
.tthn-shop-desc__body ol { margin: 0 0 12px; padding-left: 22px; }
.tthn-shop-desc__body ul { list-style: disc; }
.tthn-shop-desc__body ol { list-style: decimal; }
.tthn-shop-desc__body ul ul { list-style: circle; }
.tthn-shop-desc__body ol ol { list-style: lower-alpha; }
.tthn-shop-desc__body li { margin: 0 0 4px; }
/* Tiêu đề trong mô tả không được to như tiêu đề bài (h1..h6 của theme) — hạ về cỡ chữ thân bài. */
.tthn-shop-desc__body h1,
.tthn-shop-desc__body h2,
.tthn-shop-desc__body h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.4; }
.tthn-shop-desc__body h4,
.tthn-shop-desc__body h5,
.tthn-shop-desc__body h6 { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.tthn-shop-desc__body > .term-description > *:last-child { margin-bottom: 0; }


/* TTHN4.1 — iOS Safari TỰ PHÓNG TO trang khi bấm vào ô nhập có chữ < 16px. Trên mobile/tablet ép mọi ô nhập về 16px
   (KHÔNG chặn zoom bằng `maximum-scale` ở viewport vì hại khả năng truy cập). `!important` để thắng các rule 12–15px rải rác
   (ô tìm kiếm, bộ lọc, sắp xếp, form thanh toán, popup…). Checkbox/radio/range/nút không có chữ nhập nên loại ra. */
@media (max-width: 900px) {
  .tthn input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  .tthn select,
  .tthn textarea { font-size: 16px !important; }
}

/* TTHN3.5 — khối mã giảm giá nằm trong thẻ đơn hàng, ngay dưới "Tổng" (dời bằng checkout-coupon.js) */
.tthn-checkout .tthn-coupon-box { margin: 0 0 16px; }
/* Luôn hiện form (bỏ bước bấm "Ấn vào đây"): ô nhập + nút 1 dòng. `!important` để đè `display:none` inline mà JS của WooCommerce gán lúc tải. */
.tthn-checkout .tthn-coupon-box .woocommerce-form-coupon-toggle { display: none; }
.tthn-checkout .tthn-coupon-box form.checkout_coupon {
  display: flex !important; gap: 8px; align-items: stretch; margin: 0; padding: 0; border: 0;
}
.tthn-checkout .tthn-coupon-box form.checkout_coupon .clear { display: none; }
.tthn-checkout .tthn-coupon-box form.checkout_coupon .form-row { margin: 0; }
.tthn-checkout .tthn-coupon-box form.checkout_coupon .form-row-first { flex: 1; min-width: 0; }
.tthn-checkout .tthn-coupon-box form.checkout_coupon .form-row-last { flex: none; display: flex; }
.tthn-checkout .tthn-coupon-box form.checkout_coupon .button { min-height: 44px; padding-block: 0; }
.tthn-checkout .tthn-coupon-box .coupon-error-notice { display: block; margin-top: 6px; font-size: 13px; color: var(--tthn-sale); }

/* Icon đầu 3 tiêu đề khối thanh toán (mask SVG, tô theo màu thương hiệu — cùng cách icon liên hệ ở trên) */
.tthn-checkout .woocommerce-billing-fields h3, .tthn-checkout .woocommerce-additional-fields h3,
.tthn-checkout .tthn-order-review__title { display: flex; align-items: center; gap: 10px; }
.tthn-checkout .woocommerce-billing-fields h3::before, .tthn-checkout .woocommerce-additional-fields h3::before,
.tthn-checkout .tthn-order-review__title::before {
  content: ""; flex: none; width: 20px; height: 20px; background: var(--tthn-primary-dark);
  -webkit-mask: var(--tthn-h-icon) center / contain no-repeat; mask: var(--tthn-h-icon) center / contain no-repeat;
}
.tthn-checkout .woocommerce-billing-fields h3 { --tthn-h-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.tthn-checkout .tthn-order-review__title { --tthn-h-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E"); }
.tthn-checkout .woocommerce-additional-fields h3 { --tthn-h-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }

/* TTHN2.12 — Popup "Tư vấn" (#popup-tu-van): <dialog> trong suốt, khung trắng chính là form `.tthn-quote` bên trong
   (CÙNG form cuối trang chủ — style ở skin-demo.css). Không dùng class `.tthn-quote-pop` để khỏi dính style ô nhập của popup SP. */
.tthn-consult-pop { width: min(460px, calc(100% - 32px)); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.tthn-consult-pop:focus, .tthn-consult-pop:focus-visible { outline: 0; }
.tthn-consult-pop::backdrop { background: rgba(0, 0, 0, .55); }
body:has(.tthn-consult-pop[open]) { overflow: hidden; }
.tthn-consult-pop .tthn-quote { margin: 0; padding-top: 48px; } /* chừa chỗ cho nút × */