/* ==========================================================================
   VOLTIC VIETNAM — CSS CHÍNH (1 file duy nhất, cố ý: nhiều file = nhiều lượt tải)
   ==========================================================================

   MỤC LỤC — tìm bằng cách gõ tên khối (vd bấm Ctrl+F rồi gõ "BRAND SECTION")

     1. DESIGN SYSTEM ........ biến màu, font, bóng đổ, bo góc  (:root)
     2. RESET & GLOBAL ....... reset, .wrap, section, ảnh
     3. COMMON COMPONENTS .... nút .btn, tiêu đề khối .sh, nhãn .badge
     4. HEADER ............... thanh điều hướng, burger, .hdr.stuck
     5. HERO SECTION ......... khối đầu trang + ảnh nền
     6. FEATURE STRIP ........ dải "5 điểm mạnh" đè lên hero
     7. PRODUCT SECTION ...... tab lọc + 4 thẻ sản phẩm + slider
     8. TECH SECTION ......... "Công nghệ tạo nên khác biệt"
     9. BRAND SECTION ........ thương hiệu + 4 ô số liệu (.stats)
    10. WISHING CARD ......... "Lời chúc gửi bác tài" (ảnh nền + lớp phủ)
    11. CONTACT & CTA BAND ... khối liên hệ cuối trang + form CF7
    12. FOOTER
    13. PRODUCT DETAIL MODAL . cửa sổ chi tiết sản phẩm
    14. FLOATING BUTTONS ..... 2 nút nổi góc màn hình
    15. RESPONSIVE .......... các mốc 1200 / 1024 / 992 / 640 px
    16. HIỆU ỨNG AZPOS ...... header thu nhỏ khi cuộn, slider sản phẩm
    17. WORDPRESS COMPAT .... phần thêm riêng cho WP (Gutenberg, CF7, comment)
    18. TINH CHỈNH ĐIỆN THOẠI & IPAD
    19. TRANG BÀI VIẾT ...... bố cục 2 cột + mục lục (single.php)
    20. KHỐI TIN TỨC ........ trang chủ, 1 bài lớn + 4 bài nhỏ

   ⚠️ Media query của một khối có thể nằm NGAY DƯỚI khối đó (không dồn hết về
   mục 15) — chỗ nào như vậy đều có ghi chú giải thích lý do tại chỗ.
   ⚠️ Mục 17 nằm CUỐI FILE nên nó ĐÈ mọi thứ phía trên. Sửa mà "không ăn" thì
   kiểm tra mục 17 trước khi nghi ngờ chỗ khác.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN SYSTEM — biến dùng chung
   -------------------------------------------------------------------------- */
:root {
  /* Light Mode Palette - Premium Clean Slate */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --text-primary: #0B1F35;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --border-color: #E2E8F0;
  
  --primary: #011F40;
  --primary-rgb: 1, 31, 64;
  --primary-hover: #002D68;
  
  --blue-accent: #0284C7;
  --blue-accent-rgb: 2, 132, 199;
  --blue-light: #E0F2FE;
  
  --red-accent: #D21F25;
  --red-light: #FEE2E2;
  
  --warm-bg: #FDF6F0;
  --warm-border: #F3E4D6;
  --warm-text: #5C4A3E;
  
  /* Shared Tokens */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 48px);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  /* ⚡ KHÔNG dùng `all`: `transition: all` bắt trình duyệt theo dõi MỌI thuộc tính
     đang đổi, gồm cả thuộc tính làm tính lại layout (width/height/padding…) ⇒ giật.
     Liệt kê đúng 6 thuộc tính mà các hiệu ứng hover thực sự dùng — transform và
     opacity chạy trên GPU nên mượt nhất. */
  --transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 2px 8px rgba(11, 31, 53, 0.04);
  --shadow-md: 0 12px 30px rgba(11, 31, 53, 0.06);
  --shadow-lg: 0 20px 40px rgba(11, 31, 53, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.95); /* gần đục — đã BỎ backdrop-filter blur (chống giật khi cuộn) */
  --glass-border: rgba(226, 232, 240, 0.8);
}


/* ==========================================================================
   RESET & GLOBAL STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-secondary);
  background: var(--bg-primary);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section {
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   COMMON COMPONENTS
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.2);
}


.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-ghost:hover {
  border-color: var(--blue-accent);
  color: var(--blue-accent);
  background: var(--bg-secondary);
  transform: translateY(-2px);
}

/* Badges */
.badge {
  display: inline-block;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  border: 1px solid var(--border-color);
}

.badge-blue {
  background: var(--blue-light);
  color: var(--blue-accent);
  border-color: transparent;
}

.badge-red {
  background: var(--red-light);
  color: var(--red-accent);
  border-color: transparent;
}

/* Section Header */
.sh {
  text-align: center;
  margin-bottom: 56px;
  max-width: 700px;
  margin-inline: auto;
}

.sh h2 {
  font-size: calc(clamp(30px, 3.8vw, 46px) * var(--vt-fs, 1));
  font-weight: 800;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.sh h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-accent), #22D3EE);
  border-radius: 2px;
}

.sh p {
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Theme Switcher */



/* Scroll Animations */
/* ⚠️ CHỈ ẩn khi CHẮC CHẮN có JS chạy được (class .voltic-js do script inline
   trong <head> gắn). Nếu JS bị chặn / LiteSpeed hoãn / lỗi giữa chừng thì
   class không có ⇒ nội dung hiện bình thường, chỉ mất hiệu ứng.
   ĐỪNG bỏ tiền tố .voltic-js — sẽ thành "cả trang dưới hero trắng trơn".

   📍 GẮN Ở ĐÂU: luôn gắn cho KHỐI CON bên trong `.wrap`, 🚫 KHÔNG BAO GIỜ gắn cho
   thẻ `<section>`. Ba lý do, đều đã kiểm bằng số đo:
   ① `translateY(30px)` kéo theo cả DẢI NỀN của section ⇒ hở một vệt 30px giữa các
      khối, mà nhiều khối cố ý để `padding-top:0` để dính liền nhau;
   ② section chết hiệu ứng là mất trắng CẢ khối, gắn khối con thì chỉ mất phần đó;
   ③ `voltic_measure()` trong main.js cache vị trí `section[id]` để tô sáng menu —
      section bị transform là số đo lệch 30px.
   Cả trang chủ (13 chỗ) lẫn trang sản phẩm (12 chỗ) đều theo đúng quy ước này.
   🔎 Kiểm nhanh sau khi thêm chỗ mới, cả hai phải bằng 0:
      document.querySelectorAll('section.scroll-reveal').length
      document.querySelectorAll('.scroll-reveal .scroll-reveal').length
      (cái sau: lồng nhau thì opacity NHÂN nhau và transform cộng thành 60px)

   ⚠️ `transform` biến khối thành containing block: đừng đặt `position:sticky` hay
   `position:fixed` cho phần tử con của một khối mang class này — sticky sẽ đứng im
   y như lỗi `.guide-side` ngày 06/08, mà thủ phạm lại nằm ở thẻ CHA nên rất khó truy.
   Hiện chưa chỗ nào dính (đã grep product.css: 0 sticky, 0 fixed). */
.voltic-js .scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.voltic-js .scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 🖨️ BẢN IN: luôn hiện, bất kể người đọc đã cuộn tới hay chưa.
   Lý do phải có: `opacity:0` làm chữ VÔ HÌNH nhưng VẪN CHIẾM ĐỦ CHỖ trong bố cục.
   Ai bấm Ctrl+P (hoặc nút "In / Lưu PDF") mà chưa cuộn hết trang thì mọi khối chưa
   kịp `.revealed` sẽ in ra thành MẢNG GIẤY TRẮNG đúng bằng chiều cao của nó —
   nhìn y như lỗi "thừa trang", rất khó đoán ra nguyên nhân.
   Đã dính đúng vậy ở trang Hướng dẫn 06/08/2026: khối `.cta-info.scroll-reveal`
   in ra 285px giấy trắng ở cuối tài liệu.
   Đặt ở main.css (không phải file CSS của từng trang) vì main.css nạp ở MỌI trang,
   còn trang chủ và trang sản phẩm KHÔNG có khối @media print riêng nào cả.
   🚫 Đừng bỏ dòng này khi thêm hiệu ứng mới — cứ thêm class vào đây là an toàn. */
/* ♿ NGƯỜI DÙNG BẬT "GIẢM CHUYỂN ĐỘNG" ở hệ điều hành: hiện thẳng, không mờ-trượt.
   Không chỉ là chuyện tử tế — nó vá một lỗi thật: khi bật tùy chọn này, trình duyệt
   TẮT LUÔN `scroll-behavior:smooth`, nên bấm nút "Nhận tư vấn" (href="#lienhe") là
   trang NHẢY tức thời tới khối chưa kịp `.revealed` ⇒ nhìn thấy một mảng TRẮNG.
   Có cuộn mượt thì khối đã kịp hiện dọc đường, nên lỗi chỉ lộ ra đúng ở nhóm này.
   🔎 Thử: Windows → Cài đặt → Trợ năng → Hiệu ứng hình ảnh → tắt "Hiệu ứng hoạt ảnh". */
@media (prefers-reduced-motion: reduce) {
  .voltic-js .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .scroll-reveal,
  .voltic-js .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  /* 🚫 ĐÃ BỎ backdrop-filter:blur(12px) — nó bắt trình duyệt làm mờ lại nền sau
     header MỖI khung hình khi cuộn ⇒ header GIẬT/ĐƠ (nhất là Windows/Chrome).
     Thay bằng nền gần đục (--glass-bg 0.95). ĐỪNG thêm lại backdrop-filter ở đây. */
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hdr .wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo svg {
  width: 38px;
  height: 38px;
}

.logo b {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800; /* 08/08: font Plus Jakarta Sans chỉ có tới 800 — để 900 là trình duyệt làm đậm GIẢ, chữ nhoè */
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.nav a {
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.nav a:hover {
  color: var(--blue-accent);
  background: var(--bg-secondary);
}

.nav a.on {
  color: var(--blue-accent);
  background: var(--blue-light);
}

/* ---------- MENU CON đổ xuống (thêm 06/08/2026) ----------
   Chỉ mục CÓ menu con mới được walker bọc `.nav-drop`; mục thường vẫn là <a> trần
   nên mọi rule `.nav a` ở trên giữ nguyên tác dụng. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop > a { padding-right: 6px; }
.nav-arrow { width: 14px; height: 14px; flex: 0 0 auto; margin-right: 8px;
  color: var(--text-secondary); transition: transform 0.18s ease; pointer-events: none; }
.nav-drop:hover .nav-arrow { transform: rotate(180deg); color: var(--blue-accent); }

.nav-sub {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 220px; padding: 6px;
  background: #fff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* ⚠️ Cầu nối vô hình lấp khe giữa mục cha và lớp con — thiếu nó thì chuột đi qua
   khoảng hở là menu đóng sập, người dùng không kịp với tới mục con. */
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.nav-drop:hover > .nav-sub,
.nav-drop:focus-within > .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-sub a {
  display: block; padding: 10px 14px; font-size: 14.5px; border-radius: 8px;
  color: var(--text-secondary); white-space: nowrap;
}
.nav-sub a:hover { background: var(--bg-secondary); color: var(--blue-accent); }

/* Menu con sát mép phải màn hình thì đổ sang trái để không tràn ngang. */
.nav-drop:last-child .nav-sub { left: auto; right: 0; }


.hdr-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.burger {
  display: none;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  cursor: pointer;
  place-items: center;
  color: var(--text-primary);
  transition: var(--transition);
}

.burger:hover {
  background: var(--bg-secondary);
}

.burger svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  padding: 32px 0 0;
  background: var(--bg-primary);
}

.hero-wrapper {
    position: relative;
    min-height: clamp(420px, 42vw, 560px);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background-color: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* hero-bg.jpg = BẢN WIDE 1600×706 (tỉ lệ 2.2663, vùng trắng trái 44.3%) — thay
       29/07/2026 từ bản 1.78 (vùng trắng 33.5%) vì bản cũ làm CHỮ ĐÈ LÊN XE ở
       1200–1285px (đúng cảnh báo trong CLAUDE.md). Nguồn dựng lại:
       preview/assets/hero-anh4-wide.png + scratchpad wide.js. Bản lùi 1.78 xem
       CLAUDE.md. 🚫 ĐỪNG đổi về ảnh 1.78 làm nền. */
    background: #FFFFFF url(../img/hero-bg.jpg) right bottom / contain no-repeat;
    z-index: 1;
    pointer-events: none;
}
.hero-tx {
    position: relative;
    z-index: 2;
    max-width: min(530px, 46%);
}
.hero h1 {
    font-family: var(--font-heading);
    /* ⚠️ KHÔNG ghi cứng 54px: ở 1200–1285px tiêu đề cố định gãy thành 4 dòng, cột
       chữ cao vọt ⇒ ảnh nền (contain) chuyển sang khớp-bề-ngang, vùng trắng hẹp lại
       và CHỮ ĐÈ LÊN XE (đo 29/07/2026).
       Sàn 32px: ở 375px dòng "VOLTIC VIETNAM –" (16 ký tự) vừa khít 1 dòng —
       sàn 38px làm dấu "–" rơi xuống đứng một mình một dòng, rất xấu.

       ℹ️ Rule này THỰC CHẤT chỉ còn hiệu lực từ 1200px trở lên: dải ≤640px và dải
       640.02–1199px đều có @media riêng ở mục 18 cuối file đè lên. Sàn 32px giữ lại
       làm lưới an toàn thôi.

       🐛 4.2vw → 3.95vw (08/08/2026, anh duyệt). Ở 4.2vw, dòng 2 "VẠN DẶM VỮNG TIN"
       cần 502,8px trong khung chữ 500,9px — HỤT ĐÚNG 1,9px ⇒ chữ "TIN" rơi xuống
       một mình thành DÒNG THỨ BA. Không phải chỉ 1200–1215px như ghi chú cũ: đo lại
       thì CẢ DẢI 1200–1286px đều gãy 3 dòng, kể cả 1280px.
       Vì sao 1,9px đủ phá: khung chữ là `min(530px,46%)` nên nó lớn lên chậm hơn cỡ
       chữ (0,437px/px màn so với 0,394px/px) — hai đường chỉ cắt nhau ở ~1289px, và
       ngay tại đó cũng chỉ hở 0,5px.
       3.95vw cho 2 dòng ở TOÀN DẢI, hở 20,8px (1200) → 34,1px (1300).
       🚫 Đừng nâng lại lên 4.05vw: hở tụt còn 9,6px ở 1200px, thêm một ký tự vào
       tiêu đề là gãy lại.
       ✅ Từ 1367px trở lên vẫn chạm trần 54px ⇒ 1366/1440/1920 KHÔNG ĐỔI một pixel
       nào so với bản anh đã duyệt. */
    font-size: calc(clamp(32px, 3.95vw, 54px) * var(--vt-fs, 1));
    font-weight: 800;
    text-transform: uppercase;
    color: #0B1F35;
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* 🧹 08/08/2026: đã bỏ `background:none` + `-webkit-text-fill-color:initial` —
       hai dòng đó reset hiệu ứng "chữ tô gradient" của bản Antigravity, mà theme này
       KHÔNG rule nào đặt gradient cho `.hero h1` cả (grep `text-fill` toàn bộ CSS:
       chỉ có đúng 2 dòng vừa xoá). Reset một thứ không tồn tại = code chết. */
}
.hero .sub {
    font-family: var(--font-heading);
    font-size: calc(clamp(20px, 2.2vw, 28px) * var(--vt-fs, 1));
    font-weight: 700;
    color: var(--blue-accent);
    margin-top: 14px;
    line-height: 1.3;
}
.hero p {
    color: var(--text-secondary);
    font-size: 17.5px;
    margin: 16px 0 0;
    line-height: 1.65;
}
.hero .cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
}






.hero-visual {
  display: none;
  width: 100%;
}

/* Ảnh hero màn hẹp được bọc trong <picture> (xem hero.php — để máy để bàn khỏi
   tải thừa 170 KB). <picture> mặc định là inline, ép về block cho chắc kẻo dòng
   chảy sinh khe trắng dưới ảnh do baseline. */
.hero-visual picture {
  display: block;
}

.hero-img-wide {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   FEATURE STRIP
   ========================================================================== */
.strip-out {
  padding: 0 0 20px;
  position: relative;
  z-index: 10;
  opacity: 1 !important;
  transform: none !important;
}

.strip {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(11, 31, 53, 0.08);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: -52px;
  max-width: 1160px;
  margin-inline: auto;
  position: relative;
  z-index: 10;
  overflow: hidden;
}


.strip .it {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 18px;
  font-family: var(--font-heading);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  transition: var(--transition);
}

.strip .it:hover {
  background: var(--bg-secondary);
  transform: translateY(-2px);
}

.strip .it img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  transition: var(--transition);
}

.strip .it:hover img {
  transform: scale(1.1);
}

.strip .it + .it {
  border-left: 1px solid var(--border-color);
}

/* ==========================================================================
   PRODUCT SECTION & CARDS
   ========================================================================== */
.prods-section {
  background-color: var(--bg-secondary);
  padding-top: 40px;
}

.prods-section .sh {
  margin-bottom: 32px;
}

.prod-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.filter-btn {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 10px 20px;
  border-radius: 30px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--blue-accent);
  color: var(--blue-accent);
}

.filter-btn.active {
  background: var(--blue-accent);
  border-color: var(--blue-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(var(--blue-accent-rgb), 0.25);
}

.prods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pc {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.pc:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  border-color: var(--blue-accent);
}

.pc .im {
  /* 🔲 KHUNG VUÔNG (anh yêu cầu 14/08/2026) — trước là 4/3.
     Đo trước khi đổi: khung 276×207, 4 ảnh sản phẩm tỉ lệ 1,31–1,93 nên cao thấp
     so le, 4 thẻ nhìn không đều nhau. Khung vuông cho mọi thẻ một khuôn chung.
     🚫 GIỮ `object-fit:contain` bên dưới, ĐỪNG đổi sang `cover`: 3 ảnh máy là PNG
     nền trong suốt và nằm NGANG (rộng gấp 1,3–1,9 lần chiều cao) — `cover` trong
     khung vuông sẽ xén mất 24–48% bề ngang, tức cụt luôn đầu/đuôi máy. `contain`
     thì ảnh hiện trọn vẹn, phần dư thành khoảng trắng trên–dưới (đúng như khung
     ảnh chính ở trang sản phẩm đã làm). */
  aspect-ratio: 1/1;
  /* 📐 CỠ ẢNH NGUỒN CHUẨN: 700 × 700 px (VUÔNG) — anh chốt 14/08/2026, anh tự làm
     lại 4 ảnh. Khai đúng 2 số này ở `width`/`height` trong
     template-parts/front/products.php để nút "Change image" của Live Edit chỉ đúng
     cỡ cho anh chuẩn bị ảnh — đổi aspect-ratio ở đây thì PHẢI đổi luôn 2 số đó
     (đúng bài học khung ảnh trang sản phẩm 13/08).
     🔍 Đủ nét: khung to nhất là 318px (màn 375px) ⇒ 700px = 2,2× — sắc trên retina 2×.
     ⚠️ 3 ảnh p-eco/p-pro/p-plus CÒN DÙNG Ở TRANG SO SÁNH (inc/compare/defaults.php),
     nơi ảnh để `width:100%` canh đáy và khai cỡ riêng 500×309/364/358. Thay ảnh bằng
     Live Edit/ACF thì CHỈ đổi trang chủ — an toàn. Còn CHÉP ĐÈ file trong assets/img
     là 3 máy ở trang So sánh phình cao theo, phải sửa cỡ khai bên đó trước. */
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
  display: grid;
  place-items: center;
  /* 🖼️ ĐỆM = 0 — ảnh LẤP KÍN khung (anh chốt 14/08/2026: "cho hình full khung luôn").
     Làm được vì anh đã thay ảnh nguồn sang ảnh VUÔNG có nền sẵn (1254×1254) — khác hẳn
     3 ảnh PNG nền trong suốt hồi trước, vốn cần đệm để không dính mép.
     ⚠️ Ô nào CHƯA thay ảnh vuông thì ảnh vẫn hiện trọn (object-fit:contain bên dưới),
     chỉ hụt trên–dưới chứ không bị xén — hỏng nhẹ chứ không mất nội dung. */
  padding: 0;
  position: relative;
  overflow: hidden;
  /* Ảnh nay chạm mép nên cần một vạch ngăn với phần chữ bên dưới — nền ảnh anh gửi là
     xám rất nhạt (#F7F7F7), không có vạch thì hai vùng trôi vào nhau, nhìn thiếu dứt khoát. */
  border-bottom: 1px solid var(--border-color);
}

/* 🚫 ĐÃ BỎ lớp phủ trắng `.pc .im::after` (radial-gradient) ngày 14/08/2026.
   Nó sinh ra để tạo chút ánh sáng sau lưng ảnh PNG nền TRONG SUỐT. Từ khi ảnh là ảnh
   thật có nền và lấp kín khung, lớp phủ đó nằm ĐÈ LÊN ảnh và làm bạc màu sản phẩm
   (sáng thêm 20% ở giữa) — ảnh chụp thật thì đó là làm sai màu, không phải trang trí.
   Cần ánh sáng trở lại thì thêm rule mới, đừng khôi phục cái cũ. */

.pc .im img {
  /* Lấp KÍN ô vuông. Giữ `contain` (KHÔNG dùng `cover`): ảnh vuông thì hai cách cho
     kết quả y hệt, nhưng ô nào còn ảnh CHƯA vuông thì `contain` giữ trọn sản phẩm,
     còn `cover` sẽ xén cụt hai đầu máy. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: var(--transition);
}

.pc:hover .im img {
  transform: scale(1.06);
}

.pc .bd {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.plock {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plock svg {
  width: 28px;
  height: 28px;
}

.plock b {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.pc h3 {
  font-size: calc(18px * var(--vt-fs, 1));
  font-weight: 700;
  color: var(--text-primary);
}

.pc .desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 48px;
}

.pc ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pc li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.pc li svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: var(--blue-accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
}

.pc-actions .btn {
  font-size: 13px;
  padding: 10px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   TECH SECTION
   ========================================================================== */
/* Khoảng trống phía trên khối này từng rất rộng: 100px padding đáy của khối
   Sản phẩm + 48px padding đỉnh ở đây = 148px. Bỏ hẳn phần 48px và thu padding
   đáy khối Sản phẩm lại (23/07/2026, anh yêu cầu). */
#giaiphap {
  padding-top: 0;
  /* 🔽 Thu đáy lại (10/08/2026, anh yêu cầu). Trước đây ăn theo `section` chung
     là clamp(60px,8vw,100px) ⇒ đo ở 1280px: từ đáy câu trích tới đáy khối còn
     TRỐNG 90px, cộng 38px padding đỉnh của khối Thương hiệu ngay dưới = ~128px
     trắng liền một mảng.
     ⚠️ Đừng hạ xuống 0: khối Thương hiệu bên dưới có 4 ô số liệu `.stats` ĐÈ NGƯỢC
     lên ảnh nền của nó bằng margin âm; khe ở đây quá hẹp thì câu trích dính vào
     mép dải ảnh, nhìn như lỗi tràn. */
  padding-bottom: clamp(24px, 3vw, 40px);
}

#sanpham {
  padding-bottom: clamp(40px, 5vw, 64px);
}

#giaiphap .sh {
  margin-bottom: 32px;
}

.tech-container {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  align-items: center;
}

.tech-visual {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(11, 31, 53, 0.12);
}

.tech-visual img {
  width: 100%;
  height: auto;
  display: block;
  transition: var(--transition);
}

.tech-visual:hover img {
  transform: scale(1.03);
}

.tlist {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ti {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* Icon để TRẦN, không khung màu (anh yêu cầu 23/07/2026): bỏ nền xanh nhạt,
   bỏ bo góc và đổ bóng. Icon nhích to lên cho cân vì mất lớp đệm 8px. */
.ti .ico-wrapper {
  width: 64px;
  height: 64px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: var(--transition);
}


.ti:hover .ico-wrapper {
  transform: scale(1.08);
}

.ti .ico-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ti b {
  display: block;
  font-family: var(--font-heading);
  font-size: calc(18px * var(--vt-fs, 1));
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ti span {
  font-size: 15px;
  color: var(--text-secondary);
}

.tquote {
  text-align: center;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  /* Kéo sát lên khối icon (anh yêu cầu 23/07/2026): trước là 60px + 30px. */
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
  font-style: italic;
}

/* ==========================================================================
   BRAND SECTION
   ========================================================================== */
.brand-sec {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  /* Thu khoảng trống đỉnh (anh yêu cầu 23/07/2026): trước dùng padding chung
     clamp(60px,8vw,100px) — trên màn 1280px là đúng 100px. */
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: 0;
}

/* 🔗 LỚP PHỦ BIẾN CẢ KHỐI THÀNH LIÊN KẾT (10/08/2026, anh yêu cầu).
   Dùng ở khối Công nghệ (#giaiphap) và Thương hiệu (#vevoltic): bấm chỗ nào
   trong khối cũng mở tab mới sang trang Về Voltic. In ra từ voltic_block_link().

   ⚠️ z-index 5 là con số ĐÃ ĐO, không phải chọn bừa: trong khối Thương hiệu,
      4 ô số liệu `.stats` nổi lên trên ảnh nền bằng z-index 2, còn `.strip` của
      hero dùng 3. Để 5 thì lớp phủ nằm trên tất cả những thứ đó nên bấm vào ô
      số liệu vẫn ăn link. Đừng hạ xuống ≤2.
   ⚠️ Người dùng sẽ KHÔNG bôi đen được chữ trong 2 khối này — đó là cái giá của
      kiểu "cả khối là một liên kết", không phải lỗi.
   🚫 Rule tắt lớp phủ khi Live Edit nằm ở inline-edit.css — ĐỪNG gỡ, thiếu nó là
      bấm vào chữ bị link nuốt, không sửa được ô nào trong hai khối. */
.block-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  /* Không nền, không viền — thuần túy là vùng bấm. */
  background: transparent;
  text-decoration: none;
}
/* Cho biết là bấm được. `:focus-visible` để người dùng bàn phím thấy được vùng
   này — lớp phủ trong suốt nên nếu không vẽ viền thì họ không biết đang ở đâu. */
#giaiphap:has(.block-link),
.brand-sec:has(.block-link) { cursor: pointer; }
.block-link:focus-visible {
  outline: 3px solid var(--blue-accent);
  outline-offset: -6px;
  border-radius: var(--radius-md);
}

.brand-sec .sh {
  margin-bottom: 32px;
}

/* 📏 Tiêu đề khối này GÓI TRONG 1 DÒNG (10/08/2026, anh yêu cầu).
   "Voltic Vietnam – thương hiệu của sự tin cậy" dài 43 ký tự; ở cỡ chữ 46px
   (mức trần từ 1280px) nó cần ~930px, trong khi `.sh` chung khoá 700px ⇒ gãy
   thành 2 dòng 635px + 295px, dòng dưới ngắn ngủn nhìn lệch.
   🚫 KHÔNG sửa `.sh` gốc — class đó dùng chung cho tiêu đề MỌI khối (Sản phẩm,
      Công nghệ…), nới ra là các tiêu đề ngắn kia mất dáng gọn giữa trang.
   ⚠️ Ngưỡng 901px KHÔNG phải số tròn cho đẹp — đo mới ra:
      · ≤900px cỡ chữ còn nhỏ (≤34px) nên chữ chỉ cần ~683px, vừa lọt 700px sẵn
        có ⇒ vốn đã 1 dòng, không cần đụng;
      · từ 901px cỡ chữ mới lớn dần và vượt 700px ⇒ đúng chỗ bắt đầu gãy;
      · dưới 640px thì bề ngang màn không đủ cho 1 dòng dù nới bao nhiêu (chữ cần
        607px mà cả vùng nội dung chỉ 596px) — ép nữa chỉ tổ tràn ngang, để nó
        xuống dòng tự nhiên là đúng. */
@media (min-width: 901px) {
  .brand-sec .sh {
    max-width: 980px;
  }
}

.brand {
  display: flex;
  align-items: center;
  min-height: clamp(300px, 30vw, 400px);
  background: var(--bg-primary) url('../img/brand-bg.jpg') right center / contain no-repeat;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
}



.blist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: min(500px, 45%);
  position: relative;
  z-index: 2;
}

.brand-img {
  display: none;
}

.bi {
  display: flex;
  gap: 16px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  align-items: center;
}

.bi .ico-box {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.bi .ico-box svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue-accent);
  fill: none;
  stroke-width: 2;
}

.stats {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -50px;
  position: relative;
  z-index: 4;
  max-width: 1000px;
  margin-inline: auto;
  overflow: hidden;
}

/* Khối 4 ô số liệu (anh yêu cầu 23/07/2026): nhỏ lại, dịch sang PHẢI và nhích
   lên để nằm đè vào tấm ảnh nhà máy (ảnh chiếm nửa phải khối `.brand`).
   ⚠️ CHỈ áp từ 1200px trở lên. Hẹp hơn, cột chữ `.blist` bên trái dài ra
   (chữ xuống dòng nhiều hơn) trong khi khối `.brand` thấp đi ⇒ đo ở 1100px
   thấy số liệu **đè lên gạch đầu dòng cuối** 26px.
   ⚠️ Cũng đừng kéo lên quá -56px: ở 1280px khoảng hở còn đúng ~21px, nội dung
   dài thêm một dòng là chạm. */
@media (min-width: 1200px) {
  .stats {
    max-width: 880px;
    margin-inline: auto 24px;
    margin-top: -56px;
  }
}

/* Dải 1025–1199px: khối .brand thấp mà cột chữ lại dài nhất — mức đè -50px sẵn
   có của theme làm số liệu chạm đúng gạch đầu dòng cuối (đo ở 1100px: chồng 2px).
   Nới ra cho hở hẳn. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .stats {
    margin-top: -28px;
  }
}

.st {
  padding: 26px 16px;
  text-align: center;
  transition: var(--transition);
}

.st:hover {
  background: var(--bg-secondary);
}

.st b {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(26px, 2.9vw, 36px);
  font-weight: 800;
  color: var(--blue-accent);
  line-height: 1;
  margin-bottom: 8px;
}

.st span {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}

.st + .st {
  border-left: 1px solid var(--border-color);
}

/* ==========================================================================
   WISHING CARD SECTION ("Lời chúc")
   ========================================================================== */
.wish-container {
  padding: 80px 0 40px;
}

/* Ảnh hoàng hôn giờ là NỀN của cả thẻ (anh yêu cầu 23/07/2026), không còn là
   thẻ <img> nửa phải nữa. Chữ nằm trên nền ảnh nên phải có lớp phủ sáng dần
   từ trái sang, nếu không chữ tối đè lên ảnh tối là không đọc nổi.
   ⚠️ Ảnh nền này CÓ field ACF (`loichuc_img`) — template in <style> đè khi
   admin upload ảnh khác, và Live Edit sửa nó qua `data-vt-bg`. */
.wish {
  background: var(--warm-bg) url('../img/sunset.jpg') center / cover no-repeat;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: clamp(280px, 26vw, 360px);
  border: 1px solid var(--warm-border);
  box-shadow: var(--shadow-md);
  position: relative;
}

.wish::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Đã đo bằng script (`scratchpad/zz-wish-tuongphan.js`): với các mốc này,
     chỗ nền tối nhất dưới vùng chữ vẫn sáng 70% ⇒ tương phản 4.66 với chữ
     `--warm-text`, vừa đạt chuẩn AA (4.5) mà ảnh xe/hoàng hôn vẫn hiện rõ.
     🚫 Đừng phủ đậm hơn (0.96/0.90 như bản thử đầu) — ảnh trắng xoá gần như mất. */
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0.25) 62%,
    rgba(255, 255, 255, 0) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.wish .tx {
  padding: 60px;
  position: relative;
  z-index: 2;
  max-width: min(660px, 62%);
}

.wish h2 {
  font-size: calc(clamp(24px, 3vw, 32px) * var(--vt-fs, 1));
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.wish h2 svg {
  width: 28px;
  height: 28px;
  /* 🐛 SỬA 08/08/2026: trước đây ghi `var(--accent-gold)` — biến này KHÔNG được khai báo ở
     đâu cả (di tích lúc bóc dark-mode của bản Antigravity). Biến không tồn tại ⇒ stroke rơi
     về `none`, mà SVG cũng `fill:none` ⇒ icon trái tim VẼ RA KHÔNG CÓ GÌ suốt từ đầu.
     Đổi sang đỏ thương hiệu cho khớp design system. */
  stroke: var(--red-accent);
  fill: none;
  stroke-width: 2;
}

.wish p {
  color: var(--warm-text);
  font-size: 17px;
  margin: 20px 0 0;
  line-height: 1.7;
}

/* Ảnh hoàng hôn nay là NỀN của cả thẻ nên không còn thẻ <img> riêng nữa. */

/* ==========================================================================
   CONTACT FORM & CTA BAND
   ========================================================================== */
.cta-sec {
  padding: 40px 0 80px;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-md);
}

.cta-info h2 {
  font-size: calc(clamp(26px, 3.2vw, 36px) * var(--vt-fs, 1));
  font-weight: 800;
  color: var(--text-primary);
}

.cta-info p {
  color: var(--text-secondary);
  font-size: 16px;
  margin: 16px 0 32px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.cta-contact-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Dải liên hệ KHI CHƯA GẮN FORM (anh yêu cầu 23/07/2026) ----
   Gộp tất cả về MỘT HÀNG như ảnh mẫu: chữ bên trái, 2 nút bên phải.
   Chỉ áp cho trường hợp không có Contact Form 7; gắn form vào thì khối
   trở lại bố cục 2 cột chữ | form như cũ. */
.cta-grid--no-form {
  display: block;
  padding: 32px 40px;
  /* Xanh nhạt như ảnh mẫu anh gửi — đúng màu `--band:#ECF2FB` của design system. */
  background: #ECF2FB;
  border-color: #DCE7F7;
}

.cta-grid--no-form .cta-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 40px;
}

.cta-grid--no-form .cta-info h2 {
  grid-column: 1;
  grid-row: 1;
  font-size: calc(clamp(24px, 2.6vw, 32px) * var(--vt-fs, 1));
}

.cta-grid--no-form .cta-info p {
  grid-column: 1;
  grid-row: 2;
  margin: 8px 0 0;
}

/* 2 thẻ "Tổng đài hỗ trợ" / "Email liên hệ": anh chốt BỎ (23/07/2026) — đúng
   như ảnh mẫu. Số điện thoại và email vẫn còn ở footer, nút gọi nổi và nút
   "Gọi tư vấn" ngay cạnh. Chỉ ẩn ở dải một hàng; có form CF7 thì 2 thẻ vẫn hiện. */
.cta-grid--no-form .cta-contact-methods {
  display: none;
}

.cta-grid--no-form .cta-buttons {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0;
  flex-wrap: nowrap;
  align-self: center;
}

.contact-method-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.contact-method-card:hover {
  border-color: var(--blue-accent);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}

.contact-method-card .ico-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}


.contact-method-card svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.contact-method-card h5 {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-method-card p {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Form Styles */
.contact-form {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 36px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   KHỐI LIÊN HỆ BẢN MỚI — có form CF7 (thêm 10/08/2026, template-parts/blocks/contact.php)
   Bố cục theo mẫu anh gửi: một hộp bo góc lớn, trong đó chữ + 2 thẻ liên hệ ở
   trái, form ở phải (hộp trắng riêng có viền).
   ⚠️ Class đặt TIỀN TỐ `contact-` cho khác hẳn `.cta-*` của khối cũ — hai khối
      có thể cùng xuất hiện trên một trang lúc anh so sánh, dùng chung class là
      rule của cái này đè cái kia.
   ========================================================================== */
.contact-sec {
  padding: 40px 0 80px;
}
.contact-box {
  display: grid;
  /* Hai cột BẰNG NHAU. Trước để 1fr 1.15fr (form rộng hơn) nhưng form thật chỉ có
     3 ô ngắn nên cột phải trông rỗng, cột trái thì chật — anh báo "nhìn lệch". */
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  /* 🔴 stretch, KHÔNG phải start (sửa 10/08/2026 theo ảnh anh gửi từ hosting).
     Với `start`, mỗi cột cao theo nội dung của nó ⇒ đo thật ở 1280px: cột trái
     395px, hộp form 313px ⇒ **đáy lệch 82px**, hộp form kết thúc lửng lơ giữa
     chừng trong khi cột trái còn chạy tiếp. `stretch` cho hộp form cao bằng cột
     trái, hai đáy thẳng hàng. */
  align-items: stretch;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.6vw, 56px);
  box-shadow: var(--shadow-sm);
}
/* Chưa gắn form ⇒ chỉ còn cột chữ, để 1 cột cho khỏi hụt nửa hộp. */
.contact-box--no-form {
  grid-template-columns: 1fr;
}
.contact-left h2 {
  font-size: calc(clamp(26px, 3.2vw, 36px) * var(--vt-fs, 1));
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.contact-left > p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin: 16px 0 28px;
  max-width: 46ch;
}
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Thẻ hotline / email. Dựng riêng chứ không tái dùng `.contact-method-card` của
   khối cũ: nhãn ở đây là chữ HOA nhỏ + giãn chữ, khác hẳn kiểu bên kia. */
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  text-decoration: none;
  transition: var(--transition);
}
.contact-card:hover {
  border-color: var(--blue-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.contact-card .ico-wrap {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--band, #ECF2FB);
}
.contact-card .ico-wrap svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--blue-accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-card-tx { min-width: 0; }
.contact-card h5 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.contact-card p {
  margin: 3px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  /* Số điện thoại có dấu cách — thiếu dòng này là nó gãy đôi ở cột hẹp. */
  white-space: nowrap;
}
/* Hộp form bên phải. CF7 tự sinh markup bên trong; phần tạo kiểu cho ô nhập
   dùng chung với khối cũ ở cuối file (mục "Ô nhập của Contact Form 7"). */
.contact-right {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: clamp(22px, 2.4vw, 34px);
  box-shadow: var(--shadow-sm);
  /* Hộp nay cao bằng cột trái (align-items:stretch ở trên) nên thường dư chỗ.
     Căn giữa theo chiều dọc để phần dư chia đều trên–dưới, thay vì dồn hết
     xuống đáy thành một mảng trống. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* CF7 bọc nội dung trong <div class="wpcf7"> rồi <form>; phải cho cả hai giãn ra,
   nếu không justify-content ở trên chỉ căn được đúng một khối con và vô tác dụng. */
.contact-right .wpcf7 { width: 100%; }
/* Ô cuối cùng (thường là nút gửi) không cần lề dưới — nó tạo khoảng hụt khiến
   nội dung form trông lệch lên trên dù đã căn giữa. */
.contact-right .wpcf7 p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Xếp dọc: form xuống dưới phần chữ. */
  .contact-box { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  /* Ô hẹp: cho số điện thoại được xuống dòng, thà gãy còn hơn tràn ngang. */
  .contact-card p { white-space: normal; font-size: 17px; }
  .contact-card { padding: 14px; gap: 12px; }
}

/* ℹ️ KHỐI CSS FORM — hiện CHƯA phần tử nào dùng (đã grep 08/08/2026: 0 lần trong PHP/JS).
   CỐ Ý GIỮ: theme dựng sẵn cho ngày anh gắn Contact Form 7 vào ô ACF `cta_cf7`
   (blocks/cta.php in form vào `.contact-form`). ⚠️ Nhưng CF7 sinh markup bằng class
   riêng của nó (`wpcf7-form-control`…), nên các rule dưới chỉ ăn nếu anh TỰ viết
   `<div class="form-group">` trong trình soạn form. Không cần thì xoá cả khối, vô hại. */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue-accent);
  background: var(--bg-primary);
  box-shadow: 0 0 0 4px rgba(var(--blue-accent-rgb), 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-submit-btn {
  width: 100%;
}

.form-status {
  margin-top: 16px;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: none;
}

.form-status.success {
  background: var(--blue-light);
  color: var(--blue-accent);
  border: 1px solid rgba(var(--blue-accent-rgb), 0.2);
  display: block;
}

.form-status.error {
  background: var(--red-light);
  color: var(--red-accent);
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: block;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft {
  background: #050C1B;
  color: #94A3B8;
  padding: 80px 0 0;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ft .cols {
  display: grid;
  /* cột 5 rộng hơn chút để huy hiệu hotline (≈190px) không bị bó — 28/07/2026 */
  grid-template-columns: 1.4fr repeat(3, 0.95fr) 1.45fr;
  gap: 36px;
  margin-bottom: 60px;
}

.ft h4 {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 8px;
}

.ft h4::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--blue-accent);
}

.ft a {
  display: inline-block;
  color: #94A3B8;
  padding: 6px 0;
  transition: var(--transition);
}

.ft a:hover {
  color: #FFFFFF;
  transform: translateX(3px);
}

.ft li {
  padding: 6px 0;
}

.flogo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.flogo svg {
  width: 38px;
  height: 38px;
}

.flogo b {
  font-size: 24px;
  font-weight: 800; /* 08/08: font Plus Jakarta Sans chỉ có tới 800 — để 900 là trình duyệt làm đậm GIẢ, chữ nhoè */
  letter-spacing: 0.04em;
  color: #FFFFFF;
}

.ftag {
  color: #64748B;
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}

.soc {
  display: flex;
  gap: 12px;
}

.soc a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  padding: 0;
  transition: var(--transition);
  color: #94A3B8;
}

.soc svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.soc a:hover {
  background: var(--blue-accent);
  border-color: var(--blue-accent);
  color: #FFFFFF;
  transform: translateY(-3px);
}



/* ---- Cột 5 footer: KẾT NỐI (icon thương hiệu có màu + huy hiệu hotline) ----
   Thiết kế anh duyệt 28/07/2026. Huy hiệu hotline dựng bằng HTML/CSS, KHÔNG cắt
   ảnh: bấm gọi được trên điện thoại, Google đọc được số, đổi số chỉ sửa ACF. */
.fconnect { text-align: center; }
.fconnect h4 { text-align: center; text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; }
.fconnect h4::after { left: 50%; transform: translateX(-50%); }  /* gạch chân về giữa */

.fbrands { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.fbrands .fb-ic {
  width: 42px; height: 42px; border-radius: 10px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; transition: var(--transition);
}
.fbrands .fb-ic svg { width: 24px; height: 24px; }
.fbrands .fb-yt { background: #FF0000; }
.fbrands .fb-fb { background: #1877F2; }
.fbrands .fb-za {                                   /* Zalo dùng chữ — đúng logo gốc */
  background: #0068FF; font-family: var(--font-heading);
  font-weight: 800; font-size: 13px; color: #FFFFFF;
}
.fbrands .fb-ic:hover { transform: translateY(-3px); filter: brightness(1.1); color: #FFFFFF; }

/* huy hiệu hotline: nền trắng, số đỏ, icon tích xanh
   ⚠️ PHẢI viết `.fconnect .fhot` (2 class) — `.fhot` trơn (0,1,0) THUA rule
   `.ft a{display:inline-block;padding:6px 0}` (0,1,1) ở trên ⇒ huy hiệu mất
   display:flex, chữ xuống dòng, khối méo 117×80 (đã dính một lần). */
.fconnect .fhot {
  display: inline-flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  background: var(--red-accent);                  /* nửa PHẢI: nền đỏ */
  border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  text-align: left; transition: var(--transition);
}
.fconnect .fhot:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
/* nửa TRÁI: nền trắng ôm dấu tích. Nền trắng là BẮT BUỘC — nét tích trong ảnh
   trong suốt, đặt lên nền đỏ là nét tích hoá đỏ, mất hình. */
.fconnect .fhot-ico {
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; padding: 7px 11px; flex: none;
}
/* dấu tích = ẢNH (tick-verified.png). 30px để chữ ONLINE.GOV.VN trong vòng tròn đỡ nhoè.
   width/height cố định + object-fit:contain giữ đúng tỉ lệ 96×98 (không méo). */
.fconnect .fhot-ic { width: 30px; height: 30px; flex: none; object-fit: contain; }
.fhot-tx { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; padding: 7px 18px 7px 13px; }
/* ⚠️ nowrap BẮT BUỘC: số có dấu cách nên cột 5 hẹp là số bị xuống dòng,
   huy hiệu co thành khối vuông xấu (đã dính một lần khi cột chỉ rộng 212px). */
.fhot-tx b { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: #FFFFFF; letter-spacing: .01em; white-space: nowrap; }
.fhot-tx small { font-size: 12.5px; color: rgba(255, 255, 255, .95); margin-top: 2px; white-space: nowrap; }

.fsupport { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.fsupport svg { width: 17px; height: 17px; flex: none; color: var(--blue-accent); }

.fbot {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px 0;
  text-align: center;
  font-size: 13px;
  color: #475569;
}

/* ==========================================================================
   PRODUCT DETAIL MODAL
   ========================================================================== */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: rgba(11, 19, 43, 0.6);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.modal.open .modal-content {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  z-index: 10;
  transition: var(--transition);
}

.modal-close-btn:hover {
  background: var(--bg-tertiary);
  transform: rotate(90deg);
}

.modal-close-btn svg {
  width: 20px;
  height: 20px;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr;
  gap: 32px;
  padding: 40px;
}

.modal-img-container {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  border-radius: var(--radius-md);
  padding: 20px;
  display: grid;
  place-items: center;
  height: max-content;
  border: 1px solid var(--border-color);
}

.modal-img-container img {
  max-height: 250px;
  object-fit: contain;
}

.modal-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-wrapper h3 {
  font-size: 24px;
}

.modal-desc {
  font-size: 15px;
  color: var(--text-secondary);
}

.modal-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.modal-specs-table tr {
  border-bottom: 1px solid var(--border-color);
}

.modal-specs-table th,
.modal-specs-table td {
  padding: 10px 12px;
  text-align: left;
}

.modal-specs-table th {
  color: var(--text-muted);
  font-weight: 600;
  width: 40%;
}

.modal-specs-table td {
  color: var(--text-primary);
  font-weight: 500;
}

/* ==========================================================================
   FLOATING ACTION BUTTONS
   ========================================================================== */
.floating-contact {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 99;
}

.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: var(--transition);
  position: relative;
}

.float-btn.phone {
  background-color: var(--primary);
}

.float-btn.zalo {
  background-color: #0068FF;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
}

.float-btn:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Vòng sáng lan toả quanh nút gọi.
   ⚡ Sửa 31/07/2026 — CHẠY BẰNG transform + opacity, ĐỪNG quay lại box-shadow.
   Bản cũ animate `box-shadow` spread 0 → 15px với `infinite`. box-shadow là thuộc
   tính PAINT: trình duyệt không giao được cho compositor mà phải VẼ LẠI vùng nút
   MỖI KHUNG HÌNH, vĩnh viễn, kể cả khi người dùng đang đứng yên đọc trang — nút lại
   `position:fixed` nên nó nằm đè lên nội dung đang cuộn, tốn pin trên điện thoại.
   transform + opacity chạy thẳng trên compositor (GPU), không repaint.
   Kích thước tương đương: nút 56px, scale 1.55 ⇒ 86,8px ≈ 56 + 2×15px của bản cũ.
   Tiện thể sửa một lỗi cũ: keyframes trước ghi CỨNG màu --blue-accent nên nút gọi
   (navy) và nút Zalo (#0068FF) đều nhấp nháy màu xanh nhạt sai; nay mỗi nút lan
   toả đúng màu của mình vì màu nằm ở `background` chứ không nằm trong keyframes. */
.float-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background: rgba(var(--blue-accent-rgb), 0.6);
  z-index: -1;
  animation: pulse-ring 1.8s infinite;
  pointer-events: none;
}

.float-btn.phone::before {
  background: rgba(var(--primary-rgb), 0.6);
}

.float-btn.zalo::before {
  background: rgba(0, 104, 255, 0.6);
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.55);
    opacity: 0;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ⚠️ NGƯỠNG XẾP DỌC HERO = 1199px, KHÔNG PHẢI 992px (sửa 29/07/2026).
   Lý do (đo thật ở 1024 — iPad dọc): ảnh nền hero-bg.jpg tỉ lệ 1.78, vùng trắng chỉ
   33.5% (đúng cảnh báo trong CLAUDE.md), cộng tiêu đề 54px cố định làm cột chữ cao
   633px ⇒ ở dải 993–1199px CHỮ ĐÈ LÊN XE ~120px và nút CTA rơi khỏi thẻ hero.
   Từ 1200px trở lên chữ chỉ chạm vùng trời nhạt (anh đã duyệt đẹp) → giữ nguyên. */
@media (max-width: 1199px) {
  .hero-wrapper {
    min-height: 0;
    background: none;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    /* 🐛 Sửa 23/07/2026: thiếu dòng này nên ở màn hẹp khối hero VẪN xếp ngang
       (.hero-wrapper là flex row) — trên điện thoại 375px chữ chiếm 237px, ảnh
       xe bị bóp còn 98px. Ý đồ thiết kế là xếp dọc: .hero-visual chỉ hiện ở
       đúng ngưỡng này. */
    flex-direction: column;
  }

  .hero-wrapper::before {
    display: none;
  }

  .hero-tx {
    max-width: none;
    text-align: center;
    /* 🧹 08/08/2026: bỏ `background:none` · `backdrop-filter:none` · `padding:0` —
       `.hero-tx` gốc chỉ có position/z-index/max-width, không đặt ba thứ đó bao giờ
       (di tích bản Antigravity có hộp chữ nền mờ). Reset thứ không tồn tại. */
  }

  .hero-tx p {
    margin-inline: auto;
    max-width: 680px;
  }



  .hero .cta {
    justify-content: center;
  }

  .hero-visual {
    display: block;
    margin-top: 36px;
  }

  .strip {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  section {
    padding: 60px 0;
  }

  .prods {
    grid-template-columns: repeat(2, 1fr);
  }

  .strip {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .strip .it:nth-child(3n+1) {
    border-left: none;
  }
  
  .strip .it:nth-child(n+4) {
    border-top: 1px solid var(--border-color);
  }

  /* 🧹 08/08/2026: bỏ `.wish` khỏi danh sách này. `.wish` chỉ có MỘT thẻ con và bản gốc
     đã là `grid-template-columns: minmax(0, 1fr)` rồi — ép về `1fr` vừa thừa vừa KÉM AN
     TOÀN hơn: `1fr` = `minmax(auto, 1fr)`, nếu nội dung có min-content rộng hơn khung thì
     tràn ngang; `minmax(0, 1fr)` thì không bao giờ. `gap: 40px` cũng vô nghĩa với 1 con. */
  .tech-container,
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Ảnh nền lời chúc: màn hẹp thì chữ chiếm hết bề ngang nên lớp phủ phải
     sáng từ TRÊN xuống, không phải từ trái sang, kẻo chữ nằm trên vùng ảnh tối. */
  .wish::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.88) 55%,
      rgba(255, 255, 255, 0.55) 100%
    );
  }

  .wish .tx {
    max-width: none;
  }

  /* Dải liên hệ: xếp dọc lại, nút xuống dưới chữ */
  .cta-grid--no-form .cta-info {
    grid-template-columns: 1fr;
  }

  .cta-grid--no-form .cta-buttons {
    grid-column: 1;
    grid-row: auto;
    margin-top: 24px;
    flex-wrap: wrap;
  }

  .brand {
    display: block;
    min-height: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }


  .blist {
    max-width: none;
    margin-bottom: 30px;
  }

  .brand-img {
    display: block;
  }

  .brand-img img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    width: 100%;
  }

  .stats {
    margin-top: 40px;
    grid-template-columns: repeat(2, 1fr);
    /* Màn hẹp không còn ảnh nền nhà máy để đè lên → trả khối số liệu về
       canh giữa, bỏ phần thu hẹp + dịch phải của bản desktop. */
    max-width: none;
    margin-inline: auto;
  }

  .st:nth-child(2n+1) {
    border-left: none;
  }

  .st:nth-child(n+3) {
    border-top: 1px solid var(--border-color);
  }

  .ft .cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-grid {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .modal-img-container img {
    max-height: 200px;
  }
}

@media (max-width: 900px) {
  .burger {
    display: grid;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    background: var(--bg-primary);
    border-bottom: 1.5px solid var(--border-color);
    padding: 16px var(--gut) 24px;
    box-shadow: var(--shadow-lg);
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    padding: 14px 10px;
    font-size: 16px;
    border-radius: 0;
  }

  .nav a + a {
    border-top: 1px solid var(--border-color);
  }

  .nav a.on {
    background: none;
    color: var(--blue-accent);
    font-weight: 700;
  }

  /* ---------- MENU CON trên điện thoại ----------
     Menu burger xếp DỌC nên lớp đổ xuống kiểu absolute là vô nghĩa (nó sẽ đè lên
     mục kế tiếp). Ở đây mục con hiện luôn, thụt lề vào để thấy rõ cấp bậc — khách
     không phải mò tìm chỗ bấm mở. */
  .nav-drop { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-drop > a { padding-right: 10px; }
  .nav-drop + a,
  .nav-drop + .nav-drop,
  a + .nav-drop { border-top: 1px solid var(--border-color); }
  .nav-arrow { display: none; }              /* xếp dọc thì mũi tên không còn nghĩa */

  .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 0 14px; margin: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    border-left: 2px solid var(--border-color);
  }
  .nav-sub::before { display: none; }
  .nav-sub a { padding: 12px 10px; font-size: 15px; border-radius: 0; }
  .nav-sub a + a { border-top: 1px solid var(--border-color); }

  .hdr-actions {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  section {
    padding: 48px 0;
  }


  .hdr-actions .btn {
    display: none;
  }




  .stats {
    grid-template-columns: 1fr;
  }

  .st + .st {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }

  .wish .tx,
  .cta-grid {
    padding: 32px 20px;
  }

  .contact-form {
    padding: 24px;
  }

  .ft .cols {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .modal-grid {
    padding: 20px;
  }
}

/* ==========================================================================
   HIỆU ỨNG HỌC TỪ AZPOS.VN (Flatsome has-sticky + catstrip slider)
   ========================================================================== */

/* 1) Header thu nhỏ khi cuộn — mô phỏng .header.has-sticky.stuck của Flatsome:
   cao 80→60px, logo co lại, bóng đậm hơn; transition 0.25s như bản gốc azpos. */
.hdr .wrap { transition: min-height 0.25s ease; }
.hdr .logo svg, .hdr .logo img.custom-logo { transition: width 0.25s ease, height 0.25s ease, max-height 0.25s ease; }
.hdr.stuck .wrap { min-height: 60px; }
.hdr.stuck { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.hdr.stuck .logo svg { width: 30px; height: 30px; }
.hdr.stuck .logo img.custom-logo { max-height: 30px; }

/* 2) Slider ngang cho dải sản phẩm ở màn hẹp — pattern az-catstrip:
   nút prev/next tròn nổi 2 bên, tự mờ khi chạm mép (JS gắn .is-disabled). */
.prods-wrap { position: relative; }
.prods-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  place-items: center;
  color: var(--text-primary);
  transition: background-color 0.15s, border-color 0.15s, transform 0.12s, opacity 0.15s;
}
.prods-nav svg { width: 20px; height: 20px; }
.prods-nav--prev { left: -8px; }
.prods-nav--next { right: -8px; }
.prods-nav:hover:not(.is-disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.06);
}
.prods-nav.is-disabled { opacity: 0.35; cursor: default; }

@media (max-width: 1024px) {
  .prods-wrap.has-scroll .prods-nav { display: grid; }
  .prods {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prods::-webkit-scrollbar { display: none; }
  /* ⚠️ PHẢI trả height về auto: `.pc` có `height:100%` để thẻ lấp đầy ô LƯỚI ở màn
     rộng, nhưng khi `.prods` thành FLEX thì chiều cao container là auto ⇒ `height:100%`
     hoá ra tính theo nội dung của CHÍNH thẻ đó và ĐÈ MẤT `align-items:stretch` mặc định
     ⇒ 4 thẻ đứng cạnh nhau mà cao thấp lệch 23–45px (tên sản phẩm dài ngắn khác nhau).
     Lỗi này có sẵn từ lâu, sửa 14/08/2026. */
  .prods .pc { flex: 0 0 min(320px, 82vw); scroll-snap-align: start; height: auto; }
}

/* ==========================================================================
   WORDPRESS COMPAT — phần THÊM riêng cho WP, không có trong bản Antigravity
   ========================================================================== */

/* Thanh admin WP đẩy header sticky xuống; ≤600px admin bar chuyển absolute
   (trôi theo trang) nên header phải về top:0 kẻo hở khe 46px khi cuộn. */
body.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hdr { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .hdr { top: 0; } }

/* Đích neo không chui dưới header sticky (header ~81px + thở) + bù admin bar */
[id] { scroll-margin-top: 100px; }
body.admin-bar [id] { scroll-margin-top: 132px; }
@media (max-width: 782px) { body.admin-bar [id] { scroll-margin-top: 146px; } }

/* Logo upload qua Tùy biến (in <img> trần, KHÔNG dùng the_custom_logo) */
.logo img.custom-logo { height: 36px; width: auto; }

/* Logo trong FOOTER: nền footer tối (#050C1B) nên logo đơn sắc (đen) sẽ tàng
   hình. `brightness(0) invert(1)` biến mọi logo đơn sắc thành TRẮNG để hiện rõ.
   ⚠️ Chỉ hợp logo 1 màu (thương hiệu Voltic là đen/trắng). Nếu sau này dùng logo
   NHIỀU MÀU thì bỏ dòng filter này và upload sẵn một bản logo trắng cho footer. */
.flogo img.custom-logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
/* Logo footer RIÊNG (ACF) — dùng nguyên ảnh, KHÔNG lọc màu (admin tự upload bản trắng). */
.flogo img.footer-logo { height: 40px; width: auto; }

/* Menu WP: walker xuất <a> trần nên .nav a ăn nguyên CSS; phòng hờ nếu lộ ul/li */
.nav ul, .nav li { list-style: none; margin: 0; padding: 0; }

/* Chuẩn a11y WP */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

/* Trang con: khung nội dung thường (Gutenberg) + trả lại các reset đã bị
   CSS landing gỡ mất, kẻo nội dung Elementor/Gutenberg mất bullet, mất link */
.voltic-page-content { padding: 48px 0 72px; }
.voltic-page-content .page-title { font-family: var(--font-heading); font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; margin-bottom: 24px; color: var(--text-primary); }
.voltic-page-content ul, .voltic-page-content ol,
.elementor-widget-text-editor ul, .elementor-widget-text-editor ol {
  list-style: revert; margin: 0 0 1em; padding-left: 1.5em;
}
.voltic-page-content a { color: var(--blue-accent); text-decoration: underline; }
section.elementor-section, section.wp-block-group { padding: 0; }

/* Ô nhập của Contact Form 7 ăn theo design system (form khối Liên hệ).
   ⚠️ PHẢI liệt kê CẢ `.contact-right` — đó là hộp form của khối liên hệ bản mới
   (blocks/contact.php). Thiếu nó thì form bản mới trơ kiểu mặc định của trình
   duyệt: ô nhập không bo góc, không viền theo theme, nút gửi xám ngắt. */
.contact-form .wpcf7 input[type="text"],
.contact-form .wpcf7 input[type="tel"],
.contact-form .wpcf7 input[type="email"],
.contact-form .wpcf7 select,
.contact-form .wpcf7 textarea,
.contact-right .wpcf7 input[type="text"],
.contact-right .wpcf7 input[type="tel"],
.contact-right .wpcf7 input[type="email"],
.contact-right .wpcf7 select,
.contact-right .wpcf7 textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-primary);
}
.contact-form .wpcf7 input:focus, .contact-form .wpcf7 select:focus, .contact-form .wpcf7 textarea:focus,
.contact-right .wpcf7 input:focus, .contact-right .wpcf7 select:focus, .contact-right .wpcf7 textarea:focus {
  outline: 2px solid var(--blue-accent); outline-offset: 0;
}
.contact-form .wpcf7 label,
.contact-right .wpcf7 label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--text-primary); }
.contact-form .wpcf7 p,
.contact-right .wpcf7 p { margin: 0 0 16px; }
.contact-form .wpcf7 .wpcf7-submit,
.contact-right .wpcf7 .wpcf7-submit {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; padding: 14px 28px;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: var(--primary); color: #FFFFFF; transition: var(--transition);
}
.contact-form .wpcf7 .wpcf7-submit:hover,
.contact-right .wpcf7 .wpcf7-submit:hover { background: var(--primary-hover); transform: translateY(-2px); }
/* Nút gửi trải hết bề ngang như mẫu anh gửi (form 1 cột nên nút full-width đẹp hơn). */
.contact-right .wpcf7 .wpcf7-submit { width: 100%; justify-content: center; }

/* Khối liên hệ khi CHƯA có form CF7 — xem bố cục "một hàng" ở mục CTA BAND phía trên.
   ⚠️ Trước đây chỗ này bó khối lại `max-width:720px` (kiểu 1 cột canh giữa);
   đã bỏ ngày 23/07/2026 vì bố cục mới cần đủ bề ngang để chữ và 2 nút đứng
   cùng hàng. Quy tắc này nằm CUỐI file nên nó đè mọi khai báo phía trên —
   sửa `.cta-grid--no-form` mà không thấy ăn thì kiểm tra lại đúng chỗ này. */

/* ==========================================================================
   18. TINH CHỈNH ĐIỆN THOẠI & IPAD (thêm 30/07/2026 — anh yêu cầu "chuyên nghiệp")
   Đặt CUỐI FILE để không bị khối WORDPRESS COMPAT ở trên đè.
   Đo trước khi sửa (375px): trang cao 6583px = 8,1 màn; riêng footer 1341px (20%).
   ========================================================================== */

/* ---- ĐIỆN THOẠI (≤640px) ---- */
@media (max-width: 640px) {

  /* 0) TIÊU ĐỀ HERO TO LÊN (anh yêu cầu 31/07/2026).
        Cũ: clamp(32px,4.2vw,54px) → ở mọi màn ≤810px đều dính SÀN 32px, trên
        điện thoại nhìn nhỏ so với khổ chữ chung.
        Nay co giãn THẬT theo bề ngang màn thay vì đứng yên ở sàn.
        ⚠️ SÀN VẪN PHẢI LÀ 32px — đừng nâng lên 34px "cho to". Đã thử và hỏng:
        máy 360px (Galaxy A, rất phổ biến) có khung chữ chỉ 320px, mà dòng
        "VẠN DẶM VỮNG TIN" ở 34px đo được 318px ⇒ **chỉ hở 2px**, lệch một nhịp
        render là dòng "VOLTIC VIETNAM –" gãy và dấu "–" rơi xuống đứng một mình
        (đúng lỗi đã ghi trong CLAUDE.md). Để sàn 32px thì 360px tự lấy 9,4vw.
        Bù lại phần "to lên" bằng letter-spacing chặt hơn (-0,03em): chữ gọn ~1,5%
        nên cùng khung đó chứa được cỡ lớn hơn.
        ⚠️ Trần 44px phải KHỚP sàn của dải 641–1199px bên dưới, nếu không chữ
        nhảy bậc 44 → 32px khi xoay ngang máy. */
  .hero h1 {
    font-size: calc(clamp(32px, 9.4vw, 44px) * var(--vt-fs, 1));
    letter-spacing: -0.03em;
  }

  /* Máy siêu nhỏ (iPhone SE đời đầu, 320px): khung chữ chỉ còn 280px nên kể cả
     cỡ nhỏ nhất của công thức trên (30px) vẫn tràn ⇒ tiêu đề vỡ thành 4 dòng
     vụn. Đây là lỗi CÓ SẴN từ trước, không phải do đợt sửa này. 28px thì gọn
     đúng 2 dòng (dòng dài nhất 258px, hở 22px). */
  @media (max-width: 344px) {
    .hero h1 { font-size: calc(28px * var(--vt-fs, 1)); }
  }

  /* 1) Dải "5 điểm mạnh": 1 cột (485px) → 2 cột, ô lẻ cuối chiếm hết hàng.
        ⚠️ PHẢI đổi ô sang xếp DỌC (icon trên, chữ dưới) + chữ nhỏ lại: để nguyên
        kiểu icon-cạnh-chữ thì cột chỉ còn ~160px, "Động cơ không chổi than" gãy
        4 dòng rất xấu (đã đo). Xếp dọc thì chữ được trọn bề ngang → tối đa 2 dòng. */
  .strip { grid-template-columns: 1fr 1fr; }
  .strip .it {
    flex-direction: column;
    gap: 10px;
    padding: 20px 10px;
    font-size: 14.5px;
    text-align: center;
  }
  .strip .it img { width: 38px; height: 38px; }
  .strip .it { border-left: none !important; border-top: 1px solid var(--border-color); }
  .strip .it:nth-child(odd) { border-right: 1px solid var(--border-color); }
  .strip .it:nth-child(-n+2) { border-top: none; }
  .strip .it:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }

  /* 2) SẢN PHẨM XẾP DỌC — HIỆN HẾT 4 THẺ (anh yêu cầu 31/07/2026).
        Trước đây điện thoại dùng slider ngang (khối "HIỆU ỨNG AZPOS" ở trên đặt
        `.prods{display:flex!important}` từ ≤1024px) ⇒ chỉ thấy 1 thẻ, 3 thẻ kia
        phải vuốt mới biết là có. Nay xếp dọc 1 cột, cuộn dọc là thấy hết.
        ⚠️ PHẢI có `!important` và PHẢI đặt ở mục 18 (cuối file): rule azpos dùng
        `display:flex!important` nên chỉ độ ưu tiên thường sẽ KHÔNG đè được.
        ⚠️ Reset đủ 4 thứ của slider (overflow / snap / flex-basis / padding đáy),
        thiếu cái nào cũng để lại hành vi thừa: `flex:0 0 min(320px,82vw)` tuy vô
        hiệu trong grid nhưng giữ lại thì đổi layout sau này dễ dính bẫy. */
  .prods {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .prods .pc {
    flex: initial;
    scroll-snap-align: none;
  }

  /* Hết slider thì 2 nút mũi tên cũng hết việc — ẩn hẳn.
     (JS cũng không gắn `.has-scroll` nữa vì không còn tràn ngang, nhưng giữ
      dòng này cho chắc: nút 42px neo ở mép từng ĐÈ LÊN nội dung thẻ.) */
  .prods-wrap .prods-nav { display: none !important; }

  /* 3) Nút gọi nổi: nhỏ lại + sát góc hơn để bớt che chữ khi cuộn. */
  .floating-contact { bottom: 16px; right: 16px; gap: 12px; }
  .float-btn { width: 48px; height: 48px; }
  .float-btn svg { width: 20px; height: 20px; }

  /* 4) FOOTER gọn lại: 3 cột link xếp 2 cột thay vì dồn 1 cột dọc;
        cột logo và cột "Kết nối" vẫn chiếm trọn bề ngang. */
  .ft { padding-top: 48px; }
  .ft .cols { grid-template-columns: 1fr 1fr; gap: 26px 18px; margin-bottom: 34px; }
  .ft .cols > div:first-child,
  .ft .cols > .fconnect { grid-column: 1 / -1; }
  .ft h4 { margin-bottom: 14px; }
  /* 👆 VÙNG CHẠM — đo ở 375px: link footer chỉ cao 27px, dưới ngưỡng bấm thoải mái
     (Apple khuyên 44px, Google 48px). Bản cũ còn HẠ padding xuống 4px ở đúng khổ
     điện thoại, tức làm nút khó bấm hơn ở chỗ cần dễ bấm nhất. Nay nâng lên để mỗi
     link cao ~40px mà danh sách vẫn không dài thêm đáng kể. */
  .ft a { padding: 10px 0; }
  .ft li { line-height: 1.35; }
  .fbot { padding: 20px 0; }
}

/* ---- ẢNH NHÀ MÁY TO LÊN Ở MÀN HẸP (≤1024px) — anh yêu cầu 31/07/2026 ----
   `brand-photo.jpg` là ảnh PANORAMA 1400×439 (tỉ lệ 3,19) mà hơn 1/3 bên trái
   chỉ là nền trắng mờ dần, KHÔNG có nội dung. Thả nguyên tỉ lệ vào khung 335px
   thì ảnh chỉ cao 105px, nhà máy bé xíu — đúng chỗ anh thấy "cần to lên".
   Cắt về 2:1 neo mép PHẢI ⇒ bỏ đúng 522px trắng vô nghĩa, còn trọn nhà máy +
   logo VOLTIC + xe tải; ở 375px chiều cao 105 → 168px (+60%).
   ⚠️ Áp cho CẢ dải ≤1024px chứ không riêng điện thoại: chỉ áp ≤640 thì vừa qua
   641px ảnh tụt phắt 294 → 185px (thấy rõ khi xoay ngang máy). Từ 1025px ảnh này
   bị ẩn — khối .brand chuyển sang dùng ảnh NỀN CSS nên không liên quan.
   ⚠️ `object-position` phải là `right`: canh giữa/trái sẽ ăn mất xe tải bên phải
   mà vẫn chừa lại mảng trắng.
   ⚠️ Đừng ép tỉ lệ xuống dưới 2 — cắt sâu hơn là chạm mép trái toà nhà (đã dựng
   thử 4 mốc 2 / 2,3 / 2,6 / 3,19 rồi so bằng mắt mới chốt).
   ⚠️ `height:auto` là bắt buộc (bẫy #0 trong CLAUDE.md): thẻ có sẵn width/height
   khai trong HTML, thiếu dòng này là ảnh méo. */
@media (max-width: 1024px) {
  .brand-img img {
    aspect-ratio: 2 / 1;
    height: auto;
    object-fit: cover;
    object-position: right center;
  }
}

/* ---- TIÊU ĐỀ HERO Ở TABLET / LAPTOP NHỎ (641–1199px) ----
   Nối tiếp mốc ≤640px ở trên. Không có khối này thì tiêu đề NHẢY BẬC 44 → 32px
   ngay khi qua 641px (xoay ngang điện thoại là thấy chữ tụt hẳn xuống), vì
   clamp gốc `clamp(32px,4.2vw,54px)` còn dính sàn 32px cho tới tận 810px.
     641px → 44px (khớp trần bên trên) · 1048px trở đi → 4,2vw · 1199 → 50,4px
   ⇒ chạm 1200px (bố cục desktop) đúng 50,4px, liền mạch, DESKTOP KHÔNG ĐỔI.
   An toàn về bề rộng: dải này hero xếp dọc, chữ canh giữa trong khung ≥600px,
   dòng dài nhất ở 44px chỉ chiếm 411px.
   ⚠️ Cận dưới là 640.02px chứ KHÔNG phải 641px: bề ngang màn có thể là số lẻ (khi
   phóng to trình duyệt, hoặc màn có tỉ lệ điểm ảnh lẻ). Cặp `max-width:640px` +
   `min-width:641px` chừa một khe hở 640 < W < 641 mà CẢ HAI đều không khớp — rơi vào
   đó thì tiêu đề tụt về clamp gốc 32px, nhìn như lỗi nhấp nháy khi người dùng zoom. */
@media (min-width: 640.02px) and (max-width: 1199px) {
  .hero h1 { font-size: calc(clamp(44px, 4.2vw, 54px) * var(--vt-fs, 1)); }
}

/* ---- IPAD DỌC / TABLET (641–1024px) ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Nút mũi tên slider đưa hẳn vào TRONG khung, không cưỡi lên mép thẻ. */
  .prods-nav--prev { left: 6px; }
  .prods-nav--next { right: 6px; }

  /* Footer 5 cột dồn 2 cột: cột logo + cột "Kết nối" chiếm trọn hàng cho cân. */
  .ft .cols > div:first-child,
  .ft .cols > .fconnect { grid-column: 1 / -1; }
}

/* ---- MENU: cấm ngắt dòng giữa nhãn ----
   🐛 Ở 901–1199px (iPad ngang, laptop nhỏ) flex bóp `.nav` lại khiến CẢ 6 mục gãy
   2 dòng ("Trang chủ" → "Trang"/"chủ") dù header còn thừa >450px chỗ trống — nhìn
   rất nghiệp dư (đo 30/07/2026 ở 1024px). Nav khi nowrap chỉ rộng ~416px, tổng
   header ~795px < 845px khả dụng ở 901px nên KHÔNG tràn, ngưỡng burger 900px vẫn đúng. */
.nav a { white-space: nowrap; }

/* Dải 901–1199px (iPad ngang, laptop nhỏ): nav nowrap rộng 645px + logo 149 +
   nút 166 + 2 khe 64 = 1024px nội dung ⇒ TRÀN NGANG ở đúng 1024. Thu khe và
   padding lại cho vừa, KHÔNG hạ cỡ chữ dưới 14px để vẫn dễ đọc. */
@media (min-width: 901px) and (max-width: 1199px) {
  .hdr .wrap { gap: 16px; }
  .nav { gap: 2px; }
  .nav a { padding: 8px 9px; font-size: 14px; }
}

/* 🐛 DẢI 901–1023px: BIÊN AN TOÀN BẰNG 0 (sửa 10/08/2026, anh duyệt "dọn sạch").
   Đo tại đúng 901px — ngay sau ngưỡng burger 900px, nơi menu vừa bung ra ngang:
     logo 142 + nav 503 + nút 169 = **814px**, mà vùng nội dung cũng đúng **814px**.
   Khít 0px. Hậu quả thật, không phải lý thuyết:
     · trong lúc font Google chưa tải xong, chữ menu đo bằng font dự phòng rộng hơn
       ⇒ trang TRÀN NGANG vài trăm mili giây đầu (đã đo được 154px);
     · anh thêm một mục menu trong wp-admin là tràn vĩnh viễn.
   🚫 Ghi chú cũ ngay phía trên nói "tổng header ~795px < 845px khả dụng ở 901px nên
      KHÔNG tràn" — con số đó SAI so với đo thật (nav nowrap rộng 503px chứ không
      phải 416px). Đừng tin nó khi sửa tiếp.
   Cách nới: rút padding ngang từng mục menu 9px → 5px (6 mục × 2 bên = tiết kiệm
   ~48px) và bỏ khe giữa các mục. KHÔNG hạ cỡ chữ dưới 14px — dưới mức đó menu khó
   đọc, và đó là ngưỡng đã chốt hồi 30/07. */
@media (min-width: 901px) and (max-width: 1023px) {
  .nav { gap: 0; }
  .nav a { padding: 8px 5px; }
  .hdr .wrap { gap: 12px; }
}

/* ==========================================================================
   19. TRANG BÀI VIẾT — bố cục 2 cột + mục lục   (thêm 14/08/2026, anh duyệt)
   --------------------------------------------------------------------------
   Trước đợt này single.php chỉ có h1 + nội dung, chữ trải hết bề ngang .wrap.
   Đo ở màn 1280: dòng chữ rộng 1169px = 143 ký tự, gấp đôi ngưỡng dễ đọc — mắt
   phải quét ngang gần hết màn rồi dò ngược tìm đầu dòng kế tiếp.
   ========================================================================== */

/* 🔄 ANH CHỐT 14/08/2026: cho chữ và mục lục CHIẾM HẾT bề ngang .wrap.
   Trước đó khoá cột chữ 680px và canh giữa (chừa 284px hai bên ở màn 1280).
   ⚠️ Đánh đổi: cột chữ nay ~853px ≈ 104 ký tự/dòng, vượt ngưỡng dễ đọc 65–75.
      Em bù bằng cách nới cỡ chữ lên 17px cho đỡ mỏi mắt. Anh thấy dòng vẫn dài quá
      thì bảo em đặt lại trần 780–860px — sửa đúng một dòng dưới đây. */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
/* Bài ngắn không có mục lục ⇒ chỉ còn một cột, canh giữa cho cân trang. */
.post-layout--no-toc { grid-template-columns: minmax(0, 1fr); }

/* 🔑 Cột chữ khoá 680px — con số ĐO ĐƯỢC, không ước lượng.
   Đo bề rộng thật của Be Vietnam Pro 16,5px: một ký tự = 8,17px.
   · 680px ⇒ 83 ký tự/dòng. Chuẩn sách vở là 65–75 (tức 531–613px), nới nhẹ vì bài
     kỹ thuật có bảng và ảnh cần chỗ.
   🚫 Đừng nới quá 720px — qua đó là quay lại vùng khó đọc. */
.post-main { min-width: 0; }   /* bỏ trần 680px — anh muốn chữ full bề ngang */

/* ---------- Đầu bài: chuyên mục · ngày · tiêu đề · ảnh đại diện ---------- */
.post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--text-secondary); margin-bottom: 14px;
}
/* 2 class: trong .post-page có thể có rule cho thẻ <a>, class đơn sẽ thua (bẫy .fhot ở footer). */
.post-meta .post-cat {
  display: inline-block; background: var(--blue-accent); color: #fff;
  font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: 20px; text-decoration: none;
}
.post-meta .post-cat:hover { background: var(--primary); color: #fff; text-decoration: none; }
.post-meta time { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { width: 15px; height: 15px; }
.post-page .page-title { font-size: calc(clamp(26px, 3.4vw, 42px) * var(--vt-fs, 1)); line-height: 1.25; margin: 0 0 18px; }
.post-thumb {
  margin: 0 0 30px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border-color);
}
.post-thumb img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Mục lục ---------- */
.post-toc {
  position: sticky; top: 104px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 20px 18px; box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 130px); overflow-y: auto;
}
/* Thanh admin WordPress cao 32px đẩy header xuống — cùng cách trang Hướng dẫn xử lý,
   thiếu dòng này thì lúc anh đăng nhập, mục lục bị header đè lên. */
body.admin-bar .post-toc { top: 136px; }
.post-toc-h {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-primary);
  margin: 0 0 14px; padding: 0; background: none; border: 0; text-align: left; cursor: default;
}
.post-toc-h svg { width: 17px; height: 17px; color: var(--blue-accent); flex: 0 0 auto; }
/* Mũi tên chỉ có việc ở màn hẹp (hộp gập) — desktop ẩn đi cho gọn. */
.post-toc-mui { display: none; }
.post-toc ul { list-style: none; margin: 0; padding: 0; }
.post-toc a {
  display: block; padding: 7px 10px; border-radius: 8px;
  font-size: 14px; line-height: 1.45; color: var(--text-secondary);
  border-left: 2px solid transparent; transition: var(--transition);
  /* Bỏ gạch chân (anh yêu cầu 14/08/2026): đây là danh sách điều hướng chứ không phải
     link trong bài — 10 dòng cùng gạch chân nhìn rối và nặng mắt. Vẫn nhận ra bấm được
     nhờ nền sáng lên khi rê chuột và vạch màu bên trái khi đang đọc. */
  text-decoration: none;
}
.post-toc a:hover { background: var(--bg-tertiary); color: var(--text-primary); text-decoration: none; }
/* Mục đang đọc — JS gắn class .on. Hỏng JS thì chỉ mất phần tô sáng, mục lục vẫn dùng được. */
.post-toc a.on {
  color: var(--red-accent); border-left-color: var(--red-accent);
  background: var(--bg-tertiary); font-weight: 600;
}
.post-toc-lv3 a { padding-left: 22px; font-size: 13.3px; }

/* Neo phải chừa chỗ cho header dính, nếu không bấm mục lục xong thì tiêu đề chui lên
   nấp dưới header và người đọc tưởng bấm hụt. */
.post-body h2[id], .post-body h3[id] { scroll-margin-top: 104px; }
body.admin-bar .post-body h2[id], body.admin-bar .post-body h3[id] { scroll-margin-top: 136px; }

/* ---------- Chữ nghĩa trong bài ---------- */
.post-body p { font-size: 17px; line-height: 1.78; margin: 0 0 18px; }
.post-body h2 { font-size: clamp(21px, 2.2vw, 27px); margin: 38px 0 14px; line-height: 1.3; }
.post-body h3 { font-size: clamp(17px, 1.7vw, 20px); margin: 26px 0 10px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin: 6px 0; line-height: 1.7; }
.post-body figure { margin: 26px 0; }
.post-body figure img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.post-body figcaption {
  font-size: 13.5px; color: var(--text-secondary); text-align: center;
  margin-top: 9px; line-height: 1.5;
}
.post-body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14.5px; }
.post-body th { background: var(--primary); color: #fff; text-align: left; padding: 11px 13px; font-weight: 700; }
.post-body td { padding: 10px 13px; border-top: 1px solid var(--border-color); vertical-align: top; }
.post-body tbody tr:nth-child(even) { background: #FBFCFE; }
.post-body blockquote {
  margin: 22px 0; padding: 16px 20px; background: var(--bg-tertiary);
  border-left: 4px solid var(--blue-accent); border-radius: 0 10px 10px 0;
}
.post-body blockquote p { margin: 0; }
/* Bảng rộng (bảng mã lỗi 3 cột) tự cuộn NGANG trong khung riêng — JS gắn thẻ bọc này.
   Không có nó thì bảng đẩy rộng cả cột chữ và phá bố cục ở màn hẹp. */
.post-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Điều hướng bài trước/sau */
.post-main .post-navigation { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border-color); }
.post-main .nav-links { display: grid; gap: 14px; }
.post-main .nav-links a { display: block; font-weight: 600; color: var(--text-primary); line-height: 1.5; }
.post-main .nav-links a:hover { color: var(--blue-accent); }
.post-nav-nhan { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 3px; }

/* ---------- Máy tính bảng & điện thoại: mục lục thành HỘP GẬP đầu bài ---------- */
@media (max-width: 1024px) {
  .post-layout, .post-layout--no-toc { grid-template-columns: 1fr; gap: 0; }
  /* ⚠️ VẪN phải giới hạn bề rộng dù đã xuống một cột: đo ở 1024px khi bỏ giới hạn thì
     dòng chữ rộng 927px = 117 ký tự, lại rơi vào vùng khó đọc. */
  .post-main { max-width: none; }
  .post-toc {
    position: static; max-height: none; overflow: visible;
    order: -1;                 /* đẩy mục lục lên TRƯỚC bài, dù HTML đặt nó sau */
    width: 100%; margin: 0 0 26px;
  }
  .post-toc-h { cursor: pointer; margin-bottom: 0; }
  .post-toc-mui { display: block; margin-left: auto; transition: transform .2s ease; }
  .post-toc.mo .post-toc-h { margin-bottom: 14px; }
  .post-toc.mo .post-toc-mui { transform: rotate(180deg); }
  .post-toc ul { display: none; }
  .post-toc.mo ul { display: block; }
  .post-body p { font-size: 16px; }
}
@media (max-width: 640px) {
  .post-toc { padding: 16px 14px; }
  .post-body table { font-size: 13.5px; }
  .post-body th, .post-body td { padding: 9px 10px; }
}

/* 🖨️ Bản in: mục lục và điều hướng không có nghĩa trên giấy. */
@media print {
  .post-toc, .post-main .post-navigation { display: none !important; }
  .post-layout { display: block; }
  .post-main { max-width: none; }
}

/* ==========================================================================
   20. KHỐI TIN TỨC TRANG CHỦ   (thêm 16/08/2026, anh duyệt bản demo)
   --------------------------------------------------------------------------
   Bố cục học từ mẫu `vtmn-home-news` anh gửi — MỞ MẪU RA ĐO computed style ở màn 1280
   chứ không đọc HTML rồi đoán (bản dựng theo cách đoán đã bị anh chê, thiếu hẳn 2 bài
   nhỏ và sai gần hết cỡ chữ):
     · 2 cột 50/50, mỗi cột 617px
     · trái : 1 bài lớn — ảnh 16:9, tiêu đề 19px/600, trích đoạn 14,4px CHỈ HIỆN KHI RÊ CHUỘT
     · phải : 4 bài nhỏ — ảnh trái | chữ phải, tiêu đề 15px/600, cách nhau 14px
     · thẻ bo góc 10px và KHÔNG đổ bóng · tiêu đề khối 28px/700 không viết hoa
   Màu thì dùng biến của Voltic (mẫu là web khác) để khối đứng cạnh các khối kia không lạc.
   ========================================================================== */

.news-sec { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); }

/* ---------- Hàng tiêu đề: chữ | gạch ngang kéo dài | Xem tất cả ---------- */
.news-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.news-head h2 {
  font-size: calc(28px * var(--vt-fs, 1)); font-weight: 700; margin: 0;
  color: var(--text-primary); white-space: nowrap; line-height: 1.3;
}
/* Gạch ngang mảnh nối tiêu đề sang "Xem tất cả" — mẫu dùng thẻ <b> rỗng làm việc này,
   mình làm bằng ::after cho khỏi thêm thẻ vô nghĩa vào HTML. */
.news-head::after {
  content: ""; flex: 1; height: 2px; border-radius: 1px;
  background: rgba(11, 31, 53, .1);
}
.news-all {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; text-decoration: none;
  /* 🔑 order:1 đẩy nút xuống CUỐI hàng (anh yêu cầu 16/08/2026).
     Vì sao cần: gạch ngang ở trên là `::after`, mà pseudo-element LUÔN là con cuối
     cùng của flex container ⇒ thứ tự mặc định hoá ra "tiêu đề · nút · gạch", nút bị
     kẹp sát tiêu đề. Cho nút order:1 thì nó ra sau, thành "tiêu đề · gạch · nút".
     🚫 Đừng sửa bằng cách đổi ::after thành ::before — ::before là con ĐẦU, gạch sẽ
     nhảy lên trước cả tiêu đề. */
  order: 1;
}
.news-all svg { width: 15px; height: 15px; }
.news-all:hover { color: var(--blue-accent); }

/* ---------- Lưới 50/50 ---------- */
/* align-items:stretch + 4 hàng chia đều: thiếu hai thứ này thì 4 thẻ nhỏ chỉ cao theo
   nội dung ⇒ cột phải dài hơn cột trái 189px (đo được), nhìn như thừa ra một mảng.
   ℹ️ Mẫu gốc để lệch 40px; mình làm khít hẳn 0px. */
.news-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 30px); align-items: stretch;
}
/* Chỉ có đúng 1 bài ⇒ bỏ cột phải, bài lớn chiếm cả hàng cho khỏi trống một nửa. */
.news-grid--mot-cot { grid-template-columns: 1fr; }
.news-side { display: grid; grid-template-rows: repeat(4, 1fr); gap: 14px; min-width: 0; }

.news-card {
  display: block; background: var(--bg-primary); border-radius: 10px;
  overflow: hidden; text-decoration: none; transition: var(--transition);
}

/* ---------- BÀI LỚN ---------- */
.news-big .news-im {
  display: block; position: relative; padding-top: 56.25%;   /* 16:9 — khớp đúng ảnh 1366×768 */
  overflow: hidden; border-radius: 10px; background: var(--bg-tertiary);
}
.news-big .news-im img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .4s ease;
}
.news-big:hover .news-im img { transform: scale(1.04); }
.news-big .news-bd { padding: 14px 2px 0; }
.news-big h3 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.news-big:hover h3 { color: var(--blue-accent); }
/* Trích đoạn HIỆN SẴN — anh chốt 16/08/2026, khác mẫu gốc (mẫu chỉ hiện khi rê chuột).
   Lý do anh đúng: trên điện thoại và máy tính bảng KHÔNG CÓ trạng thái hover, nên kiểu
   ẩn-chờ-rê-chuột làm phần lớn khách không bao giờ đọc được đoạn tóm tắt này.
   ⚠️ Cắt 3 dòng (`-webkit-line-clamp`) chứ không thả tự do: bài tiêu đề dài + trích đoạn
   dài sẽ kéo cột trái cao thêm, mà cột phải là 4 thẻ chia đều chiều cao (1fr) ⇒ ảnh 4
   bài nhỏ phình theo. 3 dòng là mức đo được vừa khít với 4 thẻ bên phải. */
.news-big p {
  margin: 8px 0 0; font-size: 14.4px; line-height: 1.6; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- BÀI NHỎ: ảnh trái | chữ phải ---------- */
.news-small {
  display: grid; grid-template-columns: minmax(0, 38%) 1fr;
  gap: 14px; align-items: stretch; height: 100%;
}
/* Ảnh cao BẰNG THẺ (không dùng padding-top cố định) để 4 thẻ lấp đúng chiều cao cột phải. */
.news-small .news-im {
  display: block; position: relative; height: 100%; min-height: 84px;
  overflow: hidden; border-radius: 10px; background: var(--bg-tertiary);
}
.news-small .news-im img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .4s ease;
}
.news-small:hover .news-im img { transform: scale(1.04); }
.news-small .news-bd { display: flex; flex-direction: column; justify-content: center; }
/* Cắt tiêu đề ở dòng thứ 3: tiêu đề bài kỹ thuật hay dài, không cắt thì 4 thẻ cao lệch nhau. */
.news-small h3 {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-small:hover h3 { color: var(--blue-accent); }

.news-date { font-size: 12px; color: var(--text-secondary); opacity: .8; margin-top: 6px; }
.news-divider { display: block; height: 2px; margin-top: 8px; border-radius: 1px; background: rgba(11, 31, 53, .1); }

/* ---------- Máy tính bảng: bài lớn một hàng, 4 bài nhỏ xếp 2×2 ---------- */
@media (max-width: 1024px) {
  .news-grid { grid-template-columns: 1fr; gap: 24px; }
  .news-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 18px; }
  .news-small { height: auto; grid-template-columns: 150px 1fr; gap: 12px; }
  .news-small .news-im { min-height: 96px; }
}
/* ---------- Điện thoại: xếp dọc hết ---------- */
@media (max-width: 640px) {
  .news-side { grid-template-columns: 1fr; grid-template-rows: auto; }
  .news-small { grid-template-columns: 120px 1fr; gap: 12px; }
  .news-head { gap: 10px; }
  .news-head h2 { font-size: calc(22px * var(--vt-fs, 1)); }
  .news-big h3 { font-size: 17.5px; }
  /* Vùng chạm cho nút "Xem tất cả": chữ chỉ cao 22px, dưới mức 34px mà đợt tối ưu
     điện thoại 14/08 đã chốt. Nới bằng ::after phủ vô hình chứ KHÔNG bằng padding —
     padding sẽ đội chiều cao hàng tiêu đề và đẩy gạch ngang lệch khỏi giữa chữ.
     inset -11px trên/dưới ⇒ vùng bấm 44px, đúng chuẩn ngón tay. */
  .news-all { position: relative; }
  .news-all::after { content: ""; position: absolute; inset: -11px -8px; }
}

/* 🖨️ Bản in: khối tin tức là điều hướng, không có nghĩa trên giấy. */
@media print { .news-sec { display: none !important; } }