/* responsive-fix.css — đồng bộ responsive toàn site 5S Media — 2026-07
   Nạp SAU <style> inline của trang và sau mobile-menu.css.
   Nguyên tắc: không sửa CSS inline của 44 trang, mọi override gom về đây. */

/* ============================================================
   1. Đồng bộ breakpoint nav toàn site về 1299px (chuẩn index.html)

   Trước fix, nav chỉ chuyển sang mobile ở:
     - 880px  trên 43 trang  (rule .menu — specificity 0,1,0)
     - 680px  trên 9 trang giai-phap/*  (do CSS nav CŨ còn sót:
              `.nav nav{display:flex}` có specificity 0,1,1, THẮNG
              rule `.menu{display:none}` ở @media 880px)

   Hậu quả đo được bằng Chrome headless:
     - @900px : 43/44 trang — .nav-cta (chứa nút menu) bị đẩy ra
                ngoài viewport +241..+293px
     - @768px : 9 trang giai-phap — chính nút .burger văng ra +339px
   Nút menu bị đẩy khỏi màn hình và bị `overflow-x:hidden` giấu đi.

   Selector `header.nav .menu` có specificity (0,2,1) nên đã thắng cả
   `.nav nav` (0,1,1) lẫn `.menu` (0,1,0) mà KHÔNG cần !important
   (đã kiểm chứng bằng computed style trên cả 44 trang).
   CHỈ đụng rule của nav — layout nội dung vẫn giữ breakpoint cũ.
   ============================================================ */
@media (max-width:1299px){
  header.nav .menu{ display:none; }
  header.nav .burger{ display:grid; }

  /* Nút CTA: GIỮ CHỮ trên mobile — chỉ còn mỗi mũi tên thì người dùng
     không đoán được nút làm gì (trang gốc ẩn chữ ở <=880px).

     Nhưng dùng nguyên "Tư vấn giải pháp" (176px) thì KHÔNG vừa: 36/44
     trang còn có nút tìm kiếm trong header, đo được nút menu bị đẩy ra
     ngoài viewport +3..+50px. Nên rút nhãn còn "Tư vấn" trên mobile.
     Chiều cao ép 44px để vẫn đạt chuẩn vùng chạm. */
  header.nav .nav-cta .btn-primary span.lbl{ display:none; }
  header.nav .nav-cta .btn-primary::before{ content:"Tư vấn"; }
  header.nav .nav-cta .btn-primary{
    height:44px;
    padding:0 9px 0 16px;
    gap:8px;
    border-radius:999px;
  }
}

/* Màn cực nhỏ (<=359px, iPhone SE đời 1): kể cả nhãn ngắn vẫn dư +14px
   trên các trang có nút tìm kiếm. Bóp nhẹ nút, KHÔNG bỏ chữ. */
@media (max-width:359px){
  header.nav .nav-cta .btn-primary{
    padding:0 6px 0 11px;
    gap:5px;
    font-size:12px;
  }
  header.nav .nav-cta .btn-primary .ic{ width:22px; height:22px; }
}

/* ============================================================
   2. Vùng chạm tối thiểu 44x44px (WCAG 2.5.8 / HIG)
   ============================================================ */
header.nav .burger{ width:44px; height:44px; }

/* Link CHỮ ở footer trước đây không có đệm chạm — vùng bấm chỉ cao bằng dòng chữ.
   Phải loại trừ 2 thứ có layout riêng, nếu ép inline-block sẽ vỡ:
     - .fcta      : nút pill (inline-flex) -> chữ bị xuống dòng, méo hộp
     - .socials a : icon tròn (display:grid, place-items:center) -> lệch tâm
   Nên chỉ nhắm link chữ: mục điều hướng + email/hotline trong thẻ <p>. */
.fnav-grid a:not(.fcta),
.fcol-contact p a{ display:inline-block; padding-block:8px; }

/* Nút pill "Kết nối với chúng tôi": giữ nguyên dạng pill, chỉ nâng đủ 44px */
.fnav-grid .fcta{ min-height:44px; padding:0 18px; }

/* Icon mạng xã hội: 36px -> 44px, giữ nguyên căn giữa bằng grid */
.socials a{ width:44px; height:44px; }

/* Ở màn hẹp, .fnav-grid vẫn chia 2 cột con trong khi cả khối chỉ rộng ~226px
   -> mỗi cột ~91px, nút pill "Kết nối với chúng tôi" bị bẻ 2-3 dòng, méo hộp.
   (Lỗi có sẵn của site.) Cho danh sách về 1 cột để nút đủ bề ngang. */
@media (max-width:880px){
  .fnav-grid{
    grid-auto-flow:row;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    row-gap:2px;
  }
  .fnav-grid .fcta{ justify-content:center; margin-top:10px; }
}

/* ============================================================
   4. Ô tìm kiếm trên header

   Layout gốc có nút .icon-btn "Tìm kiếm" ở 36 trang con nhưng KHÔNG có ở
   trang chủ / Giới thiệu, và nó là nút CHẾT (không có handler JS, bấm không
   làm gì). Đã thống nhất: hiện ở mọi trang + nối vào tìm kiếm thật của WP.
   ============================================================ */
.nav-search{
  position:absolute; left:0; right:0; top:100%;
  padding:0 clamp(14px,3vw,28px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--e,ease), transform .25s var(--e,ease), visibility .25s;
  z-index:120;
}
.nav-search.is-open{ opacity:1; visibility:visible; transform:none; }
.nav-search form{
  display:flex; align-items:center; gap:10px;
  max-width:var(--maxw,1340px); margin-inline:auto;
  background:#fff; border:1px solid var(--g-brd,rgba(255,255,255,.65));
  border-radius:999px; padding:8px 8px 8px 22px;
  box-shadow:var(--g-sh,0 18px 50px -22px rgba(31,38,90,.30));
}
.nav-search input[type="search"]{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:15px; color:var(--ink,#141733); padding:10px 0;
}
.nav-search .nav-search-x{
  width:44px; height:44px; border:0; border-radius:50%;
  background:transparent; cursor:pointer;
  font-size:22px; line-height:1; color:var(--tx-mut,rgba(20,23,51,.62));
}
.nav-search .nav-search-x:hover{ background:rgba(20,23,51,.06); }