/* ============================================================================
   home.css — Header + Footer + 12 section trang chủ
   Dịch 1-1 từ mockup "Trang chủ timnhatot.vn.dc.html" (inline style → class).
   Mọi con số ở đây là số ĐO ĐƯỢC trong mockup, không phải ước lượng: đổi số
   nào thì mở mockup đối chiếu số đó.
   Breakpoint mockup: 1139 (giấu nav ngang) · 1023 (tin tức 1 cột) · 767 (mobile).
   ========================================================================== */

/* [hidden] PHẢI thắng mọi class.
   Luật của trình duyệt là `[hidden]{display:none}` — độ ưu tiên thấp nhất, nên bất kỳ
   class nào đặt display (vd .kh-btn-ghost{display:inline-flex}) cũng đè được và phần tử
   vẫn hiện. Đã dính thật: nút "Xem tiếp" lẽ ra ẩn nhưng nằm chình ình cạnh "Mở rộng".
   Khai 1 lần ở đây thay vì bọc [hidden] cho từng class. */
[hidden] { display: none !important; }

/* Khoá cuộn nền khi mở panel/overlay (bài thuốc iOS: fixed + nhớ scrollY).
   overflow:hidden một mình bị Safari iOS phớt lờ với thao tác chạm. */
body.kh-scroll-lock {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   1. HEADER — sticky 60px (đã tính cả đường viền đáy 1px)
   ========================================================================== */
.kh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kh-bg);
  border-bottom: 1px solid var(--kh-line);
  transition: box-shadow .18s;
}
.kh-header.is-scrolled { box-shadow: 0 4px 18px rgba(16, 34, 78, .08); }

.kh-header__inner {
  /* Trừ 1px đường viền đáy: biến --kh-header-h là chiều cao TOÀN BỘ header,
     nhờ vậy mọi chỗ ghim theo biến đó khớp đúng mép dưới, không hụt 1px. */
  height: calc(var(--kh-header-h) - 1px);
  display: flex;
  align-items: center;
  gap: 32px;
}
.kh-logo { display: flex; align-items: center; flex: none; padding: 4px 2px; margin: -4px -2px; }   /* audit: tap 34->42, chữ/logo đứng yên */
.kh-logo img { height: 34px; width: auto; display: block; }

.kh-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kh-nav a {
  color: var(--kh-text-2);
  font-size: 14px;      /* 25/07: 15 → 14 theo yêu cầu */
  font-weight: 500;     /* 25/07: đổi 400 → 500 (chốt lần 2) */
  white-space: nowrap;
  transition: color .15s;
}
.kh-nav a:hover { color: var(--kh-brand); }

.kh-header__actions {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: auto;
}

/* Nút icon phẳng (hamburger + tim của khách) */
.kh-hbtn {
  width: 40px; height: 40px;
  border: none; background: transparent;
  display: grid; place-items: center;
  color: var(--kh-text);
  transition: color .15s;
  padding: 0;
}
.kh-hbtn:hover { color: var(--kh-brand); }
.kh-hbtn--burger { display: none; margin-right: 4px; }
.kh-hbtn--fav { margin-right: 6px; }

.kh-hauth { display: flex; align-items: center; }
.kh-hauth__link {
  height: 40px; padding: 0 12px;
  border: none; background: transparent;
  color: var(--kh-text);
  font-size: 14px; font-weight: 500;    /* 25/07: 14.5 → 14 cho khớp menu */
  white-space: nowrap;
  display: inline-flex; align-items: center;
  transition: color .15s;
}
.kh-hauth__link:hover { color: var(--kh-brand); }
.kh-hauth__sep { width: 1px; height: 20px; background: var(--kh-line-strong); flex: none; }

.kh-hpost {
  height: 40px; padding: 0 20px;
  border: 1px solid var(--kh-line-strong);
  background: var(--kh-bg);
  color: var(--kh-text);
  font-size: 14px; font-weight: 500;    /* 25/07: 14.5/600 → 14/500 theo yêu cầu */
  border-radius: var(--kh-r);
  white-space: nowrap;
  display: inline-flex; align-items: center;
  margin-left: 8px;
  transition: border-color .15s, color .15s;
}
.kh-hpost:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-hpost__ic { display: none; }   /* chỉ bật ở khổ điện thoại — xem @media 767 */

/* ==========================================================================
   1b. BẢNG NHỎ Ở HEADER — tim · chuông · avatar  (.khp)
   Bấm là xem trước ngay tại chỗ; "Xem tất cả" mới sang /tai-khoan/.
   Máy tính: bảng thả xuống neo dưới nút. Điện thoại (<768): bảng TRƯỢT TỪ ĐÁY
   như ứng dụng, vì bảng 372px không lọt màn 390px.
   Markup: header.php · dữ liệu: inc/ndn-header-pop.php · hành vi: js/main.js
   ========================================================================== */
.khp { display: flex; align-items: center; gap: 2px; }
.khp-i { position: relative; }

/* Nút tim + chuông: icon phẳng, nền chỉ hiện khi rê chuột / đang mở.
   (Bản cũ là viên tròn trắng có bóng — trông như 2 nút nổi giữa thanh trắng.) */
.khp-btn {
  position: relative;
  width: 40px; height: 40px;
  border: none; background: transparent;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--kh-text-2);
  padding: 0;
  transition: background .15s, color .15s;
}
.khp-btn:hover { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.khp-i.is-open .khp-btn { background: var(--kh-brand-tint); color: var(--kh-brand); }

.khp-badge {
  position: absolute; top: 1px; right: 0;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--kh-r-full);
  background: var(--kh-danger); color: #fff;
  font-size: 10.5px; font-weight: 600;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--kh-bg);   /* viền trắng tách khỏi icon phía sau */
}

/* Nút tài khoản: CHỈ 1 viên tròn, cùng khổ 40px với tim + chuông.
   (Bản đầu có thêm tên + mũi tên, ăn thêm ~120px bề ngang mà tên đã nằm ngay
   dòng đầu trong bảng — thừa.) */
.khp-user {
  width: 40px; height: 40px;
  padding: 0; border: none; background: transparent;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-left: 2px;
}
.khp-ava {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--kh-brand-tint); color: var(--kh-brand);
  display: grid; place-items: center; overflow: hidden;
  font-size: 12.5px; font-weight: 600;
  transition: box-shadow .15s;
}
.khp-ava img { width: 100%; height: 100%; object-fit: cover; }
.khp-ava--lg { width: 42px; height: 42px; font-size: 15px; }
.khp-user:hover .khp-ava { box-shadow: 0 0 0 2px var(--kh-brand-line); }
.khp-i.is-open .khp-ava { box-shadow: 0 0 0 2px var(--kh-brand); }

/* ---- Khung bảng ---- */
.khp-pop {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 344px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-lg);
  box-shadow: var(--kh-sh-float);
  overflow: hidden;
  z-index: 120;
  animation: khp-drop .16s ease-out;
}
.khp-pop--user { width: 244px; }
@keyframes khp-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.khp-pop__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--kh-line);
}
.khp-pop__head strong { font-size: 14.5px; font-weight: 600; color: var(--kh-ink); }
.khp-pop__n { font-size: 12.5px; color: var(--kh-muted-2); }
.khp-pop__mini {
  border: none; background: transparent; padding: 0;
  font-size: 12.5px; font-weight: 500; color: var(--kh-brand);
}
.khp-pop__mini:hover { color: var(--kh-brand-hover); text-decoration: underline; }
.khp-pop__mini:disabled { color: var(--kh-muted-3); text-decoration: none; }

.khp-tabs { display: flex; gap: 6px; padding: 8px 14px 2px; }
.khp-tabs button {
  height: 28px; padding: 0 13px;
  border: 1px solid var(--kh-line-strong);
  background: var(--kh-bg);
  border-radius: var(--kh-r-full);
  font-size: 12.5px; font-weight: 500; color: var(--kh-text-2);
  transition: background .15s, border-color .15s, color .15s;
}
.khp-tabs button:hover { border-color: var(--kh-brand-line); color: var(--kh-brand); }
.khp-tabs button.is-on {
  background: var(--kh-brand-tint); border-color: var(--kh-brand-line);
  color: var(--kh-brand); font-weight: 600;
}

.khp-pop__body { max-height: 330px; overflow-y: auto; padding: 5px; }
.khp-pop__foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px;
  border-top: 1px solid var(--kh-line);
  font-size: 13.5px; font-weight: 600; color: var(--kh-brand);
  transition: background .15s;
}
.khp-pop__foot:hover { background: var(--kh-brand-tint-2); }

.khp-load,
.khp-empty { margin: 0; padding: 24px 18px; text-align: center; font-size: 13.5px; color: var(--kh-muted-2); }
.khp-empty span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--kh-muted-3); }

/* ---- Dòng tin đã lưu ---- */
.khp-row {
  display: flex; gap: 10px; align-items: center;
  padding: 7px; border-radius: var(--kh-r-md);
  transition: background .15s;
}
.khp-row:hover { background: var(--kh-brand-tint-2); }
.khp-row__img {
  width: 60px; height: 46px; flex: none;
  border-radius: var(--kh-r); overflow: hidden;
  background: var(--kh-bg-alt);
}
.khp-row__img img { width: 100%; height: 100%; object-fit: cover; }
.khp-row__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.khp-row__b strong {
  font-size: 13.5px; font-weight: 600; color: var(--kh-ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.khp-row__price { font-size: 13px; font-weight: 600; color: var(--kh-ink); }
.khp-row__loc {
  font-size: 12px; color: var(--kh-muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Dòng thông báo ---- */
.khp-nrow {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 24px 9px 7px;
  border-radius: var(--kh-r-md);
  transition: background .15s;
}
.khp-nrow.is-new { background: var(--kh-brand-tint-2); }
.khp-nrow:hover { background: var(--kh-brand-tint); }
.khp-nrow__ic { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.khp-nrow__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.khp-nrow__b strong { font-size: 13.5px; font-weight: 600; color: var(--kh-ink); line-height: 1.35; }
.khp-nrow__b span {
  font-size: 12.5px; color: var(--kh-muted-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.khp-nrow__b time { font-size: 11.5px; color: var(--kh-muted-3); }
.khp-nrow__dot {
  position: absolute; top: 14px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kh-brand);
}

/* ---- Menu tài khoản ---- */
.khp-pop__me {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--kh-line);
}
.khp-pop__me > span:last-child { min-width: 0; }
.khp-pop__me strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--kh-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.khp-pop__me small { font-size: 12px; color: var(--kh-muted-2); }

.khp-menu { padding: 5px; }
.khp-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--kh-r);
  font-size: 13.5px; font-weight: 500; color: var(--kh-text);
  transition: background .15s, color .15s;
}
.khp-menu a svg { color: var(--kh-muted-3); flex: none; transition: color .15s; }
.khp-menu a:hover { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.khp-menu a:hover svg { color: var(--kh-brand); }

.khp-menu__out {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px;
  border-top: 1px solid var(--kh-line);
  font-size: 13.5px; font-weight: 600; color: var(--kh-danger);
  transition: background .15s;
}
.khp-menu__out svg { color: var(--kh-danger); flex: none; }
.khp-menu__out:hover { background: var(--kh-danger-tint); color: var(--kh-danger); }

/* Nền mờ: CHỈ dùng ở khổ điện thoại (bảng trượt từ đáy). */
.khp-veil { position: fixed; inset: 0; background: rgba(10, 20, 45, .42); z-index: 110; display: none; }

/* ---- Drawer menu <1140px — trượt từ PHẢI kiểu batdongsan (30/07 thay panel thả cũ).
   [hidden] giữ display:none; JS gỡ hidden rồi thêm .is-open ở FRAME SAU để transition
   trượt chạy được (thêm cùng frame là nhảy phựt, không trượt).
   Thang z theo chuẩn dự án: header 100 < drawer 200/210 < modal 220. */
.kh-drawer { position: fixed; inset: 0; z-index: 200; }
/* Admin xem site có thanh admin đen (32/46px) đè lên đầu drawer — người dùng thường
   KHÔNG có (kh-auth.php tắt admin bar cho khach/moi_gioi). Biến do WP core tự đặt. */
body.admin-bar .kh-drawer { top: var(--wp-admin--admin-bar--height, 32px); }
.kh-drawer__veil {
  position: absolute; inset: 0;
  border: none; padding: 0;
  background: rgba(10, 20, 45, .45);
  opacity: 0; transition: opacity .22s;
}
.kh-drawer__box {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--kh-bg);
  box-shadow: -18px 0 44px rgba(6, 16, 44, .18);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .24s ease-out;
  padding-top: 14px;
  outline: none;
}
.kh-drawer.is-open .kh-drawer__veil { opacity: 1; }
.kh-drawer.is-open .kh-drawer__box { transform: none; }

/* Khối khách: 2 nút đăng nhập/đăng ký + Đăng tin (ảnh mẫu: 2 nút trên, 1 nút dưới) */
.kh-drawer__auth { display: flex; gap: 10px; padding: 2px 16px 10px; flex: none; }
.kh-drawer__auth a {
  flex: 1; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--kh-r);
  font-size: 14px; font-weight: 600;
}
.kh-drawer__login { border: 1px solid var(--kh-line-strong); background: var(--kh-bg); color: var(--kh-text); }
.kh-drawer__login:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-drawer__reg { background: var(--kh-brand); color: #fff; }
.kh-drawer__reg:hover { background: var(--kh-brand-hover); color: #fff; }
.kh-drawer__post {
  flex: none; height: 44px; margin: 0 16px 8px;
  display: grid; place-items: center;
  border: 1px solid var(--kh-line-strong); border-radius: var(--kh-r);
  font-size: 14px; font-weight: 600; color: var(--kh-text);
}
.kh-drawer__post:hover { border-color: var(--kh-brand); color: var(--kh-brand); }

/* Danh sách mục: icon nét mảnh + chữ, hàng ≥46px cho ngón tay */
.kh-drawer__nav { padding: 4px 8px 12px; }
.kh-drawer__row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 46px; padding: 4px 10px;
  border: none; background: transparent; text-align: left;
  border-radius: var(--kh-r);
  font-size: 14.5px; font-weight: 500; color: var(--kh-text);
}
.kh-drawer__row > svg { flex: none; color: var(--kh-muted-2); }
.kh-drawer__row:hover, .kh-drawer__row:active { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.kh-drawer__row:hover > svg, .kh-drawer__row:active > svg { color: var(--kh-brand); }

.kh-drawer__gtop { display: flex; align-items: stretch; }
.kh-drawer__row--in { flex: 1; min-width: 0; }
.kh-drawer__chev {
  flex: none; width: 46px;
  border: none; background: transparent; padding: 0;
  display: grid; place-items: center;
  color: var(--kh-muted-2);
  border-radius: var(--kh-r);
}
.kh-drawer__chev:hover { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.kh-drawer__chev svg { transition: transform .2s; }
.kh-drawer__grp.is-open .kh-drawer__chev svg { transform: rotate(180deg); }

/* Menu con: thụt thẳng hàng với CHỮ của mục cha (10 đệm + 19 icon + 12 khe = 41) */
.kh-drawer__sub { padding: 0 0 6px 41px; }
.kh-drawer__sub a {
  display: flex; align-items: center;
  min-height: 40px; padding: 2px 10px 2px 0;
  font-size: 14px; font-weight: 500; color: var(--kh-muted);
}
.kh-drawer__sub a:hover { color: var(--kh-brand); }

/* Đáy xám: 2 link phụ như ảnh mẫu */
.kh-drawer__foot {
  margin-top: auto; flex: none;
  padding: 8px 18px max(12px, env(safe-area-inset-bottom));
  background: var(--kh-bg-alt);
  border-top: 1px solid var(--kh-line);
}
.kh-drawer__foot a {
  display: flex; align-items: center;
  min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--kh-text-2);
}
.kh-drawer__foot a:hover { color: var(--kh-brand); }

@media (max-width: 1139px) {
  .kh-nav { display: none; }
  .kh-hbtn--burger { display: grid; }
  /* 🔴 ĐỪNG đặt rule chân trang vào khối này: file đọc từ trên xuống, rule gốc
     .kh-ft-* nằm ở mục 13 CUỐI file sẽ đè ngược (cùng specificity, sau thắng).
     Đã dính: 2 rule đặt ở đây chết câm. Khối 1139 chân trang nằm ở mục 13. */
}
@media (max-width: 767px) {
  .kh-hauth { display: none; }          /* còn trong panel hamburger */
  .kh-header__inner { gap: 12px; }
  .kh-hpost { padding: 0 14px; }
  /* Logo điện thoại — ĐO 30/07 (tỉ lệ file 5,263 · mép trong iPhone 12 = 358px):
     · KHÁCH: thanh chỉ còn logo·tim·menu, cụm phải 80px ⇒ dư 118px → nới 32px thoải mái.
     · ĐÃ ĐĂNG NHẬP: cụm phải 188px (tim+chuông+avatar+nút(+)+menu) ⇒ chỉ còn 158px
       cho logo → trần an toàn 29px (152,6px, dư 5,4px; 30px chỉ dư 0,1px — lệch
       nửa pixel là vỡ hàng). Số cũ 28px là từ thời thanh khách còn nút Đăng tin chữ. */
  .kh-logo img { height: 32px; }
  body.logged-in .kh-logo img { height: 29px; }

  /* Trạng thái ĐÃ ĐĂNG NHẬP — cụm phải: tim · chuông · avatar · Đăng tin.
     Trước 25/07 tim + chuông bị GIẤU vào menu hamburger cho vừa màn; nay chúng có
     bảng xem nhanh nên phải thấy được. Ngân sách bề ngang đo ở iPhone 12
     (clientWidth 390 → mép trong 358, logo 28px ≈ 147 ⇒ còn 211 cho cụm phải):
       tim 36 + chuông 36 + avatar 38 + Đăng tin ~76 + khe ≈ 190 ✓ (còn dư ~21)
     Số này PHẢI đo lại bằng documentElement.clientWidth mỗi lần đổi cụm nút —
     window.innerWidth trong Chromium giả lập trả 553 nên báo "sạch" giả. */
  .khp { gap: 0; }
  .khp-btn { width: 36px; height: 36px; }
  .khp-user { width: 36px; height: 36px; margin-left: 0; }
  .kh-hbtn--burger { width: 36px; height: 36px; margin-right: 2px; }

  /* Vùng chạm ≥36px: logo (28px) nới bằng đệm + lề âm bù — bố cục không xê dịch;
     tab trong bảng chuông (28px) nâng thẳng chiều cao. */
  .kh-logo { padding: 4px 0; margin: -4px 0; }
  .khp-tabs button { height: 36px; }

  /* 30/07 — KHÁCH trên điện thoại: thanh chỉ còn logo · tim · menu (giống batdongsan).
     Đăng tin + Đăng nhập/Đăng ký chuyển vào drawer; tim đảo lên TRƯỚC nút menu.
     Người đăng nhập giữ nguyên (nút (+) là bản --tight nên không bị ẩn). */
  .kh-hpost:not(.kh-hpost--tight) { display: none; }
  .kh-hbtn--fav { order: -1; margin-right: 2px; }

  /* Nút Đăng tin co thành viên tròn xanh dấu "+" — giữ được lối đăng tin ngay trên
     thanh mà không tràn. ĐO ở iPhone 12 (clientWidth 390, mép trong 358):
       để nguyên chữ  → cụm phải 241px, tổng 400px ⇒ TRÀN 27px (đo thật, không đoán)
       thành viên "+" → cụm phải 188px, tổng 347px ⇒ vừa, dư ~11px */
  .kh-hpost--tight {
    width: 36px; height: 36px; padding: 0;
    border-radius: 50%; justify-content: center;
    margin-left: 6px;
    background: var(--kh-brand); border-color: var(--kh-brand); color: #fff;
  }
  .kh-hpost--tight:hover { background: var(--kh-brand-hover); border-color: var(--kh-brand-hover); color: #fff; }
  .kh-hpost--tight .kh-hpost__t { display: none; }
  .kh-hpost--tight .kh-hpost__ic { display: grid; }

  /* Bảng trượt từ đáy màn (kiểu ứng dụng) — bảng thả xuống 372px không lọt 390px. */
  .khp-veil { display: block; }
  .khp-pop,
  .khp-pop--user {
    position: fixed; inset: auto 0 0 0;
    width: auto; max-height: 80vh;
    display: flex; flex-direction: column;
    border: none; border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(6, 16, 44, .28);
    z-index: 130;
    animation: khp-up .2s ease-out;
  }
  /* Thanh vuốt nhỏ ở mép trên — dấu hiệu quen thuộc của tấm trượt trên điện thoại. */
  .khp-pop::before {
    content: '';
    width: 38px; height: 4px; flex: none;
    margin: 9px auto 3px;
    border-radius: 2px;
    background: var(--kh-line-strong);
  }
  .khp-pop__body { max-height: none; flex: 1 1 auto; }
  .khp-pop__foot { flex: none; }
  @keyframes khp-up {
    from { transform: translateY(18px); opacity: .4; }
    to   { transform: none; opacity: 1; }
  }
}

/* ==========================================================================
   2. HERO + ô tìm kiếm nổi
   ========================================================================== */
.kh-hero {
  position: relative;
  height: max(210px, 17vw);
  display: flex;
  align-items: flex-end;
  background: var(--kh-hero);
}
.kh-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kh-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 20, 50, .12) 0%, rgba(9, 20, 50, 0) 50%, rgba(9, 20, 50, .15) 100%);
  pointer-events: none;
}
/* Ô tìm CỐ Ý tràn xuống section sau 74px — chính là "ranh giới 2 section" của mockup. */
.kh-hero__formwrap {
  position: relative; z-index: 5;
  width: 100%;
  pointer-events: none;
  transform: translateY(74px);
}
.kh-search {
  pointer-events: auto;
  max-width: 880px;   /* nới từ 640 để chứa thêm 2 dropdown Địa điểm + Loại BĐS trên 1 hàng */
  margin: 0 auto;
  background: var(--kh-bg);
  border-top: 4px solid var(--kh-brand);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(6, 16, 44, .22), 0 2px 8px rgba(6, 16, 44, .08);
  padding: 12px 12px 10px;
}

.kh-tabs {
  display: flex; gap: 4px;
  background: #EEF2F9;
  padding: 3px;
  border-radius: 9px;
  width: max-content;
  margin-bottom: 9px;
}
.kh-tab {
  height: 36px; padding: 0 18px;   /* audit #12: 29 → 36 = chuẩn vùng bấm dự án (768 là màn chạm) */
  border: none; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  background: transparent; color: var(--kh-text-3);
  transition: background .15s, color .15s;
}
.kh-tab[aria-selected="true"] {
  background: var(--kh-brand); color: #fff;
  box-shadow: 0 6px 14px rgba(22, 82, 228, .30);
}

/* 30/07: DOM form bọc thêm .kh-sbar (viên thuốc mobile) + .kh-schips (hàng chip) —
   trên DESKTOP 2 hộp này display:contents nên con vẫn là item trực tiếp của .kh-srow,
   xếp đúng thứ tự CŨ bằng `order` (DOM đã dời nút Tìm lên cạnh ô nhập cho mobile).
   row-gap 0: .kh-vsel (chứa dãy tab) chiếm trọn dòng 1 — khoảng cách 9px giữa tab và
   hàng ô vẫn do margin-bottom của .kh-tabs lo, cộng thêm row-gap là hở 17px (đã tính). */
.kh-srow { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: stretch; }
.kh-sbar, .kh-schips { display: contents; }
.kh-vsel { flex: 0 0 100%; order: 0; }
.kh-vsel__btn { display: none; }                      /* nút [Mua ▾] chỉ dành cho mobile */
.kh-sdd.kh-apick { order: 2; }
.kh-sdd.kh-apick--loai { order: 3; }
.kh-sdd.kh-apick--gia { order: 4; display: none; }    /* chip Mức giá: chỉ mobile */
.kh-sbtn { order: 5; }
.kh-sfield { flex: 1; order: 1; position: relative; min-width: 0; }
.kh-sfield__icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.kh-sinput {
  width: 100%; height: 42px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  padding: 0 12px 0 36px;
  font-size: 13.5px; font-weight: 500;
  color: var(--kh-ink);
  background: #FBFCFE;
  outline: none;
  transition: border-color .15s, background .15s;
}
.kh-sinput::placeholder { color: var(--kh-placeholder); }
.kh-sinput:focus { border-color: var(--kh-brand); background: var(--kh-bg); }

.kh-sbtn {
  flex: none; height: 42px; padding: 0 20px;
  border: none; border-radius: var(--kh-r);
  background: var(--kh-brand); color: #fff;
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
  transition: background .15s, box-shadow .15s, transform .1s;
}
.kh-sbtn:hover { background: var(--kh-brand-hover); box-shadow: var(--kh-sh-cta); color: #fff; }
.kh-sbtn:active { transform: scale(.97); }

/* Dropdown Địa điểm / Loại BĐS — pill giống ô nhập, dùng native <select> (đáng tin). */
.kh-sdd { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.kh-sdd__ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--kh-muted-3); pointer-events: none; display: flex; }
.kh-sdd__sel {
  height: 42px; min-width: 150px;
  padding: 0 32px 0 33px;   /* chừa chỗ icon trái + mũi tên phải */
  border: 1px solid var(--kh-line-strong); border-radius: var(--kh-r);
  background: #FBFCFE; color: var(--kh-ink);
  font-size: 13.5px; font-weight: 500;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer; outline: none;
  transition: border-color .15s, background .15s;
}
.kh-sdd__sel:focus { border-color: var(--kh-brand); background: var(--kh-bg); }
.kh-sdd::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--kh-muted-2); border-bottom: 2px solid var(--kh-muted-2);
  transform: rotate(45deg); pointer-events: none;
}

/* Picker Địa điểm (tìm nhanh 95 phường/xã) — nút dùng pill .kh-sdd__sel; panel có ô tìm + list. */
.kh-apick__btn { display: flex; align-items: center; width: 100%; text-align: left; }
.kh-apick__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-apick__panel {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 280px; max-width: calc(100vw - 32px);
  background: var(--kh-bg);
  border: 1px solid var(--kh-line); border-radius: var(--kh-r-md);
  box-shadow: var(--kh-sh-float);
  z-index: 70; overflow: hidden;
}
.kh-apick__panel[hidden] { display: none; }
.kh-apick__search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--kh-line);
  color: var(--kh-muted-3);
}
.kh-apick__search input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-size: 13.5px; font-weight: 500; color: var(--kh-ink);
}
.kh-apick__search input::placeholder { color: var(--kh-placeholder); }
.kh-apick__list { list-style: none; margin: 0; padding: 6px; max-height: 288px; overflow-y: auto; }
.kh-apick__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: var(--kh-r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--kh-text-2);
  cursor: pointer;
}
.kh-apick__item:hover { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.kh-apick__item.is-on { color: var(--kh-brand); font-weight: 700; }
/* Nút radio bên phải mỗi mục: vòng rỗng (chưa chọn) · tròn đặc + tích trắng (đang chọn) — như ảnh mẫu. */
.kh-apick__item::after {
  content: ""; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--kh-line-strong);
  background: transparent center / 12px 12px no-repeat;
  transition: border-color .12s, background-color .12s;
}
.kh-apick__item:hover::after { border-color: var(--kh-brand-pale); }
.kh-apick__item.is-on::after {
  border-color: var(--kh-brand); background-color: var(--kh-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.kh-apick__empty { padding: 18px 12px; text-align: center; font-size: 13px; font-weight: 500; color: var(--kh-muted-2); }

/* Thanh cuộn mảnh cho gọn (Firefox + WebKit) */
/* Thanh cuộn của khối này nay dùng luật CHUNG trong tokens.css (11 khối cùng kiểu). */
/* Loại BĐS là dropdown phải nhất → neo panel về mép PHẢI cho khỏi tràn khung tìm. */
.kh-apick--loai .kh-apick__panel { left: auto; right: 0; }
@media (max-width: 767px) { .kh-apick--loai .kh-apick__panel { right: auto; left: 0; } }
/* Điện thoại: mọi ô xếp DỌC full-width (dễ bấm hơn 2 dropdown chen chúc 1 hàng). */
@media (max-width: 767px) {
  /* ═══ 30/07: form kiểu 99.co ═══
     Hàng 1 = viên thuốc [Mua ▾ | ô tìm | 🔍] (.kh-sbar thành hộp thật);
     hàng 2 = 3 chip lọc Địa điểm · Loại hình · Mức giá (.kh-schips).
     (Đời trước từng dính bẫy flex-basis 100% trong trục cột — nút Tìm bẹp còn 18px;
     nay mỗi ô có kích thước cứng nên hết cửa tái phát.) */
  .kh-srow { flex-direction: column; gap: 10px; }

  .kh-sbar {
    display: flex; align-items: center;
    position: relative;               /* mốc neo bảng gợi ý full bề ngang viên thuốc */
    background: #F3F5FA;
    border: 1px solid var(--kh-line);
    border-radius: var(--kh-r-md);
    padding: 4px;
  }
  .kh-vsel { flex: none; position: relative; }
  .kh-vsel__btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 40px; padding: 0 9px 0 12px; border: 0; background: none;
    font-size: 14px; font-weight: 600; color: var(--kh-brand);
    border-right: 1px solid var(--kh-line-strong);   /* vạch ngăn với ô tìm như 99.co */
    border-radius: 0;
  }
  /* Bảng xổ Mua/Thuê/Dự án — VẪN là 3 nút tab cũ (home.js giữ nguyên), chỉ đổi áo */
  .kh-tabs {
    position: absolute; top: calc(100% + 10px); left: 0;
    width: 136px; margin: 0; padding: 5px;
    flex-direction: column; gap: 2px;
    background: var(--kh-bg);
    border: 1px solid var(--kh-line); border-radius: var(--kh-r-md);
    box-shadow: var(--kh-sh-float);
    z-index: 70;
  }
  .kh-vsel:not(.is-open) .kh-tabs { display: none; }
  .kh-tab { height: 40px; width: 100%; padding: 0 12px; text-align: left; border-radius: var(--kh-r-sm); font-size: 13.5px; }
  .kh-tab[aria-selected="true"] { background: var(--kh-brand-tint); color: var(--kh-brand); box-shadow: none; }

  /* Ô tìm nằm trần trong viên thuốc. sfield THẢ position (static) để bảng gợi ý
     .kh-sug neo theo .kh-sbar → xổ ra rộng đúng bằng viên thuốc, không bị bó
     theo ô nhập hẹp. Icon kính lúp trong ô ẩn đi — nút 🔍 xanh bên phải nói thay. */
  .kh-sfield { flex: 1; min-width: 0; position: static; }
  /* !important vì icon mang display:flex NỘI TUYẾN trong markup — CSS thường thua
     (bẫy inline style đã ghi sổ). Thiếu nó là kính lúp ma đè lên chữ [Mua ▾]. */
  .kh-sfield__icon { display: none !important; }
  .kh-sinput { height: 40px; border: 0; background: transparent; padding: 0 8px; font-size: 16px; }
  .kh-sinput:focus { background: transparent; }
  .kh-sug { top: calc(100% + 10px); left: -1px; right: -1px; }

  .kh-sbtn { flex: none; width: 44px; height: 40px; padding: 0; border-radius: 9px; justify-content: center; }
  .kh-sbtn__t { display: none; }

  /* Hàng chip lọc — nền xám nhạt, KHÔNG mũi tên (soi ảnh 99.co: chip họ trơn).
     🔴 Khung chip chỉ 334px (viên form đệm 12 mỗi bên, KHÔNG phải 358 — đã đo nhầm
     1 lần, 3 chip 334.x px rớt hàng vì lệch dưới 1px). Khe 6 + đệm gọn → ~324px,
     dư 10px ở iPhone 12; chọn nhãn dài hơn hoặc máy hẹp (SE) thì tự xuống dòng. */
  .kh-schips { display: flex; flex-wrap: wrap; gap: 6px; }
  .kh-sdd.kh-apick--gia { display: flex; }
  .kh-schips .kh-sdd__sel {
    height: 38px; min-width: 0;
    padding: 0 12px 0 26px;
    border: 0; background: #F3F5FA; border-radius: 10px;
    font-size: 13px;
  }
  .kh-schips .kh-sdd__ic { left: 8px; }
  .kh-schips .kh-sdd::after { display: none; }

  /* Ô "Tìm phường/xã" trong panel Địa điểm: ≥16px — iOS thấy ô nhập chữ nhỏ hơn
     là TỰ PHÓNG TO cả trang khi chạm (user dính khi bấm chip "Đồng Nai" 30/07 tối).
     Ô tìm chính (.kh-sinput dòng trên) đã 16px sẵn, đây là ô còn sót. */
  .kh-apick__search input { font-size: 16px; }
}

.kh-sug {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  box-shadow: var(--kh-sh-float);
  padding: 6px;
  z-index: 60;
  max-height: 340px; overflow-y: auto;
}
.kh-sug[hidden] { display: none; }
.kh-sug__head {
  padding: 7px 12px 5px;
  font-size: 11.5px; font-weight: 600;
  color: var(--kh-placeholder);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.kh-sug__item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  padding: 10px 12px;
  border: none; border-radius: var(--kh-r-sm);
  font-size: 13.5px; font-weight: 500;
  background: transparent; color: var(--kh-text-2);
}
.kh-sug__item:hover,
.kh-sug__item.is-active { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.kh-sug__item svg { flex: none; }
.kh-sug__sub { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--kh-placeholder); flex: none; }

/* Lịch sử tìm kiếm ("Tiếp tục tìm kiếm") trong dropdown gợi ý */
.kh-sug__head--row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kh-sug__clear {
  border: none; background: transparent; cursor: pointer; padding: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--kh-muted-2);
}
.kh-sug__clear:hover { color: var(--kh-brand); }
.kh-sug__item--hist span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-sug__item--hist .kh-sug__hic { flex: none; color: var(--kh-muted-3); }
.kh-sug__item--hist .kh-sug__chev { flex: none; margin-left: auto; color: var(--kh-line-strong); }
.kh-sug__item--hist:hover .kh-sug__hic,
.kh-sug__item--hist:hover .kh-sug__chev { color: var(--kh-brand); }

.kh-chips { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.kh-chips__label { font-size: 12px; font-weight: 500; color: var(--kh-muted-2); margin-right: 2px; }
.kh-chip {
  height: 36px; padding: 0 13px;   /* audit #12: 27 → 36 (chip khu vực hiện cả tablet chạm) */
  border: none; border-radius: var(--kh-r-full);
  background: var(--kh-chip-bg); color: var(--kh-text-3);
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background .15s, color .15s;
}
.kh-chip:hover { background: #E3EAF6; color: var(--kh-brand); }
.kh-chip--near { background: var(--kh-brand-tint); color: var(--kh-brand); font-weight: 600; }
.kh-chip--near:hover { background: var(--kh-brand-line); color: var(--kh-brand); }

@media (max-width: 767px) {
  .kh-hero { height: 250px; }
  .kh-hero__formwrap { transform: translateY(60px); }
  /* Bố cục form mobile (viên thuốc + 3 chip) nằm ở khối @media 767 phía TRÊN.
     30/07: hàng "Khu vực nổi bật" BỎ hẳn trên điện thoại (user chốt — gọn như
     99.co); desktop vẫn còn. Nút "Gần tôi" vì thế cũng chỉ còn trên desktop. */
  .kh-chips { display: none; }
  .kh-sug__clear { padding: 8px 6px; margin: -8px -6px; }
}

/* ==========================================================================
   3. Khung section dùng chung
   ========================================================================== */
.kh-sec { padding: var(--kh-section-y) 0; background: var(--kh-bg); scroll-margin-top: 70px; }
.kh-sec--alt { background: var(--kh-bg-alt); }
/* Section đầu phải chừa chỗ cho ô tìm nổi tràn xuống (74px + 50px thở) */
.kh-sec--underhero { padding-top: 124px; }

.kh-sec__h { margin: 0 0 22px; font-size: 24px; font-weight: 700; color: var(--kh-ink); letter-spacing: -.3px; }
.kh-sec__head { display: flex; align-items: baseline; margin-bottom: 22px; }
.kh-sec__head--mid { align-items: center; }
.kh-sec__head .kh-sec__h { margin: 0; flex: 1; }
.kh-more { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
/* Bản chỉ-mobile của "Xem tất cả" (khu Tin đăng nổi bật) — khối 767 mục 9 bật lại. */
.kh-more--m { display: none; }

/* auto-fill chứ KHÔNG auto-fit: auto-fit gộp cột trống lại, nên hàng chỉ có 1 thẻ
   thì thẻ đó phình ra hết bề rộng (trang chủ đầu tư mới có 1 dự án ra thẻ 1664px,
   ảnh kéo dài ngoằng). auto-fill giữ cột trống ⇒ thẻ lẻ vẫn đúng cỡ thẻ. */
.kh-grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

/* Hàng 4 lối tắt tròn kiểu 99.co — CHỈ điện thoại (mở ở khối @media 767 dưới). */
.kh-qnav { display: none; }

@media (max-width: 767px) {
  .kh-sec__h { font-size: 20px; }
  .kh-sec--underhero { padding-top: 100px; }

  /* 4 lối tắt tròn (30/07): Mua bán · Cho thuê · Dự án · Môi giới — màu từ tokens. */
  .kh-qnav { display: flex; justify-content: space-around; gap: 8px; margin: 0 0 26px; }
  .kh-qnav__it {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 1; min-width: 0; padding: 2px 0;
    font-size: 13px; font-weight: 500; color: var(--kh-text);
  }
  .kh-qnav__ic {
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
  }
  .kh-qnav__ic--ban  { background: var(--kh-brand); }
  /* Cho thuê = xanh dương NHẠT (chốt 30/07): tokens không có tông này → pha từ chính
     màu thương hiệu (75% brand + 25% trắng) — đổi brand là nút tự đổi theo.
     Dòng hex trên là dự phòng cho trình duyệt chưa biết color-mix. */
  .kh-qnav__ic--thue { background: #3B82F6; background: color-mix(in srgb, var(--kh-brand) 75%, #fff); }
  .kh-qnav__ic--duan { background: var(--kh-heart); }
  .kh-qnav__ic--mg   { background: var(--kh-ink); }

  /* Vùng chạm ≥36px: đệm dương + lề âm bù = bố cục không xê dịch.
     Chỉ dùng mẹo lề âm cho link đứng cạnh CHỮ THƯỜNG (không phải link khác) —
     hai link sát nhau mà đệm âm là vùng bấm cái này đè lên chữ cái kia.
     (.kh-card__title + .kh-fav nằm ở khối 767 mục 9-Tin tức: rule gốc của chúng
     khai SAU khối này nên đặt ở đây là bị đè — đã dính, fav kẹt 32px.) */
  .kh-more { padding: 7px 0; margin: -7px 0; }
}

/* ==========================================================================
   4. Banner quảng cáo đôi
   ========================================================================== */
.kh-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.kh-banner {
  position: relative;
  border-radius: var(--kh-r-lg);
  overflow: hidden;
  height: 150px;
  background: var(--kh-banner-bg);
  display: block;
}
.kh-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  /* 30/07: 2 banner đổi từ XẾP CHỒNG sang SLIDE trọn cột + chấm (js/home.js tạo chấm,
     không tự chạy). gap 32 = 2×lề — nhỏ hơn là banner kế ló vào mép phải (bẫy đã ghi).
     Lề âm + đệm cho banner vuốt chạm mép màn nhưng vẫn thẳng lề nhờ scroll-padding.
     Lề đáy dời sang dãy chấm (.kh-banners + .kh-mdots) vì chấm nằm SAU rail. */
  .kh-banners {
    display: flex; grid-template-columns: none; gap: 32px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--kh-gutter);
    margin: 0 calc(-1 * var(--kh-gutter)); padding: 0 var(--kh-gutter);
    scrollbar-width: none;
  }
  .kh-banners::-webkit-scrollbar { display: none; }
  .kh-banners > .kh-banner { flex: 0 0 100%; scroll-snap-align: start; }
  .kh-banners + .kh-mdots { margin: 12px 0 26px; }
  .kh-banner { height: 110px; }
}

/* ==========================================================================
   5. Thẻ tin đăng (card-listing) + thẻ dự án (card-du-an)
   ========================================================================== */
/* Thẻ tin/dự án bản GỐC: không khung, ảnh bo góc + bóng nhẹ, chữ nằm trần dưới ảnh.
   Kiểu "có khung viền" chỉ áp cho 2 trang danh sách (nhà đất bán/cho thuê · dự án)
   và nằm ở css/bds.css dưới lớp `.kh-lsgrid--boxed` — KHÔNG sửa ở đây, vì file này
   nạp ở MỌI trang (trang chủ, chi tiết tin, hồ sơ môi giới… đều dùng .kh-card). */
.kh-card { position: relative; transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .2s ease, border-color .18s ease, background-color .18s ease; }
.kh-card:hover { transform: translateY(-4px); }

.kh-card__media {
  position: relative;
  height: 178px;
  border-radius: var(--kh-r-lg);
  overflow: hidden;
  box-shadow: var(--kh-sh);
  background: var(--kh-banner-bg);
  display: block;
}
.kh-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kh-card--project .kh-card__media { height: 170px; }

/* Mũi tên carousel — chỉ hiện khi rê chuột (mockup: opacity 0 → 1) */
.kh-card__arr {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(6, 16, 44, .2);
  color: var(--kh-text);
  pointer-events: none;
  opacity: 0; transition: opacity .18s;
}
.kh-card__arr--prev { left: 8px; }
.kh-card__arr--next { right: 8px; }
.kh-card:hover .kh-card__arr { opacity: 1; }

.kh-card__dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 9px;
  display: flex; gap: 5px; pointer-events: none;
}
.kh-card__dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 4px rgba(6, 16, 44, .35);
}
.kh-card__dots i.is-on { background: #fff; }

.kh-tagbadge {
  position: absolute; top: 10px; left: 10px;
  background: var(--kh-brand); color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--kh-r-sm);
  letter-spacing: .2px;
  box-shadow: 0 2px 8px rgba(6, 16, 44, .22);
  pointer-events: none;
}
.kh-tagbadge--new { background: var(--kh-success); }
.kh-tagbadge--project { top: 12px; left: 12px; }
.kh-tagbadge--warning { background: var(--kh-warning); }
.kh-tagbadge--info { background: var(--kh-brand); }
/* TRANG CHỦ khu "Tin đăng nổi bật" bỏ badge Nổi bật/Mới (chốt 30/07, mọi cỡ màn).
   CHỈ ẩn CSS theo lưới --ls của trang chủ — trang danh sách/tin tương tự VẪN hiện;
   badge trạng thái của thẻ DỰ ÁN (--project) không dính vì nằm lưới --pj. */
.kh-grid4--ls .kh-tagbadge { display: none; }

.kh-fav {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;   /* audit: 32->36 = chuẩn vùng bấm (mobile vốn đã 36) */
  border: none; background: rgba(255, 255, 255, .94);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(6, 16, 44, .18);
  transition: transform .15s;
  padding: 0;
}
.kh-fav:hover { transform: scale(1.1); }
.kh-fav svg { fill: none; stroke: #54658C; }
.kh-fav.is-on svg { fill: var(--kh-heart); stroke: var(--kh-heart); }

.kh-card__body { padding: 13px 4px 0; }
.kh-card__eyebrow { font-size: 11.5px; font-weight: 600; color: var(--kh-brand); letter-spacing: .7px; }
.kh-card__price { margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--kh-ink); letter-spacing: -.2px; }
.kh-card__title {
  margin-top: 5px;
  font-size: 14.5px; font-weight: 500; color: var(--kh-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
a.kh-card__title:hover { color: var(--kh-brand); }
.kh-card__loc { margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--kh-muted); }
/* TRANG CHỦ ẩn dòng địa chỉ trên thẻ — mọi cỡ màn (chốt 30/07: tiêu đề tin đã chứa
   khu vực). CHỈ ẩn bằng CSS theo body.home, KHÔNG gỡ khỏi template — thẻ dùng chung
   trang danh sách / tin tương tự / 404... những nơi đó VẪN hiện địa chỉ. */
body.home .kh-card__loc { display: none; }
.kh-card__meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; color: var(--kh-muted); }
.kh-card__meta span { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 500; }
.kh-card__meta svg { flex: none; }

/* Nút Mở rộng / Xem tiếp */
.kh-expand-row { display: flex; justify-content: center; margin-top: 28px; }
.kh-btn-ghost {
  height: 46px; padding: 0 40px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background: var(--kh-bg); color: var(--kh-text);
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 34, 78, .05);
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .15s, color .15s;
}
.kh-btn-ghost:hover { border-color: var(--kh-brand); color: var(--kh-brand); }

.kh-empty {
  background: var(--kh-bg);
  border: 1px dashed var(--kh-line-strong);
  border-radius: var(--kh-r-lg);
  padding: 48px 24px;
  text-align: center;
}
.kh-empty__t { font-size: 15.5px; font-weight: 600; color: var(--kh-text-2); }
.kh-empty p { margin: 6px 0 16px; font-size: 14px; font-weight: 500; color: var(--kh-muted-2); }

/* ==========================================================================
   6. Rail video dọc 9:16
   ========================================================================== */
.kh-railbtns { display: flex; gap: 8px; }
.kh-railbtn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--kh-line-strong);
  background: var(--kh-bg);
  display: grid; place-items: center;
  color: var(--kh-text);
  transition: border-color .15s, color .15s;
  padding: 0;
}
.kh-railbtn:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-railbtn:disabled { opacity: .4; cursor: not-allowed; }

.kh-rail {
  display: flex; gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  /* padding của container ăn vào lề khi cuộn → bù bằng scroll-padding */
  scroll-padding-left: 0;
}
.kh-rail::-webkit-scrollbar { display: none; }

.kh-vcard {
  flex: none; width: 210px; height: 340px;
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--kh-r-xl);
  overflow: hidden;
  background: var(--kh-hero);
  box-shadow: 0 1px 2px rgba(16, 34, 78, .04);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .2s ease, border-color .18s ease, background-color .18s ease;
  display: block;
}
.kh-vcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16, 34, 78, .18), 0 3px 8px rgba(16, 34, 78, .06); }
.kh-vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kh-vcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 44, .35) 0%, rgba(6, 16, 44, 0) 30%, rgba(6, 16, 44, 0) 45%, rgba(6, 16, 44, .82) 100%);
  pointer-events: none;
}
.kh-vpill {
  position: absolute; top: 12px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(6, 16, 44, .55); color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 14px;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.kh-vpill--l { left: 12px; }
.kh-vpill--r { right: 12px; gap: 5px; }
/* Khu "Tin đăng có video" bỏ viên "Video" bên trái (chốt 30/07) — nút play giữa thẻ
   đã nói thay; viên LƯỢT XEM bên phải (--r) GIỮ nguyên. */
.kh-vcard .kh-vpill--l { display: none; }
.kh-vplay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.kh-vplay i {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, .65);
  display: grid; place-items: center;
}
.kh-vcard__body { position: absolute; left: 16px; right: 16px; bottom: 14px; pointer-events: none; }
.kh-vcard__t {
  font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 8px rgba(4, 12, 36, .5);
}
.kh-vcard__loc { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: rgba(255, 255, 255, .85); min-width: 0; }
/* 1 dòng + cắt bằng "…": tên khu vực ở đây dài hơn mockup ("P. Long Thành, TP Đồng Nai"
   vs "Biên Hoà, Đồng Nai"), xuống 2 dòng là chữ trắng tràn khỏi vệt tối của gradient
   và rơi lên nền ảnh sáng → không đọc nổi. */
.kh-vcard__loc span {
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kh-vcard__loc svg { flex: none; }
.kh-vcard__price { margin-top: 7px; font-size: 17px; font-weight: 600; color: #fff; }

/* ==========================================================================
   7. Khám phá theo khu vực
   ========================================================================== */
.kh-regions {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 186px 186px;
  gap: 20px;
}
.kh-tile {
  position: relative;
  border-radius: var(--kh-r-xl);
  overflow: hidden;
  display: block;
  background: var(--kh-banner-bg);
}
.kh-tile--big { grid-row: 1 / 3; }
.kh-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.kh-tile:hover img { transform: scale(1.05); }
.kh-tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 52, 0) 40%, rgba(10, 22, 52, .72) 100%);
  pointer-events: none;
}
.kh-tile--big .kh-tile__veil { background: linear-gradient(180deg, rgba(10, 22, 52, 0) 45%, rgba(10, 22, 52, .72) 100%); }
/* right:14px chứ không để chảy tự do: tên khu vực dài (vd "Long Thành") cộng "N tin đăng"
   trên màn 390px sẽ vắt dòng và chữ "đăng" rơi ra ngoài đáy ô — đã chụp thấy. */
.kh-tile__cap { position: absolute; left: 18px; right: 14px; bottom: 14px; pointer-events: none; }
.kh-tile--big .kh-tile__cap { left: 20px; right: 20px; bottom: 16px; }
/* block, KHÔNG để inline: mockup xếp tên trên — số tin dưới. Để inline thì 2 phần
   dính vào nhau thành 1 dòng chảy rồi vắt lung tung. */
.kh-tile__name { display: block; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.3; }
.kh-tile--big .kh-tile__name { font-size: 20px; }
.kh-tile__count { display: block; color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 500; line-height: 1.35; }
.kh-tile--big .kh-tile__count { font-size: 13.5px; }

/* Khổ ≤1023 (cột 2 + ô to 210px) khai ở @media 1023 mục 9-Tin tức;
   ô nhỏ hạ 170px cho điện thoại khai ở @media 767 cùng chỗ — phải đứng SAU
   khối 1023 mới đè được, để ở đây là thua cascade. */

/* ==========================================================================
   8. Tiện ích
   ========================================================================== */
.kh-util {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-lg);
  padding: 16px;
  color: var(--kh-ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kh-util:hover {
  border-color: var(--kh-brand);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(22, 82, 228, .13), 0 3px 8px rgba(16, 34, 78, .05);
  color: var(--kh-ink);
}
.kh-util__ic {
  width: 42px; height: 42px; border-radius: var(--kh-r-md);
  background: var(--kh-brand-tint);
  display: grid; place-items: center;
  color: var(--kh-brand);
  flex: none;
}
.kh-util__n { min-width: 0; align-self: center; font-size: 14.5px; font-weight: 600; }

/* ==========================================================================
   9. Tin tức
   ========================================================================== */
.kh-news { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
/* 3 bài "Đáng chú ý" nhân bản dạng thẻ cho MOBILE — desktop/tablet ẩn (mobile mở ở
   khối @media 767 mục này, kèm ẩn cột "Đáng chú ý"). */
.kh-news__mextra { display: none; }
.kh-news__head { display: flex; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--kh-line); }
.kh-news__head .kh-sec__h { margin: 0; flex: 1; }

.kh-nitem { display: flex; gap: 28px; align-items: flex-start; padding: 26px 0; }
.kh-nitem__txt { flex: 1; min-width: 0; }
.kh-nitem__t { font-size: 16.5px; font-weight: 600; color: var(--kh-ink); line-height: 1.45; transition: color .15s; display: block; }
.kh-nitem__t:hover { color: var(--kh-brand); }
.kh-nitem p {
  margin: 8px 0 0;
  font-size: 13.5px; font-weight: 500; color: var(--kh-muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kh-nitem__d { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--kh-muted-2); }
.kh-nitem__img {
  flex: none; width: 176px; height: 124px;
  border-radius: var(--kh-r-md); overflow: hidden;
  position: relative; background: var(--kh-banner-bg); display: block;
}
.kh-nitem__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kh-news__side .kh-sec__h { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--kh-line); }
.kh-nrow { display: flex; gap: 16px; align-items: flex-start; padding: 15px 0; }
.kh-nrow__num { flex: none; font-size: 22px; font-weight: 700; color: #C9D4EA; line-height: 1.2; }
.kh-nrow__t {
  font-size: 14.5px; font-weight: 600; color: var(--kh-ink); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s;
}
.kh-nrow__t:hover { color: var(--kh-brand); }
.kh-nrow__d { margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--kh-muted-2); }

@media (max-width: 1023px) {
  .kh-news { grid-template-columns: 1fr; gap: 40px; }

  /* Khu vực: giữ 3 cột desktop tới tận đây thì ô nhỏ chỉ còn ~180px (đo ở 810) —
     chật, chữ 2 dòng chạm mép. Chuyển sớm sang bố cục 2 cột mà README định cho
     mobile: ô to nằm trọn hàng đầu cao 210px, 4 ô nhỏ 2×2 bên dưới.
     🔴 Ô to phải viết .kh-regions > .kh-tile--big (2 class): .kh-tile--big trần
     (1 class) THUA .kh-regions > .kh-tile nên height 210px sẽ bị đè còn 186. */
  .kh-regions { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .kh-regions > .kh-tile { height: 186px; }
  .kh-regions > .kh-tile--big { grid-column: 1 / -1; grid-row: auto; height: 210px; }
}
@media (max-width: 767px)  {
  .kh-news { gap: 36px; }
  .kh-nitem { gap: 16px; }
  .kh-nitem__img { width: 112px; height: 84px; }

  /* Tiêu đề bài viết là link → nới vùng chạm ≥36px, lề âm bù giữ nguyên bố cục.
     8px chứ không 7: dòng đơn 21.8px + 14 = 35.8 vẫn hụt chuẩn 36 (đo được). */
  .kh-nitem__t, .kh-nrow__t { padding: 8px 0; margin: -8px 0; }

  /* Thẻ tin tức TRANG CHỦ: bỏ đoạn mô tả trên điện thoại (chốt 30/07) — tiêu đề +
     ngày + ảnh là đủ. Khoá theo .kh-news (chỉ trang chủ) — card-post còn dùng ở
     blog/trang dự án, selector trần .kh-nitem p là lây sang đó. */
  .kh-news .kh-nitem p { display: none; }

  /* 30/07: điện thoại ẨN cột "Đáng chú ý", bù 3 bài đó thành thẻ có ảnh nối dưới
     2 thẻ "Tin tức nổi bật" → đủ 5 tin một cột. Tablet + desktop giữ nguyên 2 cột. */
  .kh-news__side { display: none; }
  .kh-news__mextra { display: block; }

  /* Thẻ tin: tiêu đề + nút tim ≥36px. Phải nằm ở khối này (SAU rule gốc của
     .kh-card__title/.kh-fav ở mục 5) — đặt ở khối 767 phía trên là bị rule gốc
     đè: margin-top -2 thua 5px làm chữ tụt 7px, fav kẹt 32px (đã dính cả hai). */
  .kh-card__title { padding: 7px 0; margin: -2px 0 -7px; }
  .kh-fav { width: 36px; height: 36px; }

  /* ═══ 30/07: Tin đăng + Dự án + Video thành slide ngang kiểu 99.co ═══
     1 thẻ trọn + LÓ 1/5 thẻ thứ 2 (user chốt 30/07 tối — bản 2 thẻ + ló nhìn chật).
     Cái ló là dấu hiệu vuốt được → KHÔNG cần chấm — chấm chỉ dành cho slide trọn
     cột. Toán: thẻ + khe 12 + thẻ/5 = 100% ⇒ thẻ = (100% − 12px)/1,2 — iPhone 12
     ra 288px, ló ~58px đúng 1/5. Lề âm + đệm: thẻ thò tới mép màn như 99.co nhưng
     thẻ đầu vẫn thẳng lề nhờ scroll-padding. */
  .kh-grid4--ls, .kh-grid4--pj {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--kh-gutter);
    margin: 0 calc(-1 * var(--kh-gutter)); padding: 4px var(--kh-gutter) 8px;
    scrollbar-width: none;
  }
  .kh-grid4--ls::-webkit-scrollbar, .kh-grid4--pj::-webkit-scrollbar { display: none; }
  .kh-grid4--ls > *, .kh-grid4--pj > * { flex: 0 0 calc((100% - 12px) / 1.2); min-width: 0; scroll-snap-align: start; }
  /* Tỉ lệ ảnh 16:10 (user chốt 30/07 tối): thẻ nay rộng ~288px, giữ ảnh VUÔNG của
     bản thẻ-hẹp cũ là ảnh cao 288px chiếm cả màn — đổi về đúng khung ndn-card
     560×350 (16:10) mà máy chủ đã cắt sẵn → ảnh ~180px, không giãn không cắt thêm. */
  .kh-grid4--ls .kh-card__media, .kh-grid4--pj .kh-card__media { height: auto; aspect-ratio: 16 / 10; }

  /* Tin đăng nổi bật mobile (chốt 30/07): BỎ nút Mở rộng/Xem tiếp dưới slide —
     "Xem tất cả ›" ngang tiêu đề thay thế (markup sẵn, chỉ bật ở đây); slide mở
     HẾT 8 thẻ vì cơ chế "Mở rộng thêm hàng" là của lưới desktop.
     🔴 [hidden] toàn cục mang !important → muốn mở thẻ [data-kh-lsmore] phải
     !important + specificity cao hơn — ngoại lệ CÓ CHỦ ĐÍCH, đừng bắt chước bừa. */
  .kh-more--m { display: inline-flex; }
  .kh-expand-row { display: none; }
  .kh-grid4--ls > [data-kh-lsmore][hidden] { display: block !important; }
  /* Dòng PN·WC·m² phải 1 HÀNG (chốt 30/07): thẻ ~158px không chứa nổi cả icon lẫn
     chữ (đo 173px+) → BỎ icon, hạ 13px, ngăn bằng chấm giữa kiểu 99.co
     ("3 PN · 3 WC · 85 m²" ≈ 150px — vừa). Thẻ đầy đủ icon vẫn dùng ở trang khác. */
  .kh-grid4--ls .kh-card__meta, .kh-grid4--pj .kh-card__meta { gap: 8px; }
  .kh-grid4--ls .kh-card__meta svg, .kh-grid4--pj .kh-card__meta svg { display: none; }
  .kh-grid4--ls .kh-card__meta span, .kh-grid4--pj .kh-card__meta span { font-size: 13px; }
  .kh-grid4--ls .kh-card__meta span + span::before,
  .kh-grid4--pj .kh-card__meta span + span::before { content: '·'; color: var(--kh-muted-3); }

  /* Video (user chốt 30/07 tối — bản 3 thẻ nhìn chật): 2 thẻ + LÓ ~1/5 thẻ thứ 3,
     giữ tỉ lệ dọc 9:16. Toán: ló = khung − 40 − 2×thẻ (40 = lề 16 + 2 khe 12);
     ép ló = thẻ/5 ⇒ thẻ = (khung − 8px)/2,2 → iPhone 12 ra 159px, ló ~32px đúng 1/5.
     2 nút tròn ‹ › ẩn trên điện thoại — "Xem tất cả ›" (.kh-more--m) thay chỗ. */
  .kh-rail { gap: 12px; margin: 0 calc(-1 * var(--kh-gutter)); padding: 0 var(--kh-gutter); scroll-padding-left: var(--kh-gutter); }
  .kh-vcard { width: calc((100% - 8px) / 2.2); height: auto; aspect-ratio: 9 / 16; }
  .kh-railbtns { display: none; }

  /* Thẻ video hẹp ~105px mà giữ cỡ chữ desktop (tựa 15 + giá 17) là CHỮ CHE HẾT
     VIDEO (user bắt 30/07). Nén cả cụm: tựa 12/2 dòng · nơi 10,5 · giá 13 một dòng
     · đệm 16→10 · nút play 52→36. Desktop không đổi (rule chỉ sống ≤767). */
  .kh-vplay i { width: 36px; height: 36px; }
  .kh-vplay svg { width: 14px; height: 14px; }
  .kh-vcard__body { left: 10px; right: 10px; bottom: 10px; }
  .kh-vcard__t { font-size: 12px; line-height: 1.35; }
  .kh-vcard__loc { margin-top: 3px; gap: 4px; }
  .kh-vcard__loc svg { width: 10px; height: 10px; }
  .kh-vcard__loc span { font-size: 10.5px; }
  .kh-vcard__price { margin-top: 3px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Khu vực — ô nhỏ hạ 186 → 120px: bề ngang ~170px trên iPhone, để 170px cao là
     ô VUÔNG; 120px mới ra CHỮ NHẬT nằm ngang (chốt 30/07). Rule PHẢI đứng sau khối
     @media 1023 phía trên (nơi khai cột 2 + ô to 210px), đặt trước là bị đè.
     🔴 :not(--big) BẮT BUỘC: thiếu nó thì rule này (đứng SAU, cùng độ ưu tiên) đè
     luôn height 210px của Ô TO — đã dính thật, ô to từng kẹt 120px mà máy mới đo ra. */
  .kh-regions > .kh-tile:not(.kh-tile--big) { height: 120px; }
}

/* ==========================================================================
   10. Báo chí nói về
   ========================================================================== */
.kh-press {
  display: flex; flex-direction: column;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-lg);
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(16, 34, 78, .04);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.kh-press:hover {
  border-color: #D2DCF2; transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(16, 34, 78, .12), 0 3px 8px rgba(16, 34, 78, .05);
}
.kh-press__q { margin: 0; font-size: 14px; font-weight: 500; color: var(--kh-text); line-height: 1.7; flex: 1; }
.kh-press__hr { height: 1px; background: #F0F2F8; margin: 18px 0 14px; }
.kh-press__by { display: flex; align-items: center; gap: 11px; }
.kh-press__logo {
  width: 38px; height: 38px; border-radius: var(--kh-r);
  position: relative; overflow: hidden; flex: none;
  display: grid; place-items: center;
  color: #fff; font-size: 16px; font-weight: 700;
}

/* Ô có LOGO THẬT (admin tải lên ở Giao diện → Báo chí nói về).
   Logo báo phần lớn là chữ nằm ngang, nhét vào ô vuông 38px thì chữ bé như hạt gạo
   → cho ô nới ngang tới 92px, logo vuông vẫn giữ đúng 38×38 nhờ object-fit: contain. */
.kh-press__logo--img {
  width: auto; min-width: 38px; max-width: 92px;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid var(--kh-line);
}
/* 🔴 KHÔNG dùng `height: 100%` ở đây: ô cha là grid + place-items:center nên hàng
   không bị kéo giãn, phần trăm quy chiếu vào chính nó → trình duyệt bỏ qua, ảnh giữ
   nguyên cỡ gốc rồi bị ô `overflow:hidden` cắt cụt (đo được 78px trong ô cao 38px).
   Chốt bằng số thật: 38px ô − 4px đệm trên − 4px đệm dưới = 30px. */
.kh-press__logo--img img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 30px;
  object-fit: contain;
}

/* Ô có link bài báo là thẻ <a> — chặn màu chữ xanh mặc định của link. */
a.kh-press, a.kh-press:hover { color: inherit; text-decoration: none; }
.kh-press__name { display: block; font-size: 14.5px; font-weight: 600; color: var(--kh-ink); }
.kh-press__kind { display: block; font-size: 12.5px; font-weight: 500; color: var(--kh-muted-2); }

/* ==========================================================================
   11. Giới thiệu dịch vụ (4 cột SVG)
   ========================================================================== */
.kh-svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px; }
.kh-svc { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kh-svc__ic { width: 150px; height: 120px; display: grid; place-items: center; margin-bottom: 18px; }
.kh-svc__t { font-size: 17px; font-weight: 600; color: var(--kh-ink); margin-bottom: 10px; }
.kh-svc p { margin: 0; font-size: 14px; font-weight: 500; color: var(--kh-muted); line-height: 1.65; }

/* Chấm chỉ báo slider mobile (Dịch vụ + Báo chí) — CHỈ BÁO cho biết vuốt được,
   không phải nút bấm (nên không dính chuẩn vùng chạm 36px). js/home.js tạo khi ≤767;
   base ẩn để lỡ còn sót ở desktop cũng không vẽ gì. */
.kh-mdots { display: none; }

/* ==========================================================================
   12. Khối SEO
   ========================================================================== */
.kh-seo { border-top: 1px solid var(--kh-line); }
.kh-seo p { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--kh-muted); line-height: 1.7; }
.kh-seo p + p { margin-top: 14px; }
.kh-seo__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px 40px; margin-top: 38px;
}
/* Tiêu đề cột nay là <button> (mobile bấm gập/xổ cột) — reset về đúng hình hài div cũ
   nên desktop nhìn không đổi. font:inherit phải đứng TRƯỚC size/weight kẻo đè ngược. */
.kh-seo__t {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: 0; background: none; padding: 0; text-align: left;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--kh-ink);
  margin-bottom: 14px;
}
.kh-seo__chev { display: none; color: var(--kh-muted-2); }   /* mũi tên: chỉ hiện ≤767 */
.kh-seo__toggle { display: none; }                            /* nút Xem thêm: chỉ hiện ≤767 */
.kh-seo__cols a {
  display: flex; align-items: center; gap: 5px;
  color: var(--kh-muted); font-size: 13.5px; font-weight: 500;
  margin-bottom: 11px;
}
.kh-seo__cols a:hover { color: var(--kh-brand); }
.kh-seo__cols a svg { flex: none; }
.kh-seo__more { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--kh-brand); }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.kh-footer { background: var(--kh-bg-footer); border-top: 1px solid var(--kh-line); padding: 48px 0 0; scroll-margin-top: 70px; }

.kh-ft-top { display: flex; align-items: center; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--kh-line); }
.kh-ft-top__logo { height: 36px; width: auto; display: block; flex: none; }
.kh-ft-contacts {
  flex: 1; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px;
}
.kh-ft-contact { display: flex; align-items: center; gap: 12px; }
/* Van an toàn: ô chữ được phép co + bẻ dòng khi cột hẹp hơn nội dung
   (flex/grid mặc định min-width:auto nên KHÔNG cho co → chữ thò ra đè cột bên).
   Desktop ≥1280 cột ≥325px > email 314px → không đổi gì; chỉ phát huy ở
   dải hẹp 1140–1173px, nơi email trước đó đè lên icon cột Giờ làm việc. */
.kh-ft-contact > div { min-width: 0; }
.kh-ft-contact__v { overflow-wrap: anywhere; }
.kh-ft-contact__ic {
  width: 42px; height: 42px; border-radius: var(--kh-r-md);
  background: var(--kh-brand-tint);
  display: grid; place-items: center; flex: none;
}
.kh-ft-contact__l { font-size: 12.5px; font-weight: 500; color: var(--kh-muted-2); }
.kh-ft-contact__v { font-size: 15px; font-weight: 600; color: var(--kh-ink); padding: 4px 0; margin: -4px 0; }   /* audit: tap 19->27 */
a.kh-ft-contact__v:hover { color: var(--kh-brand); }

.kh-ft-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px; padding: 36px 0 40px;
}
.kh-ft-h {
  font-size: 13.5px; font-weight: 700; color: var(--kh-ink);
  letter-spacing: .4px; text-transform: uppercase;
  padding: 8px 0; margin: -8px 0 6px;   /* audit: nút gập chân trang tap 21->37, chữ đứng yên (14-8=6) */
}
/* Hướng dẫn/Quy định bọc accordion (mobile gập) — head là <button> reset về đúng
   hình hài .kh-ft-h cũ; mũi tên chỉ hiện ≤767 nên desktop không đổi. */
.kh-ft-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: 0; background: none; padding: 0; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 700;
}
.kh-ft-acc__chev { display: none; color: var(--kh-muted-2); }
.kh-ft-cols a:not(.kh-ft-soc) { display: block; color: var(--kh-muted); font-size: 13.5px; font-weight: 500; margin-bottom: 11px; }
.kh-ft-cols a:not(.kh-ft-soc):last-child { margin-bottom: 0; }
.kh-ft-cols a:not(.kh-ft-soc):hover { color: var(--kh-brand); }
.kh-ft-line { display: flex; gap: 9px; color: var(--kh-muted); margin-bottom: 10px; }
.kh-ft-line:last-child { margin-bottom: 0; }
.kh-ft-line svg { flex: none; margin-top: 2px; }
.kh-ft-line span { font-size: 13.5px; font-weight: 500; line-height: 1.6; }

.kh-nl {
  display: flex; align-items: center; gap: 6px;
  height: 46px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line-strong);
  border-radius: 23px;
  padding: 0 5px 0 6px;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(16, 34, 78, .05);
}
.kh-nl:focus-within { border-color: var(--kh-brand); }
/* 🔴 Chỉ thụt lề cho icon phong bì ở ĐẦU ô, KHÔNG áp cho mọi svg trong form:
   luật cũ `.kh-nl svg` trúng luôn icon máy bay giấy nằm trong nút gửi, đẩy nó
   lệch phải 4,5px so với tâm nút tròn (đo được). */
.kh-nl > span > svg { flex: none; margin-left: 9px; }
.kh-nl input {
  flex: 1; min-width: 0;
  border: none; outline: none;
  padding: 0 2px;
  font-size: 13.5px; font-weight: 500;
  color: var(--kh-ink);
  background: transparent;
}
.kh-nl__go {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--kh-brand); color: #fff;
  display: grid; place-items: center;
  transition: background .15s, transform .1s;
  padding: 0;
}
.kh-nl__go:hover { background: var(--kh-brand-hover); }
.kh-nl__go:active { transform: scale(.94); }
.kh-nl-msg { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: #0C7A3C; }
.kh-nl-msg.is-err { color: var(--kh-danger); }
.kh-nl-msg[hidden] { display: none; }

.kh-ft-socs { display: flex; gap: 10px; }
.kh-ft-soc {
  width: 38px; height: 38px; border-radius: var(--kh-r);
  background: var(--kh-bg); border: 1px solid var(--kh-line);
  display: grid; place-items: center;
  color: var(--kh-text-3);
  transition: color .15s, border-color .15s;
}
.kh-ft-soc:hover { color: var(--kh-brand); border-color: var(--kh-brand); }
.kh-ft-soc img { width: 22px; height: 22px; display: block; }

.kh-ft-bottom-wrap { border-top: 1px solid var(--kh-line); }
.kh-ft-bottom { display: flex; gap: 40px; align-items: flex-start; padding: 20px var(--kh-gutter); max-width: var(--kh-container); margin: 0 auto; }
.kh-ft-copy { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--kh-muted-2); line-height: 1.6; align-self: center; }
.kh-ft-bct { flex: none; height: 44px; width: auto; display: block; }

/* Chân trang khổ hẹp (tablet): logo xuống hàng riêng, 3 ô liên hệ 3→2→1 cột.
   Ô email "hotro@nhadatdongnai.com.vn" đo được ~314px (icon 54 + chữ 260) —
   giữ 1 hàng như desktop thì từ 1139 trở xuống ô này đè cột bên cạnh
   (1024: chữ chui dưới icon Giờ làm việc · 810/768: chạy hẳn ra ngoài màn).
   min 320px = 54 icon + 260 chữ + 6 thở → email KHÔNG bao giờ phải bẻ dòng:
   3 cột khi khung ≥1056 · 2 cột 672–1055 · 1 cột hẹp hơn. Khối này PHẢI đứng
   sau rule gốc .kh-ft-* phía trên (đặt đầu file là bị đè — đã dính). */
@media (max-width: 1139px) {
  .kh-ft-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .kh-ft-contacts { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

@media (max-width: 767px) {
  .kh-ft-cols { gap: 28px; padding: 28px 0 32px; }
  .kh-ft-bottom { flex-direction: column; gap: 14px; }

  /* Vùng chạm ≥36px: link chân trang ~21px + link khối SEO ~18px là quá mỏng.
     Đệm THẬT (không lề âm) vì các link xếp sát nhau thành cột — lề âm sẽ làm
     vùng bấm link này đè lên chữ link kia. Danh sách cao thêm, đổi lấy dễ bấm. */
  .kh-ft-cols a:not(.kh-ft-soc) { padding: 8px 0; margin-bottom: 0; }
  .kh-seo__cols a { padding: 9px 0; margin-bottom: 2px; }
  a.kh-ft-contact__v { padding: 9px 0; }   /* inline: nới vùng bấm, không đẩy bố cục; 9px vì 19+16=35 hụt 1px */
  .kh-nl input { align-self: stretch; font-size: 16px; }   /* cao bằng viên 44px; 16px chống iOS tự phóng trang */

  /* ═══ 30/07: bố cục mobile các khối cuối trang chủ (theo mẫu batdongsan) ═══
     Đặt Ở ĐÂY vì rule gốc .kh-press/.kh-svcs/.kh-seo/.kh-ft-* đều khai PHÍA TRÊN —
     khối 767 nào đứng trước rule gốc là bị đè ngược (đã dính 2 lần trong dự án). */

  /* Dịch vụ: 4 khối thành slide vuốt ngang trọn cột + chấm, TỰ CHẠY (js/home.js).
     gap 32 = 2×lề 16 — nhỏ hơn là slide kế LÓ vào mép phải (bẫy đã ghi sổ). */
  .kh-svcs { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--kh-gutter); scrollbar-width: none; }
  .kh-svcs::-webkit-scrollbar { display: none; }
  .kh-svcs > .kh-svc { flex: 0 0 100%; scroll-snap-align: start; }

  /* Báo chí: slide 1 thẻ + LÓ ~1/5 thẻ 2 (chốt 30/07 — trước là trọn cột + chấm).
     Thẻ 84% khung: ở 390 ra thẻ ~301px, phần ló ~61px ≈ 1/5 thẻ, tự co theo màn.
     Có ló rồi thì BỎ chấm (ló = dấu hiệu vuốt; chấm chỉ cho slide trọn cột) —
     home.js không tạo chấm cho khối này nữa. Lề âm + đệm giữ bóng thẻ khỏi bị cắt. */
  .kh-grid4--press { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--kh-gutter); margin: -8px calc(-1 * var(--kh-gutter)); padding: 8px var(--kh-gutter); scrollbar-width: none; }
  .kh-grid4--press::-webkit-scrollbar { display: none; }
  .kh-grid4--press > .kh-press { flex: 0 0 84%; scroll-snap-align: start; }

  .kh-mdots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
  .kh-mdots i { width: 7px; height: 7px; border-radius: 50%; background: #C9D4EA; transition: background .2s, transform .2s; }
  .kh-mdots i.is-on { background: var(--kh-brand); transform: scale(1.2); }

  /* Tiện ích: 2 cột (col 6-6) — modifier riêng, KHÔNG đụng .kh-grid4 chung. */
  .kh-grid4--utils { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kh-grid4--utils .kh-util { padding: 13px 12px; gap: 10px; }

  /* SEO: đoạn mở đầu cắt ~4 dòng + mờ dần, nút Xem thêm/Thu gọn (JS thêm .is-closed) */
  .kh-seo__intro.is-closed { max-height: 108px; overflow: hidden; position: relative; }
  .kh-seo__intro.is-closed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--kh-bg)); }
  .kh-seo__toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; min-height: 36px; border: 0; background: none; padding: 0 4px; font-size: 13.5px; font-weight: 600; color: var(--kh-brand); }
  .kh-seo__toggle svg { transition: transform .2s; }
  .kh-seo__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* SEO: 8 cột gọn thành hàng bấm xổ có kẻ ngăn (như ảnh mẫu) */
  .kh-seo__cols { display: block; margin-top: 22px; border-top: 1px solid var(--kh-line); }
  .kh-seo__grp { border-bottom: 1px solid var(--kh-line); }
  .kh-seo__grp .kh-seo__t { min-height: 50px; margin: 0; font-size: 14px; font-weight: 500; }
  .kh-seo__chev { display: flex; }
  .kh-seo__chev svg { transition: transform .2s; }
  .kh-seo__grp:not(.is-closed) .kh-seo__chev svg { transform: rotate(180deg); }
  .kh-seo__grp.is-closed .kh-seo__links { display: none; }
  .kh-seo__links { padding: 0 0 10px; }

  /* Chân trang: Hướng dẫn / Quy định gập như ảnh mẫu.
     🔴 Khe lưới 28px của .kh-ft-cols làm chữ LỆCH giữa 2 kẻ (trên 24px, dưới 52px
     — user bắt "text không nằm giữa"): kéo khối sau đè lên khe (-28px) cho 2 kẻ
     liền hàng + thêm kẻ ĐÓNG dưới khối cuối → chữ nằm giữa 2 kẻ đúng 24/24. */
  .kh-ft-acc { border-top: 1px solid var(--kh-line); }
  .kh-ft-acc + .kh-ft-acc { margin-top: -28px; border-bottom: 1px solid var(--kh-line); }
  .kh-ft-acc__head { margin-bottom: 0; min-height: 48px; }
  .kh-ft-acc__chev { display: flex; }
  .kh-ft-acc__chev svg { transition: transform .2s; }
  .kh-ft-acc:not(.is-closed) .kh-ft-acc__chev svg { transform: rotate(180deg); }
  .kh-ft-acc.is-closed .kh-ft-acc__body { display: none; }
  .kh-ft-acc__body { padding-bottom: 6px; }
}

/* ==========================================================================
   14. Thẻ môi giới (dùng ở danh bạ P4c + trang dự án — chưa hiện ở trang chủ)
   ========================================================================== */
.kh-ag {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-lg);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .2s ease, border-color .18s ease, background-color .18s ease;
}
.kh-ag:hover { border-color: var(--kh-brand); transform: translateY(-4px); box-shadow: var(--kh-sh-hover); }
.kh-ag__band { height: 64px; background: linear-gradient(135deg, var(--kh-brand-tint) 0%, #DCE7FD 100%); }
.kh-ag__ava {
  width: 84px; height: 84px; border-radius: 50%;
  margin: -42px auto 0;
  border: 3px solid #fff;
  background: var(--kh-brand-tint);
  overflow: hidden; position: relative; z-index: 1;
  display: grid; place-items: center;
}
.kh-ag__ava img { width: 100%; height: 100%; object-fit: cover; }
.kh-ag__ini { font-size: 24px; font-weight: 700; color: var(--kh-brand); }
.kh-ag__body { padding: 12px 20px 20px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.kh-ag__nameline { display: flex; align-items: center; justify-content: center; gap: 6px; }
.kh-ag__name { font-size: 17px; font-weight: 600; color: var(--kh-ink); }
.kh-ag__name:hover { color: var(--kh-brand); }
.kh-ag__tick { display: inline-flex; color: var(--kh-brand); }
.kh-ag__role {
  align-self: center; margin-top: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kh-brand); background: var(--kh-brand-tint);
  border-radius: var(--kh-r-full); padding: 5px 12px;
}
.kh-ag__meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px 14px; margin-top: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--kh-muted-2);
}
.kh-ag__meta span { display: inline-flex; align-items: center; gap: 5px; }
.kh-ag__meta b { color: var(--kh-ink); font-weight: 600; }
.kh-ag__spec {
  margin: 10px 0 0; font-size: 13px; font-weight: 500; color: var(--kh-muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kh-ag__act { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; }
.kh-ag__call { flex: none; height: 42px; padding: 0 16px; font-size: 13.5px; }
.kh-ag__view {
  flex: 1; height: 42px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--kh-brand); color: #fff;
  font-size: 14px; font-weight: 600;
  border-radius: var(--kh-r);
  transition: background .15s;
}
.kh-ag__view:hover { background: var(--kh-brand-hover); color: #fff; }

.kh-agrow {
  display: flex; align-items: center; gap: 18px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-lg);
  padding: 16px 18px;
  transition: border-color .18s, box-shadow .25s;
}
.kh-agrow:hover { border-color: var(--kh-brand); box-shadow: var(--kh-sh); }
.kh-agrow__ava {
  flex: none; width: 88px; height: 88px; border-radius: 50%;
  overflow: hidden; background: var(--kh-brand-tint);
  display: grid; place-items: center;
}
.kh-agrow__ava img { width: 100%; height: 100%; object-fit: cover; }
.kh-agrow__body { flex: 1; min-width: 0; }
.kh-agrow .kh-ag__nameline,
.kh-agrow .kh-ag__meta { justify-content: flex-start; }
.kh-agrow__sub { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--kh-muted-2); }
.kh-agrow__dot { margin: 0 6px; color: var(--kh-line-strong); }
.kh-agrow__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kh-agrow__tag {
  font-size: 11.5px; font-weight: 500; color: var(--kh-text-3);
  background: var(--kh-chip-bg); border-radius: var(--kh-r-full); padding: 4px 10px;
}
.kh-agrow__act { flex: none; display: flex; align-items: center; gap: 10px; }
.kh-agrow__act .kh-ag__view { flex: none; padding: 0 18px; }
@media (max-width: 767px) {
  .kh-agrow { flex-wrap: wrap; }
  .kh-agrow__act { width: 100%; }
  .kh-agrow__act .kh-ag__view { flex: 1; }
}

/* ==========================================================================
   15. Phân trang — dùng chung mọi trang danh sách (khu vực · dự án · blog · tác giả)
   Đặt ở home.css vì đây là file nạp ở MỌI trang có phân trang (bds.css/blog.css đều
   phụ thuộc ndn-home). Trước ở bds.css nên blog hiện "12›" text trần không có nút.
   ========================================================================== */
.kh-pager { display: flex; justify-content: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; }
.kh-pager .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: grid; place-items: center;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background: var(--kh-bg);
  color: var(--kh-text);
  font-size: 14px; font-weight: 600;
}
.kh-pager .page-numbers:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-pager .page-numbers.current { background: var(--kh-brand); border-color: var(--kh-brand); color: #fff; }
.kh-pager .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   16. Toast dùng chung (khNotify)
   ========================================================================== */
.khd-toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 20px);
  z-index: 300;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: var(--kh-r-md);
  background: var(--kh-ink); color: #fff;
  font-size: 13.5px; font-weight: 500;
  box-shadow: 0 18px 36px rgba(6, 16, 44, .28);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.khd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.khd-toast.is-err { background: var(--kh-danger); }

/* ══════════════════════════════════════════════════════════════════════════
   P6c — Nút Đặt lịch xem + hộp thoại dùng chung (đồng ý chia sẻ / đặt lịch).
   Để ở home.css vì nút liên hệ xuất hiện ở CẢ trang chi tiết tin, hồ sơ môi giới
   và thẻ trong danh bạ — tách file riêng thì phải nhớ nạp ở 4 chỗ.
   ══════════════════════════════════════════════════════════════════════════ */
.kh-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--kh-brand);
  background: var(--kh-brand-tint);
  border: 1px solid var(--kh-brand-line);
  border-radius: var(--kh-r);
  cursor: pointer;
}
.kh-book:hover { background: var(--kh-brand-tint-2); border-color: var(--kh-brand); }
.kh-dockbar .kh-book { width: auto; margin-top: 0; padding: 10px 14px; }

.ndl-modal {
  position: fixed;
  inset: 0;
  z-index: 220;                    /* trên drawer 210, dưới picker portal 240 */
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 18, 44, .5);
}
.ndl-box {
  width: min(430px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--kh-bg);
  border-radius: var(--kh-r-lg);
  padding: 22px;
  box-shadow: var(--kh-sh-float);
}
.ndl-box h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--kh-ink); }
.ndl-box p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--kh-text-2); }
.ndl-sub { font-size: 12.5px !important; color: var(--kh-muted-2) !important; }
.ndl-lb { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--kh-text); }
.ndl-in {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--kh-ink);
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
}
.ndl-in:focus { outline: none; border-color: var(--kh-brand); box-shadow: 0 0 0 3px var(--kh-brand-tint); }
.ndl-act { display: flex; gap: 10px; margin-top: 16px; }
.ndl-btn {
  flex: 1;
  padding: 11px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--kh-r);
  border: 1px solid transparent;
  cursor: pointer;
}
.ndl-btn-main { background: var(--kh-brand); color: #fff; }
.ndl-btn-main:hover { background: var(--kh-brand-hover); }
.ndl-btn-ghost { background: var(--kh-bg); border-color: var(--kh-line-strong); color: var(--kh-text-2); }
.ndl-btn-ghost:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
@media (max-width: 640px) { .ndl-in { font-size: 16px; } }


/* ══ Chống rung khi thẻ nhấc lên lúc hover ═══════════════════════════════════
   Bệnh: thẻ nhấc lên 4px → con trỏ đang ở sát mép dưới bỗng nằm NGOÀI thẻ →
   thẻ tụt xuống → lại trúng con trỏ → nhấc lên… lặp liên tục, nhìn như rung.
   Thuốc: cho mỗi thẻ một vùng "đệm" vô hình thò xuống dưới 8px, đi theo thẻ.
   Thẻ nhấc 4px thì vùng đệm vẫn phủ chỗ con trỏ đang đứng ⇒ không rớt hover.
   (Đặt z-index:-1 để đệm nằm dưới nội dung, không chắn nút bấm bên trong.) */
.kh-card, .kh-bcard, .kh-vcard, .kh-ag, .kh-zone {
  will-change: transform;      /* báo trước cho trình duyệt để vẽ bằng GPU */
}
.kh-card::after,
.kh-bcard::after,
.kh-vcard::after,
.kh-ag::after,
.kh-zone::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: -8px;
  z-index: -1;
  pointer-events: auto;
}
/* Nhấc 4px → 3px: đủ thấy nổi lên, bớt biên độ nhảy. */
.kh-card:hover  { transform: translateY(-3px); }
.kh-bcard:hover { transform: translateY(-3px); }
.kh-vcard:hover { transform: translateY(-3px); }
.kh-ag:hover    { transform: translateY(-3px); }

/* ── Độ trễ 90ms trước khi hiệu ứng chạy ────────────────────────────────────
   Không có độ trễ thì lướt chuột ngang qua một hàng thẻ là cả hàng nhấp nháy
   theo — mắt đọc ra thành "giật". 90ms đủ để bỏ qua cú lướt vô tình, nhưng
   người dừng lại thật thì không kịp thấy mình phải chờ.
   🔴 Chỉ trễ lúc VÀO. Lúc rời chuột phải trả về ngay, nếu không sẽ thành "dính". */
.kh-card, .kh-bcard, .kh-vcard, .kh-ag, .kh-zone,
.kh-tile, .kh-util, .kh-vpill { transition-delay: 0s; }

.kh-card:hover, .kh-bcard:hover, .kh-vcard:hover, .kh-ag:hover, .kh-zone:hover,
.kh-tile:hover, .kh-util:hover, .kh-vpill:hover,
.kh-card:hover *, .kh-vcard:hover *, .kh-tile:hover * { transition-delay: .09s; }

/* (Cây kh-tpick 2 tầng + panel --tree + chân Xong/Đặt lại đã GỠ 01/08 — bảng chọn
   chính giờ là NHÓM 1-chọn kiểu nhatot; loại con nằm trong hộp Lọc nâng cao.) */

/* Picker NHÓM 1-chọn (mô hình nhatot, 01/08) — trang chủ dùng khuôn .kh-apick__item
   sẵn có, chỉ thêm icon + flex cho hàng. */
.kh-gpick .kh-apick__item { display: flex; align-items: center; justify-content: flex-start; gap: 9px; }
.kh-gpick .kh-apick__item svg { flex: 0 0 auto; color: var(--kh-muted); }
/* Chữ căn TRÁI sát icon (user 02/08): khuôn gốc space-between + 3 phần (icon·chữ·radio) làm
   chữ dạt giữa → ép flex-start, đẩy nút radio (::after) sang phải bằng margin-left:auto. */
.kh-gpick .kh-apick__item::after { margin-left: auto; }

/* ═══ W7.2 L11 — ô mồi chống bot của form nhận tin (footer.php) ═══
   Đẩy ra ngoài màn thay vì display:none (bot đọc computed style sẽ bỏ qua ô none).
   🔴 Máy quét tràn lề: BỎ QUA .kh-nl__hp — nó cố ý nằm ở -9999px (cùng luật với .ndn-lh__moi). */
.kh-nl__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}