/* =========================================================================
   VOLTIC — CSS TRANG SẢN PHẨM
   (nạp ở page-templates/product.php HOẶC trang chi tiết sản phẩm Woo đã BẬT
    voltic_sp_full — xem inc/enqueue.php)

   Mọi class prefix `product-` và bọc trong `.product-page` để KHÔNG đụng main.css
   (main.css có sẵn .sh, .stats, .two, .cta-info… nghĩa khác). Header + footer
   dùng của theme (main.css lo), file này chỉ lo phần THÂN trang sản phẩm.
   Nguồn chuẩn đã kiểm: preview-sanpham-pro/index.html.
   ====================================================================== */
.product-page{
  --product-ink:#0B1F35;  
  --product-blue:#1B4E8F; --product-blue-light:#4583D4;
  --product-red:#D21F25; --product-red-dark:#B4171C; --product-band:#ECF2FB; --product-muted:#5A6672;
  --product-line:#E3E8EF; --product-bg2:#F6F9FD;
  --product-font-heading:'Plus Jakarta Sans',system-ui,sans-serif;
  --product-font-body:'Be Vietnam Pro',system-ui,sans-serif;
  --product-shadow:0 12px 34px rgba(11,31,53,.10);
  color:var(--product-ink);font-family:var(--product-font-body);
}
.product-page img{max-width:100%;height:auto;display:block}
.product-page h1,.product-page h2,.product-page h3,.product-page h4{font-family:var(--product-font-heading);margin:0;line-height:1.15}
.product-sec{padding:clamp(40px,5.5vw,72px) 0}

/* ---------- Nút ---------- */
.product-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--product-font-heading);font-weight:700;font-size:15px;padding:15px 26px;border-radius:10px;border:1.6px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;text-align:center}
.product-btn svg{width:18px;height:18px}
.product-btn-red{background:var(--product-red);color:#fff}
.product-btn-red:hover{background:var(--product-red-dark)}
.product-btn-navy{background:#0A2A55;color:#fff}
.product-btn-navy:hover{background:#0B2E5C}
.product-btn-ghost{background:#fff;color:var(--product-ink);border-color:#C9D6E5}
.product-btn-ghost:hover{border-color:var(--product-blue);color:var(--product-blue)}

/* ---------- Breadcrumb ---------- */
.product-crumb{padding:14px 0;font-size:13.5px;color:var(--product-muted)}
.product-crumb a:hover{color:var(--product-blue)}
/* 👆 Vùng chạm cho breadcrumb: chữ chỉ cao 18px, bấm rất dễ trượt trên điện thoại.
   `inline-block` + padding dọc nâng vùng bấm lên ~34px mà KHÔNG làm dòng cao thêm
   (padding âm bù bằng margin), nên bố cục giữ nguyên. */
.product-crumb a{display:inline-block;padding:8px 0;margin:-8px 0}
.product-crumb b{color:var(--product-red);font-weight:600}

/* ---------- Hero ---------- */
.product-hero{padding:8px 0 40px}
.product-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start}
/* ---------- Album ảnh sản phẩm (sửa 10/08/2026 theo phản hồi của anh) ----------
   Anh báo 2 việc: ① upload nhiều ảnh thì dải ảnh nhỏ hiện hết ra, dài thượt, xấu;
   ② ảnh chính hiển thị nhỏ.

   Đo trước khi sửa (1280px, 7 ảnh vuông 1024×1024):
     · dải ảnh nhỏ cao 7×76 + 6×10 = **592px**, trong khi khung ảnh chính chỉ
       360+52 = 412px ⇒ dải thò xuống dưới 180px;
     · ảnh chính bị `max-height:360px; width:auto` khoá ở **360×360** trong khung
       rộng ~440px ⇒ hụt 80px mỗi bên, trông nhỏ và lọt thỏm. */
.product-gal{display:grid;grid-template-columns:76px 1fr;gap:14px}

/* Chỉ hiện ~5 tấm, còn lại CUỘN. 5×72 + 4×10 = 400px — chọn cho gần bằng chiều
   cao khung ảnh chính ở dải desktop chính (~440px ở 1280px) để hai cột nhìn cân.
   ⚠️ `min-height:0` là BẮT BUỘC: không có nó, grid item mặc định không co được
   nhỏ hơn nội dung ⇒ `overflow-y` vô tác dụng và dải vẫn dài như cũ. */
.product-gal-thumbs{
  display:flex;flex-direction:column;gap:10px;
  /* 482px = đúng 6 tấm (6×72 + 5×10). Chọn con số này để khớp chiều cao khung ảnh
     chính ở dải desktop (đo được 492px) ⇒ hai cột kết thúc gần bằng nhau.
     🚫 ĐỪNG thay bằng `max-height:100%` cho "tự động": đã thử, trình duyệt BỎ QUA
     phần trăm ở đây (chiều cao ô lưới lại do chính dải này quyết định) ⇒ dải hiện
     hết 7 tấm, cao 564px và mất luôn khả năng cuộn. */
  max-height:482px;min-height:0;overflow-y:auto;
  scroll-snap-type:y proximity;
  scroll-behavior:smooth;
  /* 🚫 GIẤU THANH CUỘN (anh yêu cầu 10/08/2026) — điều hướng bằng 2 nút ▲▼ thay thế.
     Vẫn giữ `overflow-y:auto` chứ KHÔNG đổi thành `hidden`: nút bấm cuộn bằng
     `scrollTop`, mà `hidden` thì vùng vẫn cuộn được bằng script — nhưng người dùng
     lăn chuột hoặc vuốt trên máy cảm ứng sẽ KHÔNG cuộn được nữa, mất một cách thao
     tác quen thuộc. Ẩn thanh nhưng giữ khả năng cuộn là đúng nhất. */
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;           /* IE/Edge cũ */
}
.product-gal-thumbs::-webkit-scrollbar{width:0;height:0;display:none}

/* Cột trái = nút ▲ + dải ảnh + nút ▼ */
/* ⚠️ PHẢI có CẢ min-height:0 LẪN min-width:0. Grid/flex item mặc định là `min-*:auto`,
   tức KHÔNG co nhỏ hơn nội dung. Ở màn hẹp dải ảnh nằm ngang (7 tấm × 72px), nên thiếu
   `min-width:0` thì cột `1fr` của .product-gal bị nội dung ĐẨY RỘNG ra 400px trong khung
   chỉ 320px — mà .product-hero lại `overflow-x:hidden` ⇒ ảnh sản phẩm bị CẮT CỤT 80px
   bên phải trên điện thoại, không hề có thanh cuộn để biết mà kéo. Sửa 14/08/2026. */
.product-gal-side{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.product-gal-tnav{
  flex:0 0 auto;height:26px;width:100%;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--product-line);border-radius:8px;
  color:var(--product-ink);cursor:pointer;padding:0;
  transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.product-gal-tnav svg{width:16px;height:16px}
.product-gal-tnav:hover{background:var(--product-blue);border-color:var(--product-blue);color:#fff}
/* Hết đường cuộn về phía đó ⇒ mờ đi và không bấm được, để anh biết đã tới đầu/cuối. */
.product-gal-tnav:disabled{opacity:.32;cursor:default;background:#fff;border-color:var(--product-line);color:var(--product-ink)}
/* Ít ảnh, không cần cuộn ⇒ JS gắn .is-hidden, giấu hẳn cả 2 nút cho gọn. */
.product-gal-tnav.is-hidden{display:none}
/* Ép mọi ảnh nhỏ về khung VUÔNG bằng nhau. Không có rule này thì ảnh tỉ lệ khác
   nhau cho ra các ô cao thấp so le, dải trông lộn xộn. */
.product-gal-thumbs img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--product-line);border-radius:10px;
  cursor:pointer;scroll-snap-align:start;
  transition:border-color .18s ease,opacity .18s ease;
}
.product-gal-thumbs img:hover{opacity:.85}
.product-gal-thumbs img.on{border-color:var(--product-blue)}

/* Khung ảnh chính: VUÔNG, ảnh lấp đầy khung.
   Anh chốt ảnh sản phẩm upload lên là ảnh vuông ⇒ khung 1:1 cho ảnh to hết cỡ
   (đo lại: 360×360 → **~440×440**, to hơn 22%).
   ⚠️ `object-fit:contain` chứ KHÔNG phải cover: ảnh mặc định của theme
   (p-eco.png…) là ảnh NGANG có nền trong suốt — `cover` sẽ xén cụt hai đầu sản
   phẩm. `contain` thì ảnh ngang hiện trọn vẹn, chỉ chừa khoảng trắng trên–dưới. */
.product-gal-main{
  background:#fff;border:1px solid var(--product-line);border-radius:16px;
  padding:18px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;
  /* ⚠️ TRẦN 520px là bắt buộc, không phải cho đẹp: từ 1080px trở xuống hero xếp
     MỘT CỘT nên cột ảnh rộng hết trang — khung vuông khi đó phình lên 837×837
     (đo ở 1024px), đẩy toàn bộ thông tin sản phẩm xuống tận đáy màn hình.
     Kèm `margin-inline:auto` để khung vẫn vuông và nằm giữa thay vì bị kéo dẹt. */
  max-width:520px;margin-inline:auto;
  position:relative;                /* neo 2 nút lật ảnh */
}
.product-gal-main img{width:100%;height:100%;object-fit:contain;max-height:none}

/* 2 nút lật ảnh ‹ › trên ảnh chính (anh yêu cầu 10/08/2026).
   Mờ sẵn, rõ hẳn khi rê chuột vào khung — để không che sản phẩm khi chỉ đang xem. */
.product-gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.94);border:1px solid var(--product-line);
  color:var(--product-ink);cursor:pointer;padding:0;
  box-shadow:0 3px 12px rgba(11,31,53,.14);
  opacity:.55;transition:opacity .18s ease,background .18s ease,color .18s ease;
  z-index:3;
}
.product-gal-main:hover .product-gal-nav,
.product-gal-nav:focus-visible{opacity:1}
.product-gal-nav:hover{background:var(--product-blue);border-color:var(--product-blue);color:#fff}
.product-gal-nav svg{width:19px;height:19px}
.product-gal-nav--prev{left:8px}
.product-gal-nav--next{right:8px}
/* Chỉ có một ảnh ⇒ JS giấu hẳn, không để nút bấm mà chẳng đi đâu. */
.product-gal-nav.is-hidden{display:none}

/* ⌨️ Trên máy cảm ứng không có "rê chuột" nên nút sẽ mãi mờ 55% — cho hiện rõ luôn. */
@media (hover:none){
  .product-gal-nav{opacity:.92}
}

/* Người dùng bật "giảm chuyển động" trong hệ điều hành ⇒ bỏ cuộn mượt, nhảy thẳng.
   Vẫn cuộn được như thường, chỉ không có animation. */
@media (prefers-reduced-motion:reduce){
  .product-gal-thumbs{scroll-behavior:auto}
}

/* Dải 1081–1199px: hero VỪA chuyển sang 2 cột nên cột ảnh hẹp nhất trong các khổ
   desktop — khung ảnh chính co còn 395px (đo ở 1081px) trong khi dải ảnh nhỏ vẫn
   482px ⇒ dải thò xuống dưới 87px, đúng cái xấu anh vừa báo.
   Rút xuống 5 tấm (400px) cho khớp. ⚠️ Thà để dải NGẮN hơn khung ảnh còn hơn dài
   hơn: ngắn thì chỉ hụt một khoảng, dài thì trông như bị lỗi bố cục. */
@media(min-width:1081px) and (max-width:1199px){
  .product-gal-thumbs{max-height:400px}
}
.product-gal-dots{display:flex;gap:10px;justify-content:center;margin-top:14px}
/* 🐛 SỬA 14/08/2026 — CSS TRƯỚT ĐÍCH suốt từ 10/08: hôm đó template đổi chấm tròn từ
   `<i>` sang `<button>` (để bấm được bằng bàn phím + trình đọc màn hình), nhưng bộ chọn
   ở đây vẫn là `i` ⇒ KHÔNG rule nào trúng, chấm rơi về kiểu button mặc định: cao 6px,
   có viền xám, nhìn không ra hình tròn mà bấm cũng gần như không trúng.
   🔑 Đúng bài học đã ghi ở trang đại lý: ĐỔI CẤU TRÚC HTML THÌ PHẢI SOÁT LẠI CSS. */
.product-gal-dots button{width:8px;height:8px;border-radius:50%;background:#CBD5E1;
  border:0;padding:0;cursor:pointer;position:relative;transition:background .18s ease,width .18s ease}
.product-gal-dots button.on{background:var(--product-blue);width:22px;border-radius:5px}
/* Vùng CHẠM vô hình rộng hơn hẳn chấm — ngón tay không bấm trúng nổi hình 8px.
   Dùng ::after nên không ảnh hưởng bố cục, các chấm vẫn nằm sát nhau như thiết kế. */
.product-gal-dots button::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:26px;height:38px}

.product-badge{display:inline-flex;align-items:center;gap:7px;background:var(--product-red);color:#fff;font-family:var(--product-font-heading);font-weight:800;font-size:12.5px;letter-spacing:.06em;padding:6px 13px;border-radius:6px;text-transform:uppercase}
.product-hero h1{font-size:clamp(30px,3.6vw,44px);font-weight:800;margin:16px 0 0;letter-spacing:-.01em;text-transform:uppercase}
.product-hero h1 em{color:var(--product-red);font-style:normal}
.product-hero-sub{font-family:var(--product-font-heading);font-weight:700;font-size:clamp(15px,1.6vw,19px);color:var(--product-ink);margin-top:10px;letter-spacing:.01em;text-transform:uppercase}
.product-hero-desc{color:var(--product-muted);margin:14px 0 0;font-size:15.5px}
/* 4 ô ngang → LƯỚI 2×2 khi hero là 2 cột (08/08/2026, anh duyệt).
   🐛 Vì sao phải đổi: cột trái của hero bị khoá ~554px nên mỗi ô chỉ được 126–128px
   (KỂ CẢ ở màn 1920 — ô không rộng thêm nữa), trừ đi icon 24px + khe 9px thì chỗ cho
   chữ chỉ còn 93–95px. Đo thật ở 8 khổ 1081→1920px:
     · PRO  — sạch (giá trị ngắn: "2400W", "380 m³/h")
     · PLUS — "2.400 – 2.600W" cần 134,7px ⇒ VỠ 2 DÒNG Ở MỌI KHỔ, kèm "Thiết kế rời"
     · ECO  — "Dàn lạnh đồng" VỠ 2 DÒNG Ở MỌI KHỔ
   Ghi chú cũ chỉ nói "PLUS ở 1280px" là đánh giá THẤP hơn thực tế rất nhiều.
   🚫 Thu nhỏ chữ KHÔNG cứu được: muốn "2.400 – 2.600W" vừa 93px phải hạ xuống ~11px.
   🚫 Lưới `repeat(4,auto)` + icon nhỏ cũng KHÔNG đủ: đo lại vẫn vỡ 13 chỗ ở PLUS.
   ✅ 2×2 cho mỗi ô ~266px (chữ ~233px) ⇒ 0 ô vỡ ở CẢ 3 DÒNG, mọi khổ. Biên rộng gấp
      2,4 lần chỗ cần ⇒ dòng lithium sau này thêm vào cũng không phải sửa lại.
   ℹ️ Đây cũng chính là hình thái khối này vốn đã dùng ở điện thoại (≤620px) từ trước,
      nên không phải kiểu bố cục lạ.
   ⚠️ Dải ≤1080px GIỮ 4 Ô NGANG (xem @media bên dưới): ở đó hero xếp dọc nên ô rộng
      tới 221px, không ô nào vỡ — mà để 2×2 thì ô rộng ~460px, chữ dồn hết sang trái
      trông loãng. */
.product-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0}
/* Ô thông số nhanh: ICON cột trái | (giá trị + nhãn) cột phải — anh chốt 31/07/2026.
   Trước đây icon nằm CÙNG HÀNG với giá trị, còn nhãn tụt xuống dưới sát mép trái ⇒
   nhãn không thẳng hàng với giá trị, nhìn lệch. Nay icon tách hẳn ra một cột.
   ⚠️ Cỡ chữ giá trị vẫn để co giãn dù lưới 2×2 đã rộng: nó còn phải sống ở dải
   ≤1080px (4 ô ngang) và ở điện thoại. */
.product-stat{display:flex;align-items:flex-start;gap:9px}
.product-stat svg{width:24px;height:24px;color:var(--product-blue-light);flex:0 0 auto;margin-top:2px}
.product-stat .tx{min-width:0}
.product-stat b{display:block;font-family:var(--product-font-heading);font-weight:800;font-size:clamp(15px,1.35vw,19px);color:var(--product-red);line-height:1.2}
.product-stat span{display:block;font-size:12.5px;color:var(--product-muted);line-height:1.35;margin-top:3px}
.product-hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.product-hero-cta .product-btn{flex:1;min-width:210px}
.product-colors{margin-top:24px}
.product-colors>span{font-family:var(--product-font-heading);font-weight:700;font-size:14px}
.product-swatches{display:flex;gap:16px;margin-top:10px}
.product-sw{text-align:center}
.product-sw i,.product-sw-img{display:block;width:78px;height:58px;border-radius:10px;border:1.6px solid var(--product-line);margin-bottom:6px}
.product-sw i{background-color:#DDE3EA}
.product-page .product-sw-img{height:58px;object-fit:cover}  /* ô màu có ảnh — height 58px cố định (thắng .product-page img{height:auto}) + cover để xén, không méo */
.product-sw[data-full]{cursor:pointer}
.product-sw.on i,.product-sw.on .product-sw-img{border-color:var(--product-red);box-shadow:0 0 0 3px rgba(210,31,37,.12)}
.product-sw small{font-size:12.5px;color:var(--product-muted)}

/* ---------- Tiêu đề khối ---------- */
.product-sh{font-size:clamp(20px,2.4vw,27px);font-weight:800;color:var(--product-blue);text-transform:uppercase;letter-spacing:.01em;margin-bottom:22px}
/* Riêng khối "Hình ảnh thực tế / ứng dụng lắp đặt": tiêu đề cách dải ảnh xe thêm
   15px (anh yêu cầu 13/08/2026) ⇒ tổng 37px.
   🔑 Nhắm qua `~ .product-vehicles` chứ KHÔNG sửa thẳng `.product-sh`: class đó
   dùng chung cho tiêu đề NHIỀU khối (thông số, tài liệu…), đổi ở đó là đổi hết.
   `.product-vehicles` chỉ xuất hiện đúng ở khối này nên nhắm được chính xác mà
   không phải thêm class mới vào template (giữ `diff` bản render = 0). */
.product-sh ~ .product-vehicles{margin-top:15px}

/* ---------- CHỮ trái | ẢNH phải (dùng chung: Tổng quan + Không chỉ) ----------
   🔴 SỬA 13/08/2026 — anh báo: "up hình đúng cỡ mà nó không điền đủ, vẫn bị cắt
      màu trắng của hình". Đo ra viền trắng thừa 145–170px trên+dưới.

   NGUYÊN NHÂN GỐC (quan trọng, đừng quay lại cách cũ):
   Bản 27/07 để `align-items:stretch` ⇒ khung ảnh cao BẰNG CỘT CHỮ. Mà cột chữ cao
   thấp tuỳ nội dung và khổ màn, nên TỈ LỆ KHUNG không cố định. Đo thật 3 dòng SP
   × 6 khổ màn 1100→1920px:
       Tổng quan : tỉ lệ khung chạy 1,269 → 2,059
       Không chỉ : chạy 1,379 → 3,033   (ECO ít chữ nhất nên khung dẹt nhất)
       Vì sao    : chạy 0,459 → 0,663
   Ngay ở CÙNG khổ 1366px, ba dòng đã ra ba tỉ lệ khác nhau (1,86 · 1,69 · 2,06)
   vì PRO có 3 đoạn còn ECO có 6 đoạn.
   ⇒ Với `object-fit:contain`, KHÔNG tỉ lệ ảnh nào khớp được mọi trường hợp —
      admin upload cỡ nào cũng thừa viền ở đâu đó. Đây là lỗi THIẾT KẾ KHUNG,
      không phải lỗi ảnh.

   CÁCH SỬA: KHOÁ `aspect-ratio` cho khung (khung thôi phụ thuộc cột chữ) rồi dùng
   `object-fit:cover`. Nhờ vậy cỡ ảnh mới có nghĩa: cứ upload đúng tỉ lệ là lấp kín,
   không viền trắng, không méo, ở MỌI khổ màn và MỌI dòng sản phẩm.
   📐 Cỡ ảnh nên dùng: **1400×788 px** (16:9). Cột ảnh rộng tối đa 691px ⇒ 1400px
      là vừa đủ nét trên màn retina (2×).
   ⚠️ Đổi `aspect-ratio` ở đây thì PHẢI đổi luôn `width`/`height` khai trong
      `template-parts/product/overview.php` + `intro.php` — nút "Change image" của
      Live Edit đọc đúng hai số đó để hiện cỡ ảnh cần chuẩn bị cho anh.
   ℹ️ `align-items:center` (thay `stretch`): khung ảnh nay có chiều cao riêng nên
      hai cột không còn bằng nhau — canh giữa cho cân, lệch tối đa ~53px. */
.product-split{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(28px,4vw,48px);align-items:center}
.product-split .product-imgcard{display:flex;align-items:center;justify-content:center;background:#fff;aspect-ratio:16/9}
.product-split .product-imgcard img{width:100%;height:100%;object-fit:contain}

/* ---------- Hai cột chữ | ảnh (còn dùng cho khối "Vì sao" — ảnh DỌC bên trái) ----------
   Cùng một lỗi và cùng cách sửa như khối trên, chỉ khác đây là ảnh DỌC.
   📐 Cỡ ảnh nên dùng: **950×1188 px** (tỉ lệ 4:5). Cột ảnh rộng tối đa 467px.
   🔄 13/08 đổi 2:3 → 4:5 sau khi thu nhỏ 4 thẻ lợi ích: cột chữ ngắn lại còn
   512–579px, ảnh 2:3 (cao 701px) thò ra 113–190px. 4:5 cho ảnh cao 584px ⇒ cân.
   💡 Ảnh cấu tạo gốc của theme (760×950) VỐN ĐÃ đúng 4:5 ⇒ viền = 0 sẵn. */
.product-two{display:grid;gap:44px;align-items:center}
.product-two.flip{grid-template-columns:0.82fr 1.18fr;align-items:center}
.product-two.flip .product-imgcard{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5}
.product-two.flip .product-imgcard img{width:100%;height:100%;object-fit:contain}
.product-lead{color:var(--product-muted);font-size:15.5px}
.product-lead p{margin:0 0 12px}
.product-lead p:last-child{margin-bottom:0}
.product-lead ul,.product-lead ol{margin:0 0 12px;padding-left:20px}
.product-bullets{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:13px}
.product-bullets li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.product-bullets svg{width:22px;height:22px;flex-shrink:0;color:var(--product-blue)}
.product-imgcard{border-radius:18px;overflow:hidden;box-shadow:var(--product-shadow)}
.product-imgcard img{width:100%}

/* ---------- Thông số ---------- */
.product-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-spec table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid var(--product-line);border-radius:10px;overflow:hidden}
.product-spec th{background:#0B2E5C;color:#fff;font-family:var(--product-font-heading);font-weight:700;text-align:left;padding:11px 14px;font-size:12.5px;letter-spacing:.02em}
.product-spec td{padding:9px 14px;border-top:1px solid var(--product-line);color:var(--product-ink)}
.product-spec tr td:first-child{color:var(--product-muted)}
.product-spec tr:nth-child(even) td{background:var(--product-bg2)}  /* 08/08: ghi cứng #F6F9FD → dùng biến đã khai */

/* ---------- Chữ đỏ nhấn ---------- */
.product-redline{color:var(--product-red);font-family:var(--product-font-heading);font-weight:800;font-size:clamp(15px,1.7vw,19px);margin-top:20px;letter-spacing:.01em}
.product-redpar{color:var(--product-red);font-weight:700;margin-top:16px}

/* ---------- 4 thẻ lợi ích (2×2, nằm trong cột phải khối "Vì sao", dưới câu đỏ) ---------- */
/* ---------- 4 thẻ lợi ích trong khối "Vì sao …" ----------
   🔄 SỬA 13/08/2026 (anh yêu cầu): ô NHỎ LẠI, và đổi từ "icon trên – chữ dưới, canh
   giữa" sang **ICON TRÁI | CHỮ PHẢI**. Đo được: ô 328×164px → **328×86px** (thấp đi
   gần một nửa), khối 4 thẻ 366px → 190px.

   🔑 Dùng GRID 2 cột với icon `grid-row:1/3` (chiếm cả 2 hàng) thay vì flex —
   nhờ vậy **KHÔNG phải sửa HTML**: thẻ vốn có 3 con ruột (svg/img · b · span) nằm
   thẳng hàng nhau, flex sẽ xếp cả ba thành 3 cột. Grid cho icon trải 2 hàng bên
   trái, còn b + span tự xếp dọc ở cột phải. Giữ nguyên template ⇒ giữ nguyên Live
   Edit và `diff` bản render = 0.

   ⚠️ `.product-benefit-img` (ảnh admin chèn thay icon) phải reset `margin:0 auto`
   của bản cũ, nếu không ảnh vẫn tự canh giữa và phá cột. */
.product-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.product-benefit{border:1px solid var(--product-line);border-radius:14px;
  padding:14px 16px;background:#fff;transition:.18s;
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:left}
/* 🚫 ĐỪNG gắn `.scroll-reveal` xuống từng thẻ này: `.revealed{transform:translateY(0)}`
   (0,3,0) mạnh hơn rule hover bên dưới (0,2,0) ⇒ mất hiệu ứng nhấc thẻ. */
.product-benefit:hover{box-shadow:var(--product-shadow);transform:translateY(-3px)}
.product-benefit svg{grid-row:1/3;align-self:center;width:30px;height:30px;color:var(--product-blue);margin-bottom:0}
.product-benefit-img{grid-row:1/3;align-self:center;width:auto;max-width:64px;max-height:56px;margin:0;border-radius:8px}
.product-benefit b{grid-column:2;display:block;font-family:var(--product-font-heading);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.02em;line-height:1.25}
.product-benefit span{grid-column:2;display:block;color:var(--product-muted);font-size:12.5px;line-height:1.45;margin-top:4px}

/* ---------- Ứng dụng lắp đặt ---------- */
/* Số cột theo SỐ XE THẬT: template in style="--n:5" (Pro) hoặc "--n:6" (Plus).
   Ghi cứng 5 cột thì dòng 6 xe của Plus rơi xuống hàng hai, còn lại 1 ô lẻ trông hẫng. */
.product-vehicles{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:16px}
.product-veh{text-align:center}
.product-veh .ph{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:520/360;background:#eef2f7}
.product-veh img{width:100%;height:100%;object-fit:cover}
.product-veh small{display:block;margin-top:9px;font-size:13px;color:var(--product-ink);font-weight:500}
.product-veh-note{text-align:center;color:var(--product-red);font-family:var(--product-font-heading);font-weight:700;margin-top:24px;font-size:15px}
.product-veh-note a{text-decoration:underline}

/* ---------- Đại lý (navy) ---------- */
.product-dealer{background:linear-gradient(180deg,#0A2A55,#071B38);color:#fff;border-radius:18px;padding:clamp(30px,4vw,50px);margin-top:8px}
.product-dealer-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
.product-dealer h3{text-align:center;font-size:clamp(20px,2.4vw,30px);font-weight:800;margin-bottom:26px;color:#fff}  /* ép trắng: main.css có rule global h1-h4 màu tối đè lên nền navy — 24/07 */
.product-dealer-col{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.product-dealer-item{text-align:center}
.product-dealer-item svg{width:34px;height:34px;color:#8FB4E8;margin-bottom:9px}
.product-dealer-item-img{max-height:40px;width:auto;max-width:100%;margin:0 auto 9px}  /* ảnh thay icon ô đại lý — dùng max-height (height cố định bị .product-page img{height:auto} đè) */
.product-dealer-item span{display:block;font-size:13.5px;line-height:1.4}
.product-dealer-mid{width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-dealer-mid svg{width:44px;height:44px;color:#fff}
.product-dealer-mid img{width:100%;height:100%;object-fit:cover}  /* ảnh chèn vào ô giữa (thay icon bắt tay) — 24/07 */

/* ---------- CTA ---------- */
.product-ctaband{background:var(--product-band);border:1px solid #DCE7F7;border-radius:18px;padding:clamp(24px,3vw,38px);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-top:8px}
.product-cta-photo{width:150px;height:150px;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#123a68,#0A2340);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.product-cta-photo img{width:100%;height:100%;object-fit:cover}
.product-cta-photo svg{width:64px;height:64px;color:#9FC0EE}
.product-cta-body h3{font-size:clamp(20px,2.2vw,26px);font-weight:800}
.product-cta-body h3 em{color:var(--product-red);font-style:normal}
.product-cta-body p{color:var(--product-muted);font-size:14.5px;margin:8px 0 18px}
.product-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.product-cta-info{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:22px;padding-top:22px;border-top:1px solid #D5E1F2}
.product-cta-info .it{display:flex;align-items:center;gap:11px;font-size:13px}
.product-cta-info .it svg{width:26px;height:26px;color:var(--product-blue)}
.product-cta-info .it b{display:block;font-family:var(--product-font-heading);font-size:14px}
.product-cta-info .it span{color:var(--product-muted)}
.product-cta-info .product-btn{margin-left:auto}

@media(max-width:1080px){
  .product-hero-grid{grid-template-columns:1fr;gap:30px}
  /* Hero xếp dọc ⇒ khối thông số được cả bề ngang trang, ô rộng ~221px: 4 ô ngang
     vừa thoải mái (đo cả 3 dòng, không ô nào vỡ) và đỡ loãng hơn 2×2 ở khổ này.
     ⚠️ Chỉ đúng từ ~760px trở lên — khối @media bên dưới trả về 2 cột cho khổ hẹp hơn. */
  .product-stats{grid-template-columns:repeat(4,1fr)}
  .product-specs{grid-template-columns:1fr}
  .product-vehicles{grid-template-columns:repeat(3,1fr)}
  .product-two,.product-two.flip{grid-template-columns:1fr;gap:26px}
  .product-two.flip{align-items:start}
  .product-split{grid-template-columns:1fr;gap:22px}                       /* Tổng quan + Không chỉ xếp dọc */
  .product-split{align-items:start}
  /* 🚫 ĐÃ BỎ `img{height:auto}` + `max-height:70vh` ở đây (13/08/2026).
     Từ khi khung mang `aspect-ratio` cố định, hai dòng đó phá đúng thứ vừa sửa:
     `height:auto` làm ảnh về tỉ lệ THẬT của file trong khi khung vẫn giữ tỉ lệ
     khoá ⇒ viền trắng quay lại y như cũ, chỉ ở màn hẹp nên rất dễ bỏ sót.
     Khung đã có tỉ lệ riêng thì xếp dọc cũng tự cao đúng, không cần can thiệp.
     ⚠️ Ảnh dọc 2:3 ở màn hẹp sẽ khá cao (rộng 100% ⇒ cao 1,5 lần) — đó là hệ quả
     tất yếu của ảnh dọc, không phải lỗi. Muốn thấp hơn thì đổi tỉ lệ khung ở trên
     (và đổi luôn cỡ ảnh khai trong template). */
  .product-benefits{grid-template-columns:repeat(2,1fr)}
  .product-dealer-grid{grid-template-columns:1fr}
  .product-dealer-mid{display:none}
  .product-cta-info .product-btn{margin-left:0}
}
/* 4 ô ngang chỉ sống được khi trang đủ rộng. Đo thật (08/08/2026):
     621px → ô 135px, chữ 102px ⇒ PLUS "2.400 – 2.600W" (cần 134,7px) và ECO
             "Dàn lạnh đồng" ĐỀU VỠ 2 DÒNG — lỗi CÓ SẴN từ trước, không phải mới.
     768px → ô 171px, chữ 138px ⇒ vừa đủ, sạch cả 3 dòng.
   Ngưỡng an toàn nằm giữa hai mốc đó; lấy 760px cho tròn. Dưới ngưỡng về 2 cột
   (ô ~320px) — rộng rãi và giống hẳn hình thái ở điện thoại.
   ⚠️ Khối này PHẢI đứng SAU @media(max-width:1080px) ở trên, nếu không nó bị khối
   kia đè ngược lại thành 4 cột. */
@media(max-width:759px){
  .product-stats{grid-template-columns:repeat(2,1fr)}
}
/* Điện thoại: 2 cột nhưng ô chỉ còn ~160px ⇒ chữ 127px, mà "2.400 – 2.600W" ở cỡ
   15px cần 126,3px — hở CHƯA TỚI 1px, lệch một nhịp render là vỡ (và trong môi
   trường có thanh cuộn chiếm chỗ thì vỡ thật). Thu icon + khe + cỡ chữ để lấy lại
   ~14px biên an toàn. 🚫 Đừng gỡ khối này mà chỉ hạ mỗi cỡ chữ: một mình nó không đủ. */
@media(max-width:480px){
  .product-stat{gap:7px}
  .product-stat svg{width:20px;height:20px}
  .product-stat b{font-size:14px}
}
/* Máy siêu nhỏ (iPhone SE đời đầu 320px, Galaxy A 360px): 2 cột chỉ còn ~133px/ô ⇒
   chữ 106px, mà "2.400 – 2.600W" ở 14px vẫn cần 117,9px — hạ tiếp cỡ chữ thì phải
   xuống 12px mới vừa, quá nhỏ để đọc. Xếp 1 cột: ô được cả 280px, thoải mái.
   Cùng tinh thần với `.hero h1{font-size:28px}` ở ≤344px trong main.css — khổ này
   phải chấp nhận trang dài hơn để chữ còn đọc được. */
@media(max-width:360px){
  .product-stats{grid-template-columns:1fr}
}
@media(max-width:620px){
  .product-vehicles{grid-template-columns:1fr 1fr}
  .product-dealer-col{grid-template-columns:repeat(2,1fr)}
  .product-benefits{grid-template-columns:1fr}
  .product-ctaband{grid-template-columns:1fr}
  .product-cta-photo{width:100%;height:120px}
  /* min-width:0 ở CẢ HAI cấp: cột lưới và các con của nó. Thiếu một chỗ là nội dung
     lại đẩy rộng ra như cũ (đã đo: 400px trong khung 320px). */
  .product-gal{grid-template-columns:minmax(0,1fr)}
  .product-gal-main,.product-gal-thumbs{min-width:0}
  /* Màn hẹp: dải ảnh nhỏ nằm NGANG dưới ảnh chính ⇒ đổi trục cuộn sang ngang.
     🚫 Bỏ `flex-wrap:wrap` cũ: với 7 ảnh nó xuống 2–3 hàng, đẩy nội dung bên dưới
        đi xa và lặp đúng cái xấu mà anh vừa báo ở bản desktop.
     ⚠️ Phải gỡ `max-height` của bản dọc, nếu không dải ngang bị cắt cụt chiều cao. */
  .product-gal-thumbs{
    flex-direction:row;order:2;flex-wrap:nowrap;
    max-height:none;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    padding-right:0;padding-bottom:6px;
  }
  .product-gal-thumbs img{width:72px;flex:0 0 72px}
  /* 🚫 ẨN 2 nút ▲▼: ở khổ này dải ảnh nằm NGANG (cuộn theo trục X), mà 2 nút kia chỉ
     cuộn theo trục Y ⇒ bấm vào không đi đâu cả. Chúng còn chiếm 2 hàng 26px kẹp trên
     dưới dải ảnh, đẩy nội dung xuống vô ích. Người dùng điện thoại vuốt ngang là đủ.
     (JS vẫn chạy bình thường — nó chỉ bật/tắt thuộc tính disabled, không đo hiển thị.) */
  .product-gal-tnav{display:none}
}


/* ---------- TÀI LIỆU KỸ THUẬT (link sang trang Hướng dẫn sử dụng) ----------
   Đặt sau bảng thông số. Khối gọn một hàng: icon | chữ | nút — cố ý KHÔNG làm to
   như một khối bán hàng, vì nó là lối rẽ phụ, không được tranh chỗ với CTA chính. */
.product-docs-sec{padding-top:0}
.product-docs{display:flex;align-items:center;gap:clamp(14px,2vw,24px);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);
  background:var(--product-band,#ECF2FB);border:1px solid var(--product-line,#E3E8EF);border-radius:14px}
.product-docs-ic{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;
  background:#fff;border:1px solid var(--product-line,#E3E8EF)}
.product-docs-ic svg{width:24px;height:24px;stroke:var(--product-red,#D21F25);fill:none}
.product-docs-tx{flex:1;min-width:0}
.product-page .product-docs h2{font-family:var(--product-font-heading);font-size:clamp(16px,1.8vw,20px);font-weight:800;
  margin:0;color:var(--product-ink,#0B1F35);line-height:1.35}
.product-docs p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--product-muted,#5A6672)}
.product-docs-btn{flex:0 0 auto}
@media (max-width:760px){
  .product-docs{flex-direction:column;align-items:flex-start;text-align:left}
  .product-docs-btn{width:100%}
}