/* =========================================================
   BĐS PHÚ THANH – Stylesheet
   ---------------------------------------------------------
   BẢNG MÀU LẤY TỪ LOGO: nền nâu gradient + chữ vàng gold.
   Header/nav/footer dùng đúng dải nâu của logo để logo vàng nổi bật
   (trước đây đặt trên nền trắng nên bị chìm). Vùng nội dung giữ nền
   kem sáng cho dễ đọc danh sách bất động sản.
   ========================================================= */

/* ------------------ Biến & Reset ------------------ */
:root {
  /* ================= DẢI NÂU GỐC =================
     Toàn site chỉ có MỘT thang nâu, lấy đúng ba điểm dừng của dải gradient
     header. Mọi màu nâu khác trong file đều phải quy về ba biến này — trước
     đây header chạy một thang (#7a4f1d…#4c2f0e) còn thân trang và footer
     chạy thang khác (#4a3317 / #2e1d0d), nhìn ra hai bộ màu khác nhau. */
  --primary-light: #7a4f1d; /* đỉnh dải — nhãn, gradient phụ */
  --primary: #5e3b13; /* giữa dải — nút chính, tiêu đề mục */
  --primary-dark: #3a2410; /* đáy dải — footer, trạng thái hover */

  /* Dải dùng cho HEADER và FOOTER: một gradient duy nhất, không lặp lại và
     không tô riêng cho từng thanh con, nếu không sẽ sinh mối ghép loang. */
  --brand-band: linear-gradient(180deg, #7a4f1d 0%, #5e3b13 62%, #4c2f0e 100%);

  /* ================= VÀNG =================
     Một mã vàng duy nhất cho cả site. Trước đây header dùng #ffd435 còn thân
     trang dùng #ffcd00 — lệch nhau đủ để thấy khi hai thứ đứng cạnh. */
  --accent: #ffd435;
  /* Vàng đậm, dành riêng cho CHỮ trên nền sáng. Vàng gold trên nền trắng chỉ
     đạt ~1.7:1 nên KHÔNG bao giờ dùng --accent làm màu chữ trên nền sáng —
     trước đây ba trạng thái hover và một nhãn ở trang Giới thiệu mắc đúng
     lỗi này, chỉ đạt 2.0:1. */
  --accent-text: #856519;

  /* Nút vàng: một kiểu duy nhất, dùng chung cho nút "Ký gửi BĐS" trên header
     lẫn mọi nút .btn-accent trong thân trang. */
  --cta-bg: linear-gradient(180deg, #ffd84a, #f2b705);
  --cta-bg-hover: linear-gradient(180deg, #ffe066, #ffc61a);
  --cta-text: #2a1a08;
  --cta-shadow: 0 4px 14px rgba(242, 183, 5, 0.28);

  /* ---- Riêng của HEADER ---- */
  --hd-bg: var(--brand-band);
  --hd-topbar-text: #f2e4cb; /* nằm ở đoạn sáng nhất nên phải sáng theo */
  --hd-nav-menu-bg: #533410; /* menu xổ trên điện thoại (nằm ngoài dải) */
  --hd-nav-sub-bg: #40280d; /* nền submenu khi menu gập trên điện thoại */
  --hd-text: #fff6e6; /* chữ menu */
  --hd-text-muted: #eadcc2; /* nhãn phụ: "Hotline tư vấn" */
  --hd-hotline: #ffffff; /* số hotline — trắng, không tranh vàng với logo */
  --hd-gold: var(--accent);
  --hd-hairline: rgba(255, 214, 102, 0.16);
  --hd-wash: rgba(255, 246, 230, 0.1); /* nền mờ khi rê chuột lên menu */

  /* Lớp phủ dùng chung cho .hero và .page-banner. Nền giờ là ảnh chụp thật
     chứ không còn là hoạ tiết SVG dày đặc, nên không cần đè mạnh như trước:
     hạ độ phủ và giảm blur để còn nhìn ra khung cảnh, vẫn giữ nửa trái đủ
     tối cho chữ. Đã đo lại tương phản trên pixel nền thật sau khi đổi. */
  --scrim: linear-gradient(
    100deg,
    rgba(26, 16, 6, 0.88) 0%,
    rgba(26, 16, 6, 0.82) 42%,
    rgba(26, 16, 6, 0.55) 72%,
    rgba(26, 16, 6, 0.38) 100%
  );
  --scrim-blur: blur(1.5px) saturate(0.9);

  --danger: #c0392b; /* đỏ ngả nâu cho hợp tông ấm */
  --success: #1c7c46;
  --bg: #faf7f1; /* kem ấm thay vì xám xanh */
  --surface: #ffffff;
  --text: #2b2317; /* chữ nâu đen thay vì xanh đen */
  --muted: #786957;
  --border: #e9e1d4;
  --tint: #f4ede1; /* nền phụ ấm, thay cho var(--tint) xanh nhạt */
  --shadow-sm: 0 1px 3px rgba(46, 29, 13, 0.10);
  --shadow-md: 0 6px 20px rgba(46, 29, 13, 0.12);
  --shadow-lg: 0 14px 40px rgba(46, 29, 13, 0.18);
  --radius: 12px;
  --radius-sm: 8px;
  --container: 1200px;
  --header-h: 159px; /* giá trị khởi đầu; JS đo lại chính xác khi cuộn */
  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Header dính trên cùng nên khi nhảy tới #anchor phải chừa đúng chiều cao
     header, nếu không tiêu đề bị khuất phía sau. --header-h do JS đo lại. */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* Viền vàng khi điều hướng bằng bàn phím (Tab). Chỉ hiện với :focus-visible
   nên người dùng chuột không thấy viền khi bấm. Vàng gold nổi rõ cả trên nền
   kem lẫn nền nâu nên dùng chung một kiểu cho toàn site. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Link "Tới nội dung chính" — ẩn tới khi bấm Tab lần đầu */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* Vùng nội dung chính nhận focus từ skip-link — không vẽ viền quanh cả trang */
#main-content:focus {
  outline: none;
}

/* Nền gradient dự phòng khi ảnh chưa tải */
.img-wrap {
  background: linear-gradient(135deg, #ece0cc 0%, #d8c6a8 100%);
  position: relative;
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------ Nút ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  min-height: 44px; /* đủ lớn để bấm bằng ngón tay trên điện thoại */
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}
/* Phản hồi khi bấm giữ — người dùng cảm nhận nút "ăn" thao tác */
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
}

/* Nút vàng dùng CHUNG một kiểu với nút "Ký gửi BĐS" trên header: cùng
   gradient, cùng bo viên, cùng đổ bóng. Trước đây nút trong thân trang là
   hình chữ nhật vàng phẳng nên đứng cạnh nút header thấy rõ hai kiểu.
   Chữ nâu rất đậm vì chữ trắng trên nền vàng chỉ đạt ~1.7:1. */
.btn-accent {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--cta-shadow);
}
.btn-accent:hover {
  background: var(--cta-bg-hover);
  color: var(--cta-text);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 14px 30px;
  font-size: 16px;
}

/* ------------------ Header ------------------ */
/* position:sticky phải đặt ở #site-header (thẻ bọc do JS đổ nội dung vào).
   Nếu chỉ đặt ở .site-header bên trong thì phần tử dính bị giới hạn trong
   thẻ bọc cao đúng bằng chính nó => cuộn xuống là header trôi mất. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Gradient đặt Ở ĐÂY, một lần duy nhất cho cả header. Các thanh con bên
   trong không được tô nền, nếu không là lại sinh mối ghép. */
.site-header {
  background: var(--hd-bg);
  box-shadow: var(--shadow-md);
}
.header-main {
  background: none;
}

/* Khi cuộn xuống, header tự thu gọn (ẩn topbar, hạ chiều cao logo) để nhường
   chỗ cho nội dung — JS gắn class .scrolled và đo lại --header-h. */
.topbar {
  background: none;
  color: var(--hd-topbar-text);
  font-size: 12.5px;
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.site-header.scrolled .topbar {
  max-height: 0;
  opacity: 0;
}
.site-header.scrolled .header-main .container {
  height: 66px;
}
.site-header.scrolled .logo-img {
  height: 52px;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
}
.topbar a {
  color: var(--hd-topbar-text);
  transition: color 0.2s;
}
.topbar a:hover {
  color: var(--hd-gold);
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.topbar-right .sep {
  opacity: 0.4;
}

.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 86px;
  gap: 20px;
  transition: height 0.25s ease;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.35s ease;
}
/* Vệt sáng quét ngang logo theo chu kỳ, như ánh sáng lướt qua mặt kim loại.
   Chọn kiểu này thay vì cho logo nhấp nhô: header dính trên cùng nên logo
   luôn trong tầm mắt, thứ gì động liên tục sẽ gây mỏi; vệt sáng chỉ chạy
   ~1,6s rồi nghỉ ~4s nên vừa đủ nhận ra là trang "sống".

   Dùng chính file logo làm mask để vệt sáng chỉ hiện trên nét vàng của
   logo, không quét thành một dải chữ nhật trên vùng trong suốt. */
.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 44%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0) 56%
  );
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-mask: url("../assets/logo.png") center / auto 100% no-repeat;
  mask: url("../assets/logo.png") center / auto 100% no-repeat;
  animation: logo-shine 5.5s ease-in-out infinite;
}
@keyframes logo-shine {
  0%,
  71% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}
/* Rê chuột: logo nhích lên và sáng thêm một chút, đủ để thấy nó bấm được */
.logo:hover {
  transform: translateY(-2px);
}
.logo:hover .logo-img {
  filter: brightness(1.08);
}
/* Logo là ảnh lockup hoàn chỉnh (mái nhà T&T + PHUTHANH + PHÚ THANH T&T
   GROUP) nên không kèm chữ bên cạnh. Chỉ đặt chiều cao, để rộng tự co theo
   tỉ lệ gốc 945x508 — .header-main cao 86px, chừa 9px trên dưới. */
.logo-img {
  height: 68px;
  width: auto;
  display: block;
  transition: height 0.25s ease, filter 0.35s ease;
}

.header-contact {
  display: flex;
  align-items: center;
  gap: 22px;
}
/* Khối hotline là link gọi trực tiếp, không chỉ là chữ trang trí */
.hotline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}
/* Nằm trên nền nâu nên chữ phải sáng: nhãn màu kem, số máy màu vàng gold */
.hotline:hover {
  background: rgba(255, 255, 255, 0.1);
}
.hotline .ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 246, 230, 0.1);
  display: grid;
  place-items: center;
  color: #e9d9ba;
  font-size: 16px;
}
.hotline small {
  display: block;
  font-size: 11.5px;
  color: var(--hd-text-muted);
}
.hotline b {
  font-size: 18px;
  font-weight: 800;
  color: var(--hd-hotline);
  letter-spacing: 0.3px;
}

/* Nút gọi rút gọn — chỉ hiện trên điện thoại, nơi khối hotline đầy đủ bị ẩn.
   Số hotline là thông tin quan trọng nhất của web BĐS, không được biến mất. */
.header-call {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--cta-bg);
  color: var(--cta-text);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  min-height: 44px;
  border-radius: 999px;
  box-shadow: var(--cta-shadow);
  white-space: nowrap;
}

/* Nav */
/* Không tô nền — để lộ đoạn cuối của dải gradient. Chỉ giữ viền dưới để
   khép đáy header: nhiều trang có banner nâu tối ngay bên dưới, không có
   nét này thì header và banner dính thành một mảng tối liền. */
.main-nav {
  background: none;
  border-bottom: 1px solid rgba(255, 214, 102, 0.22);
}
.main-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-menu {
  display: flex;
}
.nav-menu > li > a {
  display: block;
  padding: 11px 16px;
  color: var(--hd-text);
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  position: relative;
}
.nav-menu > li {
  position: relative;
}
.nav-menu > li:hover > a,
.nav-menu > li:focus-within > a {
  background: var(--hd-wash);
  color: var(--hd-gold);
}
/* Mục đang xem: chữ vàng + gạch chân vàng 2px. Dùng inset box-shadow chứ
   không dùng ::after vì pseudo-element đó đã dành cho mũi tên ▾ của mục có
   submenu, và cũng không dùng border để khỏi làm lệch chiều cao dòng. */
.nav-menu > li > a.active {
  color: var(--hd-gold);
  box-shadow: inset 0 -2px 0 var(--hd-gold);
}
.nav-menu > li.has-sub > a::after {
  content: "▾";
  margin-left: 6px;
  font-size: 11px;
}

/* Nút gập submenu — chỉ dùng trên mobile, ẩn ở desktop (hover đã đủ) */
/* Neo theo dòng menu cha (top:0 + chiều cao tự tính), KHÔNG dùng height:100%
   vì khi submenu mở ra thì <li> cao lên và mũi tên bị trôi xuống giữa. */
.sub-toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  padding: 12px 0;
  line-height: 1.2;
  background: none;
  border: none;
  border-left: 1px solid var(--hd-hairline);
  color: var(--hd-text);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.nav-menu > li.open > .sub-toggle {
  transform: rotate(180deg);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 20;
}
.nav-menu > li.has-sub:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 11px 18px;
  color: var(--text);
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.submenu a:hover {
  background: var(--tint);
  color: var(--primary);
  padding-left: 24px;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Nút "Ký gửi BĐS" — hành động chính của header nên tách hẳn khỏi dải nâu
   bằng viên vàng bo tròn. Chỉ khoanh trong .nav-cta, các nút .btn-accent
   còn lại trên site giữ nguyên kiểu cũ. */
/* Kiểu nút đã nằm ở .btn-accent dùng chung; ở đây chỉ thu nhỏ cho vừa thanh
   nav cao 38px. */
.nav-cta .btn-accent {
  font-size: 13.5px;
  padding: 8px 20px;
  min-height: 38px;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--hd-text);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  padding: 11px 4px;
  min-height: 44px;
}
.menu-toggle .bars {
  font-size: 22px;
  line-height: 1;
}
/* Đổi ☰ thành ✕ khi menu đang mở để người dùng biết cách đóng lại */
.menu-toggle[aria-expanded="true"] .bars::before {
  content: "✕";
}
.menu-toggle .bars::before {
  content: "☰";
}

/* ------------------ Hero + Search ------------------ */
/* Nền hero là hơn 2.000 ô cửa sổ vàng tương phản cao xếp dày — để nguyên thì
   mắt bị nhiễu và chữ đè lên gần như không đọc được. Xử lý bằng hai lớp:
   làm mờ ảnh cho hoạ tiết tan thành mảng sáng mềm, rồi phủ một lớp tối
   nghiêng, đậm ở nửa trái nơi đặt chữ và nhạt dần sang phải để vẫn nhìn ra
   hình thành phố. */
.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  color: #fff;
  background: #201408; /* nền dự phòng khi ảnh chưa tải xong */
  overflow: hidden;
}
/* scale(1.06) để mép ảnh không bị hở viền sau khi blur */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/hero.jpg?v=20260815j") center/cover;
  filter: var(--scrim-blur);
  transform: scale(1.06);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.hero .container {
  position: relative;
  z-index: 1;
}
.hero-inner {
  padding: 60px 0 130px;
  max-width: 680px;
}
.hero h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
}
.hero h1 span {
  color: var(--hd-gold);
}
/* Dùng màu tường minh thay cho opacity: opacity làm chữ pha vào đúng cái
   hoạ tiết đang gây nhiễu, còn màu cố định thì kiểm soát được tương phản. */
.hero p {
  font-size: 18px;
  color: #ece0cd;
  margin-bottom: 26px;
}
.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-stats .num {
  font-size: 30px;
  font-weight: 800;
  color: var(--hd-gold);
}
.hero-stats small {
  color: #d6c6ac;
}

/* Search box */
.search-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  margin-top: -90px;
  position: relative;
  z-index: 5;
}
.search-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.search-tab {
  padding: 9px 20px;
  border-radius: 30px;
  border: none;
  background: var(--tint);
  color: var(--primary);
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.search-tab.active {
  background: var(--primary);
  color: #fff;
}
.search-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.field select,
.field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: #fff;
}
.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ------------------ Section chung ------------------ */
.section {
  padding: 56px 0;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
  flex-wrap: wrap;
}
.section-head .titles small {
  color: var(--accent-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
}
.section-head h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
}
.section-head .link-more {
  color: var(--primary);
  font-weight: 600;
}
.section-head .link-more:hover {
  color: var(--accent-text);
}

.section-alt {
  background: #f2eade;
}

/* ------------------ Grid & Card ------------------ */
.grid {
  display: grid;
  gap: 24px;
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
/* Cả thẻ là vùng bấm được (link tiêu đề phủ toàn thẻ) — trên điện thoại
   không phải nhắm đúng dòng chữ nhỏ nữa. Nút lưu tin nằm trên (z-index 2). */
.card-body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 30px;
}
/* Nhãn vàng phải đi với chữ nâu đậm, chữ trắng trên vàng không đọc được */
.card-badge.sale {
  background: var(--accent);
  color: var(--primary-dark);
}
.card-badge.rent {
  background: var(--primary-light);
}
/* Nút lưu tin: là <button> thật, có trạng thái và lưu vào localStorage.
   Trước đây chỉ là icon trái tim tĩnh — bấm không có gì xảy ra. */
.card-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  color: var(--danger);
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
  z-index: 2;
}
.card-fav:hover {
  background: #fff;
  transform: scale(1.1);
}
.card-fav[aria-pressed="true"] {
  background: var(--danger);
  color: #fff;
}
.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 45px;
}
.card-body h3 a:hover {
  color: var(--primary);
}
/* Địa chỉ 1 hay 2 dòng đều chiếm cùng chiều cao -> giá và thông số của các
   thẻ cạnh nhau luôn thẳng hàng, nhìn gọn mắt hơn. */
.card-loc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-height: 42px;
}
.card-price {
  font-size: 19px;
  font-weight: 800;
  color: var(--danger);
  margin-bottom: 12px;
}
.card-price small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.card-meta {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  font-size: 13px;
  color: var(--muted);
}
.card-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Card dự án */
.project-card .card-media {
  aspect-ratio: 16 / 10;
}
/* Giữ tag trên 1 dòng để tiêu đề các thẻ dự án bắt đầu cùng một độ cao */
.project-tags {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-bottom: 10px;
  height: 24px;
}
.project-tags span {
  font-size: 11.5px;
  background: var(--tint);
  color: var(--primary);
  padding: 3px 10px;
  border-radius: 30px;
  font-weight: 600;
}

/* Card tin tức */
.news-card .card-media {
  aspect-ratio: 16 / 9;
}
/* Tiêu đề bài viết thường dài hơn tiêu đề tin đăng -> cho 3 dòng thay vì 2 */
.news-card .card-body h3 {
  -webkit-line-clamp: 3;
  min-height: 68px;
}
.news-cat {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.news-date {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 10px;
}

/* ------------------ Services / Why us ------------------ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature {
  text-align: center;
  padding: 30px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.feature .ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 28px;
}
.feature h3 {
  font-size: 17px;
  color: var(--primary);
  margin-bottom: 8px;
}
.feature p {
  font-size: 14px;
  color: var(--muted);
}

/* Chip đối tác */
.partner-chip {
  padding: 14px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  color: var(--primary);
  font-size: 16px;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}
.partner-chip:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  transform: translateY(-2px);
}

/* ------------------ Page header (banner phụ) ------------------ */
/* Cùng cách xử lý như .hero: banner.svg cũng là hoạ tiết cửa sổ dày đặc,
   làm mờ rồi phủ tối nghiêng để tiêu đề và breadcrumb đọc thoải mái. */
.page-banner {
  position: relative;
  background: #201408;
  color: #fff;
  padding: 46px 0;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/banner.jpg?v=20260815j") center/cover;
  filter: var(--scrim-blur);
  transform: scale(1.06);
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.page-banner .container {
  position: relative;
  z-index: 1;
}
.page-banner h1 {
  font-size: 34px;
  font-weight: 800;
}
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 14px;
  opacity: 0.9;
  margin-top: 8px;
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb .sep {
  opacity: 0.5;
}

/* ------------------ Layout danh sách + sidebar ------------------ */
.listing-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: start;
}
.sidebar {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.sidebar h3 {
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}
/* Nút gập bộ lọc — chỉ hiện ở màn hình nhỏ (xem media query ≤900px) */
.filter-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 12px 4px;
  min-height: 44px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}
.filter-toggle .caret {
  transition: transform 0.2s ease;
}
.sidebar.open .filter-toggle .caret {
  transform: rotate(180deg);
}

.filter-group {
  margin-bottom: 18px;
}
.filter-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.filter-group select,
.filter-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  background: #fff;
}

.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.list-toolbar .count {
  color: var(--muted);
  font-size: 14px;
}
.list-toolbar .count b {
  color: var(--primary);
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty .ic {
  font-size: 46px;
  margin-bottom: 12px;
}
.empty-actions {
  margin-top: 16px;
}

/* ------------------ Chi tiết BĐS / Dự án ------------------ */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}
.gallery-main {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-sm);
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
/* Ảnh nhỏ là <button> để chuyển ảnh được bằng bàn phím (Tab + Enter) */
.gallery-thumbs .img-wrap {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
  display: block;
  width: 100%;
}
.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumbs .img-wrap.active {
  border-color: var(--accent);
}

.detail-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  margin: 24px 0 8px;
}
.detail-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--danger);
  margin: 16px 0;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.spec {
  background: var(--tint);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.spec small {
  color: var(--muted);
  font-size: 12.5px;
}
.spec b {
  display: block;
  font-size: 16px;
  color: var(--primary);
  margin-top: 3px;
}
.detail-section {
  margin: 28px 0;
}
.detail-section h2 {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
}
.feature-list li::before {
  content: "✓";
  color: #2a9d5c;
  font-weight: 800;
}

/* Card liên hệ tư vấn (sticky) */
.contact-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.contact-card .agent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.contact-card .avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
}
.contact-card .agent b {
  color: var(--primary);
}
.contact-card .agent small {
  display: block;
  color: var(--muted);
}

/* ------------------ Form ------------------ */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-group label .req {
  color: var(--danger);
}
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 15px;
  background: #fff;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 51, 23, 0.14);
}
textarea.form-control {
  resize: vertical;
  min-height: 110px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-note {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: #e8f6ee;
  color: #1c7c46;
  font-size: 14px;
  margin-bottom: 16px;
  display: none;
}
.form-note.show {
  display: block;
}
/* Biến thể báo lỗi — cùng ô đó nhưng đổi sang tông cảnh báo, để khách không
   nhầm một thông báo lỗi với nền xanh "đã gửi thành công". */
.form-note--error {
  background: #fdecea;
  color: #97271b;
  border-left: 4px solid var(--danger);
}

/* ------------------ Liên hệ 2 cột ------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.info-list li {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}
.info-list .ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.info-list b {
  color: var(--primary);
}
.info-list p {
  color: var(--muted);
  font-size: 14.5px;
}
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-sm);
  margin-top: 24px;
  background: #e8dcc8;
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------ CTA dải ------------------ */
.cta-band {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  padding: 46px 0;
}
.cta-band .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 {
  font-size: 26px;
  font-weight: 800;
}
.cta-band p {
  opacity: 0.9;
}

/* ------------------ Job / tuyển dụng ------------------ */
.job-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  border-left: 4px solid var(--accent);
}
.job-card h3 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 8px;
}
.job-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--muted);
}
.job-meta span {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* ------------------ Footer ------------------ */
/* Footer dùng ĐÚNG dải nâu của header, chỉ lật chiều: header sáng ở đỉnh rồi
   tối dần xuống, footer tối ở đỉnh rồi sáng dần xuống đáy trang. Hai đầu
   trang khép lại bằng cùng một dải nên đọc ra một bộ màu, không phải hai. */
.site-footer {
  background: linear-gradient(180deg, #4c2f0e 0%, #5e3b13 38%, #7a4f1d 100%);
  color: #eadcc2;
  padding-top: 50px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 34px;
  padding-bottom: 36px;
}
.footer-col h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 16px;
}
.footer-col p,
.footer-col li {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.6;
}
.footer-col a:hover {
  color: var(--accent);
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
/* Logo vàng gold trên nền footer nâu đậm (--primary-dark) tương phản tốt,
   ảnh có nền trong suốt nên không lộ khung trắng. */
.footer-logo .logo-img {
  height: 76px;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: background 0.2s;
}
.footer-social a:hover {
  background: var(--accent);
  color: var(--primary-dark);
}
.footer-contact li {
  display: flex;
  gap: 10px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
}
/* Dòng ghi công: sáng hơn chữ xung quanh + gạch chân để nhận ra là link,
   vì nó nằm giữa một câu chứ không đứng riêng thành một mục. */
.footer-bottom a {
  color: #fff6e6;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}
.footer-bottom a:hover {
  color: var(--accent);
}

/* ------------------ Nút nổi (hotline/zalo) ------------------ */
.float-btns {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 90;
}
.float-btns a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  box-shadow: var(--shadow-md);
  animation: pulse 2s infinite;
}
/* Nút gọi dùng vàng gold của logo (icon nâu đậm) thay vì xanh lá cho đồng bộ */
.float-btns .fb-phone {
  background: var(--accent);
  color: var(--primary-dark);
}
.float-btns .fb-zalo {
  background: #0068ff;
  font-size: 15px;
  font-weight: 800;
}
/* Nút "lên đầu trang" chỉ xuất hiện khi đã cuộn xuống — đỡ che nội dung
   và đỡ rối mắt khi khách vừa vào trang. */
.float-btns .fb-top {
  background: var(--primary);
  animation: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.float-btns.scrolled .fb-top {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 205, 0, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(255, 205, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 205, 0, 0);
  }
}

/* ------------------ Thanh hành động dưới đáy (mobile) ------------------
   Trên điện thoại, 3 việc khách hay làm nhất luôn nằm trong tầm ngón cái:
   gọi điện, chat Zalo, ký gửi. Chỉ hiện ở ≤768px. */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(16, 42, 67, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px;
  min-height: 58px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
}
.mobile-bar a .ic {
  font-size: 19px;
  line-height: 1;
}
.mobile-bar a.primary {
  color: var(--danger);
}
.mobile-bar a:active {
  background: var(--tint);
}

/* ------------------ Toast thông báo ngắn ------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 20px);
  z-index: 120;
  background: var(--primary-dark);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ------------------ Pagination ------------------ */
.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 34px;
}
.pagination button {
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: all 0.2s;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}
.pagination button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ------------------ Prose (nội dung bài viết) ------------------ */
.prose {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.prose p {
  margin-bottom: 16px;
}
.prose h2,
.prose h3 {
  color: var(--primary);
  margin: 24px 0 12px;
}
.prose a {
  color: var(--primary-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover {
  color: var(--accent-text);
}
/* Danh sách gạch đầu dòng trong bài viết */
.prose .dot-list {
  margin: 0 0 16px 20px;
  list-style: disc;
}
.prose .dot-list li {
  margin-bottom: 8px;
}

/* Lưới ảnh minh hoạ trong bài — tự xếp 2 cột, về 1 cột trên điện thoại */
.article-figs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0 24px;
}
.article-figs figure {
  margin: 0;
}
.article-figs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform 0.25s ease;
}
.article-figs a:hover img {
  transform: scale(1.03);
}
.article-figs figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}
@media (max-width: 560px) {
  .article-figs {
    grid-template-columns: 1fr;
  }
}

/* Lưới bài viết pháp lý ở trang phap-ly.html */
.legal-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 18px;
}
@media (max-width: 640px) {
  .legal-articles {
    grid-template-columns: 1fr;
  }
}

/* Hộp ghi chú / nguồn tham khảo cuối bài */
.note-box {
  background: #f8f3ea;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #444;
}

/* ------------------ Responsive ------------------ */
@media (max-width: 1024px) {
  /* Thu gọn menu để 9 mục không tràn ở dải màn hình trung bình */
  .nav-menu > li > a {
    padding: 11px 10px;
    font-size: 12.5px;
  }
  .nav-cta .btn {
    padding: 8px 14px;
    font-size: 12.5px;
  }
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-fields {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-fields .field:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .listing-layout,
  .detail-layout,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .sidebar,
  .contact-card {
    position: static;
  }
  /* Khối hotline đầy đủ không đủ chỗ -> đổi sang nút gọi rút gọn */
  .hotline {
    display: none;
  }
  .header-call {
    display: inline-flex;
  }
  /* Bộ lọc gập lại, kết quả lên trước */
  .filter-toggle {
    display: flex;
  }
  .sidebar.collapsible h3,
  .sidebar.collapsible #filter-form {
    display: none;
  }
  .sidebar.collapsible.open #filter-form {
    display: block;
  }
  .sidebar.collapsible {
    padding: 6px 18px;
  }
  .sidebar.collapsible.open {
    padding: 6px 18px 22px;
  }
}

@media (max-width: 768px) {
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero h1 {
    font-size: 30px;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--hd-nav-menu-bg);
    box-shadow: var(--shadow-md);
    z-index: 50;
    /* Menu 9 mục có thể dài hơn màn hình -> cho cuộn trong menu */
    max-height: calc(100vh - var(--header-h) - 10px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-menu.open {
    display: flex;
  }
  .main-nav .container {
    position: relative;
    flex-wrap: wrap;
  }
  .nav-menu > li {
    width: 100%;
    border-bottom: 1px solid var(--hd-hairline);
  }
  .nav-menu > li > a {
    padding: 14px 18px;
    font-size: 14.5px;
  }
  /* Menu xổ dọc: gạch chân vàng nằm sát đường kẻ ngăn dòng nên không rõ
     đang đánh dấu mục nào — đổi sang vạch vàng dọc bên trái. */
  .nav-menu > li > a.active {
    box-shadow: inset 3px 0 0 var(--hd-gold);
  }
  /* Mũi tên ▾ dính sau chữ không bấm được -> thay bằng nút gập riêng,
     link chính vẫn mở được trang danh mục. */
  .nav-menu > li.has-sub > a::after {
    content: none;
  }
  .sub-toggle {
    display: block;
  }
  /* Submenu mặc định gập lại, bấm mũi tên mới mở — trước đây 8 mục con luôn
     bung ra khiến menu dài lê thê. */
  .submenu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: var(--hd-nav-sub-bg);
  }
  .nav-menu > li.open .submenu {
    display: block;
  }
  .submenu a {
    color: #e2d3b8;
    background: transparent;
    border-color: rgba(255, 214, 102, 0.1);
    padding: 12px 18px 12px 32px;
  }
  .submenu a:hover {
    background: var(--hd-wash);
    color: var(--hd-gold);
    padding-left: 32px;
  }
  .nav-cta {
    display: none;
  }
  .topbar {
    display: none;
  }

  /* Thanh hành động dưới đáy thay cho nút nổi gọi/zalo */
  .mobile-bar {
    display: block;
  }
  .float-btns .fb-phone,
  .float-btns .fb-zalo {
    display: none;
  }
  .float-btns {
    bottom: 74px;
  }
  body {
    padding-bottom: 62px; /* chừa chỗ cho thanh dưới đáy, không che footer */
  }

  /* iOS tự phóng to trang khi focus vào ô nhập cỡ chữ < 16px */
  .form-control,
  .field select,
  .field input,
  .filter-group select,
  .filter-group input {
    font-size: 16px;
    min-height: 46px;
  }
}

@media (max-width: 560px) {
  .grid-4,
  .grid-3,
  .grid-2,
  .feature-grid,
  .footer-grid,
  .form-row {
    grid-template-columns: 1fr;
  }
  /* Ô tìm kiếm đè lên hero quá nhiều trên màn nhỏ */
  .search-box {
    margin-top: -60px;
    padding: 16px;
  }
  .hero {
    min-height: 420px;
  }
  .hero-inner {
    padding: 40px 0 100px;
  }
  .hero-stats {
    gap: 22px;
  }
  .hero-stats .num {
    font-size: 24px;
  }
  .search-fields {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 26px;
  }
  .section-head h2 {
    font-size: 24px;
  }
  .gallery-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
  .feature-list {
    grid-template-columns: 1fr;
  }
}

/* ------------------ Tôn trọng thiết lập giảm chuyển động ------------------
   Người dùng bật "Reduce motion" trong hệ điều hành (hay bị chóng mặt vì
   hiệu ứng) sẽ thấy trang tĩnh, không nhấp nháy. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover {
    transform: none;
  }
  /* Quy tắc chung ở trên chỉ hạ số vòng lặp về 1, nghĩa là vệt sáng logo vẫn
     chạy một lần. Ẩn hẳn lớp phủ cho người đã tắt hiệu ứng chuyển động. */
  .logo::after {
    display: none;
  }
  .logo:hover {
    transform: none;
  }
}