/* ════════════════════════════════════════════════════════════════
   NBRE · components.css — showcase, legend, dossier, cards, filter, pager, favourites, score, collection
   Tách từ styles.css. THỨ TỰ NỐI (cascade) trong index.html:
   base → layout → components → estate-detail → editorial → detail-modules → overlays → theme-light. KHỐI light-theme override
   nằm CUỐI theme-light.css — đừng đảo thứ tự <link>.
   ════════════════════════════════════════════════════════════════ */

/* ── NETFLIX-STYLE SHOWCASE ──────────────────────────────────── */
.showcase {
  /* Dải đáy hero chứa 3 vật thể nổi: số liệu (trái) · panel này (phải) · nút Bộ sưu tập
     (fixed, z-500). Panel PHẢI đậu TRÊN nút đó — nút cao ~51px + lề 2rem → 6rem là đủ hở.
     Và chỉ rộng 40vw để không đụng dòng số liệu ở các khổ ~980–1100. */
  --accent: var(--gold);
  position: absolute;
  right: clamp(0.3rem, 0.8vw, 0.6rem);
  bottom: 6rem;
  z-index: 13;
  width: min(520px, 40vw);
  /* CAO CỨNG 146px trong khi nội dung cần 170–185px → khối đầu (TÊN tài sản + GIÁ VNĐ) bị
     đẩy lên trên và cắt mất: panel giới thiệu tài sản mà không cho biết tài sản nào, giá bao
     nhiêu (chỉ còn dòng ≈ USD). Nay cao theo nội dung, 146px chỉ còn là SÀN. */
  min-height: 146px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  pointer-events: none;
  background: color-mix(in srgb, var(--nbre-black) 62%, transparent);
  backdrop-filter: blur(16px);
  box-shadow:
    0 30px 70px -30px var(--ink),
    0 0 0 1px color-mix(in srgb, var(--nbre-bronze) 5%, transparent);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.showcase.is-in {
  opacity: 1;
  transform: none;
}
.showcase__media {
  position: relative;
  flex: 0 0 150px;
  overflow: hidden;
}
.showcase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--nbre-black) 65%, transparent));
}
.showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) brightness(0.9);
  display: block;
}
.showcase__info {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
/* title already states the district, so drop the bulky rows */
.showcase__live,
.showcase__badge,
.showcase__desc,
.showcase__loc {
  display: none;
}
/* head: eye-catching title + clearly-visible price */
.showcase__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.showcase__title {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-title);
  margin: 0;
  color: var(--text); /* TÊN tài sản là nội dung chính — không hạ xuống màu chữ phụ */
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase__title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent); /* KHÔNG box-shadow: luật màu cấm glow */
  margin-right: 0.5em;
  vertical-align: middle;
}
.showcase__price {
  flex: none;
  font-family: var(--serif);
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.showcase__price i {
  font-style: normal;
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-ui);
  color: var(--muted); /* ĐƠN VỊ = sans + Stone (quy tắc số), không phải màu đồng */
  text-transform: uppercase;
  margin-left: 0.22em;
}
.showcase__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.62rem 0.8rem;
}
.showcase__specs div {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.showcase__specs span {
  font-size: var(--fs-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.showcase__specs b {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: color-mix(in srgb, var(--nbre-ivory) 6%, transparent);
}
.showcase__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
@keyframes scfill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* 820–1000: hết chỗ để panel đứng CẠNH dòng số liệu (còn kẹt góc ~19px ở khổ 900)
   → cho panel leo hẳn LÊN TRÊN dải số liệu, không tranh chỗ theo chiều ngang nữa. */
@media (max-width: 1000px) {
  .showcase {
    bottom: 9.5rem;
  }
}
/* ≤900: hết chỗ cho vật thể thứ ba. Bản cũ trải panel KÍN chiều ngang, ĐÈ LÊN dòng số liệu
   (đo ở 760: chồng 488px) → số liệu coi như biến mất; leo lên trên thì lấn vào chữ hero
   (chồng 33px ở 830), mà bóp hẹp nữa thì ảnh + bảng thông số bên trong panel vỡ.
   Số liệu là NỘI DUNG (giá trị nhóm · số tài sản · số năm), panel chỉ là teaser tự chạy của
   bản đồ ⇒ ẩn panel, giữ số liệu. (Trước đây panel chỉ ẩn dưới 560.) */
@media (max-width: 900px) {
  .showcase {
    display: none;
  }
}

/* ── TIER LEGEND ─────────────────────────────────────────────── */
.legend {
  position: absolute;
  left: clamp(1.4rem, 5vw, 5.4rem);
  bottom: 2.4rem;
  background: color-mix(in srgb, var(--nbre-black) 50%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.2rem;
}
.legend__title {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.75rem;
}
.legend ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
}
.legend__dot {
  --c: var(--gold);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 7px 1px var(--c);
  animation: blink 3s var(--ease) infinite;
}
.legend li b {
  font-weight: 500;
  color: var(--text);
}
.legend li i {
  font-style: normal;
  color: var(--muted);
  margin-left: 0.3rem;
  font-size: var(--fs-xs);
}
.legend__note {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--muted-2);
  max-width: 210px;
}
.legend__note b {
  color: var(--muted);
  font-weight: 500;
}

/* ── dossier attribute grid + score dots ─────────────────────── */
.dossier__attrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.9rem;
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.dossier__attrs .attr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dossier__attrs .attr span {
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.dossier__attrs .attr b {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.dots {
  display: inline-flex;
  gap: 3px;
}
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nbre-ivory) 14%, transparent);
}

/* GỠ 2026-07-12: .ecard__attrs — bảng 5 ô (hướng/lầu/MT/tiện ích/TK) trong thẻ danh mục.
   Thẻ là LỜI MỜI, không phải bảng dữ liệu; thông số đầy đủ ở trang chi tiết. */
.hero__copy {
  position: absolute;
  left: var(--pad-x);
  top: 50%;
  transform: translateY(-46%);
  max-width: min(700px, 54vw);
  z-index: 10;
  pointer-events: none;
}
.hero__copy .btn,
.hero__copy a {
  pointer-events: auto;
}
.hero__title {
  /* Bộ chữ tự dựng (NBRE Display) đã THỬ ở đây rồi GỠ: trên nền thật nó đọc ra chất
     kỹ thuật/futuristic, không hợp chất xa xỉ trầm. Giữ serif. */
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-display);
  /* 1.08 quá chật cho DẤU CHỒNG tiếng Việt (ỗ = mũ + ngã): dấu vượt khỏi hộp dòng
     và bị .hero__line{overflow:hidden} cắt cụt. 1.22 đủ thở, vẫn tít editorial. */
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: italic;
  color: var(--gold); /* chữ nhấn = MÀU, không gradient, không shimmer */
}
.hero__line {
  display: block;
  overflow: hidden;
  /* mặt nạ nới THÊM lên trên (padding + margin âm bù lại) → dấu tiếng Việt không
     chạm mép mà chữ vẫn đứng nguyên chỗ cũ. */
  padding-top: 0.14em;
  margin-top: -0.14em;
  padding-bottom: 0.06em;
}
.hero__line > span {
  display: inline-block;
  white-space: nowrap;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform;
}
.ready .hero__line > span {
  animation: heroLineRise 1.05s var(--ease) forwards;
}
.ready .hero__line:nth-child(1) > span {
  animation-delay: 0.4s;
}
.ready .hero__line:nth-child(2) > span {
  animation-delay: 0.58s;
}
@keyframes heroLineRise {
  to {
    transform: none;
    opacity: 1;
  }
}
.hero__title em {
  /* TRƯỚC: gradient vàng + animation shimmer chạy liên tục — trái Design Language
     (không gradient phô trương, không hiệu ứng gây chú ý). NAY: chỉ đổi màu. */
  font-style: normal;
  color: var(--gold);
}
.hero__sub {
  color: var(--muted);
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  max-width: 40ch;
  margin-bottom: 2.8rem;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero__actions .btn--gold {
  padding: 1.15em 2.5em;
}
/* quiet search trigger beside the CTA — summons the map search sheet */
.hero__search-toggle {
  pointer-events: auto;
  flex: none;
  width: 3.05rem;
  height: 3.05rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--nbre-black) 42%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition:
    border-color 0.4s var(--ease),
    color 0.4s var(--ease),
    transform 0.4s var(--ease),
    background 0.4s var(--ease);
}
.hero__search-toggle:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--nbre-bronze) 10%, transparent);
}
.hero__search-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

.hero__hint {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  z-index: 10;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted-2);
}
.hero__hint-line {
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--gold), transparent);
  animation: hintPulse 2.4s var(--ease) infinite;
}
@keyframes hintPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.7);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* quiet figures pinned to the foot of the hero — present, never shouting */
.hero__stats {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(2rem, 5vh, 3.4rem);
  z-index: 12;
  list-style: none;
  display: flex;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.hero__stats li {
  display: flex;
  flex-direction: column;
  /* 160px cắt ngang "tỷ · giá trị nhóm tiêu biểu" → chữ "BIỂU" rơi một mình xuống dòng 2.
     Nới đủ cho nhãn dài nhất; balance để nếu vẫn phải xuống dòng thì 2 dòng cân nhau. */
  max-width: 15rem;
}
.hero__stats i {
  text-wrap: balance;
}
.hero__stats b {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  color: var(--text);
  line-height: 1;
}
.hero__stats i {
  font-style: normal;
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.6rem;
}

/* ── floating dossier card ───────────────────────────────── */
.dossier {
  position: fixed;
  z-index: 300;
  width: clamp(430px, 40vw, 540px);
  aspect-ratio: 16/9;
  pointer-events: none;
  display: flex;
  align-items: stretch;
  background: color-mix(in srgb, var(--nbre-black) 90%, transparent);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
  box-shadow:
    0 36px 90px -34px rgba(0, 0, 0, 0.9),
    0 0 0 1px color-mix(in srgb, var(--nbre-bronze) 5%, transparent);
}
.dossier.is-on {
  opacity: 1;
  transform: scale(1);
}
.dossier__img {
  flex: 0 0 47%;
  position: relative;
  overflow: hidden;
}
.dossier__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--nbre-black) 90%, transparent));
}
.dossier__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) brightness(0.92);
}
/* FALLBACK logo (tin chưa có ảnh): hiện trọn, không xén, không tối đi */
.dossier__img img.nbre-fallimg {
  object-fit: contain;
  filter: none;
}
.dossier__body {
  flex: 1;
  min-width: 0;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dossier__loc {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.dossier__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  margin: 0.35rem 0 0.55rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dossier__meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.04em;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.dossier__meta span {
  position: relative;
}
.dossier__meta span:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -0.5rem;
  color: var(--muted-2);
}
.dossier__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
}
.dossier__price b {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  color: var(--text);
  font-weight: 500;
}
.dossier__price i {
  font-style: normal;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--muted);
}
.dossier__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--nbre-black) 70%, transparent);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0.4em 0.8em;
  border-radius: 2px;
}

/* ── section scaffolding ─────────────────────────────────── */
section {
  position: relative;
}
.section-head {
  padding-inline: var(--pad-x);
}
.section-head h2,
.approach__lede h2,
.contact h2 {
  font-family: var(--serif);
  font-weight: 300;
  /* NHỊP DÒNG TIẾNG VIỆT: 1.12 quá chật — Playfair đặt dấu chồng (ỗ, ặ, ề) RẤT
     cao, dấu của dòng dưới đội lên chạm dòng trên ("đáo" bị dấu huyền của
     "quyền" cắm vào). 1.28 là mức đo được là đủ thoáng cho cả bản italic. */
  line-height: var(--lh-title);
  /* PHÂN CẤP: tít SECTION là bậc DƯỚI hero. Trước để --fs-display (cỡ HERO 46px)
     → tít khối phụ đồ sộ ngang hero, mất phân cấp; riêng khối Liên hệ cột hẹp
     còn vỡ 4 dòng. Nay --fs-h1 (~38px): hero vẫn nổi bật hơn. */
  font-size: var(--fs-h1);
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 22ch;
}
.contact h2 {
  max-width: 22ch;
} /* lời mời cột trái: đủ rộng cho 2 vế (mỗi vế 1 dòng), không vỡ 4 dòng */
.section-head h2 em,
.approach__lede h2 em,
.contact h2 em,
.broker__text em {
  color: var(--text);
}
.estates .section-head h2 {
  white-space: nowrap;
  max-width: none;
}
@media (max-width: 760px) {
  .estates .section-head h2 {
    white-space: normal;
  }
}

/* ── estates grid ────────────────────────────────────────── */
.estates {
  padding-block: var(--sec-y);
}

/* ── DANH MỤC · BỘ LỌC (Zillow-style: tìm · facet pills · CTA) ── */
.estate-filter {
  margin-top: clamp(2.2rem, 4.5vh, 3.4rem);
  padding-inline: var(--pad-x);
}
.zbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* SEARCH BAR (Component Library): hairline gần vuông, KHÔNG quầng sáng khi focus.
   Focus = hairline đổi sang champagne, thế thôi. Icon = Platinum Grey, chữ = Warm Ivory. */
.zbar__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 360px;
  min-width: 230px;
  height: 46px;
  padding: 0 1rem;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--nbre-ivory) 4%, transparent);
  border: 1px solid var(--line);
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}
.zbar__search:focus-within {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--nbre-ivory) 6%, transparent);
}
.zbar__search svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
  flex: none;
}
.zbar__search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-sm);
  color: var(--text);
  letter-spacing: 0.01em;
}
.zbar__search input::placeholder {
  color: var(--muted);
}
.zbar__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/* Ô LỌC TÊN ĐƯỜNG/PHỐ — cùng kiểu search bar, icon ghim vị trí. Gợi ý đường theo ngữ cảnh (datalist). */
.zbar__street {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 240px;
  min-width: 190px;
  height: 46px;
  padding: 0 1rem;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--nbre-ivory) 4%, transparent);
  border: 1px solid var(--line);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.zbar__street:focus-within {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--nbre-ivory) 6%, transparent);
}
.zbar__street > svg:first-child { width: 17px; height: 17px; color: var(--muted); flex: none; }
.zbar__street select {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-sm);
  color: var(--text);
  letter-spacing: 0.01em;
  padding-right: 0.2rem;
}
.zbar__street select:invalid,
.zbar__street select option[value=""] { color: var(--muted); }
.zbar__street-caret { width: 15px; height: 15px; color: var(--muted); flex: none; pointer-events: none; }
.efdrop {
  position: relative;
}
.efdrop__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
  white-space: nowrap;
  height: 46px;
  padding: 0 1.05rem;
  border-radius: var(--r-1);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: var(--text);
  background: color-mix(in srgb, var(--nbre-ivory) 2.5%, transparent);
  border: 1px solid var(--line);
  transition:
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.efdrop__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.efdrop__btn .caret {
  width: 11px;
  height: 11px;
  opacity: 0.6;
  transition: transform var(--dur-1) var(--ease);
}
/* đang mở / đã chọn = hairline champagne. Không quầng sáng, không rửa nền màu đồng. */
.efdrop.is-open .efdrop__btn {
  border-color: var(--gold);
  color: var(--text);
}
.efdrop.is-open .caret {
  transform: rotate(180deg);
}
.efdrop.has-sel .efdrop__btn {
  border-color: var(--gold);
  color: var(--text);
}
/* SỐ bộ lọc đang chọn: serif tabular champagne, không phải viên đồng đặc */
.efdrop__badge {
  display: none;
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--gold);
  align-items: center;
  justify-content: center;
}
.efdrop.has-sel .efdrop__badge {
  display: inline-flex;
}
.efdrop__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 60;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--nbre-black) 94%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--e-2);
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease-out);
}
.efdrop:nth-last-child(2) .efdrop__menu,
.efdrop:nth-last-child(3) .efdrop__menu {
  left: auto;
  right: 0;
  transform-origin: top right;
}
.efdrop.is-open .efdrop__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* dòng chọn trong menu lọc: chữ = Warm Ivory (nội dung), không phải chữ màu đồng */
.eopt {
  display: flex;
  align-items: center;
  gap: 0.65em;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-1);
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.eopt:hover {
  background: color-mix(in srgb, var(--nbre-ivory) 5%, transparent);
}
.eopt__box {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--on-accent); /* dấu tick nằm TRÊN nền champagne → dùng token on-accent */
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
.eopt.on .eopt__box {
  background: var(--gold);
  border-color: var(--gold);
}
.eopt__box svg {
  width: 10px;
  height: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}
.eopt.on .eopt__box svg {
  opacity: 1;
}
.eopt__label {
  flex: 1;
  white-space: nowrap;
}
.eopt__n {
  font-size: var(--fs-2xs);
  opacity: 0.5;
}
.zbar__save {
  height: 46px;
  padding: 0 1.4rem;
  border: 1px solid var(--gold);
  border-radius: var(--r-1);
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  /* tiết chế: hairline Bronze, không đổ nền nguyên khối, không glow */
  background: transparent;
  color: var(--text);
  white-space: nowrap;
  transition: all 0.35s var(--ease);
}
.zbar__save:hover {
  background: var(--gold);
  color: var(--nbre-black);
}
.zbar__save.is-saved {
  background: transparent;
  color: var(--gold-bright);
}
.efilter__meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
}
.efilter__count {
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
}
.efilter__count b {
  color: var(--muted);
  font-weight: 600;
}
.efilter__reset {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    opacity 0.25s var(--ease),
    color 0.2s var(--ease);
  opacity: 0;
  pointer-events: none;
}
.efilter__reset.show {
  opacity: 1;
  pointer-events: auto;
}
.efilter__reset:hover {
  color: var(--gold-bright);
}
.estates__empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--muted);
  padding: 3rem 0;
  font-family: var(--serif);
  font-size: var(--fs-lg);
}
@media (max-width: 760px) {
  .zbar__search {
    flex: 1 1 100%;
  }
  .zbar__save {
    flex: 1 1 100%;
  }
}

.estates__grid {
  margin-top: clamp(2.4rem, 5vh, 4rem);
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.6rem, 2.4vw, 2.6rem);
}

/* ── PHÂN TRANG — số serif · trang hiện tại tô vàng ─────────── */
.pager {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: clamp(2.8rem, 5.5vh, 4.4rem) auto 0;
  padding-inline: var(--pad-x);
}
.pager.is-on {
  display: flex;
}
.pager__nums {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
}
.pager__num,
.pager__arrow {
  font-family: var(--serif);
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: all 0.25s var(--ease);
}
.pager__num {
  min-width: 2.7rem;
  height: 2.7rem;
  padding: 0 0.55rem;
  font-size: var(--fs-base);
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
}
.pager__num:hover {
  border-color: var(--line);
  color: var(--gold-bright);
}
.pager__num.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}
.pager__gap {
  min-width: 1.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  color: var(--muted-2);
  list-style: none;
  user-select: none;
}
.pager__arrow {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-color: var(--line);
}
.pager__arrow svg {
  width: 18px;
  height: 18px;
}
.pager__arrow:hover:not([disabled]) {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: color-mix(in srgb, var(--nbre-bronze) 7%, transparent);
}
.pager__arrow[disabled] {
  opacity: 0.28;
  cursor: default;
}
@media (max-width: 520px) {
  .pager__num,
  .pager__arrow {
    min-width: 2.4rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: var(--fs-base);
  }
}
.ecard {
  /* KHÔNG box, KHÔNG border, KHÔNG shadow (Design Language). Thẻ = ảnh + chữ + khoảng
     trắng. Hover chỉ hé sáng ảnh — không nhấc thẻ, không đổ bóng.
     flex cột + .ecard__foot margin-top:auto → chân thẻ (giá · điểm) THẲNG HÀNG
     giữa các thẻ dù tên tài sản dài ngắn khác nhau. */
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--r-0);
  overflow: visible;
  background: transparent;
  opacity: 0;
  transform: translateY(20px);
  transition:
    transform var(--dur-3) var(--ease-out),
    opacity var(--dur-3) var(--ease-out);
}
.ecard.in {
  opacity: 1;
  transform: none;
}
/* Hover NHẤC THẺ nhẹ (đồng bộ hiệu ứng với thẻ Bộ sưu tập/So sánh mới) + ảnh hé sáng. */
.ecard.in:hover {
  transform: translateY(-6px);
}
.ecard__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  border-radius: var(--r-1);
}
.ecard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ảnh trầm ở trạng thái nghỉ → hover HÉ SÁNG (ánh sáng thay cho shadow/nhấc thẻ) */
  filter: saturate(0.72) brightness(0.78);
  transition:
    transform 1.6s var(--ease-out),
    filter var(--dur-2) var(--ease);
}
.ecard:hover .ecard__img img {
  transform: scale(1.03);
  filter: saturate(0.95) brightness(1);
}
.ecard__price-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  color: var(--gold); /* GIÁ = 1 trong 3 chỗ độc quyền dùng champagne */
  background: color-mix(in srgb, var(--nbre-black) 60%, transparent);
  backdrop-filter: blur(8px);
  padding: 0.1em 0.5em;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.ecard__price-badge i {
  font-style: normal;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-ui);
  color: var(--muted);
  margin-left: 0.3em;
  text-transform: uppercase;
}
.ecard__tier {
  --c: var(--gold);
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c);
  padding: 0.4em 0.8em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--nbre-black) 55%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.ecard__tier::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c); /* KHÔNG box-shadow: luật màu cấm glow */
  margin-right: 0.55em;
  vertical-align: middle;
}
.ecard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) 0 0;
}
.ecard__loc {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.ecard__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-title);
  margin: 0.45rem 0 0.7rem;
  /* 2 dòng cứng: tên dài không được đẩy chân thẻ lệch khỏi hàng */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ecard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.ecard__meta span b {
  color: var(--text);
  font-weight: 500;
}

/* ── chân thẻ: hai con số đáng giá (giá · điểm NBRE) ─────────── */
.ecard__foot {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.ecard__price {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  /* GIÁ = nội dung chính → Warm Ivory. Champagne chỉ dành cho CTA · Điểm NBRE ·
     marker bản đồ · hover (luật màu). Trước đây giá màu đồng → sai luật. */
  color: var(--text);
  white-space: nowrap;
}
.ecard__price i {
  font-style: normal;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.35em;
}
.ecard__price em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--muted-2);
  margin-left: 0.5em;
}
/* ô trống khi bản tiếng Việt bỏ quy đổi USD — đừng để nó ăn khoảng cách */
.ecard__price em:empty { display: none; }

/* ══ LƯỚI TÀI SẢN TRÊN ĐIỆN THOẠI — một cột thì phải TÁCH BẠCH ═══════════════
   >90% khách xem bằng điện thoại. Ở một cột, các thẻ nối đuôi nhau mà không có
   ranh giới nào: cuộn tới giữa chừng thì không biết đơn giá/m² đang đọc thuộc
   tài sản trên hay tài sản dưới (đo trên ảnh chụp: chân thẻ này cách đầu thẻ
   sau đúng bằng khoảng cách giữa các dòng trong CÙNG một thẻ).
   Trang tham chiếu giải bằng KHUNG THẺ. NBRE cấm khung/đổ bóng (Book III) —
   dùng ĐƯỜNG KẺ MẢNH + khoảng thở, cùng thủ pháp đã dùng ở mục Triết lý.      */

/* Từ 2 cột trở lên, khoảng trắng đã đủ tách thẻ ⇒ giấu nút, giữ thẻ thoáng.
   ⚠️ Phải đặt TRƯỚC @media, không thì nó đè lại display:flex bên trong (cùng
   độ đặc hiệu, luật sau thắng). */
.ecard__cta { display: none; }

@media (max-width: 760px) {
  .estates__grid { gap: 0; }
  .ecard {
    padding-bottom: clamp(1.8rem, 5vw, 2.4rem);
    margin-bottom: clamp(1.8rem, 5vw, 2.4rem);
    border-bottom: 1px solid var(--line);
  }
  .ecard:last-child { border-bottom: 0; margin-bottom: 0; }
  /* nhấc thẻ khi rê là cử chỉ của CHUỘT — trên cảm ứng nó chỉ làm nhảy bố cục */
  .ecard.in:hover { transform: none; }

  /* Ảnh 4:3 ở một cột cao gần nửa màn. Trang tham chiếu để ~16:10 — vừa đủ nhận
     mặt tiền mà chân thẻ (giá) vẫn lọt cùng khung nhìn với ảnh. */
  .ecard__img { aspect-ratio: 16/10; }

  /* NÚT MỞ HỒ SƠ — trước cả thẻ bấm được nhưng KHÔNG có dấu hiệu nào cho biết
     điều đó; trên cảm ứng không có hover để lộ ra. Nay có nút thật, rộng hết
     bề ngang, cao 46px. Thẻ vẫn bấm được như cũ (nút chỉ là cái nổi lên). */
  .ecard__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    margin-top: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    background: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-ui);
    text-transform: uppercase;
    cursor: pointer;
  }
  .ecard__cta svg { width: 14px; height: 14px; }
}

/* ── favourite heart on card ─────────────────────────────────
   Lớp phủ DUY NHẤT còn lại trên ảnh: nằm im (mờ) và chỉ hiện rõ khi rê thẻ —
   ảnh tài sản được yên. Đã lưu (.is-on) thì luôn hiện. */
.ecard__fav {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  background: color-mix(in srgb, var(--nbre-black) 42%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--nbre-ivory) 26%, transparent);
  color: var(--nbre-ivory);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform 0.25s var(--ease),
    background 0.3s,
    border-color 0.3s;
}
.ecard:hover .ecard__fav,
.ecard__fav:focus-visible,
.ecard__fav.is-on {
  opacity: 1;
}
.ecard__fav svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.ecard__fav:hover {
  transform: scale(1.12);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--nbre-black) 72%, transparent);
}
.ecard__fav.is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.ecard__fav.is-on svg {
  fill: var(--ink);
  stroke: var(--ink);
}
.ecard__fav.is-on {
  animation: favPop 0.4s var(--ease);
}
@keyframes favPop {
  0% {
    transform: scale(0.7);
  }
  55% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}
/* Tim trên thẻ ở khổ điện thoại. ⚠️ Khối này phải nằm SAU toàn bộ luật .ecard__fav
   ở trên: @media KHÔNG cộng độ đặc hiệu, đặt trước thì luật gốc (2,4rem, opacity 0)
   thắng vì đứng sau. Đã dính đúng bẫy này một lần trong phiên. */
@media (max-width: 760px) {
  /* 2,4rem = 38px, thiếu 6px so với ngưỡng chạm 44 — chuột thì đủ, ngón tay thì trượt */
  .ecard__fav {
    width: 44px;
    height: 44px;
    /* cảm ứng KHÔNG có hover ⇒ tim phải hiện sẵn, không thì khách không biết là có */
    opacity: 1;
  }
}

/* ── ĐƠN GIÁ/m² trên thẻ ─────────────────────────────────────
   Thay chỗ của "Điểm NBRE" (đã gỡ — xem render.js). Đây là con số THẬT: giá chia diện tích,
   thứ nhà đầu tư luôn tự tính đầu tiên. Chữ phụ, canh phải, không tranh vai với giá. */
.ecard__ppm {
  font-family: var(--serif);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.ecard__ppm i {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-ui);
  color: var(--muted-2);
  margin-left: 0.35em;
}

/* ── floating collection button ──────────────────────────── */
/* nút nổi: hairline xám, KHÔNG bo viên thuốc kiểu app tiêu dùng, không nhấc lên khi hover.
   Đồng chỉ xuất hiện ở hover và khi đã có tài sản trong bộ sưu tập (trạng thái đang chọn). */
.fav-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.85rem 1.3rem;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--nbre-black) 82%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  box-shadow: var(--e-2);
  transition:
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.fav-fab:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.fav-fab svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.fav-fab.has-items svg {
  fill: var(--gold);
  stroke: var(--gold);
}
/* SỐ đếm = serif tabular, Warm Ivory — không phải viên đồng đặc */
.fav-fab__n {
  display: grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.35em;
  border-left: 1px solid var(--line);
  padding-left: 0.7em;
  color: var(--text);
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  letter-spacing: 0;
}

/* ── slide-in collection panel ───────────────────────────── */
.fav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 600;
  height: 100dvh;
  width: min(380px, 90vw);
  background: color-mix(in srgb, var(--nbre-black) 96%, transparent);
  backdrop-filter: blur(18px);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  transform: translateX(105%);
  transition: transform 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.4rem;
}
.fav-panel.is-open {
  transform: none;
}
.fav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.fav-panel__head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-xl);
}
.fav-panel__head h3 span {
  font-variant-numeric: tabular-nums;
  color: var(--muted); /* "(3)" = thông số phụ, không tô đồng */
}
.fav-panel__close {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--fs-2xl);
  line-height: 1;
  transition: color var(--dur-1) var(--ease);
}
.fav-panel__close:hover {
  color: var(--gold);
}
.fav-panel__list {
  flex: 1;
  overflow-y: auto;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.fav-panel__empty {
  display: none;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
  margin: auto 0;
  line-height: var(--lh-body);
}
.fav-panel.is-empty .fav-panel__empty {
  display: block;
}
.fav-panel.is-empty .fav-panel__list {
  flex: 0;
}
.fav-item {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--nbre-ivory) 2%, transparent);
}
.fav-item__img {
  flex: 0 0 64px;
  height: 56px;
  border-radius: var(--r-1);
  overflow: hidden;
}
.fav-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fav-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.fav-item__loc {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--muted);
}
.fav-item__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* GIÁ + ĐIỂM trong bộ sưu tập: số = serif Ivory · đơn vị/quy đổi = sans Stone */
.fav-item__meta {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.fav-item__meta b {
  font-family: var(--serif);
  font-size: var(--fs-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.fav-item__meta i,
.fav-item__meta em {
  font-style: normal;
  font-family: var(--sans);
  color: var(--muted);
}
.fav-item__meta i {
  margin-left: 0.25em;
}
.fav-item__rm {
  cursor: pointer;
  background: none;
  border: none;
  color: var(--muted-2);
  font-size: var(--fs-xl);
  line-height: 1;
  transition: color var(--dur-1) var(--ease);
}
.fav-item__rm:hover {
  color: var(--gold);
}

/* ── ĐIỂM NBRE breakdown popup ───────────────────────────── */
/* ĐÃ GỠ: CSS popup Điểm NBRE (.score-pop / .score-row) — tính năng đã bỏ. */
.ecard__price,
.ecard__price-badge,
.ecard__score b,
.hero__stats b,
.dossier__price b,
.estate-page__price {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.ecard__price i,
.ecard__price-badge i,
.ecard__score i,
.ecard__score span,
.hero__stats i,
.dossier__price i {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
/* quy đổi USD đi kèm giá: CÙNG serif với giá, chỉ nhỏ và trầm hơn */
.ecard__price em,
.ecard__price-badge em {
  font-family: var(--serif);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ── HỘP "VÌ SAO 0 KẾT QUẢ" + lựa chọn không còn hàng ─────────────────────
   Chủ chốt (13/07): chọn 6 trục lọc → "0 tài sản", không hiểu trục nào giết kết quả;
   và "tìm không ra thì nên trả về mặc định để bấm tìm lại".
   Bộ lọc vốn CHẠY ĐÚNG — thiếu là phần GIẢI THÍCH và lối thoát. */
.efilter__why {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.efilter__why.show { display: flex; }
.efwhy__chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.efwhy__chip:hover { border-color: var(--gold); color: var(--gold-bright); }
.efwhy__chip--reset {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  color: var(--gold-bright);
  font-weight: 600;
}
/* lựa chọn còn 0 căn (theo các bộ lọc đang bật) → mờ + không bấm được */
.eopt.is-zero {
  opacity: 0.32;
  pointer-events: none;
}
/* nút TÌM */
.zbar__go {
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-bright);
  border-radius: 10px;
  padding: 0 1.1rem;
  height: 44px;
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.zbar__go:hover { background: color-mix(in srgb, var(--gold) 22%, transparent); }
/* dòng giá thuê trên thẻ (căn vừa bán vừa cho thuê) */
.ecard__rent {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.ecard__rent b { color: var(--gold-soft); font-weight: 600; }

/* ── Lối tắt SỬA TIN cho quản trị, hiện ngay trên trang công khai (01/08) ──
   Chỉ được chèn vào DOM khi máy đang đăng nhập admin (xem ui-chrome.js). */
.nbre-qedit {
  position: absolute; top: .8rem; left: .8rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .34rem .62rem; border-radius: .5rem;
  font-family: var(--sans); font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .04em;
  color: var(--nbre-black); background: var(--nbre-champagne);
  text-decoration: none; opacity: 0; transition: opacity .18s var(--ease);
}
.ecard:hover .nbre-qedit, .nbre-qedit:focus-visible { opacity: 1; }
.nbre-qedit svg { width: 13px; height: 13px; }
.nbre-qedit-fab {
  position: fixed; right: 1.1rem; bottom: 5.6rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem .9rem; border-radius: 999px;
  font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600;
  color: var(--nbre-black); background: var(--nbre-champagne);
  text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
}
.nbre-qedit-fab svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .nbre-qedit { opacity: 1; } .nbre-qedit-fab { bottom: 4.6rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
   TẤM TRƯỢT BỘ LỌC — chỉ trên ĐIỆN THOẠI (03/08)
   ═══════════════════════════════════════════════════════════════════════════
   ĐO ĐƯỢC trước khi sửa: khối lọc cao **544px = 0,64 màn hình** với **54 ô điều
   khiển**, nằm chặn giữa tiêu đề danh mục và tài sản. Mà >90% khách xem bằng
   điện thoại ⇒ vật cản nằm trên đường đi CHÍNH.
   Cách chữa: trên màn hẹp chỉ để lại Ô TÌM + nút "Bộ lọc"; toàn bộ trục lọc dồn
   vào tấm trượt từ đáy, mở khi khách chủ động cần.
   ⚠️ DESKTOP KHÔNG ĐỔI GÌ — mọi rule dưới đây nằm trong @media (max-width:760px),
   trên mốc đó `.zbar__adv` là `display: contents` nên các ô rơi thẳng vào flex của
   .zbar y như trước khi bọc. Bọc thêm 1 thẻ div mà bố cục desktop giữ nguyên.  */
.zbar__more { display: none; }
/* desktop: như chưa từng bọc. PHẢI `contents` ở CẢ HAI tầng — chỉ gỡ tầng ngoài thì
   .zbar__sheet-body vẫn là một flex-item, và toàn bộ trục lọc bị dồn thành MỘT cột
   chen giữa hàng ngang. (Đã suýt đẩy lỗi này đi.) */
.zbar__adv,
.zbar__sheet-body { display: contents; }
.zbar__sheet-head,
.zbar__sheet-foot { display: none; }     /* chỉ tấm trượt mới cần đầu/chân */

@media (max-width: 760px) {
  .zbar__search { flex: 1 1 auto; min-width: 0; }
  /* nút mở bộ lọc — cao bằng ô tìm để thành một hàng gọn */
  .zbar__more {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 46px;
    padding: 0 0.9rem;
    flex: none;
    border-radius: var(--r-1);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .zbar__more svg { width: 17px; height: 17px; flex: none; }
  /* huy hiệu số trục đang lọc — tấm trượt đóng thì đây là dấu hiệu DUY NHẤT cho
     biết kết quả đang bị lọc; thiếu nó bộ lọc thành cái bẫy */
  .zbar__more-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--gold);
    color: var(--on-accent);
    font-size: var(--fs-3xs);
    font-weight: 600;
  }
  .zbar__more-badge[hidden] { display: none; }

  /* ── tấm trượt ─────────────────────────────────────────────────────────── */
  .zbar__adv {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 320;
    background: color-mix(in srgb, var(--nbre-black) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s var(--ease), visibility 0.32s;
  }
  .zbar__adv.is-open { opacity: 1; visibility: visible; }
  /* thân tấm: bám đáy, cao tối đa 82% màn rồi tự cuộn bên trong */
  .zbar__adv > .zbar__sheet-head,
  .zbar__adv > .zbar__sheet-body,
  .zbar__adv > .zbar__sheet-foot {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--ink);
    transform: translateY(110%);
    transition: transform 0.36s var(--ease);
  }
  .zbar__adv.is-open > * { transform: none; }
  .zbar__adv > .zbar__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: calc(min(58vh, 460px) + 68px);
    padding: 0.95rem 1.1rem;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-size: var(--fs-lg);
    color: var(--text);
  }
  .zbar__sheet-x {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: var(--fs-lg);
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
  }
  .zbar__adv > .zbar__sheet-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    bottom: 68px;
    max-height: min(58vh, 460px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.9rem 1.1rem 1.1rem;
  }
  /* trong tấm trượt: mỗi trục một hàng đầy, dễ chạm bằng ngón cái */
  .zbar__adv .efdrop { width: 100%; }
  .zbar__adv .efdrop__btn { width: 100%; justify-content: space-between; height: 46px; }
  /* ☠️ Menu ĐANG ĐÓNG phải giữ `position: absolute` như thiết kế gốc. Cho `static`
     cả lượt (tôi làm sai lần đầu) thì 5 menu đóng vẫn CHIẾM CHỖ trong tấm trượt →
     các trục lọc dạt ra xa nhau, ở giữa toàn khoảng trống, phải cuộn mới thấy hết.
     Chỉ menu ĐANG MỞ mới đổ vào dòng chảy, để nó đẩy các trục dưới xuống một cách
     tự nhiên thay vì trôi nổi ra ngoài vùng cuộn. */
  .zbar__adv .efdrop.is-open .efdrop__menu {
    position: static;
    width: 100%;
    max-height: 38vh;
    overflow-y: auto;
    box-shadow: none;
    margin-top: 0.35rem;
  }
  .zbar__adv .zbar__street { width: 100%; }
  .zbar__adv > .zbar__sheet-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    bottom: 0;
    height: 68px;
    padding: 0 1.1rem calc(env(safe-area-inset-bottom, 0px) * 0.6);
    border-top: 1px solid var(--line);
  }
  .zbar__sheet-reset {
    flex: none;
    height: 44px;
    padding: 0 0.9rem;
    border-radius: var(--r-1);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    cursor: pointer;
  }
  .zbar__sheet-apply {
    flex: 1;
    height: 44px;
    border-radius: var(--r-1);
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .zbar__sheet-apply b { font-weight: 700; }
  body.ef-sheet-open { overflow: hidden; }
  /* ☠️ `.fav-fab` có z-index 500 — CAO HƠN tấm trượt (320) nên thanh "BỘ SƯU TẬP"
     nằm ĐÈ LÊN nút "Xem N kết quả", đúng nút quan trọng nhất của tấm trượt.
     Đẩy z-index tấm trượt lên là chạy đua vô tận; đúng hơn là MỘT LÚC CHỈ MỘT LỚP
     nổi: đang lọc thì giấu các nút nổi khác đi, đóng lại thì chúng về. */
  body.ef-sheet-open .fav-fab,
  body.ef-sheet-open .to-top {
    opacity: 0;
    pointer-events: none;
  }
}
/* Cùng luật cho NGĂN KÉO MENU: nó cũng là lớp phủ toàn màn, mà `.fav-fab` (z-index
   500) cao hơn ngăn kéo (300) nên thanh "BỘ SƯU TẬP" nổi đè lên menu đang mở.
   Một lúc chỉ MỘT lớp nổi — đây là luật chung, không phải vá riêng cho bộ lọc. */
@media (max-width: 820px) {
  body.nav-menu-open .fav-fab,
  body.nav-menu-open .to-top {
    opacity: 0;
    pointer-events: none;
  }
}

/* Nút GỌI cụm điều khiển bản đồ: MẶC ĐỊNH ẨN (máy tính giữ hàng dọc 4 nút như cũ);
   chỉ bật lên trong @media ≤820px. Rule này phải nằm NGOÀI mọi media query —
   đặt nhầm vào trong khối mobile là ẩn nó ở đúng nơi cần hiện. */
.mc--toggle { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHUẨN HOÁ VÙNG CHẠM TRÊN ĐIỆN THOẠI (04/08) — chủ chốt: mobile là hàng đầu
   ═══════════════════════════════════════════════════════════════════════════
   RÀ SOÁT ĐO ĐƯỢC trên nambason.com ở khung 390×844: **42 phần tử bấm được có
   cạnh < 44px** (chuẩn Apple HIG 44×44 — cỡ đầu ngón tay người lớn).
   Nặng nhất, theo thứ tự đáng sửa:
       a.nav__cta  "Hẹn gặp riêng"  261 × **26px**  ← nút CHUYỂN ĐỔI CHÍNH của cả site
       button VI / EN                27 × **21px**
       .themebtn (sáng/tối)          34 × 34px
       .nav__burger                  42 × 42px
       .pager__num / .pager__arrow   38–43px  (rule ≤520px còn bóp xuống 2,4rem)
       .mc (nút bản đồ) × 3          30 × 30px
   Bấm trượt nút "Hẹn gặp riêng" là mất đúng khách đang muốn liên hệ — không có
   lỗi nào trên trang này đắt hơn thế.

   NGUYÊN TẮC: nới VÙNG CHẠM, giữ nguyên KÍCH THƯỚC THỊ GIÁC ở chỗ thiết kế cần
   nhỏ. Nút tròn thì phóng cả nút (34→44 vẫn nhẹ nhàng); chữ VI/EN thì nới đệm
   chứ không phóng chữ.
   ⚠️ KHÔNG đụng link chữ trong đoạn văn (16 thẻ `a` còn lại trong rà soát): đó là
   link nội dòng giữa câu, phóng lên 44px là phá vỡ dòng chữ. Chuẩn 44px dành cho
   nút/điều khiển đứng riêng, không dành cho link nội dòng.
   ⚠️ Đặt CUỐI components.css để đè các rule ở layout.css (nạp trước) — đừng dời
   lên trên, dời là mất tác dụng với .themebtn/.langseg/.nav__cta.                */
@media (max-width: 820px) {
  /* ☠️ 4 MỤC MENU CHÍNH trong ngăn kéo chỉ cao **26px** — đây là toàn bộ đường
     điều hướng của site trên điện thoại, mà mỗi mục mỏng hơn nửa đầu ngón tay.
     Hai mục cạnh nhau cách nhau 1,5rem nên bấm trượt là nhảy sang mục khác, không
     phải bấm hụt. `display:block` + min-height cho vùng chạm phủ kín cả chiều
     ngang ngăn kéo, chữ vẫn nằm ở vị trí cũ. */
  .nav.menu-open .nav__links a:not(.nav__cta) {
    display: flex;
    align-items: center;
    min-height: 46px;
  }
  .nav__brand { min-height: 44px; display: flex; align-items: center; }
  /* nút chuyển đổi chính trong ngăn kéo — 26px là quá nhỏ để bấm trúng */
  .nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.2em 0.9em 0.35em;
  }
  /* VI/EN: nới đệm để cả viên thuốc cao 44px, chữ giữ nguyên cỡ */
  .langseg button {
    min-height: 44px;
    padding: 0 0.95em;
    display: inline-flex;
    align-items: center;
  }
  .themebtn,
  .nav__admin {
    width: 44px;
    height: 44px;
  }
  .nav__burger {
    width: 44px;
    height: 44px;
  }
  /* nút điều khiển bản đồ: 30px là cỡ chuột, không phải cỡ ngón tay */
  .mc {
    width: 44px;
    height: 44px;
  }
  /* ═══ CỤM NÚT BẢN ĐỒ THU GỌN — mặc định MỘT nút, chạm mới bày ra ═══════════
     Đường đi của quyết định này đáng ghi lại:
     ① Ban đầu 4 nút xếp DỌC, mỗi nút 30px.
     ② Tôi phóng lên 44px cho đủ vùng chạm → cụm cao 217px, THÒ XUỐNG CHẠM chữ
        hero (chủ báo, có ảnh iPhone).
     ③ Tôi chữa bằng cách cho nằm NGANG (205×56px) — hết dính, nhưng chủ hỏi lại
        "nằm ngang vậy có dở không". Hỏi đúng: đó là bản VÁ, không phải thiết kế.
        Ba điểm dở: nằm góc TRÊN PHẢI là chỗ khó với nhất khi cầm một tay · chiếm
        205px ngang nên đọc ra như THANH CÔNG CỤ (chất kỹ thuật, trái quiet-luxury)
        · 4 nút điều khiển cho một bản đồ khách KHÔNG KÉO ĐƯỢC (đã tắt kéo một ngón
        để trang cuộn được) là thừa.
     ④ Chủ chốt: mặc định một vòng tròn 44px; chạm thì 4 nút trượt ra.
        Giữ ĐỦ chức năng, mà màn hình đầu — thứ khách nhìn trước tiên — sạch hẳn.
        Máy móc chỉ hiện ra khi khách hỏi đến.
     ⚠️ Desktop KHÔNG đổi: nút gọi ẩn, 4 nút giữ nguyên hàng dọc như cũ. */
  .mapctl {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0.3rem;
    transition: gap 0.28s var(--ease), padding 0.28s var(--ease);
  }
  .mc--toggle {
    display: grid;
    flex: none;
  }
  .mc--toggle svg { width: 19px; height: 19px; }
  /* 4 nút kia: thu về 0 bề ngang, không chiếm chỗ, không bấm nhầm được */
  .mapctl > .mc:not(.mc--toggle),
  .mapctl > .mapctl__div {
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    /* viền phải về 0 nữa: box-sizing border-box thì `width:0` vẫn chừa 2px viền
       mỗi nút — 4 nút + vạch ngăn = 9px thừa, cụm đóng lại vẫn hở một mẩu. */
    border-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      width 0.28s var(--ease),
      opacity 0.2s var(--ease);
  }
  .mapctl.is-open { gap: 0.15rem; }
  .mapctl.is-open > .mc:not(.mc--toggle) {
    width: 44px;
    opacity: 1;
    pointer-events: auto;
  }
  .mapctl.is-open > .mapctl__div {
    width: 1px;
    height: 22px;
    margin: 0 0.15rem;
    opacity: 1;
  }
  /* đang mở thì nút gọi sáng lên để biết bấm lần nữa là đóng */
  .mapctl.is-open .mc--toggle { color: var(--gold); }
}
@media (max-width: 760px) {
  /* phân trang: người ta bấm nhiều lần liên tiếp, trượt một cái là nhảy sai trang */
  .pager__num,
  .pager__arrow {
    min-width: 44px;
    width: auto;
    height: 44px;
  }
  /* nút mạng xã hội ở chân trang */
  .social-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* ☠️ CHÂN TRANG: 11 link cao **19px**, trong đó có **số điện thoại 0903 052 135**
     và **email** — hai hành động liên hệ quan trọng nhất cả site, mà trên điện thoại
     mỏng bằng nửa đầu ngón tay. Bấm trượt số điện thoại là mất đúng khách đã cuộn
     hết trang để tìm cách gọi.
     Chân trang có dài thêm ra — đổi lấy việc bấm trúng thì đáng, và chỉ trên mobile. */
  .sitefoot__col a,
  .sitefoot__logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* nút nhỏ đứng riêng: nút đóng bảng yêu thích (24×14px — bấm hụt là không đóng
     được bảng đang che nội dung), nút liên hệ ở dòng bản quyền */
  .fav-panel__close,
  .sitefoot__agent {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }
  /* link nội dung đứng riêng (không nằm giữa câu) */
  .approach__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* ô tìm: KHUNG cao 46px nhưng thẻ <input> bên trong chỉ 17px — chạm vào phần
     đệm quanh input thì KHÔNG focus, nên vùng bấm thật chỉ là 17px giữa khung.
     Cho input cao bằng khung để chạm đâu trong ô cũng vào. */
  .zbar__search input,
  .mapsearch__field input,
  .zbar__street select {
    align-self: stretch;
    height: auto;
    min-height: 44px;
  }
  /* ☠️ iPHONE TỰ PHÓNG TO TRANG khi chạm vào ô có cỡ chữ < 16px — luật của iOS
     Safari, không tắt được bằng CSS, chỉ tránh được bằng cách để chữ ≥ 16px.
     ĐO ĐƯỢC trên live: 4/15 ô ở **13,1px** — gồm cả hai ô TÌM KIẾM chính (ô trên
     bản đồ và ô lọc danh mục) và ô chọn đường.
     Hậu quả mỗi lần khách gõ tìm: trang giật phóng to, khách phải chụm tay thu
     lại, và sau khi thu thì bố cục lệch so với lúc đầu. Các ô của FORM liên hệ
     vốn đã 16px nên không dính — đây đúng là chỗ khách dùng nhiều nhất mà lại sót.
     ⚠️ Chỉ nâng ở mobile: trên máy tính 13,1px là cỡ đã cân theo thang chữ, đổi
     là lệch cả hàng lọc. */
  .zbar__search input,
  .mapsearch__field input,
  .zbar__street select,
  .efdrop__btn,
  .eopt {
    font-size: 16px;
  }
}
/* ≤520px: rule cũ bóp phân trang xuống 2,4rem = 38,4px. Giữ lại ý ĐỒ (tiết kiệm
   bề ngang trên máy nhỏ) nhưng không xuống dưới ngưỡng chạm — 44px vẫn xếp đủ
   5 số + 2 mũi tên trong 320px. */
@media (max-width: 520px) {
  .pager__num,
  .pager__arrow {
    min-width: 44px;
    width: auto;
    height: 44px;
    font-size: var(--fs-base);
  }
}

/* chấm phát sáng rơi vào vùng chữ hero → tắt (xem map.js · hideNodesBehindCopy).
   Tắt bằng opacity chứ không display:none để nó trở lại mượt khi bản đồ xê dịch. */
.nbnode.is-behind-copy {
  opacity: 0 !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THANH LIÊN HỆ ĐÁY (Concierge Bar) — CHỈ ĐIỆN THOẠI
   ═══════════════════════════════════════════════════════════════════════════
   Vì sao có: >90% khách xem bằng điện thoại, và hành động đáng giá nhất của họ
   là LIÊN HỆ. Trước đó số điện thoại chỉ nằm ở chân trang — khách phải cuộn hết
   trang mới thấy. Nay ba hành động nằm sẵn trong vùng ngón cái, suốt lúc cuộn.
   Không lộ thêm gì: 0903 052 135 và zalo.me đã công bố ở 4 chỗ trên trang này.

   Tông: nền kính TỐI ở cả hai chế độ (nên phải khai vào nhóm "giữ bảng tối" ở
   theme-light.css — luật CLAUDE.md §6). Icon nét mảnh, KHÔNG dùng màu thương
   hiệu Zalo/Facebook: màu rực làm mất chất kín đáo (chủ chốt 04/08).

   ⚠️ Ba thứ bắt buộc, thiếu cái nào cũng thành phiền:
   ① CHỪA CHỖ ở đáy trang, không thì thanh che mất dòng cuối chân trang.
   ② NÂNG các nút nổi khác lên, không thì "BỘ SƯU TẬP" và nút lên-đầu-trang
      nằm đè lên thanh (đúng lỗi z-index đã gặp 2 lần hôm nay).
   ③ TRỪ vạch home iPhone bằng env(safe-area-inset-bottom), không thì hàng nút
      bị vạch gạt ngang cắt qua.                                                */
.cbar { display: none; }

@media (max-width: 820px) {
  .cbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 480; /* dưới ngăn kéo menu (300→ nhưng .fav-fab 500) — xem quy tắc ẩn bên dưới */
    display: grid;
    grid-template-columns: auto auto auto 1fr; /* gọi · zalo · bộ sưu tập · lịch hẹn */
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--nbre-black) 86%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .cbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    padding: 0 0.85rem;
    border-radius: var(--r-1);
    border: 1px solid var(--line);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
  }
  .cbar__btn svg { width: 18px; height: 18px; flex: none; }
  /* hai nút phụ chỉ còn icon trên màn hẹp — chữ "Gọi riêng"/"Zalo" nhường chỗ
     cho hành động CHÍNH; nhãn vẫn còn cho trình đọc màn hình (data-i18n-al). */
  .cbar__btn:not(.cbar__btn--go) span { display: none; }
  /* hành động chính: nền đồng, chiếm phần còn lại */
  .cbar__btn--go {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--on-accent);
    font-weight: 500;
    text-transform: uppercase;
  }

  /* nút "bộ sưu tập" trong thanh: icon + số, cùng khuôn với hai nút phụ */
  .cbar__btn--fav {
    background: none;
    cursor: pointer;
    font-size: var(--fs-xs);
    gap: 0.35rem;
  }
  .cbar__btn--fav b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .cbar__btn--fav.has-items { border-color: var(--gold); color: var(--gold-bright, var(--gold)); }
  .cbar__btn--fav.has-items svg { fill: currentColor; }

  /* ① chừa chỗ ở đáy trang */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  /* ② nút nổi "bộ sưu tập" ĐÃ dọn vào thanh đáy ⇒ ẩn hẳn bản nổi, không còn lớp
        thứ hai đè lên chữ. Nút lên-đầu-trang vẫn nổi nhưng nâng lên khỏi thanh. */
  .fav-fab { display: none !important; }
  .to-top,
  .nbre-qedit-fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  /* ③ một lúc chỉ MỘT lớp nổi — mở menu hay tấm trượt lọc thì thanh lùi đi */
  body.nav-menu-open .cbar,
  body.ef-sheet-open .cbar {
    opacity: 0;
    pointer-events: none;
  }
}
/* Trên trang chi tiết tài sản (mở đè toàn màn) thanh này phải biến mất — trang
   đó có luồng liên hệ riêng theo từng tài sản, hai cái chồng nhau là rối. */
:root.sv-off-map .cbar,
body:has(.estate-page.is-on) .cbar { display: none; }

/* ── "BỘ SƯU TẬP" thu gọn còn ICON + SỐ trên điện thoại ─────────────────────
   Nay đáy màn đã có thanh liên hệ cố định; thêm một viên thuốc rộng 195px nổi
   ngay trên nó là hai lớp nổi chồng nhau — và ĐO ĐƯỢC nó che mất dòng cuối
   chân trang ("Vận hành tài sản riêng · Tư vấn bảo mật…").
   Chủ đã dặn: nút nổi phải thu nhẹ để đỡ che nội dung.
   Bỏ CHỮ, giữ icon ♥ + số: vẫn nhận ra ngay, vẫn đủ 44px để bấm, mà từ ~195px
   xuống còn ~72px. Nhãn cho trình đọc màn hình giữ nguyên (aria-label ở JS). */
@media (max-width: 820px) {
  .fav-fab__label { display: none; }
  .fav-fab {
    padding: 0.7rem 0.85rem;
    gap: 0.4rem;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NGĂN KÉO MENU KIỂU "VĂN PHÒNG RIÊNG" — chỉ điện thoại (chủ chốt 04/08)
   ═══════════════════════════════════════════════════════════════════════════
   Trước: ngăn kéo mở ra chiếm gần trọn màn nhưng bên trong KHÔNG có gì nhận
   dạng — logo bị chính ngăn kéo che, nút đóng là dấu ✕ nằm NGOÀI ngăn kéo ở
   góc phải. Khách mở menu ra là mất ngữ cảnh, và phải với tay ra ngoài để đóng.
   Nay ngăn kéo TỰ GIỚI THIỆU (logo) + TỰ CÓ NÚT ĐÓNG + có đường dây riêng ở chân.
   Mục menu đã 46px từ đợt vùng chạm — phần thiếu đúng là đầu và cuối.           */
.navdw__head,
.navdw__foot { display: none; }

@media (max-width: 820px) {
  /* HAI nút đóng là thừa: nút ☰ tự biến thành ✕ khi mở, nay ngăn kéo lại có ✕
     riêng ở trong. Giấu nút ngoài đi — nút đóng nên nằm CÙNG CHỖ với thứ nó
     đóng. (Bấm ra ngoài hoặc Esc vẫn đóng được, nên không mất đường thoát.) */
  .nav.menu-open .nav__burger {
    opacity: 0;
    pointer-events: none;
  }
  .navdw__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
  }
  .navdw__logo { width: 104px; height: auto; display: block; }
  .navdw__x {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
  }
  .navdw__x svg { width: 18px; height: 18px; }

  .navdw__foot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    margin-top: auto;      /* dính đáy ngăn kéo dù menu ngắn hay dài */
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
  }
  .navdw__lab {
    font-size: var(--fs-3xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--muted);
  }
  /* số điện thoại là hành động, không phải chữ trang trí ⇒ đủ 44px để bấm */
  .navdw__tel {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--serif);
    font-size: var(--fs-lg);
    color: var(--gold) !important;
    letter-spacing: 0.04em;
  }
  .navdw__zalo {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-xs);
    color: var(--muted) !important;
    letter-spacing: 0.06em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM LIÊN HỆ — bớt ô lúc đầu + MÀN XÁC NHẬN sau khi gửi (04/08)
   ═══════════════════════════════════════════════════════════════════════════
   Chủ chốt: "ít field ban đầu · sau khi gửi hiện thông báo sang, không giống
   form thường · cảm giác concierge hơn".
   Mặc định chỉ hỏi 3 thứ đủ để gọi lại được (tên · SĐT · quy mô vốn); loại tài
   sản / mục tiêu / ghi chú gập vào <details>. KHÔNG xoá ô nào — người nghiêm
   túc vẫn muốn nói rõ, chỉ là không đập 6 ô vào mắt ngay từ đầu.               */
.cform__more { margin: 0; }
/* ☠️ ĐÓNG <details> KHÔNG ĐỦ ĐỂ ẨN. Trình duyệt ẩn nội dung details bằng cơ chế
   nội bộ, nhưng CSS của trang có rule gán `display` cho `.field` — nó ĐÈ lên và
   ô vẫn hiện dù `details.open === false`. Đo được: open=false mà select vẫn
   `display: inline-block`, offsetParent khác null.
   ⇒ Ẩn tường minh. Đừng tin mỗi thuộc tính `open`. */
.cform__more:not([open]) > *:not(summary) {
  display: none !important;
}
.cform__more > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.cform__more > summary::-webkit-details-marker { display: none; }
.cform__more > summary::before {
  content: "+";
  font-size: 1.1em;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.25s var(--ease);
}
.cform__more[open] > summary::before { content: "−"; }
.cform__more > summary:hover { color: var(--text); }
.cform__more[open] > summary { margin-bottom: 0.75rem; }
.cform__more .field + .field { margin-top: 0.75rem; }

/* ── màn xác nhận ── */
.cform__done { display: none; }
.contact__form.is-sent > *:not(.cform__done):not(.contact__formmsg) { display: none; }
/* dòng #bookMsg giữ lại cho TRÌNH ĐỌC MÀN HÌNH (nó mang aria-live) nhưng ẩn
   khỏi mắt — ẩn hẳn bằng display:none thì người khiếm thị mất tín hiệu đã gửi */
.contact__form.is-sent .contact__formmsg {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.contact__form.is-sent .cform__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  animation: rise 0.6s var(--ease) both;
}
.cform__done-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.cform__done-mark svg { width: 20px; height: 20px; }
.cform__done-h {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--text);
}
.cform__done-p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
  max-width: 42ch;
}
/* số điện thoại là lối đi thẳng cho người không muốn đợi ⇒ đủ 44px để bấm */
.cform__done-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--serif);
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
  color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIẾT CHẾ — bỏ "diễn tải trang" + bớt lớp nổi (04/08)
   ═══════════════════════════════════════════════════════════════════════════
   Chủ: "mobile đủ chức năng chứ chưa chuyên nghiệp, chưa trơn tru" + lấy Rolex
   làm chuẩn tham chiếu.
   ĐO ĐƯỢC trước khi sửa: cuộn **60fps, 0 khung rớt** · **CLS = 0**. Tức KHÔNG
   phải lỗi kỹ thuật — mượt sẵn rồi. Cảm giác thiếu chuyên nghiệp đến từ TIẾT CHẾ.

   ① MÀN CHỜ: đang có logo + thanh tiến trình + dòng "ĐANG DỰNG BẢN ĐỒ TÀI SẢN".
      Không thương hiệu xa xỉ nào THÔNG BÁO rằng mình đang tải. Và trang nay sẵn
      sàng ở 1,2s ⇒ cái màn đó chỉ còn là diễn.
      Giữ lại tấm nền trơn (chống loé nội dung chưa dựng xong — vẫn cần), BỎ mọi
      thứ trình diễn bên trong, và tan nhanh hơn.
      ⚠️ KHÔNG xoá hẳn #loader: nó vẫn là tấm che lúc CSS/phông chưa về.
   ② LỚP NỔI: đo được **4 thứ hiện cùng lúc** (nav · thanh liên hệ · nút lên đầu
      trang · Bộ sưu tập). Rolex có đúng MỘT. Bỏ nút "lên đầu trang" trên điện
      thoại — vuốt lên là thao tác ai cũng biết, còn thanh trạng thái iOS chạm
      hai lần cũng về đầu; giữ nó chỉ để chiếm chỗ.                              */
.loader__mark,
.loader__bar,
.loader__txt {
  display: none;
}
.loader {
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
@media (max-width: 820px) {
  .to-top { display: none !important; }
}