/* =========================================================================
   VOLTIC — CSS TRANG SO SÁNH
   Chỉ nạp ở page-templates/compare.php (xem inc/enqueue.php) → không làm nặng
   các trang khác. Mọi class prefix `compare-` và bọc trong `.compare-page` để KHÔNG đụng
   main.css. Nguồn chuẩn đã duyệt: preview-sosanh/index.html.

   MỤC LỤC
     1. Biến + nền trang
     2. Đầu trang (ảnh nền + tiêu đề + 3 máy)
     3. Bảng so sánh + cột "hàng trôi nổi"
     4. Cam kết cuối trang
     5. Màn hẹp
   ====================================================================== */

/* ---------- 1. Biến + nền trang ---------- */
.compare-page{
  --compare-ink:#0B1F35; --compare-navy:#0d3562; --compare-red:#D21F25; --compare-green:#1FA85C;
   --compare-line:#E3E8EF; --compare-blue:#1B4E8F;
  --compare-font-heading:'Plus Jakarta Sans',system-ui,sans-serif;
  --compare-font-body:'Be Vietnam Pro',system-ui,sans-serif;
  color:var(--compare-ink);font-family:var(--compare-font-body);
  background:
    radial-gradient(120% 60% at 80% 0,#dcecfb 0,rgba(220,236,251,0) 55%),
    linear-gradient(#eef5fc,#fff 340px);
  padding-bottom:clamp(20px,2.6vw,36px);
}
.compare-page img{max-width:100%;height:auto;display:block}
/* ⚠️ Bó hẹp trong 2 khối RIÊNG của trang, KHÔNG dùng `.compare-page h1,.compare-page h2`:
   trang có gọi khối liên hệ DÙNG CHUNG (blocks/cta.php) — chọn rộng là đổi luôn
   font/màu/line-height của khối chung, lệch so với các trang khác.
   Cũng ĐỪNG thêm margin/line-height vào rule gộp: nó (0,1,1) mạnh hơn .compare-title /
   .compare-side-h (0,1,0) nên ĐÈ MẤT khoảng cách — đã dính một lần (tiêu đề dính logo). */
.compare-top h1,.compare-side h2{font-family:var(--compare-font-heading);color:var(--compare-ink)}

/* ---------- 2. Đầu trang ----------
   ⚠️ ẢNH NỀN nằm ở lớp riêng `.compare-top::before`, LỚP PHỦ TRẮNG ở `.compare-top::after`.
   Tách 2 lớp vì: (1) media query đổi lớp phủ mà KHÔNG đụng ảnh — gộp chung thì
   màn hẹp mất ảnh; (2) Live Edit đổi ảnh nền ghi đè `background-image` của bộ
   chọn được trỏ tới — trỏ vào ::before nên không thổi bay lớp phủ.
   Lớp phủ: bên TRÁI để chữ đọc rõ, phía DƯỚI + góc dưới-trái để hàng máy nổi. */
.compare-top{
  position:relative;isolation:isolate;margin-top:clamp(12px,1.8vw,22px);border-radius:18px;overflow:hidden;
  padding:clamp(18px,2.6vw,34px) clamp(18px,2.6vw,34px) clamp(8px,1.4vw,16px);
  min-height:clamp(300px,30vw,430px);background:#fff;
}
.compare-top::before,.compare-top::after{content:'';position:absolute;inset:0}
.compare-top::before{z-index:-2;background-image:url(../img/compare/header-bg.jpg);
  background-size:cover;background-position:right center;background-repeat:no-repeat}
.compare-top::after{z-index:-1;background-image:
  radial-gradient(115% 78% at 26% 104%,#fff 34%,rgba(255,255,255,.72) 58%,rgba(255,255,255,0) 80%),
  linear-gradient(to top,#fff 5%,rgba(255,255,255,0) 48%),
  linear-gradient(to right,#fff 5%,rgba(255,255,255,.88) 30%,rgba(255,255,255,0) 62%)}
.compare-logo{display:flex;align-items:center;gap:10px;color:var(--compare-ink)}
.compare-logo svg{width:40px;height:40px}
.compare-logo b{font-family:var(--compare-font-heading);font-weight:800;font-size:30px;letter-spacing:.06em}
.compare-title{font-weight:800;font-size:clamp(32px,5.4vw,66px);line-height:1.02;
  letter-spacing:-.01em;margin:clamp(12px,2vw,24px) 0 0;text-transform:uppercase}
.compare-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.6vw,22px);
  align-items:end;margin-top:clamp(10px,1.6vw,20px);max-width:min(820px,74%)}
/* ⚠️ MỖI ảnh phải có thẻ bọc RIÊNG (.compare-prod): Live Edit neo nút "đổi ảnh" vào
   THẺ CHA — để 3 ảnh chung một cha thì 3 nút chồng khít, chỉ bấm được ảnh cuối. */
.compare-prod{display:flex;align-items:flex-end;position:relative}
.compare-prods img{width:100%}

/* ---------- 3. Bảng so sánh ---------- */
.compare-main{display:grid;grid-template-columns:1fr 252px;gap:22px;align-items:start;margin-top:clamp(18px,2.4vw,30px)}
.compare-table{border:1px solid var(--compare-line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(11,31,53,.06)}
.compare-thead,.compare-row{display:grid;grid-template-columns:230px 1fr 1fr}
.compare-thead{background:linear-gradient(180deg,#0d3562,#0a2c53);color:#fff;font-family:var(--compare-font-heading);font-weight:700;font-size:15.5px}
.compare-thead>div{padding:16px 20px}
.compare-thead>div:first-child{text-align:center}
.compare-row{border-top:1px solid var(--compare-line)}
.compare-row:nth-child(even){background:#fbfcfe}
.compare-row>div{padding:16px 20px}
.compare-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border-right:1px solid var(--compare-line)}
.compare-cat svg{width:34px;height:34px;color:var(--compare-blue);stroke-width:1.7}
.compare-cat b{font-family:var(--compare-font-heading);font-weight:700;font-size:15px}
.compare-cell{display:grid;grid-template-columns:26px 1fr;gap:11px;font-size:14px;color:#2b3948;align-items:start}
.compare-cell.bad{border-left:1px solid var(--compare-line)}
.compare-cell .ic{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.compare-cell.good .ic{background:var(--compare-green)}
.compare-cell.bad .ic{background:var(--compare-red)}
.compare-cell .ic svg{width:14px;height:14px;color:#fff;stroke-width:2.6}

/* cột "hàng trôi nổi" */
.compare-side{border:1px solid var(--compare-line);border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(11,31,53,.06);padding:16px 12px;text-align:center}
.compare-side-h{font-size:14.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px;line-height:1.25}
.compare-side-img{position:relative}  /* thẻ bọc riêng cho ảnh — nút Live Edit không đè lên tiêu đề */
.compare-side img{width:100%;border-radius:10px}

/* ---------- 4. Cam kết cuối trang ---------- */
.compare-bottom{margin:clamp(20px,3vw,40px) 0 clamp(20px,2.6vw,36px)}
.compare-vow{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);background:#fff;border:2px solid var(--compare-navy);
  border-radius:18px;padding:clamp(20px,2.6vw,30px) clamp(22px,3.2vw,42px);box-shadow:0 14px 40px rgba(11,31,53,.10)}
/* ⚠️ Icon khiên phải dùng class CÓ TIỀN TỐ (`compare-shield`). Dùng `.sh` là đụng
   `.sh` của main.css (tiêu đề khối: max-width 700px + margin-bottom 56px) → icon
   méo và đội hộp cao lên. Mọi class trong 3 template compare/ đều phải có `compare-`. */
.compare-vow .compare-shield{width:clamp(50px,5vw,68px);height:clamp(50px,5vw,68px);flex-shrink:0;color:var(--compare-navy)}
.compare-vow p{margin:0;font-family:var(--compare-font-heading);font-weight:700;font-size:clamp(15px,1.55vw,20px);color:var(--compare-navy);line-height:1.6}
.compare-band{margin-top:clamp(10px,1.4vw,18px)}
.compare-band img{width:100%}

/* ---------- 5. Màn hẹp ---------- */
@media(max-width:1080px){
  /* phủ trắng ĐẬM hơn cho chữ nổi rõ (chỉ đổi lớp ::after, ảnh nền giữ nguyên) */
  .compare-top{min-height:0}
  .compare-top::after{background-image:
    linear-gradient(to top,#fff 6%,rgba(255,255,255,0) 46%),
    linear-gradient(to right,#fff 10%,rgba(255,255,255,.9) 46%,rgba(255,255,255,.35) 78%)}
  .compare-prods{max-width:none}
  .compare-main{grid-template-columns:1fr}
  /* 🚫 ĐỪNG dùng margin-inline:auto — grid item mất stretch, cột co lại theo chữ.
     justify-self canh giữa mà vẫn giữ bề rộng. */
  .compare-side{width:min(320px,100%);justify-self:center}
  .compare-thead,.compare-row{grid-template-columns:150px 1fr 1fr}
}
/* ⚡ Ảnh nền đầu trang bản NHỎ cho màn hẹp (thêm 08/08/2026).
   Ảnh gốc 1500×594 / 81 KB là ảnh LCP của trang này, hiển thị ở mọi khổ — bản 768px
   chỉ 25 KB (giảm 69%). Ngưỡng 768px phải KHỚP `media` của thẻ preload ở inc/enqueue.php. */
@media(max-width:768px){
  .compare-top::before{background-image:url(../img/compare/header-bg-768.jpg)}
}

/* ==========================================================================
   📱 ĐIỆN THOẠI / MÁY TÍNH BẢNG DỌC (≤680px) — BẢNG THÀNH DẠNG THẺ XẾP DỌC
   --------------------------------------------------------------------------
   🐛 Cách CŨ: giữ 3 cột và ép `min-width:640px` + `overflow-x:auto`. Đo ở màn 375px
   thì bảng rộng 640px trong khung 320px ⇒ khách phải VUỐT NGANG 322px mới đọc hết
   một hàng. Mà bảng này CHÍNH LÀ nội dung của trang So sánh — bắt vuốt ngang để đọc
   nội dung chính là hỏng trải nghiệm, lại dễ bị bỏ qua vì nhiều người không nhận ra
   là cuộn được.

   ✅ Cách MỚI: mỗi hạng mục thành MỘT THẺ xếp dọc — tên hạng mục làm tiêu đề, bên dưới
   là 2 ô Voltic / hàng trôi nổi. Không còn cuộn ngang, chữ rộng rãi, đọc một mạch từ
   trên xuống. Đây là mẫu quen thuộc của bảng so sánh trên điện thoại.

   🔑 KHÔNG sửa một dòng HTML nào — chỉ đổi cách xếp của lưới sẵn có, nên Live Edit,
   hiệu ứng cuộn và bản desktop giữ nguyên y hệt.
   ========================================================================== */
@media(max-width:680px){
  .compare-vow{gap:16px;flex-direction:column;text-align:center}

  /* Hết cuộn ngang: bỏ luôn min-width lẫn overflow của cách cũ. */
  .compare-table{overflow-x:visible}
  .compare-row{grid-template-columns:1fr;min-width:0}

  /* Hàng tiêu đề chỉ còn 2 nhãn làm CHÚ GIẢI cho 2 màu bên dưới.
     Ô đầu ("Hạng mục") thừa vì tên hạng mục đã nằm ngay trong từng thẻ.
     🚫 Đừng ẩn cả hàng: 3 nhãn này là nội dung admin nhập được (Live Edit). */
  .compare-thead{grid-template-columns:1fr 1fr;min-width:0;font-size:13.5px}
  .compare-thead>div{padding:12px 14px;text-align:center}
  .compare-thead>div:first-child{display:none}

  /* Tên hạng mục: icon nằm CẠNH chữ cho gọn chiều cao (bản desktop xếp dọc). */
  .compare-cat{flex-direction:row;justify-content:flex-start;text-align:left;gap:10px;
    border-right:0;border-bottom:1px solid var(--compare-line);background:#f4f7fb;padding:12px 16px}
  .compare-cat svg{width:26px;height:26px;flex:0 0 26px}
  .compare-cat b{font-size:15.5px}

  /* 2 ô giá trị: dải màu bên trái thay cho vị trí cột — nhìn là biết ô nào của ai,
     không phải nhớ thứ tự cột như bảng ngang. */
  .compare-row>div{padding:13px 16px}
  .compare-cell{font-size:14.5px;border-left:3px solid transparent}
  .compare-cell.good{border-left-color:var(--compare-green);background:#f7fdf9}
  .compare-cell.bad{border-left-color:var(--compare-red);background:#fffafa;
    border-top:1px solid var(--compare-line)}

  /* Viền ngăn giữa các thẻ đậm hơn cho tách bạch từng hạng mục. */
  .compare-row+.compare-row{border-top-width:2px}
}