/* ============================================================================
   bds.css — Trang danh sách khu vực (P4a)
   Bố cục A đã chốt: thanh lọc ngang ghim trên → H1 + chip phường/xã →
   chia đôi (lưới thẻ trái · bản đồ dính phải). Dưới 1200px bản đồ ẩn sau nút bật.
   Nạp SAU tokens.css + home.css (dùng lại .kh-card, .kh-btn-ghost… của trang chủ).
   ========================================================================== */

/* ==========================================================================
   1. Thanh lọc — ghim ngay dưới header
   ========================================================================== */
.kh-fbar {
  position: sticky;
  top: var(--kh-header-h);
  z-index: 90;
  background: var(--kh-bg);
  border-bottom: 1px solid var(--kh-line);
}
.kh-fbar.is-stuck { box-shadow: 0 4px 18px rgba(16, 34, 78, .07); }

/* 26/07: hiệu ứng GIẤU HEADER khi cuộn đã BỎ (user chốt). Header luôn hiện, thanh
   lọc ghim ngay dưới nó. Cùng với nó bỏ luôn biến bù trừ --kh-off từng phải trừ
   vào cột bản đồ — nay mọi mốc ghim là số cố định, đọc thẳng ra.
   Đừng dựng lại: một hiệu ứng nhỏ mà kéo theo 4 công thức calc ở 3 chỗ khác nhau. */

/* Bề ngang khung: đã nâng lên 1600 cho TOÀN SITE ở --kh-container (tokens.css),
   nên lớp riêng `kh-container--wide` từng dùng ở đây đã bỏ. Đừng thêm lại lớp
   phủ bề ngang cục bộ — một nơi khai duy nhất, không thì header/chân trang lại
   lệch với nội dung như lần trước. */

.kh-fbar { transition: box-shadow .18s ease; }

.kh-fbar__in {
  height: var(--kh-fbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Điện thoại: cho trượt ngang thay vì ép xuống dòng — thanh lọc phải giữ nguyên chiều cao
   để phần nội dung bên dưới không nhảy chỗ khi đổi bộ lọc. */
@media (max-width: 1023px) {
  .kh-fbar__in {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .kh-fbar__in::-webkit-scrollbar { display: none; }
  /* Liệt kê đích danh .kh-fdd/.kh-fsearch để THẮNG luật giãn đều ở khổ rộng
     (cùng độ ưu tiên thì luật viết sau thắng, nhưng luật kia nằm trước nên phải
     nâng độ cụ thể ở đây). Khổ hẹp thì thanh trượt ngang, không giãn. */
  .kh-fbar__in > *,
  .kh-fbar__in > .kh-fdd,
  .kh-fbar__in > .kh-fsearch { flex: none; }
  .kh-fbar__in > .kh-fdd .kh-fdd__btn { width: auto; }
}

/* Cặp nút Bán / Cho thuê — đây là trục chính của site nên đứng đầu thanh.
   26/07: chỉnh cho KHỚP các ô còn lại trên hàng lọc. Đo được nó từng lệch 4 điểm:
   cao 36 (khác 38) · bo góc 9 (khác 10) · KHÔNG viền (khác 1px) · chữ 13/600
   (khác 13,5/500). Đứng cạnh nhau là thấy nó thấp hơn và trôi nổi không có viền. */
.kh-fseg {
  display: flex; gap: 3px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background: var(--kh-bg-alt);
  flex: none;
}
.kh-fseg a {
  /* 30 = 38 − 2 viền − 2×3 đệm. Bo 7 = 10 của khung trừ đi 3 đệm, để góc trong
     song song góc ngoài chứ không lệch cong. */
  height: 30px; padding: 0 14px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 13.5px; font-weight: 500;
  color: var(--kh-text-3);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
/* Không dùng quầng sáng: không ô nào khác trên hàng có, để lại là nó nổi khác đàn. */
.kh-fseg a.is-on { background: var(--kh-brand); color: #fff; font-weight: 600; }
.kh-fseg a:not(.is-on):hover { color: var(--kh-brand); }

/* Ô lọc dạng xổ xuống */
.kh-fdd { position: relative; flex: none; }

/* Thanh lọc trang DỰ ÁN trải đúng bề rộng của khối nội dung bên dưới.
   Trước đây các ô co theo chữ nên hàng dừng ở 1133 trong khi lưới thẻ + bản đồ
   bên dưới kết thúc ở 1296 — hụt 163px, nhìn như thanh lọc bị lệch.
   Toàn bộ phần dư dồn cho Ô TÌM (flex-grow), 5 ô lọc giữ bề rộng vừa đủ chữ
   (flex:0 0 auto) và bóp nhẹ khoảng đệm — ô tìm là thứ người ta gõ nhiều nhất,
   còn ô lọc chỉ cần đọc được nhãn. */
.kh-fbar--wide .kh-fbar__in { gap: 8px; }
.kh-fbar--wide .kh-fbar__in > .kh-fsearch { flex: 1 1 auto; min-width: 240px; }
.kh-fbar--wide .kh-fbar__in > .kh-fdd { flex: 0 0 auto; }
.kh-fbar--wide .kh-fbar__in > .kh-fdd .kh-fdd__btn { padding: 0 11px; gap: 6px; }
.kh-fbar--wide .kh-fsearch input { width: auto; flex: 1 1 auto; }
.kh-fdd__btn {
  height: 38px; padding: 0 12px;
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background: var(--kh-bg);
  color: var(--kh-text);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.kh-fdd__btn:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-fdd__btn.is-on { border-color: var(--kh-brand); color: var(--kh-brand); background: var(--kh-brand-tint); }
.kh-fdd__btn svg { flex: none; transition: transform .18s; }
.kh-fdd.is-open .kh-fdd__btn svg { transform: rotate(180deg); }

.kh-fdd__panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 230px;
  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: 95;
  max-height: 60vh; overflow-y: auto;
}
/* Panel neo về mép PHẢI của ô lọc. JS gắn lớp này khi đo thấy mở sang trái sẽ
   tràn khỏi màn hình (ô cuối hàng luôn rơi vào ca đó). Không gắn tay từng ô vì
   ô nào chạm mép còn tuỳ bề rộng màn hình. */
.kh-fdd__panel.is-right { left: auto; right: 0; }

/* Ô "Khu vực" = bộ chọn 95 phường/xã: nút gọn (ellipsis), panel có ô tìm cố định + danh
   sách cuộn. Chọn phường/xã qua đây, KHÔNG còn hàng chip. */
.kh-fdd--area .kh-fdd__btn { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-apanel { min-width: 300px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.kh-apanel__search {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-bottom: 1px solid var(--kh-line);
}
.kh-apanel__search svg { color: var(--kh-muted-2); flex: none; }
.kh-apanel__search input { border: none; outline: none; width: 100%; font-size: 13.5px; background: none; }
.kh-apanel__list { flex: 1; overflow-y: auto; padding: 6px; }
.kh-apanel__list a[hidden] { display: none; }

.kh-fdd__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--kh-r-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--kh-text-2);
}
.kh-fdd__panel a:hover { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.kh-fdd__panel a.is-on { background: var(--kh-brand-tint); color: var(--kh-brand); }

/* Ô tìm nhanh ở ĐẦU thanh lọc (trang dự án).
   Nút "Tìm" nằm BÊN TRONG khung ô nhập — cả cụm là MỘT khung bo tròn, không phải
   ô nhập rồi nút rời đứng cạnh. Vì vậy viền/nền đặt ở <form>, còn <input> để trần. */
.kh-fsearch {
  display: flex; align-items: center;
  flex: none;
  height: 38px;
  padding-left: 12px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background: #FBFCFE;
  transition: border-color .15s, background .15s;
}
.kh-fsearch:focus-within { border-color: var(--kh-brand); background: var(--kh-bg); }
.kh-fsearch__ic { display: flex; color: var(--kh-muted-3); flex: none; }
.kh-fsearch input {
  width: 268px;
  height: 100%;
  border: none; outline: none; background: transparent;
  padding: 0 10px;
  font-size: 13.5px; font-weight: 500; color: var(--kh-ink);
  min-width: 0;
}
.kh-fsearch input::placeholder { color: var(--kh-placeholder); }
/* Ẩn nút "x" mặc định của type=search (Chrome vẽ thêm 1 dấu x lệch tông) */
.kh-fsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kh-fsearch button {
  flex: none;
  height: 30px; margin: 0 4px 0 0; padding: 0 15px;
  border: none; border-radius: var(--kh-r-sm);
  background: var(--kh-brand); color: #fff;
  font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.kh-fsearch button:hover { background: var(--kh-brand-hover); color: #fff; }
/* Neo bảng gợi ý .kh-sug (style nằm ở home.css — nạp mọi trang) vào đúng ô tìm;
   không có mốc này thì bảng absolute trôi theo .kh-fbar. */
.kh-fbar .kh-fsearch { position: relative; }

/* ── Thanh tìm/lọc danh bạ môi giới ────────────────────────────────────────
   Nhẹ, KHÔNG dính (khác .kh-fbar của trang nhà đất) — lọc tức thời bằng JS. */
.kh-agfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 22px; }
.kh-agfilter[hidden] { display: none; }
.kh-agfilter .kh-fsearch { flex: 1 1 280px; max-width: 420px; height: 42px; }
.kh-agfilter .kh-fsearch input { width: 100%; font-size: 14px; }

.kh-fselect { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; }
.kh-fselect[hidden] { display: none; }
.kh-fselect select {
  height: 42px; min-width: 190px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--kh-line-strong); border-radius: var(--kh-r);
  background: #FBFCFE; color: var(--kh-ink);
  font-size: 14px; font-weight: 500;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
/* `background: var(--kh-bg)` viết tắt sẽ xoá mũi tên → chỉ đổi MÀU NỀN thôi. */
.kh-fselect select:focus { outline: none; border-color: var(--kh-brand); background-color: var(--kh-bg); }
.kh-fselect select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}
/* Mũi tên xổ tự vẽ (ẩn mũi tên mặc định của trình duyệt cho đồng bộ) */
/* Mũi tên nay do luật `select` chung trong tokens.css vẽ — bỏ mũi tên riêng
   ở đây, không thì ô lọc khu vực có 2 mũi tên chồng nhau. */
.kh-fselect::after { content: none; }
@media (max-width: 767px) {
  .kh-agfilter .kh-fsearch { flex: 1 1 100%; max-width: none; }
  .kh-fselect { flex: 1 1 100%; }
  .kh-fselect select { width: 100%; }
}

/* Nút phễu (lọc nâng cao) + số tiêu chí đang bật */
.kh-fadv { position: relative; }
.kh-fadv__n {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--kh-brand); color: #fff;
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.kh-fclear { margin-left: 2px; font-size: 13px; font-weight: 500; color: var(--kh-muted-2); white-space: nowrap; }
.kh-fclear:hover { color: var(--kh-danger); }
.kh-fspacer { flex: 1 1 auto; min-width: 8px; }

/* Chuông "Thông báo" trên thanh lọc (ndn_fbar_bell) — sinh cho bản điện thoại,
   khổ ≥768 ẩn: desktop không có trong thiết kế, người đăng nhập đã có chuông header. */
.kh-fbell {
  position: relative;
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background: var(--kh-bg);
  color: var(--kh-text-2);
}
.kh-fbell:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-fbell__n {
  position: absolute; top: -5px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--kh-r-sm);
  background: var(--kh-danger); color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* ── Điện thoại ≤767: thanh lọc 2 HÀNG kiểu batdongsan ──────────────────────
   Hàng 1: ô tìm giãn hết cỡ (ẩn nút "Tìm" — gõ xong bấm phím Tìm kiếm trên bàn
   phím, input đã có enterkeyhint="search") · nút Lọc · chuông Thông báo.
   Hàng 2: 3 ô xổ chia đều (nhà đất: Loại/Giá/Diện tích · dự án: Khu vực/Loại
   hình/Khoảng giá). Bán-Cho thuê (kh-fseg), ô Khu vực nhà đất (kh-fdd--area),
   ô Trạng thái dự án (kh-fdd--tt) rời thanh — cả ba vẫn đổi được trong hộp
   "Lọc" (mục Loại tin · Khu vực & Dự án · Trạng thái dự án).
   🔴 Cascade: khối này phải đứng SAU rule gốc của mọi thứ nó đè (fseg · fbar__in
   · khối trượt-ngang ≤1023 · fsearch · fadv · fbell ngay trên). "Lưu tìm kiếm"
   KHÔNG xử ở đây — rule gốc của nó nằm mãi dưới, đặt display:none ở đây là bị
   đè ngược; khối media cạnh nó đã nới 640→767. */
@media (max-width: 767px) {
  /* Thanh cao 2 hàng: 9 + 38 + 8 + 38 + 9 = 102px. Đè BIẾN tại đây (KHÔNG sửa
     tokens.css) để bản đồ nổi (mục 4) mở đúng dưới mép thanh; chiều cao thanh
     đọc biến này nên tự ăn theo. */
  :root { --kh-fbar-h: 102px; }

  .kh-fbar__in {
    flex-wrap: wrap;
    align-content: center;
    padding: 9px var(--kh-gutter);   /* PHẢI khai lại lề ngang: rule .kh-container ở tokens bị đè */
    overflow: visible;               /* bỏ trượt ngang của khối ≤1023 — panel xổ không bị cắt cụt */
  }

  .kh-fbar .kh-fseg,
  .kh-fbar .kh-fdd--area,
  .kh-fbar .kh-fdd--tt,
  .kh-fbar .kh-fsearch button { display: none; }

  /* Hàng 1 xếp bằng `order`: [ô tìm | Lọc | chuông], ô tìm giãn lấp phần dư. Chừa
     176px cho [Lọc + chuông + 2 khe]: nút Lọc khi mang badge (is-on) phồng 74→99px
     (badge 2 chữ số ~107px) — mốc cũ 152px hụt ~1px nên flex-wrap ĐẨY chuông (item
     cuối hàng) xuống dòng. 176 = Lọc(badge)~107 + chuông 38 + 2 khe 16 + dư ~15;
     vẫn < ~236px (ngưỡng mà ô tìm co đủ nhỏ để 1 ô lọc hàng 2 leo lên hàng 1). */
  .kh-fbar .kh-fsearch { order: 1; }
  .kh-fbar--wide .kh-fbar__in > .kh-fsearch { flex: 1 1 calc(100% - 176px); min-width: 0; }
  .kh-fbar .kh-fsearch input { font-size: 16px; }   /* ≥16px: iOS không tự phóng trang khi chạm ô */
  /* Bảng gợi ý rộng BẰNG CẢ THANH (ô tìm hẹp quá, chữ gợi ý bị bó): đổi mốc neo
     từ ô tìm lên .kh-fbar__in (form về static, khung bar thành relative) rồi căn
     hai mép theo gutter. KHÔNG dùng right âm theo ô tìm — bề rộng ô biến theo
     badge nút Lọc, số âm cố định là tràn mép phải (đo được +14px). */
  .kh-fbar__in { position: relative; }
  .kh-fbar .kh-fsearch { position: static; }
  .kh-fbar .kh-fsearch .kh-sug {
    left: var(--kh-gutter);
    right: var(--kh-gutter);
    top: calc(100% + 8px);
  }
  .kh-fbar .kh-fadv { order: 2; }
  .kh-fbell { order: 3; display: inline-flex; }

  /* Hàng 2: 3 ô còn lại — basis 28% (3×28% không chen nổi vào hàng 1 đã đầy)
     rồi giãn đều; nhãn dài cắt "…" nhờ span .kh-fdd__lbl. */
  .kh-fbar--wide .kh-fbar__in > .kh-fdd { order: 4; flex: 1 1 28%; min-width: 0; }
  .kh-fbar--wide .kh-fbar__in > .kh-fdd .kh-fdd__btn {
    width: 100%;
    justify-content: space-between;
    /* 6/4/13px: đo ở 390 (ô 114px) — "Loại nhà đất" cần 81px, đệm 6 + khe 4 cho
       nhãn 82px nên không "…"; riêng "Loại hình dự án" (dự án) cần ~97px, dài quá
       1/3 hàng ở mọi cỡ máy phổ biến — chấp nhận cắt "…" (mở panel vẫn thấy đủ). */
    padding: 0 6px;
    gap: 4px;
    font-size: 13px;
    overflow: hidden;
  }
  .kh-fbar .kh-fdd__btn .kh-fdd__lbl {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Panel xổ (Loại/Mức giá/Diện tích) rộng bằng CẢ THANH, neo theo .kh-fbar__in
     giống bảng gợi ý .kh-sug — KHÔNG neo theo nút hẹp 1/3 hàng. Panel giá/loại rộng
     320–340px > bề rộng nút nên neo trái lẫn is-right đều lòi mép, JS place() đành
     trả về TRÁI rồi cắt cụt mép phải (user báo "căn trái nên bị cắt"). Cho .kh-fdd
     static để panel absolute ăn mốc .kh-fbar__in (đã relative + overflow:visible);
     căn hai mép theo gutter, min-width 0 để không ép rộng quá thanh; huỷ is-right. */
  .kh-fbar__in > .kh-fdd { position: static; }
  .kh-fbar .kh-fdd__panel,
  .kh-fbar .kh-fdd__panel.is-right {
    left: var(--kh-gutter); right: var(--kh-gutter); min-width: 0;
  }
}

/* ==========================================================================
   2. Đầu trang: breadcrumb · H1 · số tin · chip phường/xã
   ========================================================================== */
.kh-lshead { padding: 20px 0 14px; }
/* --tight: dành cho 2 trang có ĐẾM TIN nằm trong thanh công cụ ngay bên dưới
   (nhà đất bán/cho thuê · dự án). Thanh công cụ cao 40px và căn giữa theo chiều
   dọc nên đã tự cộng thêm ~7px; để nguyên lề dưới 14px thì con số rơi xa tiêu đề
   22px, trong khi trang môi giới/chủ đầu tư (đếm nằm thẳng dưới H1) chỉ hở 4px.
   KHÔNG sửa lề của .kh-lshead chung — 2 trang kia đang đúng, sửa là làm hỏng. */
.kh-lshead--tight { padding-bottom: 2px; }
.kh-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--kh-muted-2); margin-bottom: 10px; }
.kh-crumb a { color: var(--kh-muted-2); display: inline-block; padding: 5px 4px; margin: -5px -4px; }   /* audit: tap 20->30 */
.kh-crumb a:hover { color: var(--kh-brand); }
.kh-crumb span[aria-current] { color: var(--kh-ink); }

.kh-lshead h1 { font-size: 20px; line-height: 20px; font-weight: 700; letter-spacing: -.3px; }
.kh-lscount { margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--kh-muted-2); }

.kh-pxrow { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.kh-pxrow::-webkit-scrollbar { display: none; }
.kh-pxrow a {
  flex: none;
  height: 32px; padding: 0 14px;
  display: grid; place-items: center;
  border-radius: var(--kh-r-full);
  background: var(--kh-chip-bg); color: var(--kh-text-3);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.kh-pxrow a:hover { background: #E3EAF6; color: var(--kh-brand); }
.kh-pxrow a.is-on { background: var(--kh-brand); color: #fff; }

@media (max-width: 767px) {
  /* 30/07 user bắt "text sát": đo được H1 dòng cao 1.1 + dòng đếm tin cách H1
     đúng 2px. Nới dòng 1.35 + đệm đáy 8px — CHỈ mobile, desktop giữ khối --tight
     sát chủ đích (đếm tin nằm trong toolbar cao 40px tự thoáng ở khổ rộng). */
  .kh-lshead h1 { font-size: 18px; line-height: 1.35; }
  .kh-lshead--tight { padding-bottom: 8px; }
}

/* ==========================================================================
   3. Chia đôi: thẻ trái · bản đồ phải
   ========================================================================== */
.kh-split {
  display: grid;
  /* Bản đồ CO GIÃN theo màn thay vì khoá cứng 520px (26/07).
     Đo bản cũ: màn 1280 bản đồ chiếm 42% → màn 1600+ chỉ còn 34%, càng màn to
     bản đồ nhìn càng teo so với cột tin.
     clamp: không bao giờ hẹp hơn 420 (dưới mức đó bản đồ chỉ còn là hình trang trí,
     không đọc được tên đường) và không rộng quá 640 (rộng hơn thì cột tin bị bóp
     xuống 2 thẻ/hàng ngay cả trên màn lớn — mất nhiều hơn được). */
  grid-template-columns: minmax(0, 1fr) clamp(420px, 38%, 640px);
  gap: 24px;
  align-items: start;
  padding-bottom: 48px;
}
.kh-split__list { min-width: 0; }

/* Hàng công cụ: "N kết quả" bên trái · bật/tắt bản đồ + Sắp xếp bên phải.
   25/07: chuyển VÀO TRONG cột tin (bỏ `grid-column: 1/-1`). Trước đây nó trải hết
   2 cột nên đẩy cột bản đồ tụt xuống dưới nó; nay bản đồ bắt đầu ngay từ mép trên,
   cao thêm 68px (đo ở 1280 và 1440). */
.kh-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.kh-toolbar__n { margin: 0; font-size: 15px; font-weight: 500; color: var(--kh-muted-2); }
.kh-toolbar__n b { color: var(--kh-ink); font-weight: 700; font-size: 18px; }
.kh-toolbar__r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Nút bật/tắt bản đồ — thay cho cụm 3 nút đổi chế độ cũ (.kh-viewsw/.kh-viewbtn). */
.kh-mapsw {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px;   /* audit: 34->36 chuẩn vùng bấm */
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  background: var(--kh-bg);
  color: var(--kh-text-2);
  font: inherit; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.kh-mapsw:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-mapsw.is-on { border-color: var(--kh-brand); background: var(--kh-brand-tint); color: var(--kh-brand); }
/* Dưới 1200px bản đồ đã chuyển sang nút nổi → nút này không còn nghĩa gì. */
@media (max-width: 1199px) { .kh-mapsw { display: none; } }

.kh-sortlbl { font-size: 13.5px; font-weight: 500; color: var(--kh-muted-2); }

/* Tắt bản đồ — CHỈ ở khổ ≥1200px, nơi thật sự có 2 cột để đổi.
   Chế độ "toàn bản đồ" (is-view-map) đã BỎ 25/07: nó ẩn sạch tin đăng, mà khổ hẹp
   thì đã có nút nổi riêng làm việc đó. */
@media (min-width: 1200px) {
  .kh-split.is-view-list { grid-template-columns: 1fr; }
  .kh-split.is-view-list .kh-mapcol { display: none; }
  /* Bỏ cột bản đồ thì chỗ rộng ra — đo được 4–5 thẻ/hàng thay vì 2–3. */
  .kh-split.is-view-list .kh-lsgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* auto-fill (không phải auto-fit): cột trống giữ nguyên bề rộng nên hàng cuối
   có 1 thẻ thì thẻ đó KHÔNG phình ra gấp đôi các thẻ trên. */
.kh-lsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 20px; }

.kh-mapcol {
  position: sticky;
  /* header + thanh lọc 60 + thở 8. Thở 16 → 8 (26/07): con số này là SÀN của bản
     đồ — dù khối tiêu đề đã dời vào cột tin, bản đồ vẫn không lên cao hơn mức ghim
     này được. */
  top: calc(var(--kh-header-h) + var(--kh-fbar-h) + 8px);
  /* Số trừ cuối = thở TRÊN 8 + thở DƯỚI 8. Để 24 thì đáy hở 16px trong khi đỉnh
     chỉ hở 7 — nhìn lệch hẳn về một phía (đo 26/07). Muốn đổi khe hở thì sửa
     đúng 2 con số 8 này, giữ chúng bằng nhau. */
  height: calc(100vh - var(--kh-header-h) - var(--kh-fbar-h) - 16px);
  transition: top .26s cubic-bezier(.22, .61, .36, 1), height .26s cubic-bezier(.22, .61, .36, 1);
  border-radius: var(--kh-r-lg);
  overflow: hidden;
  border: 1px solid var(--kh-line);
  background: var(--kh-banner-bg);
}
.kh-map { width: 100%; height: 100%; }

/* Ghim giá kiểu Zillow */
.kh-pin {
  background: var(--kh-bg);
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r-full);
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 600;
  color: var(--kh-ink);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(6, 16, 44, .18);
  transition: background .15s, color .15s, transform .15s;
}
.kh-pin.is-on,
.kh-pin:hover { background: var(--kh-brand); color: #fff; border-color: var(--kh-brand); transform: scale(1.06); }
/* Leaflet bọc marker trong .leaflet-marker-icon — bỏ nền mặc định */
.leaflet-marker-icon.kh-pinwrap { background: none; border: none; }

/* Cụm ghim (gom nhiều tin gần nhau) — vòng tròn đếm số, bấm để tách */
.leaflet-marker-icon.kh-clusterwrap { background: none; border: none; }
.kh-cluster {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--kh-brand); color: #fff;
  font-size: 13.5px; font-weight: 600;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(6, 16, 44, .28);
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.kh-cluster.is-on,
.kh-cluster:hover { transform: scale(1.1); background: var(--kh-brand-hover); }

/* Dòng ghi nguồn © Mapbox/OSM: GIỮ (điều khoản 2 nhà bắt ghi nguồn — ẩn hẳn là
   rủi ro khoá chìa Mapbox khi lên host) nhưng làm MỜ + NHỎ cho đỡ đập vào mắt;
   rê chuột vào thì rõ lại để vẫn đọc/bấm được. Tiền tố "Leaflet |" đã bỏ ở bds.js. */
.kh-map .leaflet-control-attribution {
  font-size: 9px;
  opacity: .45;
  background: rgba(255, 255, 255, .6);
}
.kh-map .leaflet-control-attribution:hover { opacity: 1; }

.kh-map .leaflet-popup-content-wrapper { border-radius: var(--kh-r-md); }
.kh-map .leaflet-popup-content { margin: 10px 12px; font-family: var(--kh-font); font-size: 13px; font-weight: 500; }
.kh-map .leaflet-popup-content a { color: var(--kh-ink); }
.kh-map .leaflet-popup-content a:hover { color: var(--kh-brand); }

/* Thẻ đang rê chuột → ghim tương ứng nổi lên (và ngược lại).
   25/07: thẻ nay có khung viền nên vòng sáng chuyển ra QUANH CẢ THẺ. Để ở ảnh
   như cũ thì vòng 3px nằm đè lên viền thẻ, nhìn thành hai đường kẻ chồng nhau. */
/* 🔴 `:not(:hover)` là BẮT BUỘC, không phải cho đẹp. JS gắn `is-hi` NGAY khi rê
   chuột vào thẻ (để ghim trên bản đồ sáng theo). File này lại nạp SAU home.css và
   cùng độ ưu tiên với `.kh-card:hover` ⇒ nếu không loại trừ, luật này ĐÈ MẤT toàn
   bộ hiệu ứng rê chuột, thẻ trông phẳng lì.
   Tách hai việc:
     • rê chuột vào THẺ         → hiệu ứng nổi khối (khối "thẻ có khung" bên dưới)
     • rê chuột vào GHIM bản đồ → vòng sáng xanh ở đây, để tìm ra thẻ tương ứng  */
.kh-lsgrid--boxed .kh-card.is-hi:not(:hover) {
  border-color: var(--kh-brand);
  box-shadow: 0 0 0 3px var(--kh-brand-tint), var(--kh-sh-card);
}
/* Ngoài lưới có khung (vd thẻ tin liên quan ở trang chi tiết) vẫn dùng vòng sáng
   quanh ẢNH như trước, vì thẻ ở đó không có khung để mà viền. */
.kh-card.is-hi .kh-card__media { box-shadow: 0 0 0 3px var(--kh-brand), var(--kh-sh); }
.kh-lsgrid--boxed .kh-card.is-hi .kh-card__media { box-shadow: none; }

/* ==========================================================================
   4. Dưới 1200px: bản đồ ẩn, bật bằng nút nổi
   ========================================================================== */
@media (max-width: 1199px) {
  /* Chừa chỗ cho nút nổi: không có padding này thì thẻ cuối cùng VĨNH VIỄN bị nút
     "Xem bản đồ" che mất dòng địa chỉ, cuộn kiểu gì cũng không đọc được. */
  .kh-split { grid-template-columns: 1fr; padding-bottom: 88px; }
  .kh-mapcol {
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--kh-header-h) + var(--kh-fbar-h));
    bottom: 0;
    height: auto;
    border-radius: 0;
    border: none;
    z-index: 80;
    display: none;
  }
  body.kh-mapmode .kh-mapcol { display: block; }
  body.kh-mapmode .kh-split__list { display: none; }

  /* Bài kimholding (map fixed hở dải lộ chân trang): trong chế độ bản đồ, thanh
     lọc sticky CHẾT — cha <main> co còn ~0 vì danh sách ẩn, hết chỗ dính — nên
     ghim CỨNG theo viewport; chân trang (thứ duy nhất còn chiều cao trong luồng)
     giấu hẳn. Chốt thứ ba là KHOÁ CUỘN: khLockScroll trong bds.js lúc bật. */
  body.kh-mapmode .kh-fbar { position: fixed; top: var(--kh-header-h); left: 0; right: 0; }
  body.kh-mapmode .kh-footer { display: none; }

  .kh-mapfab {
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: 22px;
    z-index: 85;
    height: 44px; padding: 0 22px;
    display: inline-flex; align-items: center; gap: 8px;
    border: none; border-radius: var(--kh-r-full);
    background: var(--kh-ink); color: #fff;
    font-size: 14px; font-weight: 600;
    box-shadow: 0 12px 28px rgba(6, 16, 44, .3);
  }
  .kh-mapfab:hover { background: var(--kh-brand); color: #fff; }
}
@media (min-width: 1200px) {
  .kh-mapfab { display: none; }
}

/* ==========================================================================
   5. Phân trang + rỗng
   ========================================================================== */
/* .kh-pager CHUYỂN sang home.css — nó dùng ở CẢ trang blog (chỉ nạp home.css, không
   nạp bds.css) nên để ở đây thì phân trang blog hiện text trần "12›" không có nút. */

/* ==========================================================================
   6. Hộp lọc nâng cao (điện thoại: tấm trượt từ đáy)
   ========================================================================== */
.kh-modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; }
.kh-modal[hidden] { display: none; }
.kh-modal__ov { position: absolute; inset: 0; background: rgba(6, 16, 44, .45); }
.kh-modal__box {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: min(86dvh, 720px);
  display: flex; flex-direction: column;
  background: var(--kh-bg);
  border-radius: var(--kh-r-lg);
  box-shadow: 0 24px 60px rgba(6, 16, 44, .34);
  overflow: hidden;
}
.kh-modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--kh-line);
}
.kh-modal__head h2 { flex: 1; font-size: 17px; font-weight: 700; }
.kh-modal__x {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--kh-chip-bg); color: var(--kh-text);
  display: grid; place-items: center;
}
.kh-modal__x:hover { background: var(--kh-brand-tint); color: var(--kh-brand); }
.kh-modal__body { padding: 6px 18px 18px; overflow-y: auto; }
/* Footer theo mẫu batdongsan: "Đặt lại" là CHỮ trần bên trái · nút brand bên phải. */
.kh-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--kh-line);
  background: var(--kh-bg);
}
.kh-modal__foot .kh-btn-ghost,
.kh-fsub__foot .kh-btn-ghost {
  flex: none; padding: 0 8px; height: 44px;
  border: none; background: none;
  box-shadow: none;   /* lớp gốc (home.css) có bóng 1px — không dập là còn vệt mờ dưới chữ */
  font-weight: 600; color: var(--kh-text);
}
.kh-modal__foot .kh-btn-ghost:hover,
.kh-fsub__foot .kh-btn-ghost:hover { background: none; color: var(--kh-brand); }
/* Trong subpanel: ẩn chân modal chính — sub có chân riêng, 2 cặp nút là chồng nhau. */
.kh-modal.is-sub .kh-modal__foot { display: none; }
.kh-modal__apply {
  flex: 0 1 300px; height: 46px;
  border: none; border-radius: var(--kh-r);
  background: var(--kh-brand); color: #fff;
  font-size: 14.5px; font-weight: 600;
  display: grid; place-items: center;
}
.kh-modal__apply:hover { background: var(--kh-brand-hover); color: #fff; }

/* Nhóm tiêu chí: KHÔNG kẻ ngang giữa các nhóm (mẫu chỉ dùng khoảng trắng + nhãn đậm). */
.kh-fgroup { padding: 15px 0 4px; }
.kh-fgroup__t { font-size: 14px; font-weight: 700; color: var(--kh-ink); margin-bottom: 10px; }
.kh-fchips { display: flex; flex-wrap: wrap; gap: 9px; }
.kh-fchip {
  height: 38px; padding: 0 16px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r-full);
  background: var(--kh-bg);
  color: var(--kh-text-2);
  font-size: 13.5px; font-weight: 500;
}
.kh-fchip:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-fchip.is-on { background: var(--kh-brand-tint); border-color: var(--kh-brand); color: var(--kh-brand); }

/* ── Panel con (drill) trong hộp Lọc — theo mẫu batdongsan user chốt 24/07 ──
   Màn chính: nhãn nhóm đậm + Ô FIELD bo tròn (icon · giá trị · ›).
   Panel con: header hộp đổi thành [‹ Tên nhóm ✕] (JS lo), ô tìm dạng input,
   dòng radio TRÒN BÊN PHẢI + kẻ chỉ mảnh giữa dòng, đang chọn = chữ đậm + tròn đặc brand. */
.kh-fdrill {
  width: 100%; min-height: 50px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r);
  /* Tô xám nhạt giống ô chọn — cùng là "ô bấm vào để chọn" thì phải nhìn giống nhau.
     Để trắng trên nền hộp trắng là mắt không bắt ra ngay chỗ bấm được. */
  background: var(--kh-bg-alt);
  font-size: 13.5px; color: var(--kh-text);
  text-align: left;
}
.kh-fdrill:hover { border-color: var(--kh-brand); background: var(--kh-bg); }
.kh-fdrill > svg { flex: none; color: var(--kh-muted-2); }
.kh-fdrill__v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-fdrill__v.is-set { color: var(--kh-brand); font-weight: 600; }

.kh-fsub__back {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--kh-chip-bg); color: var(--kh-text);
  display: grid; place-items: center; flex: none;
}
.kh-fsub__back:hover { background: var(--kh-brand-tint); color: var(--kh-brand); }
.kh-fsub__search {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 14px; margin: 12px 0 2px;
  border: 1px solid var(--kh-line-strong); border-radius: var(--kh-r);
  background: var(--kh-bg);
}
.kh-fsub__search svg { color: var(--kh-muted-2); flex: none; }
.kh-fsub__search input { border: none; outline: none; width: 100%; font-size: 13.5px; background: none; }
.kh-fsub__list { list-style: none; margin: 2px 0 6px; padding: 0; }
.kh-fsub__list li + li { border-top: 1px solid var(--kh-line); }
.kh-fsub__row {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px;
  border: none; background: none;
  font-size: 14px; color: var(--kh-text);
  text-align: left;
}
.kh-fsub__row:hover { color: var(--kh-brand); }
.kh-fsub__row.is-on { color: var(--kh-ink); font-weight: 700; }
.kh-fsub__lbl { flex: 1; min-width: 0; }
.kh-fsub__dot {
  flex: none; width: 20px; height: 20px;
  border: 2px solid var(--kh-line-strong); border-radius: 50%;
  position: relative;
}
/* 25/07: đổi từ "chấm tròn đặc" sang "vòng xanh + dấu tích trắng" cho GIỐNG
   ô chọn ở trang chủ (.kh-apick__item.is-on). Cùng một site mà chỗ chấm chỗ tích
   thì người dùng phải học 2 lần. Ảnh tích nhúng thẳng vào CSS, không cần thẻ con. */
.kh-fsub__row.is-on .kh-fsub__dot {
  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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
/* Bỏ chấm đặc cũ, nếu không thì tích nằm đè lên chấm. */
.kh-fsub__row.is-on .kh-fsub__dot::after { content: none; }

/* Ô tick VUÔNG cho sub-panel ĐA-CHỌN (Tầm nhìn) — phân biệt dot tròn (đơn-chọn). */
.kh-fsub__chk {
  flex: none; width: 20px; height: 20px;
  border: 2px solid var(--kh-line-strong); border-radius: 5px;
}
.kh-fsub__row.is-on .kh-fsub__chk {
  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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Nhóm hộp Lọc CHỈ HIỆN Ở ĐIỆN THOẠI — dự án: "Trạng thái dự án" (thanh ≤767 ẩn
   ô Trạng thái nên tiêu chí vào hộp; desktop có ô riêng trên hàng, ẩn trong hộp
   cho khỏi lặp đôi). */
.kh-fgroup--mb { display: none; }

@media (max-width: 767px) {
  .kh-modal { place-items: end center; }
  .kh-fgroup--mb { display: block; }
  /* 30/07 user chốt: hộp Lọc mở TRỌN MÀN HÌNH (trước là tấm 86dvh). height cứng
     100dvh để hộp không nhảy khi đổi tiêu chí; hết hở mép nên bỏ bo góc. */
  .kh-modal__box {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .kh-modal__apply { flex: 1; }   /* màn hẹp: nút Áp dụng chiếm hết phần còn lại */
}

/* Nút "Lưu tìm kiếm" — đứng cuối THANH LỌC trang kết quả (P6b) */
.kh-savesearch {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  font: inherit; font-size: 13.5px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r);
  color: var(--kh-text-2);
  white-space: nowrap;
  cursor: pointer;
}
.kh-savesearch:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-savesearch.is-on { border-color: var(--kh-brand); background: var(--kh-brand-tint); color: var(--kh-brand); }
.kh-savesearch[disabled] { opacity: .6; cursor: default; }
/* Trong thanh lọc: KHÔNG co lại khi hàng chật (mặc định của flex là cho co).
   Ô tìm mới là thứ nhường chỗ, nhãn nút phải luôn đọc được. */
.kh-fbar__in > .kh-savesearch { flex: none; }
/* 767 (trước là 640): thanh lọc điện thoại 2 hàng không có chỗ cho nút này. */
@media (max-width: 767px) { .kh-savesearch { display: none; } }

/* ==========================================================================
   Thẻ CÓ KHUNG — chỉ ở 2 trang danh sách: nhà đất bán/cho thuê · dự án
   ==========================================================================
   🔴 PHẠM VI: khoá dưới `.kh-lsgrid--boxed`, lớp này chỉ được gắn ở
   archive-listing.php và archive-du-an.php. KHÔNG sửa thẳng `.kh-card` trong
   home.css: class đó dùng chung với trang chủ, trang chi tiết tin, chi tiết dự
   án, hồ sơ môi giới — sửa ở đó là đổi lây sang những trang không được yêu cầu.
   (Đã trót làm một lần rồi, đừng lặp lại.)

   Khuôn lấy đúng theo thẻ bài viết .kh-bcard / thẻ môi giới .kh-ag:
   nền trắng · viền 1px · bo 16px. */
.kh-lsgrid--boxed .kh-card {
  display: flex; flex-direction: column;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-lg);
  /* Bóng mờ lúc nghỉ: nền trang cũng màu trắng, không có bóng thì thẻ chìm vào trang. */
  box-shadow: var(--kh-sh);
}

/* 🔴 KHÔNG dùng `overflow: hidden` để cắt góc ảnh như .kh-bcard làm. Thẻ này có
   vùng đệm vô hình `::after` thò xuống 8px (chống rung khi hover, xem cuối
   home.css) — overflow:hidden cắt mất vùng đệm và bệnh rung quay lại.
   Thay vào đó bo 2 góc TRÊN ngay trên tấm ảnh, trừ 1px viền để mép ảnh trùng
   khít mép trong của viền. Ảnh vốn đã tự cắt phần thừa bằng overflow của nó. */
.kh-lsgrid--boxed .kh-card__media {
  border-radius: calc(var(--kh-r-lg) - 1px) calc(var(--kh-r-lg) - 1px) 0 0;
  box-shadow: none;
}
.kh-lsgrid--boxed .kh-card__body { padding: 14px; }

/* Rê chuột: để BÓNG làm việc. KHÔNG đổi viền sang xanh — viền xanh đọc ra thành
   "đang được chọn" chứ không phải "nổi lên", và nó át mất cảm giác chiều sâu. */
.kh-lsgrid--boxed .kh-card:hover {
  border-color: var(--kh-line-hover);
  box-shadow: var(--kh-sh-card);
}
/* Ảnh phóng nhẹ trong khung; khung đã có overflow nên phần thừa bị cắt gọn. */
.kh-lsgrid--boxed .kh-card__media img { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.kh-lsgrid--boxed .kh-card:hover .kh-card__media img { transform: scale(1.07); }

/* ==========================================================================
   Cuộn tới đâu hiện tới đó (26/07)
   ==========================================================================
   Máy chủ trả sẵn 40 tin; JS gắn .is-chuahien cho phần chưa tới lượt.
   🔴 KHÔNG viết luật ngược lại (mặc định ẩn, JS mới mở): máy không chạy JS —
   kể cả con bọ của Google — sẽ chỉ thấy 20 tin trên 392 trang khu vực. */
.kh-lsgrid > .kh-card.is-chuahien { display: none; }

/* Điểm neo cuộn — 3 chấm nảy, đủ để người dùng biết còn tin phía dưới.
   JS chèn ngay sau lưới thẻ và tự ẩn khi đã mở hết. */
.kh-more {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 26px 0 6px;
}
.kh-more[hidden] { display: none; }
.kh-more__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--kh-line-strong);
  animation: kh-more-nay 1s ease-in-out infinite;
}
.kh-more__dot:nth-child(2) { animation-delay: .15s; }
.kh-more__dot:nth-child(3) { animation-delay: .3s; }
@keyframes kh-more-nay {
  0%, 60%, 100% { transform: translateY(0);    background: var(--kh-line-strong); }
  30%           { transform: translateY(-5px); background: var(--kh-brand); }
}
/* Người đã bật "giảm chuyển động" trong hệ điều hành thì đứng yên, chỉ đổi màu. */
@media (prefers-reduced-motion: reduce) {
  .kh-more__dot { animation: none; }
}

/* ==========================================================================
   Panel lọc kiểu chọn-rồi-Áp-dụng (26/07)
   ==========================================================================
   Danh sách lựa chọn cuộn được, chân panel GHIM ở đáy để nút Áp dụng luôn thấy —
   ô "Khu vực" có 95 phường/xã, để chân trôi theo là phải cuộn hết mới bấm được. */
.kh-fdd__panel--pick { padding: 0; display: flex; flex-direction: column; max-height: 66vh; }
.kh-fdd__opts { flex: 1 1 auto; overflow-y: auto; padding: 6px; min-height: 0; }
.kh-fdd__panel--pick .kh-apanel__list { padding: 6px; }
/* Dropdown "Loại nhà đất" ở filter row (user 02/08): cây chi tiết trong dropdown — nới rộng
   cho vừa loại con + tick; vùng cây tự cuộn, chân Đặt lại/Áp dụng ghim đáy (khung --pick lo
   flex column + max-height). */
.kh-fdd__panel--loai { min-width: 320px; }
.kh-loairow__tree { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 6px; }
/* Dropdown "Loại nhà đất" ở hàng lọc: nén gọn CHO CHUỘT (desktop) — hàng thấp hơn +
   ô tick nhỏ hơn + thụt nhóm hẹp lại. Chỉ dưới (pointer: fine) nên cảm ứng (mobile/tablet)
   GIỮ 40px/16px, tap-target không tụt ngưỡng. Chỉ bó trong .kh-loairow__tree → modal Lọc
   nâng cao (cùng cây kh-tpick) KHÔNG đổi. Vẫn dùng accent brand + bo góc gốc = đồng bộ. */
@media (pointer: fine) {
  .kh-loairow__tree .kh-tpick__row { min-height: 32px; padding: 2px 8px; gap: 8px; font-size: 13.5px; }
  .kh-loairow__tree .kh-tpick__row input { width: 14px; height: 14px; flex: 0 0 14px; }
  .kh-loairow__tree .kh-tpick__grp { margin-top: 3px; padding-top: 3px; }
  .kh-loairow__tree .kh-tpick__kids { padding-left: 20px; }
}

.kh-fdd__foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--kh-line);
  background: var(--kh-bg);
}
.kh-fdd__reset {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--kh-muted-2);
  padding: 8px 4px;
}
.kh-fdd__reset:hover { color: var(--kh-danger); }
.kh-fdd__apply {
  border: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: #fff; background: var(--kh-brand);
  padding: 9px 22px;
  border-radius: var(--kh-r);
  transition: filter .15s;
}
.kh-fdd__apply:hover { filter: brightness(1.08); }

/* Dòng đang chọn: thêm dấu tích cho rõ, vì bấm xong KHÔNG đi ngay như trước —
   không có dấu hiệu nào thì người dùng tưởng bấm hụt. */
.kh-fdd__opts a.is-on,
.kh-fdd__panel--pick .kh-apanel__list a.is-on {
  position: relative;
  padding-right: 30px;
}
.kh-fdd__opts a.is-on::after,
.kh-fdd__panel--pick .kh-apanel__list a.is-on::after {
  content: '';
  position: absolute; right: 12px; top: 50%;
  width: 5px; height: 9px;
  border: solid var(--kh-brand);
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}

/* ── Ô "Khu vực" (trang danh sách + dự án) — hàng kiểu RADIO như TRANG CHỦ ────────
   User 03/08 "khu vực giống trang chủ": khớp .kh-apick__item của trang chủ — vòng
   tròn bên phải mỗi dòng (rỗng = chưa chọn · tròn đặc xanh + tích trắng = đang
   chọn), bỏ nền tô + dấu ✓ nhỏ. CHỈ áp cho picker KHU VỰC:
     · trang danh sách: .kh-apanel__list (đã có ô tìm + 95 phường/xã)
     · trang dự án:      .kh-fdd--kv .kh-fdd__opts (22 khu vực lớn, lọc theo vùng)
   Giá/Diện tích/Loại/Trạng thái KHÔNG đụng (giữ dấu ✓ nhỏ ở luật trên). */
.kh-apanel__list a[data-kh-opt],
.kh-fdd--kv .kh-fdd__opts a[data-kh-opt] {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.kh-apanel__list a[data-kh-opt]::after,
.kh-fdd--kv .kh-fdd__opts a[data-kh-opt]::after {
  content: ""; flex: none; position: static;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--kh-line-strong);
  background-color: transparent;
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  transform: none; right: auto; top: auto;
  transition: border-color .12s, background-color .12s;
}
.kh-apanel__list a[data-kh-opt]:hover::after,
.kh-fdd--kv .kh-fdd__opts a[data-kh-opt]:hover::after { border-color: var(--kh-brand-pale); }
.kh-apanel__list a[data-kh-opt].is-on,
.kh-fdd--kv .kh-fdd__opts a[data-kh-opt].is-on {
  background: none; color: var(--kh-brand); font-weight: 700;
  position: static; padding-right: 12px;
}
.kh-apanel__list a[data-kh-opt].is-on::after,
.kh-fdd--kv .kh-fdd__opts a[data-kh-opt].is-on::after {
  position: static;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid 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");
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  transform: none; right: auto; top: auto;
}

/* ==========================================================================
   Hộp lọc nâng cao — bản theo mẫu kimholding (26/07)
   ========================================================================== */

/* Loại tin: HAI nút to chia đôi, không phải chip nhỏ — đây là lựa chọn gốc
   của cả trang (bán hay thuê), phải nặng ký hơn mọi tiêu chí khác. */
.kh-fduo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kh-fduo__b {
  height: 46px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r-md);
  background: var(--kh-bg);
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--kh-text-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.kh-fduo__b:hover { border-color: var(--kh-brand); color: var(--kh-brand); }
.kh-fduo__b.is-on { border-color: var(--kh-brand); background: var(--kh-brand-tint); color: var(--kh-brand); }

/* Chip loại hình có icon đứng trước chữ */
.kh-fchip { display: inline-flex; align-items: center; gap: 7px; }
.kh-fchip__ic { flex: none; opacity: .75; }
.kh-fchip.is-on .kh-fchip__ic { opacity: 1; }
/* Pill số (phòng ngủ / phòng tắm): ô đều nhau, tròn hơn */
.kh-fchips--num .kh-fchip { min-width: 52px; justify-content: center; border-radius: var(--kh-r-full); }
/* Nút "Studio" bị JS ẩn theo loại đang chọn — [hidden] thua display:inline-flex của
   .kh-fchip nếu không đè lại (cùng bẫy đã dính ở .kh-tpick__row[hidden]). */
.kh-fchip[hidden] { display: none; }

/* Tiêu đề nhóm có nút "Tất cả" nằm bên phải (dùng cho 2 vòng la bàn) */
.kh-fgroup__t--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kh-fgroup__all {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--kh-brand);
  padding: 2px 0;
}
.kh-fgroup__all.is-on { color: var(--kh-muted-2); }

/* ── Vòng la bàn 8 hướng ────────────────────────────────────────────────
   Múi vẽ bằng <path> hình quạt để khít nhau không hở kẽ (8 thẻ vuông xoay
   bằng CSS thì góc nào cũng lòi mép). Chữ nằm giữa múi, KHÔNG xoay theo —
   xoay chữ thì 4 hướng dưới bị lộn ngược, đọc không ra. */
.kh-compass { display: flex; justify-content: center; padding: 4px 0 2px; }
.kh-compass svg { width: 220px; height: 220px; max-width: 100%; }
.kh-compass__seg path {
  fill: var(--kh-bg-alt);
  stroke: var(--kh-bg);
  stroke-width: 2;
  transition: fill .15s;
}
.kh-compass__seg text {
  font-size: 12px; font-weight: 600;
  fill: var(--kh-text-2);
  pointer-events: none;          /* bấm vào chữ vẫn tính là bấm vào múi */
  transition: fill .15s;
}
.kh-compass__seg { cursor: pointer; }
.kh-compass__seg:hover path { fill: var(--kh-brand-tint-2); }

/* Múi đang chọn: TÔ ĐẶC màu thương hiệu, chữ trắng đậm — không phải nền nhạt kèm
   viền. Trên vòng 8 múi sát nhau, viền mảnh nhìn không ra ngay múi nào đang chọn;
   tô đặc thì liếc một cái là thấy. */
.kh-compass__seg.is-on path { fill: var(--kh-brand); stroke: var(--kh-bg); }
.kh-compass__seg.is-on text { fill: #fff; font-weight: 700; }

/* 🔴 Bỏ vòng focus mặc định. Trình duyệt vẽ nó quanh HỘP BAO CHỮ NHẬT của phần tử
   SVG — múi hình quạt nằm lọt trong một khung đen to đùng, nhìn như lỗi giao diện
   (đo được: `outline: rgb(16,16,16) auto 5px`).
   KHÔNG bỏ trắng dấu hiệu focus: thay bằng viền đậm quanh chính múi ở luật dưới. */
.kh-compass__seg:focus { outline: none; }
.kh-compass__seg:focus-visible { outline: none; }
/* Viền focus dùng màu MỰC, không dùng màu thương hiệu: múi đang chọn đã tô đặc màu
   thương hiệu rồi, viền cùng màu là tàng hình. Màu mực nổi trên cả nền xám lẫn nền xanh. */
.kh-compass__seg:focus-visible path { stroke: var(--kh-ink); stroke-width: 3; }

@media (max-width: 480px) {
  .kh-compass svg { width: 200px; height: 200px; }
}

/* ── Panel con "Khu vực & Dự án": 2 ô chọn + chip khu vực phổ biến ──────── */
/* 🔴 Lề NGANG = 0. Thân hộp (.kh-modal__body) đã có sẵn 18px hai bên; khai thêm
   18px ở đây là CỘNG DỒN thành 36px — panel con thụt vào gấp đôi màn chính, nhìn
   như hai trang khác nhau (đo được 36 vs 18). Chỉ khai lề DỌC ở đây. */
.kh-fsub__body { padding: 10px 0 16px; display: flex; flex-direction: column; gap: 16px; }

.kh-ffield { display: flex; flex-direction: column; gap: 7px; }
.kh-ffield__l { font-size: 13px; font-weight: 600; color: var(--kh-text-2); }

/* Ô chọn kế thừa kiểu <select> chung ở tokens.css (mũi tên, bo góc, chống iOS tự
   phóng). Ở đây thêm phần làm nó ĐỌC RA LÀ Ô NHẬP:

   🔴 Nền TÔ XÁM NHẠT, không để trắng. Hộp lọc nền trắng, ô cũng trắng, viền lại
   nhạt → nhìn như chưa được css (user báo đúng). Tô nền là mắt bắt ngay ra chỗ
   bấm được, không cần nhìn kỹ mới thấy đường viền.

   🔴 Dùng `background-color` LONGHAND. Viết tắt `background:` sẽ xoá mất ảnh nền —
   tức mũi tên xổ xuống do luật chung vẽ (đã dính bẫy này 2 lần trong dự án). */
.kh-ffield__s {
  height: 46px; width: 100%;
  background-color: var(--kh-bg-alt);
  border-color: var(--kh-line);
  font-weight: 500;
}
.kh-ffield__s:hover { border-color: var(--kh-line-strong); }
/* Đang thao tác thì nền trắng lên — báo "ô này đang mở", giống ô tìm ở thanh lọc. */
.kh-ffield__s:focus { background-color: var(--kh-bg); }
.kh-ffield__s:disabled { color: var(--kh-muted-2); cursor: not-allowed; opacity: .7; }

.kh-fpop .kh-fgroup__t { margin-bottom: 9px; }
/* Chip phổ biến: tên khu vực + số tin nhạt hơn đứng sau, giống mẫu kimholding. */
.kh-fchip--pop { gap: 8px; }
.kh-fchip__n { font-size: 12.5px; font-weight: 500; color: var(--kh-muted-2); }
.kh-fchip--pop.is-on .kh-fchip__n { color: inherit; opacity: .8; }

/* ── Combobox: ô nhập + danh sách TỰ VẼ ─────────────────────────────────
   Thay cho <select>. Danh sách xổ của <select> là giao diện gốc trình duyệt,
   CSS không chạm được — nền xanh chói, thanh cuộn hệ thống, sai font. */
.kh-combo { position: relative; }
.kh-combo__box {
  display: flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 12px 0 13px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r);
  background: var(--kh-bg-alt);
  transition: border-color .15s, background-color .15s;
}
.kh-combo:hover .kh-combo__box { border-color: var(--kh-line-strong); }
.kh-combo.is-open .kh-combo__box,
.kh-combo__box:focus-within { border-color: var(--kh-brand); background: var(--kh-bg); }

.kh-combo__in {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--kh-ink);
}
.kh-combo__in::placeholder { color: var(--kh-placeholder); font-weight: 400; }
.kh-combo__in:disabled { cursor: not-allowed; }

.kh-combo__x {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: var(--kh-line); color: var(--kh-text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.kh-combo__x:hover { background: var(--kh-danger); color: #fff; }
.kh-combo__x[hidden] { display: none; }
.kh-combo__chev { flex: none; color: var(--kh-muted-2); transition: transform .18s; }
.kh-combo.is-open .kh-combo__chev { transform: rotate(180deg); }

.kh-combo__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 30;
  max-height: 260px; overflow-y: auto;
  padding: 6px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-md);
  box-shadow: var(--kh-sh-float);
}
.kh-combo__menu[hidden] { display: none; }
.kh-combo__opt {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  border: none; background: none; cursor: pointer;
  border-radius: var(--kh-r-sm);
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--kh-text-2);
}
.kh-combo__opt[hidden] { display: none; }
.kh-combo__opt:hover { background: var(--kh-brand-tint-2); color: var(--kh-brand); }
.kh-combo__opt.is-on { background: var(--kh-brand-tint); color: var(--kh-brand); }
.kh-combo__empty { padding: 14px 12px; font-size: 13.5px; color: var(--kh-muted-2); text-align: center; }
.kh-combo__empty[hidden] { display: none; }

/* ── "Tin gợi ý dành cho bạn" — hiện khi lọc ra 0 kết quả ───────────────── */
.kh-suggest { margin-top: 30px; }
.kh-suggest__t { font-size: 18px; font-weight: 700; color: var(--kh-ink); letter-spacing: -.2px; }
.kh-suggest__s { margin: 5px 0 18px; font-size: 13.5px; font-weight: 500; color: var(--kh-muted); }
/* Lưới gợi ý dùng lại .kh-lsgrid--boxed nên thẻ giống hệt thẻ ở danh sách chính —
   người dùng không phải học lại cách đọc một loại thẻ thứ hai. */

/* ═══════════ W3 — panel cây hàng lọc + mục lọc SINH MÁY từ schema ═══════════ */
/* (Panel cây --tree + treewrap đã GỠ 01/08 — ô Loại giờ là danh sách NHÓM link,
   khuôn .kh-fdd__panel--gpick ở cuối file.) */

/* Ô chữ (Tòa/Block · KCN) + ô khoảng số min–max của mục sinh máy. 16px chống iOS zoom. */
.kh-fgroup--auto .kh-ftext { width: 100%; max-width: 320px; height: 40px; border: 1px solid var(--kh-line); border-radius: var(--kh-r-sm); padding: 0 12px; font: inherit; font-size: 16px; background: var(--kh-bg); }
.kh-frange { display: flex; align-items: center; gap: 8px; }
.kh-frange input { width: 132px; max-width: 40vw; height: 40px; border: 1px solid var(--kh-line); border-radius: var(--kh-r-sm); padding: 0 12px; font: inherit; font-size: 16px; background: var(--kh-bg); }
.kh-frange__sep { color: var(--kh-muted); }


/* ═══ Công tắc "Bản đồ" (user 01/08 — thay pill cũ 408-422, khối cuối file đè khối trước):
   nhãn + track/knob. BẬT = bản đồ hiện, công tắc nằm GÓC PHẢI TRÊN bản đồ (đi theo
   cột sticky). TẮT = còn danh sách, công tắc quay về thanh công cụ để bật lại
   (JS phát body.kh-ls-nomap vì toolbar đứng TRƯỚC split, CSS không với ngược được). */
.kh-mapsw { border: 0; background: transparent; padding: 0 2px; gap: 8px; color: var(--kh-ink); font-weight: 600; }
.kh-mapsw:hover { border-color: transparent; color: var(--kh-brand); }
.kh-mapsw.is-on { border-color: transparent; background: transparent; color: var(--kh-ink); }
.kh-mapsw__tg {
  position: relative; width: 36px; height: 20px; flex: none;
  border-radius: var(--kh-r-full);
  background: var(--kh-line-strong);
  transition: background-color .15s;
}
.kh-mapsw__tg::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16, 34, 78, .35);
  transition: left .15s;
}
.kh-mapsw.is-on .kh-mapsw__tg { background: var(--kh-ink); }
.kh-mapsw.is-on .kh-mapsw__tg::after { left: 18px; }
/* Bản nằm TRÊN bản đồ: viên trắng nổi; z 900 > lớp Leaflet cao nhất (control 800). */
.kh-mapsw--onmap {
  position: absolute; top: 12px; right: 12px; z-index: 900;
  height: 38px; padding: 0 13px;
  background: var(--kh-bg); border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-full);
  box-shadow: 0 2px 10px rgba(16, 34, 78, .14);
}
.kh-mapsw--onmap.is-on { background: var(--kh-bg); }
.kh-mapsw--onmap:hover { border-color: var(--kh-brand); }
/* ≥1200: toolbar CHỈ hiện công tắc khi bản đồ tắt. */
@media (min-width: 1200px) {
  .kh-toolbar__r .kh-mapsw { display: none; }
  body.kh-ls-nomap .kh-toolbar__r .kh-mapsw { display: inline-flex; }
}

/* ═══ Ô "Loại nhà đất" hàng lọc = danh sách NHÓM dạng link (mô hình nhatot, 01/08).
   Khuôn hàng thừa hưởng .kh-fdd__panel a (đệm/bo/hover/is-on sẵn) — chỉ thêm flex+icon. */
.kh-fdd__panel--gpick { width: 264px; }
.kh-fdd__panel--gpick .kh-gplink { display: flex; align-items: center; gap: 9px; }
.kh-fdd__panel--gpick .kh-gplink svg { flex: 0 0 auto; color: var(--kh-muted); }
.kh-fdd__panel--gpick .kh-gplink.is-on svg { color: var(--kh-brand); }

/* ═══ Cây loại kh-tpick — nay CHỈ sống trong SUBPANEL "Loại bất động sản" của hộp Lọc
   (batdongsan-style, 01/08). Ô tick BÊN PHẢI hàng (order + margin-left auto — DOM giữ
   input-trước-span cho JS/submit); icon trái; nhóm 1-loại (Phòng trọ) in phẳng. */
.kh-tpick { font-size: 14px; }
.kh-tpick__row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-radius: var(--kh-r-sm); cursor: pointer; }
.kh-tpick__row:hover { background: var(--kh-chip-bg); }
.kh-tpick__row input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--kh-brand); cursor: pointer; margin: 0 0 0 auto; order: 2; }
.kh-tpick__row span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kh-tpick__row span svg { flex: 0 0 auto; color: var(--kh-muted); }
.kh-tpick__all { font-weight: 500; }
.kh-tpick__grp { border-top: 1px solid var(--kh-line); margin-top: 4px; padding-top: 4px; }
.kh-tpick__ghead { font-weight: 600; }
.kh-tpick__kids { padding-left: 24px; }
.kh-tpick__kids--flat { padding-left: 0; }   /* nhóm 1-loại trùng tên: con in phẳng, không thụt */
/* Nhóm chỉ-nhãn (BĐS thương mại): tiêu đề mục, không phải hàng bấm. */
.kh-tpick__ghead--plain { cursor: default; }
.kh-tpick__ghead--plain:hover { background: transparent; }
/* Hàng ẩn (loại data-only chỉ-để-gắn-tin, vd kho xưởng kết hợp): [hidden] thua
   display:flex của .kh-tpick__row nếu không đè lại — bẫy đã ghi sổ. */
.kh-tpick__row[hidden] { display: none; }

/* Thanh kéo ngưỡng tối thiểu (Đường/hẻm rộng — 01/08). */
.kh-fslide { display: flex; align-items: center; gap: 14px; }
.kh-fslide input[type="range"] { flex: 1; accent-color: var(--kh-brand); cursor: pointer; }
.kh-fslide__v { flex: none; min-width: 64px; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--kh-ink); }

/* Chân subpanel Loại: dính SÁT đáy modal. Body có đệm 18px ba phía — chân phải TRÀN
   qua đệm hông (margin âm) + body bỏ đệm đáy khi ở sub, không thì đệm đáy thành khe
   hở 18px lộ hàng cuộn phía sau (user bắt 01/08). */
.kh-fsub__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; bottom: 0;
  margin: 10px -18px 0;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--kh-line);
  background: var(--kh-bg);
}
.kh-modal.is-sub .kh-modal__body { padding-bottom: 0; }

/* ══ KHOẢNG GIÁ: ô Từ/Đến + thanh kéo 2 đầu (01/08) ═════════════════════════
   Một khuôn duy nhất dùng cho CẢ ô "Mức giá" trên hàng lọc lẫn mục "Khoảng giá"
   trong hộp Lọc nâng cao — sửa ở đây là hai chỗ cùng đổi, không lệch nhau. */
.kh-prng { flex: none; padding: 14px 14px 6px; }
.kh-fdd__panel--price { min-width: 340px; }
/* Dòng "giá tự do" trong panel là <a hidden> — mà .kh-fdd__panel a đặt display:block
   nên [hidden] thua nếu không đè lại (đúng bẫy đã dính ở .kh-tpick__row[hidden]). */
.kh-fdd__panel a[hidden] { display: none; }

.kh-prng__ins { display: flex; align-items: flex-end; gap: 10px; }
.kh-prng__f { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; cursor: text; }
.kh-prng__l { font-size: 12.5px; font-weight: 600; color: var(--kh-text-2); }
.kh-prng__in {
  display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 10px;
  border: 1px solid var(--kh-line); border-radius: var(--kh-r-sm);
  background: var(--kh-bg);
  transition: border-color .15s ease;
}
.kh-prng__in:hover { border-color: var(--kh-line-strong); }
.kh-prng__in:focus-within { border-color: var(--kh-brand); }
/* min-width:0 để ô co được trong flex — thiếu là ô đẩy rộng panel ra ngoài màn. */
.kh-prng__in input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: none; outline: none; background: none;
  font: inherit; font-size: 14px; color: var(--kh-ink);
}
.kh-prng__in input::placeholder { color: var(--kh-placeholder); font-weight: 400; }
.kh-prng__in i { flex: none; font-style: normal; font-size: 12.5px; color: var(--kh-muted); }
.kh-prng__ar { flex: none; padding-bottom: 11px; color: var(--kh-muted-2); font-size: 14px; }

/* Thanh kéo 2 đầu: 2 <input type=range> chồng lên nhau, chỉ NÚM ăn chuột
   (pointer-events) — không thì thanh trên che mất thanh dưới, kéo được 1 đầu. */
.kh-prng__sl { position: relative; height: 30px; margin-top: 10px; }
.kh-prng__tr {
  position: absolute; left: 9px; right: 9px; top: 13px; height: 4px;
  border-radius: 4px; background: var(--kh-line); overflow: hidden;
}
.kh-prng__tr > i { position: absolute; top: 0; height: 100%; background: var(--kh-brand); }
.kh-prng__sl input[type="range"] {
  position: absolute; left: 0; top: 7px; width: 100%; height: 16px; margin: 0;
  background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.kh-prng__sl input[type="range"]:focus { outline: none; }
.kh-prng__sl input[type="range"]::-webkit-slider-runnable-track { background: none; height: 16px; }
.kh-prng__sl input[type="range"]::-moz-range-track { background: none; height: 16px; }
.kh-prng__sl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; margin-top: -1px;
  border-radius: 50%; background: #fff; border: 2px solid var(--kh-brand);
  box-shadow: var(--kh-sh-card); cursor: grab;
}
.kh-prng__sl input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 2px solid var(--kh-brand);
  box-shadow: var(--kh-sh-card); cursor: grab;
}
.kh-prng__sl input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.kh-prng__sl input[type="range"]:focus-visible::-webkit-slider-thumb { border-color: var(--kh-brand-hover); }
/* Núm "đến" nằm trên để 2 núm chạm nhau vẫn tách ra được. */
.kh-prng__sl [data-kh-prng-hi] { z-index: 2; }

/* Trong hộp Lọc nâng cao: khối nằm ngay trên danh sách mốc, có kẻ ngăn cho rõ 2 lối. */
[data-kh-adv-sub="gia"] .kh-prng { padding: 4px 0 14px; border-bottom: 1px solid var(--kh-line); }

@media (max-width: 767px) {
  /* iOS tự phóng to cả trang khi chạm ô chữ nhỏ hơn 16px — luật đã áp cho ô tìm
     của thanh lọc, ô giá phải theo, không thì bấm vào là trang nhảy phóng. */
  .kh-prng__in input { font-size: 16px; }
  .kh-prng__in { height: 44px; }
  .kh-prng__sl { height: 34px; }
  .kh-prng__sl input[type="range"] { top: 9px; }
  .kh-prng__tr { top: 15px; }
}