/* =====================================================================
   VIEWD.VN — BỐ CỤC MOBILE LIỀN LẠC (360–430px, kèm tablet 768px)
   Phản hồi chủ đầu tư: "Giao diện điện thoại rời rạc, nhiều khoảng
   trống, khách không biết mục nào là chính."
   Cách xử lý (chỉ CSS, không đổi chữ / không đổi màu thương hiệu):
     1) Rút gọn nhịp dọc .section trên mobile (72–132px -> 44–56px).
     2) Dùng nền xen kẽ --ink/--ink-2 để phân đoạn khối thay vì
        khoảng trắng lớn (chỉ áp cho các khối trang chủ, xác định
        qua tổ hợp ".hero ~ section:has(...)" — không đụng trang khác).
     3) Bốn danh mục sản phẩm: xếp lưới 2×2 gọn thay vì xếp dọc dài,
        và làm tiêu đề khối "Bốn nhóm giải pháp" lớn hơn các khối phụ
        (K9, giới thiệu, gallery, dự án, tin tức) để tạo phân cấp rõ.
     4) Footer 4 cột gộp lại 2×2 cho gọn trên điện thoại.
     5) Các lỗi lặt vặt khác: card tin tức, K9, khoảng cách section-head.
   Nạp SAU main.css + header-fix.css (và brand-hero.css nếu có) nên
   các quy tắc cùng độ đặc tả ở đây thắng.
   KHÔNG đụng: .hero, .slide*, .hero-ui, .slide-txt, .brand-stage,
   .slide--brand (thuộc khối hero/thương hiệu do agent khác phụ trách).
   owner: "Sam (sở hữu độc quyền, cấm sao chép)"
   ===================================================================== */

/* ---------- 1. NHỊP DỌC .section — áp dụng mọi trang ---------- */
@media(max-width:900px){
  .section{padding:56px 0}
  .section-head{margin-bottom:26px;gap:20px}
}
@media(max-width:600px){
  .section{padding:48px 0}
  .section-head{margin-bottom:22px}
}
@media(max-width:430px){
  .section{padding:44px 0}
}

/* Trang trong (page-hero + nội dung): giảm khoảng đệm đầu trang một chút */
@media(max-width:600px){
  .page-hero{padding:44px 0 32px}
}

/* ---------- 2. CHỈ SỐ (4 con số) — gọn lại trên mọi trang dùng .stat ---------- */
@media(max-width:760px){
  .stat{padding:22px 20px}
  .stat span{margin-top:6px;font-size:12px}
}
@media(max-width:480px){
  .stat{padding:18px 16px}
}

/* =====================================================================
   3. TRANG CHỦ — PHÂN CẤP + NỀN XEN KẼ
   Mọi selector dưới đây bắt đầu bằng ".hero ~" để CHỈ khớp trang chủ
   (chỉ index.html có <section class="hero">; các trang khác dùng
   .page-hero) — không ảnh hưởng cong-tac-o-cam.html, lien-he.html,
   du-an.html, v.v.
   ===================================================================== */

/* ---- 3.1 Khối chính: DANH MỤC 4 NHÓM SẢN PHẨM — nổi bật nhất sau hero ---- */
@media(max-width:900px){
  .hero ~ section:has(.cats){background:var(--ink)}
  .hero ~ section:has(.cats) .eyebrow{font-size:12.5px;letter-spacing:.32em;font-weight:800}
  .hero ~ section:has(.cats) .eyebrow::before{width:44px}
  .hero ~ section:has(.cats) .h-lg{font-size:clamp(28px,7.6vw,36px)}
}

/* ---- 3.2 Các khối phụ: K9 mới về / Giới thiệu / Gallery / Dự án / Tin tức
   — nền xen kẽ để phân đoạn, tiêu đề nhỏ hơn khối chính (gọn hơn) ---- */
@media(max-width:900px){
  .hero ~ section:has(.new-grid){background:var(--ink-2)}
  .hero ~ section:has(.split){background:var(--ink)}
  .hero ~ section:has(#gallery){background:var(--ink-2)}
  .hero ~ section:has(#projRail){background:var(--ink)}
  .hero ~ section:has(#newsGrid){background:var(--ink-2)}

  .hero ~ section:has(.new-grid) .h-lg,
  .hero ~ section:has(.split) .h-lg,
  .hero ~ section:has(#gallery) .h-lg,
  .hero ~ section:has(#projRail) .h-lg,
  .hero ~ section:has(#newsGrid) .h-lg{
    font-size:clamp(23px,6.2vw,28px);
  }
  .hero ~ section:has(.new-grid) .section-head,
  .hero ~ section:has(#gallery) .section-head{
    margin-bottom:18px;
  }
}

/* ---- 3.3 Bốn danh mục: lưới 2×2 gọn thay vì xếp dọc dài lê thê ---- */
@media(max-width:900px){
  .cats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .cats{grid-template-columns:repeat(2,1fr);gap:2px}
  .cat{min-height:206px;padding:16px 14px}
  .cat .num{top:10px;right:12px;font-size:10.5px;letter-spacing:.14em}
  .cat h3{font-size:17px;margin-bottom:6px;line-height:1.2}
  .cat p{
    font-size:11.8px;line-height:1.42;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* the ca the la 1 the <a> lon (>44px) — nhan link-more ben trong chi mang
     tinh trang tri, bo vung dem 44px danh cho tap-target rieng de card gon */
  .cat .link-more{min-height:0;padding:0;margin:0;font-size:10.5px;letter-spacing:.14em}
}
@media(max-width:380px){
  .cat{min-height:184px;padding:14px 12px}
  .cat h3{font-size:16px}
}

/* ---- 3.4 Khối K9 "mới về showroom": ảnh gọn hơn, đỡ chiếm chiều cao ---- */
@media(max-width:560px){
  .new-grid{gap:8px}
  .new-card{aspect-ratio:16/9}
  .new-card .ov{padding:16px}
  .new-card h3{font-size:15.5px}
  .new-card--wide h3{font-size:18px}
  .new-card p{font-size:11.8px;margin-top:5px}
  .new-card .tag{font-size:9.5px;padding:3px 8px;margin-bottom:8px}
}

/* ---- 3.5 Card tin tức: gọn hơn trên điện thoại ---- */
@media(max-width:600px){
  .hero ~ section:has(#newsGrid) .card-body{padding:18px}
  .hero ~ section:has(#newsGrid) .card h3{font-size:17px}
  .hero ~ section:has(#newsGrid) .card p{font-size:13px}
}

/* ---- 3.6 Newsletter: khoảng đệm gọn hơn trên điện thoại ---- */
@media(max-width:600px){
  .hero ~ .news-cta .news-in{padding:36px 0}
}

/* =====================================================================
   4. FOOTER — 4 CỘT GỘP LẠI 2×2 CHO GỌN (áp dụng mọi trang)
   ===================================================================== */
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:6px 22px;padding-bottom:32px}
  .foot-grid > div:first-child,
  .foot-grid > div:last-child{grid-column:1/-1}
  .foot-grid > div:first-child{margin-bottom:6px}
  .foot-grid li{margin-bottom:2px}
}
@media(max-width:600px){
  .site-footer{padding-top:40px}
}

/* ---------- 5. AN TOÀN CHUNG ---------- */
@media(max-width:900px){
  /* luoi long: khong de bat ky khoi nao tao thanh cuon ngang */
  body{overflow-x:hidden}
}

@media (prefers-reduced-motion:reduce){
  .cat,.new-card,.card{transition:none!important}
}