/* ==========================================================================
   COMPONENTS — nav, nút, thẻ, form, video, lightbox, footer
   ========================================================================== */

/* ---------------------------------------------------------------- Nút */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  --btn-bd: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 50px;
  padding: 0 var(--s6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { --btn-bg: var(--red); --btn-bd: var(--red); transform: translateY(-1px); }
.btn:active { --btn-bg: var(--red); transform: translateY(0); }
.btn .ico { width: 1.15em; height: 1.15em; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: #000; --btn-bd: #000; }

.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--light:hover { --btn-bg: var(--g100); --btn-bd: var(--g100); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.35); }
.btn--outline-light:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: rgba(255,255,255,.6); }

.btn--lg { min-height: 58px; padding: 0 var(--s7); font-size: var(--t-body); }
.btn--block { width: 100%; }

/* Link mũi tên kiểu editorial */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: var(--w-bold);
  font-size: var(--t-sm);
  color: var(--red);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .18s var(--ease), gap .18s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--red); gap: var(--s3); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------------------------------------------------------------- Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--g600);
}
.chip .ico { width: 1.05em; height: 1.05em; color: var(--red); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------------------------------------------------------------- Topbar */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .8);
  font-size: var(--t-xs);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 38px;
  padding-block: 6px;
}
.topbar a { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-semibold); color: #fff; }
.topbar a:hover { color: #FF8A93; }
.topbar-left { display: inline-flex; align-items: center; gap: var(--s3); }
.topbar-left .ico { width: 15px; height: 15px; color: #FF8A93; }
/* Màn hình hẹp: giấu cả cụm địa chỉ (kể cả icon) để không còn icon đứng trơ,
   chỉ giữ hotline — thứ khách cần nhất trên điện thoại. */
@media (max-width: 720px) {
  .topbar-left { display: none; }
  .topbar .wrap { justify-content: center; }
}

/* ---------------------------------------------------------------- Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-height: var(--nav-h);
}
/* File .svg chính thức 2025: mark + NETPRINT + slogan đã là nét vẽ sắc
   sẵn trong file gốc, không cần tách slogan ra thành chữ HTML riêng nữa
   như bản raster cũ (rasterize làm mờ chữ mảnh khi thu nhỏ). */
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 83px; width: auto; }
@media (max-width: 640px) { .logo img { height: 66px; } }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-left: auto;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
}
.nav-links a { position: relative; color: var(--g700); padding-block: 6px; }
.nav-links a:hover { color: var(--red); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--red);
}

.nav-cta { display: flex; align-items: center; gap: var(--s2); flex: none; }
.nav-cta .btn { min-height: 42px; padding: 0 var(--s4); font-size: var(--t-xs); }

/* ---------------------------------------------------------------- Ô tìm sản phẩm
   Nằm giữa logo và menu. Mượn đúng ngôn ngữ sẵn có của site: ô nhập kẻ viền
   1.5px và vành đỏ khi focus y như form báo giá (.input), còn bảng gợi ý
   dựng theo .nav-panel — nền trắng, bo --r-lg, bóng --sh-lg, dải CMYK 3px
   vắt ngang mép trên. Nhờ vậy nó là MỘT phần của hệ thống, không phải một
   mảnh giao diện lạ ghép vào.

   Không có backend tìm kiếm: JS lọc tại chỗ trên danh sách sản phẩm PHP in
   sẵn — xem khối "Tìm sản phẩm" trong assets/js/main.js. */
/* Bề ngang cố định + lề trái/phải 'auto': khoảng trống còn lại của thanh nav
   chia đều ra hai bên ô, nên ô nằm cân ĐÚNG GIỮA logo và chữ "Sản phẩm".
   Để 'flex: 1' như bản đầu thì .nav-links (margin-left:auto) nuốt sạch phần
   trống, ô bị dồn dính sát logo còn bên phải hở một mảng rộng. */
.nav-search {
  position: relative;
  flex: none;
  width: min(340px, 100%);
  margin-inline: auto;
}
/* ⚠️ Cặp đôi với rule trên, ĐỪNG trả lại 'auto' cho .nav-links.
   Lề auto chia đều phần trống cho MỌI lề auto trong cùng hàng flex. Để cả
   .nav-links giữ margin-left:auto thì thanh nav có ba lề auto (hai bên ô tìm
   + một bên menu), phần trống chia BA — khe bên phải ô rộng gấp đôi khe bên
   trái, nhìn ra là ô lệch hẳn về phía logo.
   Bỏ đi thì chỉ còn hai lề auto của chính ô tìm, phần trống chia đôi đều. Menu
   và nút "Báo giá ngay" vẫn nằm sát mép phải vì hai lề đó đã ăn hết chỗ trống,
   không có gì đẩy chúng vào trong nữa. */
.nav-links { margin-left: 0; }
.nav-search-form {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 44px;
  padding: 0 var(--s4);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.nav-search-form:hover { border-color: var(--g400); }
/* Vành sáng đặt lên CẢ khung chứ không lên riêng thẻ input: input đã bỏ viền
   để chìm vào khung, focus trên nó thôi thì không thấy gì. */
.nav-search-form:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.nav-search-form .ico {
  width: 18px; height: 18px;
  flex: none;
  color: var(--g400);
  transition: color .16s var(--ease);
}
.nav-search-form:focus-within .ico { color: var(--red); }
.nav-search-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: var(--t-sm);
  color: var(--ink);
}
/* Vành sáng đã vẽ trên cả khung (:focus-within ở trên) nên input không cần
   vành riêng — để nguyên thì thành hai vành lồng nhau. */
.nav-search-form input:focus { outline: none; }
.nav-search-form input::placeholder { color: var(--g400); }
/* Nút "x" mặc định của Chrome/Safari trong <input type=search> vẽ một dấu
   nhân xám lệch nhịp với bộ icon của site — bỏ đi, đã có Esc và bấm ra ngoài. */
.nav-search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---- Bảng gợi ý ---- */
.nav-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  z-index: 80;
  overflow: hidden;
  padding: var(--s2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.nav-search-results[hidden] { display: none; }
.nav-search-results::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, var(--k) 75% 100%);
}
.nav-search-results a {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background .15s var(--ease);
}
.nav-search-results a:hover,
.nav-search-results li.is-active a { background: var(--red-subtle); }
.nav-search-results .ico { width: 19px; height: 19px; flex: none; color: var(--red); }
/* Mặt hàng chưa có trang riêng — làm nhạt đúng như .nav-soon trong menu thả
   xuống, để hai chỗ nói cùng một thứ bằng cùng một tín hiệu. Vẫn bấm được
   (link trỏ về form báo giá) nên KHÔNG hạ opacity cả dòng xuống .55 như menu,
   chỉ hạ riêng icon và dòng chú thích. */
.nav-search-results a.is-soon .ico { color: var(--g400); }
.nav-search-results b {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.nav-search-results small {
  display: block;
  margin-top: 1px;
  font-size: var(--t-xs);
  color: var(--muted);
}
.nav-search-empty {
  padding: 12px 10px;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* Nút kính lúp — chỉ dùng ở khổ hẹp, nơi ô nhập không còn chỗ đứng sẵn.
   Máy tính ẩn hẳn nút này (ô nhập đã hiện thường trực). */
.nav-search-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav-search-toggle .ico { width: 20px; height: 20px; }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav-toggle .ico { width: 22px; height: 22px; }
.nav-toggle .ico-close { display: none; }
.nav.is-open .nav-toggle .ico-close { display: block; }
.nav.is-open .nav-toggle .ico-menu { display: none; }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .nav-links, .nav-cta {
    display: none;
    width: 100%;
  }

  /* ---- Ô tìm ở khổ hẹp ----
     Thanh nav chỉ vừa logo + hai nút, không còn chỗ cho ô nhập đứng thường
     trực. Bấm kính lúp thì ô mới xổ ra, chiếm trọn một dải riêng BÊN DƯỚI
     logo (order: 1 đẩy nó xuống sau khi flex-wrap xuống hàng) — rộng hết bề
     ngang nên gõ thoải mái, thay vì bóp ô lại cho vừa khe hẹp. */
  .nav-search-toggle { display: inline-flex; margin-left: auto; }
  .nav-in { flex-wrap: wrap; }
  .nav-search {
    display: none;
    order: 1;
    width: 100%;
    /* Trả lại lề 0: bản máy tính dùng margin auto để canh ô vào giữa, ở đây ô
       chiếm trọn hàng nên không còn gì để canh. */
    margin-inline: 0;
    margin-bottom: var(--s3);
  }
  .nav-search.is-open { display: block; }
  /* Xổ hết bề ngang rồi thì bảng gợi ý bám theo, không cần bo tròn viên thuốc
     nữa — ô vuông góc hơn hợp với dải chiếm trọn hàng. */
  .nav-search-form { height: 46px; border-radius: var(--r-sm); }
  .nav.is-open .nav-in {
    flex-wrap: wrap;
    padding-bottom: var(--s5);
    /* .nav là sticky nên khi menu xổ dài hơn màn hình (mở nhóm "Sản phẩm" là
       ~1600px) phần dưới KHÔNG BAO GIỜ cuộn tới được — trang cuộn nhưng nav
       đứng yên. Khoá chiều cao bằng màn hình và cho cuộn bên trong. dvh trừ
       đúng thanh địa chỉ của trình duyệt điện thoại; vh là mức rơi về. */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
  .nav.is-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: var(--s3) 0 0;
    font-size: var(--t-body);
  }
  /* Dấu ">" là toàn bộ phần sửa: chỉ ba liên kết CẤP MỘT mới ăn nhịp 14px và
     đường kẻ ngang. Thiếu nó, selector này (0,3,1) thắng .nav-col a (0,1,1) và
     đè luôn các liên kết BÊN TRONG panel — mất padding 9px 10px nên icon dính
     sát mép, mất bo góc vùng chạm, và mỗi dòng sản phẩm mọc thêm một đường kẻ
     ngang lạ. */
  .nav.is-open .nav-links > a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav-cta {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: var(--s4);
  }
  .nav.is-open .nav-cta .btn { min-height: 48px; font-size: var(--t-sm); }
}

/* ---------------------------------------------------------------- Breadcrumb */
.crumb {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--muted);
}
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.crumb li { display: inline-flex; align-items: center; gap: var(--s2); }
.crumb a:hover { color: var(--red); }
.crumb .ico { width: 14px; height: 14px; color: var(--g300); }
.crumb [aria-current] { color: var(--g700); font-weight: var(--w-semibold); }

/* ---------------------------------------------------------------- Thẻ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card-body { padding: var(--s6); }

/* ==========================================================================
   HOVER THỐNG NHẤT CHO THẺ
   Chia đúng 2 kiểu, không để mỗi loại thẻ một kiểu như trước:

   1. Thẻ BẤM ĐƯỢC  → nâng lên + đổ bóng sâu + hiện dấu xén 2 góc.
      Không đổi màu viền sang đỏ: viền đỏ dày tranh sự chú ý với ảnh/nội dung,
      và làm loãng vai trò của màu đỏ vốn dành cho nút bấm.

   2. Thẻ CHỈ ĐỌC   → chỉ đậm viền lên, KHÔNG nâng.
      Nâng thẻ lên là tín hiệu "bấm được", dùng cho thẻ không bấm được
      sẽ khiến người dùng bấm hụt.
   ========================================================================== */

/* ---- 1. Thẻ bấm được ---- */
.card--hover,
.rel-card--live,
.prod-card--live { position: relative; }

.card--hover:hover,
.rel-card--live:hover,
.prod-card--live:hover {
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  transform: translateY(-6px);
}

/* Dấu xén (crop marks) — motif nhà in, dùng chung cho mọi thẻ bấm được */
.card--hover::before,  .card--hover::after,
.rel-card--live::before, .rel-card--live::after,
.prod-card--live::before, .prod-card--live::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 18px; height: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), top .25s var(--ease),
              left .25s var(--ease), bottom .25s var(--ease), right .25s var(--ease);
}
.card--hover::before,
.rel-card--live::before,
.prod-card--live::before {
  top: 6px; left: 6px;
  border-top: 2px solid var(--red);
  border-left: 2px solid var(--red);
}
.card--hover::after,
.rel-card--live::after,
.prod-card--live::after {
  bottom: 6px; right: 6px;
  border-bottom: 2px solid var(--red);
  border-right: 2px solid var(--red);
}
.card--hover:hover::before,
.rel-card--live:hover::before,
.prod-card--live:hover::before { opacity: 1; top: 10px; left: 10px; }

.card--hover:hover::after,
.rel-card--live:hover::after,
.prod-card--live:hover::after { opacity: 1; bottom: 10px; right: 10px; }

/* ---- 2. Thẻ chỉ đọc: đậm viền, không nâng ---- */
.cap-card,
.ind-card,
.spec-card,
.contact-card {
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cap-card:hover,
.ind-card:hover,
.spec-card:hover,
.contact-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-sm);
}
/* Ảnh sản phẩm NetPrint hiện là ảnh vuông 1200×1200 có dải nhãn in sẵn ở đáy,
   nên khung để tỉ lệ 1:1 cho ảnh hiện trọn, không bị cắt ngang dòng chữ. */
.card-media { position: relative; background: var(--g100); aspect-ratio: 1; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Danh sách tick */
.ticks { display: grid; gap: var(--s3); }
.ticks li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-body); line-height: 1.55; }
.ticks .ico { width: 20px; height: 20px; color: var(--red); margin-top: 1px; }
.section--dark .ticks .ico { color: #FF8A93; }

/* ---------------------------------------------------------------- Video facade */
.video {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g900);
  aspect-ratio: 16 / 9;
}
/* Video hero để 4:3 — MỘT tỉ lệ duy nhất cho cả máy tính lẫn điện thoại, khách
   xem ở đâu cũng thấy đúng khuôn hình đó. Cao hơn 16:9 nên ảnh poster (vốn là
   ảnh vuông) đỡ bị cắt, đồng thời cột phải gần bằng chiều cao cột chữ.
   ⚠️ Đừng đặt tỉ lệ khác cho mobile — hai bên phải luôn bằng nhau. */
.hero-media .video { aspect-ratio: 4 / 3; }

.video img,
.video iframe,
.video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
/* Cắt từ mép trên: ảnh poster hiện là ảnh vuông có dải nhãn ở đáy,
   lấy phần trên tránh để dải nhãn lòi ra một nửa trong khung 16:9. */
.video img {
  object-position: center top;
  opacity: .78;
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.video-btn {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(15,23,42,.15), rgba(15,23,42,.55));
  border: 0;
  color: #fff;
}
.video-btn:hover ~ img,
.video:hover img { opacity: .62; transform: scale(1.02); }

.video-play {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 10px 30px rgba(225, 29, 46, .45);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.video-play .ico { width: 34px; height: 34px; margin-left: 3px; }
.video-btn:hover .video-play { transform: scale(1.08); background: var(--red); }

.video-meta {
  position: absolute;
  left: var(--s5); right: var(--s5); bottom: var(--s5);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4);
  color: #fff;
  text-align: left;
  pointer-events: none;
}
.video-meta strong { display: block; font-size: var(--t-h4); font-weight: var(--w-bold); line-height: 1.25; }
.video-meta small { display: block; margin-top: 4px; font-size: var(--t-xs); color: rgba(255, 255, 255, .7); }
.video-dur {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .5);
  font-family: var(--mono);
  font-size: var(--t-label);
}
.video-soon {
  flex: none;
  padding: 5px 11px;
  border: 1px dashed rgba(255, 255, 255, .5);
  border-radius: var(--r-sm);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .video-play { width: 60px; height: 60px; }
  .video-play .ico { width: 26px; height: 26px; }
  .video-meta { left: var(--s4); right: var(--s4); bottom: var(--s4); }
  .video-meta strong { font-size: var(--t-body); }
}
@media (max-width: 560px) {
  /* Trên điện thoại khung video chỉ còn ~330px, mà riêng nhãn "Video đang cập
     nhật" đã ngốn ~150px — tên và mô tả bị ép vào ~130px còn lại nên vỡ ra
     hai ba chữ một dòng, máy hẹp hơn nữa thì chữ chồng lên nhãn.

     Xếp DỌC: tên và mô tả nằm trên, nhãn xuống dưới, cả cụm canh trái. Mỗi
     phần được trọn bề ngang nên hết chen nhau.

     Sửa ở đây (component dùng chung) chứ không sửa riêng một khung: khung
     video hero cũng đang bị đúng lỗi này trên mọi trang. */
  .video-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
  }
}

/* ---------------------------------------------------------------- Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  place-items: center;
  padding: var(--s6);
  background: rgba(15, 23, 42, .93);
}
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--r-md);
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox figcaption {
  margin-top: var(--s4);
  text-align: center;
  color: rgba(255, 255, 255, .75);
  font-size: var(--t-sm);
}
.lightbox-close {
  position: absolute; top: var(--s5); right: var(--s5);
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-sm);
  color: #fff;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .2); }

/* ---------------------------------------------------------------- Form */
.field { display: grid; gap: 7px; }
.field label {
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  color: var(--g600);
}
.field .req { color: var(--red); }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px var(--s4);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--g400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--g400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}

.consent {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: var(--t-xs);
  color: var(--g500);
  line-height: 1.5;
}
.consent input {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
}
.consent a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }

/* Bẫy bot — ẩn khỏi người thật */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  display: none;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.form-status.is-on { display: flex; }
.form-status--ok { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.form-status--err { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.form-status .ico { width: 20px; height: 20px; margin-top: 1px; }

/* ---------------------------------------------------------------- Footer */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  font-size: var(--t-sm);
  padding-block: var(--s10) 0;
}
.footer-grid {
  display: grid;
  /* 5 cột: thương hiệu · tư vấn đặt hàng · bộ phận thiết kế · thông tin · chính sách.
     Hai cột người phụ trách rộng hơn ba cột còn lại để số điện thoại và nút Zalo
     đứng gọn chung một hàng, không bị rớt xuống dòng dưới.
     Dịch vụ in không còn là cột dọc — đã chuyển xuống dải .footer-serv. */
  grid-template-columns: 1.3fr 1.15fr 1.15fr 1fr 1fr;
  gap: var(--s7);
  padding-bottom: var(--s7);
}
.footer h3 {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s4);
}
.footer a { display: inline-flex; align-items: flex-start; gap: var(--s2); color: rgba(255, 255, 255, .62); }
.footer a:hover { color: #fff; }
.footer li + li { margin-top: 11px; }
.footer .ico { width: 17px; height: 17px; margin-top: 3px; color: #FF8A93; }
/* File .svg chính thức đã có sẵn slogan rõ nét trong lockup, nên đặt
   logo đủ lớn để dòng chữ nhỏ đó vẫn đọc được trên nền tối.
   Trên nền tối, đảo màu toàn bộ (mark đỏ + chữ đen) thành trắng. */
.footer-brand img {
  height: 75px; width: auto;
  margin-bottom: var(--s4);
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* Người phụ trách */
/* ---- Nhịp dọc của cụm người phụ trách ----
   Bốn mức khoảng cách, mỗi mức cách nhau đúng một nấc 8px, để mắt đọc ra ngay
   cái gì thuộc cái gì:

     8px  (--s2)  dòng trong CÙNG một người  — tên · điện thoại · email
     16px (--s4)  tiêu đề nhóm → người đầu   (rule .footer h3 phía trên)
     24px (--s6)  người → người kế
     32px (--s7)  nhóm trước → tiêu đề nhóm sau

   Bản trước để người→người và tiêu đề→người đầu BẰNG NHAU (cùng 16px), mà mỗi
   khối người cao tới 78px, nên ba người xếp liền đọc ra như một mảng đặc không
   phân tầng — chính chỗ nhìn chật chội.
   Khe trong một người cũng nới 5 → 8px cho ba dòng đỡ dính nhau. */
.staff { display: flex; flex-direction: column; gap: var(--s2); }
.staff + .staff { margin-top: var(--s6); }
/* Hai nhóm xếp chồng chung một cột (thiết kế + kế toán): tiêu đề nhóm sau phải
   cách rộng hơn hẳn khe người→người, nếu không đọc ra như thể người bên dưới
   vẫn thuộc nhóm trên. */
.footer-staff .staff + h3 { margin-top: var(--s7); }
.staff-name { color: #fff; font-weight: var(--w-bold); font-size: var(--t-sm); }
.staff-line { display: flex; align-items: center; gap: 6px; font-size: var(--t-label); }
.staff-line a { align-items: center; white-space: nowrap; }
.staff-line .ico { width: 15px; height: 15px; margin: 0; }
.staff-zalo {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  font-size: var(--t-tag);
  font-weight: var(--w-semibold);
  color: rgba(255, 255, 255, .7);
}
.staff-zalo:hover { background: var(--red); border-color: var(--red); color: #fff; }
.staff-zalo .ico { width: 11px; height: 11px; margin: 0; color: inherit; }

/* Dải địa chỉ + giờ làm — địa chỉ sát mép trái, giờ làm sát mép phải.
   Dùng space-between chứ không phải khoảng cách cố định: cố định thì giờ làm
   dừng ở giữa trang, hở hẳn một mảng trống bên phải. */
.footer-addr {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s5) var(--s8);
  padding-block: var(--s5);
  border-block: 1px solid rgba(255, 255, 255, .1);
}
.footer-addr-item { display: flex; align-items: flex-start; gap: var(--s3); }
.footer-addr-item b { color: #fff; font-weight: var(--w-semibold); }
/* Đặt cỡ tuyệt đối thay cho 1.25em mặc định của .ico: hai icon trụ sở/nhà máy
   là hình toà nhà có chi tiết (ô cửa, răng cưa, ống khói), ở 19px các chi tiết
   đó dính vào nhau. 28px là mức chúng còn đọc ra hình mà chưa lấn át dòng chữ.
   Khe cũng nới lên 12px cho cân với icon to hơn. */
.footer-addr-item .ico { width: 28px; height: 28px; margin-top: -2px; }

/* Dải dịch vụ — canh giữa để dòng cuối (ít mục) nằm cân giữa trang.
   Không có dấu gạch ngăn, lý do ghi ở inc/footer.php. */
.footer-serv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--s6);
  row-gap: var(--s1);
  padding-block: var(--s5);
  font-size: var(--t-label);
  line-height: 1.9;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .45);
}

/* Năm khối, nên chọn mốc sao cho ít hàng thừa nhất:
   3 cột → 2 hàng (thừa 1 ô), 2 cột → 3 hàng (thừa 1 ô). Ưu tiên 3 cột lâu nhất
   có thể vì ít hàng hơn, chỉ hạ xuống 2 cột khi cột 3 hẹp tới mức số điện thoại
   và nút Zalo phải rớt xuống hai dòng. */
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s7); }
}
@media (max-width: 560px) {
  /* Xếp dọc TẤT CẢ thì chân trang dài lê thê — 5 người phụ trách cộng 8 dòng
     link nối đuôi nhau. Giữ lưới 2 cột: khối thương hiệu và các cột người
     phụ trách chiếm trọn bề ngang (cần chỗ cho số điện thoại + nút Zalo),
     riêng hai cột LINK thì đứng cạnh nhau — link ngắn, cột hẹp vẫn đọc tốt,
     mà cắt bớt được gần 200px chiều dài. */
  /* row-gap và column-gap tách riêng, KHÔNG dùng 'gap' một giá trị:
     - dọc 40px: khe giữa hai CỤM thông tin (thương hiệu · tư vấn đặt hàng ·
       thiết kế · kế toán · nhóm link). Cụm nào ra cụm nấy, không dính vào nhau
       như hồi để 24px — chỉ hơn khe người→người có 8px nên đọc ra một mạch.
     - ngang 24px: khe giữa hai cột link. Để 40px như chiều dọc thì mỗi cột hụt
       đi 8px bề ngang, tên chính sách vỡ dòng sớm hơn. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--s8);
    column-gap: var(--s6);
  }
  .footer-brand,
  .footer-staff { grid-column: 1 / -1; }

  /* Mỗi người còn HAI hàng thay vì ba: tên đứng chung hàng với số điện thoại,
     email xuống hàng dưới. Năm người thì bớt được thêm chừng 130px.
     Đổi được bằng CSS thuần vì .staff vốn đã là flex — chỉ xoay trục và cho
     dòng email chiếm trọn hàng riêng. */
  .staff {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--s3);
    row-gap: 7px;
  }
  .staff-line:last-child { flex-basis: 100%; }
  /* Khối người đã thấp hơn hẳn nên khe giữa hai người thu về một nấc, giữ
     đúng thứ bậc với khe 7px giữa các dòng bên trong. */
  .staff + .staff { margin-top: var(--s4); }
  /* Bằng ĐÚNG row-gap của lưới ở trên: thiết kế và kế toán nằm chung một ô
     lưới nên không ăn row-gap, phải tự đặt. Không khớp thì hai cụm này sát
     nhau hơn mấy cụm khác, nhìn ra ngay là lệch nhịp. */
  .footer-staff .staff + h3 { margin-top: var(--s8); }

  /* KHÔNG chừa thêm padding-bottom cho thanh nút nổi: body đã chừa sẵn ở khối
     .mobilebar bên dưới. Chừa hai lần thì dưới dòng bản quyền dư một mảng tối
     trống không. */
  /* Cột hẹp: địa chỉ xếp dọc, dải dịch vụ canh trái.
     Canh giữa trên màn hình hẹp làm mỗi dòng thụt vào một kiểu, nhìn lởm chởm. */
  .footer-addr { flex-direction: column; gap: var(--s4); }
  .footer-serv { justify-content: flex-start; column-gap: var(--s5); }
}

/* Máy rất hẹp: trả hai cột link về xếp dọc. Chia đôi bề ngang 340px thì mỗi
   cột còn ~150px, tên chính sách nào cũng vỡ làm hai dòng — 5 link thành 10
   dòng, dài hơn cả khi để nguyên một cột. Chia cột chỉ lãi khi cột đủ rộng
   cho mỗi link nằm gọn một dòng. */
@media (max-width: 380px) {
  .footer-links { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Bong bóng liên hệ
   Hai nút tròn nổi ở góc phải dưới. Màu nền lấy đúng màu thương hiệu của từng
   bên (Zalo xanh đặc, Messenger dải chuyển xanh→tím→hồng), dấu hiệu bên trong
   để trắng — đúng cách hai hãng bày nút chat của họ, khách nhận ra ngay mà
   không cần chữ.

   z-index 65: nằm dưới thanh nav thả xuống (60 là nav, 80 là panel) nhưng
   trên mọi nội dung thường, và thấp hơn thanh CTA mobile (70) để không bao
   giờ đè lên nút bấm ở đó. */
.bubbles {
  position: fixed;
  right: var(--s5);
  /* Cách đáy 80px = gấp đôi nấc --s8. Vượt khỏi thang khoảng cách của site
     (dừng ở 48px) nên nhân từ token thay vì ghi số rời, đổi thang một lần là
     chỗ này ăn theo. */
  bottom: calc(var(--s8) * 2);
  z-index: 65;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.bub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.bub:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .3);
}
.bub .ico { width: 32px; height: 32px; }
/* Chữ "Zalo" bẹt ngang nên khung icon đã siết sát chữ (viewBox riêng, xem
   tools/extract-icons.mjs) — cho rộng hơn một nhịp để cân với dấu Messenger. */
.bub--zalo { background: #0068FF; }
.bub--zalo .ico { width: 34px; }
.bub--mess { background: linear-gradient(45deg, #0099FF 0%, #A033FF 55%, #FF5280 100%); }
/* Hai nút này KHÔNG phải kênh của hãng ngoài nên không mượn màu hãng nào:
   gọi điện lấy đỏ thương hiệu như mọi nút hành động chính của site, bản đồ
   lấy màu mực trung tính. Bốn vòng tròn rực rỡ chồng nhau sẽ rối mắt. */
.bub--call { background: var(--red); }
.bub--map  { background: var(--ink); }
.bub--call .ico,
.bub--map .ico { width: 26px; height: 26px; }

/* Khổ điện thoại KHÔNG dùng bong bóng — thanh CTA bên dưới đã gom đủ bốn kênh.
   Quy tắc ẩn đặt trong khối @media của .mobilebar để hai thứ nằm liền nhau,
   ai sửa thanh đó thấy ngay ràng buộc này. */

/* ---------------------------------------------------------------- Thanh CTA mobile
   Thanh NỔI bo tròn, chừa lề hai bên và cách đáy — không còn dán sát mép như
   bản cũ. Kiểu nổi này ăn nhịp với các thẻ bo tròn của site, và chừa ra một
   dải nền cho thấy trang vẫn cuộn tiếp bên dưới.

   Nền kính mờ mượn đúng công thức của thanh nav ở đầu trang (nền trắng đục +
   backdrop-filter) để hai thanh trên–dưới là một cặp.

   Mỗi kênh một chip tròn màu thương hiệu — Zalo xanh, Messenger chuyển sắc,
   gọi đỏ, bản đồ mực. Khách nhận ra kênh bằng màu trước cả khi đọc chữ. */
.mobilebar { display: none; }
@media (max-width: 860px) {
  .mobilebar {
    position: fixed;
    left: var(--s3); right: var(--s3);
    bottom: calc(var(--s3) + env(safe-area-inset-bottom));
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10px 4px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
  }
  .mobilebar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--w-semibold);
    letter-spacing: .01em;
    color: var(--g600);
  }
  /* Chip tròn đựng dấu hiệu của kênh */
  .mb-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: #fff;
    transition: transform .18s var(--ease);
  }
  .mobilebar a:active .mb-ico { transform: scale(.92); }
  .mb-ico .ico { width: 21px; height: 21px; }
  .mb-ico--zalo { background: #0068FF; }
  .mb-ico--zalo .ico { width: 25px; }   /* chữ "Zalo" bẹt ngang, cần rộng hơn */
  .mb-ico--mess { background: linear-gradient(45deg, #0099FF 0%, #A033FF 55%, #FF5280 100%); }
  .mb-ico--map  { background: var(--ink); }
  /* Nút chính: vẫn đúng cỡ như ba nút kia để hàng chip thẳng nhau, chỉ thêm
     quầng đỏ và chữ đỏ đậm cho nổi lên — phóng to riêng một chip là cả hàng
     lệch nhịp. */
  .mb-ico--call {
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(225, 29, 46, .13), 0 6px 14px rgba(225, 29, 46, .34);
  }
  .mobilebar a.is-primary { color: var(--red); font-weight: var(--w-bold); }

  /* Chừa chỗ đúng bằng chiều cao thật của thanh: 10+40+6+13+10 = 79, cộng
     khe đáy 12 và lề an toàn máy có tai thỏ. */
  body { padding-bottom: calc(103px + env(safe-area-inset-bottom)); }

  /* Mọi kênh đã nằm trong thanh này rồi — bong bóng nổi bỏ hẳn ở khổ điện
     thoại, giữ lại là vừa trùng nội dung vừa che mất trang. */
  .bubbles { display: none; }
}

/* ---------------------------------------------------------------- Menu thả xuống */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--g700);
}
/* Trạng thái TĨNH khai trước... */
.nav-drop-btn.is-current { color: var(--ink); }
/* ...trạng thái TƯƠNG TÁC khai sau. Cả ba selector đúng bằng nhau về độ đặc
   hiệu — (0,2,0): lớp + pseudo-class, lớp + attribute, hai lớp — nên chỉ THỨ TỰ
   KHAI BÁO mới quyết định ai thắng. Để .is-current nằm dưới như bản cũ thì trên
   trang sản phẩm nút không bao giờ đổi màu lúc rê chuột hay lúc panel mở, mà đó
   đúng là trang khách hay mở menu nhất. */
.nav-drop-btn:hover,
.nav-drop-btn[aria-expanded="true"] { color: var(--red); }
.nav-drop-btn .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.nav-drop-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  /* Nới từ 860px lên khổ rộng khi nhóm sản phẩm tăng từ 3 lên 4: giữ 860px thì
     bốn cột mỗi cột chỉ còn ~195px, tên dịch vụ và dòng mô tả vỡ hết.
     Hụt 120px so với .wrap để panel thụt vào trong lề trang một chút, nhìn ra
     là lớp nổi đè lên chứ không phải một dải chạy suốt. Buộc theo --maxw để
     nới bề ngang trang là panel tự nới theo, không phải sửa hai nơi. */
  width: min(94vw, calc(var(--maxw) - 120px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.nav-panel[hidden] { display: none; }
.nav-panel::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, var(--k) 75% 100%);
}

/* Cầu nối vô hình lấp khoảng hở 14px giữa nút và panel.
   Khe đó không thuộc phần tử nào, nên rê chuột từ nút xuống panel là bắn
   pointerleave → panel biến mất ngay giữa lúc người dùng đang với tay tới.
   Rê nhanh thì lọt, rê chậm thì chết — đó là lý do menu lúc được lúc không.
   Vì sao không đặt lên .nav-panel: panel có overflow:hidden — chính nó bo tròn
   hai góc trên của dải CMYK ::before — nên pseudo tràn lên phía trên sẽ bị xén
   sạch. Đặt lên .nav-drop (đã sẵn position:relative) thì con trỏ đi qua khe vẫn
   được tính là "đang ở trong .nav-drop", pointerleave không bắn.
   Rộng bằng PANEL chứ không bằng nút: người nhắm cột trái đi chéo, ra khỏi vùng
   ~95px của nút khi vẫn còn trong khe.
   Chỉ dựng khi ĐANG MỞ (JS gắn .is-open): để thường trực thì dải vô hình rộng
   cả nghìn pixel này nằm vắt ngang ngay dưới thanh nav và ăn mất cú bấm vào
   nội dung bên dưới. Bọc media query để trên mobile — nơi panel là position:static —
   nó không tồn tại mà đè lên link đầu tiên. */
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {
  .nav-drop.is-open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(94vw, calc(var(--maxw) - 120px));   /* bằng đúng bề ngang panel */
    height: 16px;               /* 14px khe + 2px dự phòng khi phóng to lẻ % */
    transform: translateX(-50%);
  }
}
.nav-panel-in {
  display: grid;
  /* Bốn cột đúng bằng bốn nhóm trong data/nhom-san-pham.php. Để 3 cột thì
     nhóm thứ tư rớt xuống hàng dưới, chừa hai ô trống bên cạnh. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  padding: var(--s6);
}
.nav-col-title {
  margin-bottom: var(--s3);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-col li + li { margin-top: 2px; }
.nav-col a, .nav-col .nav-soon {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background .15s var(--ease);
}
.nav-col a:hover { background: var(--red-subtle); }
.nav-col a[aria-current="page"] { background: var(--paper-tint); }
.nav-col .ico { width: 19px; height: 19px; color: var(--red); margin-top: 2px; }
.nav-col b { display: block; font-size: var(--t-sm); font-weight: var(--w-semibold); color: var(--ink); }
.nav-col small { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.4; margin-top: 1px; }
.nav-col .nav-soon { opacity: .55; }
.nav-col .nav-soon .ico { color: var(--g400); }

.nav-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  background: var(--paper-sub);
  border-top: 1px solid var(--line);
}

/* Trên màn hình hẹp: panel trở thành danh sách xổ trong menu, không nổi lên trên */
@media (max-width: 1000px) {
  .nav-drop { width: 100%; }
  .nav-drop-btn {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-body);
  }
  .nav-panel {
    position: static;
    transform: none;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--paper-sub);
  }
  .nav-panel::before { display: none; }
  .nav-panel-in { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s4); }
  .nav-panel-foot { padding: var(--s4); }
}

/* Mạng xã hội ở chân trang */
.footer-social { display: flex; gap: var(--s2); margin-top: var(--s5); }
.footer-social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, .7);
  transition: all .18s var(--ease);
}
.footer-social a:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
}
.footer-social .ico { width: 19px; height: 19px; margin: 0; }