/* ─────────────────────────────────────────────────────────────────────────
   canhotot.vn — component styles
   ───────────────────────────────────────────────────────────────────────── */

/* ── Header ─── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  transition: box-shadow 0.2s, background 0.2s, border-color 0.2s;
  border-bottom: 1px solid transparent;
}
.hdr.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .hdr.is-scrolled { background: rgba(15, 15, 15, 0.88); }
.hdr-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; gap: 32px;
}
.hdr-nav {
  display: flex; align-items: center; gap: 28px;
  font-size: 14.5px;
}
.hdr-nav ul, .hdr-nav .hdr-nav-list {
  display: flex; align-items: center; gap: 28px;
  list-style: none; padding: 0; margin: 0;
}
.hdr-nav li { display: inline-flex; }
.hdr-nav a {
  color: #3a3a3a; font-weight: 500; padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.hdr-nav a:hover { color: var(--ink); }
.hdr-nav li.current-menu-item a,
.hdr-nav li.current_page_item a { color: var(--ink); border-bottom-color: var(--red); }

.mm-nav .mm-nav-list, .mm-nav ul {
  display: flex; flex-direction: column; gap: 4px;
  list-style: none; padding: 0; margin: 0;
}
.hdr-right { display: flex; align-items: center; gap: 16px; }
.hdr-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink-mute);
}
.hdr-link:hover { color: var(--ink); }
.hdr-burger { display: none; background: transparent; border: 0; padding: 4px; color: var(--ink); }

@media (max-width: 1024px) {
  .hdr-nav { display: none; }
}
@media (max-width: 720px) {
  .hdr-row { height: 56px; gap: 12px; }
  .hdr-right { gap: 8px; }
  .hdr-right .hdr-link { display: none; }
  .hdr-right .btn { display: none; }   /* Phase 14X.9 — "Đăng tin" đã có trong mobile menu → ẩn ở header tránh tràn */
  .hdr-burger { display: inline-flex; }
}

/* ── Mobile menu ─── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1200; /* Phase 16.13 — trên map mode (z-800) + filter pill (1100): menu không chui sau bản đồ */
  display: flex; justify-content: flex-end;   /* panel sát phải — drawer kiểu batdongsan */
}
.mobile-menu[hidden] { display: none !important; }
/* Backdrop mờ (phần trang sau bên trái) — click để đóng */
.mm-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,34,0.45);
  animation: chtMmFade 0.2s ease;
}
/* Panel drawer trượt từ phải vào — KHÔNG phủ full màn hình */
.mm-panel {
  position: relative;
  width: 86%; max-width: 360px; height: 100%;
  background: var(--bg);
  padding: 16px var(--gutter) 24px;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  box-shadow: -10px 0 36px -10px rgba(0,0,0,0.28);
  animation: chtMmSlide 0.24s ease;
}
@keyframes chtMmSlide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes chtMmFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mm-head { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: 24px; }
.mm-head button { background: transparent; border: 0; color: inherit; padding: 6px; }
.mm-nav { display: flex; flex-direction: column; gap: 0; }
.mm-nav li { list-style: none; }   /* bỏ dấu chấm tròn (li trần do wp_nav_menu items_wrap không có <ul>) */
/* Phase 15.8 — Menu accordion: row (icon + link + toggle) + sub-list loại hình kiểu batdongsan */
.mm-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.mm-row:last-of-type { border-bottom: 0; }
.mm-link {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--ink); padding: 13px 2px;
}
.mm-ico { display: inline-flex; color: var(--ink-mute); flex-shrink: 0; }
.mm-toggle {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-mute); display: flex; align-items: center;
  padding: 12px 6px; margin-left: 4px; transition: transform .22s ease;
}
.mm-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.mm-nav .mm-sub { display: block; list-style: none; margin: 0; padding: 2px 0 10px 36px; }
.mm-nav .mm-sub[hidden] { display: none; }
.mm-nav .mm-sub a { display: block; font-size: 14.5px; font-weight: 400; color: #3a3a3a; padding: 8px 2px; }
.mm-nav .mm-sub a:active, .mm-nav .mm-sub a:hover { color: var(--red); }
.mm-cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
.mm-cta .btn { width: 100%; }
/* Phase 15.7 — Auth CTAs đầu menu mobile (Đăng nhập + Đăng ký + Đăng tin) kiểu batdongsan */
.mm-auth { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.mm-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-auth .btn { width: 100%; min-height: 46px; font-size: 15px; }

/* ── Hero overlap ─── */
.hero { position: relative; }
.hero-overlap {
  position: relative; z-index: 20; padding: 0; /* Phase 16.15 — nâng hero (chứa dropdown filter) trên card section + tim card (z-4) để dropdown không bị tim đè */
  min-height: clamp(520px, 62vh, 680px);
  display: flex; align-items: center;
  overflow: visible;          /* ROOT CAUSE FIX: was 'hidden' → nó cắt dropdown filter khi thò xuống section dưới. Clip ảnh nền chuyển xuống .hero-bg. */
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }   /* giữ ảnh nền + scrim đúng trong khung hero (thay vai trò clip của .hero-overlap) */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* warm scrim, darkest on the left so copy reads and the room shows on the right */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      rgba(22,18,15,0.86) 0%,
      rgba(22,18,15,0.62) 36%,
      rgba(22,18,15,0.24) 64%,
      rgba(22,18,15,0.04) 100%),
    linear-gradient(0deg,
      rgba(22,18,15,0.30) 0%,
      rgba(22,18,15,0) 40%);
}
.hero-overlap-inner {
  position: relative; z-index: 1;
  width: 100%;
  padding-top: 34px; padding-bottom: 40px;
  color: #fff;
}
.hero-content { max-width: 820px; }
.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 12px;
  color: rgba(255,255,255,0.78);
}
.section-eyebrow.on-photo, .hero-sub.on-photo { color: rgba(255,255,255,0.88); }
.hero-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(31px, 3.7vw, 48px); line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 0 0 14px;
  max-width: 16ch;
}
.hero-title.on-photo { color: #fff; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,0.25); }
.hero-title em { font-style: normal; color: var(--red); font-weight: 800; }
.hero-title.on-photo em { color: #FF8A8E; }
.hero-hl { position: relative; display: inline-block; color: #fff; padding: 0; text-shadow: inherit; }
/* H1 typewriter: dòng chạy luôn 1 dòng (không vỡ 3 hàng) + con trỏ nháy (Phase 17.5) */
[data-cht-hero-typed] { white-space: nowrap; }
[data-cht-hero-typed].cht-typed-on::after { content: '|'; display: inline-block; margin-left: 1px; font-weight: 300; color: currentColor; animation: chtCaret 0.85s steps(1) infinite; }
@keyframes chtCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hero-sub { font-size: clamp(15px, 1.25vw, 17.5px); max-width: 46ch; margin: 0 0 20px; line-height: 1.5; }
.hero-search-wrap { margin-top: 0; max-width: 700px; }
.hero-search-frost {
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 18px 50px -18px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hero-search-frost .search-pill {
  box-shadow: 0 6px 24px -10px rgba(0,0,0,0.35);
  border-color: transparent;
}

/* Funnel button trong search row + chips collapsible (toggle) */
.sp-filter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--ink);
  flex-shrink: 0; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sp-filter:hover { border-color: var(--ink); background: var(--surface-2); }
.sp-filter.on { background: var(--red-soft); border-color: var(--red); }
/* Bộ lọc nâng cao — 3 pill xịn (Mức giá/Phòng ngủ/Diện tích), ẩn mặc định, funnel toggle */
.sp-advanced { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.search-pill .sp-advanced { display: none; }
.search-pill.sp-adv-open .sp-advanced { display: grid; }
.sp-advanced .cht-filter-pill { min-width: 0; }
.cht-pill-dropdown-loai { min-width: 240px; }
/* Loại căn hộ: list cuộn + foot dính đáy (để cap chiều cao không cắt nút Áp dụng) */
.search-pill .cht-filter-pill.is-open .cht-pill-dropdown-loai { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.search-pill .cht-pill-dropdown-loai .cht-pill-radios { overflow-y: auto; flex: 1; min-height: 0; margin: 0; }
.search-pill .cht-pill-dropdown-loai .cht-pill-foot { flex-shrink: 0; }
/* Dropdown nằm trong hero (chữ trắng) → ép chữ đậm để nhãn không bị trắng-trên-trắng (vô hình) */
.search-pill .cht-pill-dropdown { color: var(--ink); }
.sp-advanced .cht-pill-toggle { width: 100%; justify-content: space-between; padding: 0 18px; }
/* Giảm chiều cao hàng tìm kiếm hero một chút (52 → 46) */
.search-pill .sp-input, .search-pill .sp-go, .search-pill .sp-filter { height: 46px; }
.search-pill .sp-filter { width: 46px; }
/* Responsive hero search (mobile) — giữ 1 hàng [ô tìm | phễu | Tìm kiếm] thay vì xếp dọc */
@media (max-width: 720px) {
  .search-pill .sp-row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .search-pill .sp-input { flex: 1 1 100%; min-width: 0; }
  .search-pill .sp-filter { flex: 0 0 auto; }
  .search-pill .sp-go { flex: 1 1 0; min-width: 0; width: auto; padding: 0 16px; }
}
@media (max-width: 640px) {
  /* 4 pill 1 hàng trên mobile — thu padding/font + cắt nhãn (ellipsis) cho vừa 4 cột hẹp */
  .search-pill .sp-advanced { gap: 6px; }
  .search-pill .sp-advanced .cht-pill-toggle { padding: 0 6px; gap: 0; font-size: 12px; justify-content: center; }
  .search-pill .sp-advanced .cht-pill-toggle svg { display: none; } /* ẩn chevron để đủ chỗ nhãn */
  .search-pill .sp-advanced .cht-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  /* Pill dropdown vừa khít card: frost backdrop-filter neo fixed theo frost → bỏ width:100vw */
  .search-pill .cht-filter-pill.is-open .cht-pill-dropdown,
  .search-pill .cht-filter-pill.is-open .cht-pill-dropdown-range,
  .search-pill .cht-filter-pill.is-open .cht-pill-dropdown-wide {
    width: auto; max-width: none;
  }
  /* P0 (Codex): backdrop-filter trên frost tạo containing-block → bottom-sheet position:fixed neo theo frost thay vì viewport. Tắt blur ở mobile để fixed neo đúng viewport. */
  .hero-search-frost { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sp-field { position: relative; }
.sp-field-btn {
  width: 100%; text-align: left;
  display: flex; align-items: center;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sp-field-btn:hover { background: var(--surface); border-color: var(--border-strong); }
.sp-field-btn.is-open { background: var(--surface); border-color: var(--ink); }
.sp-field-value {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.sp-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px -8px rgba(15,23,34,0.18);
  padding: 6px; z-index: 30;
  display: flex; flex-direction: column;
}
.sp-menu[hidden] { display: none; }
.sp-menu-field { width: 100%; min-width: 0; }
.sp-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 13.5px; color: var(--ink);
  border-radius: 6px;
  transition: background 0.1s;
}
.sp-menu-item:hover { background: var(--surface-2); }
.sp-menu-item.on { background: var(--red-soft); color: var(--red-deep); font-weight: 500; }
@media (max-width: 720px) { .sp-advanced { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 900px) {
  .hero-overlap { min-height: 0; padding: 0; align-items: stretch; }
  .hero-overlap-inner { padding-top: 48px; padding-bottom: 44px; }
  .hero-title { font-size: clamp(26px, 6.8vw, 40px); }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(22,18,15,0.78) 0%,
      rgba(22,18,15,0.60) 45%,
      rgba(22,18,15,0.50) 100%);
  }
  .sp-filter { width: 48px; height: 48px; }
}

/* ── Hero split ─── */
.hero-split { padding: 56px 0 0; }
.hero-split-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 48px; align-items: center;
}
.hero-split .hero-title { color: var(--ink); margin: 12px 0 16px; max-width: 14ch; }
.hero-split .hero-title em { color: var(--red); }
.hero-split .hero-sub { color: var(--ink-mute); }
.hero-photo {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5; max-height: 540px;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--ink-mute);
}
.hero-meta strong {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  display: block; color: var(--ink); line-height: 1.1; letter-spacing: -0.025em;
}
@media (max-width: 900px) {
  .hero-split-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo { aspect-ratio: 16/10; max-height: none; order: -1; }
}

/* ── SearchPill (new horizontal pill design) ─── */
.search-pill {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 8px 32px -8px rgba(15,23,34,0.20), 0 1px 0 rgba(0,0,0,0.04);
  padding: 18px 22px 16px;
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--border);
}
.sp-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: -4px -6px 0;
}
.sp-tab {
  position: relative;
  padding: 10px 16px 12px;
  background: transparent; border: 0;
  font-size: 14.5px; font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
  transition: color 0.15s;
}
.sp-tab:hover { color: var(--ink); }
.sp-tab.on { color: var(--ink); }
.sp-tab.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2.5px; background: var(--red);
  border-radius: 2px 2px 0 0;
}

.sp-row {
  display: flex; gap: 10px; align-items: stretch;
}
.sp-input {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s, background 0.15s;
}
.sp-input:focus-within {
  border-color: var(--ink); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15,23,34,0.06);
}

/* ── Live search suggest dropdown (Phase 15) ─── */
.cht-suggest-anchor { position: relative; }
.cht-suggest-box {
  position: absolute; top: calc(100% + 8px); left: 0;
  z-index: 120;
  width: max(100%, 360px); max-width: 92vw;
  max-height: 60vh; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 44px -10px rgba(16,24,40,0.20), 0 2px 6px rgba(16,24,40,0.06);
  padding: 6px;
  text-align: left;
}
.cht-suggest-box[hidden] { display: none !important; }
.cht-suggest-group {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 10px 5px;
}
.cht-suggest-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink);
}
.cht-suggest-item:hover,
.cht-suggest-item.is-active { background: var(--surface-2); }
.cht-suggest-ic {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--red-soft); color: var(--red);
}
.cht-suggest-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.cht-suggest-tx strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cht-suggest-tx em { font-style: normal; font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cht-suggest-lvl {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2);
  padding: 3px 9px; border-radius: 999px;
}
/* Phase 16.7 P4a — badge "Mới" cho gợi ý phường sau sáp nhập */
.cht-suggest-lvl--new {
  color: #fff;
  font-weight: 700;
  background: var(--brand, #FD292E);
}
/* Phase 16.7 P4b — switch Địa chỉ Cũ/Mới trong filter modal (gọn 1 dòng) */
.cht-addr-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; padding: 10px 14px;
  background: var(--surface-2); border-radius: 12px;
}
.cht-addr-switch__label { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.cht-addr-switch__label small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.cht-addr-switch__btn {
  flex-shrink: 0; width: 46px; height: 27px; border: 0; padding: 0;
  background: var(--border, #d4d4d8); border-radius: 999px; cursor: pointer;
  position: relative; transition: background .18s;
}
.cht-addr-switch__btn.is-on { background: var(--brand, #FD292E); }
.cht-addr-switch__knob {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s;
}
.cht-addr-switch__btn.is-on .cht-addr-switch__knob { transform: translateX(19px); }
/* Phase 16.7 P4b — project picker (shared) cách block địa chỉ phía trên 18px (Phường :last-child mất margin) */
[data-cht-modal-project-wrap] { margin-top: 18px; }
.cht-suggest-empty { padding: 20px 12px; text-align: center; color: var(--ink-mute); font-size: 13.5px; }
/* Ô gợi ý ví dụ (empty-state kiểu batdongsan) — Phase 17.2 */
.cht-suggest-hint { padding: 4px 0 6px; }
.cht-suggest-hint-tt { font-size: 13px; color: var(--ink-mute); padding: 8px 14px 6px; }
.cht-suggest-ex-list { list-style: none; margin: 0; padding: 0; }
.cht-suggest-ex { display: block; width: 100%; text-align: left; background: transparent; border: 0; font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; padding: 9px 14px 9px 28px; border-radius: 8px; cursor: pointer; position: relative; }
.cht-suggest-ex::before { content: '•'; position: absolute; left: 14px; color: var(--red, #FD292E); font-weight: 700; }
.cht-suggest-ex:hover { background: var(--surface-2, #f3f4f6); }
/* Toggle "địa chỉ mới sau sáp nhập" (header suggest panel) — Phase 17.3 */
.cht-suggest-sn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--surface-2, #f3f4f6); border-radius: 10px; margin-bottom: 4px; }
.cht-suggest-sn-tx { font-size: 13px; font-weight: 600; color: var(--ink); }
.cht-sn-switch { flex-shrink: 0; width: 40px; height: 22px; border-radius: 999px; border: 0; background: #cbd2da; cursor: pointer; padding: 0; position: relative; transition: background 0.15s; }
.cht-sn-switch.is-on { background: var(--red, #FD292E); }
.cht-sn-dot { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 0.15s; }
.cht-sn-switch.is-on .cht-sn-dot { left: 20px; }
.sp-input input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: 15px; color: var(--ink);
  outline: none;
}
.sp-input input::placeholder { color: var(--ink-soft); }
.sp-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 24px;
  background: var(--red); color: #fff;
  border: 0; border-radius: var(--radius-lg);
  font-weight: 600; font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sp-go:hover { background: var(--red-deep); }

.sp-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sp-chip-wrap { position: relative; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.sp-chip:hover { border-color: var(--ink); }
.sp-chip.has-value { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sp-chip.is-open { border-color: var(--ink); background: var(--surface-2); }
.sp-chip.has-value.is-open { background: var(--ink); color: var(--bg); }
.sp-chip-filters { color: var(--ink-mute); font-weight: 500; }

.sp-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px -8px rgba(15,23,34,0.18);
  padding: 6px;
  z-index: 30;
  display: flex; flex-direction: column;
}
.sp-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  background: transparent; border: 0;
  font-size: 13.5px; color: var(--ink);
  border-radius: 6px;
  transition: background 0.1s;
}
.sp-menu-item:hover { background: var(--surface-2); }
.sp-menu-item.on { background: var(--red-soft); color: var(--red-deep); font-weight: 500; }

.sp-popular {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 12.5px;
}
.sp-popular > span { color: var(--ink-soft); font-weight: 500; }
.sp-popular ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.sp-popular a {
  color: var(--ink); font-weight: 500;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
}
.sp-popular a:hover { border-color: var(--ink); }

@media (max-width: 720px) {
  .search-pill { padding: 14px 14px 12px; }
  .sp-row { flex-direction: column; }
  .sp-input { height: 48px; }
  .sp-go { height: 46px; width: 100%; }
  .sp-tab { padding: 10px 12px 12px; font-size: 13.5px; }
  .sp-popular ul { gap: 4px 10px; }
}

/* ── Listing grid ─── */
.grid { display: grid; gap: var(--density-card-gap); }
.grid-listings {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) { .grid-listings { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .grid-listings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .grid-listings { grid-template-columns: 1fr; } }

/* ── Listing card (new dense pattern) ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 4px 12px -6px rgba(16,24,40,0.06); /* depth nghỉ mềm — premium */
  transition: box-shadow 0.22s ease, border-color 0.2s, transform 0.25s cubic-bezier(.2,.7,.3,1);
}
.card:hover {
  box-shadow: 0 14px 34px -10px rgba(16,24,40,0.16);
  border-color: var(--border-strong);
}
.card-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface-2);
}
.card-photo {
  position: absolute; inset: 0;
  background: transparent; border: 0; padding: 0;
  cursor: zoom-in;
}
.card-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.card-photo img.is-active { opacity: 1; }
.card:hover .card-photo img.is-active { transform: scale(1.04); }

/* Phase 14X.10 — nút chuyển ảnh (hover mới hiện) */
.card-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 0; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4;
  opacity: 0; transition: opacity 0.18s, background 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.card-media:hover .card-nav { opacity: 1; }
.card-nav:hover { background: #fff; }
.card-nav[hidden] { display: none; }
.card-nav-prev { left: 10px; }
.card-nav-next { right: 10px; }

/* Top overlay: type pill + status flags */
.card-overlay-top {
  position: absolute; left: 12px; top: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  pointer-events: none;
}
.card-typetag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 4px;
  pointer-events: auto;
}
.card-typetag.is-sale { background: var(--red); color: #fff; }
.card-typetag.is-rent { background: var(--navy); color: #fff; }

.card-flag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 9px;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 11px; font-weight: 600;
  border-radius: 4px;
  pointer-events: auto;
}
.card-flag-new { background: rgba(214,58,64,0.96); color: #fff; }
.card-flag-top { background: rgba(15,23,34,0.92); color: var(--amber); }

/* Phase 14X.10 — heart trần (không nút tròn): trắng + shadow, hover/saved → đỏ */
.card-fav {
  position: absolute; right: 10px; top: 10px;
  padding: 4px; background: transparent; border: 0;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 4;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
  transition: color 0.15s, transform 0.15s;
}
.card-fav:hover { transform: scale(1.12); color: var(--red); }
.card-fav.is-fav { color: var(--red); }
/* Tim 2-tông (ruột đen mờ + viền trắng) — chuyển đỏ khi hover / đã lưu (Phase 16.14) */
.card-fav svg path { transition: fill 0.15s, fill-opacity 0.15s; }
.card-fav:hover svg path,
.card-fav.is-fav svg path { fill: var(--red); fill-opacity: 1; }

/* Phase 14X.10 — pill kính mờ gộp video + đếm ảnh */
.card-photocount {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px;
  background: rgba(15,23,34,0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
}
.card-photocount svg { display: block; }

.card-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
}
.card-dots .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 0; padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: width 0.2s, background 0.2s;
}
.card-dots .dot.on { background: #fff; width: 14px; border-radius: 999px; }

/* Verification banner — across the bottom of the photo */
.card-banner {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(15,23,34,0) 0%, rgba(15,23,34,0.92) 100%);
  color: #fff;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.01em;
  padding-top: 28px;
}
.card-banner span {
  display: inline-flex; align-items: center; gap: 4px;
}
.card-banner span:first-child { color: #fff; }
.card-banner span:first-child svg { color: var(--amber); }
.card-banner .banner-sep { color: var(--amber); }

.card-body { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.card-price-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.card-price {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--red);
}
.card-pricem2 {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--ink-soft);
  font-weight: 500;
}

.card-title {
  margin: 0;
  font-size: 14px; line-height: 1.4;
  color: var(--ink);
  font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title-type { color: var(--ink-mute); }
.card-title-project { color: var(--ink); font-weight: 600; border-bottom: 1px solid transparent; }
.card-title-project:hover { border-color: var(--ink); }
.card-title-link { color: var(--ink); font-weight: 600; transition: color 0.15s; }
.card-title-link:hover { color: var(--red); }

.card-specs {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 12.5px; color: var(--ink);
  font-weight: 500;
}
.card-specs li { display: inline-flex; align-items: center; gap: 4px; }
.card-spec-year, .card-spec-furn { color: var(--ink-mute); font-weight: 400; }

.card-addr {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ink-mute);
  line-height: 1.4;
}

.card-metro {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-mute);
}
.metro-line {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 5px;
  background: var(--navy); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.metro-m1, .metro-m2 { background: var(--red); }
.metro-brt { background: var(--amber); color: var(--navy); }
.metro-name { color: var(--ink); font-weight: 500; }
.metro-sep { color: var(--border-strong); }
.metro-time { color: var(--ink-mute); }

.card-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.card-tags li {
  font-size: 11px; padding: 3px 8px;
  background: rgba(15,42,74,0.06); color: var(--navy);
  border-radius: 4px;
  font-weight: 500;
}
[data-theme="dark"] .card-tags li { background: rgba(255,255,255,0.06); color: var(--ink); }
.card-tags li.more { color: var(--ink-mute); background: transparent; padding: 3px 4px; }

.card-foot {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-agent {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; flex: 1;
}
.card-agent-meta { min-width: 0; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar-lg { width: 40px; height: 40px; font-size: 13px; }
.card-agent strong {
  display: flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
}
.card-agent em {
  font-style: normal; font-size: 11px; color: var(--ink-soft);
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-cta {
  display: flex; gap: 6px; flex-shrink: 0;
}
.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 32px; padding: 0 12px;
  border-radius: var(--radius);
  font-size: 12.5px; font-weight: 600;
  border: 0;
  transition: background 0.15s;
}
.cta-call {
  background: var(--red); color: #fff;
}
.cta-call:hover { background: var(--red-deep); }
.cta-chat {
  background: transparent; border: 0; padding: 0;
  transition: opacity 0.15s;
}
.cta-chat:hover { opacity: 0.78; }
.cta-chat .cht-ico-img { display: block; }
/* Phase 18 — nút "bấm hiện số" trên card (batdongsan-style, thay cặp Gọi/Zalo trơ) */
.cta-phone {
  padding: 0 10px;
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums; /* số masked → số full không nhảy bề rộng */
}
.cta-phone .num { font-weight: 700; letter-spacing: 0.01em; }

/* Card variants — preserved from before but updated */
.card-edge { border: 0; box-shadow: none; }
.card-edge:hover { box-shadow: 0 12px 32px -10px rgba(15,23,34,0.12); }
.card-edge .card-media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.card-rounded { border-radius: 14px; }
.card-rounded .card-media { border-radius: 12px 12px 0 0; }

.card-editorial { background: transparent; border: 0; box-shadow: none; }
.card-editorial:hover { box-shadow: none; transform: translateY(-2px); }
.card-editorial .card-media { border-radius: var(--radius); }
.card-editorial .card-body { padding: 14px 2px 6px; }
.card-editorial .card-foot { border-top: 0; padding-top: 8px; }

/* ── Khám phá theo khu vực — bento + tab Bán/Cho thuê ─── */
.cht-area-tabs {
  display: inline-flex; gap: 4px; margin-top: 18px;
  padding: 4px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px;
}
.cht-area-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-mute);
  transition: all 0.18s; white-space: nowrap;
}
.cht-area-tab:hover { color: var(--ink); }
.cht-area-tab[data-active="true"] { background: var(--ink); color: var(--bg); }

.cht-area-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 248px 248px;
  gap: 16px;
}
.cht-area-bento .district-card { aspect-ratio: auto; height: 100%; }
.cht-area-bento .area-hero    { grid-column: 1;     grid-row: 1 / 3; }
.cht-area-bento .area-wide-tr { grid-column: 2 / 4; grid-row: 1; }
.cht-area-bento .area-cell-tr { grid-column: 4;     grid-row: 1; }
.cht-area-bento .area-cell-br { grid-column: 2;     grid-row: 2; }
.cht-area-bento .area-wide-br { grid-column: 3 / 5; grid-row: 2; }
.cht-area-bento .area-hero .district-meta strong { font-size: 30px; }

/* Tablet: hero + wides full-width, 2 portraits side-by-side */
@media (max-width: 1024px) {
  .cht-area-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 200px; }
  .cht-area-bento .district-card { grid-column: auto; grid-row: auto; }
  .cht-area-bento .area-hero    { grid-column: 1 / 3; }   /* cao bằng các tile khác (auto-rows) */
  .cht-area-bento .area-wide-tr { grid-column: 1 / 3; }
  .cht-area-bento .area-wide-br { grid-column: 1 / 3; }
  .cht-area-bento .area-hero .district-meta strong { font-size: 22px; }   /* bằng tile khác, không to hơn */
}
@media (max-width: 480px) {
  .cht-area-bento { gap: 12px; grid-auto-rows: 156px; }
  .cht-area-bento .district-meta strong { font-size: 19px; }
  .cht-area-bento .area-hero .district-meta strong { font-size: 19px; }   /* Đà Nẵng đồng đều các tile */
}

/* ── District cards ─── */
.district-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
}
.district-img { position: absolute; inset: 0; }
.district-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.district-card:hover .district-img img { transform: scale(1.06); }
.district-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
.district-meta {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  color: #fff;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px;
}
.district-meta strong {
  display: block; font-family: var(--font-display);
  font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em;
}
.district-meta span { font-size: 12px; color: rgba(255,255,255,0.7); }
.district-meta em {
  font-style: normal; font-size: 12px; font-weight: 500;
  background: rgba(255,255,255,0.16); padding: 4px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ── Developments ─── */
.grid-developments { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .grid-developments { grid-template-columns: 1fr; } }
.dev-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.dev-img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.dev-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.dev-card:hover .dev-img img { transform: scale(1.04); }
.dev-status {
  position: absolute; left: 14px; top: 14px;
  background: var(--ink); color: var(--bg);
  padding: 5px 11px; border-radius: 4px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.02em;
}
.dev-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.dev-developer {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.dev-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.025em;
  margin: 2px 0 4px;
}
.dev-loc {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--ink-mute);
}
.dev-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.dev-stats em {
  display: block; font-style: normal;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px;
}
.dev-stats strong {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  color: var(--ink);
}

/* ── Insights ─── */
.section-insights { background: #222222; color: #F7F7F7; }
[data-theme="dark"] .section-insights { background: #050505; }
.section-insights .section-title.on-dark { color: #F7F7F7; }
.section-insights .section-eyebrow.on-dark { color: rgba(255,255,255,0.65); }
.section-insights .section-sub.on-dark { color: rgba(255,255,255,0.7); }
.insights-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px;
  align-items: center;
}
.insights-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
}
.stat-label {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1; color: #F7F7F7;
  margin-bottom: 8px;
}
.stat-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
}
.stat-delta.up { color: var(--amber); }
.stat-delta.down { color: #FFA6A9; }
.stat-delta em { font-style: normal; color: rgba(255,255,255,0.5); margin-left: 4px; font-weight: 400; }
.btn-ghost-on-dark {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3);
}
.btn-ghost-on-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }

@media (max-width: 960px) {
  .insights-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .insights-stats { grid-template-columns: 1fr; }
  .stat-value { font-size: 30px; }
}

/* ── Seller CTA ─── */
.seller-cta {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.seller-steps {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  line-height: 1; color: var(--red);
  flex-shrink: 0; width: 48px;
  letter-spacing: -0.03em;
}
.step strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.step em { font-style: normal; font-size: 13.5px; color: var(--ink-mute); }

.dashboard-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -20px rgba(15,23,34,0.25);
  overflow: hidden;
}
.dm-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.dm-dots { display: flex; gap: 5px; }
.dm-dots i {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-strong);
}
.dm-title { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.dm-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.dm-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.dm-stats em { display: block; font-style: normal; font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.dm-stats strong {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.025em;
}
.dm-listing {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; background: var(--surface-2); border-radius: var(--radius);
}
.dm-thumb {
  width: 56px; height: 56px; border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
}
.dm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dm-info { flex: 1; min-width: 0; }
.dm-info strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.dm-info em { font-style: normal; font-size: 11.5px; color: var(--ink-mute); }
.dm-bar {
  height: 4px; background: var(--border); border-radius: 999px; margin: 6px 0 4px;
  overflow: hidden;
}
.dm-bar span { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.dm-tiny { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.dm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px;
}

@media (max-width: 960px) {
  .seller-cta { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Blog ─── */
.grid-blog { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-blog { grid-template-columns: 1fr; } }
.blog-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.blog-img { aspect-ratio: 4/3; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-card:hover .blog-img img { transform: scale(1.04); }
.blog-body { padding: 22px 4px 4px; display: flex; flex-direction: column; gap: 10px; }
.blog-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.blog-meta em { font-style: normal; }
.blog-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.25; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
}
.blog-card p {
  font-size: 14px; color: var(--ink-mute); line-height: 1.55;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-read {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 1px;
  align-self: flex-start;
  margin-top: 4px;
}
.blog-card:hover .blog-read { color: var(--red); border-color: var(--red); }

/* ── Testimonials ─── */
.grid-testimonials { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-testimonials { grid-template-columns: 1fr; } }
.quote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.stars { display: flex; gap: 2px; color: var(--amber); }
.quote-card blockquote {
  margin: 0; font-family: var(--font-display); font-size: 18px;
  font-weight: 600; line-height: 1.4; letter-spacing: -0.015em;
  color: var(--ink);
}
.quote-card figcaption {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.quote-card figcaption strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.quote-card figcaption em { font-style: normal; font-size: 12px; color: var(--ink-soft); }

/* ── Press ─── */
.press { text-align: center; padding: 0 var(--gutter); }
.press-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 22px;
}
.press-logos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 36px 56px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: -0.02em;
}
.press-logo { opacity: 0.75; }
@media (max-width: 600px) {
  .press-logos { gap: 20px 32px; font-size: 17px; }
}

/* ── App download ─── */
.app-download {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 56px;
}
.app-tiny {
  display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px;
  font-size: 12.5px; color: var(--ink-mute);
}
.app-tiny span { display: inline-flex; align-items: center; gap: 4px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius);
  transition: opacity 0.15s;
}
.store-btn:hover { opacity: 0.88; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn em { font-style: normal; font-size: 10px; opacity: 0.75; }
.store-btn strong { font-size: 14px; font-weight: 600; }

.app-mock { display: flex; justify-content: center; }
.phone {
  width: 240px; height: 480px;
  background: #0F1722; border-radius: 36px;
  padding: 8px;
  box-shadow: 0 30px 60px -20px rgba(15,23,34,0.4);
  position: relative;
}
.phone-notch {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  width: 100px; height: 22px; border-radius: 999px;
  background: #0F1722; z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%; background: var(--bg); border-radius: 28px;
  padding: 38px 14px 14px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}
.ps-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink);
  padding: 0 6px;
}
.ps-bar { display: inline-block; width: 14px; height: 8px; background: var(--ink); border-radius: 2px; }
.ps-search {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--surface-2); border-radius: 8px;
  font-size: 12px; color: var(--ink-mute);
}
.ps-tabs { display: flex; gap: 14px; padding: 4px 4px; font-size: 12px; color: var(--ink-mute); }
.ps-tabs .on { color: var(--ink); font-weight: 700; position: relative; }
.ps-tabs .on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--red);
}
.ps-card {
  display: flex; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px;
}
.ps-card img { width: 70px; height: 70px; object-fit: cover; border-radius: 4px; }
.ps-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-card-body strong {
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
}
.ps-card-body em {
  font-style: normal; font-size: 11px; color: var(--ink-mute);
}
.ps-loc { display: inline-flex; align-items: center; gap: 2px; }

@media (max-width: 900px) {
  .app-download { grid-template-columns: 1fr; padding: 36px 24px; gap: 32px; }
  .app-mock .phone { width: 200px; height: 400px; }
}

/* ── Footer (99.co-style multi-section) ─── */
.ft {
  background: #0F1B3F;
  color: #C9D2E8;
  padding: 56px 0 24px;
  font-size: 14px;
}
[data-theme="light"] .ft, :root:not([data-theme="dark"]) .ft { background: #0F1B3F; }

.ft .wrap > .ft-grid + .ft-grid {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ft-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.ft-grid.ft-info {
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
}

.ft-col { min-width: 0; }

.ft-col h4 {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}

.ft-col h5 {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 16px 0 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ft-col a {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
  color: #A8B3CC;
  line-height: 1.55;
  transition: color 0.12s;
  text-decoration: none;
}
.ft-col a:hover { color: #FFFFFF; }

.ft-more {
  margin-top: 6px;
  font-size: 13px !important;
  color: #C9D2E8 !important;
  font-weight: 500;
}
.ft-more::after { content: ''; }

/* Brand / contact col */
.ft-col-brand .ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  margin-bottom: 14px;
  padding: 0;
}
.ft-col-brand .ft-logo:hover { color: #FFFFFF; }
.ft-logo-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--red, #E03131);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ft-logo-text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.ft-logo-dot { color: var(--red, #E03131); }

.ft-desc {
  font-size: 13.5px;
  color: #A8B3CC;
  line-height: 1.65;
  margin: 0 0 20px;
  padding: 0;
  max-width: 40ch;
}

.ft-contact, .ft-address {
  margin-top: 18px;
}
.ft-contact p, .ft-address p {
  font-size: 13px;
  color: #A8B3CC;
  margin: 4px 0;
  padding: 0;
  line-height: 1.55;
}
.ft-contact p strong, .ft-address p strong {
  color: #C9D2E8;
  font-weight: 600;
}
.ft-contact a {
  display: inline;
  padding: 0;
  color: #C9D2E8;
}
.ft-contact a:hover { color: #FFFFFF; text-decoration: underline; }

.ft-country {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.ft-flag { font-size: 16px; }

/* Footer bottom: social + back-to-top */
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  gap: 16px;
  flex-wrap: wrap;
}

.ft-social {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ft-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  color: #C9D2E8;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.ft-social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.ft-social-icon:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.ft-social-icon[aria-label="Facebook"]:hover { color: #4A8FFF; }
.ft-social-icon[aria-label="YouTube"]:hover  { color: #FF4444; }
.ft-social-icon[aria-label="TikTok"]:hover   { color: #25F4EE; }
/* Zalo chip — logo ẢNH chính thức, to hơn + nền trong cho nổi logo */
.ft-social-icon--zalo { background: transparent; border-color: transparent; }
.ft-social-icon--zalo img { width: 30px; height: 30px; }
.ft-social-icon--zalo:hover { background: rgba(255,255,255,0.06); border-color: transparent; transform: translateY(-2px); }
/* Icon dạng ảnh (logo Zalo...) — căn giữa theo dòng chữ */
.cht-ico-img { object-fit: contain; vertical-align: middle; }

.ft-backtop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #C9D2E8;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.ft-backtop:hover {
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
}
.ft-arrow {
  display: inline-flex;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  font-size: 14px;
}

.ft-bottom-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.ft-copyright {
  margin: 0;
  font-size: 13px;
  color: #6E7A99;
  line-height: 1.6;
}
.ft-copyright p { margin: 0; padding: 0; }

/* Responsive */
@media (max-width: 1024px) {
  .ft-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .ft-grid.ft-info { grid-template-columns: 1fr 1fr; }
  .ft-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ft { padding: 32px 0 20px; }
  /* Phase 15.9 — Footer accordion mobile (kiểu coolmate): mỗi cột (h4) gập lại, bấm + để mở */
  .ft-grid { grid-template-columns: 1fr; gap: 0; }
  .ft-grid.ft-info { grid-template-columns: 1fr; }
  .ft .wrap > .ft-grid + .ft-grid { margin-top: 0; padding-top: 0; }
  .ft-col h4 {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; margin: 0 !important; padding: 15px 0; font-size: 14.5px;
    border-top: 1px solid rgba(255,255,255,0.10);
    -webkit-user-select: none; user-select: none;
  }
  .ft-col h4::after { content: '+'; font-size: 22px; font-weight: 300; line-height: 1; color: #A8B3CC; }
  .ft-col h4.is-open::after { content: '\2212'; }
  .ft-col > a, .ft-col > .ft-more { padding: 7px 2px; }
  .ft-col > a:last-child { padding-bottom: 14px; }
  /* Brand col: hiển thị bình thường (không gập) + viền trên cho đồng bộ */
  .ft-col-brand { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 18px; }
  .ft-bottom { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .ft-bottom-right { justify-content: space-between; }
}

/* ── Lightbox ─── */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,12,20,0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lb-inner {
  position: relative;
  width: min(1200px, 100%); max-height: 92vh;
  background: var(--surface); border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.lb-close {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--ink);
  border: 0; display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lb-stage {
  position: relative; flex: 1; min-height: 0;
  background: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/10;
}
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--ink);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 20px 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.lb-meta h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 4px; color: var(--ink); letter-spacing: -0.025em; }
.lb-addr { font-size: 13px; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.lb-meta .card-specs { margin: 0; }
.lb-meta-right { display: flex; align-items: center; gap: 16px; }
.lb-price { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--red); letter-spacing: -0.03em; }
.lb-thumbs {
  display: flex; gap: 8px; padding: 14px 28px 20px;
  overflow-x: auto;
  position: relative;
}
.lb-thumb {
  width: 80px; height: 60px; flex-shrink: 0;
  border-radius: 4px; overflow: hidden;
  background: transparent; border: 2px solid transparent;
  padding: 0;
  transition: border-color 0.15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb.on { border-color: var(--red); }
.lb-counter {
  margin-left: auto; align-self: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
}
@media (max-width: 600px) {
  .lb { padding: 8px; }
  .lb-meta { padding: 14px 16px; }
  .lb-thumbs { padding: 10px 16px 16px; }
}

/* ── Empty state (Phase 2 — when no data) ─── */
.cht-empty {
  padding: 64px 24px;
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
}
.cht-empty p {
  font-size: 15px;
  color: var(--ink-mute);
  margin: 0 0 16px;
}

/* ── Archive listing (Phase 5) ─── */
.cht-archive { padding-top: 12px; padding-bottom: 64px; }
.cht-archive-head { margin-bottom: 20px; }
.cht-archive-head .section-title {
  font-size: clamp(20px, 1.8vw, 26px);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}

/* Phase 11H: Title row + alert toggle (match 99.co pattern) */
.cht-archive-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cht-archive-title-row .section-title { margin: 6px 0 0; }

.cht-alert-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--ink-mute, #6b7280);
  transition: color 0.15s;
}
.cht-alert-toggle:hover { color: var(--ink, #0f1722); }
.cht-alert-toggle__text { font-weight: 500; }
.cht-alert-toggle__switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.cht-alert-toggle__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.cht-alert-toggle__track {
  display: block;
  width: 40px;
  height: 22px;
  background: var(--border-strong, #d1d5db);
  border-radius: 999px;
  transition: background 0.2s ease;
  position: relative;
}
.cht-alert-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.cht-alert-toggle__input:checked ~ .cht-alert-toggle__track {
  background: var(--red, #FD292E);
}
.cht-alert-toggle__input:checked ~ .cht-alert-toggle__track .cht-alert-toggle__thumb {
  transform: translateX(18px);
}
.cht-alert-toggle.is-saved .cht-alert-toggle__text {
  color: var(--red, #FD292E);
}

@media (max-width: 768px) {
  /* Mobile: H1 trên + toggle xuống dòng dưới CĂN PHẢI */
  .cht-archive-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cht-alert-toggle { font-size: 13px; align-self: flex-end; }
}
.cht-breadcrumb {
  font-size: 13px;
  color: var(--ink-mute);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.cht-breadcrumb a { color: var(--ink-mute); }
.cht-breadcrumb a:hover { color: var(--red); }
.cht-breadcrumb span { color: var(--ink-soft); }
.cht-clear-filters { color: var(--red); text-decoration: underline; font-weight: 500; }

/* ── Filter Row 99co style (Phase 9.26) ─── */
.cht-filter-row-wrap {
  position: sticky; top: 50px; z-index: 40;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 12px 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s;
}
.cht-filter-row-wrap.is-stuck {
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 4px 16px -8px rgba(15,23,34,.12);
  border-bottom-color: var(--border);
}
/* Phase 11J.4 — Desktop 1-row (flatten wrappers via display:contents); Mobile 2-row */
.cht-filter-row-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: nowrap;
}
/* Desktop: flatten 2 wrapper divs → children flatten vào form flex */
.cht-filter-row-top    { display: contents; }
.cht-filter-pills-wrap { display: contents; }

/* Desktop visual order: [Bán/Thuê] [Search] [Bộ lọc] [Mức giá] [Phòng ngủ] [Diện tích] */
.cht-pill-mode               { order: 1; flex: 0 0 auto; }
.cht-filter-search           { order: 2; flex: 1 1 240px; min-width: 0; }
.cht-filter-advanced-btn     { order: 3; flex: 0 0 auto; }
.cht-pill-price              { order: 4; flex: 0 0 auto; }
.cht-pill-beds               { order: 5; flex: 0 0 auto; }
.cht-pill-area               { order: 6; flex: 0 0 auto; }

.cht-filter-pill {
  position: relative;
}
.cht-pill-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.cht-pill-toggle:hover { border-color: var(--ink); }
.cht-filter-pill.is-set .cht-pill-toggle {
  background: var(--red-soft); border-color: var(--red);
  color: var(--red-deep); font-weight: 600;
}
.cht-filter-pill.is-open .cht-pill-toggle {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,23,34,0.08);
}
.cht-pill-mode .cht-pill-toggle strong {
  font-family: var(--font-display); font-size: 14.5px;
}

.cht-pill-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 260px; max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: 0 12px 32px -8px rgba(15,23,34,0.18);
  z-index: 50;
  display: none;
}
.cht-filter-pill.is-open .cht-pill-dropdown { display: block; }
.cht-filter-pill.is-open .cht-pill-dropdown-range { display: flex; }
.cht-pill-foot {
  display: flex; gap: 10px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.cht-pill-foot .btn { flex: 1; height: 40px; font-size: 14px; font-weight: 600; border-radius: 10px; }
.cht-pill-foot .btn-ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink); }
.cht-pill-foot .btn-ghost:hover { background: var(--surface-2); }
.cht-pill-foot .btn-primary { flex: 1.4; background: var(--red); color: #fff; border: 1px solid var(--red); }
.cht-pill-foot .btn-primary:hover { background: var(--red-deep, #b8323a); }
.cht-pill-dropdown-narrow { min-width: 160px; padding: 6px; }
/* PN & WC dropdown: 7 chips Phòng ngủ (Tất cả/Studio/1/2/3/4/5+) cần ~420px. Anchor right edge, extend left. */
.cht-pill-dropdown-wide {
  min-width: 420px; max-width: 460px;
  height: 300px;
  max-height: 300px;
  left: auto; right: 0;
  padding: 14px 16px 0;
  overflow-y: auto;          /* was: overflow: hidden — khi flip-up cap max-height < content thì cuộn được */
  overflow-x: hidden;
  flex-direction: column;
}
.cht-filter-pill.is-open .cht-pill-dropdown-wide { display: flex; }
.cht-pill-dropdown-wide > .cht-pill-section { flex-shrink: 0; }
.cht-pill-dropdown-wide > .cht-pill-foot {
  margin: auto -16px 0;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  position: sticky;          /* foot luôn dính đáy vùng cuộn → nút Áp dụng không bao giờ bị cắt */
  bottom: 0;
  z-index: 2;
}
/* Range dropdown (Mức giá + Diện tích): 2 input + slider + presets list — Phase 9.33+ */
/* KHÔNG set display here — base .cht-pill-dropdown { display: none } sẽ hide.
   Khi .is-open → state rule below sets display: flex. */
.cht-pill-dropdown-range {
  min-width: 420px; max-width: 460px;
  height: 300px; max-height: 300px;
  left: auto; right: 0;
  padding: 0;
  flex-direction: column;
  overflow-y: auto;          /* Codex fallback: cap cực thấp vẫn cuộn được, không cắt foot */
  overflow-x: hidden;
}
/* Compact inputs/slider/foot vừa fit 300px */
.cht-pill-dropdown-range .cht-price-inputs { padding: 12px 14px 6px; }
.cht-pill-dropdown-range .cht-price-input-col label { font-size: 12px; margin-bottom: 4px; }
.cht-pill-dropdown-range .cht-price-input-col input { height: 36px; font-size: 13.5px; padding: 0 12px; }
.cht-pill-dropdown-range .cht-price-slider { margin: 4px 14px 12px; }
.cht-pill-dropdown-range .cht-pill-radios label { padding: 8px 14px; }
.cht-pill-dropdown-range .cht-pill-foot { padding: 10px 14px; }
.cht-pill-dropdown-range .cht-pill-foot .btn { height: 38px; font-size: 14px; }
.cht-pill-dropdown-range .cht-price-inputs { padding: 16px 16px 8px; flex-shrink: 0; }
.cht-pill-dropdown-range .cht-price-slider { margin: 4px 16px 18px; flex-shrink: 0; }
.cht-pill-dropdown-range .cht-pill-radios {
  border-top: 1px solid var(--border);
  padding: 8px 0; margin: 0;
  list-style: none;
  overflow-y: auto; flex: 1; min-height: 0;
}
.cht-pill-dropdown-range .cht-pill-radios li { padding: 0; }
.cht-pill-dropdown-range .cht-pill-radios label {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  transition: background-color .12s;
}
.cht-pill-dropdown-range .cht-pill-radios label:hover { background: var(--surface-2); }
.cht-pill-dropdown-range .cht-pill-radios input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-strong);
  margin: 0; flex-shrink: 0;
  position: relative; cursor: pointer;
  transition: border-color .15s;
}
.cht-pill-dropdown-range .cht-pill-radios input[type="radio"]:checked {
  border-color: var(--red);
}
.cht-pill-dropdown-range .cht-pill-radios input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--red);
}
.cht-pill-dropdown-range .cht-pill-radios label:has(input:checked) { color: var(--red); font-weight: 600; }
.cht-pill-dropdown-range .cht-pill-foot { margin: 0; padding: 14px 16px; flex-shrink: 0; border-top: 1px solid var(--border); }

.cht-pill-mode-option {
  display: block; padding: 10px 14px; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px;
}
.cht-pill-mode-option:hover { background: var(--surface-2); }
.cht-pill-mode-option.on { background: var(--ink); color: var(--bg); }

.cht-pill-section { margin-bottom: 14px; }
.cht-pill-section:last-child { margin-bottom: 0; }
.cht-pill-section-label {
  display: block; font-size: 13px; color: var(--ink);
  font-weight: 600; margin-bottom: 10px;
}
.cht-pill-radios { display: flex; flex-direction: column; gap: 2px; font-size: 14px; list-style: none; margin: 0; padding: 4px 0; }
.cht-pill-radios li { padding: 0; }
.cht-pill-radios label {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background-color .12s;
}
.cht-pill-radios label:hover { background: var(--surface-2); }
/* Custom radio — red outline + red filled dot (override iOS native blue) */
.cht-pill-radios input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  margin: 0; flex-shrink: 0;
  position: relative; cursor: pointer;
  transition: border-color .15s;
  background: transparent;
}
.cht-pill-radios input[type="radio"]:checked { border-color: var(--red); }
.cht-pill-radios input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--red);
}
.cht-pill-radios label:has(input:checked) { color: var(--red); font-weight: 600; }

.cht-pill-radios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.cht-pill-row { margin-bottom: 8px; }
.cht-pill-row:last-child { margin-bottom: 0; }
.cht-pill-row label {
  display: block; font-size: 12px; color: var(--ink-mute);
  font-weight: 600; margin-bottom: 4px;
}

/* Search input (giữa) */
.cht-filter-search {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 4px 0 14px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s;
}
.cht-filter-search-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 16px;
  background: var(--red); color: #fff;
  border: 1px solid var(--red); border-radius: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
  transition: background-color .15s, box-shadow .15s;
}
.cht-filter-search-btn:hover {
  background: var(--red-deep, #b8323a);
  border-color: var(--red-deep, #b8323a);
  box-shadow: 0 2px 8px rgba(214,58,64,.25);
}
.cht-filter-search:focus-within { border-color: var(--ink); }
.cht-filter-search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font: inherit; font-size: 14.5px; outline: none;
}

/* Filters (advanced) button */
.cht-filter-advanced-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: all 0.15s;
}
.cht-filter-advanced-btn:hover { border-color: var(--ink); }

.cht-filter-save-search-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.cht-filter-save-search-btn:hover { color: var(--red); border-color: var(--red); }
.cht-filter-save-search-btn:disabled { opacity: 0.6; cursor: default; }
.cht-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* (Phase 9.33 — moved to single block below — keeping for backward compat reference) */
.cht-filter-range { display: flex; gap: 8px; align-items: center; }
.cht-filter-range input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 6px; font: inherit; font-size: 14px; }
.cht-filter-range span { color: var(--ink-mute); }
.cht-filter-row-submit-hidden { display: none; }

/* Toolbar row: count + sort + map toggle */
.cht-archive-toolbar-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.cht-archive-count { font-size: 14px; color: var(--ink-mute); }
.cht-archive-count strong { color: var(--ink); }
.cht-archive-tools { display: flex; align-items: center; gap: 12px; }
.cht-sort-wrap { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-mute); }
.cht-sort-select {
  height: 36px; padding: 0 12px; border: 1px solid var(--border-strong);
  border-radius: 6px; font: inherit; font-size: 13.5px;
  background: var(--surface);
}
.cht-view-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--ink);
  cursor: pointer; transition: all 0.15s;
}
.cht-view-toggle:hover { border-color: var(--ink); background: var(--surface-2); }

/* Show-map switch — toggle bật/tắt bản đồ (kiểu 99.co "Show map") */
.cht-map-switch {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 6px; cursor: pointer; user-select: none;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.cht-map-switch:hover { border-color: var(--ink); }
.cht-map-switch > svg { color: var(--ink-mute); flex-shrink: 0; }
.cht-map-switch__switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.cht-map-switch__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cht-map-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background 0.18s; }
.cht-map-switch__thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.22); transition: transform 0.18s; }
.cht-map-switch__input:checked ~ .cht-map-switch__track { background: var(--red); }
.cht-map-switch__input:checked ~ .cht-map-switch__track .cht-map-switch__thumb { transform: translateX(16px); }

/* Phase 14L — Toggle "Hiển thị bản đồ" overlay trên map (kiểu 99.co Show map) */
.cht-map-switch--overlay {
  position: absolute; top: 14px; right: 14px; z-index: 601;
  background: #fff;
  box-shadow: 0 2px 14px -2px rgba(15,23,34,0.30);
}
/* Map mode: ẩn toggle ở toolbar — toggle giờ nằm trên map */
.cht-archive--map .cht-map-switch--toolbar { display: none; }

/* Phase 11J.4 — Sort pill trong toolbar (cạnh Bản đồ) — height 36 match cht-view-toggle */
.cht-pill-sort--toolbar .cht-pill-toggle {
  height: 36px;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 6px;
}
/* Dropdown sort rộng hơn để nhãn dài ("Diện tích lớn → bé") không xuống dòng */
.cht-pill-sort--toolbar .cht-pill-dropdown {
  min-width: 230px;
  right: 0; left: auto;           /* canh phải để không tràn khỏi cột tin (map mode) */
}
.cht-pill-sort--toolbar .cht-pill-radios label { white-space: nowrap; }

/* Content layout: grid only OR grid+map */
.cht-archive-content[data-cht-view="grid"] .cht-archive-listings {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--density-card-gap);
}
.cht-archive-content[data-cht-view="map"] {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;  /* Phase 14L — 50/50 split */
  align-items: start;
}
/* Panel tin trái — cuộn TỰ NHIÊN theo trang (KHÔNG cuộn nội bộ) → grid cao bằng list →
   map sticky có chỗ bám → map ĐỨNG YÊN khi cuộn (Zillow/99.co). Sticky cũ làm map = grid height → fail. */
.cht-archive-content[data-cht-view="map"] .cht-archive-main {
  align-self: start;
  min-width: 0;
}
.cht-archive-content[data-cht-view="map"] .cht-archive-listings {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.cht-archive-content[data-cht-view="map"] .cht-archive-main::-webkit-scrollbar { width: 8px; }
.cht-archive-content[data-cht-view="map"] .cht-archive-main::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.cht-archive-content[data-cht-view="map"] .cht-archive-main::-webkit-scrollbar-track { background: transparent; }
.cht-archive-content[data-cht-view="map"] .cht-archive-mapwrap {
  position: sticky; top: 116px;
  height: calc(100vh - 132px);
  border-radius: 12px;
  overflow: hidden;
  background: #eaf2f8;
}
.cht-archive-content[data-cht-view="map"] .cht-archive-map {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  z-index: 1;
  border: 0;
}
.cht-archive-map { width: 100%; }

/* ============================================================
   Phase 14L — Map overlay UI (toolbar phải + search bar bottom)
   Style match Zillow / Google Maps / batdongsan.com.vn
   ============================================================ */
.cht-archive-mapwrap { position: relative; }
.cht-map-toolbar {
  position: absolute;
  top: 62px; right: 14px; /* dưới toggle "Hiển thị bản đồ" overlay (top:14 + 36 + gap) */
  z-index: 600;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(15,23,34,0.10), 0 0 0 1px rgba(15,23,34,0.06);
}
.cht-map-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 0; border-radius: 8px;
  cursor: pointer; color: #0f1722;
  transition: background-color .15s;
}
.cht-map-tool:hover { background: #f3f4f6; }
.cht-map-tool:active { background: #e5e7eb; }

.cht-map-searchbar {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 600;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 6px 0 14px;
  background: #0f1722;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(15,23,34,0.25);
}
.cht-map-searchbar__icon {
  display: inline-flex; color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}
.cht-map-searchbar input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: 0; outline: none;
  color: #fff;
  font: inherit; font-size: 14px;
}
.cht-map-searchbar input::placeholder { color: rgba(255,255,255,0.55); }
.cht-map-searchbar__send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: #fff; color: #0f1722;
  border: 0; border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s;
}
.cht-map-searchbar__send:hover { transform: translateX(2px); }

/* Phase 14X.10 — Leaflet z-index leak fix (GLOBAL): mỗi map tạo stacking context riêng
   → pane/control Leaflet (z 400–1000) KHÔNG đè header sticky (z 50) ở trang chi tiết / archive. */
.leaflet-container { isolation: isolate; z-index: 0 !important; }

/* Leaflet attribution "Leaflet | © OpenStreetMap" — làm mờ cho đỡ nổi (rê chuột rõ lại) */
.leaflet-control-attribution {
  opacity: 0.4;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.55) !important;
  transition: opacity .15s;
}
.leaflet-control-attribution:hover { opacity: 0.95; }

/* Custom price label marker (Leaflet divIcon) — Zillow/batdongsan style */
.cht-leaflet-price-pin {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  background: #fff;
  color: #0f1722;
  font: 600 12.5px/1 var(--font-sans, system-ui);
  border: 1px solid rgba(15,23,34,0.10);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15,23,34,0.18);
  white-space: nowrap;
  cursor: pointer;
  transition: all .12s ease;
}
.cht-leaflet-price-pin:hover,
.cht-leaflet-price-pin.is-active {
  background: var(--red, #FD292E);
  color: #fff;
  border-color: var(--red, #FD292E);
  transform: scale(1.08);
  z-index: 700;
}

/* Filter modal (advanced) */
.cht-filter-modal {
  /* Phase 11K.5 — follow visualViewport offsetTop (iOS Safari scroll layout up khi keyboard mở).
     top = JS-set var, height = visible area. Modal luôn cover visible area chính xác. */
  position: fixed;
  top: var(--vh-offset-top, 0); left: 0; right: 0;
  height: var(--vh-visible, 100dvh);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cht-filter-modal[hidden] { display: none !important; }
.cht-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,34,0.5);
  backdrop-filter: blur(2px);
}
.cht-modal-content {
  position: relative;
  background: var(--surface); border-radius: var(--radius-lg);
  max-width: 600px; width: 100%;
  /* Phase 11K.2 — visible viewport cap */
  max-height: calc(var(--vh-visible, 100dvh) - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.3);
  overflow: hidden;
}
.cht-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.cht-modal-head h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.cht-modal-head button { background: transparent; border: 0; padding: 6px; cursor: pointer; color: var(--ink-mute); }
.cht-modal-head button:hover { color: var(--ink); }
.cht-modal-body { padding: 24px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.cht-modal-content-lg { max-width: 760px; max-height: 90vh; }
.cht-modal-form {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.cht-modal-section {
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.cht-modal-section:last-of-type { border-bottom: 0; }
.cht-modal-section h4 {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  margin: 0 0 10px; letter-spacing: 0.02em; color: var(--ink);
  text-transform: uppercase;
}
.cht-modal-section h4 small {
  font-weight: 400; color: var(--ink-mute); text-transform: none;
  letter-spacing: 0; margin-left: 4px;
}
.cht-modal-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cht-modal-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cht-modal-grid-2 .cht-form-row { margin-bottom: 0; }
.cht-modal-hint {
  font-size: 12.5px; color: var(--ink-mute); margin: 10px 0 0;
}
.cht-modal-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 6px;
  background: var(--surface-2); border-radius: var(--radius);
  font-size: 14px; cursor: pointer;
}
.cht-modal-toggle:has(input:checked) {
  background: var(--red-soft); color: var(--red-deep); font-weight: 600;
}
.cht-modal-toggle input { accent-color: var(--red); }
.cht-modal-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  /* Phase 11K — safe area iOS home bar (bottom inset) */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.cht-modal-reset {
  color: var(--ink-mute); text-decoration: underline; font-size: 14px;
}
.cht-modal-reset:hover { color: var(--red); }

@media (max-width: 600px) {
  .cht-modal-content-lg { max-width: 100%; }
  .cht-modal-grid-2 { grid-template-columns: 1fr; }
}
.cht-pagination { margin-top: 32px; display: flex; justify-content: center; }
.cht-pagination .page-numbers {
  display: flex; gap: 4px; list-style: none; padding: 0; margin: 0;
}
.cht-pagination .page-numbers li a,
.cht-pagination .page-numbers li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 14px; color: var(--ink); text-decoration: none;
}
.cht-pagination .page-numbers li .current {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.cht-pagination .page-numbers li a:hover {
  background: var(--surface-2);
}

/* ── Filter sidebar ─── */
.cht-filter-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
}
.cht-filter-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.cht-filter-group { margin-bottom: 20px; }
.cht-filter-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.cht-filter-form select,
.cht-filter-form input[type="number"] {
  width: 100%; height: 38px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  font: inherit; font-size: 14px; background: var(--surface);
}
.cht-filter-form select:focus,
.cht-filter-form input:focus {
  outline: 2px solid var(--red); outline-offset: 1px;
}
.cht-filter-radios { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.cht-filter-radios label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cht-filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.cht-chip-input { cursor: pointer; flex: 0 0 auto; }
.cht-chip-input input { display: none; }
.cht-chip-input span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--surface);
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.cht-chip-input:hover span { border-color: var(--ink-soft); }
.cht-chip-input input:checked + span {
  background: var(--red); color: #fff; border-color: var(--red);
  font-weight: 600;
}
.cht-filter-range { display: flex; gap: 8px; align-items: center; }
.cht-filter-range input { flex: 1; min-width: 0; }
.cht-filter-range span { color: var(--ink-mute); }
.cht-filter-submit { width: 100%; margin-top: 8px; margin-bottom: 8px; }
.cht-filter-reset { width: 100%; text-align: center; font-size: 13px; }

@media (max-width: 1080px) {
  /* Tablet + Mobile — 2-row pattern (Phase 11J.4):
     Row 1: [Search wide] [Bộ lọc]
     Row 2: [Bán/Thuê] [Mức giá] [Phòng ngủ] [Diện tích] equal flex */
  .cht-filter-row-form {
    flex-direction: column;
    gap: 10px;
  }
  .cht-filter-row-top {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  .cht-filter-row-top .cht-filter-search       { flex: 1 1 auto; min-width: 0; order: 0; }
  .cht-filter-row-top .cht-filter-advanced-btn { flex: 0 0 auto; order: 0; }
  .cht-filter-pills-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  .cht-filter-pills-wrap > .cht-filter-pill { flex: 1 1 0; min-width: 0; order: 0; }
  .cht-filter-pills-wrap .cht-pill-toggle   { width: 100%; justify-content: space-between; }
  .cht-filter-pills-wrap .cht-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}
@media (max-width: 900px) {
  .cht-archive-content[data-cht-view="grid"] .cht-archive-listings { grid-template-columns: repeat(2, 1fr); }
  .cht-archive-content[data-cht-view="map"] { grid-template-columns: 1fr; }
  .cht-archive-content[data-cht-view="map"] .cht-archive-mapwrap { position: relative; top: 0; height: 60vh; }
  .cht-archive-content[data-cht-view="map"] .cht-archive-map { position: relative; top: 0; height: 60vh; }
  .cht-archive-content[data-cht-view="map"] .cht-archive-main { max-height: none; overflow: visible; position: static; padding-right: 0; }
  .cht-archive-content[data-cht-view="map"] .cht-archive-listings { grid-template-columns: 1fr; }
}

/* Phase 15.10 — Floating view toggle (Danh sách/Bản đồ): ẩn desktop, hiện mobile */
.cht-mobile-viewtoggle { display: none; }
@keyframes chtMapCardUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Phase 15.11 — Infinite scroll archive (loader + end message), hiện cả desktop + mobile */
.cht-infinite { padding: 6px 0 4px; }
.cht-infinite-sentinel { height: 1px; }
.cht-infinite-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 0; color: #6b7280; font-size: 14px; font-weight: 500; }
.cht-infinite-loader[hidden] { display: none !important; } /* display:flex đè [hidden] UA → phải ép none (feedback_modal_hidden_override) */
.cht-inf-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e5e7eb; border-top-color: var(--red); animation: chtInfSpin .7s linear infinite; flex: 0 0 auto; }
@keyframes chtInfSpin { to { transform: rotate(360deg); } }
.cht-infinite-end { text-align: center; padding: 18px 0 8px; color: #9ca3af; font-size: 13px; }

@media (max-width: 640px) {
  /* #4 — Toolbar: sort pill căn PHẢI. Đã có nút nổi Danh sách/Bản đồ → ẩn map switch toolbar (thừa) */
  .cht-archive-toolbar-row { flex-wrap: wrap; row-gap: 10px; }
  .cht-archive-tools { margin-left: auto; }
  .cht-map-switch--toolbar { display: none !important; }

  /* #3 — Nút nổi Danh sách / Bản đồ (kiểu batdongsan) */
  .cht-mobile-viewtoggle {
    position: fixed; z-index: 860; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: inline-flex; gap: 3px; padding: 4px;
    background: rgba(17,17,17,0.92); border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  }
  .cht-mvt-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: transparent; color: #fff; cursor: pointer;
    font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 999px; white-space: nowrap;
  }
  .cht-mvt-btn.is-active { background: var(--red); }
  .cht-mvt-btn svg { width: 16px; height: 16px; }

  /* #3 — MAP MODE mobile (Zillow): map full màn hình, BẤM PIN mới hiện 1 thẻ tin ở đáy */
  body.cht-map-open { overflow: hidden; }
  .cht-archive-content[data-cht-view="map"] { display: block; gap: 0; }
  .cht-archive-content[data-cht-view="map"] .cht-archive-head,
  .cht-archive-content[data-cht-view="map"] .cht-archive-toolbar-row,
  .cht-archive-content[data-cht-view="map"] .cht-pagination,
  .cht-archive-content[data-cht-view="map"] .cht-infinite,
  .cht-archive-content[data-cht-view="map"] .cht-map-switch--overlay { display: none !important; }
  .cht-archive-content[data-cht-view="map"] .cht-archive-main {
    position: static; max-height: none; overflow: visible; padding: 0;
  }
  .cht-archive-content[data-cht-view="map"] .cht-archive-mapwrap {
    position: fixed; left: 0; right: 0; top: 56px; bottom: 0;
    height: auto; width: 100%; border-radius: 0; z-index: 800;
  }
  .cht-archive-content[data-cht-view="map"] .cht-archive-map { position: absolute; inset: 0; height: 100%; }

  /* Khung thẻ phủ SÁT ĐÁY (Zillow: thẻ che luôn nút toggle cho gọn) — KHÔNG nhận tap vùng trống */
  .cht-archive-content[data-cht-view="map"] .cht-archive-listings {
    position: fixed; left: 0; right: 0; bottom: 12px; z-index: 870;
    display: block; grid-template-columns: none; margin: 0; padding: 0 12px;
    overflow: visible; pointer-events: none;
  }
  /* Có thẻ đang hiện → ẩn nút Danh sách/Bản đồ (thẻ che chỗ đó) */
  .cht-archive-content[data-cht-view="map"].cht-card-open .cht-mobile-viewtoggle { display: none; }
  /* Mặc định ẩn hết thẻ; CHỈ thẻ của pin vừa bấm (.is-active) mới hiện (1 thẻ duy nhất) */
  .cht-archive-content[data-cht-view="map"] .cht-archive-listings > .card { display: none; }
  .cht-archive-content[data-cht-view="map"] .cht-archive-listings > .card.is-active {
    display: block; margin: 0 auto; max-width: 460px; pointer-events: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.32);
    animation: chtMapCardUp .22s cubic-bezier(.2,.7,.3,1);
  }
}
@media (max-width: 640px) {
  .cht-archive-content[data-cht-view="grid"] .cht-archive-listings { grid-template-columns: 1fr; }

  /* MOBILE — Row 2 pills KHÔNG scroll, 4 button equal flex fit ngang */
  .cht-filter-pills-wrap {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .cht-filter-pills-wrap > .cht-filter-pill { flex: 1 1 0; min-width: 0; }

  /* Promote Lọc — brand red soft khi mobile */
  .cht-filter-row-top .cht-filter-advanced-btn {
    background: var(--red-soft);
    color: var(--red-deep);
    border-color: var(--red);
    font-weight: 700;
  }
  .cht-filter-row-top .cht-filter-advanced-btn .cht-filter-badge {
    background: var(--red);
    color: #fff;
  }

  /* Compact pill sizing on mobile — ép 4 pills fit ngang */
  .cht-pill-toggle,
  .cht-filter-advanced-btn {
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
    gap: 4px;
  }
  /* Sort pill ẩn icon (sort) trên mobile để tiết kiệm space — chỉ giữ label */
  .cht-pill-sort .cht-pill-toggle > svg:first-child { display: none; }

  /* Search button mobile — KHÔNG override, giữ "Q Tìm" giống desktop */
  /* (No mobile-specific rule. Inherit desktop: height 34, padding 0 16, gap 6, radius 8, "Tìm" text visible) */

  /* FIX (feedback_backdrop_filter_traps_fixed): backdrop-filter trên .is-stuck biến wrap thành
     containing-block cho position:fixed → bottom-sheet pill neo theo wrap (ở top) thay viewport → vỡ.
     Bỏ blur trên mobile (bg 98% trắng đủ che) để dropdown fixed neo đúng viewport. Desktop giữ glass. */
  .cht-filter-row-wrap.is-stuck {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(255,255,255,.98);
  }

  /* Pill dropdown → bottom sheet on mobile (fixed bottom, full width) */
  .cht-filter-pill.is-open .cht-pill-dropdown,
  .cht-filter-pill.is-open .cht-pill-dropdown-range,
  .cht-filter-pill.is-open .cht-pill-dropdown-wide {
    position: fixed;
    /* Phase 11K.5 — anchor đáy = offsetTop + visible height (sit above keyboard) */
    top: auto;
    /* Phase 16 fix "hở đáy": dùng 100dvh (KHÔNG 100vh). Trên iPhone 100vh = chiều cao khi ẩn toolbar (lớn),
       còn --vh-visible/100dvh = chiều cao thấy được khi hiện toolbar (nhỏ) → 100vh - 100dvh = khe hở.
       100dvh - 100dvh = 0 → sát đáy (giống pill trang dự án). Có bàn phím: --vh-visible=px nhỏ → vẫn đẩy lên trên bàn phím. */
    bottom: calc(100dvh - var(--vh-offset-top, 0px) - var(--vh-visible, 100dvh));
    left: 0; right: 0;
    width: 100vw;
    max-width: none;
    min-width: 0;
    max-height: min(75vh, calc(var(--vh-visible, 100dvh) - 12px));
    height: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    box-shadow: 0 -8px 32px -8px rgba(15,23,34,0.25);
    z-index: 1100;
  }
  /* Backdrop dim behind bottom sheet */
  .cht-filter-pill.is-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(15,23,34,0.4);
    z-index: 1099;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  /* Mở bộ lọc (pill bottom-sheet) → ẩn nút nổi Danh sách/Bản đồ để sheet CHE LUÔN (kiểu batdongsan) */
  body:has(.cht-filter-pill.is-open) .cht-mobile-viewtoggle { display: none; }
}

/* ── Single Listing (Phase 6.1) ─── */
.cht-single-listing { padding-top: 24px; padding-bottom: 48px; }
.cht-single-grid {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 32px; margin-top: 24px;
}
.cht-single-main { min-width: 0; }
.cht-single-aside { align-self: start; position: sticky; top: 88px; }

.cht-listing-gallery { margin-bottom: 24px; }
.cht-gallery-hero {
  position: relative; aspect-ratio: 16/10;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2);
}
.cht-gallery-hero img { width: 100%; height: 100%; object-fit: cover; }
.cht-gallery-overlay-top {
  position: absolute; top: 16px; left: 16px;
  display: flex; gap: 8px;
}
.cht-badge-verified {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 12px; font-weight: 600;
}
.cht-gallery-overlay-bottom {
  position: absolute; bottom: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 12px;
}
.cht-gallery-thumbs {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin-top: 8px;
}
.cht-thumb {
  aspect-ratio: 4/3; border: 2px solid transparent;
  border-radius: 6px; overflow: hidden; padding: 0;
  background: transparent; cursor: pointer;
}
.cht-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cht-thumb.on { border-color: var(--red); }
.cht-thumb:hover { opacity: 0.85; }

.cht-listing-head { margin-bottom: 24px; }
.cht-listing-title {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  margin: 0 0 8px;
}
.cht-listing-addr {
  color: var(--ink-mute); font-size: 14px;
  margin: 0 0 16px; display: inline-flex; align-items: center; gap: 6px;
}
.cht-listing-price-row { display: flex; align-items: baseline; gap: 16px; }
.cht-listing-price {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  color: var(--red); letter-spacing: -0.025em;
}
.cht-listing-pricem2 { color: var(--ink-mute); font-size: 15px; }

.cht-spec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; padding: 20px;
  background: var(--surface-2); border-radius: var(--radius-lg);
  margin-bottom: 32px;
}
.cht-spec { display: flex; flex-direction: column; gap: 4px; }
.cht-spec-icon { display: block; margin-bottom: 4px; }
.cht-spec em {
  font-style: normal; font-size: 12px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cht-spec strong {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -0.015em;
}

.cht-listing-section { margin-bottom: 32px; }
.cht-section-h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: -0.015em; margin: 0 0 16px;
}
.cht-listing-content { font-size: 15px; line-height: 1.75; color: var(--ink); }
.cht-listing-content p { margin: 0 0 12px; }

.cht-tags-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px;
}
.cht-tags-list li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px;
}

.cht-metro-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cht-metro-card strong { display: block; font-size: 15px; }
.cht-metro-card em { color: var(--ink-mute); font-size: 13px; font-style: normal; }

.cht-map {
  width: 100%; height: 360px;
  border-radius: var(--radius-lg); overflow: hidden;
  z-index: 1;
}

.cht-project-link-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.cht-project-link-card:hover { border-color: var(--red); background: var(--red-soft); }
.cht-project-link-card em {
  font-style: normal; color: var(--ink-mute); font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Agent card sticky */
.cht-agent-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.08);
}
.cht-agent-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cht-agent-head strong { display: block; font-size: 15px; }
.cht-agent-head em { color: var(--ink-mute); font-size: 13px; font-style: normal; }
.cht-cta-call { width: 100%; }
.cht-cta-chat, .cht-cta-save { width: 100%; }

.cht-single-share {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 20px;
  text-align: center;
}
.cht-single-share p { margin: 0 0 12px; font-size: 13px; color: var(--ink-mute); }
.cht-share-buttons { display: flex; gap: 8px; justify-content: center; }
.cht-share-buttons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); font-weight: 700; color: var(--ink);
  text-decoration: none; transition: background 0.15s;
}
.cht-share-buttons a:hover { background: var(--ink); color: var(--bg); }

.cht-related-section { margin-top: 48px; }

@media (max-width: 980px) {
  .cht-single-grid { grid-template-columns: 1fr; }
  .cht-single-aside { position: static; }
  .cht-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .cht-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .cht-tags-list { grid-template-columns: 1fr; }
}

/* ── Single Du-An (Phase 6.2) ─── */
.cht-single-project { padding-top: 24px; padding-bottom: 48px; }
.cht-project-hero {
  display: grid; grid-template-columns: 2.4fr 1fr;
  gap: 12px; margin-top: 16px; margin-bottom: 24px;
}
.cht-project-hero-big {
  position: relative; aspect-ratio: 16/10;
  border-radius: var(--radius-lg); overflow: hidden;
}
.cht-project-hero-big img { width: 100%; height: 100%; object-fit: cover; }
.cht-project-hero-overlay {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.cht-project-status {
  display: inline-flex; padding: 6px 14px; border-radius: 999px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 12.5px; font-weight: 600;
  align-self: flex-start;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cht-project-developer {
  display: inline-block; padding: 4px 12px;
  background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.9);
  font-size: 12px; border-radius: 6px;
  align-self: flex-start;
}
.cht-project-hero-thumbs {
  display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 12px;
}
.cht-project-thumb {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
}
.cht-project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cht-project-thumb-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}

.cht-project-head { margin-bottom: 24px; }
.cht-project-title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 8px;
}
.cht-project-addr { color: var(--ink-mute); font-size: 15px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }

.cht-project-keyinfo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  padding: 24px; background: var(--surface-2);
  border-radius: var(--radius-lg); margin-bottom: 32px;
  position: relative;
}
.cht-keyinfo {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 24px;
  border-left: 1px solid var(--border);
}
.cht-keyinfo:first-child { border-left: 0; padding-left: 0; }
.cht-keyinfo em { font-style: normal; font-size: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.cht-keyinfo strong {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: -0.015em;
}
.cht-keyinfo small { color: var(--ink-mute); font-size: 12px; }

.cht-amenities-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px;
}
.cht-amenities-grid li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px;
}

.cht-floor-plans-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.cht-floor-plan-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
}
.cht-floor-plan-img { aspect-ratio: 1/1; background: var(--surface-2); }
.cht-floor-plan-img img { width: 100%; height: 100%; object-fit: contain; }
.cht-floor-plan-meta { padding: 12px 16px; }
.cht-floor-plan-meta strong { display: block; font-size: 14.5px; }
.cht-floor-plan-meta em { font-style: normal; color: var(--ink-mute); font-size: 13px; }

@media (max-width: 900px) {
  .cht-project-hero { grid-template-columns: 1fr; }
  .cht-project-hero-thumbs { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
  .cht-project-keyinfo { gap: 16px; padding: 16px; }
  .cht-keyinfo { padding: 0 12px; border-left-width: 0; }
  .cht-amenities-grid { grid-template-columns: repeat(2, 1fr); }
  .cht-floor-plans-grid { grid-template-columns: 1fr; }
}

/* ── Đăng tin form (Phase 11L — stepper circle + connector line minimalist) ─── */
/* Phase 18 — Progress = thanh % tiến trình (bỏ số bước + tên bước cho gọn, sạch) */
.cht-form-progress {
  display: flex; align-items: center; gap: 14px;
  list-style: none; padding: 0; margin: 0 0 28px;
}
.cht-form-progress__track {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--border, #e9ebee); overflow: hidden;
}
.cht-form-progress__fill {
  height: 100%; border-radius: 999px;
  background: var(--red, #FD292E);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.cht-form-progress__pct {
  flex-shrink: 0; min-width: 42px; text-align: right;
  font-size: 14px; font-weight: 700; color: var(--red, #FD292E);
  font-variant-numeric: tabular-nums;
}

/* Phase 12 — Section đăng tin: padding compact thay 80px global */
.section.cht-dang-tin { padding: 28px 0 48px; }
@media (max-width: 768px) { .section.cht-dang-tin { padding: 16px 0 32px; } }

.cht-dang-tin-form { background: transparent; border: 0; padding: 0; } /* Phase 18 — bỏ panel ngoài → mỗi step card/widget chỉ còn 1 viền (chống "border lồng border") */
.cht-form-step { border: 0; padding: 0; margin: 0; }
.cht-form-step:not(.on) { display: none; }
.cht-form-step-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 0 0 24px; padding: 0; color: var(--ink);
}
.cht-form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.cht-form-row label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cht-form-row label em { color: var(--red); font-style: normal; }
.cht-form-row input[type="text"],
.cht-form-row input[type="email"],
.cht-form-row input[type="url"],
.cht-form-row input[type="tel"],
.cht-form-row input[type="number"],
.cht-form-row input[type="password"],
.cht-form-row input[type="search"],
.cht-form-row input[type="date"],
.cht-form-row select,
.cht-form-row textarea {
  width: 100%;
  height: 42px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  font: inherit; font-size: 14.5px; background: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cht-form-row textarea { height: auto; padding: 12px; resize: vertical; }
.cht-form-row input:focus, .cht-form-row select:focus, .cht-form-row textarea:focus {
  outline: 0; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, 0.12);
}
.cht-form-row input::placeholder,
.cht-form-row textarea::placeholder { color: var(--ink-soft); }
/* Disable Chrome autofill blue highlight — keep form background đồng bộ trắng */
.cht-form-row input:-webkit-autofill,
.cht-form-row input:-webkit-autofill:hover,
.cht-form-row input:-webkit-autofill:focus,
.cht-form-row input:-webkit-autofill:active,
.cht-form-row textarea:-webkit-autofill,
.cht-form-row textarea:-webkit-autofill:hover,
.cht-form-row textarea:-webkit-autofill:focus,
.cht-form-row textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: var(--ink, #0f1722) !important;
  caret-color: var(--ink, #0f1722);
  transition: background-color 5000s ease-in-out 0s;
}
.cht-form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; align-items: start; }
.cht-form-grid-2 .cht-form-row { margin-bottom: 0; }

/* ============================================================
   Phase 14J — Input affix (prefix icon + suffix unit) + Price chips
   Batdongsan style cho Diện tích / Mức giá step 3
   ============================================================ */
.cht-input-affix {
  position: relative;
  display: flex;
  align-items: center;
}
.cht-input-affix > input {
  width: 100%;
  padding-right: 88px !important;  /* đủ cho "VND/tháng" + "m²" + buffer */
}
.cht-input-affix--has-prefix > input {
  padding-left: 44px !important;
}
.cht-input-affix__prefix,
.cht-input-affix__suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  color: var(--ink-mute, #6b7280);
  font-size: 13.5px;
  line-height: 1;
}
.cht-input-affix__prefix { left: 14px; }
.cht-input-affix__suffix { right: 14px; }
.cht-input-affix__suffix--strong {
  font-weight: 600;
  color: var(--ink, #0f1722);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.cht-input-affix:focus-within .cht-input-affix__prefix { color: var(--red, #FD292E); }
/* Hide number input native spinner cho ô có affix */
.cht-input-affix input[type="number"]::-webkit-outer-spin-button,
.cht-input-affix input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cht-input-affix input[type="number"] { -moz-appearance: textfield; }

/* Phase 14J.3 — Wrapper row full-width chứa chips + summary (dưới grid-2 Diện tích/Giá) */
.cht-price-extras-row {
  margin-top: -6px;     /* kéo lên gần grid-2 (grid-2 đã margin-bottom 18px) */
  margin-bottom: 18px;
}
/* Price preset chips */
.cht-price-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}
.cht-price-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #0f1722);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.cht-price-chip:hover {
  border-color: var(--red, #FD292E);
  color: var(--red, #FD292E);
  background: var(--red-soft, #FFE9E9);
}
.cht-price-chip.is-active {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
  color: #fff;
  font-weight: 600;
}
.cht-price-summary {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--ink, #0f1722);
  font-weight: 500;
}
.cht-price-summary[hidden] { display: none; }
.cht-price-summary strong { font-weight: 700; }
.cht-price-summary .cht-price-summary__per { color: var(--ink-mute, #6b7280); font-weight: 400; }
/* Phase 11P — Grid 3-col cho step 3 (Thông số căn hộ) — 3 input/row */
/* ============================================================
   Phase 11S.2 — Step 4 Upload UI Redesign
   Premium card-based, micro-interactions, accent color
   ============================================================ */

.cht-upload-card {
  background: #fff;
  border: 1px solid var(--border-strong, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.cht-upload-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
  background: #fff;
  transition: background-color .15s ease;
}
.cht-upload-card__head--static { cursor: default; }
.cht-upload-card__head:not(.cht-upload-card__head--static):hover { background: #FAFBFC; }

.cht-upload-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f1722;
  font-family: var(--font-display, inherit);
  letter-spacing: -0.01em;
}
.cht-upload-card__required {
  color: var(--red, #FD292E);
  font-style: normal;
  font-size: 15px;
  margin-left: 3px;
}

.cht-upload-card__chevron {
  display: inline-flex; align-items: center;
  color: #9CA3AF;
  transition: transform .3s cubic-bezier(0.4,0,0.2,1), color .15s;
}
.cht-upload-card__head:hover .cht-upload-card__chevron { color: #0f1722; }
.cht-upload-card[open] .cht-upload-card__chevron { transform: rotate(90deg); }

.cht-upload-card__body {
  padding: 0 24px 22px;
  border-top: 1px solid #F1F3F5;
  display: none;
}
.cht-upload-card[open] .cht-upload-card__body {
  display: block;
  animation: chtUploadFadeIn .3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes chtUploadFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Checklist */
.cht-upload-checklist {
  list-style: none; padding: 0; margin: 18px 0 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.cht-upload-check {
  display: flex; align-items: flex-start; gap: 12px;
  flex-wrap: wrap;
}
.cht-upload-check--video { align-items: center; }

.cht-upload-check__dot {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid #D1D5DB;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  transition: all .25s cubic-bezier(0.4,0,0.2,1);
  margin-top: 1px;
}
.cht-upload-check--video .cht-upload-check__dot { margin-top: 0; }
.cht-upload-check__icon { color: #fff; opacity: 0; transition: opacity .15s ease; }
.cht-upload-check.is-met .cht-upload-check__dot {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
  transform: scale(1.05);
}
.cht-upload-check.is-met .cht-upload-check__icon { opacity: 1; }
.cht-upload-check.is-met .cht-upload-check__text {
  color: #6B7280;
  text-decoration: line-through;
  text-decoration-color: rgba(107,114,128,0.4);
}
.cht-upload-check__main {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-width: 0;
}
.cht-upload-check__text {
  font-size: 14px; color: #0f1722; line-height: 1.5;
}
.cht-upload-check__text strong { font-weight: 600; }
/* Phase 18 — video là GỢI Ý (không bắt buộc) → text dạng hint mờ, phân biệt với mục bắt buộc "3 ảnh" */
.cht-upload-check--video .cht-upload-check__text { font-size: 13px; color: var(--ink-mute, #6b7280); line-height: 1.45; }

.cht-upload-check__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #78350F;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  width: fit-content;
}
.cht-upload-check__badge strong { font-weight: 700; }

.cht-upload-add-video {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: #fff;
  color: #0f1722;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
  margin-left: auto;
}
.cht-upload-add-video:hover {
  border-color: #0f1722;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(15,23,34,0.08);
}
.cht-upload-add-video:active { transform: translateY(0); }

/* Drop zone */
.cht-upload-zone {
  position: relative;
  border: 2px dashed #E5E7EB;
  border-radius: 14px;
  padding: 24px 22px;
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(135deg, #FAFBFC 0%, #F8FAFB 100%);
  cursor: pointer;
  transition: all .25s cubic-bezier(0.4,0,0.2,1);
}
.cht-upload-zone:hover {
  border-color: var(--red, #FD292E);
  background: linear-gradient(135deg, #FFFAFA 0%, var(--red-soft, #FFE9E9) 100%);
}
.cht-upload-zone.is-dragover {
  border-color: var(--red, #FD292E);
  border-style: solid;
  background: var(--red-soft, #FFE9E9);
  transform: scale(1.005);
}
.cht-upload-zone.is-uploading { opacity: 0.6; pointer-events: none; }

.cht-upload-zone__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9CA3AF;
  box-shadow: 0 1px 3px rgba(15,23,34,0.06);
  transition: color .2s ease, transform .2s ease;
}
.cht-upload-zone:hover .cht-upload-zone__icon {
  color: var(--red, #FD292E);
  transform: translateY(-2px);
}
.cht-upload-zone__content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cht-upload-zone__title { font-size: 15px; font-weight: 600; color: #0f1722; }
.cht-upload-zone__sub { font-size: 13px; color: #6B7280; }
.cht-upload-zone__pick {
  align-self: flex-start;
  background: transparent; border: 0; padding: 0;
  font-size: 13.5px;
  color: var(--red, #FD292E);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  margin-top: 4px;
  transition: color .15s ease;
}
.cht-upload-zone__pick:hover { color: var(--red-deep, #D22226); }

/* Preview grid */
.cht-upload-preview {
  list-style: none; padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.cht-upload-preview[hidden] { display: none; }

.cht-upload-preview__item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  cursor: grab;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cht-upload-preview__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(15,23,34,0.14);
}
.cht-upload-preview__item img,
.cht-upload-preview__item video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cht-upload-preview__cover {
  position: absolute; top: 6px; left: 6px;
  display: inline-flex; align-items: center;
  padding: 3px 7px;
  background: var(--red, #FD292E);
  color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  text-transform: uppercase;
}
.cht-upload-preview__del {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  background: rgba(15,23,34,0.7);
  color: #fff;
  border: 0; border-radius: 50%;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: all .15s ease;
}
.cht-upload-preview__item:hover .cht-upload-preview__del { opacity: 1; }
.cht-upload-preview__del:hover {
  background: var(--red, #FD292E);
  transform: scale(1.1);
}
.cht-upload-preview__video-badge {
  position: absolute; bottom: 6px; left: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  background: rgba(15,23,34,0.78);
  color: #fff;
  font-size: 10px; font-weight: 600;
  border-radius: 4px;
}
/* Phase 16.4 — ảnh đang upload: mờ + spinner (preview ngay, không chờ server) */
.cht-upload-preview__item.is-uploading img,
.cht-upload-preview__item.is-uploading video { opacity: .45; }
.cht-upload-preview__spin {
  position: absolute; inset: 0; margin: auto;
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6);
  border-top-color: var(--red, #FD292E);
  animation: chtUpSpin .7s linear infinite;
}
@keyframes chtUpSpin { to { transform: rotate(360deg); } }

/* Tips list */
.cht-upload-tips {
  list-style: none; padding: 0;
  margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cht-upload-tips li {
  position: relative;
  padding: 12px 16px 12px 38px;
  background: #FAFBFC;
  border-radius: 10px;
  font-size: 13.5px;
  color: #0f1722;
  line-height: 1.55;
  border: 1px solid #F1F3F5;
}
.cht-upload-tips li::before {
  content: '';
  position: absolute;
  left: 16px; top: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red, #FD292E);
}
.cht-upload-tips li strong { color: #0f1722; font-weight: 600; }

/* Info banner */
.cht-upload-info {
  display: flex; gap: 11px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0F4FF 100%);
  border: 1px solid #DBEAFE;
  border-radius: 12px;
  font-size: 13px;
  color: #1E40AF;
  line-height: 1.55;
  margin: 16px 0 14px;
}
.cht-upload-info svg { flex-shrink: 0; color: #2563EB; margin-top: 1px; }
.cht-upload-info strong { font-weight: 700; color: #1E3A8A; }

/* URL input */
.cht-upload-link { position: relative; }
.cht-upload-link__icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
  display: inline-flex;
  transition: color .15s ease;
}
.cht-upload-link input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 44px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  font: inherit; font-size: 14px;
  color: #0f1722;
  transition: all .15s ease;
}
.cht-upload-link input::placeholder { color: #9CA3AF; }
.cht-upload-link input:hover { border-color: #D1D5DB; }
.cht-upload-link input:focus {
  outline: 0;
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214,58,64,0.12);
}
.cht-upload-link:focus-within .cht-upload-link__icon { color: var(--red, #FD292E); }

/* Mobile responsive */
@media (max-width: 720px) {
  .cht-upload-card__head { padding: 16px 18px; }
  .cht-upload-card__body { padding: 0 18px 18px; }
  .cht-upload-card__title { font-size: 15px; }

  .cht-upload-check { gap: 10px; }
  /* Phase 18 — video: dot + text CÙNG DÒNG (row + wrap); nút Thêm Video xuống dòng riêng full-width */
  .cht-upload-check--video { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .cht-upload-check--video .cht-upload-check__main { flex: 1 1 0; min-width: 0; }
  .cht-upload-add-video {
    flex: 1 0 100%;
    margin-left: 0;
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
  }

  .cht-upload-zone {
    flex-direction: column;
    text-align: center;
    padding: 28px 18px;
    gap: 12px;
  }
  .cht-upload-zone__content { align-items: center; }
  .cht-upload-zone__pick { align-self: center; }

  .cht-upload-info { font-size: 12.5px; padding: 12px 14px; }
  .cht-upload-tips li { padding: 11px 14px 11px 32px; font-size: 13px; }
  .cht-upload-tips li::before { left: 13px; top: 17px; }
}

/* Phase 11R — AI hỗ trợ block (step 5 mô tả tin đăng) */
.cht-ai-block {
  background: var(--red-soft, #FFE9E9);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.cht-ai-block__title {
  font-size: 18px; font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display, inherit);
}
.cht-ai-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  background: var(--red, #FD292E);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.cht-ai-block__sub {
  font-size: 13.5px;
  color: var(--ink-mute, #6b7280);
  margin: 0;
  line-height: 1.5;
}

.cht-form-row--ai .cht-form-row__head,
.cht-form-row--phone .cht-form-row__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cht-form-row--ai .cht-form-row__head label,
.cht-form-row--phone .cht-form-row__head label { margin: 0; }
.cht-form-row--phone input[readonly] {
  background: var(--bg-soft, #f9fafb);
  color: var(--ink, #0f1722);
  cursor: default;
}
.cht-form-row--phone input[readonly]:focus {
  outline: none;
  border-color: var(--border, #e5e7eb);
  box-shadow: none;
}
.cht-ai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--red-soft, #FFE9E9);
  color: var(--red-deep, #D22226);
  border: 1px solid var(--red, #FD292E);
  border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s;
}
.cht-ai-btn:hover { background: var(--red, #FD292E); color: #fff; }
.cht-ai-btn:disabled { opacity: 0.6; cursor: wait; }

.cht-form-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
}

.cht-ai-suggestions {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.cht-ai-suggestion {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--red-soft, #FFE9E9);
  border: 1px solid var(--red, #FD292E);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink, #0f1722);
}
.cht-ai-suggestion__rocket {
  flex-shrink: 0;
  color: var(--red, #FD292E);
  display: inline-flex; align-items: center;
}
.cht-ai-suggestion__text {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}
.cht-ai-suggestion__use {
  flex-shrink: 0;
  padding: 6px 14px;
  background: transparent;
  border: 0;
  color: var(--red, #FD292E);
  font: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color .12s;
}
.cht-ai-suggestion__use:hover {
  background: var(--red, #FD292E);
  color: #fff;
}

.cht-form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.cht-form-grid-3 .cht-form-row { margin-bottom: 0; min-width: 0; }
/* Phase 11Q fix — Grid items min-width:0 cho phép shrink. Nested combo/multi-select cũng cần. */
.cht-form-grid-3 .cht-form-row > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cht-form-grid-3 .cht-combo,
.cht-form-grid-3 .cht-multi-select { min-width: 0; max-width: 100%; width: 100%; }
@media (max-width: 900px) {
  .cht-form-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cht-form-grid-3 { grid-template-columns: 1fr; }
}

/* Phase 11M + 14K — Đồng bộ TẤT CẢ input/select/textarea/combo trong form đăng tin
   height 48px · border-radius 12px (match cht-combo-control) · padding 14px · border-strong */
.cht-dang-tin-form .cht-form-row input[type="text"],
.cht-dang-tin-form .cht-form-row input[type="email"],
.cht-dang-tin-form .cht-form-row input[type="url"],
.cht-dang-tin-form .cht-form-row input[type="tel"],
.cht-dang-tin-form .cht-form-row input[type="number"],
.cht-dang-tin-form .cht-form-row input[type="password"],
.cht-dang-tin-form .cht-form-row input[type="search"],
.cht-dang-tin-form .cht-form-row input[type="date"],
.cht-dang-tin-form .cht-form-row select {
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
}
.cht-dang-tin-form .cht-form-row textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
}
/* URL video link input (step 4 card 3) — đồng bộ về 48px/12px/border-strong giống các input khác */
.cht-dang-tin-form .cht-upload-link input {
  height: 48px;
  padding: 0 16px 0 44px;
  border-radius: 12px;
  border-color: var(--border-strong);
}
/* Phase 11Q — Combo input INSIDE dang-tin form: bypass 11M scope rule (specificity 0,4,1 > 0,3,1)
   Combo input phải transparent + 100% height của parent .cht-combo-control (48px) */
.cht-dang-tin-form .cht-form-row input.cht-combo-input,
.cht-dang-tin-form .cht-form-row input.cht-combo-input:focus {
  height: 100%;
  padding: 0 36px 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}
.cht-form-toggle { display: flex; gap: 12px; }
.cht-form-toggle label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: 6px; flex: 1; justify-content: center; }
.cht-form-toggle label:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cht-image-uploader {
  padding: 32px; border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg); text-align: center; background: var(--surface-2);
}
.cht-form-actions {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}
.cht-form-actions .btn-ghost ~ .btn-primary { margin-left: auto; }
.cht-form-result {
  margin-top: 24px; padding: 18px 20px; border-radius: var(--radius-lg);
  font-size: 14.5px;
}
.cht-form-result.success { background: rgba(14,122,82,0.08); color: #0E7A52; border: 1px solid rgba(14,122,82,0.2); }
.cht-form-result.error { background: var(--red-soft); color: var(--red-deep); border: 1px solid var(--red); }

/* ── Phase 11L — Step 1 intro card pattern (Loại giao dịch + Loại căn hộ) ─── */
.cht-form-step--intro { border: 0; padding: 0; margin: 0; }
.cht-form-step--intro .cht-form-step-title { display: none; }

.cht-intro-card {
  /* Phase 11L fix — bỏ border + bg + padding vì parent .cht-dang-tin-form đã có sẵn (KHÔNG nested 2 border) */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 20px;
}
.cht-intro-card__title {
  font-family: var(--font-display, inherit);
  font-size: 26px; font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink, #0f1722);
}
.cht-intro-card__sub {
  font-size: 14.5px;
  color: var(--ink-mute, #6b7280);
  margin: 0 0 28px;
  line-height: 1.5;
}

.cht-form-section { margin-bottom: 24px; }
.cht-form-section:last-child { margin-bottom: 0; }
.cht-form-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cht-form-section__eyebrow {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink, #0f1722);
}
.cht-form-section__required {
  color: var(--red, #FD292E);
  font-size: 14px;
  font-weight: 600;
}

.cht-card-grid {
  display: grid;
  gap: 12px;
}
.cht-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cht-card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.cht-option-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .12s;
}
/* Phase 11N — Override default [hidden] vì display:flex thắng (modal hidden override pattern) */
.cht-option-card[hidden] { display: none !important; }

/* Phase 11O — Override cho cht-form-grid-2 (display:grid) + cht-form-row (display:flex) */
.cht-form-grid-2[hidden],
.cht-form-row[hidden] { display: none !important; }

/* Phase 11P — Multi-select component (View với + Thêm View custom) */
.cht-multi-select {
  position: relative;
  width: 100%;
}
/* Trigger — match exact look của input/select trong dang-tin form (48px + 6px radius + red focus glow) */
.cht-dang-tin-form .cht-multi-trigger,
.cht-multi-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 48px;
  padding: 0 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 6px;
  font: inherit; font-size: 14.5px;
  color: var(--ink, #0f1722);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
.cht-multi-trigger:hover { border-color: var(--ink, #0f1722); }
.cht-multi-select.is-open .cht-multi-trigger {
  outline: 0;
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214,58,64,0.12);
}
.cht-multi-icon {
  color: var(--ink-mute, #6b7280);
  flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.cht-multi-label {
  flex: 1;
  color: var(--ink-mute, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
  font-size: 14.5px;
}
.cht-multi-select.has-value .cht-multi-label {
  color: var(--ink, #0f1722);
  font-weight: 500;
}
.cht-multi-chevron {
  color: var(--ink-mute, #6b7280);
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  transition: transform .2s;
}
.cht-multi-select.is-open .cht-multi-chevron { transform: rotate(180deg); }

/* Panel — bottom dropdown with shadow + border */
.cht-multi-panel {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(15,23,34,0.18);
  max-height: 320px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cht-multi-panel[hidden] { display: none !important; }

.cht-multi-list {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.cht-multi-row { margin: 0; padding: 0; }
.cht-multi-row label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color .12s;
  font-size: 14px;
  color: var(--ink, #0f1722);
}
.cht-multi-row label:hover { background: var(--surface-2, #f3f4f6); }
.cht-multi-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--red, #FD292E);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.cht-multi-row label:has(input:checked) {
  color: var(--red, #FD292E);
  font-weight: 600;
  background: var(--red-soft, #FFE9E9);
}

/* "+ Thêm View" footer */
.cht-multi-add {
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 8px 12px;
  background: var(--surface-2, #fafafa);
}
.cht-multi-add-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent; border: 0;
  color: var(--red, #FD292E);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color .12s;
}
.cht-multi-add-trigger:hover { background: var(--red-soft, #FFE9E9); }
.cht-multi-add-trigger[hidden] { display: none !important; }

.cht-multi-add-form {
  display: flex; gap: 6px; align-items: center;
  padding: 2px 0;
}
.cht-multi-add-form[hidden] { display: none !important; }
.cht-multi-add-form input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 6px;
  font: inherit; font-size: 13.5px;
  background: #fff;
}
.cht-multi-add-form input:focus {
  outline: 0;
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 2px rgba(214,58,64,0.12);
}
.cht-multi-add-form .btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  flex-shrink: 0;
}
.cht-option-card:hover {
  border-color: var(--ink-mute, #6b7280);
}
.cht-option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cht-option-card__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f3f4f6);
  border-radius: 8px;
  color: var(--ink, #0f1722);
  transition: background-color .15s, color .15s;
}
.cht-option-card__icon svg { width: 18px; height: 18px; }
.cht-option-card__body {
  flex: 1;
  min-width: 0;
}
.cht-option-card__body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin-bottom: 2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cht-option-card__sub {
  display: block;
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cht-option-card__badge {
  position: absolute;
  top: 8px; right: 8px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Selected state — red border + bg-soft + red icon bg */
.cht-option-card:has(input:checked) {
  border-color: var(--red, #FD292E);
  background: var(--red-soft, #FFE9E9);
}
.cht-option-card:has(input:checked) .cht-option-card__icon {
  background: var(--red, #FD292E);
  color: #fff;
}

/* Form actions right-aligned for intro step */
.cht-form-actions--right {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 0;
}
.cht-form-actions--right .btn { padding: 10px 24px; }
.cht-form-actions--right .btn-lg { padding: 12px 28px; }
.cht-form-actions--right .btn svg { vertical-align: middle; }

/* Phase 11L — Map picker step 2 (Leaflet OSM) */
.cht-map-picker {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2, #f3f4f6);
  position: relative;
  z-index: 0;             /* Create new stacking context */
  isolation: isolate;     /* Clamp Leaflet panes z-index leak */
}
.cht-map-picker__canvas {
  width: 100%;
  height: 320px;
  background: var(--surface-2);
}
/* Leaflet pane override — ensure stays inside parent stacking context */
.cht-map-picker .leaflet-container { z-index: 0 !important; }
.cht-map-picker .leaflet-pane,
.cht-map-picker .leaflet-top,
.cht-map-picker .leaflet-bottom { z-index: auto !important; }
.cht-map-picker__coords {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e5e7eb);
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
}
.cht-map-picker__pin-icon {
  display: inline-flex; color: var(--red, #FD292E);
}
.cht-form-label-hint {
  font-style: normal; font-weight: 400;
  color: var(--ink-mute, #6b7280);
  font-size: 12px;
  margin-left: 6px;
}

@media (max-width: 720px) {
  .cht-map-picker__canvas { height: 260px; }
  /* Mobile — thanh % gọn hơn */
  .cht-form-progress { gap: 10px; margin-bottom: 22px; }
  .cht-form-progress__pct { font-size: 13px; min-width: 38px; }
  .cht-form-grid-2 { grid-template-columns: 1fr; }
  .cht-dang-tin-form { padding: 0; }

  /* Phase 11L mobile — intro card compact, sections stack */
  .cht-intro-card { padding: 0; }
  .cht-intro-card__title { font-size: 20px; }
  .cht-intro-card__sub { font-size: 13.5px; margin-bottom: 20px; }
  .cht-card-grid--2 { grid-template-columns: 1fr; }
  .cht-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .cht-option-card { padding: 10px 12px; gap: 10px; }
  .cht-option-card__icon { width: 32px; height: 32px; border-radius: 6px; }
  .cht-option-card__icon svg { width: 16px; height: 16px; }
  .cht-option-card__body strong { font-size: 13.5px; }
  .cht-option-card__sub { font-size: 11.5px; }
}

@media (max-width: 480px) {
  .cht-card-grid--3 { grid-template-columns: 1fr; }
}

/* ── Search + So sánh (Phase 6.4-6.5) ─── */
.cht-search-form { margin: 16px 0; }
.cht-search-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); max-width: 720px;
}
.cht-search-row input {
  flex: 1; border: 0; background: transparent; font-size: 16px;
  height: 40px; padding: 0 8px; outline: none;
}

.cht-compare-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14.5px; }
.cht-compare-table th, .cht-compare-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left;
}
.cht-compare-table thead th { vertical-align: bottom; padding: 16px; background: var(--surface-2); }
.cht-compare-table tbody th { font-weight: 600; color: var(--ink-mute); width: 160px; }
.cht-row-diff td { background: var(--red-soft); }
.cht-compare-card { display: block; color: inherit; text-decoration: none; }
.cht-compare-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.cht-compare-card strong { display: block; font-size: 14px; line-height: 1.35; margin-bottom: 4px; }
.cht-compare-card em { font-style: normal; font-size: 12px; color: var(--ink-mute); }

@media (max-width: 720px) {
  .cht-compare-table { font-size: 13px; }
  .cht-compare-table th, .cht-compare-table td { padding: 10px 8px; }
}

/* ── Chủ Đầu Tư (Phase 9.1) ─── */
.cht-developer-archive { padding-top: 32px; padding-bottom: 64px; }
.cht-developer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 24px;
}
.cht-developer-card {
  display: flex; gap: 16px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: var(--ink); text-decoration: none;
  transition: all 0.15s;
}
.cht-developer-card:hover { border-color: var(--red); }
.cht-developer-logo {
  flex-shrink: 0; width: 72px; height: 72px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.cht-developer-logo img { width: 100%; height: 100%; object-fit: contain; }
.cht-developer-initials {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--red); letter-spacing: -0.02em;
}
.cht-developer-initials-lg { font-size: 42px; }
.cht-developer-meta { flex: 1; min-width: 0; }
.cht-developer-meta h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  margin: 0 0 4px; letter-spacing: -0.015em;
}
.cht-developer-hq {
  font-size: 12.5px; color: var(--ink-mute); margin: 0 0 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
.cht-developer-intro {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-mute);
  margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cht-developer-stats {
  display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-mute);
}
.cht-developer-stats strong { color: var(--ink); font-family: var(--font-display); }

/* Single developer hero */
.cht-single-developer { padding-top: 24px; padding-bottom: 48px; }
.cht-developer-hero {
  display: flex; gap: 32px; align-items: flex-start;
  padding: 32px;
  background: var(--surface-2); border-radius: var(--radius-lg);
  margin-top: 16px; margin-bottom: 32px;
}
.cht-developer-hero-logo {
  flex-shrink: 0; width: 140px; height: 140px;
  background: var(--surface); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.08);
}
.cht-developer-hero-logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.cht-developer-hero-meta { flex: 1; min-width: 0; }
.cht-developer-title {
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
  margin: 0 0 8px;
}
.cht-developer-tagline { color: var(--ink-mute); font-size: 15px; margin: 0 0 20px; }
.cht-developer-quickinfo {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 24px; row-gap: 16px;
}
.cht-developer-quickinfo li { display: flex; flex-direction: column; gap: 2px; }
.cht-developer-quickinfo em {
  font-style: normal; font-size: 11.5px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cht-developer-quickinfo strong {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -0.015em;
}
.cht-quickinfo-wide { grid-column: 1 / -1; }
.cht-quickinfo-wide strong { font-size: 14.5px; font-family: var(--font-sans); font-weight: 600; }
.cht-developer-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.cht-awards-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.cht-awards-list li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 12px 16px; background: var(--surface-2); border-radius: 8px;
}
.cht-awards-list strong {
  font-family: var(--font-display); color: var(--red);
  font-size: 16px; min-width: 50px;
}
.cht-awards-list span { font-size: 14px; }

@media (max-width: 900px) {
  .cht-developer-grid { grid-template-columns: 1fr; }
  .cht-developer-hero { flex-direction: column; }
  .cht-developer-hero-logo { width: 100%; max-width: 200px; }
  .cht-developer-quickinfo { grid-template-columns: repeat(2, 1fr); }
  .cht-awards-list { grid-template-columns: 1fr; }
}

/* ── Liên hệ (Phase 9.7) ─── */
.cht-contact-hero {
  padding: 32px 0 16px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
}
.cht-contact-h1 {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 8px 0 8px;
}
.cht-contact-sub { color: var(--ink-mute); font-size: 16px; margin: 0; max-width: 56ch; }

.cht-contact-section { padding-top: 32px; padding-bottom: 48px; }
.cht-contact-grid {
  display: grid; grid-template-columns: 380px 1fr;
  gap: 32px;
}
.cht-contact-info-card {
  padding: 28px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.cht-contact-info-card h2 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  margin: 0 0 20px; letter-spacing: -0.015em;
}
.cht-contact-row {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.cht-contact-row:last-of-type { border-bottom: 0; }
.cht-contact-icon { flex-shrink: 0; width: 36px; height: 36px;
  background: var(--red-soft); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.cht-contact-row em {
  font-style: normal; font-size: 11.5px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
  display: block; margin-bottom: 2px;
}
.cht-contact-row a { color: var(--ink); font-weight: 600; font-size: 15px; }
.cht-contact-row a:hover { color: var(--red); }
.cht-contact-row span:not(.cht-contact-icon) { font-size: 14.5px; }
.cht-contact-row small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.cht-contact-social { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.cht-contact-social p {
  margin: 0 0 12px; font-size: 12px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.cht-social-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cht-social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.cht-social-btn:hover { color: #fff; transform: translateY(-1px); }
.cht-social-btn svg { flex-shrink: 0; }
.cht-social-fb:hover   { background: #1877F2; border-color: #1877F2; }
.cht-social-yt:hover   { background: #FF0000; border-color: #FF0000; }
.cht-social-tt:hover   { background: #000000; border-color: #000000; }
.cht-social-zalo:hover { background: #0068FF; border-color: #0068FF; }

/* Footer social — moved to top of file (~line 1110), keep this block empty
   to avoid cascade override. Old "vòng tròn nhỏ" style was conflicting with
   99.co flat icon redesign. */

.cht-contact-map-wrap { margin-top: 16px; }
.cht-contact-map-row {
  margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border);
}
.cht-contact-map-head { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cht-contact-map-head h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 0; letter-spacing: -0.015em;
}
.cht-contact-map-head p {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-mute); font-size: 14px; margin: 0;
}
.cht-contact-map-full {
  width: 100%; height: 420px;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.cht-contact-form-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
}
.cht-contact-form-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 0 0 8px; letter-spacing: -0.015em;
}
.cht-contact-form-sub { color: var(--ink-mute); font-size: 14.5px; margin: 0 0 24px; }
.cht-contact-form .cht-form-row { margin-bottom: 16px; }
.cht-contact-form-submit { width: 100%; margin-top: 8px; }
.cht-form-consent { font-size: 13px; }
.cht-form-consent label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.cht-form-consent input { margin-top: 3px; }
.cht-form-consent span { font-weight: normal; color: var(--ink-mute); }

/* FAQ */
.cht-faq-section { padding-top: 48px; padding-bottom: 64px; }
.cht-faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0; margin-bottom: 12px;
}
.cht-faq-item summary {
  padding: 18px 24px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 15px;
}
.cht-faq-item summary::-webkit-details-marker { display: none; }
.cht-faq-item summary::after {
  content: '+'; font-size: 22px; color: var(--ink-mute);
  transition: transform 0.2s;
}
.cht-faq-item[open] summary::after { content: '−'; }
.cht-faq-item p {
  padding: 0 24px 18px; margin: 0;
  color: var(--ink-mute); font-size: 14.5px; line-height: 1.7;
}

@media (max-width: 900px) {
  .cht-contact-grid { grid-template-columns: 1fr; }
  .cht-contact-info-card, .cht-contact-form-wrap { padding: 24px; }
}

/* ── 404 (Phase 9.8) ─── */
.cht-404-section { padding: 64px 0; min-height: 60vh; display: flex; align-items: center; }
.cht-404-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 48px; align-items: center;
}
.cht-404-illu { text-align: center; }
.cht-404-number {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(120px, 18vw, 200px);
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
}
.cht-404-digit { color: var(--ink); }
.cht-404-zero {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.85em; height: 0.85em; border-radius: 50%;
  border: 0.13em solid var(--red);
  background: var(--red-soft);
}
.cht-404-house {
  display: inline-flex;
}
.cht-404-house svg { width: 0.35em; height: 0.35em; }

.cht-404-content { max-width: 540px; }
.cht-404-title {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 36px);
  font-weight: 700; letter-spacing: -0.025em; margin: 8px 0 12px;
}
.cht-404-sub { color: var(--ink-mute); font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }

.cht-404-search {
  display: flex; gap: 8px; align-items: center;
  background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: var(--radius-lg); padding: 6px 6px 6px 18px;
  margin-bottom: 24px;
}
.cht-404-search input {
  flex: 1; height: 44px; border: 0; background: transparent;
  font: inherit; font-size: 15px; outline: none;
}
.cht-404-search button { white-space: nowrap; }

.cht-404-quicklinks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

.cht-404-popular p { margin: 0 0 8px; font-size: 13px; color: var(--ink-mute); }
.cht-404-popular ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.cht-404-popular li a {
  display: inline-block; padding: 6px 14px;
  background: var(--surface-2); border-radius: 999px;
  font-size: 13.5px; color: var(--ink);
  text-decoration: none; transition: background 0.15s;
}
.cht-404-popular li a:hover { background: var(--red-soft); color: var(--red-deep); }

@media (max-width: 900px) {
  .cht-404-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .cht-404-content { margin: 0 auto; text-align: left; }
  .cht-404-section { padding: 32px 0; }
}

/* ── Blog (Phase 9.13) ─── */
.cht-blog-hero { padding: 32px 0 24px; background: linear-gradient(180deg, var(--surface-2), var(--bg)); }
.cht-blog-h1 {
  font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  margin: 8px 0 8px;
}
.cht-blog-sub { color: var(--ink-mute); font-size: 16px; margin: 0 0 24px; max-width: 64ch; }
.cht-blog-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cht-blog-cat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); font-size: 13.5px; font-weight: 500;
  text-decoration: none; transition: all 0.15s;
}
.cht-blog-cat small { color: var(--ink-mute); font-weight: 400; }
.cht-blog-cat:hover { border-color: var(--red); color: var(--red); }
/* Phase 18 A — tab active theo brand đỏ (trước: đen) */
.cht-blog-cat.on { background: var(--red); color: #fff; border-color: var(--red); }
.cht-blog-cat.on small { color: rgba(255,255,255,0.75); }
.cht-blog-cat-chip {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  background: var(--red-soft); color: var(--red-deep);
  font-size: 11.5px; font-weight: 700; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cht-blog-cat-chip:hover { background: var(--red); color: #fff; }
/* Chip đặc (trên nền ảnh tối) */
.cht-blog-cat-chip.cht-chip-solid { background: var(--red); color: #fff; }
.cht-blog-cat-chip.cht-chip-solid:hover { background: var(--red-deep); }

.cht-blog-section { padding-top: 32px; padding-bottom: 64px; }

/* Phase 18 A — bài nổi bật editorial: ảnh lớn + gradient phủ chữ trắng (thay grid 2 cột cũ) */
.cht-blog-featured {
  position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 36px;
  background: var(--surface-2);
  box-shadow: 0 14px 36px -16px rgba(15,23,34,.18);
}
.cht-blog-featured-img { display: block; aspect-ratio: 21/9; background: var(--surface-2); }
.cht-blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cht-blog-featured:hover .cht-blog-featured-img img { transform: scale(1.03); }
.cht-blog-featured-body {
  position: absolute; inset: auto 0 0 0;
  padding: 72px 32px 26px;
  background: linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.55) 38%, rgba(10,14,20,.86) 100%);
}
.cht-blog-featured-body .cht-blog-cat-chip { margin-bottom: 10px; }
.cht-blog-featured-title {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.18;
  margin: 0 0 10px; max-width: 26ch; text-wrap: balance;
}
.cht-blog-featured-title a { color: #fff; text-decoration: none; }
.cht-blog-featured-title a:hover { color: #ffd9d6; }
.cht-blog-featured-excerpt {
  color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6;
  margin: 0 0 12px; max-width: 64ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cht-blog-featured .cht-blog-meta { color: rgba(255,255,255,.72); }
.cht-blog-featured .cht-meta-dot { color: rgba(255,255,255,.45); }
.cht-blog-featured-cta { color: #fff; font-weight: 700; }

.cht-blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
/* Phase 18 A — card bài: chip đè mép ảnh, title clamp 2 dòng (đều chiều cao), hover ấm hơn */
.cht-blog-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.cht-blog-card:hover { border-color: rgba(224,60,49,.35); box-shadow: 0 14px 32px -14px rgba(15,23,34,.16); }
.cht-blog-card-img { display: block; aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.cht-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.cht-blog-card:hover .cht-blog-card-img img { transform: scale(1.05); }
.cht-blog-card-body { padding: 0 20px 20px; display: flex; flex-direction: column; flex: 1; }
.cht-blog-card-body .cht-blog-cat-chip {
  position: relative; align-self: flex-start;
  margin-top: -13px; margin-bottom: 10px;
  background: var(--red); color: #fff;
  box-shadow: 0 4px 10px -2px rgba(224,60,49,.45);
}
.cht-blog-card h3 {
  font-family: var(--font-display); font-size: 17.5px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.35;
  margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cht-blog-card h3 a { color: var(--ink); text-decoration: none; }
.cht-blog-card h3 a:hover { color: var(--red); }
.cht-blog-card p {
  font-size: 13.5px; color: var(--ink-mute); line-height: 1.6;
  margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cht-blog-card .cht-blog-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.cht-blog-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-mute);
}
.cht-meta-dot { color: var(--ink-soft); }

/* Single post */
.cht-post-hero {
  padding: 40px 0 8px;
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
}
.cht-post-cats { margin: 16px 0 12px; }
.cht-post-title {
  font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  margin: 12px 0 20px;
  text-wrap: balance;
}
.cht-post-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--ink-mute);
  flex-wrap: wrap;
}
.cht-post-author {
  display: inline-flex; align-items: center; gap: 10px;
}
.cht-post-avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border);
}
.cht-post-author-info {
  display: inline-flex; flex-direction: column; gap: 2px;
  line-height: 1.3;
}
.cht-post-author-info strong {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
}
.cht-post-author-info em {
  font-style: normal; font-size: 12.5px; color: var(--ink-mute);
}

.cht-post-hero-img-wrap { padding: 32px 0 8px; }
.cht-post-hero-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px -18px rgba(15,23,34,.22); /* Phase 18 A — ảnh đại diện có chiều sâu */
}

/* Phase 18 A — typography chuẩn đọc dài: 18px/1.85, heading phân cấp rõ */
.cht-post-content {
  font-size: 18px; line-height: 1.85; color: var(--ink);
  padding-top: 32px;
}
.cht-post-content > *:first-child { margin-top: 0; }
.cht-post-content h2 {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25;
  margin: 44px 0 16px; color: var(--ink);
  padding-left: 14px; border-left: 4px solid var(--red); /* vạch đỏ phân cấp */
}
.cht-post-content h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.3;
  margin: 32px 0 12px;
}
.cht-post-content p { margin: 0 0 20px; }
.cht-post-content img {
  max-width: 100%; height: auto; border-radius: var(--radius); margin: 26px 0;
  box-shadow: 0 10px 28px -14px rgba(15,23,34,.18);
}
.cht-post-content blockquote {
  border-left: 3px solid var(--red);
  padding: 14px 20px; margin: 30px 0;
  background: var(--red-soft); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink); font-style: italic;
  font-family: var(--font-display); font-size: 19px; line-height: 1.55;
}
.cht-post-content blockquote p:last-child { margin-bottom: 0; }
.cht-post-content ul, .cht-post-content ol { padding-left: 22px; margin: 0 0 18px; }
.cht-post-content li { margin-bottom: 8px; }
.cht-post-content a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.cht-post-content a:hover { color: var(--red-deep); }

.cht-post-tags {
  margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.cht-post-tags strong { color: var(--ink-mute); font-weight: 600; margin-right: 8px; }
.cht-post-tags a {
  display: inline-block; padding: 4px 10px; margin-right: 4px;
  background: var(--surface-2); border-radius: 4px;
  color: var(--ink); text-decoration: none;
}
.cht-post-tags a:hover { background: var(--red-soft); color: var(--red-deep); }

.cht-post-share {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 24px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.cht-post-share > span:first-child { color: var(--ink-mute); margin-right: 4px; }
.cht-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: all 0.15s;
}
.cht-share-btn:hover { color: #fff; transform: translateY(-1px); }
.cht-share-fb:hover    { background: #1877F2; border-color: #1877F2; }
.cht-share-zalo:hover  { background: #0068FF; border-color: #0068FF; }
.cht-share-email:hover { background: var(--ink); border-color: var(--ink); }

/* Phase 18 A — khung tác giả thành card có viền + avatar ring đỏ nhạt */
.cht-post-author-box {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin: 32px 0;
  position: relative;
}
.cht-post-author-box::before {
  content: "TÁC GIẢ";
  position: absolute; top: -9px; left: 20px;
  background: var(--surface); padding: 0 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  color: var(--red);
}
.cht-post-author-box img {
  border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--red-soft);
}
.cht-author-name {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  margin: 0 0 4px;
}
.cht-author-bio { font-size: 14px; color: var(--ink-mute); line-height: 1.55; margin: 0; }

.cht-post-related {
  background: var(--surface-2); padding: 48px 0; margin-top: 48px;
}

@media (max-width: 900px) {
  .cht-blog-featured-img { aspect-ratio: 16/10; }
  .cht-blog-featured-body { padding: 56px 18px 18px; }
  .cht-blog-featured-excerpt { display: none; } /* mobile: gọn — chip + title + meta đủ */
  .cht-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cht-blog-card-body { padding: 0 14px 14px; }
  .cht-post-content { font-size: 16.5px; }
  .cht-post-content h2 { font-size: 22px; }
}
@media (max-width: 600px) {
  .cht-blog-grid { grid-template-columns: 1fr; }
  .cht-blog-featured-title { font-size: 20px; }
  .cht-post-share { font-size: 12.5px; }
  .cht-share-btn { padding: 6px 10px; }
}

/* ── Author social icons (Phase 9.15) ─── */
.cht-author-meta { flex: 1; min-width: 0; }
.cht-author-social {
  display: flex; gap: 8px; margin-top: 10px;
}
.cht-author-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-mute); text-decoration: none;
  transition: all 0.15s;
  font-weight: 700; font-size: 14px;
}
.cht-author-social-icon:hover { color: #fff; transform: translateY(-1px); }
.cht-author-social-icon.cht-social-fb:hover    { background: #1877F2; border-color: #1877F2; }
.cht-author-social-icon.cht-social-tw:hover    { background: #1DA1F2; border-color: #1DA1F2; }
.cht-author-social-icon.cht-social-li:hover    { background: #0A66C2; border-color: #0A66C2; }
.cht-author-social-icon.cht-social-zalo:hover  { background: #0068FF; border-color: #0068FF; }
.cht-author-social-icon.cht-social-yt:hover    { background: #FF0000; border-color: #FF0000; }
.cht-author-social-icon.cht-social-web:hover   { background: var(--ink); border-color: var(--ink); }
.cht-author-social-icon.cht-social-email:hover { background: var(--red); border-color: var(--red); }

/* ── Comments (Phase 9.15) ─── */
.cht-comments-section {
  margin: 48px 0 32px;
  padding-top: 32px; border-top: 1px solid var(--border);
}
.cht-comments-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 0 0 24px; letter-spacing: -0.015em;
}

.cht-comments-list, .cht-comments-list .children {
  list-style: none; padding: 0; margin: 0;
}
.cht-comments-list .children { padding-left: 48px; margin-top: 12px; }

.cht-comment { margin-bottom: 16px; }
.cht-comment-body {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.cht-comment-head {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 10px;
}
.cht-comment-head img { border-radius: 50%; flex-shrink: 0; }
.cht-comment-meta { flex: 1; min-width: 0; }
.cht-comment-author {
  display: block; font-family: var(--font-display); font-size: 14.5px;
  font-weight: 700; line-height: 1.3;
}
.cht-comment-author a { color: var(--ink); text-decoration: none; }
.cht-comment-author a:hover { color: var(--red); }
.cht-comment-date { font-size: 12px; color: var(--ink-mute); }
.cht-comment-content { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.cht-comment-content p { margin: 0 0 8px; }
.cht-comment-content p:last-child { margin-bottom: 0; }
.cht-comment-pending { color: var(--ink-mute); font-style: italic; }
.cht-comment-foot {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.cht-comment-foot a { color: var(--ink-mute); text-decoration: none; font-weight: 500; }
.cht-comment-foot a:hover { color: var(--red); }

.cht-comments-pagination {
  display: flex; justify-content: center; gap: 8px;
  margin: 24px 0;
}

.cht-comment-form {
  margin-top: 32px; padding: 24px;
  background: var(--surface-2); border-radius: var(--radius-lg);
}
.cht-comment-form .comment-reply-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  margin: 0 0 12px;
}
.cht-comment-notes {
  font-size: 13px; color: var(--ink-mute);
  margin: 0 0 16px;
}
.cht-comment-notes em { color: var(--red); font-style: normal; }
.cht-comments-closed {
  margin-top: 24px; padding: 18px 20px;
  background: var(--surface-2); border-radius: var(--radius-lg);
  color: var(--ink-mute); font-size: 14px; text-align: center;
}

/* Inherit cht-form-row + input styles for comment form */
.cht-comment-form .cht-form-row { margin-bottom: 14px; }
.cht-comment-form label {
  display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px;
}
.cht-comment-form label em { color: var(--red); font-style: normal; }
.cht-comment-form input[type="text"],
.cht-comment-form input[type="email"],
.cht-comment-form input[type="url"],
.cht-comment-form textarea {
  width: 100%;
  height: 42px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  font: inherit; font-size: 14.5px; background: var(--surface);
}
.cht-comment-form textarea { height: auto; padding: 12px; resize: vertical; }
.cht-comment-form input:focus, .cht-comment-form textarea:focus {
  outline: 0; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, 0.12);
}
.cht-comment-form .form-submit { margin: 8px 0 0; }
.logged-in-as { font-size: 13px; color: var(--ink-mute); margin-bottom: 16px; }

@media (max-width: 600px) {
  .cht-comments-list .children { padding-left: 24px; }
}

/* ── TOC mục lục — inline trong content (Phase 9.18) ─── */
.cht-toc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 0 0 36px;
  font-size: 14.5px;
}
.cht-toc-toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: transparent; border: 0; padding: 0;
  font: inherit; color: var(--ink);
  cursor: pointer; text-align: left;
}
.cht-toc-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.005em;
}
.cht-toc-chevron {
  transition: transform 0.2s;
  color: var(--ink-mute); flex-shrink: 0;
}
.cht-toc[data-open="false"] .cht-toc-chevron { transform: rotate(-90deg); }
.cht-toc[data-open="false"] .cht-toc-list { display: none; }

.cht-toc-list {
  list-style: none; padding: 0; margin: 16px 0 0;
}
.cht-toc-list li {
  padding: 6px 0; line-height: 1.5;
}
.cht-toc-list li a {
  color: var(--ink); text-decoration: none;
  display: flex; gap: 8px; align-items: baseline;
  transition: color 0.15s;
}
.cht-toc-list li a:hover { color: var(--red); }
.cht-toc-list li.cht-toc-sub {
  padding-left: 32px; font-size: 13.5px;
}
.cht-toc-list li.cht-toc-sub a { color: var(--ink-mute); }
.cht-toc-list li.cht-toc-sub a:hover { color: var(--red); }
.cht-toc-num {
  flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700;
  color: var(--red); min-width: 24px;
}
.cht-toc-list li.is-active > a {
  color: var(--red); font-weight: 600;
}
.cht-toc-list li.is-active .cht-toc-num { color: var(--red-deep); }

/* Heading scroll offset (header sticky 80px) */
.cht-post-content h2,
.cht-post-content h3 { scroll-margin-top: 100px; }

/* ── Modal drill-step pattern (Phase 9.29) ─── */
.cht-modal-shell {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 520px;
  /* Phase 11K: dvh = dynamic viewport height — adjust khi iOS keyboard mở (modal foot không bị cắt) */
  max-height: 90dvh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.3);
  overflow: clip;     /* "clip" ngăn programmatic scrollTop (vs "hidden" allow) */
}
.cht-modal-step {
  display: flex; flex-direction: column;
  width: 100%;
  flex: 1; min-height: 0;
}
.cht-modal-step[hidden] { display: none; }
.cht-modal-step .cht-modal-head {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.cht-modal-step .cht-modal-head h3 {
  text-align: center; font-size: 16px; margin: 0;
  font-family: var(--font-display); font-weight: 700;
}
.cht-modal-head-spacer { display: inline-block; width: 40px; }
.cht-modal-back-btn, .cht-modal-close-btn {
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cht-modal-back-btn:hover, .cht-modal-close-btn:hover { background: var(--surface-2); }

/* Search inside drill step */
.cht-modal-search {
  position: relative;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cht-modal-search > svg {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.cht-modal-search input {
  width: 100%; height: 40px; padding: 0 14px 0 42px;
  background: var(--surface-2); border: 0; border-radius: 999px;
  font: inherit; font-size: 14.5px; outline: none;
}
.cht-modal-search input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(214, 58, 64, .12);
}

/* Body modes */
.cht-modal-body-rows { padding: 8px 0; }
.cht-modal-body-list { padding: 0; }
.cht-modal-body-form { padding: 20px; }

/* Khu vực + Dự án sub-step — premium select style (Phase 9.32) */
.cht-modal-body-form .cht-form-row { margin-bottom: 18px; gap: 8px; }
.cht-modal-body-form .cht-form-row:last-child { margin-bottom: 0; }
.cht-modal-body-form .cht-form-row label {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.cht-modal-body-form .cht-form-row select {
  height: 46px; padding: 0 40px 0 14px;
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-size: 14.5px; color: var(--ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.cht-modal-body-form .cht-form-row select:hover {
  background-color: #ececec;
}
.cht-modal-body-form .cht-form-row select:focus {
  outline: 0;
  background-color: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, .12);
}
.cht-modal-body-form .cht-form-row select[disabled] {
  opacity: .55; cursor: not-allowed;
}

/* Searchable combo (Phase 9.32 → 9.33 inline-input refactor) — Khu vực + Dự án */
/* Đồng bộ visual với .cht-modal-row card: white bg + visible border */
.cht-combo { position: relative; width: 100%; }
.cht-combo-control {
  position: relative;
  display: flex; align-items: center;
  width: 100%; height: 48px;
  background-color: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg, 12px);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.cht-combo-control:hover {
  border-color: var(--ink-soft);
}
.cht-combo.is-open .cht-combo-control {
  background-color: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, .12);
}
/* Override global .cht-form-row input[type="text"] (specificity 0,2,1) — must use input.cht-combo-input */
.cht-modal-body-form input.cht-combo-input,
.cht-modal-body-form input.cht-combo-input:focus,
.cht-form-row input.cht-combo-input,
.cht-form-row input.cht-combo-input:focus {
  width: auto;
  flex: 1; min-width: 0;
  height: 100%; padding: 0 4px 0 14px;
  background: transparent; border: 0; outline: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit; font-size: 14.5px; color: var(--ink);
  cursor: text;
}
.cht-combo-input::placeholder { color: var(--ink-mute); }
.cht-combo-actions {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0; padding-right: 6px;
}
.cht-combo-clear {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: var(--ink-mute);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.cht-combo-clear:hover { background: rgba(0,0,0,.12); color: var(--ink); }
.cht-combo-clear[hidden] { display: none; }
.cht-combo-chevron {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: transform .2s;
  cursor: pointer;
}
.cht-combo.is-open .cht-combo-chevron { transform: rotate(180deg); }

.cht-combo {
  /* Phase 18 — mobile mở panel: JS scrollIntoView(start) cuộn ô lên đầu — chừa mép 10px */
  scroll-margin-top: 10px;
}
/* Phase 18 — đang gõ tìm trong combo (mobile): ẨN footer "Đặt lại/Áp dụng" của step
   (batdongsan-style — chọn xong/đóng danh sách footer hiện lại; class chỉ được JS add trên mobile) */
.cht-modal-step.cht-combo-typing .cht-modal-foot { display: none; }
.cht-combo-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 1100;  /* Above Leaflet panes (max ~800) + modals (~1000) */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 280px; /* desktop; mobile: JS set inline max-height động theo khoảng trống trên bàn phím (Phase 18) */
}
.cht-combo-panel[hidden] { display: none !important; }
.cht-combo-list {
  list-style: none; margin: 0; padding: 6px;
  overflow-y: auto; flex: 1; min-height: 0;
}
.cht-combo-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .12s;
  line-height: 1.3;
}
.cht-combo-item[hidden] { display: none; }
.cht-combo-item.is-area-hidden { display: none !important; }  /* Phase 14I.7 — area filter độc lập với search filter */
.cht-combo-item:hover { background: var(--surface-2); }
.cht-combo-item.is-active {
  background: rgba(214,58,64,.08);
  color: var(--red);
  font-weight: 600;
}
.cht-combo-loading {
  padding: 14px;
  color: var(--ink-mute); font-size: 14px;
  list-style: none; text-align: center;
}
.cht-combo-empty {
  padding: 14px;
  color: var(--ink-mute); font-size: 14px; text-align: center;
}

/* Main step: section block + card row buttons (Phase 9.30) */
.cht-modal-body-rows { padding: 16px 16px 8px; }
.cht-modal-section-block {
  margin-bottom: 14px;
}
.cht-modal-section-title {
  display: block;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  color: var(--ink); margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.cht-modal-row {
  display: flex; width: 100%; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font: inherit; text-align: left; cursor: pointer;
  transition: all 0.15s;
}
.cht-modal-row:hover {
  border-color: var(--ink);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,0.08);
}
.cht-row-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}
.cht-row-value {
  flex: 1; font-size: 14.5px; color: var(--ink-mute); font-weight: 500;
}
.cht-row-value.is-active {
  color: var(--red-deep); font-weight: 600;
}
.cht-row-chevron {
  flex-shrink: 0; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Toggles inline trên main step */
.cht-modal-toggles {
  padding: 14px 0 4px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.cht-modal-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: background-color .15s, border-color .15s;
}
.cht-modal-toggle:hover { border-color: var(--ink-soft); }
.cht-modal-toggle:has(input:checked) {
  border-color: var(--red);
  background: rgba(214, 58, 64, .04);
}
.cht-toggle-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 500; color: var(--ink);
}
.cht-toggle-label svg { color: var(--ink-mute); flex-shrink: 0; }
.cht-modal-toggle:has(input:checked) .cht-toggle-label { color: var(--red); font-weight: 600; }
.cht-modal-toggle:has(input:checked) .cht-toggle-label svg { color: var(--red); }
.cht-modal-toggle input {
  position: absolute; opacity: 0; pointer-events: none;
}
.cht-toggle-switch {
  position: relative; display: inline-block;
  width: 40px; height: 22px; flex-shrink: 0;
  background: var(--border-strong); border-radius: 999px;
  transition: background 0.2s;
}
.cht-toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.cht-modal-toggle input:checked + .cht-toggle-switch {
  background: var(--red);
}
.cht-modal-toggle input:checked + .cht-toggle-switch::after {
  transform: translateX(18px);
}

/* Drill list rows */
.cht-drill-list {
  list-style: none; padding: 0; margin: 0;
}
.cht-drill-row {
  border-bottom: 1px solid var(--border);
}
.cht-drill-row label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; font-size: 14.5px;
}
.cht-drill-row label:hover { background: var(--surface-2); }
.cht-drill-row-label, .cht-drill-row label > span:first-child {
  flex: 1; min-width: 0;
}
.cht-drill-row input[type="checkbox"],
.cht-drill-row input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.cht-drill-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0; transition: all 0.15s;
  position: relative;
}
.cht-drill-row input[type="radio"] ~ .cht-drill-check { border-radius: 50%; }
.cht-drill-row input:checked ~ .cht-drill-check {
  background: var(--red); border-color: var(--red);
}
.cht-drill-row input[type="checkbox"]:checked ~ .cht-drill-check::after {
  content: ''; display: block;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.cht-drill-row input[type="radio"]:checked ~ .cht-drill-check::after {
  content: ''; display: block;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.cht-drill-row[hidden] { display: none; }

/* Footer */
/* Modal footer buttons (Phase 9.33+) — đồng bộ main step + sub-step */
.cht-modal-foot,
.cht-modal-step .cht-modal-foot {
  display: flex; gap: 12px; padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  align-items: stretch;
  justify-content: flex-start;
}
.cht-modal-foot .btn {
  height: 48px;
  border-radius: 12px;
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.cht-modal-foot .btn-ghost {
  flex: 0 0 auto;
  min-width: 140px;
  padding: 0 18px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
}
.cht-modal-foot .btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--ink-soft);
  color: var(--ink);
}
.cht-modal-foot .btn-primary {
  flex: 1;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  box-shadow: 0 1px 2px rgba(214,58,64,.18), 0 4px 12px rgba(214,58,64,.18);
}
.cht-modal-foot .btn-primary:hover {
  background: var(--red-deep, #b8323a);
  border-color: var(--red-deep, #b8323a);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(214,58,64,.22), 0 8px 18px rgba(214,58,64,.25);
  color: #fff;
}
.cht-modal-foot .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(214,58,64,.18);
}
.cht-modal-reset { font-size: 14px; color: var(--ink-mute); text-decoration: underline; align-self: center; }

/* Body scroll */
.cht-modal-step .cht-modal-body {
  overflow-y: auto;
  flex: 1;
}

/* Phase 15.4 — Bước Giá/Diện tích dùng .cht-modal-body trơ → dính padding 24px thừa (các bước khác có
   modifier -rows/-list/-form). Bỏ padding body + đẩy input/slider về 20px khớp preset (.cht-drill-row = 16px 20px). */
.cht-modal-step[data-cht-step="gia"] > .cht-modal-body,
.cht-modal-step[data-cht-step="dien-tich"] > .cht-modal-body { padding: 0; }
.cht-modal-step[data-cht-step="gia"] .cht-price-inputs,
.cht-modal-step[data-cht-step="dien-tich"] .cht-price-inputs { padding-left: 20px; padding-right: 20px; }
.cht-modal-step[data-cht-step="gia"] .cht-price-slider,
.cht-modal-step[data-cht-step="dien-tich"] .cht-price-slider { margin-left: 20px; margin-right: 20px; }

@media (max-width: 640px) {
  /* Phase 11K.2 — Prevent iOS Safari auto-zoom khi user tap input có font-size < 16px.
     Apply 16px MIN cho mọi text-like input trên mobile — iOS không zoom, viewport không vỡ. */
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Mobile filter modal: FULL SCREEN (no padding, no radius, edge-to-edge)
     Phase 11K.4 — align-items: stretch để shell fill parent height (đã shrink theo --vh-visible),
     KHÔNG center → tránh top blank. */
  .cht-filter-modal {
    padding: 0;
    align-items: stretch;
  }
  .cht-modal-shell {
    width: 100vw; max-width: 100vw;
    height: 100%; max-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ── Price slider + inputs (Phase 9.31) ─── */
.cht-price-inputs {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 14px; align-items: end;
  padding: 16px 16px 8px;
}
.cht-price-input-col label {
  display: block; font-size: 13px; color: var(--ink); font-weight: 600;
  margin-bottom: 6px;
}
.cht-price-input-col input {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; font-size: 14.5px; text-align: center;
  color: var(--ink);
}
.cht-price-input-col input:focus {
  outline: 0; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, 0.12);
}
.cht-price-arrow {
  color: var(--ink-mute); font-size: 18px;
  padding-bottom: 12px;
}

.cht-price-slider {
  position: relative; height: 24px;
  margin: 4px 16px 24px;
}
.cht-slider-track {
  position: absolute; top: calc(50% - 2px); left: 0; right: 0; height: 4px;
  background: var(--border-strong); border-radius: 2px;
}
.cht-slider-range {
  position: absolute; top: 0; bottom: 0;
  background: var(--red);
  border-radius: 2px;
}
.cht-slider-thumb {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 24px; margin: 0; padding: 0;
  background: transparent; border: 0;
  pointer-events: none;
  appearance: none; -webkit-appearance: none;
}
.cht-slider-thumb::-webkit-slider-thumb {
  pointer-events: all;
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(214,58,64,.15);
  cursor: grab;
  transition: transform .15s, box-shadow .15s;
  /* WebKit thumb default top khi runnable-track custom height = top of runnable-track.
     Cần margin-top = (track-h - thumb-h) / 2 = (4 - 22) / 2 = -9px để center on track */
  margin-top: -9px;
}
.cht-slider-thumb::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(214,58,64,.35), 0 0 0 6px rgba(214,58,64,.15); }
.cht-slider-thumb::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.cht-slider-thumb::-moz-range-thumb:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(214,58,64,.35), 0 0 0 6px rgba(214,58,64,.15); }
.cht-slider-thumb::-moz-range-thumb {
  pointer-events: all;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(214,58,64,.15);
  cursor: grab;
  transition: transform .15s, box-shadow .15s;
}
.cht-slider-thumb::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.cht-slider-thumb::-moz-range-track { background: transparent; height: 4px; }

.cht-price-presets { border-top: 1px solid var(--border); margin-top: 4px; }

/* ──────────────────────────────────────────────────────────────
   WC Tài khoản (My Account) — Phase 9.38
   Cover: guest login + register · dashboard sidebar + content
   ────────────────────────────────────────────────────────────── */

.woocommerce-account .container,
body.woocommerce-account .site-main,
.woocommerce-account.page .entry-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* Page heading (guest auth view) */
.woocommerce-account .entry-title,
.woocommerce-account .page-title {
  font-family: var(--font-display, inherit);
  font-size: 32px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 32px;
  text-align: center;
}

/* ── Guest view: 2-col grid (login | register) ─── */
.woocommerce-account:not(.logged-in) .u-columns,
.woocommerce-account .col2-set,
.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 100%;
  margin: 0;
}
.woocommerce-account .col-1,
.woocommerce-account .col-2,
.woocommerce-account #customer_login > div {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}
/* Force grid placement — WC default float CSS hỗn loạn item placement trong grid */
.woocommerce-account .u-column1,
.woocommerce-account .col-1 { grid-column: 1 !important; grid-row: 1 !important; }
.woocommerce-account .u-column2,
.woocommerce-account .col-2 { grid-column: 2 !important; grid-row: 1 !important; }

/* Section heading "Đăng nhập" / "Đăng ký" */
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2,
.woocommerce-account #customer_login h2 {
  font-family: var(--font-display, inherit);
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}

/* Form cards — bump specificity với body. để thắng WC default */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 14px) !important;
  padding: 28px !important;
  box-shadow: 0 4px 16px -8px rgba(15,23,34,0.06);
}

/* Form rows */
.woocommerce-form-row {
  margin-bottom: 16px;
}
.woocommerce-form-row label {
  display: block;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.woocommerce-form-row .required {
  color: var(--red, #FD292E);
  font-weight: 700;
  margin-left: 2px;
}

/* Form inputs — match site design (bump specificity to override WC default) */
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="number"],
body.woocommerce-account select,
body.woocommerce-account textarea {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border-strong, #d1d5db) !important;
  border-radius: 10px !important;
  font: inherit; font-size: 14.5px !important;
  color: var(--ink, #0f1722) !important;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  line-height: normal;
}
.woocommerce-account textarea { height: auto; min-height: 100px; padding: 10px 14px; }
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214,58,64,0.12);
}

/* Password input wrapper (WC adds .password-input + show/hide eye btn) */
.woocommerce-account .password-input {
  position: relative;
}
.woocommerce-account .password-input .show-password-input {
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: transparent; border: 0;
  cursor: pointer;
  color: var(--ink-mute, #6b7280);
}
.woocommerce-account .password-input .show-password-input::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
}

/* Submit buttons — brand red */
.woocommerce-account button[type="submit"],
.woocommerce-account .button,
.woocommerce-account .woocommerce-button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px;
  background: var(--red, #FD292E) !important;
  color: #fff !important;
  border: 1px solid var(--red, #FD292E) !important;
  border-radius: 10px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .15s;
  text-decoration: none;
}
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account .button:hover {
  background: var(--red-deep, #b8323a) !important;
  box-shadow: 0 4px 12px -4px rgba(214,58,64,0.4);
  transform: translateY(-1px);
}

/* "Ghi nhớ đăng nhập" remember-me checkbox */
.woocommerce-form__label-for-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-mute, #6b7280);
  cursor: pointer;
  margin-left: 16px;
}
.woocommerce-form__input-checkbox {
  width: 16px; height: 16px;
  accent-color: var(--red, #FD292E);
  cursor: pointer;
}

/* Quên mật khẩu link */
.woocommerce-LostPassword,
.lost_password {
  margin-top: 16px;
  font-size: 14px;
}
.woocommerce-LostPassword a,
.lost_password a {
  color: var(--red, #FD292E);
  text-decoration: none;
  font-weight: 500;
}
.woocommerce-LostPassword a:hover,
.lost_password a:hover {
  text-decoration: underline;
}

/* Privacy policy text */
.woocommerce-privacy-policy-text {
  margin-top: 4px; margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface-2, #f9fafb);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.5;
}

/* ── Logged-in view: sidebar nav + content ───
   Scope grid CHỈ khi có .woocommerce-MyAccount-navigation (logged-in dashboard)
   tránh áp lên guest view (login/register form) → vỡ width customer_login. */
.woocommerce-MyAccount-navigation {
  float: none !important;
  width: 100% !important;
}
body.woocommerce-account.logged-in .woocommerce {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
body.woocommerce-account.logged-in.cht-sidebar-collapsed .woocommerce {
  grid-template-columns: 64px 1fr !important;
}
/* Widen .wrap on dashboard for card-heavy pages (tin-dang management) */
body.woocommerce-account.logged-in .wrap { max-width: 1500px !important; }
/* Force placement — WC default template order có thể khác, em cố định nav LEFT + content RIGHT */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1 !important; grid-row: 1 !important; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-content    { grid-column: 2 !important; grid-row: 1 !important; }
/* ─── Phase 14X.7 — Reduce padding cho .cht-page-section (page.php wrapper)
   Default .section = 80px 0. Page dashboard không cần marketing-style padding. ─── */
.cht-page-section { padding: 24px 0 !important; }

/* ─── Phase 14X.9 — Account area RESPONSIVE: stack 1-cột + nav cuộn ngang ≤860px ─── */
@media (max-width: 860px) {
  body.woocommerce-account.logged-in .woocommerce,
  body.woocommerce-account.logged-in.cht-sidebar-collapsed .woocommerce {
    grid-template-columns: minmax(0, 1fr) !important;  /* minmax(0,..) cho phép track co < min-content → overflow-x cuộn được */
    gap: 14px !important;
  }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
    grid-column: 1 !important; grid-row: 1 !important;
  }
  body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    grid-column: 1 !important; grid-row: 2 !important;
    min-width: 0;            /* cho phép content co lại, tránh tràn (CSS grid intrinsic) */
  }
  /* Nav dọc → thanh cuộn ngang (tab bar) */
  .woocommerce-MyAccount-navigation { padding: 8px !important; min-width: 0; max-width: 100%; }
  .woocommerce-MyAccount-navigation .cht-acc-nav-toggle { display: none !important; }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox — ẩn scrollbar xám */
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  .woocommerce-MyAccount-navigation ul li { flex: 0 0 auto; }
  .woocommerce-MyAccount-navigation ul li a { padding: 8px 12px; }
  .woocommerce-MyAccount-navigation .cht-acc-nav-help { margin-top: 8px; justify-content: center; }
}

/* ─── Phase 14X.9 — Công cụ Hub (/cong-cu/) — 5 tools grid ─── */
.cht-tools-hub-page { background: #fff; min-height: 100vh; padding: 24px 0 60px; }
.cht-tools-hub-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cht-tools-hub-page .detail-crumb { font-size: 13px; color: var(--ink-mute,#6b7280); margin-bottom: 20px; display:flex; gap:6px; }
.cht-tools-hub-page .detail-crumb a { color: var(--ink-mute,#6b7280); text-decoration: none; }
.cht-tools-hub-page .detail-crumb a:hover { color: var(--red,#FD292E); }
.cht-tools-hub-page .detail-crumb .cur { color: var(--ink,#0f1722); font-weight: 600; }
.cht-tools-hub-page .detail-crumb .sep { color: #cbd5e1; }

.cht-tools-hub-hero { text-align: center; padding: 16px 0 36px; }
.cht-tools-hub-hero h1 { font-size: 30px; font-weight: 800; color: var(--ink,#0f1722); margin: 0 0 12px; letter-spacing: -0.02em; }
.cht-tools-hub-hero p { font-size: 15px; color: var(--ink-mute,#6b7280); margin: 0 auto; max-width: 600px; line-height: 1.6; }
.cht-tools-hub-hero p strong { color: var(--red,#FD292E); font-weight: 700; }

.cht-tools-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .cht-tools-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cht-tools-hub-grid { grid-template-columns: 1fr; } }

.cht-tools-hub-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  background: #fff;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink, #0f1722);
  transition: all .18s ease;
}
.cht-tools-hub-card:hover {
  border-color: var(--red, #FD292E);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 34, 0.06);
}
.cht-tools-hub-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-soft, #FFE9E9);
  color: var(--red, #FD292E);
  border-radius: 12px;
  margin-bottom: 4px;
}
.cht-tools-hub-name {
  margin: 0;
  font-size: 16px; font-weight: 700;
  color: var(--ink, #0f1722);
  letter-spacing: -.01em;
}
.cht-tools-hub-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.55;
  flex: 1;
}
.cht-tools-hub-cta {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red, #FD292E);
}

/* Footer CTA card */
.cht-tools-hub-footer { margin-top: 8px; }
.cht-tools-hub-footer-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(180deg, var(--red-soft, #FFE9E9) 0%, #fff 100%);
  border: 1px solid #f1d4d4;
  border-radius: 16px;
}
.cht-tools-hub-footer-card h3 {
  margin: 0 0 6px;
  font-size: 17px; font-weight: 700;
  color: var(--ink, #0f1722);
}
.cht-tools-hub-footer-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-mute, #6b7280);
}
.cht-tools-hub-footer-cta {
  display: inline-flex; align-items: center;
  padding: 12px 22px;
  background: var(--red, #FD292E);
  color: #fff;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s ease;
}
.cht-tools-hub-footer-cta:hover {
  background: #b3262c;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(214, 58, 64, .25);
}
@media (max-width: 640px) {
  .cht-tools-hub-footer-card { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════
   Phase 14X.8.A — Edit account page redesign (4 cards)
   Pattern matching dashboard: rounded-2xl card + border + icon header
   ════════════════════════════════════════════════════════ */

.cht-edit-account-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 32px;
}

/* hide WC default p.form-row legacy spacer */
.cht-edit-account-page > p,
.cht-edit-account-page > div.clear { display: none; }

/* ── Card ── */
.cht-acc-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 22px;
  overflow: hidden;       /* clip hero cover to rounded corners */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cht-acc-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.cht-acc-card__body {
  display: flex; flex-direction: column;
  gap: 16px;
}

/* Simple section title (e.g. "Đổi mật khẩu") — NOT on border like fieldset legend */
.cht-acc-section-title {
  margin: 0 0 16px;
  font-size: 15px; font-weight: 700;
  color: var(--ink, #0f1722);
  letter-spacing: -0.005em;
}

/* ── Field ── */
.cht-acc-field {
  display: flex; flex-direction: column;
  min-width: 0;
}
.cht-acc-field--placeholder { visibility: hidden; }

.cht-acc-field label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--ink, #0f1722);
  margin-bottom: 6px;
}
.cht-acc-field label em {
  color: var(--red, #FD292E);
  font-style: normal;
  font-weight: 700;
}

.cht-acc-field input[type="text"],
.cht-acc-field input[type="tel"],
.cht-acc-field input[type="url"],
.cht-acc-field input[type="email"],
.cht-acc-field input[type="number"],
.cht-acc-field input[type="password"],
.cht-acc-field textarea {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink, #0f1722);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cht-acc-field input::placeholder,
.cht-acc-field textarea::placeholder {
  color: #9ca3af;
}
.cht-acc-field input:hover,
.cht-acc-field textarea:hover {
  border-color: #d1d5db;
}
.cht-acc-field input:focus,
.cht-acc-field textarea:focus {
  outline: none;
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, 0.12);
}
.cht-acc-field textarea {
  height: auto; min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
}
.cht-acc-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
}

/* ── Grid 2-col ── */
.cht-acc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
@media (max-width: 640px) {
  .cht-acc-grid-2 { grid-template-columns: 1fr; }
}

/* ── Verified badge inline label ── */
.cht-acc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
}
.cht-acc-badge--ok {
  background: #d1fae5;
  color: #047857;
}
.cht-acc-badge--warn {
  background: #fef3c7;
  color: #92400e;
}

/* ════════════════════════════════════════════════════════
   HERO (cover banner + avatar overlay + upload buttons)
   Pattern LinkedIn/Twitter profile edit — live preview
   ════════════════════════════════════════════════════════ */
.cht-acc-hero {
  position: relative;
  margin: -22px -22px 18px; /* full-bleed top + sides */
}

/* Cover banner */
.cht-acc-hero__cover {
  width: 100%;
  aspect-ratio: 6 / 1;
  min-height: 120px;
  max-height: 160px;
  background: #f9fafb center / cover no-repeat;
}
.cht-acc-hero__cover.is-empty {
  background:
    radial-gradient(circle at 18% 28%, rgba(214, 58, 64, 0.08), transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(214, 58, 64, 0.06), transparent 42%),
    linear-gradient(135deg, #FFE9E9 0%, #fef7f7 50%, #f8fafc 100%);
}

/* Cover upload button — top-right */
.cht-acc-hero__btn--cover {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: rgba(15, 23, 34, 0.78);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .15s ease;
  z-index: 2;
}
.cht-acc-hero__btn--cover:hover {
  background: rgba(214, 58, 64, 0.92);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-1px);
}

/* Bar BELOW cover — avatar + name + URL */
.cht-acc-hero__bar {
  display: flex; align-items: flex-end; gap: 18px;
  padding: 0 22px 18px;
  margin-top: -52px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

/* Avatar wrap (circle + camera overlay button) */
.cht-acc-hero__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.cht-acc-hero__avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: #f3f4f6 center / cover no-repeat;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Avatar camera button (overlay bottom-right) */
.cht-acc-hero__avatar-btn {
  position: absolute;
  bottom: 0; right: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--red, #FD292E);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(214, 58, 64, 0.35);
  transition: all .15s ease;
}
.cht-acc-hero__avatar-btn:hover {
  background: var(--red-deep, #b3262c);
  transform: scale(1.05);
}

/* Meta beside avatar */
.cht-acc-hero__meta {
  flex: 1; min-width: 0;
  padding-bottom: 6px;
}
.cht-acc-hero__name {
  margin: 0 0 4px;
  font-size: 18px; font-weight: 800;
  color: var(--ink, #0f1722);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cht-acc-hero__url {
  margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
}
.cht-acc-hero__url strong {
  color: var(--red, #FD292E);
  font-weight: 600;
}

/* Avatar remove link */
.cht-acc-hero__avatar-remove {
  background: transparent;
  border: none;
  color: var(--ink-mute, #6b7280);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all .15s ease;
  margin-bottom: 6px;
  font-family: inherit;
}
.cht-acc-hero__avatar-remove:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* Mobile: stack avatar above text */
@media (max-width: 640px) {
  .cht-acc-hero__cover { aspect-ratio: 4 / 1; min-height: 100px; }
  .cht-acc-hero__btn--cover {
    top: 10px; right: 10px;
    padding: 0 10px;
    font-size: 11.5px;
  }
  .cht-acc-hero__bar {
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0 16px 16px;
    margin-top: -44px;
  }
  .cht-acc-hero__avatar { width: 88px; height: 88px; }
  .cht-acc-hero__meta { padding-bottom: 0; }
  .cht-acc-hero__url { font-size: 11.5px; }
}

/* Buttons */
.cht-acc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px; font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  white-space: nowrap;
}
.cht-acc-btn--outline {
  background: #fff;
  border-color: var(--border, #e5e7eb);
  color: var(--ink, #0f1722);
}
.cht-acc-btn--outline:hover {
  background: var(--red-soft, #FFE9E9);
  border-color: var(--red, #FD292E);
  color: var(--red, #FD292E);
}
.cht-acc-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-mute, #6b7280);
}
.cht-acc-btn--ghost:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* ── Save button (standalone, right-aligned) ── */
.cht-acc-save-btn {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 24px;
  margin-top: 4px;
  background: var(--red, #FD292E);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(214, 58, 64, 0.25);
}
.cht-acc-save-btn:hover {
  background: var(--red-deep, #b3262c);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(214, 58, 64, 0.35);
}
.cht-acc-save-btn:active { transform: translateY(0); }
/* Phase 18 — footer chứa nút Lưu BÊN TRONG card (divider tách khỏi field) */
.cht-acc-form-actions { display: flex; justify-content: flex-end; border-top: 1px solid var(--border, #e5e7eb); margin-top: 4px; padding-top: 18px; }
@media (max-width: 640px) {
  .cht-acc-save-btn { align-self: stretch; justify-content: center; }
  .cht-acc-form-actions { justify-content: stretch; padding-top: 16px; }
  .cht-acc-form-actions .cht-acc-save-btn { width: 100%; }
}

/* ─── Sidebar Phase 14X.7 redesign (Urban Hub adapted) ─── */
.woocommerce-MyAccount-navigation {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woocommerce-MyAccount-navigation ul li {
  margin: 0;
  border: 0;
}
.woocommerce-MyAccount-navigation ul li a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ink, #0f1722);
  text-decoration: none;
  transition: background-color .15s, color .15s;
  white-space: nowrap; overflow: hidden;
}

/* Icon — circle pastel bg + brand red, Urban Hub adapt */
.cht-acc-nav-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--red-soft, #FFE9E9);
  color: var(--red, #FD292E);
  border-radius: 10px;
  transition: background-color .15s, color .15s;
}
.cht-acc-nav-label {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis;
  transition: opacity .2s ease;
}

/* Nhãn nhóm sidebar — đồng bộ hub mobile (account-menu.php section title) */
.woocommerce-MyAccount-navigation ul li.cht-acc-nav-group {
  padding: 14px 12px 4px; margin: 0;
  font-size: 12px; font-weight: 700; color: #9ca3af;
  letter-spacing: .03em; list-style: none; pointer-events: none;
}
body.cht-sidebar-collapsed .cht-acc-nav-group { display: none; }

/* Toggle button — Urban Hub style (chip nhỏ top right thay vì full-width bar) */
.cht-acc-nav-toggle {
  align-self: flex-end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  margin: 0 0 8px;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-mute, #6b7280);
  transition: color .15s, background-color .15s, border-color .15s;
}
.cht-acc-nav-toggle:hover {
  color: var(--red, #FD292E);
  background: var(--red-soft, #FFE9E9);
  border-color: var(--red, #FD292E);
}

/* Hover state — bg pale + icon nâng nhẹ */
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--surface-2, #f9fafb);
  color: var(--ink, #0f1722);
}
.woocommerce-MyAccount-navigation ul li a:hover .cht-acc-nav-icon {
  background: var(--red, #FD292E);
  color: #fff;
}

/* Active state — bg brand soft + label brand red + icon brand red bg white */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
  background: var(--red-soft, #FFE9E9);
  color: var(--red, #FD292E);
  font-weight: 600;
}
.woocommerce-MyAccount-navigation ul li.is-active a .cht-acc-nav-icon,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a .cht-acc-nav-icon {
  background: var(--red, #FD292E);
  color: #fff;
}

/* Help & Support pill button bottom */
.cht-acc-nav-help {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  font-size: 14.5px; font-weight: 500;
  color: var(--ink, #0f1722);
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.cht-acc-nav-help:hover {
  background: var(--red-soft, #FFE9E9);
  border-color: var(--red, #FD292E);
  color: var(--red, #FD292E);
}
.cht-acc-nav-help:hover .cht-acc-nav-icon {
  background: var(--red, #FD292E);
  color: #fff;
}

/* Collapsed state — label hidden, icon center, tooltip on hover */
body.cht-sidebar-collapsed .woocommerce-MyAccount-navigation {
  padding: 8px;
  overflow: visible;
}
body.cht-sidebar-collapsed .cht-acc-nav-toggle {
  align-self: center;
}
body.cht-sidebar-collapsed .woocommerce-MyAccount-navigation ul li {
  position: relative;
}
body.cht-sidebar-collapsed .cht-acc-nav-label {
  position: absolute;
  left: -9999px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
body.cht-sidebar-collapsed .woocommerce-MyAccount-navigation ul li a,
body.cht-sidebar-collapsed .cht-acc-nav-help {
  padding: 6px;
  justify-content: center;
  gap: 0;
}
body.cht-sidebar-collapsed .cht-acc-nav-help {
  padding: 6px;
}
body.cht-sidebar-collapsed .woocommerce-MyAccount-navigation ul { overflow: hidden; }

/* Tooltip-like label trên hover khi collapsed */
body.cht-sidebar-collapsed .woocommerce-MyAccount-navigation ul li a:hover .cht-acc-nav-label,
body.cht-sidebar-collapsed .cht-acc-nav-help:hover .cht-acc-nav-label {
  left: calc(100% + 12px);
  opacity: 1;
  background: var(--ink, #0f1722);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 14px);
  padding: 32px;
  min-width: 0;
}
/* Phase 18 — Trang dùng card riêng (cht-*: hồ sơ, ví, lịch sử, tin đăng…) → cột nội dung TRONG SUỐT
   để tránh "border lồng border" (khung trắng ngoài + card có viền bên trong).
   Trang WC mặc định (Bảng điều khiển / Đơn hàng / Địa chỉ — không có .cht-*) GIỮ khung trắng. */
.woocommerce-MyAccount-content:has(> [class*="cht-"]) {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--font-display, inherit);
  font-size: 22px; font-weight: 700;
  margin: 0 0 16px;
}

/* WC notices in account view */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  list-style: none;
}
.woocommerce-account .woocommerce-message {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  color: #15803d;
}
.woocommerce-account .woocommerce-info {
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--ink, #0f1722);
}
.woocommerce-account .woocommerce-error {
  background: var(--red-soft, #FFE9E9);
  border: 1px solid var(--red, #FD292E);
  color: var(--red-deep, #b8323a);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .woocommerce-account .col2-set,
  .woocommerce-account #customer_login,
  body.woocommerce-account.logged-in .woocommerce {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 640px) {
  .woocommerce-account .container,
  body.woocommerce-account .site-main,
  .woocommerce-account.page .entry-content {
    padding: 24px 16px 60px;
  }
  .woocommerce-account .entry-title,
  .woocommerce-account .page-title {
    font-size: 26px;
    margin-bottom: 24px;
  }
  .woocommerce-form-login,
  .woocommerce-form-register,
  .woocommerce-MyAccount-content {
    padding: 20px;
  }
}

/* ──────────────────────────────────────────────────────────────
   Auth Modal — Phase 9.39 (login/register popup split layout)
   ────────────────────────────────────────────────────────────── */

.cht-auth-modal {
  /* Phase 11K.5 — follow visualViewport offsetTop + height */
  position: fixed;
  top: var(--vh-offset-top, 0); left: 0; right: 0;
  height: var(--vh-visible, 100dvh);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  overflow-y: auto;  /* fallback: nếu shell > viewport, container scroll được */
}
.cht-auth-modal[hidden] { display: none !important; }
.cht-auth-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,34,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: chtAuthFade .25s ease;
}
@keyframes chtAuthFade { from { opacity: 0; } to { opacity: 1; } }

.cht-auth-modal__shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 960px;
  /* Phase 11K.2 — visible viewport (JS-set --vh-visible) primary, dvh fallback */
  max-height: calc(var(--vh-visible, 100dvh) - 24px);
  background: var(--surface, #fff);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(15,23,34,0.4);
  overflow: hidden;
  animation: chtAuthRise .3s cubic-bezier(.16,.84,.44,1);
}
@keyframes chtAuthRise {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cht-auth-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 50%;
  color: var(--ink, #0f1722);
  cursor: pointer;
  z-index: 2;
  transition: background-color .15s, transform .15s;
}
.cht-auth-modal__close:hover { background: #fff; transform: scale(1.05); }

/* ── LEFT marketing panel ─── */
.cht-auth-modal__marketing {
  position: relative;
  padding: 40px 36px;
  background: linear-gradient(135deg, #FFE9E9 0%, #faf5f1 100%);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cht-auth-modal__marketing-content { position: relative; z-index: 2; }
.cht-auth-modal__marketing-bg {
  position: absolute;
  bottom: -20px; left: -20px; right: -20px;
  height: 45%;
  background-image: url('https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&w=800');
  background-size: cover; background-position: center;
  opacity: .55;
  mask-image: linear-gradient(to top, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%);
}

.cht-auth-modal__welcome {
  font-family: var(--font-display, inherit);
  font-size: 30px; font-weight: 700;
  color: var(--ink, #0f1722);
  line-height: 1.15;
  margin: 0 0 12px;
}
.cht-auth-modal[data-cht-mode="login"]    [data-cht-welcome-register],
.cht-auth-modal[data-cht-mode="login"]    [data-cht-sub-register] { display: none; }
.cht-auth-modal[data-cht-mode="register"] [data-cht-welcome-login],
.cht-auth-modal[data-cht-mode="register"] [data-cht-sub-login]    { display: none; }

.cht-auth-modal__sub {
  font-size: 14.5px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.55;
  margin: 0 0 28px;
}

.cht-auth-modal__features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.cht-auth-modal__features li {
  display: flex; gap: 14px;
  align-items: flex-start;
}
.cht-auth-feat__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-soft, #FFE9E9);
  color: var(--red, #FD292E);
  border-radius: 10px;
}
.cht-auth-modal__features strong {
  display: block;
  font-size: 14.5px; font-weight: 600;
  color: var(--ink, #0f1722);
  margin-bottom: 2px;
}
.cht-auth-modal__features p {
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  margin: 0;
  line-height: 1.5;
}

/* ── RIGHT form panel ─── */
.cht-auth-modal__form {
  padding: 40px 40px 28px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.cht-auth-modal__pane { display: none; }
.cht-auth-modal[data-cht-mode="login"]    [data-cht-mode-content="login"]    { display: block; }
.cht-auth-modal[data-cht-mode="register"] [data-cht-mode-content="register"] { display: block; }
.cht-auth-modal[data-cht-mode="otp"]      [data-cht-mode-content="otp"]      { display: block; }
/* Phase 11I — Forgot password pane */
.cht-auth-modal[data-cht-mode="forgot"]   [data-cht-mode-content="forgot"]   { display: block; }
.cht-auth-modal[data-cht-mode="forgot"]   [data-cht-welcome-register],
.cht-auth-modal[data-cht-mode="forgot"]   [data-cht-sub-register] { display: none; }
.cht-forgot-step[hidden] { display: none; }

/* Phase 11I — Hide marketing panel + narrow shell cho forgot mode (focused single-column) */
.cht-auth-modal[data-cht-mode="forgot"] .cht-auth-modal__marketing {
  display: none;
}
.cht-auth-modal[data-cht-mode="forgot"] .cht-auth-modal__shell {
  grid-template-columns: 1fr;
  max-width: 520px;
}
.cht-auth-modal[data-cht-mode="forgot"] .cht-auth-modal__form {
  padding: 48px 40px 32px;
}

/* Phase 11I — Premium floating label input (Stripe/Linear style) */
.cht-auth-field--float .cht-auth-input { position: relative; }

/* Bump specificity vượt rule .cht-auth-modal input[type=...] (0,2,1) */
.cht-auth-modal .cht-auth-field--float input[type="tel"],
.cht-auth-modal .cht-auth-field--float input[type="password"],
.cht-auth-modal .cht-auth-field--float input[type="text"],
.cht-auth-modal .cht-auth-field--float input[type="email"] {
  height: 60px;
  padding: 22px 44px 6px 44px;
  background: #f9fafb;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.cht-auth-modal .cht-auth-field--float input:hover {
  background: #f3f4f6;
}
.cht-auth-modal .cht-auth-field--float input:focus {
  background: #fff;
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214,58,64,0.14);
}

/* Floating label */
.cht-auth-field--float label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-mute, #6b7280);
  pointer-events: none;
  transition: top .18s cubic-bezier(.4,0,.2,1),
              font-size .18s cubic-bezier(.4,0,.2,1),
              color .18s,
              font-weight .18s;
  margin: 0;
  background: transparent;
}
.cht-auth-field--float input:focus ~ label,
.cht-auth-field--float input:not(:placeholder-shown) ~ label {
  top: 11px;
  transform: translateY(0);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--red, #FD292E);
  letter-spacing: 0.02em;
}

/* Icon color match focus (via :has() — sibling icon before input) */
.cht-auth-field--float .cht-auth-input:has(input:focus) .cht-auth-input__icon {
  color: var(--red, #FD292E);
}

/* Floating label adjust khi input có icon eye toggle bên phải */
.cht-auth-field--float .cht-auth-input--pw input { padding-right: 48px; }

/* Trust microcopy line dưới input */
.cht-auth-trust-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 2px 18px;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.4;
}
.cht-auth-trust-line svg {
  flex-shrink: 0;
  color: #10b981;
}

/* Premium submit button với arrow icon */
.cht-auth-submit--arrow {
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
}
.cht-auth-submit--arrow svg {
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.cht-auth-submit--arrow:hover svg {
  transform: translateX(3px);
}
.cht-auth-submit--arrow:disabled svg {
  transform: none;
}
/* Error box (login modal) — Phase 15.5: styled VN thay tooltip native xấu của trình duyệt */
.cht-auth-modal__error {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: #FEF2F2;
  border-left: 3px solid var(--red, #FD292E);
  border-radius: 8px;
  color: #B91C1C;
  font-size: 13px;
  line-height: 1.45;
}
.cht-auth-modal__error[hidden] { display: none; }

/* Success variant cho login error wrapper (hiển thị message sau reset password thành công) */
.cht-auth-modal__error.is-success {
  background: #ECFDF5;
  color: #047857;
  border-left: 3px solid #10B981;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.cht-auth-modal__title {
  font-family: var(--font-display, inherit);
  font-size: 26px; font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink, #0f1722);
}
.cht-auth-modal__subtitle {
  font-size: 14px;
  color: var(--ink-mute, #6b7280);
  margin: 0 0 22px;
}

.cht-auth-modal__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 18px;
}
.cht-auth-tab {
  background: transparent; border: 0;
  padding: 12px 0;
  font: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--ink-mute, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.cht-auth-tab.is-active {
  color: var(--red, #FD292E);
  border-bottom-color: var(--red, #FD292E);
  font-weight: 600;
}

.cht-auth-form { display: flex; flex-direction: column; gap: 14px; }

.cht-auth-field { display: flex; flex-direction: column; gap: 6px; }
.cht-auth-field label {
  font-size: 13.5px; font-weight: 600;
  color: var(--ink, #0f1722);
}
/* Phase 18 — Role selector "Bạn là" (Môi giới / Chính chủ) — dùng ở modal Đăng ký + form Hồ sơ */
.cht-auth-role { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Phase 18 — Profile desktop: 2 card vai trò ÔM nội dung + nhóm bên trái (tránh dàn rộng 2 đầu nhìn rời rạc).
   Modal (.cht-auth-modal) giữ 1fr 1fr fill pane; mobile (≤640) giữ 1fr 1fr fill width. */
@media (min-width: 641px) {
  .cht-acc-card .cht-auth-role { grid-template-columns: auto auto; justify-content: start; }
  .cht-acc-card .cht-auth-role__card { min-width: 150px; }
}
.cht-auth-role__opt { position: relative; display: block; cursor: pointer; }
.cht-auth-role__opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cht-auth-role__card {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px; min-height: 44px;
  border: 1.5px solid var(--border, #e5e7eb); border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--ink, #0f1722);
  background: var(--surface, #fff);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cht-auth-role__card svg { color: var(--ink-mute, #6b7280); flex-shrink: 0; transition: color .15s ease; }
.cht-auth-role__opt:hover .cht-auth-role__card { border-color: var(--border-strong, #d1d5db); }
.cht-auth-role__opt input:checked + .cht-auth-role__card {
  border-color: var(--red, #FD292E); background: var(--red-soft, #FFE9E9); color: var(--red, #FD292E);
}
.cht-auth-role__opt input:checked + .cht-auth-role__card svg { color: var(--red, #FD292E); }
.cht-auth-role__opt input:focus-visible + .cht-auth-role__card { outline: 2px solid var(--red, #FD292E); outline-offset: 2px; }
/* Phase 18 — mobile: card "Bạn là" cao thoáng hơn (tap target tốt + cân với field), icon rõ */
@media (max-width: 640px) {
  .cht-auth-role { gap: 12px; }
  .cht-auth-role__card { min-height: 52px; padding: 13px 14px; font-size: 14.5px; border-radius: 14px; }
  .cht-auth-role__card svg { width: 20px; height: 20px; }
}
.cht-auth-modal input[type="text"],
.cht-auth-modal input[type="email"],
.cht-auth-modal input[type="tel"],
.cht-auth-modal input[type="password"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 10px;
  font: inherit; font-size: 14.5px;
  color: var(--ink, #0f1722);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.cht-auth-modal input:focus {
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214,58,64,0.12);
}

/* Input wrap với icon trái — pattern user/mail/lock/phone
   Bump specificity via .cht-auth-modal prefix để thắng .cht-auth-modal input[type] (0,2,1) */
.cht-auth-input { position: relative; }
.cht-auth-modal .cht-auth-input--icon input { padding-left: 44px; }
.cht-auth-input__icon {
  position: absolute;
  top: 50%; left: 14px;
  transform: translateY(-50%);
  color: var(--ink-mute, #6b7280);
  pointer-events: none;
  display: inline-flex; align-items: center;
  z-index: 1;
}

/* Password eye toggle (right side) */
.cht-auth-modal .cht-auth-input--pw input { padding-right: 44px; }
.cht-auth-eye {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--ink-mute, #6b7280);
  cursor: pointer;
}
.cht-auth-eye:hover { color: var(--ink, #0f1722); }

/* Legacy class compatibility (login pane password used .cht-auth-pw initially) */
.cht-auth-pw { position: relative; }
.cht-auth-pw input { padding-right: 44px; }

.cht-auth-row-between {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2px;
}
.cht-auth-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px;
  color: var(--ink, #0f1722);
  cursor: pointer;
}
.cht-auth-checkbox input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--red, #FD292E);
  cursor: pointer;
}
.cht-auth-link {
  background: transparent; border: 0; padding: 0;
  color: var(--red, #FD292E);
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.cht-auth-link:hover { text-decoration: underline; }
.cht-auth-link--bold { font-weight: 700; }

.cht-auth-submit {
  height: 46px;
  background: var(--red, #FD292E);
  color: #fff;
  border: 1px solid var(--red, #FD292E);
  border-radius: 10px;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.cht-auth-submit:hover {
  background: var(--red-deep, #D22226);
  box-shadow: 0 6px 16px -6px rgba(214,58,64,.5);
  transform: translateY(-1px);
}

.cht-auth-divider {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--ink-mute, #6b7280);
  margin: 8px 0;
  text-align: center;
}
.cht-auth-divider::before,
.cht-auth-divider::after {
  content: ''; flex: 1;
  border-top: 1px solid var(--border, #e5e7eb);
}

.cht-auth-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cht-auth-social {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink, #0f1722);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.cht-auth-social:hover { border-color: var(--ink, #0f1722); background: var(--surface-2, #f9fafb); }

.cht-auth-modal__switch {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-mute, #6b7280);
  text-align: center;
}
.cht-auth-modal__terms {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
  text-align: center;
  line-height: 1.5;
}
.cht-auth-modal__terms a {
  color: var(--red, #FD292E);
  text-decoration: none;
}
.cht-auth-modal__terms a:hover { text-decoration: underline; }

/* WC error messages inside modal */
.cht-auth-modal .woocommerce-error,
.cht-auth-modal .woocommerce-message,
.cht-auth-modal .woocommerce-info {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  list-style: none; margin: 0 0 12px;
}
.cht-auth-modal .woocommerce-error {
  background: var(--red-soft, #FFE9E9);
  border: 1px solid var(--red, #FD292E);
  color: var(--red-deep, #D22226);
}

/* Hide WC default elements ăn flex gap thừa trong form:
   - .woocommerce-privacy-policy-text wrapper (em đã empty text qua filter)
   - <wc-order-attribution-inputs> hidden element vẫn chiếm flex gap row */
.cht-auth-modal .woocommerce-privacy-policy-text,
.cht-auth-modal wc-order-attribution-inputs {
  display: none !important;
}

/* ───── Compact mode cho laptop 14"/15" — viewport height ≤ 850px ─────
   Fix bug: text bị cắt dưới do content (4 fields + checkbox + button) tràn
   viewport. Giảm font/padding/gap → vừa 720-820px. */
@media (max-height: 850px) {
  .cht-auth-modal { padding: 8px; }
  .cht-auth-modal__shell { max-height: calc(100dvh - 16px); }

  /* LEFT marketing — compact */
  .cht-auth-modal__marketing { padding: 24px 28px; }
  .cht-auth-modal__welcome { font-size: 22px; margin-bottom: 8px; }
  .cht-auth-modal__sub { font-size: 13px; margin-bottom: 18px; }
  .cht-auth-modal__features { gap: 12px; }
  .cht-auth-feat__icon { width: 32px; height: 32px; border-radius: 8px; }
  .cht-auth-feat__icon svg { width: 16px; height: 16px; }
  .cht-auth-modal__features strong { font-size: 13.5px; }
  .cht-auth-modal__features p { font-size: 12px; line-height: 1.4; }
  .cht-auth-modal__marketing-bg { height: 32%; opacity: .35; }

  /* RIGHT form — compact */
  .cht-auth-modal__form { padding: 24px 28px 20px; }
  .cht-auth-modal__title { font-size: 20px; margin-bottom: 4px; }
  .cht-auth-modal__subtitle { font-size: 13px; margin-bottom: 16px; }
  .cht-auth-form { gap: 10px; }
  .cht-auth-field { gap: 4px; }
  .cht-auth-field label { font-size: 13px; }
  .cht-auth-modal input[type="text"],
  .cht-auth-modal input[type="email"],
  .cht-auth-modal input[type="tel"],
  .cht-auth-modal input[type="password"] {
    height: 40px;
    font-size: 14px;
  }
  .cht-auth-submit { height: 42px; font-size: 14px; }
  .cht-auth-agree { font-size: 12.5px; }
  .cht-auth-divider { margin: 4px 0; font-size: 12px; }
  .cht-auth-socials { gap: 8px; }
  .cht-auth-social { height: 40px; font-size: 13px; }

  /* OTP pane — compact */
  .cht-auth-modal__icon { width: 56px; height: 56px; margin-bottom: 10px; }
  .cht-auth-modal__icon svg { width: 26px; height: 26px; }
  .cht-auth-otp__boxes { gap: 6px; }
  .cht-auth-modal .cht-auth-otp__boxes input { width: 44px; height: 44px; font-size: 18px; }
  .cht-auth-otp__timer { font-size: 12px; margin-bottom: 10px; }
}

/* Ultra-short viewport (zoom 150% trên 1080p) */
@media (max-height: 720px) {
  .cht-auth-modal__features { gap: 8px; }
  .cht-auth-modal__features li:nth-child(3) { display: none; } /* hide 3rd feature */
  .cht-auth-modal__marketing-bg { display: none; }
  .cht-auth-modal__form { padding: 20px 24px 16px; }
}

/* ── Password strength meter (đăng ký) — Option A Google/Apple style ── */
.cht-auth-pw-strength {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cht-auth-pw-strength[hidden] { display: none; }

.cht-pw-bar {
  width: 100%;
  height: 4px;
  background: var(--surface-2, #f1f3f5);
  border-radius: 999px;
  overflow: hidden;
}
.cht-pw-bar__fill {
  height: 100%;
  width: 0;
  background: var(--ink-mute, #9ca3af);
  border-radius: 999px;
  transition: width 0.25s cubic-bezier(.4,.0,.2,1),
              background-color 0.2s ease;
}

.cht-pw-hint {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-mute, #6b7280);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.cht-pw-label {
  font-weight: 600;
  font-size: 12.5px;
}
.cht-pw-missing {
  color: var(--ink-mute, #6b7280);
}
.cht-pw-missing:not(:empty)::before {
  content: '· ';
  color: var(--border-strong, #d1d5db);
  margin-right: 2px;
}

/* Strength levels — color cascade red → amber → emerald */
.cht-auth-pw-strength.is-weak   .cht-pw-bar__fill { background: #DC2626; }
.cht-auth-pw-strength.is-weak   .cht-pw-label     { color: #DC2626; }

.cht-auth-pw-strength.is-medium .cht-pw-bar__fill { background: #F59E0B; }
.cht-auth-pw-strength.is-medium .cht-pw-label     { color: #B45309; }

.cht-auth-pw-strength.is-good   .cht-pw-bar__fill { background: #3B82F6; }
.cht-auth-pw-strength.is-good   .cht-pw-label     { color: #1D4ED8; }

.cht-auth-pw-strength.is-strong .cht-pw-bar__fill { background: #16A34A; }
.cht-auth-pw-strength.is-strong .cht-pw-label     { color: #15803D; }

/* ── Confirm password match indicator (cùng pattern Option A) ── */
.cht-auth-pw-match {
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cht-auth-pw-match[hidden] { display: none; }

.cht-pw-match__icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  position: relative;
}
.cht-pw-match__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px 9px;
}

.cht-auth-pw-match.is-match {
  color: #16A34A;
}
.cht-auth-pw-match.is-match .cht-pw-match__icon::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
}

.cht-auth-pw-match.is-mismatch {
  color: #DC2626;
}
.cht-auth-pw-match.is-mismatch .cht-pw-match__icon::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>');
}

/* ── Multi-step register flow (Phase 11D) ── */
.cht-reg-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  max-width: 200px;
}
.cht-reg-step-dot {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong, #d1d5db);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-mute, #6b7280);
  transition: all 0.2s ease;
}
.cht-reg-step-dot span { line-height: 1; }
.cht-reg-step-line {
  flex: 1;
  height: 2px;
  background: var(--border, #e5e7eb);
  border-radius: 1px;
  transition: background 0.2s ease;
}
.cht-reg-step-dot.is-active {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(214,58,64,0.15);
}
.cht-reg-step-dot.is-done {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
  color: transparent;
  position: relative;
}
.cht-reg-step-dot.is-done::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / 14px no-repeat;
}
.cht-reg-stepper:has(.cht-reg-step-dot[data-step="2"].is-active) .cht-reg-step-line,
.cht-reg-stepper:has(.cht-reg-step-dot.is-done) .cht-reg-step-line {
  background: var(--red, #FD292E);
}

/* Step container — animate slide */
.cht-reg-step { display: flex; flex-direction: column; gap: 14px; }
.cht-reg-step[hidden] { display: none; }

/* Back link in step 2 */
.cht-auth-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 0;
  margin: -4px 0 -4px -6px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.cht-auth-back:hover {
  color: var(--ink, #0f1722);
  background: var(--surface-2, #f9fafb);
}
.cht-auth-back svg { transform: rotate(90deg); width: 14px; height: 14px; }

/* Inline step error (replace alert popup) */
.cht-auth-step-error {
  margin: 0;
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  color: #B91C1C;
  font-size: 13px;
  line-height: 1.45;
}
.cht-auth-step-error[hidden] { display: none; }

/* Hint dưới input */
.cht-auth-field-hint {
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.4;
}

/* Agreement checkbox (register) */
.cht-auth-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ink, #0f1722);
  line-height: 1.5;
  cursor: pointer;
}
.cht-auth-agree input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--red, #FD292E);
  cursor: pointer;
  margin-top: 1px;
  flex-shrink: 0;
}
.cht-auth-agree a {
  color: var(--red, #FD292E);
  font-weight: 600;
  text-decoration: none;
}
.cht-auth-agree a:hover { text-decoration: underline; }

/* Trust badge (register pane bottom) */
.cht-auth-modal__trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
}
.cht-auth-modal__trust svg { color: #10b981; }

/* OTP pane — Phase 9.42 */
.cht-auth-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  padding: 0; margin-bottom: 16px;
  font: inherit; font-size: 14px;
  color: var(--ink-mute, #6b7280);
  cursor: pointer;
}
.cht-auth-back:hover { color: var(--red, #FD292E); }
.cht-auth-otp__head { text-align: center; }
.cht-auth-otp__shield {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--red-soft, #FFE9E9);
  color: var(--red, #FD292E);
  border-radius: 50%;
  margin: 4px auto 14px;
}
.cht-auth-otp__phone {
  font-size: 14px;
  margin: 4px 0 0;
}
.cht-auth-otp__phone strong { color: var(--ink, #0f1722); }
.cht-auth-otp__label {
  font-size: 12px; font-weight: 600;
  color: var(--ink, #0f1722);
  margin: 22px 0 10px;
  text-align: center;
}
.cht-auth-otp__boxes {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 16px;
}
.cht-auth-modal .cht-auth-otp__boxes input {
  width: 48px; height: 48px;
  padding: 0;
  text-align: center;
  font: inherit; font-size: 22px; font-weight: 700;
  background: #fff;
  border: 2px solid var(--border-strong, #d1d5db);
  border-radius: 10px;
  outline: none;
  transition: all .15s;
  -moz-appearance: textfield;
  box-sizing: border-box;
}
.cht-auth-otp__boxes input::-webkit-outer-spin-button,
.cht-auth-otp__boxes input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cht-auth-otp__boxes input:focus {
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214,58,64,0.12);
}
.cht-auth-otp__boxes input:not(:placeholder-shown):not(:empty),
.cht-auth-otp__boxes input.is-filled {
  border-color: var(--red, #FD292E);
  background: var(--red-soft, #FFE9E9);
  color: var(--red-deep, #D22226);
}
.cht-auth-otp__timer {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
  margin: 0 0 14px;
}
.cht-auth-otp__timer strong { color: var(--red, #FD292E); font-weight: 700; }

/* Status indicator (replace nút Xác nhận — auto-verify khi đủ 6 số) */
.cht-auth-otp__status {
  margin: 16px 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cht-auth-otp__status.is-loading {
  background: var(--surface-2, #f9fafb);
  color: var(--ink, #1f2937);
  border: 1px solid var(--border, #e5e7eb);
}
.cht-auth-otp__status.is-loading::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: chtOtpSpin 0.7s linear infinite;
}
.cht-auth-otp__status.is-success {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}
@keyframes chtOtpSpin { to { transform: rotate(360deg); } }

.cht-auth-otp__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 12px;
  font-size: 11.5px;
  color: var(--ink-mute, #6b7280);
}
.cht-auth-otp__divider::before,
.cht-auth-otp__divider::after {
  content: ''; flex: 1;
  border-top: 1px solid var(--border, #e5e7eb);
}
.cht-auth-otp__resend {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  height: 44px;
  background: var(--red-soft, #FFE9E9);
  border: 1px solid rgba(214,58,64,0.3);
  border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--red, #FD292E);
  cursor: pointer;
  transition: background-color .15s;
}
.cht-auth-otp__resend:hover:not(:disabled) { background: #f8d8d8; }
.cht-auth-otp__resend:disabled {
  background: var(--surface-2, #f9fafb);
  color: var(--ink-mute, #6b7280);
  border-color: var(--border, #e5e7eb);
  cursor: not-allowed;
}
.cht-auth-otp__error {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--red-soft, #FFE9E9);
  border: 1px solid var(--red, #FD292E);
  border-radius: 8px;
  color: var(--red-deep, #D22226);
  font-size: 13.5px;
  text-align: center;
}
.cht-auth-submit:disabled {
  background: var(--ink-mute, #6b7280) !important;
  border-color: var(--ink-mute, #6b7280) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Body lock scroll khi modal mở */
body.cht-auth-modal-open { overflow: hidden; }

/* ── Page empty state (notifications, no results) — Phase 9.45 ─── */
.cht-empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
}
.cht-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  background: var(--surface-2, #f9fafb);
  color: var(--ink-mute, #6b7280);
  border-radius: 50%;
  margin: 0 auto 20px;
}
.cht-empty h2 {
  font-family: var(--font-display, inherit);
  font-size: 20px; font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 8px;
}
.cht-empty p {
  font-size: 14.5px;
  color: var(--ink-mute, #6b7280);
  margin: 0 0 20px;
}

/* ──────────────────────────────────────────────────────────────
   Header logged-in icon buttons + avatar — Phase 9.44
   ────────────────────────────────────────────────────────────── */
.hdr-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--ink, #0f1722);
  text-decoration: none;
  transition: background-color .15s;
}
.hdr-icon-btn:hover { background: var(--surface-2, #f4f5f7); }
.hdr-badge {
  position: absolute;
  top: 0; right: 0;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--red, #FD292E);
  color: #fff;
  font-size: 11px; font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  border: 2px solid var(--bg, #fff);
  box-sizing: content-box;
}

.hdr-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--red-soft, #FFE9E9);
  color: var(--red-deep, #D22226);
  border-radius: 50%;
  font: inherit; font-weight: 700; font-size: 15px;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .15s;
}
.hdr-avatar:hover { transform: scale(1.05); }
.hdr-avatar span { line-height: 1; }

/* Outline button (Đăng tin logged-in) */
.btn.btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong, #d1d5db);
  color: var(--ink, #0f1722);
}
.btn.btn-outline:hover {
  border-color: var(--ink, #0f1722);
  background: var(--surface-2, #f9fafb);
}

/* ──────────────────────────────────────────────────────────────
   Account Dashboard cards — Phase 9.43
   ────────────────────────────────────────────────────────────── */
.cht-account-dashboard { display: flex; flex-direction: column; gap: 24px; }

.cht-account-welcome h2 {
  font-family: var(--font-display, inherit);
  font-size: 24px; font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 6px;
}
.cht-account-welcome p {
  font-size: 14.5px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.55;
  margin: 0;
}

.cht-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cht-stat-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink, #0f1722);
  transition: all .15s;
}
.cht-stat-card:hover {
  border-color: var(--red, #FD292E);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(214,58,64,0.18);
}
.cht-stat-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
}
.cht-stat-icon--red    { background: var(--red-soft, #FFE9E9); color: var(--red, #FD292E); }
.cht-stat-icon--pink   { background: #fef2f4; color: #ec4899; }
.cht-stat-icon--brand  { background: #fff7ed; color: #f59e0b; }
.cht-stat-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cht-stat-meta strong {
  font-size: 22px; font-weight: 700;
  color: var(--ink, #0f1722);
  line-height: 1.1;
}
.cht-stat-meta span {
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
}

.cht-account-quick {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.cht-account-recent {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 20px 24px;
}
.cht-account-recent h3 {
  font-size: 16px; font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink, #0f1722);
}
.cht-account-recent-empty {
  margin: 0; color: var(--ink-mute, #6b7280); font-size: 14px;
}
.cht-account-recent-empty a { color: var(--red, #FD292E); text-decoration: none; }
.cht-account-recent-empty a:hover { text-decoration: underline; }
.cht-account-recent-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.cht-account-recent-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 14px;
}
.cht-account-recent-list li:last-child { border-bottom: 0; }
.cht-recent-title {
  color: var(--ink, #0f1722);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cht-recent-title:hover { color: var(--red, #FD292E); }
.cht-recent-status {
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.cht-recent-status--ok      { background: rgba(34,197,94,0.1); color: #15803d; }
.cht-recent-status--warn    { background: rgba(245,158,11,0.1); color: #b45309; }
.cht-recent-status--mute    { background: var(--surface-2, #f9fafb); color: var(--ink-mute, #6b7280); }
.cht-recent-status--danger  { background: var(--red-soft, #FFE9E9); color: var(--red-deep, #D22226); }
.cht-recent-time {
  color: var(--ink-mute, #6b7280); font-size: 12.5px;
  white-space: nowrap;
}

/* Section heading (Tin đăng / Tin đã lưu / Tìm kiếm đã lưu / Ví) */
.cht-account-section { display: flex; flex-direction: column; gap: 18px; }
.cht-account-section h2 {
  font-family: var(--font-display, inherit);
  font-size: 22px; font-weight: 700;
  margin: 0;
  color: var(--ink, #0f1722);
}

/* ── Tin đăng quản lý v2 — Phase 10G ─── */
.cht-listings-v2 { display: flex; flex-direction: column; gap: 16px; }
.cht-listings-toolbar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.cht-listings-title {
  font-family: var(--font-display, inherit);
  font-size: 22px; font-weight: 700;
  margin: 0 8px 0 0;
}
.cht-listings-search {
  position: relative; flex: 1; min-width: 200px;
}
.cht-listings-search svg {
  position: absolute; top: 50%; left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.cht-listings-search input {
  width: 100%; height: 44px;
  padding: 0 14px 0 42px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  font: inherit; font-size: 14.5px;
  outline: none;
}
.cht-listings-search input:focus { border-color: var(--ink); }
.cht-listings-filter-btn,
.cht-listings-excel-btn,
.cht-sort-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink, #0f1722);
  cursor: pointer;
  transition: all .15s;
}
.cht-listings-filter-btn:hover,
.cht-listings-excel-btn:hover,
.cht-sort-btn:hover { border-color: var(--ink); }

/* 9 pills rounded */
.cht-listings-pills {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.cht-pill {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink-mute, #6b7280);
  text-decoration: none;
  transition: all .15s;
}
.cht-pill:hover { border-color: var(--ink); color: var(--ink); }
.cht-pill.is-active {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
  color: #fff;
}
/* Phase 14X.9 — Mobile: tabs lọc tin thành thanh CUỘN NGANG 1 hàng (thay wrap nhiều hàng) */
@media (max-width: 640px) {
  .cht-listings-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cht-listings-pills::-webkit-scrollbar { display: none; }
  .cht-listings-pills .cht-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }
}

.cht-listings-bulkbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--surface-2, #f9fafb);
  border-radius: 10px;
}
.cht-bulk-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.cht-bulk-all input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════
   Card v3 — Phase 10G 3-zone horizontal layout
   LEFT (480-560px) | DIVIDER (1px) | MIDDLE (flex-grow) | RIGHT (320-390px)
   ═══════════════════════════════════════════════════════════════════════ */
.cht-listings-list-v2 {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.cht-card2 {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: 32px;
  align-items: stretch;
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  overflow: visible; /* cho dropdown ⋯ thoát ra */
  transition: box-shadow .15s, border-color .15s;
}
.cht-card2:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  border-color: rgba(0,0,0,.12);
}

/* ─── LEFT zone: thumb + info + meta + ⋯ ─── */
.cht-card-left {
  grid-column: 1;
  position: relative;
  min-width: 0;
  padding-right: 0; /* content trải sát phải; nút ⋯ nằm dưới meta nên không cần chừa lề */
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start; /* dồn nội dung lên trên, bỏ khoảng trống giữa */
}
.cht-card-left__top {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
}
.cht-card-thumb {
  width: 180px;
  height: 120px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
  flex-shrink: 0;
}
.cht-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cht-card-thumb__tier {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  background: #14b8a6;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 5px;
  z-index: 2;
}
/* Phase 12 — VIP tier gradient match listing card badges */
.cht-card-thumb__tier--diamond { background: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #be185d 100%); }
.cht-card-thumb__tier--gold    { background: linear-gradient(135deg, #facc15 0%, #eab308 50%, #ca8a04 100%); color: #422006; }
.cht-card-thumb__tier--silver  { background: linear-gradient(135deg, #94a3b8 0%, #64748b 50%, #475569 100%); }
.cht-card-thumb__check {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
/* Phase 18 — bỏ nền trắng + bo + shadow, chỉ còn Ô VUÔNG checkbox. Size 16px ĐỒNG BỘ với bulkbar
   (.cht-bulk-all input). Giữ drop-shadow nhẹ vì nằm trên ảnh (bulkbar nằm trên nền xám nên không cần). */
.cht-card-thumb__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--red); cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }

.cht-card-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cht-card-info__status {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 5px;
  align-self: flex-start;
  line-height: 1.2;
}
.cht-card-info__status--ok      { background: #059669; color: #fff; }
.cht-card-info__status--warn    { background: #f59e0b; color: #fff; }
.cht-card-info__status--danger  { background: #ef4444; color: #fff; }
.cht-card-info__status--mute    { background: #f3f4f6; color: #6b7280; }
.cht-card2 .cht-card-info__title,
.cht-listings-v2 h3.cht-card-info__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #111827;
  margin: 2px 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cht-card-info__title a { color: inherit; text-decoration: none; }
.cht-card-info__title a:hover { color: var(--red); }
.cht-card-info__cat {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cht-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cht-card-meta__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cht-card-meta__item .label { font-size: 13px; color: #6b7280; line-height: 1.2; }
.cht-card-meta__item .value { font-size: 14.5px; font-weight: 600; color: #111827; line-height: 1.3; }
.cht-card-meta__item .countdown { color: #dc2626; font-size: 12.5px; font-weight: 600; display: block; margin-top: 2px; }

.cht-card-more-wrap {
  position: absolute;
  right: 6px;
  bottom: 0;
}
.cht-card-more {
  width: 44px;
  height: 44px;
  border: 1px solid #111827;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  font-size: 18px;
  line-height: 1;
  transition: background .15s;
}
.cht-card-more:hover { background: #f3f4f6; }
.cht-card-more[aria-expanded="true"] { background: #f3f4f6; }

/* Dropdown menu */
.cht-card-more-menu {
  position: absolute;
  bottom: calc(100% + 8px); /* kebab ở đáy card → menu bung LÊN trên cho gọn trong tầm nhìn */
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  z-index: 50;
}
.cht-card-more-menu[hidden] { display: none; }

.cht-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  color: #111827;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border-radius: 10px;
  white-space: nowrap;
  transition: background .12s;
}
.cht-menu-item:hover { background: #f3f4f6; }
.cht-menu-item--danger { color: #ef4444; }
.cht-menu-item--danger:hover { background: #fef2f2; }
.cht-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.cht-menu-item span { line-height: 1.3; }

/* ─── DIVIDER ─── */
.cht-card-divider {
  grid-column: 2;
  background: #e5e7eb;
  width: 1px;
  margin: 22px 0;
  align-self: stretch;
}

/* ─── MIDDLE zone: stats + actions ─── */
.cht-card-middle {
  grid-column: 3;
  min-width: 0; /* cho phép hàng nút cuộn ngang thay vì giãn tràn card */
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
}
.cht-card-stats-empty {
  min-height: 60px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6b7280;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.cht-card-stats-rank {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 11px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.cht-card-stats-rank__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.cht-card-stats-rank__page { color: #16a34a; }
.cht-card-stats-rank__sep { color: #cbd5e1; font-weight: 400; }
.cht-card-stats-rank__pos { color: #6b7280; font-weight: 600; }
.cht-card-stats-rank__sub { margin: 0; font-size: 13px; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-card-stats-rank__bar {
  position: relative; height: 6px; margin-top: 2px;
  background: linear-gradient(90deg, #22c55e 0%, #84cc16 25%, #eab308 50%, #f97316 75%, #ef4444 100%);
  border-radius: 999px;
}
.cht-card-stats-rank__marker {
  position: absolute; top: 50%;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.15);
}
/* Phase 14X — rank panel clickable → link tới trang xếp hạng */
.cht-card-stats-rank.is-linked { text-decoration: none; color: inherit; cursor: pointer; }
.cht-card-stats-rank.is-linked:hover { border-color: var(--brand, #FD292E); box-shadow: 0 2px 10px rgba(214,58,64,0.10); }
.cht-card-stats-rank__ext { margin-left: auto; display: inline-flex; align-items: center; color: #9ca3af; flex-shrink: 0; }
.cht-card-stats-rank.is-linked:hover .cht-card-stats-rank__ext { color: var(--brand, #FD292E); }

.cht-card-actions-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge cũ */
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.cht-card-actions-row::-webkit-scrollbar { display: none; }
.cht-card-actions-row.is-dragging,
.cht-card-actions-row.is-dragging .cht-card-action-btn { cursor: grabbing; }
.cht-card-action-btn {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #111827;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
  flex: 0 0 auto;            /* giữ nguyên size; kéo ngang (drag-scroll) khi tràn */
}
.cht-card-action-btn:hover { background: #f9fafb; }
.cht-card-action-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.cht-card-warn-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700;
  color: #dc2626;
}
.cht-card-warn-line .dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #dc2626; color: #fff;
  border-radius: 50%;
}
.cht-card-footer-info {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #111827;
  margin-top: 2px;
}

/* ─── RIGHT zone: stat cards + main btn ─── */
.cht-card-right {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: flex-start;
}
.cht-card-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
}
.cht-card-stat {
  min-height: 66px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 4px;
  align-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  min-width: 0;
}
.cht-card-stat > svg {
  grid-row: 1 / span 2;
  align-self: center;
  color: #6b7280;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}
.cht-card-stat .label {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}
.cht-card-stat .value { font-size: 16px; font-weight: 700; color: #111827; line-height: 1.1; }

/* Phase 14X — stat box clickable (Khách hàng / Lượt xem) → mở popup */
.cht-card-stat--clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cht-card-stat--clickable:hover { border-color: var(--brand, #FD292E); box-shadow: 0 2px 8px rgba(214,58,64,0.08); }

/* Phase 14X — Khách hàng quan tâm modal content */
.cht-cust-head { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0 14px; border-bottom: 1px solid #f0f0f0; margin-bottom: 14px; }
.cht-cust-head img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.cht-cust-head-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cht-cust-head-info strong { font-size: 14.5px; font-weight: 700; color: #111827; line-height: 1.35; }
.cht-cust-addr { font-size: 12.5px; color: #6b7280; line-height: 1.4; }
.cht-cust-count { margin: 0 0 12px; font-size: 13px; color: #6b7280; }
.cht-cust-count strong { color: #111827; }
.cht-cust-card { border: 1px solid #eef0f3; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.cht-cust-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cht-cust-phone { font-size: 17px; font-weight: 800; color: #111827; letter-spacing: .01em; }
.cht-cust-spam { font-size: 12px; font-weight: 600; color: #b45309; background: #fef3e2; padding: 3px 10px; border-radius: 999px; }
.cht-cust-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cht-cust-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px;
  border: 1px solid #e5e7eb; border-radius: 10px;
  background: #fff; color: #111827;
  font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.cht-cust-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.cht-cust-row2 {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 12px;
  background: #f3f4f6; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: #374151;
}
.cht-cust-eye { display: inline-flex; color: #6b7280; flex-shrink: 0; }
.cht-cust-time { margin-left: auto; font-weight: 500; color: #9ca3af; white-space: nowrap; }

/* Phase 14X — Chi tiết thống kê lượt xem (bảng theo ngày) */
.cht-vstat-note { font-size: 12.5px; color: #6b7280; line-height: 1.5; margin: 0 0 14px; }
.cht-vstat-note strong { color: #374151; }
.cht-vstat-wrap { overflow-x: auto; }
.cht-vstat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cht-vstat-table th { text-align: left; font-weight: 700; color: #374151; padding: 10px 12px; background: #f7f8fa; border-bottom: 1px solid #eef0f3; white-space: nowrap; }
.cht-vstat-table th:not(:first-child), .cht-vstat-table td:not(:first-child) { text-align: right; }
.cht-vstat-table td { padding: 11px 12px; border-bottom: 1px solid #f3f4f6; color: #111827; }
.cht-vstat-table td:first-child { color: #6b7280; }
.cht-vstat-table tr:last-child td { border-bottom: 0; }

.cht-card-right__main { display: flex; justify-content: flex-end; }
.cht-card-main-btn {
  height: 44px;
  padding: 0 22px;
  border: 1px solid #111827;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.cht-card-main-btn:hover { background: #f9fafb; }

/* Dải thống kê gộp: CHỈ dùng trên mobile — desktop ẩn (desktop dùng rank box + metrics riêng) */
.cht-card-statsline { display: none; }

/* Responsive — DESKTOP giữ 2 cột nguyên bản (user duyệt); ≤1024px chuyển layout DỌC kiểu app batdongsan */
@media (max-width: 1280px) {
  .cht-card2 { gap: 24px; }
  .cht-card-left__top { grid-template-columns: 160px 1fr; }
  .cht-card-thumb { width: 160px; height: 110px; }
}
@media (max-width: 1024px) {
  .cht-card2 {
    display: flex; flex-direction: column; gap: 12px;
    border-color: #eef0f3; border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    padding: 14px 16px 56px; /* đáy chừa chỗ nút ⋯ */
  }
  /* flatten 2 zone thành các hàng dọc */
  .cht-card2 > .cht-card-left,
  .cht-card2 > .cht-card-right { display: contents; }
  .cht-card-left__top { grid-template-columns: 112px 1fr; gap: 14px; }
  .cht-card-thumb { width: 112px; height: 84px; border-radius: 10px; }

  /* Meta: chữ trần 3 cột (không nền) — kiểu batdongsan */
  .cht-card-meta { gap: 10px; }
  .cht-card-meta__item .label { font-size: 12px; }
  .cht-card-meta__item .value { font-size: 13.5px; }
  .cht-card-meta__item .countdown { display: inline; font-size: 12px; color: #d97706; }

  /* Dải thống kê GỘP (hạng + xem + khách) — thay rank box + metrics desktop */
  .cht-card-statsline {
    display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px;
    background: #f3f4f6; border-radius: 12px; padding: 10px 14px;
  }
  .cht-card-statsline__rank { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cht-card-statsline__rank .t { font-size: 13.5px; font-weight: 700; color: #d97706; }
  .cht-card-statsline__rank .b { font-size: 12px; font-weight: 600; color: #d97706; }
  .cht-card-statsline__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
  .cht-card-statsline__cell .t { font-size: 12px; color: #6b7280; }
  .cht-card-statsline__cell .b { font-size: 15px; font-weight: 700; color: #111827; }
  .cht-card-stats-rank, .cht-card-stats-empty, .cht-card-metrics { display: none; }

  /* Nút ⋯ xuống dưới-phải (kiểu batdongsan), ẩn dòng trạng thái cuối */
  .cht-card-more-wrap { top: auto; right: 12px; bottom: 10px; z-index: 5; }
  .cht-card-more { width: 38px; height: 38px; border-color: #cbd5e1; background: #fff; color: #1f2937; font-size: 24px; font-weight: 700; letter-spacing: 1px; }
  .cht-card-footer-info { display: none; }

  .cht-card-action-btn { min-height: 46px; padding: 0 14px; border-color: #e5e7eb; border-radius: 12px; font-size: 13.5px; gap: 8px; }
  .cht-card-action-btn:hover { border-color: #d1d5db; }
  .cht-card-right { gap: 12px; }
}
@media (max-width: 640px) {
  .cht-card-left__top { grid-template-columns: 96px 1fr; gap: 12px; }
  .cht-card-thumb { width: 96px; height: 74px; }
  .cht-card2 { padding: 12px 14px 54px; }
}

/* ── Tin đăng quản lý — Phase 10B (legacy class — giữ cho fallback) ─── */
.cht-listings-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.cht-listings-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink, #0f1722); } /* đồng bộ tiêu đề trang tài khoản */
.cht-listings-filters {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding-bottom: 2px;
}
.cht-filter-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-mute, #6b7280);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.cht-filter-tab:hover { color: var(--ink, #0f1722); }
.cht-filter-tab.is-active {
  color: var(--red, #FD292E);
  border-bottom-color: var(--red, #FD292E);
  font-weight: 600;
}
.cht-filter-tab-count {
  font-size: 11.5px; font-weight: 600;
  background: var(--surface-2, #f4f5f7);
  color: var(--ink-mute, #6b7280);
  padding: 1px 7px;
  border-radius: 999px;
}
.cht-filter-tab.is-active .cht-filter-tab-count {
  background: var(--red-soft, #FFE9E9);
  color: var(--red-deep, #D22226);
}

.cht-listings-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.cht-listing-card {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 16px; align-items: stretch;
  padding: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.cht-listing-card:hover { border-color: var(--ink, #0f1722); }
.cht-listing-card__img {
  display: block;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2, #f9fafb);
}
.cht-listing-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cht-listing-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cht-listing-card__title {
  margin: 0;
  font-size: 16px; font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cht-listing-card__title a { color: var(--ink, #0f1722); text-decoration: none; }
.cht-listing-card__title a:hover { color: var(--red, #FD292E); }
.cht-listing-card__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-mute, #6b7280);
}
.cht-listing-price {
  color: var(--red, #FD292E);
  font-weight: 700;
  font-size: 15px;
}
.cht-listing-card__footer {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: auto;
}
.cht-listing-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
}
.cht-listing-meta--time { margin-left: auto; }
.cht-listing-card__actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.cht-listing-menu { position: relative; }
.cht-listing-menu-btn {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  color: var(--ink, #0f1722);
}
.cht-listing-menu-btn:hover { background: var(--surface-2, #f9fafb); }
.cht-listing-menu-pop {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 180px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px -8px rgba(15,23,34,0.15);
  z-index: 10;
  padding: 4px;
}
.cht-listing-menu-pop button {
  display: block; width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent; border: 0;
  border-radius: 6px;
  font: inherit; font-size: 13.5px;
  color: var(--ink, #0f1722);
  cursor: pointer;
}
.cht-listing-menu-pop button:hover { background: var(--surface-2, #f9fafb); }
.cht-listing-menu-pop button.is-danger { color: var(--red, #FD292E); }
.cht-listing-menu-pop button.is-danger:hover { background: var(--red-soft, #FFE9E9); }

.cht-listings-pagination {
  display: flex; gap: 4px; justify-content: center;
  margin-top: 18px;
}
.cht-page-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  color: var(--ink, #0f1722);
  font-size: 13.5px;
  text-decoration: none;
}
.cht-page-num:hover { border-color: var(--ink, #0f1722); }
.cht-page-num.is-active {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
  color: #fff;
}

@media (max-width: 700px) {
  .cht-listing-card { grid-template-columns: 100px 1fr; grid-template-areas: 'img body' 'actions actions'; }
  .cht-listing-card__img { grid-area: img; }
  .cht-listing-card__body { grid-area: body; }
  .cht-listing-card__actions { grid-area: actions; padding-top: 8px; border-top: 1px solid var(--border, #e5e7eb); }
}

/* Tin đã lưu — dùng card "tin tương tự" (sim-grid) của trang chi tiết tin + nút bỏ lưu overlay.
   single-listing-v2.css KHÔNG nạp ở trang account → copy + fallback biến (--border/--red/--ink). */
.cht-saved-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cht-saved-grid .sim-card{position:relative;background:#fff;border:1px solid var(--border, #e5e7eb);border-radius:14px;overflow:hidden;transition:.2s}
.cht-saved-grid .sim-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,20,25,.08);border-color:#cbd5e1}
.cht-saved-grid .sim-card__link{display:block;text-decoration:none}
.cht-saved-grid .sim-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f3f4f6}
.cht-saved-grid .sim-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.cht-saved-grid .sim-card:hover .sim-thumb img{transform:scale(1.06)}
.cht-saved-grid .sim-photos{position:absolute;bottom:8px;right:8px;background:rgba(15,20,25,.7);color:#fff;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.cht-saved-grid .sim-body{padding:12px 14px}
.cht-saved-grid .sim-price{font-size:16px;font-weight:800;color:var(--red, #FD292E);letter-spacing:-.01em}
.cht-saved-grid .sim-name{font-size:13px;font-weight:600;color:var(--ink, #0f1722);line-height:1.4;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.cht-saved-grid .sim-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--ink-soft, #6b7280);padding-top:10px;border-top:1px solid #f1f3f5}
.cht-saved-grid .sim-meta .m{display:inline-flex;align-items:center;gap:3px}
.cht-saved-grid .card-fav{z-index:2} /* tim bỏ lưu nổi trên link (đồng bộ .card-fav archive) */
@media (max-width: 1024px){.cht-saved-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 680px){.cht-saved-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media (max-width: 380px){.cht-saved-grid{grid-template-columns:1fr}}

/* Tìm kiếm đã lưu — item giàu: chips filter + count + 3 tin preview + Xem tất cả (Phase 18 A) */
.cht-ss-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.cht-ss-item{border:1px solid var(--border, #e5e7eb);border-radius:16px;padding:16px;background:#fff;transition:.16s}
.cht-ss-item:hover{border-color:#d1d5db;box-shadow:0 6px 22px rgba(15,23,34,.06)}
.cht-ss-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cht-ss-titlewrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cht-ss-title{font-size:15.5px;font-weight:800;color:var(--ink, #0f1722);text-decoration:none;line-height:1.35}
.cht-ss-title:hover{color:var(--red, #FD292E)}
.cht-ss-del{flex-shrink:0;width:32px;height:32px;border-radius:8px;border:1px solid var(--border, #e5e7eb);background:#fff;color:var(--ink-soft, #6b7280);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.cht-ss-del:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
.cht-ss-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cht-ss-chip{font-size:12px;font-weight:600;color:var(--ink, #0f1722);background:#f3f4f6;border-radius:999px;padding:3px 10px;white-space:nowrap}
.cht-ss-resulthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.cht-ss-count{font-size:12.5px;color:var(--ink-soft, #6b7280)}
.cht-ss-count strong{color:var(--ink, #0f1722);font-weight:800;font-size:14px}
.cht-ss-all{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;color:var(--red, #FD292E);text-decoration:none;white-space:nowrap}
.cht-ss-all:hover{text-decoration:underline}
/* Preview = compact strip GỌN 154px (giống thẻ "Môi giới đã lưu") — override card full của .cht-saved-grid */
.cht-ss-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.cht-ss-grid .sim-card{flex:0 0 154px;width:154px;border-radius:12px}
.cht-ss-grid .sim-body{padding:8px 10px 10px}
.cht-ss-grid .sim-price{font-size:14px}
.cht-ss-grid .sim-name{font-size:12px;line-height:1.35;margin:3px 0 5px;min-height:31px}
.cht-ss-grid .sim-meta{gap:7px;font-size:10.5px;padding-top:0;border-top:none}
.cht-ss-grid .sim-photos{bottom:6px;right:6px;padding:2px 6px;font-size:10.5px}
.cht-ss-noresult{margin:12px 0 0;font-size:13px;color:var(--ink-soft, #6b7280)}
.cht-ss-noresult a{color:var(--red, #FD292E);font-weight:600;text-decoration:none}
.cht-ss-time{display:block;margin-top:12px;font-size:11.5px;color:var(--ink-soft, #9ca3af)}
@media (max-width: 560px){
  .cht-ss-grid{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .cht-ss-grid .sim-card{scroll-snap-align:start}
}

/* Tìm kiếm đã lưu (legacy — giữ phòng cache) */
.cht-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cht-search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  flex-wrap: wrap;
}
.cht-search-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cht-search-item__title { color: var(--ink, #0f1722); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.cht-search-item__title:hover { color: var(--red, #FD292E); }
.cht-search-item__titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cht-follow-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--red, #FD292E); background: #FFF5F4; border: 1px solid #F6C9C5; padding: 1px 8px; border-radius: 999px; line-height: 1.7; }
.cht-search-item__url { color: var(--ink-mute, #6b7280); font-size: 12.5px; font-family: var(--font-mono, monospace);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cht-search-item__time { color: var(--ink-mute, #6b7280); font-size: 11.5px; }
.cht-search-item__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* card-fav is-fav state */
.card-fav.is-fav { color: var(--red, #FD292E); }

/* Ví hero card */
.cht-wallet-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--red-soft, #FFE9E9) 0%, #ffffff 100%);
  border: 1px solid var(--red-soft, #FFE9E9);
  border-radius: 16px;
  flex-wrap: wrap; gap: 16px;
}
.cht-wallet-label {
  display: block;
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  margin-bottom: 6px;
}
.cht-wallet-amount {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 30px; font-weight: 700;
  color: var(--red-deep, #D22226);
  line-height: 1.1;
  margin-bottom: 6px;
}

.cht-wallet-flash {
  padding: 12px 16px;
  background: rgba(34,197,94,0.1);
  color: #15803d;
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 10px;
  font-size: 14px;
}

.cht-wallet-topup {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 20px 22px;
}
.cht-wallet-topup h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-topup-amounts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.cht-topup-amount {
  padding: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 10px;
  cursor: pointer;
  font: inherit; font-weight: 600; font-size: 14.5px;
  color: var(--ink, #0f1722);
  transition: all .15s;
}
.cht-topup-amount:hover {
  background: var(--red-soft, #FFE9E9);
  border-color: var(--red, #FD292E);
  color: var(--red-deep, #D22226);
}
.cht-topup-custom label {
  display: block;
  font-size: 13.5px; font-weight: 500;
  margin-bottom: 6px;
  color: var(--ink, #0f1722);
}
.cht-topup-custom-row {
  display: flex; gap: 8px; align-items: center;
}
.cht-topup-custom-row input {
  flex: 1;
  height: 42px; padding: 0 14px;
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: 8px;
  font: inherit; font-size: 14.5px;
}
.cht-topup-custom-row input:focus {
  border-color: var(--red, #FD292E);
  outline: none;
  box-shadow: 0 0 0 3px rgba(214,58,64,0.1);
}
/* Phase 14X.9 — đơn vị "VND" nằm TRONG ô nạp tiền (thay "đ" ngoài input).
 * Scope body.woocommerce-account + [type=number] để thắng rule account `padding:0 14px !important`. */
.cht-topup-custom-row .cht-input-affix { flex: 1; }
body.woocommerce-account .cht-input-affix--has-suffix > input[type="number"] { padding-right: 56px !important; }

.cht-wallet-history {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 20px 22px;
}
.cht-wallet-history h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-wallet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cht-wallet-table th, .cht-wallet-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cht-wallet-table th {
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cht-wallet-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cht-wallet-tx--credit { color: #15803d; font-weight: 600; }
.cht-wallet-tx--debit  { color: var(--red, #FD292E); font-weight: 600; }

@media (max-width: 640px) {
  .cht-topup-amounts { grid-template-columns: repeat(2, 1fr); }
  .cht-wallet-table th:nth-child(4), .cht-wallet-table td:nth-child(4) { display: none; }
}

@media (max-width: 640px) {
  .cht-account-stats { grid-template-columns: 1fr; }
  .cht-account-recent-list li { grid-template-columns: 1fr; gap: 4px; }
  .cht-recent-status, .cht-recent-time { font-size: 11px; }
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .cht-auth-modal__shell {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .cht-auth-modal__marketing { display: none; }
}
@media (max-width: 480px) {
  /* Phase 11K.4 — parent stretch để shell fill 100% height của parent (đã shrink theo --vh-visible) */
  .cht-auth-modal {
    padding: 0;
    align-items: stretch;
  }
  .cht-auth-modal__shell {
    max-width: 100vw;
    height: 100%; max-height: 100%;
    border-radius: 0;
  }
  .cht-auth-modal__form { padding: 60px 20px 24px; }
}

/* ──────── Projects Archive Filter Row (Phase 11F) ────────
   /du-an-can-ho-{khu-vuc}/ — match style listing archive: transparent wrap, pills có border riêng */
.cht-projects-filter {
  position: sticky;
  top: 50px;
  z-index: 40;
  padding: 12px 0 8px;
  background: var(--bg);
  margin-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.cht-projects-filter.is-stuck {
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 4px 16px -8px rgba(15,23,34,.12);
  border-bottom-color: var(--border, #e5e7eb);
}
/* Override .section padding-top cho archive du-an (compact với filter row above) */
.cht-archive-projects.section { padding-top: 12px; }
.cht-archive-projects .cht-archive-head { margin-bottom: 14px; }
.cht-archive-projects .cht-archive-toolbar-row {
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--ink-mute, #6b7280);
}
.cht-archive-projects .cht-archive-toolbar-row strong { color: var(--ink, #0f1722); }
.cht-pf-row {
  display: grid;
  /* 14" wide+: search (có nút Tìm bên trong) + area + price + status + dev */
  grid-template-columns: 2.2fr 1.1fr 1fr 0.85fr 1fr;
  gap: 10px;
  align-items: stretch;
  /* Bỏ background + border + shadow → transparent wrap (match listing pattern) */
}

/* Actions group (Xóa lọc + Tìm) — gộp 1 cell auto */
.cht-pf-actions {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  white-space: nowrap;
}
/* Xóa lọc — icon only default, hover expand show text */
.cht-pf-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-mute, #6b7280);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  /* KHÔNG animate width/padding → nút giữ size cố định → hết nháy (hover-flicker) */
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cht-pf-clear:hover {
  color: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
  background: rgba(214,58,64,0.04);
}
.cht-pf-clear svg { flex-shrink: 0; }
.cht-pf-clear-text { display: none; } /* icon-only, label qua title tooltip — tránh hover-flicker */
.cht-pf-input {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  color: var(--ink-mute, #6b7280);
  transition: border-color 0.15s, background 0.15s;
}
.cht-pf-input:focus-within {
  border-color: var(--red, #FD292E);
  box-shadow: 0 0 0 3px rgba(214,58,64,0.08);
}
.cht-pf-input svg {
  flex-shrink: 0;
  color: var(--ink-mute, #6b7280);
}
.cht-pf-input input,
.cht-pf-input select {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink, #0f1722);
  min-width: 0;
}
.cht-pf-input select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
  padding-right: 18px;
  cursor: pointer;
}
.cht-pf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 20px;
  background: var(--red, #FD292E);
  color: #fff;
  border: 1px solid var(--red, #FD292E);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.cht-pf-submit:hover { background: var(--red-deep, #b91c1c); }
.cht-pf-submit:active { transform: scale(.98); }

/* Nút "Tìm" nằm TRONG ô search (giống filter bán/cho-thuê) */
.cht-pf-search { padding-right: 5px; }
.cht-pf-search-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; flex-shrink: 0;
  background: var(--red, #FD292E); color: #fff;
  border: 1px solid var(--red, #FD292E); border-radius: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.cht-pf-search-btn:hover {
  background: var(--red-deep, #b8323a); border-color: var(--red-deep, #b8323a);
  box-shadow: 0 2px 8px rgba(214,58,64,.25);
}

/* Laptop 14" zoom 125% (~1100px effective): search full + 4 filter 4-col + actions full */
@media (max-width: 1180px) {
  .cht-pf-row {
    grid-template-columns: repeat(4, 1fr);
  }
  .cht-pf-search   { grid-column: 1 / -1; }
  .cht-pf-actions  { grid-column: 1 / -1; justify-content: flex-end; }
}
/* Tablet portrait + small laptop — pills 4 cột 1 hàng (search full ở trên) → 2 hàng */
@media (max-width: 768px) {
  .cht-pf-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  /* Bỏ backdrop-filter (bẫy position:fixed → bottom-sheet neo sai). Rule này SAU base .is-stuck (~L7961) nên thắng source-order */
  .cht-projects-filter.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.98); }
  /* Option A — search full + 4 pill 1 hàng + nút Tìm full (đồng bộ filter trang tin đăng) */
  .cht-pf-row { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .cht-pf-search  { grid-column: 1 / -1; }
  .cht-pf-actions { grid-column: 1 / -1; flex-direction: row; }
  .cht-pf-submit  { flex: 1; width: auto; }
  .cht-pf-clear   { width: 46px; }
  /* Pill gọn: bớt padding, ẩn icon dẫn (giống listings pill), label ellipsis */
  .cht-pf-row > .cht-pf-area,
  .cht-pf-row > .cht-pf-pop { padding: 0 9px; min-width: 0; }
  .cht-pf-area > svg:first-child,
  .cht-pf-pop  > svg:first-child { display: none; }
  .cht-pf-area-trigger,
  .cht-pf-pop-trigger { flex: 1; gap: 3px; min-width: 0; }
  .cht-pf-area-trigger > span:first-child,
  .cht-pf-pop-trigger  > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 13px;
  }
  .cht-pf-caret { flex-shrink: 0; }

  /* Popover → bottom-sheet full-width (pill hẹp → tránh tràn mép + dễ chạm, giống listings).
     Specificity `.cht-pf-pop >` để thắng base `.cht-pf-pop-panel{position:absolute}` (định nghĩa sau). */
  .cht-pf-pop > .cht-pf-pop-panel,
  .cht-pf-area > .cht-pf-area-popover {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none; min-width: 0;
    max-height: 72vh; overflow-y: auto;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px -8px rgba(15,23,34,0.28);
    z-index: 1100;
  }
  /* Nền mờ sau bottom-sheet (pseudo trên pill mở) */
  .cht-pf-pop:has(> .cht-pf-pop-panel:not([hidden]))::after,
  .cht-pf-area:has(> .cht-pf-area-popover:not([hidden]))::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(15,23,34,0.4); z-index: 1099; pointer-events: none;
  }
}

/* ── Area picker drill-step (Phase 11F) — Tỉnh → Quận/Huyện ── */
.cht-pf-area { position: relative; }
.cht-pf-area-trigger {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink, #0f1722);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.cht-pf-area-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cht-pf-caret {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute, #6b7280);
  transition: transform 0.2s;
}
.cht-pf-caret svg {
  display: block;
  width: 14px;
  height: 14px;
}
.cht-pf-area:has([data-cht-area-popover]:not([hidden])) .cht-pf-caret {
  transform: rotate(180deg);
}

.cht-pf-area-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  min-width: 320px;
  max-width: 420px;
  width: max-content;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15,23,34,0.18);
  z-index: 50;
  overflow: hidden;
}
.cht-pf-area-popover[hidden] { display: none; }

.cht-pf-area-step {
  display: flex;
  flex-direction: column;
  max-height: 420px;
}
.cht-pf-area-step[hidden] { display: none; }

.cht-pf-area-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
}
.cht-pf-area-back {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink, #0f1722);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.cht-pf-area-back:hover { background: var(--surface-2, #f3f4f6); }

.cht-pf-area-search {
  padding: 10px 14px;
}
.cht-pf-area-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--surface-2, #f3f4f6);
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink, #0f1722);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.cht-pf-area-search input:focus {
  background: #fff;
  border-color: var(--red, #FD292E);
}
.cht-pf-area-search input::placeholder { color: var(--ink-mute, #9ca3af); }

.cht-pf-area-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 320px;
}
.cht-pf-area-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink, #0f1722);
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.cht-pf-area-item:hover { background: var(--surface-2, #f3f4f6); }
.cht-pf-area-item.is-active {
  color: var(--red, #FD292E);
  font-weight: 600;
}
.cht-pf-area-item.cht-pf-area-reset {
  font-weight: 600;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 4px;
}
.cht-pf-area-item.cht-pf-area-reset.is-active {
  color: var(--red, #FD292E);
}
.cht-pf-area-arrow {
  flex-shrink: 0;
  color: var(--ink-mute, #9ca3af);
  font-size: 16px;
}
.cht-pf-area-item.is-loading {
  color: var(--ink-mute, #6b7280);
  cursor: default;
  justify-content: center;
}

/* ── Generic dropdown popover (Khoảng giá / Trạng thái / Chủ đầu tư) ── */
.cht-pf-pop { position: relative; }
.cht-pf-pop-trigger {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink, #0f1722);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.cht-pf-pop-trigger > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cht-pf-pop.is-open .cht-pf-caret { transform: rotate(180deg); }

.cht-pf-pop-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: -1px;
  min-width: 240px;
  max-width: 360px;
  width: max-content;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15,23,34,0.18);
  z-index: 50;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 420px;
}
.cht-pf-pop-panel[hidden] { display: none; }
.cht-pf-pop-panel > .cht-pf-area-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 320px;
}
.cht-pf-pop-panel > .cht-pf-area-search { padding: 10px 14px; }
.cht-pf-pop-panel > .cht-pf-area-search + .cht-pf-area-list { padding-top: 0; }

/* Phase 16.3 — Footer "Đặt lại / Áp dụng" cho popover dự án (Giá/Trạng thái/CĐT) — giống pill tin đăng */
.cht-pf-pop-foot {
  display: flex; gap: 10px; flex-shrink: 0;
  padding: 12px 14px; border-top: 1px solid var(--border);
  background: var(--surface);
}
.cht-pf-pop-foot .btn { flex: 1; height: 40px; font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer; }
.cht-pf-pop-foot .btn-ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink); }
.cht-pf-pop-foot .btn-ghost:hover { background: var(--surface-2); }
.cht-pf-pop-foot .btn-primary { flex: 1.4; background: var(--red); color: #fff; border: 1px solid var(--red); }
.cht-pf-pop-foot .btn-primary:hover { background: var(--red-deep, #b8323a); }
/* Mobile bottom-sheet: panel không cuộn để footer dính đáy (list bên trong cuộn) */
@media (max-width: 640px) {
  .cht-pf-pop > .cht-pf-pop-panel { overflow: hidden; }
  .cht-pf-pop-panel > .cht-pf-area-list { max-height: none; }
}

/* Empty state for filtered dev list */
.cht-pf-area-list:empty::after {
  content: 'Không tìm thấy kết quả';
  display: block;
  padding: 16px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute, #9ca3af);
}

/* ──────── Page Giới thiệu (Phase 11G — Premium Story Option A) ──────── */
.cht-about-hero {
  padding: 36px 0 40px;
  background: linear-gradient(180deg, var(--red-soft, #FFE9E9) 0%, var(--bg, #fff) 100%);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cht-about-eyebrow {
  display: inline-block;
  margin: 8px 0 6px;
  padding: 4px 12px;
  background: rgba(214,58,64,0.1);
  color: var(--red, #FD292E);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.cht-about-h1 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);  /* match .section-title trang Bán/Cho thuê */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 6px 0 10px;
  color: var(--ink, #0f1722);
}
.cht-about-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-mute, #6b7280);
  max-width: 68ch;
  margin: 0;
}

.cht-about-section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red, #FD292E);
  margin: 0 0 8px;
}
.cht-about-h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--ink, #0f1722);
}

/* Story 2-col */
.cht-about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.cht-about-story-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-2, #f3f4f6);
}
.cht-about-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cht-about-prose p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink, #0f1722);
  margin: 0 0 14px;
}
.cht-about-prose p:last-child { margin-bottom: 0; }

/* Values 3-cards */
.cht-about-values { background: var(--surface-2, #fafbfc); }
.cht-about-values-head { text-align: center; margin-bottom: 32px; max-width: 56ch; margin-left: auto; margin-right: auto; }
.cht-about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cht-about-value-card {
  padding: 32px 28px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cht-about-value-card:hover {
  box-shadow: 0 12px 32px -8px rgba(15,23,34,0.08);
  transform: translateY(-2px);
}
.cht-about-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--red-soft, #FFE9E9);
  color: var(--red, #FD292E);
  margin-bottom: 18px;
}
.cht-about-value-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink, #0f1722);
}
.cht-about-value-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-mute, #6b7280);
  margin: 0;
}
.cht-about-value-card p strong { color: var(--red, #FD292E); }

/* Stats bar */
.cht-about-stats {
  background: var(--ink, #0f1722);
  color: #fff;
  padding: 48px 0;
}
.cht-about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.cht-about-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.cht-about-stat span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

/* CTA section */
.cht-about-cta-box {
  background: linear-gradient(135deg, var(--red, #FD292E) 0%, var(--red-deep, #b91c1c) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
}
.cht-about-cta-box h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #fff;
}
.cht-about-cta-box p {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
}
.cht-about-cta-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.cht-about-cta-actions .btn {
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cht-about-cta-actions .btn-primary {
  background: #fff;
  color: var(--red-deep, #b91c1c);
  border: 1px solid #fff;
}
.cht-about-cta-actions .btn-primary:hover {
  background: var(--ink, #0f1722);
  color: #fff;
  border-color: var(--ink, #0f1722);
}
.cht-about-cta-actions .btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
}
.cht-about-cta-actions .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .cht-about-story-grid { grid-template-columns: 1fr; gap: 28px; }
  .cht-about-story-img { aspect-ratio: 16 / 10; }
  .cht-about-values-grid { grid-template-columns: 1fr; }
  .cht-about-stats-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  /* Nút CTA full chiều ngang (col-12), xếp dọc trên mobile */
  .cht-about-cta-actions { display: flex; flex-direction: column; width: 100%; gap: 10px; }
  .cht-about-cta-actions .btn { width: 100%; }
}
@media (max-width: 480px) {
  .cht-about-hero { padding: 24px 0 28px; }
  .cht-about-stats-grid { grid-template-columns: 1fr; gap: 18px; }
  .cht-about-cta-box { padding: 32px 20px; border-radius: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 12C — Step 6 "Chọn loại tin" (VIP tier cards + duration + summary)
   ═══════════════════════════════════════════════════════════════════════ */

.cht-form-step-sub {
  font-size: 13.5px;
  color: var(--ink-mute, #6b7280);
  margin: -8px 0 18px;
}

/* Tier grid */
.cht-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .cht-tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .cht-tier-grid { grid-template-columns: 1fr; }
}
/* Phase 18 — Bước 6 đăng tin: tier = 1 CỘT full-width (col-12), card hình CHỮ NHẬT ngang + scroll.
   Scope .cht-dang-tin-form để KHÔNG đụng trang Bảng giá (.cht-bgia-page dùng chung .cht-tier-grid). */
.cht-dang-tin-form .cht-tier-grid {
  grid-template-columns: 1fr;          /* col-12: 1 card / hàng */
  gap: 12px;
  max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; padding: 4px;
}
.cht-dang-tin-form .cht-tier-grid::-webkit-scrollbar { width: 6px; }
.cht-dang-tin-form .cht-tier-grid::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.cht-dang-tin-form .cht-tier-grid::-webkit-scrollbar-track { background: transparent; }
/* Card chữ nhật ngang: [icon] Tên ……… Giá [check]; mô tả + slot xuống dòng 2 thụt vào canh dưới Tên */
.cht-dang-tin-form .cht-tier-card {
  flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 2px 14px; padding: 14px 18px;
}
.cht-dang-tin-form .cht-tier-card:hover { transform: none; }      /* bỏ nhấc card trong list dọc */
.cht-dang-tin-form .cht-tier-card__head { display: contents; }    /* tách icon + check thành con trực tiếp để xếp ngang */
.cht-dang-tin-form .cht-tier-icon { order: 1; flex: 0 0 auto; }
.cht-dang-tin-form .cht-tier-name { order: 2; flex: 0 0 auto; }
.cht-dang-tin-form .cht-tier-price-wrap { order: 3; margin: 0 0 0 auto; padding: 0; }
.cht-dang-tin-form .cht-tier-check { order: 4; flex: 0 0 auto; }
.cht-dang-tin-form .cht-tier-desc { order: 5; flex: 1 0 100%; min-height: 0; margin: 0 0 0 52px; }
.cht-dang-tin-form .cht-tier-slot-status { order: 6; flex: 1 0 100%; margin: 6px 0 0 52px; }
/* Mobile nhỏ: thu gọn icon/font để tên dài (VIP Kim Cương) + giá vẫn vừa 1 hàng */
@media (max-width: 430px) {
  .cht-dang-tin-form .cht-tier-card { gap: 2px 10px; padding: 12px 14px; }
  .cht-dang-tin-form .cht-tier-icon { width: 32px; height: 32px; }
  .cht-dang-tin-form .cht-tier-name { font-size: 14.5px; }
  .cht-dang-tin-form .cht-tier-price { font-size: 16px; }
  .cht-dang-tin-form .cht-tier-desc,
  .cht-dang-tin-form .cht-tier-slot-status { margin-left: 42px; }
}

.cht-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 16px;
  background: #fff;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  cursor: pointer;
  transition: all .18s ease;
  overflow: hidden;
}
.cht-tier-card:hover {
  border-color: rgba(214, 58, 64, .35);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 34, .08);
}
.cht-tier-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Tier card head: icon + check ring */
.cht-tier-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cht-tier-icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft, #f9fafb);
  border-radius: 10px;
  color: var(--ink, #0f1722);
}
.cht-tier-check {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 999px;
  transition: all .15s;
}
.cht-tier-check svg { opacity: 0; transition: opacity .15s; }

/* Checked state */
.cht-tier-card.is-checked,
.cht-tier-card:has(input[type="radio"]:checked) {
  border-color: var(--red, #FD292E);
  background: linear-gradient(180deg, #fff 0%, #fdfafa 100%);
  box-shadow: 0 4px 14px rgba(214, 58, 64, .12);
}
.cht-tier-card.is-checked .cht-tier-check,
.cht-tier-card:has(input[type="radio"]:checked) .cht-tier-check {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
}
.cht-tier-card.is-checked .cht-tier-check svg,
.cht-tier-card:has(input[type="radio"]:checked) .cht-tier-check svg { opacity: 1; }

.cht-tier-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  letter-spacing: -.01em;
}
.cht-tier-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.45;
  min-height: 34px;
}
.cht-tier-price-wrap {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cht-tier-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #0f1722);
  letter-spacing: -.01em;
}
.cht-tier-price-unit {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
}

/* Tier-specific accents */
.cht-tier-card--silver .cht-tier-icon {
  background: linear-gradient(135deg, #f3f4f6, #d4d4d8);
  color: #52525b;
}
.cht-tier-card--gold .cht-tier-icon {
  background: linear-gradient(135deg, #fef9c3, #facc15);
  color: #854d0e;
}
.cht-tier-card--diamond .cht-tier-icon {
  background: linear-gradient(135deg, #fce7f3, #ec4899);
  color: #fff;
}

/* Slot status — khi slot đầy */
.cht-tier-slot-status {
  margin-top: 8px;
  padding: 6px 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 11.5px;
  color: #991b1b;
  text-align: center;
  line-height: 1.35;
}
.cht-tier-card.is-disabled {
  opacity: .65;
  cursor: not-allowed;
  pointer-events: none;
}
.cht-tier-card.is-disabled:hover { transform: none; box-shadow: none; }

/* Duration presets */
.cht-tier-duration { margin-top: 22px; }
.cht-duration-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.cht-duration-presets--sm { grid-template-columns: repeat(3, 1fr); }
.cht-duration-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
  transition: all .15s;
}
.cht-duration-chip:hover {
  border-color: rgba(214, 58, 64, .35);
  background: #fff;
}
.cht-duration-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cht-duration-chip.is-active,
.cht-duration-chip:has(input[type="radio"]:checked) {
  border-color: var(--red, #FD292E);
  color: var(--red, #FD292E);
  background: var(--red-soft, #FFE9E9);
}
.cht-duration-chip .cht-duration-icon { display: inline-flex; }
.cht-duration-chip .cht-duration-icon svg { width: 14px; height: 14px; }

/* Boost toggle */
.cht-boost-wrap { margin-top: 18px; }
.cht-boost-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-soft, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s;
}
.cht-boost-toggle:hover { border-color: rgba(214, 58, 64, .25); }
.cht-boost-toggle input[type="checkbox"] {
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--red, #FD292E);
  cursor: pointer;
  flex-shrink: 0;
}
.cht-boost-toggle-content { display: flex; flex-direction: column; gap: 4px; }
.cht-boost-toggle-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
}
.cht-boost-toggle-hint {
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
}
.cht-boost-days { margin-top: 10px; padding-left: 28px; }

/* Summary box */
.cht-tier-summary {
  margin-top: 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff7f7 0%, #fff 100%);
  border: 1px solid var(--red-soft, #FFE9E9);
  border-radius: 14px;
}
.cht-tier-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cht-tier-summary__row + .cht-tier-summary__row {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e5e7eb);
}
.cht-tier-summary__label {
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
}
.cht-tier-summary__amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--red, #FD292E);
  letter-spacing: -.02em;
}
.cht-tier-summary__balance {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
}
.cht-tier-summary__topup {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red, #FD292E);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.cht-tier-summary__topup:hover { color: var(--red-deep, #D22226); }
.cht-tier-summary__row--insufficient .cht-tier-summary__balance { color: #b91c1c; }

/* Phase 12C v2 — Note "boost mua riêng sau" thay boost toggle */
.cht-tier-note {
  margin-top: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}
.cht-tier-note-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-top: 1px;
}
.cht-tier-note-text a {
  color: #92400e;
  font-weight: 600;
  text-decoration: underline;
}
.cht-tier-note-text a:hover { color: var(--red, #FD292E); }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 12D — Listing card VIP badges (KC / Vàng / Bạc / Boost)
   ═══════════════════════════════════════════════════════════════════════ */

.card-viptag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  box-shadow: 0 2px 6px rgba(15, 23, 34, .18);
  white-space: nowrap;
}
.card-viptag svg { flex-shrink: 0; }
.card-viptag--diamond {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #be185d 100%);
}
.card-viptag--gold {
  background: linear-gradient(135deg, #facc15 0%, #eab308 50%, #ca8a04 100%);
  color: #422006;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.card-viptag--gold svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.card-viptag--silver {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 50%, #475569 100%);
}
.card-viptag--boost {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
}

/* Phase 14X.8.B — Boost button standard row layout (no more price small text) */

/* Phase 12 — Project field defensive UI */
.cht-form-label-aux {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mute, #6b7280);
  margin-left: 6px;
}
.cht-form-empty-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-soft, #f9fafb);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.5;
}
.cht-form-empty-hint svg { flex-shrink: 0; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 12 — chtToast() premium replacement for native alert()
   ═══════════════════════════════════════════════════════════════════════ */
.cht-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
@media (max-width: 480px) {
  .cht-toast-container {
    top: auto; bottom: 16px; right: 12px; left: 12px;
    max-width: none;
  }
}
.cht-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,23,34,.15), 0 0 0 1px rgba(15,23,34,.04);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink, #0f1722);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  border-left: 4px solid var(--ink, #0f1722);
}
.cht-toast.is-show { opacity: 1; transform: translateY(0); }
.cht-toast--info    { border-left-color: #3b82f6; }
.cht-toast--success { border-left-color: #10b981; }
.cht-toast--warning { border-left-color: #f59e0b; }
.cht-toast--error   { border-left-color: var(--red, #FD292E); }

.cht-toast-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--ink, #0f1722);
}
.cht-toast--info    .cht-toast-icon { background: #3b82f6; }
.cht-toast--success .cht-toast-icon { background: #10b981; }
.cht-toast--warning .cht-toast-icon { background: #f59e0b; }
.cht-toast--error   .cht-toast-icon { background: var(--red, #FD292E); }

.cht-toast-msg { flex: 1; min-width: 0; word-wrap: break-word; }
.cht-toast-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-mute, #6b7280);
  cursor: pointer;
  padding: 0 4px;
  margin-top: -2px;
}
.cht-toast-close:hover { color: var(--ink, #0f1722); }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 12P — Header user avatar dropdown
   ═══════════════════════════════════════════════════════════════════════ */
.hdr-user { position: relative; }
.hdr-user .hdr-avatar {
  border: 0;
  background: var(--red, #FD292E);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
}
.hdr-user .hdr-avatar:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(214, 58, 64, .35); }
.hdr-user .hdr-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(214, 58, 64, .2); }

.hdr-user-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15,23,34,.18), 0 0 0 1px rgba(15,23,34,.06);
  padding: 8px;
  z-index: 1050;
  animation: chtUserPopIn .18s ease;
}
.hdr-user-pop[hidden] { display: none; }
@keyframes chtUserPopIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hdr-user-pop__head {
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 6px;
}
.hdr-user-pop__head strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  letter-spacing: -.01em;
}
.hdr-user-pop__head em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-mute, #6b7280);
}

.hdr-user-pop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink, #0f1722);
  text-decoration: none;
  font-weight: 500;
  transition: background-color .12s, color .12s;
}
.hdr-user-pop__item:hover {
  background: var(--bg-soft, #f9fafb);
  color: var(--red, #FD292E);
}
.hdr-user-pop__item:hover svg { color: var(--red, #FD292E); }
.hdr-user-pop__item svg { flex-shrink: 0; transition: color .12s; }

.hdr-user-pop__item--danger { color: #dc2626; }
.hdr-user-pop__item--danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}
.hdr-user-pop__item--danger:hover svg { color: #b91c1c; }

.hdr-user-pop__sep {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 6px 8px;
}

@media (max-width: 480px) {
  .hdr-user-pop { width: 260px; right: -8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 12Q — Activity log modal (Lịch sử hoạt động)
   ═══════════════════════════════════════════════════════════════════════ */
.cht-activity-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cht-activity-modal[hidden] { display: none; }
.cht-activity-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 34, .55);
  backdrop-filter: blur(4px);
}
.cht-activity-modal__panel {
  position: relative;
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 34, .25);
  animation: chtActModalIn .25s ease;
}
@keyframes chtActModalIn {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cht-activity-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  background: #0f1722;
  color: #fff;
}
.cht-activity-modal__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cht-activity-modal__close {
  background: none; border: 0; color: #fff;
  width: 32px; height: 32px;
  border-radius: 999px;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cht-activity-modal__close:hover { background: rgba(255,255,255,.15); }

.cht-activity-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.cht-activity-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cht-activity-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.cht-activity-item.is-expandable { cursor: pointer; }
.cht-activity-item.is-expandable:hover {
  border-color: var(--border, #e5e7eb);
  background: var(--bg-soft, #f9fafb);
}

.cht-activity-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  color: #475569;
}
.cht-activity-icon svg { width: 16px; height: 16px; }

.cht-activity-main { flex: 1; min-width: 0; }
.cht-activity-title { font-size: 14.5px; font-weight: 700; color: var(--ink, #0f1722); line-height: 1.4; }
.cht-activity-ts { font-size: 13px; color: var(--ink-mute, #6b7280); white-space: nowrap; flex-shrink: 0; }

.cht-activity-changes,
.cht-activity-note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  line-height: 1.5;
  display: none;
}
.cht-activity-item.is-open .cht-activity-changes,
.cht-activity-item.is-open .cht-activity-note { display: block; }

.cht-activity-chevron {
  display: none;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
}
.cht-activity-item.is-expandable .cht-activity-chevron { display: block; }
.cht-activity-item.is-open .cht-activity-chevron { transform: rotate(180deg); }

.cht-activity-loading,
.cht-activity-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-mute, #6b7280);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 12U — Features checkbox grid (Tiện nghi & nội thất)
   ═══════════════════════════════════════════════════════════════════════ */
.cht-features-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.cht-features-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--ink, #0f1722); }
.cht-features-sub { font-size: 13.5px; color: var(--ink-mute, #6b7280); margin: 0 0 18px; }
.cht-features-group { margin-top: 16px; }
.cht-features-group-title {
  font-size: 13px; font-weight: 600;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.cht-features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cht-feature-chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 13px;
  background: #fff;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink, #0f1722);
  transition: all .15s;
  user-select: none;
}
.cht-feature-chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.cht-feature-chip:hover { border-color: rgba(214, 58, 64, .3); background: #fdfafa; }

.cht-feature-chip__box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  transition: all .15s;
}
.cht-feature-chip__box svg { opacity: 0; }

.cht-feature-chip:has(input:checked) {
  border-color: var(--red, #FD292E);
  background: var(--red-soft, #FFE9E9);
}
.cht-feature-chip:has(input:checked) .cht-feature-chip__box {
  background: var(--red, #FD292E);
  border-color: var(--red, #FD292E);
}
.cht-feature-chip:has(input:checked) .cht-feature-chip__box svg { opacity: 1; }
.cht-feature-chip:has(input:checked) .cht-feature-chip__label { color: var(--red-deep, #D22226); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14 — Mortgage Tool Page (/cong-cu/tinh-vay-mua-nha/)
   ═══════════════════════════════════════════════════════════════════════════ */

.cht-mortgage-page { padding: 24px 0 64px; min-height: 60vh; }
.cht-mortgage-hero { margin-bottom: 32px; }
.cht-mortgage-h1 {
  font-family: var(--font-display, "Be Vietnam Pro", serif);
  font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 12px; color: var(--ink, #0f1722);
}
.cht-mortgage-sub {
  font-size: 15px; color: var(--ink-mute, #6b7280); line-height: 1.6;
  max-width: 800px;
}

.cht-mortgage-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 920px) {
  .cht-mortgage-grid { grid-template-columns: 1fr; gap: 20px; }
}

.cht-mortgage-input-panel {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 88px;
}
@media (max-width: 920px) {
  .cht-mortgage-input-panel { position: static; }
}
.cht-mortgage-panel-title {
  font-size: 18px; font-weight: 700; margin: 0 0 20px;
  color: var(--ink, #0f1722);
}

.cht-mort-field { margin-bottom: 20px; }
.cht-mort-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--ink, #0f1722); margin-bottom: 8px;
}
.cht-mort-label small { font-weight: 400; color: var(--ink-mute, #6b7280); }
.cht-mort-unit { font-size: 13px; color: var(--red, #FD292E); font-weight: 600; }
.cht-mort-hint { font-size: 12px; color: var(--ink-mute, #6b7280); margin: 6px 0 0; line-height: 1.4; }

.cht-mort-input-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cht-mort-input {
  flex: 1; padding: 10px 14px; font-size: 15px; font-weight: 600;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  background: var(--bg, #f9fafb); color: var(--ink, #0f1722);
}
.cht-mort-input:focus { outline: 2px solid var(--red, #FD292E); outline-offset: -1px; }
.cht-mort-price-fmt { font-size: 13px; color: var(--ink-mute, #6b7280); white-space: nowrap; }

.cht-mort-slider {
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--border, #e5e7eb);
  -webkit-appearance: none; appearance: none;
  outline: none; cursor: pointer;
}
.cht-mort-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red, #FD292E);
  cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.cht-mort-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red, #FD292E);
  cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.cht-mort-range-hint {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-mute, #6b7280); margin-top: 4px;
}

.cht-mort-loan-info {
  margin-top: 8px; padding: 8px 12px;
  background: var(--bg, #f9fafb); border-radius: 6px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink, #0f1722);
}
.cht-mort-loan-info strong { color: var(--red, #FD292E); }

.cht-mort-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cht-mort-mode-tab {
  padding: 10px 8px;
  background: #fff; border: 1.5px solid var(--border, #e5e7eb); border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink, #0f1722);
  text-align: center; transition: all .12s ease;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cht-mort-mode-tab small { font-size: 10.5px; font-weight: 400; color: var(--ink-mute, #6b7280); }
.cht-mort-mode-tab:hover { border-color: var(--red, #FD292E); }
.cht-mort-mode-tab.is-active {
  background: var(--red-soft, #FFE9E9);
  border-color: var(--red, #FD292E);
  color: var(--red, #FD292E);
}
.cht-mort-mode-tab.is-active small { color: var(--red, #FD292E); opacity: 0.8; }

.cht-mort-actions { display: flex; gap: 8px; margin-top: 24px; }
.cht-mort-btn {
  padding: 11px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .12s ease; flex: 1;
}
.cht-mort-btn-primary {
  background: var(--red, #FD292E); color: #fff; border: 0;
}
.cht-mort-btn-primary:hover { background: var(--red-deep, #b32d2e); }
.cht-mort-btn-ghost {
  background: #fff; color: var(--ink, #0f1722); border: 1px solid var(--border, #e5e7eb);
}
.cht-mort-btn-ghost:hover { border-color: var(--red, #FD292E); color: var(--red, #FD292E); }

.cht-mortgage-result-panel { display: flex; flex-direction: column; gap: 20px; }

.cht-mort-warning {
  background: #fff3f3; border: 1px solid #fca5a5; border-left: 4px solid var(--red, #FD292E);
  border-radius: 8px; padding: 12px 16px; font-size: 13.5px; color: #7f1d1d;
  display: flex; gap: 8px; align-items: flex-start;
}
.cht-mort-warning strong { color: var(--red-deep, #b32d2e); }

.cht-mort-result-big {
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  padding: 24px; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .cht-mort-result-big { grid-template-columns: 1fr; }
  .cht-mort-result-divider { display: none; }
}
.cht-mort-result-divider { background: var(--border, #e5e7eb); height: 80px; }
.cht-mort-result-monthly { text-align: left; }
.cht-mort-result-label { font-size: 12px; color: var(--ink-mute, #6b7280); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.cht-mort-result-label small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft, #9ca3af); margin-left: 4px; }
.cht-mort-result-value {
  font-family: var(--font-display, "Be Vietnam Pro", serif);
  font-size: 32px; font-weight: 700; color: var(--red, #FD292E);
  line-height: 1.1; letter-spacing: -0.015em;
}
.cht-mort-result-sub { font-size: 12px; color: var(--ink-mute, #6b7280); margin-top: 6px; line-height: 1.4; }

.cht-mort-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 720px) {
  .cht-mort-summary { grid-template-columns: repeat(2, 1fr); }
}
.cht-mort-stat {
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  padding: 14px 16px;
}
.cht-mort-stat-label { font-size: 11px; color: var(--ink-mute, #6b7280); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.cht-mort-stat-value { font-size: 17px; font-weight: 700; color: var(--ink, #0f1722); letter-spacing: -0.01em; }
.cht-mort-stat-interest .cht-mort-stat-value { color: #b45309; }

.cht-mort-chart-section,
.cht-mort-schedule-section {
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  padding: 20px;
}
.cht-mort-section-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; color: var(--ink, #0f1722); }
.cht-mort-chart { width: 100%; min-height: 220px; }
.cht-chart-svg { width: 100%; height: auto; }
.cht-chart-grid { stroke: var(--border, #e5e7eb); stroke-width: 1; stroke-dasharray: 3,3; }
.cht-chart-axis { font-size: 11px; fill: var(--ink-mute, #6b7280); font-family: var(--font-sans, sans-serif); }
.cht-chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cht-chart-line-principal { stroke: #10b981; }
.cht-chart-line-interest  { stroke: var(--red, #FD292E); }
.cht-chart-line-balance   { stroke: #9ca3af; stroke-dasharray: 4,4; }
.cht-mort-chart-legend {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px;
  font-size: 12px; color: var(--ink-mute, #6b7280);
}
.cht-mort-chart-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.cht-mort-chart-legend .dot-principal { background: #10b981; }
.cht-mort-chart-legend .dot-interest  { background: var(--red, #FD292E); }
.cht-mort-chart-legend .dot-balance   { background: #9ca3af; }

.cht-mort-schedule-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px;
}
.cht-mort-schedule-head .cht-mort-section-title { margin: 0; }
.cht-mort-schedule-filter {
  padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  background: #fff; cursor: pointer;
}

.cht-mort-schedule-wrap { overflow-x: auto; max-height: 460px; overflow-y: auto; }
.cht-mort-schedule-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.cht-mort-schedule-table thead { position: sticky; top: 0; background: var(--bg, #f9fafb); z-index: 1; }
.cht-mort-schedule-table th,
.cht-mort-schedule-table td {
  padding: 8px 12px; text-align: right;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cht-mort-schedule-table th { font-weight: 600; color: var(--ink, #0f1722); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.cht-mort-schedule-table th:first-child,
.cht-mort-schedule-table td:first-child { text-align: left; color: var(--ink-mute, #6b7280); }
.cht-mort-schedule-table tr.is-phase1 { background: #fff; }
.cht-mort-schedule-table tr.is-phase2 { background: #fef9f9; }
.cht-mort-schedule-table tr:hover { background: var(--bg, #f9fafb); }

.cht-mortgage-faq {
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 16px;
  padding: 32px; margin-top: 32px;
}
.cht-mortgage-faq h2 { font-size: 22px; font-weight: 700; margin: 0 0 24px; }
.cht-mort-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) {
  .cht-mort-faq-grid { grid-template-columns: 1fr; }
}
.cht-mort-faq-item h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--red, #FD292E); }
.cht-mort-faq-item p { font-size: 13.5px; color: var(--ink-mute, #6b7280); margin: 0; line-height: 1.6; }

/* ───── Phase 14H — Mini mortgage widget trong single-listing ───── */
.cht-mort-mini {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 720px) {
  .cht-mort-mini { grid-template-columns: 1fr; }
}

.cht-mort-mini-inputs { display: flex; flex-direction: column; gap: 16px; }
.cht-mort-mini-field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--ink, #0f1722);
  margin-bottom: 6px;
}
.cht-mort-mini-field label span:last-child { color: var(--red, #FD292E); }

.cht-mort-mini-result {
  background: var(--bg, #f9fafb);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}

.cht-mort-mini-monthly .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute, #6b7280); font-weight: 600; margin-bottom: 4px; }
.cht-mort-mini-monthly .val { display: block; font-family: var(--font-display, "Be Vietnam Pro", serif); font-size: 26px; font-weight: 700; color: var(--red, #FD292E); line-height: 1.1; letter-spacing: -0.015em; }
.cht-mort-mini-monthly .sub { display: block; font-size: 11px; color: var(--ink-mute, #6b7280); margin-top: 4px; }

.cht-mort-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cht-mort-mini-stats > div {
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.cht-mort-mini-stats .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute, #6b7280); font-weight: 600; }
.cht-mort-mini-stats .val { font-size: 13px; font-weight: 700; color: var(--ink, #0f1722); }

.cht-mort-mini-cta {
  display: block; text-align: center; margin-top: 4px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--red, #FD292E); color: #fff;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .12s ease;
}
.cht-mort-mini-cta:hover { background: var(--red-deep, #b32d2e); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14I.4 — Subzone Detail Page (/phan-khu/{slug}/)
   ═══════════════════════════════════════════════════════════════════════════ */
.cht-subzone-page { padding: 18px 0 64px; }

.cht-subzone-hero { margin-bottom: 24px; }
.cht-subzone-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 720px) { .cht-subzone-hero-grid { grid-template-columns: 1fr; } }
.cht-subzone-hero-main { aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: var(--bg, #f9fafb); }
.cht-subzone-hero-main img { width: 100%; height: 100%; object-fit: cover; }
.cht-subzone-hero-thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.cht-subzone-hero-thumb { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--bg, #f9fafb); }
.cht-subzone-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cht-subzone-hero-thumb-more {
  aspect-ratio: 4/3; border-radius: 12px;
  background: var(--ink, #0f1722); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}

.cht-subzone-head { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 16px; padding: 24px 28px; margin-bottom: 16px; }
.cht-subzone-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.cht-subzone-title {
  font-family: var(--font-display, "Be Vietnam Pro", serif);
  font-size: clamp(24px, 3vw, 32px); font-weight: 700;
  margin: 0 0 6px; letter-spacing: -0.02em; color: var(--ink, #0f1722);
}
.cht-subzone-project { font-size: 14px; color: var(--ink-mute, #6b7280); margin: 0; }
.cht-subzone-project a { color: var(--red, #FD292E); }
.cht-subzone-cta {
  background: var(--red, #FD292E); color: #fff;
  padding: 11px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .12s ease;
}
.cht-subzone-cta:hover { background: var(--red-deep, #b32d2e); }

.cht-subzone-keyinfo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; padding-top: 18px; border-top: 1px solid var(--border, #e5e7eb);
}
.cht-subzone-keyitem {
  background: var(--bg, #f9fafb); border-radius: 10px; padding: 12px 14px;
}
.cht-subzone-keyitem-label { font-size: 11px; color: var(--ink-mute, #6b7280); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.cht-subzone-keyitem-value { font-size: 16px; font-weight: 700; color: var(--ink, #0f1722); }

.cht-subzone-intro { font-size: 15px; line-height: 1.7; color: var(--ink, #0f1722); }
.cht-subzone-intro p { margin: 0 0 12px; }

.cht-subzone-tower-group { margin-bottom: 16px; }
.cht-subzone-tower-group-title { font-size: 14px; font-weight: 700; color: var(--ink, #0f1722); margin: 0 0 8px; }
.cht-subzone-tower-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cht-subzone-tower-chip {
  padding: 8px 14px; background: var(--red-soft, #FFE9E9); color: var(--red, #FD292E);
  border-radius: 8px; font-size: 13px; font-weight: 600;
}

.cht-subzone-siblings { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cht-subzone-sibling {
  display: block; background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; overflow: hidden; text-decoration: none;
  transition: border-color .12s ease, transform .12s ease;
}
.cht-subzone-sibling:hover { border-color: var(--red, #FD292E); transform: translateY(-2px); }
.cht-subzone-sibling-img { aspect-ratio: 4/3; background: var(--bg, #f9fafb); }
.cht-subzone-sibling-img img { width: 100%; height: 100%; object-fit: cover; }
.cht-subzone-sibling-body { padding: 12px 14px; }
.cht-subzone-sibling-name { font-size: 14px; font-weight: 600; color: var(--ink, #0f1722); margin-bottom: 4px; }
.cht-subzone-sibling-meta { font-size: 12px; color: var(--ink-mute, #6b7280); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14I — Project picker (Diaoc360-style hierarchical drill)
   ═══════════════════════════════════════════════════════════════════════════ */

.cht-modal-pick-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--ink, #0f1722);
  cursor: pointer; transition: border-color .12s ease;
  text-align: left;
}
.cht-modal-pick-btn:hover { border-color: var(--red, #FD292E); }
.cht-modal-pick-label { color: var(--ink-mute, #6b7280); flex: 1; }
.cht-modal-pick-btn:not(:has(.cht-modal-pick-label-empty)) .cht-modal-pick-label { color: var(--ink, #0f1722); font-weight: 600; }
.cht-modal-pick-chevron { color: var(--ink-mute, #6b7280); display: inline-flex; }

.cht-pick-list-wrap { padding: 8px 0; }
.cht-pick-list { list-style: none; margin: 0; padding: 0; }
.cht-pick-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; gap: 12px;
  cursor: pointer; transition: background .12s ease;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cht-pick-row:hover { background: var(--surface-2, #f9fafb); }
.cht-pick-row.is-active { background: var(--red-soft, #FFE9E9); }
.cht-pick-row[hidden] { display: none; }

.cht-pick-row-clear { font-weight: 600; color: var(--ink-mute, #6b7280); }
.cht-pick-row-clear.is-active { color: var(--red, #FD292E); }

.cht-pick-row-project .cht-pick-info { flex: 1; min-width: 0; }
.cht-pick-row-project .cht-pick-name {
  font-size: 14px; font-weight: 700; color: var(--ink, #0f1722); display: block;
}
.cht-pick-row-project .cht-pick-dev {
  font-size: 12px; color: var(--ink-mute, #6b7280); margin-top: 2px;
}

.cht-pick-row-subzone {
  padding-left: 40px;  /* Indent subzone children */
  border-bottom-color: rgba(0,0,0,0.05);
}
.cht-pick-row-subzone .cht-pick-info { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
.cht-pick-row-subzone .cht-pick-name { font-size: 14px; color: var(--ink, #0f1722); font-weight: 500; }
.cht-pick-row-subzone .cht-pick-parent { font-size: 12px; color: var(--ink-mute, #6b7280); }

.cht-pick-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border, #d1d5db);
  background: #fff; flex-shrink: 0;
  position: relative; transition: border-color .12s ease;
}
.cht-pick-row.is-active .cht-pick-radio {
  border-color: var(--red, #FD292E);
}
.cht-pick-row.is-active .cht-pick-radio::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%; background: var(--red, #FD292E);
}

.cht-pick-empty {
  text-align: center; padding: 32px 20px;
  color: var(--ink-mute, #6b7280); font-size: 14px; font-style: italic;
}

/* Phase 14I.6 — Project picker modal popup trong flow đăng tin */
.cht-dt-pick-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cht-dt-pick-modal[hidden] { display: none; }
.cht-dt-pick-modal__backdrop {
  position: absolute; inset: 0; background: rgba(15,23,34,.45);
  cursor: pointer;
}
.cht-dt-pick-modal__shell {
  position: relative;
  background: #fff; border-radius: 14px;
  width: 100%; max-width: 520px;
  max-height: 86vh; min-height: 60vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 48px rgba(0,0,0,0.25);
  overflow: hidden;
}
.cht-dt-pick-modal__shell .cht-modal-head {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cht-dt-pick-modal__shell .cht-modal-head h3 { text-align: center; font-size: 16px; margin: 0; font-weight: 700; }
.cht-dt-pick-modal__shell .cht-modal-search { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--border, #e5e7eb); }
.cht-dt-pick-modal__shell .cht-modal-search > svg { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); }
.cht-dt-pick-modal__shell .cht-modal-search input { width: 100%; height: 40px; padding: 0 14px 0 42px; background: var(--surface-2, #f9fafb); border: 0; border-radius: 999px; outline: none; font-size: 14.5px; }
.cht-dt-pick-modal__shell .cht-modal-body { flex: 1; overflow-y: auto; }
.cht-dt-pick-modal__shell .cht-modal-foot { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border, #e5e7eb); }
.cht-dt-pick-modal__shell .cht-modal-foot .btn { flex: 1; height: 44px; }

/* Phase 14I lock — row visible nhưng combo/button disabled khi cha chưa pick
   batdongsan-style: label giữ màu bình thường, chỉ input/button có bg xám + cursor not-allowed.
   Lưu ý: target .cht-combo-control (bên trong .cht-combo) vì element này có background:var(--surface) overrides parent. */
.cht-form-row.is-locked label { color: var(--ink, #0f1722); }
.cht-form-row.is-locked .cht-combo-control,
.cht-form-row.is-locked .cht-modal-pick-btn {
  background-color: #f5f6f8 !important;
  border-color: var(--border, #e5e7eb) !important;
  cursor: not-allowed !important;
}
.cht-form-row.is-locked .cht-combo,
.cht-form-row.is-locked .cht-modal-pick-btn {
  pointer-events: none;
}
.cht-form-row.is-locked .cht-combo-input,
.cht-form-row.is-locked .cht-modal-pick-label {
  background-color: transparent !important;
  color: var(--ink-mute, #6b7280) !important;
  cursor: not-allowed !important;
}
.cht-form-row.is-locked .cht-combo-input::placeholder {
  color: var(--ink-mute, #6b7280) !important;
}
.cht-form-row.is-locked .cht-combo-chevron,
.cht-form-row.is-locked .cht-modal-pick-chevron {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14T — Tính thuế & phí giao dịch BĐS (page-tinh-thue-phi.php)
   Reuse pattern .cht-mort-* nhưng prefix .cht-tax-* để không xung đột.
   ═══════════════════════════════════════════════════════════════════════════ */

.cht-tax-page {
  background: linear-gradient(180deg, #FFE9E9 0%, #fff 200px);
  min-height: 100vh;
  padding: 16px 0 60px;
}

.cht-tax-page .wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.cht-tax-page .detail-crumb {
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cht-tax-page .detail-crumb a {
  color: var(--ink-mute, #6b7280);
  text-decoration: none;
}
.cht-tax-page .detail-crumb a:hover { color: var(--brand, #FD292E); }
.cht-tax-page .detail-crumb .sep { color: #cbd5e1; }
.cht-tax-page .detail-crumb .cur { color: var(--ink, #0f1722); font-weight: 600; }

/* ── Hero ── */
.cht-tax-hero {
  text-align: center;
  margin-bottom: 28px;
  padding: 20px 0;
}
.cht-tax-h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink, #0f1722);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.cht-tax-sub {
  font-size: 15px;
  color: var(--ink-mute, #6b7280);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Main grid ── */
.cht-tax-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 960px) {
  .cht-tax-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Input panel ── */
.cht-tax-input-panel {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

@media (max-width: 960px) {
  .cht-tax-input-panel {
    position: static;
    max-height: none;
  }
}

.cht-tax-panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 20px;
}

.cht-tax-field { margin-bottom: 20px; }
.cht-tax-field:last-child { margin-bottom: 0; }

.cht-tax-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
  margin-bottom: 8px;
}
.cht-tax-label-inline {
  font-weight: 500;
  font-size: 13px;
  margin-top: 4px;
}
.cht-tax-unit {
  font-size: 13px;
  color: var(--brand, #FD292E);
  font-weight: 600;
}

/* ── Role tabs ── */
.cht-tax-role-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cht-tax-role-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cht-tax-role-tab:hover {
  border-color: var(--brand, #FD292E);
  background: #fff;
}
.cht-tax-role-tab.is-active {
  border-color: var(--brand, #FD292E);
  background: #FFE9E9;
}
.cht-tax-role-tab span:not(.cht-tax-role-icon) {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
}
.cht-tax-role-tab small {
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
  font-weight: 400;
}
.cht-tax-role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand, #FD292E);
  margin-bottom: 4px;
}
.cht-tax-role-tab.is-active .cht-tax-role-icon {
  background: var(--brand, #FD292E);
  color: #fff;
}

/* ── Inputs ── */
.cht-tax-input-row {
  position: relative;
  margin-bottom: 8px;
}
.cht-tax-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #0f1722);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cht-tax-input:focus {
  outline: none;
  border-color: var(--brand, #FD292E);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, 0.12);
}
.cht-tax-input::-webkit-outer-spin-button,
.cht-tax-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cht-tax-price-fmt {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Slider ── */
.cht-tax-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--brand, #FD292E) 0%, var(--brand, #FD292E) var(--cht-tax-pct, 50%), #e5e7eb var(--cht-tax-pct, 50%), #e5e7eb 100%);
  border-radius: 4px;
  outline: none;
  margin: 12px 0 6px;
}
.cht-tax-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--brand, #FD292E);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cht-tax-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--brand, #FD292E);
  cursor: pointer;
}
.cht-tax-range-hint {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
}

/* ── Radio rows ── */
.cht-tax-radio-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cht-tax-radio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 12px 40px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}
.cht-tax-radio:hover { border-color: #cbd5e1; }
.cht-tax-radio input[type="radio"] {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 16px;
  height: 16px;
  accent-color: var(--brand, #FD292E);
  cursor: pointer;
}
.cht-tax-radio span:not(small) {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
}
.cht-tax-radio small {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  font-weight: 400;
}
.cht-tax-radio:has(input:checked) {
  border-color: var(--brand, #FD292E);
  background: #FFE9E9;
}

/* ── Switch ── */
.cht-tax-switch-row { margin-bottom: 8px; }
.cht-tax-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.cht-tax-switch input { display: none; }
.cht-tax-switch-track {
  width: 40px;
  height: 22px;
  background: #d1d5db;
  border-radius: 999px;
  position: relative;
  transition: background 0.15s ease;
}
.cht-tax-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.cht-tax-switch input:checked + .cht-tax-switch-track {
  background: var(--brand, #FD292E);
}
.cht-tax-switch input:checked + .cht-tax-switch-track .cht-tax-switch-thumb {
  transform: translateX(18px);
}
.cht-tax-switch-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
}

.cht-tax-broker-rate-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}

.cht-tax-hint {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ── Actions ── */
.cht-tax-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}
.cht-tax-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 14px;
}
.cht-tax-btn-ghost {
  background: #fff;
  color: var(--ink, #0f1722);
  border: 1px solid #d1d5db;
}
.cht-tax-btn-ghost:hover {
  background: #f9fafb;
  border-color: var(--brand, #FD292E);
  color: var(--brand, #FD292E);
}
.cht-tax-btn-link {
  background: #FFE9E9;
  color: var(--brand, #FD292E);
}
.cht-tax-btn-link:hover {
  background: var(--brand, #FD292E);
  color: #fff;
}

/* ── Result panel ── */
.cht-tax-result-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cht-tax-result-big {
  background: linear-gradient(135deg, #FD292E 0%, #b3262c 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(214, 58, 64, 0.18);
}
.cht-tax-result-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
  margin-bottom: 8px;
}
.cht-tax-result-value {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.cht-tax-result-sub {
  font-size: 13px;
  opacity: 0.92;
}
.cht-tax-result-sub strong { font-weight: 700; }

/* ── Breakdown table ── */
.cht-tax-breakdown {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
}
.cht-tax-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 14px;
}
.cht-tax-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cht-tax-breakdown-table th,
.cht-tax-breakdown-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}
.cht-tax-breakdown-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #e5e7eb;
}
.cht-tax-breakdown-table .cht-tax-col-rate,
.cht-tax-breakdown-table .cht-tax-col-amount {
  text-align: right;
  white-space: nowrap;
}
.cht-tax-breakdown-table tbody td:first-child {
  font-weight: 500;
  color: var(--ink, #0f1722);
}
.cht-tax-breakdown-table tbody td .cht-tax-row-note {
  display: block;
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
  font-weight: 400;
  margin-top: 2px;
}
.cht-tax-breakdown-table tfoot td {
  padding: 14px 8px;
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
  font-size: 15px;
}
.cht-tax-breakdown-table tfoot td:last-child {
  color: var(--brand, #FD292E);
  font-size: 16px;
}
.cht-tax-breakdown-table tr.cht-tax-row-exempt {
  opacity: 0.55;
}
.cht-tax-breakdown-table tr.cht-tax-row-exempt td:last-child {
  text-decoration: line-through;
  color: var(--ink-mute, #6b7280);
}

.cht-tax-breakdown-table-muted tbody td {
  color: var(--ink-mute, #6b7280);
}
.cht-tax-breakdown-table-muted tbody td:first-child {
  color: var(--ink, #0f1722);
}

/* ── Counterpart details ── */
.cht-tax-counterpart {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  overflow: hidden;
}
.cht-tax-counterpart summary {
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
}
.cht-tax-counterpart summary::-webkit-details-marker { display: none; }
.cht-tax-counterpart summary::after {
  content: '▾';
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  transition: transform 0.15s ease;
}
.cht-tax-counterpart[open] summary::after { transform: rotate(180deg); }
.cht-tax-counterpart summary:hover { background: #f9fafb; }
.cht-tax-counter-total {
  font-weight: 700;
  color: var(--brand, #FD292E);
  margin-left: auto;
  margin-right: 12px;
}
.cht-tax-counterpart .cht-tax-breakdown-table {
  border-top: 1px solid #f1f5f9;
  padding: 0 20px 16px;
  display: table;
  width: calc(100% - 40px);
  margin: 0 20px 16px;
}

/* ── Notes ── */
.cht-tax-notes {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
}
.cht-tax-notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cht-tax-notes-list li {
  padding: 12px 0;
  padding-left: 24px;
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink, #0f1722);
  border-bottom: 1px dashed #f1f5f9;
}
.cht-tax-notes-list li:last-child { border-bottom: none; }
.cht-tax-notes-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand, #FD292E);
}
.cht-tax-notes-list strong {
  font-weight: 700;
  color: var(--ink, #0f1722);
}

/* ── Disclaimer ── */
.cht-tax-disclaimer {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #9a3412;
}
.cht-tax-disclaimer strong { font-weight: 700; }

/* ── FAQ section ── */
.cht-tax-faq {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #f1f5f9;
}
.cht-tax-faq h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 20px;
}
.cht-tax-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.cht-tax-faq-item {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
}
.cht-tax-faq-item h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 8px;
}
.cht-tax-faq-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute, #6b7280);
  margin: 0;
}
.cht-tax-faq-item strong { color: var(--ink, #0f1722); font-weight: 600; }

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .cht-tax-h1 { font-size: 24px; }
  .cht-tax-sub { font-size: 14px; }
  .cht-tax-result-value { font-size: 30px; }
  .cht-tax-input-panel,
  .cht-tax-breakdown,
  .cht-tax-notes,
  .cht-tax-faq-item { padding: 16px; }
  .cht-tax-breakdown-table th,
  .cht-tax-breakdown-table td { padding: 8px 4px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14U/V/W — 3 tools BĐS chung pattern
   Reuse cấu trúc page layout từ .cht-tax-* (hero + 2-col grid + FAQ).
   Per-tool prefix riêng: .cht-bvr-* (Buy vs Rent) / .cht-aff-* (Affordability)
   / .cht-roi-* (ROI Investment).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared shell (page + hero + grid + crumb) ── */
.cht-bvr-page, .cht-aff-page, .cht-roi-page {
  background: linear-gradient(180deg, #FFE9E9 0%, #fff 200px);
  min-height: 100vh;
  padding: 16px 0 60px;
}
.cht-bvr-page .wrap, .cht-aff-page .wrap, .cht-roi-page .wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
.cht-bvr-page .detail-crumb,
.cht-aff-page .detail-crumb,
.cht-roi-page .detail-crumb {
  font-size: 13px;
  color: var(--ink-mute, #6b7280);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cht-bvr-page .detail-crumb a,
.cht-aff-page .detail-crumb a,
.cht-roi-page .detail-crumb a { color: var(--ink-mute, #6b7280); text-decoration: none; }
.cht-bvr-page .detail-crumb a:hover,
.cht-aff-page .detail-crumb a:hover,
.cht-roi-page .detail-crumb a:hover { color: var(--brand, #FD292E); }
.cht-bvr-page .detail-crumb .sep,
.cht-aff-page .detail-crumb .sep,
.cht-roi-page .detail-crumb .sep { color: #cbd5e1; }
.cht-bvr-page .detail-crumb .cur,
.cht-aff-page .detail-crumb .cur,
.cht-roi-page .detail-crumb .cur { color: var(--ink, #0f1722); font-weight: 600; }

.cht-bvr-hero, .cht-aff-hero, .cht-roi-hero {
  text-align: center;
  margin-bottom: 28px;
  padding: 20px 0;
}
.cht-bvr-h1, .cht-aff-h1, .cht-roi-h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink, #0f1722);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.cht-bvr-sub, .cht-aff-sub, .cht-roi-sub {
  font-size: 15px;
  color: var(--ink-mute, #6b7280);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.65;
}
.cht-bvr-sub strong, .cht-aff-sub strong, .cht-roi-sub strong { color: var(--ink, #0f1722); }

.cht-bvr-grid, .cht-aff-grid, .cht-roi-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .cht-bvr-grid, .cht-aff-grid, .cht-roi-grid { grid-template-columns: 1fr; }
}

.cht-bvr-input-panel, .cht-aff-input-panel, .cht-roi-input-panel {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
@media (max-width: 960px) {
  .cht-bvr-input-panel, .cht-aff-input-panel, .cht-roi-input-panel {
    position: static; max-height: none;
  }
}

.cht-bvr-panel-title, .cht-aff-panel-title, .cht-roi-panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 20px;
}

.cht-bvr-field, .cht-aff-field, .cht-roi-field { margin-bottom: 20px; }
.cht-bvr-field:last-child, .cht-aff-field:last-child, .cht-roi-field:last-child { margin-bottom: 0; }

.cht-bvr-label, .cht-aff-label, .cht-roi-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f1722);
  margin-bottom: 8px;
}
.cht-bvr-unit, .cht-aff-unit, .cht-roi-unit {
  font-size: 13px;
  color: var(--brand, #FD292E);
  font-weight: 600;
}

.cht-bvr-input, .cht-aff-input, .cht-roi-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #0f1722);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cht-bvr-input:focus, .cht-aff-input:focus, .cht-roi-input:focus {
  outline: none;
  border-color: var(--brand, #FD292E);
  box-shadow: 0 0 0 3px rgba(214, 58, 64, 0.12);
}
.cht-bvr-input::-webkit-outer-spin-button,
.cht-bvr-input::-webkit-inner-spin-button,
.cht-aff-input::-webkit-outer-spin-button,
.cht-aff-input::-webkit-inner-spin-button,
.cht-roi-input::-webkit-outer-spin-button,
.cht-roi-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cht-bvr-fmt, .cht-roi-fmt {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  margin-top: 4px;
  font-weight: 500;
}

.cht-bvr-slider, .cht-aff-slider, .cht-roi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--brand, #FD292E) 0%, var(--brand, #FD292E) var(--cht-tool-pct, 50%), #e5e7eb var(--cht-tool-pct, 50%), #e5e7eb 100%);
  border-radius: 4px;
  outline: none;
  margin: 12px 0 6px;
}
.cht-bvr-slider::-webkit-slider-thumb,
.cht-aff-slider::-webkit-slider-thumb,
.cht-roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--brand, #FD292E);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cht-bvr-slider::-moz-range-thumb,
.cht-aff-slider::-moz-range-thumb,
.cht-roi-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--brand, #FD292E);
  cursor: pointer;
}
.cht-bvr-range-hint, .cht-aff-range-hint, .cht-roi-range-hint {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
}

.cht-bvr-hint, .cht-aff-hint, .cht-roi-hint {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  margin: 8px 0 0;
  line-height: 1.5;
}

.cht-bvr-advanced, .cht-roi-advanced {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5e7eb;
}
.cht-bvr-advanced summary, .cht-roi-advanced summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand, #FD292E);
  margin-bottom: 16px;
  user-select: none;
  list-style: none;
}
.cht-bvr-advanced summary::-webkit-details-marker,
.cht-roi-advanced summary::-webkit-details-marker { display: none; }
.cht-bvr-advanced summary::before, .cht-roi-advanced summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
}
.cht-bvr-advanced[open] summary::before, .cht-roi-advanced[open] summary::before {
  transform: rotate(90deg);
}

.cht-bvr-actions, .cht-aff-actions, .cht-roi-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}
.cht-bvr-btn, .cht-aff-btn, .cht-roi-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 14px;
}
.cht-bvr-btn-ghost, .cht-aff-btn-ghost, .cht-roi-btn-ghost {
  background: #fff;
  color: var(--ink, #0f1722);
  border: 1px solid #d1d5db;
}
.cht-bvr-btn-ghost:hover, .cht-aff-btn-ghost:hover, .cht-roi-btn-ghost:hover {
  background: #f9fafb;
  border-color: var(--brand, #FD292E);
  color: var(--brand, #FD292E);
}
.cht-bvr-btn-link {
  background: #FFE9E9;
  color: var(--brand, #FD292E);
}
.cht-bvr-btn-link:hover {
  background: var(--brand, #FD292E);
  color: #fff;
}

.cht-bvr-result-panel, .cht-aff-result-panel, .cht-roi-result-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cht-bvr-disclaimer, .cht-aff-disclaimer, .cht-roi-disclaimer {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #9a3412;
}
.cht-bvr-disclaimer strong, .cht-aff-disclaimer strong, .cht-roi-disclaimer strong { font-weight: 700; }
.cht-bvr-disclaimer a, .cht-aff-disclaimer a, .cht-roi-disclaimer a { color: #9a3412; text-decoration: underline; }

.cht-bvr-section-title, .cht-aff-section-title, .cht-roi-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 14px;
}

.cht-bvr-faq, .cht-aff-faq, .cht-roi-faq {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #f1f5f9;
}
.cht-bvr-faq h2, .cht-aff-faq h2, .cht-roi-faq h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 20px;
}
.cht-bvr-faq-grid, .cht-aff-faq-grid, .cht-roi-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.cht-bvr-faq-item, .cht-aff-faq-item, .cht-roi-faq-item {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
}
.cht-bvr-faq-item h3, .cht-aff-faq-item h3, .cht-roi-faq-item h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #0f1722);
  margin: 0 0 8px;
}
.cht-bvr-faq-item p, .cht-aff-faq-item p, .cht-roi-faq-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute, #6b7280);
  margin: 0;
}
.cht-bvr-faq-item strong, .cht-aff-faq-item strong, .cht-roi-faq-item strong { color: var(--ink, #0f1722); font-weight: 600; }

@media (max-width: 640px) {
  .cht-bvr-h1, .cht-aff-h1, .cht-roi-h1 { font-size: 24px; }
  .cht-bvr-sub, .cht-aff-sub, .cht-roi-sub { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tool B — So sánh Mua vs Thuê (.cht-bvr-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.cht-bvr-verdict {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18);
}
.cht-bvr-verdict[data-cht-bvr-verdict-class="rent"] {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.18);
}
.cht-bvr-verdict-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
  margin-bottom: 8px;
}
.cht-bvr-verdict-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.cht-bvr-verdict-sub {
  font-size: 13px;
  opacity: 0.92;
}
.cht-bvr-verdict-sub strong { font-weight: 700; }

.cht-bvr-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .cht-bvr-compare { grid-template-columns: 1fr; }
}
.cht-bvr-compare-card {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.cht-bvr-compare-card[data-cht-bvr-mua] { border-top: 3px solid #10b981; }
.cht-bvr-compare-card[data-cht-bvr-thue] { border-top: 3px solid #6366f1; }
.cht-bvr-compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cht-bvr-compare-icon { font-size: 22px; }
.cht-bvr-compare-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-mute, #6b7280);
}
.cht-bvr-compare-total {
  background: #f9fafb;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cht-bvr-compare-total-label {
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.cht-bvr-compare-total-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #0f1722);
}
.cht-bvr-compare-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cht-bvr-compare-rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink, #0f1722);
  padding-bottom: 8px;
  border-bottom: 1px dashed #f1f5f9;
}
.cht-bvr-compare-rows li:last-child { border-bottom: none; padding-bottom: 0; }
.cht-bvr-compare-rows li span { color: var(--ink-mute, #6b7280); flex: 1; }
.cht-bvr-compare-rows li strong { font-weight: 700; color: var(--ink, #0f1722); white-space: nowrap; }
.cht-bvr-compare-rows li.is-positive strong { color: #059669; }
.cht-bvr-compare-rows li.cht-bvr-spacer { border-bottom: none; visibility: hidden; min-height: 21px; }

.cht-bvr-table-section {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
}
.cht-bvr-table-wrap { overflow-x: auto; }
.cht-bvr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cht-bvr-table th, .cht-bvr-table td {
  padding: 10px 8px;
  text-align: right;
  border-bottom: 1px solid #f1f5f9;
}
.cht-bvr-table th:first-child, .cht-bvr-table td:first-child {
  text-align: left;
  font-weight: 600;
}
.cht-bvr-table thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}
.cht-bvr-table td.is-positive { color: #059669; font-weight: 600; }
.cht-bvr-table td.is-negative { color: var(--brand, #FD292E); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tool C — Tính khả năng vay (.cht-aff-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.cht-aff-income-bar {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 16px 20px;
}
.cht-aff-income-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed #f1f5f9;
}
.cht-aff-income-row:last-child { border-bottom: none; }
.cht-aff-income-row span { color: var(--ink, #0f1722); }
.cht-aff-income-row strong { font-weight: 700; color: var(--ink, #0f1722); }
.cht-aff-income-row.is-minus span,
.cht-aff-income-row.is-minus strong { color: var(--ink-mute, #6b7280); }
.cht-aff-income-row.is-total {
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
  margin-top: 4px;
  padding-top: 10px;
}
.cht-aff-income-row.is-total span,
.cht-aff-income-row.is-total strong {
  font-weight: 700;
  font-size: 16px;
  color: var(--brand, #FD292E);
}

.cht-aff-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .cht-aff-tiers { grid-template-columns: 1fr; }
}
.cht-aff-tier {
  background: #fff;
  border: 1.5px solid #ECEEF1;
  border-radius: 16px;
  padding: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.cht-aff-tier.is-recommended {
  border-color: var(--brand, #FD292E);
  background: linear-gradient(180deg, #FFE9E9 0%, #fff 60%);
  box-shadow: 0 6px 16px rgba(214, 58, 64, 0.10);
  transform: translateY(-4px);
}
.cht-aff-tier-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand, #FD292E);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.cht-aff-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.cht-aff-tier-badge {
  background: #e0f2fe;
  color: #075985;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cht-aff-tier-badge-warn {
  background: #fef3c7;
  color: #92400e;
}
.cht-aff-tier.is-recommended .cht-aff-tier-badge {
  background: var(--brand, #FD292E);
  color: #fff;
}
.cht-aff-tier-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-mute, #6b7280);
}
.cht-aff-tier-loan {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f1f5f9;
}
.cht-aff-tier-label {
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.cht-aff-tier-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #0f1722);
  letter-spacing: -0.02em;
}
.cht-aff-tier.is-recommended .cht-aff-tier-value { color: var(--brand, #FD292E); }
.cht-aff-tier-sub {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  margin-top: 4px;
}
.cht-aff-tier-sub strong { color: var(--ink, #0f1722); font-weight: 700; }
.cht-aff-tier-bds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cht-aff-tier-bds small {
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cht-aff-tier-bds strong {
  font-size: 15px;
  color: var(--ink, #0f1722);
  font-weight: 700;
}

.cht-aff-warning {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: #92400e;
}
.cht-aff-warning strong { font-weight: 700; }

.cht-aff-cta-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--brand, #FD292E);
  color: #fff;
  border-radius: 16px;
  padding: 18px 22px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cht-aff-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(214, 58, 64, 0.25);
}
.cht-aff-cta-content { display: flex; flex-direction: column; gap: 2px; }
.cht-aff-cta-content strong { font-size: 16px; font-weight: 700; color: #fff; }
.cht-aff-cta-content span { font-size: 13px; opacity: 0.92; }
.cht-aff-cta-arrow { font-size: 28px; font-weight: 300; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tool D — Tính ROI đầu tư cho thuê (.cht-roi-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.cht-roi-verdict {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18);
}
.cht-roi-verdict[data-cht-roi-verdict-class="negative"] {
  background: linear-gradient(135deg, #FD292E 0%, #991b1b 100%);
  box-shadow: 0 8px 24px rgba(214, 58, 64, 0.18);
}
.cht-roi-verdict[data-cht-roi-verdict-class="neutral"] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.18);
}
.cht-roi-verdict-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
  margin-bottom: 8px;
}
.cht-roi-verdict-value {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.cht-roi-verdict-sub {
  font-size: 13px;
  opacity: 0.92;
}
.cht-roi-verdict-sub strong { font-weight: 700; }

.cht-roi-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 768px) {
  .cht-roi-kpis { grid-template-columns: repeat(2, 1fr); }
}
.cht-roi-kpi {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.cht-roi-kpi-label {
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}
.cht-roi-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink, #0f1722);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.cht-roi-kpi-value.is-negative { color: var(--brand, #FD292E); }
.cht-roi-kpi-value.is-positive { color: #059669; }
.cht-roi-kpi-hint {
  font-size: 11px;
  color: var(--ink-mute, #6b7280);
}

.cht-roi-loan-info {
  font-size: 12px;
  color: var(--ink-mute, #6b7280);
  margin-top: 4px;
}

.cht-roi-table-section {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
}
.cht-roi-table-wrap { overflow-x: auto; }
.cht-roi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cht-roi-table th, .cht-roi-table td {
  padding: 10px 8px;
  text-align: right;
  border-bottom: 1px solid #f1f5f9;
}
.cht-roi-table th:first-child, .cht-roi-table td:first-child {
  text-align: left;
  font-weight: 600;
}
.cht-roi-table thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}
.cht-roi-table td.is-positive { color: #059669; font-weight: 600; }
.cht-roi-table td.is-negative { color: var(--brand, #FD292E); font-weight: 600; }

.cht-roi-compare {
  background: #fff;
  border: 1px solid #ECEEF1;
  border-radius: 16px;
  padding: 20px;
}
.cht-roi-compare-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cht-roi-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink, #0f1722);
}
.cht-roi-compare-row strong {
  font-weight: 700;
  font-size: 15px;
}
.cht-roi-compare-row strong.is-positive { color: #059669; }
.cht-roi-compare-row strong.is-negative { color: var(--brand, #FD292E); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14X — Account pages (dashboard + lich-su-giao-dich + khuyen-mai + lead)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard premium 4-zone ── */
.cht-dash { display: flex; flex-direction: column; gap: 20px; }

.cht-dash-welcome {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    background: linear-gradient(135deg, #FFE9E9 0%, #fff 80%);
    border-radius: 16px; padding: 22px 24px; border: 1px solid #f1d4d4;
}
.cht-dash-greeting { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-dash-sub { margin: 0; font-size: 14px; color: var(--ink-mute, #6b7280); }
.cht-dash-cta-primary {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 18px; background: var(--brand, #FD292E); color: #fff;
    border-radius: 12px; font-weight: 600; font-size: 14px; text-decoration: none;
    transition: all 0.15s ease;
}
.cht-dash-cta-primary:hover { background: #b3262c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(214,58,64,0.25); }
/* Phase 14X.9 — Welcome stack trên phone (tránh ép rộng + CTA wrap xấu) */
@media (max-width: 640px) {
    .cht-dash-welcome { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
    .cht-dash-cta-primary { white-space: nowrap; }
}

/* Zone 1: KPI 4 cards */
.cht-dash-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 768px) { .cht-dash-kpis { grid-template-columns: repeat(2, 1fr); } }
.cht-dash-kpi {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 16px;
    text-decoration: none; color: var(--ink, #0f1722); transition: all 0.15s ease;
}
.cht-dash-kpi:hover { border-color: var(--brand, #FD292E); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.cht-dash-kpi-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #FFE9E9; color: var(--brand, #FD292E);
}
.cht-dash-kpi--wallet .cht-dash-kpi-icon { background: #d1fae5; color: #047857; }
.cht-dash-kpi--leads .cht-dash-kpi-icon  { background: #fef3c7; color: #92400e; }
.cht-dash-kpi--sold .cht-dash-kpi-icon   { background: #e0f2fe; color: #075985; }
.cht-dash-kpi-body { flex: 1; min-width: 0; }
.cht-dash-kpi-label { font-size: 12px; color: var(--ink-mute, #6b7280); margin-bottom: 2px; }
.cht-dash-kpi-value { font-size: 20px; font-weight: 800; color: var(--ink, #0f1722); line-height: 1.1; }

/* Zone 2: Quick actions */
.cht-dash-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 640px) { .cht-dash-actions { grid-template-columns: repeat(2, 1fr); } }
.cht-dash-action {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; background: #fff; border: 1px solid #ECEEF1; border-radius: 12px;
    text-decoration: none; color: var(--ink, #0f1722); font-size: 13px; font-weight: 600;
    transition: all 0.15s ease;
}
.cht-dash-action:hover { background: #FFE9E9; border-color: var(--brand, #FD292E); color: var(--brand, #FD292E); }
.cht-dash-action-icon {
    width: 36px; height: 36px; border-radius: 50%; background: #f9fafb;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand, #FD292E);
}

/* Zone 3: Insight 2-col */
.cht-dash-insights {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
}
@media (max-width: 768px) { .cht-dash-insights { grid-template-columns: minmax(0, 1fr); } }
.cht-dash-insight {
    background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 20px;
}
.cht-dash-insight-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cht-dash-insight-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-dash-insight-link { font-size: 12px; color: var(--brand, #FD292E); text-decoration: none; font-weight: 600; }
.cht-dash-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cht-dash-top-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #f1f5f9; }
.cht-dash-top-list li:last-child { border-bottom: none; }
.cht-dash-top-list a { color: var(--ink, #0f1722); text-decoration: none; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cht-dash-top-list a:hover { color: var(--brand, #FD292E); }
.cht-dash-top-views { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-mute, #6b7280); white-space: nowrap; }
.cht-dash-promo-banner {
    display: flex; align-items: center; gap: 12px; padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px; text-decoration: none; transition: all 0.15s ease;
}
.cht-dash-promo-banner:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,158,11,0.18); }
.cht-dash-promo-icon { font-size: 28px; }
.cht-dash-promo-banner strong { display: block; color: #78350f; font-size: 15px; font-weight: 700; }
.cht-dash-promo-banner span { font-size: 12px; color: #92400e; }
.cht-dash-empty { font-size: 13px; color: var(--ink-mute, #6b7280); margin: 0; padding: 12px 0; }
.cht-dash-empty a { color: var(--brand, #FD292E); text-decoration: none; font-weight: 600; }

/* Zone 4: Activity feed */
.cht-dash-feed { background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 20px; }
.cht-dash-feed-head h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-dash-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cht-dash-feed-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px dashed #f1f5f9;
}
.cht-dash-feed-item:last-child { border-bottom: none; }
.cht-dash-feed-icon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: var(--ink-mute, #6b7280);
}
.cht-dash-feed-item--wallet .cht-dash-feed-icon { background: #d1fae5; color: #047857; }
.cht-dash-feed-item--listing .cht-dash-feed-icon { background: #FFE9E9; color: var(--brand, #FD292E); }
.cht-dash-feed-body { flex: 1; min-width: 0; }
.cht-dash-feed-body a { color: var(--ink, #0f1722); text-decoration: none; font-weight: 600; font-size: 14px; }
.cht-dash-feed-body a:hover { color: var(--brand, #FD292E); }
.cht-dash-feed-body span { font-size: 14px; color: var(--ink, #0f1722); }
.cht-dash-feed-body small { display: block; font-size: 12px; color: var(--ink-mute, #6b7280); margin-top: 2px; }
.cht-dash-feed-amt--credit { color: #047857; font-weight: 700; }
.cht-dash-feed-amt--debit  { color: var(--brand, #FD292E); font-weight: 700; }
.cht-dash-feed-time { font-size: 12px; color: var(--ink-mute, #6b7280); white-space: nowrap; }

/* Phase 14X.9 — Modal "Tự động đăng lại" */
.cht-ar-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.5); padding: 16px; }
.cht-ar-overlay.is-open { display: flex; }
.cht-ar-box { background: #fff; border-radius: 16px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; animation: chtArIn .18s ease; }
@keyframes chtArIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cht-ar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef0f3; }
.cht-ar-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink,#0f1722); }
.cht-ar-x { background: transparent; border: 0; font-size: 24px; line-height: 1; color: #9aa3af; cursor: pointer; padding: 0 4px; }
.cht-ar-x:hover { color: var(--ink,#0f1722); }
.cht-ar-body { padding: 20px; }
.cht-ar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cht-ar-label { font-size: 15px; font-weight: 600; color: var(--ink,#0f1722); }
.cht-ar-sub { font-size: 12.5px; color: var(--ink-mute,#6b7280); margin-top: 3px; }
.cht-ar-stepper { display: inline-flex; align-items: center; gap: 14px; }
.cht-ar-stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d1d5db; background: #fff; font-size: 18px; color: var(--ink,#0f1722); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cht-ar-stepper button:hover { background: #f3f4f6; }
.cht-ar-count { min-width: 24px; text-align: center; font-size: 17px; font-weight: 700; }
.cht-ar-notes { margin: 18px 0 0; padding: 14px 14px 14px 30px; background: #f8fafc; border-radius: 10px; }
.cht-ar-notes li { font-size: 13px; color: #475569; line-height: 1.55; margin-bottom: 4px; }
.cht-ar-notes li:last-child { margin-bottom: 0; }
.cht-ar-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #eef0f3; }
.cht-ar-cancel { background: #fff; border: 1px solid #d1d5db; color: #475569; border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.cht-ar-cancel:hover { background: #f9fafb; }
.cht-ar-confirm { background: var(--brand,#FD292E); border: 0; color: #fff; border-radius: 10px; padding: 10px 20px; font-weight: 600; font-size: 14px; cursor: pointer; }
.cht-ar-confirm:hover { background: #b3262c; }

/* Phase 14X.9 — Logo ảnh (thay wordmark inline).
 * Scope cao + !important để thắng rule WC `body.woocommerce-account img` (ghi đè height ở trang account). */
.hdr .cht-logo-img, .mobile-menu .cht-logo-img { height: 28px !important; width: auto !important; max-width: none !important; display: block; }
.ft-logo .cht-logo-img { height: 44px !important; width: auto !important; max-width: none !important; display: block; }
@media (max-width: 720px) { .hdr .cht-logo-img, .mobile-menu .cht-logo-img { height: 26px !important; } }

/* ═══════════ Transaction history (cht-tx-*) ═══════════ */
.cht-tx-page {
    background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 24px;
}
.cht-tx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cht-tx-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-tx-sub { margin: 0; font-size: 13px; color: var(--ink-mute, #6b7280); }
.cht-tx-sub strong { color: var(--brand, #FD292E); }
.cht-tx-btn-export {
    height: 38px; padding: 0 14px; border: 1px solid #d1d5db; border-radius: 10px;
    background: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.cht-tx-btn-export:hover { background: #f9fafb; border-color: var(--brand, #FD292E); color: var(--brand, #FD292E); }

.cht-tx-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cht-tx-pill {
    height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #e5e7eb;
    background: #fff; cursor: pointer; font-size: 13px; color: var(--ink, #0f1722);
}
.cht-tx-pill.is-active { background: var(--brand, #FD292E); color: #fff; border-color: var(--brand, #FD292E); }
.cht-tx-pill:hover:not(.is-active) { border-color: var(--brand, #FD292E); color: var(--brand, #FD292E); }

.cht-tx-table-wrap { overflow-x: auto; } /* Phase 18 — đã nằm trong .cht-tx-page card → bỏ viền/bo riêng (chống border lồng border) */
.cht-tx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cht-tx-table th, .cht-tx-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.cht-tx-table thead th { font-size: 11px; font-weight: 600; color: var(--ink-mute, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid #e5e7eb; white-space: nowrap; }
.cht-tx-col-amount { text-align: right; white-space: nowrap; }
.cht-tx-badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
    border-radius: 6px; font-size: 11px; font-weight: 600;
}
.cht-tx-badge--credit { background: #d1fae5; color: #047857; }
.cht-tx-badge--debit, .cht-tx-badge--boost, .cht-tx-badge--vip, .cht-tx-badge--promo { background: #FFE9E9; color: var(--brand, #FD292E); }
.cht-tx-badge--boost  { background: #fef3c7; color: #92400e; }
.cht-tx-badge--vip    { background: #e0f2fe; color: #075985; }
.cht-tx-badge--promo  { background: #fae8ff; color: #86198f; }
.cht-tx-amt--credit { color: #047857; font-weight: 700; }
.cht-tx-amt--debit  { color: var(--brand, #FD292E); font-weight: 700; }
.cht-tx-balance { color: var(--ink, #0f1722); font-weight: 600; }
.cht-tx-ref-link { display: inline-block; font-size: 11px; color: var(--brand, #FD292E); text-decoration: none; margin-left: 6px; }
.cht-tx-empty { padding: 40px 20px; text-align: center; color: var(--ink-mute, #6b7280); }
.cht-tx-empty a { color: var(--brand, #FD292E); font-weight: 600; }

/* ═══════════ Voucher hub (cht-promo-*) ═══════════ */
.cht-promo-page { display: flex; flex-direction: column; gap: 20px; }
.cht-promo-head { padding: 24px; background: linear-gradient(135deg, #fef3c7 0%, #fff 80%); border-radius: 16px; border: 1px solid #fde68a; }
.cht-promo-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-promo-sub { margin: 0; font-size: 13px; color: #92400e; }

.cht-promo-tabs { display: flex; gap: 4px; padding: 6px; background: #f9fafb; border-radius: 12px; }
.cht-promo-tab {
    flex: 1; height: 40px; padding: 0 14px; background: transparent; border: none;
    cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-mute, #6b7280);
    border-radius: 8px; transition: all 0.15s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.cht-promo-tab:hover { background: #fff; }
.cht-promo-tab.is-active { background: #fff; color: var(--ink, #0f1722); box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.cht-promo-tab-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
    padding: 0 6px; background: var(--brand, #FD292E); color: #fff;
    border-radius: 999px; font-size: 11px; font-weight: 700;
}
.cht-promo-tab-sm { display: none; }
/* Phase 14X.9 — Mobile: nhãn "Có thể thu thập" quá dài → rút gọn "Khả dụng" + nowrap + font nhỏ cho vừa 3 tab */
@media (max-width: 640px) {
    .cht-promo-tabs { padding: 4px; gap: 2px; }
    .cht-promo-tab { font-size: 12.5px; padding: 0 6px; gap: 4px; white-space: nowrap; }
    .cht-promo-tab-lg { display: none; }
    .cht-promo-tab-sm { display: inline; }
    .cht-promo-tab-count { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
}
.cht-promo-tabpane { display: none; }
.cht-promo-tabpane.is-active { display: block; }
.cht-promo-section-title { margin: 16px 0 12px; font-size: 15px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cht-promo-grid--muted .cht-promo-card { opacity: 0.6; }
.cht-promo-card {
    display: flex; align-items: stretch; gap: 12px; background: #fff;
    border: 1px solid #ECEEF1; border-radius: 16px; overflow: hidden;
    position: relative;
}
.cht-promo-card-left {
    width: 100px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand, #FD292E) 0%, #b3262c 100%);
    color: #fff; padding: 16px 8px; text-align: center;
}
.cht-promo-card--credit .cht-promo-card-left { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.cht-promo-card--free   .cht-promo-card-left { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.cht-promo-card--discount .cht-promo-card-left { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.cht-promo-card-value { font-size: 26px; font-weight: 800; line-height: 1.1; }
.cht-promo-card-type { font-size: 11px; opacity: 0.92; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.cht-promo-card-body { flex: 1; padding: 14px 12px; min-width: 0; }
.cht-promo-card-label { font-size: 14px; font-weight: 700; color: var(--ink, #0f1722); margin-bottom: 4px; }
.cht-promo-card-desc { font-size: 12px; color: var(--ink-mute, #6b7280); margin-bottom: 6px; line-height: 1.4; }
.cht-promo-card-exp { font-size: 11px; color: var(--ink-mute, #6b7280); }
.cht-promo-card-code { font-size: 11px; color: var(--ink-mute, #6b7280); margin-top: 4px; }
.cht-promo-card-code code { background: #f9fafb; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, monospace; color: var(--brand, #FD292E); }
.cht-promo-card-action { display: flex; align-items: center; padding: 0 14px 0 0; }
.cht-promo-btn {
    height: 36px; padding: 0 14px; border: none; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 600; white-space: nowrap; transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.cht-promo-btn-claim { background: var(--brand, #FD292E); color: #fff; }
.cht-promo-btn-claim:hover { background: #b3262c; }
.cht-promo-btn-claim:disabled, .cht-promo-btn-claim.is-claimed { background: #d1fae5; color: #047857; cursor: default; }
.cht-promo-btn-use { background: #d1fae5; color: #047857; }
.cht-promo-btn-use:hover { background: #047857; color: #fff; }
.cht-promo-btn-primary { background: var(--brand, #FD292E); color: #fff; }
.cht-promo-status { font-size: 12px; color: var(--ink-mute, #6b7280); font-weight: 600; }
.cht-promo-status--used { color: #047857; }
.cht-promo-status--expired { color: #991b1b; }
.cht-promo-empty { padding: 60px 20px; text-align: center; }
.cht-promo-empty-icon { font-size: 48px; margin-bottom: 12px; }
.cht-promo-empty p { color: var(--ink-mute, #6b7280); font-size: 14px; }

.cht-promo-code-card {
    background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 24px;
    max-width: 500px; margin: 0 auto;
}
.cht-promo-code-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-promo-code-card p { margin: 0 0 16px; font-size: 13px; color: var(--ink-mute, #6b7280); line-height: 1.5; }
.cht-promo-code-form { display: flex; gap: 8px; }
.cht-promo-code-form input {
    flex: 1; height: 44px; padding: 0 14px; border: 1px solid #d1d5db; border-radius: 10px;
    font-size: 14px; font-weight: 600; text-transform: uppercase;
}
.cht-promo-code-form input:focus { outline: none; border-color: var(--brand, #FD292E); box-shadow: 0 0 0 3px rgba(214,58,64,0.12); }
.cht-promo-code-form .cht-promo-btn { height: 44px; padding: 0 20px; }
.cht-promo-code-hint { margin: 12px 0 0 !important; font-size: 13px; min-height: 18px; }
.cht-promo-code-hint.is-error { color: var(--brand, #FD292E); }
.cht-promo-code-hint.is-ok { color: #047857; }

/* ═══════════ Lead/Khách hàng (cht-lead-*) ═══════════ */
.cht-lead-page { display: flex; flex-direction: column; gap: 16px; }
.cht-lead-head { margin-bottom: 16px; } /* header phẳng — đồng bộ với Tin đăng / Lịch sử giao dịch */
.cht-lead-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-lead-sub { margin: 0; font-size: 13px; color: var(--ink-mute, #6b7280); }

.cht-lead-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .cht-lead-stats { grid-template-columns: repeat(2, 1fr); } }
.cht-lead-stat {
    background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 14px 16px;
}
.cht-lead-stat--warn { border-color: #fde68a; background: #fef3c7; }
.cht-lead-stat-label { font-size: 11px; color: var(--ink-mute, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.cht-lead-stat-value { font-size: 22px; font-weight: 800; color: var(--ink, #0f1722); }
.cht-lead-stat--warn .cht-lead-stat-value { color: #92400e; }

.cht-lead-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cht-lead-pill {
    height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #e5e7eb;
    background: #fff; cursor: pointer; font-size: 13px; color: var(--ink, #0f1722);
}
.cht-lead-pill.is-active { background: var(--brand, #FD292E); color: #fff; border-color: var(--brand, #FD292E); }

/* Lưới responsive — card ~300px, tự xếp 2-3 cột/desktop, 1 cột/mobile (chuẩn UX dashboard) */
.cht-lead-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: stretch; }
.cht-lead-card {
    display: flex; gap: 14px; padding: 16px; background: #fff;
    border: 1px solid #ECEEF1; border-radius: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cht-lead-card:hover { border-color: #d1d5db; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,34,.07); }
.cht-lead-card--contacted { background: #f0fdf4; border-color: #bbf7d0; }
.cht-lead-card--closed { opacity: 0.6; background: #f9fafb; }
.cht-lead-card-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
}
.cht-lead-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cht-lead-card-avatar-fallback { color: var(--ink-mute, #6b7280); }
.cht-lead-card-body { flex: 1; min-width: 0; }
.cht-lead-card-row1 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.cht-lead-card-name { font-size: 15px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-lead-card-phone { font-size: 13px; color: var(--brand, #FD292E); text-decoration: none; font-weight: 600; }
.cht-lead-card-phone:hover { text-decoration: underline; }
.cht-lead-card-source { font-size: 11px; padding: 2px 8px; background: #e0f2fe; color: #075985; border-radius: 6px; font-weight: 600; }
.cht-lead-card-row2 { font-size: 13px; color: var(--ink-mute, #6b7280); margin-bottom: 6px; }
.cht-lead-card-row2 a { color: var(--ink, #0f1722); text-decoration: none; font-weight: 600; }
.cht-lead-card-row2 a:hover { color: var(--brand, #FD292E); }
.cht-lead-card-note { font-size: 12px; padding: 8px 10px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 4px; color: #78350f; }
.cht-lead-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.cht-lead-card-time { font-size: 11px; color: var(--ink-mute, #6b7280); white-space: nowrap; }
.cht-lead-card-actions { display: flex; gap: 4px; }
.cht-lead-action {
    width: 32px; height: 32px; padding: 0; border: 1px solid #e5e7eb;
    border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px;
}
.cht-lead-action:hover { border-color: var(--brand, #FD292E); background: #FFE9E9; }
.cht-lead-action--contact:hover { color: #047857; background: #d1fae5; border-color: #047857; }
.cht-lead-action--close:hover { color: var(--brand, #FD292E); }

.cht-lead-empty { padding: 60px 20px; text-align: center; background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; }
.cht-lead-empty-icon { color: var(--ink-mute, #6b7280); margin-bottom: 12px; opacity: 0.5; display: flex; justify-content: center; }
.cht-lead-empty h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink, #0f1722); }
.cht-lead-empty p { margin: 0 0 16px; font-size: 14px; color: var(--ink-mute, #6b7280); }
.cht-lead-empty-cta { color: var(--brand, #FD292E); font-weight: 600; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14X.3 — Support page (.cht-support-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.cht-support-page { background: linear-gradient(180deg, #FFE9E9 0%, #fff 240px); min-height: 100vh; padding: 16px 0 60px; }
.cht-support-page .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.cht-support-page .detail-crumb { font-size: 13px; color: var(--ink-mute,#6b7280); margin-bottom: 20px; display:flex; gap:6px; }
.cht-support-page .detail-crumb a { color: var(--ink-mute,#6b7280); text-decoration: none; }
.cht-support-page .detail-crumb .cur { color: var(--ink,#0f1722); font-weight: 600; }
.cht-support-page .detail-crumb .sep { color: #cbd5e1; }

.cht-support-hero { text-align: center; padding: 40px 20px 32px; }
.cht-support-h1 { font-size: 36px; font-weight: 800; color: var(--ink,#0f1722); margin: 0 0 12px; letter-spacing: -0.02em; }
.cht-support-sub { font-size: 16px; color: var(--ink-mute,#6b7280); margin: 0 auto 24px; max-width: 600px; }
.cht-support-search { position: relative; max-width: 540px; margin: 0 auto; }
.cht-support-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-mute,#6b7280); }
.cht-support-search input {
    width: 100%; height: 52px; padding: 0 16px 0 48px;
    border: 1px solid #d1d5db; border-radius: 14px; font-size: 15px;
    background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.cht-support-search input:focus { outline: none; border-color: var(--brand,#FD292E); box-shadow: 0 0 0 4px rgba(214,58,64,0.12); }

.cht-support-cats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-bottom: 40px;
}
@media (max-width: 768px) { .cht-support-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cht-support-cats { grid-template-columns: 1fr; } }
.cht-support-cat {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 20px 16px; background: #fff;
    border: 1px solid #ECEEF1; border-radius: 14px; cursor: pointer;
    transition: all 0.15s ease;
}
.cht-support-cat:hover { transform: translateY(-2px); border-color: var(--brand,#FD292E); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.cht-support-cat-emoji { font-size: 28px; }
.cht-support-cat-label { font-size: 14px; font-weight: 700; color: var(--ink,#0f1722); }
.cht-support-cat-count { font-size: 12px; color: var(--ink-mute,#6b7280); }

.cht-support-faq { background: #fff; border: 1px solid #ECEEF1; border-radius: 20px; padding: 28px; margin-bottom: 32px; }
.cht-support-faq-head { margin-bottom: 20px; }
.cht-support-faq-head h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; color: var(--ink,#0f1722); }
.cht-support-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cht-support-pill {
    height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #e5e7eb;
    background: #fff; cursor: pointer; font-size: 12px; color: var(--ink,#0f1722);
}
.cht-support-pill.is-active { background: var(--brand,#FD292E); color: #fff; border-color: var(--brand,#FD292E); }
.cht-support-faq-list { display: flex; flex-direction: column; gap: 8px; }
.cht-support-faq-item { border: 1px solid #ECEEF1; border-radius: 12px; padding: 16px 20px; transition: all 0.15s ease; }
.cht-support-faq-item:hover { border-color: var(--brand,#FD292E); }
.cht-support-faq-item summary { font-weight: 600; cursor: pointer; font-size: 15px; color: var(--ink,#0f1722); list-style: none; user-select: none; }
.cht-support-faq-item summary::after { content: '+'; float: right; transition: transform 0.15s ease; color: var(--ink-mute,#6b7280); font-weight: 300; font-size: 18px; }
.cht-support-faq-item[open] summary::after { transform: rotate(45deg); }
.cht-support-faq-body { margin-top: 12px; font-size: 14px; color: var(--ink-mute,#6b7280); line-height: 1.6; }
.cht-support-faq-body a { color: var(--brand,#FD292E); text-decoration: none; font-weight: 600; }
.cht-support-faq-empty { padding: 30px; text-align: center; color: var(--ink-mute,#6b7280); }

.cht-support-contact-card { background: linear-gradient(135deg, var(--brand,#FD292E) 0%, #b3262c 100%); color: #fff; border-radius: 20px; padding: 32px; text-align: center; }
.cht-support-contact-card h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #fff; }
.cht-support-contact-card > p { margin: 0 0 24px; font-size: 14px; opacity: 0.92; }
.cht-support-contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 768px) { .cht-support-contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cht-support-contact-grid { grid-template-columns: 1fr; } }
.cht-support-contact-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 18px 12px; background: rgba(255,255,255,0.15); border-radius: 14px;
    text-decoration: none; color: #fff; transition: all 0.15s ease;
    backdrop-filter: blur(8px);
}
.cht-support-contact-item:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }
.cht-support-contact-icon { font-size: 28px; margin-bottom: 4px; }
.cht-support-contact-item strong { font-size: 14px; font-weight: 700; color: #fff; }
.cht-support-contact-item span { font-size: 13px; opacity: 0.92; }
.cht-support-contact-item small { font-size: 11px; opacity: 0.75; }

@media (max-width: 640px) { .cht-support-h1 { font-size: 26px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14X.4 — Broker archive (.cht-broker-arc-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.cht-broker-archive-page { background: linear-gradient(180deg, #FFE9E9 0%, #fff 240px); min-height: 100vh; padding: 16px 0 60px; }
.cht-broker-archive-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.cht-broker-archive-page .detail-crumb { font-size: 13px; color: var(--ink-mute,#6b7280); margin-bottom: 20px; display:flex; gap:6px; }
.cht-broker-archive-page .detail-crumb a { color: var(--ink-mute,#6b7280); text-decoration: none; }
.cht-broker-archive-page .detail-crumb .cur { color: var(--ink,#0f1722); font-weight: 600; }
.cht-broker-archive-page .detail-crumb .sep { color: #cbd5e1; }

.cht-broker-arc-hero { text-align: center; padding: 32px 20px; }
.cht-broker-arc-h1 { font-size: 32px; font-weight: 800; color: var(--ink,#0f1722); margin: 0 0 8px; }
.cht-broker-arc-sub { font-size: 15px; color: var(--ink-mute,#6b7280); max-width: 680px; margin: 0 auto 24px; }
.cht-broker-arc-stats { display: inline-flex; gap: 32px; padding: 16px 24px; background: #fff; border: 1px solid #ECEEF1; border-radius: 14px; }
.cht-broker-arc-stats > div { text-align: center; }
.cht-broker-arc-stats strong { display: block; font-size: 22px; font-weight: 800; color: var(--brand,#FD292E); }
.cht-broker-arc-stats span { font-size: 12px; color: var(--ink-mute,#6b7280); }
.cht-broker-arc-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.cht-broker-arc-pill {
    height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid #e5e7eb;
    background: #fff; cursor: pointer; font-size: 13px; color: var(--ink,#0f1722);
}
.cht-broker-arc-pill.is-active { background: var(--brand,#FD292E); color: #fff; border-color: var(--brand,#FD292E); }
.cht-broker-arc-pill:hover:not(.is-active) { border-color: var(--brand,#FD292E); color: var(--brand,#FD292E); }

.cht-broker-arc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
@media (max-width: 1024px) { .cht-broker-arc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .cht-broker-arc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cht-broker-arc-grid { grid-template-columns: 1fr; } }

.cht-broker-arc-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 24px 16px;
    text-align: center; text-decoration: none; color: var(--ink,#0f1722);
    transition: all 0.15s ease;
}
.cht-broker-arc-card:hover { transform: translateY(-4px); border-color: var(--brand,#FD292E); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.cht-broker-arc-card-avatar { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: #f1f5f9; }
.cht-broker-arc-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cht-broker-arc-card-verified {
    position: absolute; bottom: 0; right: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: #047857; color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.cht-broker-arc-card-name { font-size: 15px; font-weight: 700; color: var(--ink,#0f1722); margin-top: 4px; }
.cht-broker-arc-card-role { padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.cht-broker-arc-card-role--agency { background: #fae8ff; color: #86198f; }
.cht-broker-arc-card-role--pro    { background: #e0f2fe; color: #075985; }
.cht-broker-arc-card-role--free   { background: #f1f5f9; color: #475569; }
.cht-broker-arc-card-rating { display: flex; align-items: center; gap: 4px; }
.cht-broker-arc-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.cht-broker-arc-rating-num { font-size: 13px; font-weight: 700; color: var(--ink,#0f1722); }
.cht-broker-arc-reviews { font-size: 12px; color: var(--ink-mute,#6b7280); }
.cht-broker-arc-card-stats { display: flex; gap: 20px; padding: 12px 0; border-top: 1px dashed #f1f5f9; border-bottom: 1px dashed #f1f5f9; width: 100%; }
.cht-broker-arc-card-stats > div { flex: 1; text-align: center; }
.cht-broker-arc-card-stats strong { display: block; font-size: 16px; font-weight: 700; color: var(--ink,#0f1722); }
.cht-broker-arc-card-stats span { font-size: 11px; color: var(--ink-mute,#6b7280); }
.cht-broker-arc-card-cta { font-size: 13px; color: var(--brand,#FD292E); font-weight: 600; margin-top: 4px; }
.cht-broker-arc-empty { padding: 60px 20px; text-align: center; color: var(--ink-mute,#6b7280); background: #fff; border-radius: 16px; }
.cht-broker-arc-pagi { display: flex; justify-content: center; gap: 4px; margin-top: 32px; flex-wrap: wrap; }
.cht-broker-arc-pagi .page-numbers { padding: 8px 12px; border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; text-decoration: none; color: var(--ink,#0f1722); font-size: 13px; }
.cht-broker-arc-pagi .page-numbers.current { background: var(--brand,#FD292E); color: #fff; border-color: var(--brand,#FD292E); }
.cht-broker-arc-pagi .page-numbers:hover:not(.current) { background: #FFE9E9; border-color: var(--brand,#FD292E); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14X.4 — Broker detail (.cht-broker-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.cht-broker-detail-page { background: #f9fafb; min-height: 100vh; padding-bottom: 60px; }
.cht-broker-detail-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cht-broker-detail-page .detail-crumb { padding-top: 16px; font-size: 13px; color: var(--ink-mute,#6b7280); margin-bottom: 16px; display:flex; gap:6px; flex-wrap: wrap; }
.cht-broker-detail-page .detail-crumb a { color: var(--ink-mute,#6b7280); text-decoration: none; }
.cht-broker-detail-page .detail-crumb .cur { color: var(--ink,#0f1722); font-weight: 600; }
.cht-broker-detail-page .detail-crumb .sep { color: #cbd5e1; }

.cht-broker-hero {
    background-size: cover; background-position: center;
    border-radius: 20px; padding: 60px 32px 32px;
    margin-bottom: 24px; min-height: 220px;
    display: flex; align-items: flex-end;
}
.cht-broker-hero-content { display: flex; gap: 20px; align-items: flex-end; width: 100%; }
.cht-broker-hero-avatar { position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: #fff; border: 4px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.2); flex-shrink: 0; }
.cht-broker-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cht-broker-hero-verified {
    position: absolute; bottom: 4px; right: 4px;
    width: 28px; height: 28px; border-radius: 50%;
    background: #047857; color: #fff; font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff;
}
.cht-broker-hero-meta { flex: 1; min-width: 0; color: #fff; }
.cht-broker-hero-name { margin: 0 0 6px; font-size: 28px; font-weight: 800; color: #fff; }
.cht-broker-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cht-broker-hero-role { padding: 3px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.cht-broker-hero-role--agency { background: #fae8ff; color: #86198f; }
.cht-broker-hero-role--pro    { background: #e0f2fe; color: #075985; }
.cht-broker-hero-role--free   { background: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(4px); }
.cht-broker-hero-trust { padding: 3px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #d1fae5; color: #047857; }
.cht-broker-hero-city  { padding: 3px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.2); color: #fff; }
.cht-broker-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,0.95); }

.cht-broker-body { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
@media (max-width: 1024px) { .cht-broker-body { grid-template-columns: 1fr; } }

.cht-broker-main { display: flex; flex-direction: column; gap: 16px; }
.cht-broker-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 640px) { .cht-broker-kpis { grid-template-columns: repeat(2, 1fr); } }
.cht-broker-kpi { background: #fff; border: 1px solid #ECEEF1; border-radius: 12px; padding: 16px; text-align: center; }
.cht-broker-kpi-label { font-size: 11px; color: var(--ink-mute,#6b7280); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.cht-broker-kpi-value { font-size: 22px; font-weight: 800; color: var(--ink,#0f1722); }

.cht-broker-about, .cht-broker-listings, .cht-broker-reviews {
    background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 24px;
}
.cht-broker-about h2, .cht-broker-listings h2, .cht-broker-reviews h2 {
    margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--ink,#0f1722);
}
.cht-broker-about p { margin: 0; font-size: 14px; color: var(--ink,#0f1722); line-height: 1.65; }
.cht-broker-about-empty, .cht-broker-listings-empty, .cht-broker-reviews-empty {
    color: var(--ink-mute,#6b7280); font-style: italic;
}
.cht-broker-listings-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cht-broker-listings-head h2 { margin: 0; }
.cht-broker-listings-all { font-size: 13px; color: var(--brand,#FD292E); text-decoration: none; font-weight: 600; }
.cht-broker-listings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .cht-broker-listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cht-broker-listings-grid { grid-template-columns: 1fr; } }

.cht-broker-contact { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; align-self: flex-start; }
@media (max-width: 1024px) { .cht-broker-contact { position: static; } }
.cht-broker-contact-card { background: #fff; border: 1px solid #ECEEF1; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cht-broker-contact-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink,#0f1722); }
.cht-broker-contact-phone, .cht-broker-contact-zalo, .cht-broker-contact-save, .cht-broker-contact-share {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border: 1px solid #e5e7eb; border-radius: 12px;
    background: #fff; cursor: pointer; text-decoration: none; color: var(--ink,#0f1722);
    font-size: 14px; font-weight: 600; text-align: left; width: 100%;
    transition: all 0.15s ease;
}
.cht-broker-contact-phone { background: var(--brand,#FD292E); color: #fff; border-color: var(--brand,#FD292E); }
.cht-broker-contact-phone:hover { background: #b3262c; }
.cht-broker-contact-phone .cht-broker-contact-icon { font-size: 18px; }
.cht-broker-contact-phone-num { display: block; font-size: 16px; font-weight: 700; }
.cht-broker-contact-phone small { display: block; font-size: 12px; opacity: 0.85; }
.cht-broker-contact-zalo:hover, .cht-broker-contact-save:hover, .cht-broker-contact-share:hover { background: #FFE9E9; border-color: var(--brand,#FD292E); color: var(--brand,#FD292E); }
.cht-broker-contact-icon { font-size: 20px; }
.cht-broker-contact-no-phone { padding: 12px; background: #f9fafb; border-radius: 10px; text-align: center; color: var(--ink-mute,#6b7280); }

.cht-broker-trust-card { background: #d1fae5; border-radius: 16px; padding: 20px; }
.cht-broker-trust-card h4 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #047857; }
.cht-broker-trust-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cht-broker-trust-card li { font-size: 13px; color: #047857; padding-left: 18px; position: relative; }
.cht-broker-trust-card li::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") no-repeat center / contain; }

.cht-broker-detail-empty { text-align: center; padding: 80px 20px; background: #fff; border-radius: 16px; }
.cht-broker-detail-empty h1 { margin: 0 0 8px; font-size: 24px; color: var(--ink,#0f1722); }
.cht-broker-detail-empty p { margin: 0 0 20px; color: var(--ink-mute,#6b7280); }
.cht-broker-detail-empty .btn-primary { background: var(--brand,#FD292E); color: #fff; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 14X.6 — Bảng giá đăng tin (reuse system design)
   Page wrapper + comparison table + FAQ + final CTA
   REUSE .cht-tier-card / .cht-tier-grid từ step 6 — KHÔNG override.
   ═══════════════════════════════════════════════════════════════════════════ */

.cht-bgia-page { background: #fff; min-height: 100vh; padding: 16px 0 60px; }
.cht-bgia-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.cht-bgia-page .detail-crumb { font-size: 13px; color: var(--ink-mute,#6b7280); margin-bottom: 20px; display:flex; gap:6px; flex-wrap:wrap; }
.cht-bgia-page .detail-crumb a { color: var(--ink-mute,#6b7280); text-decoration: none; }
.cht-bgia-page .detail-crumb a:hover { color: var(--brand,#FD292E); }
.cht-bgia-page .detail-crumb .cur { color: var(--ink,#0f1722); font-weight: 600; }
.cht-bgia-page .detail-crumb .sep { color: #cbd5e1; }

.cht-bgia-hero { text-align: center; padding: 24px 0 36px; }
.cht-bgia-hero h1 { font-size: 30px; font-weight: 800; color: var(--ink,#0f1722); margin: 0 0 12px; letter-spacing: -0.02em; }
.cht-bgia-hero p { font-size: 15px; color: var(--ink-mute,#6b7280); margin: 0 auto; max-width: 680px; line-height: 1.6; }
.cht-bgia-hero p strong { color: var(--brand,#FD292E); font-weight: 700; }

.cht-bgia-section { margin-bottom: 44px; }
.cht-bgia-section-title { font-size: 20px; font-weight: 700; color: var(--ink,#0f1722); margin: 0 0 20px; text-align: center; }

.cht-bgia-note {
    margin: 20px 0 0; padding: 14px 18px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
    font-size: 13.5px; color: #78350f; line-height: 1.55;
    text-align: center;
}
.cht-bgia-note strong { color: #78350f; font-weight: 700; }

/* Comparison table */
.cht-bgia-compare-wrap {
    background: #fff;
    border: 1px solid var(--border,#e5e7eb);
    border-radius: 14px;
    overflow-x: auto;
}
.cht-bgia-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 720px;
}
.cht-bgia-compare th, .cht-bgia-compare td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}
.cht-bgia-compare thead th {
    background: #f9fafb;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink,#0f1722);
    border-bottom: 2px solid var(--border,#e5e7eb);
    white-space: nowrap;
}
.cht-bgia-compare tbody td:first-child,
.cht-bgia-compare thead th:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--ink,#0f1722);
    background: #fafafa;
    border-right: 1px solid #f1f5f9;
}
.cht-bgia-compare tbody tr:hover td { background: rgba(214, 58, 64, 0.02); }
.cht-bgia-compare tbody td strong { color: var(--brand,#FD292E); font-weight: 700; }

.cht-bgia-th--silver { color: #52525b !important; border-top: 3px solid #94a3b8; }
.cht-bgia-th--gold   { color: #854d0e !important; border-top: 3px solid #facc15; }
.cht-bgia-th--diamond{ color: #be185d !important; border-top: 3px solid #ec4899; }

/* FAQ */
.cht-bgia-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.cht-bgia-faq details {
    background: #fff;
    border: 1px solid var(--border,#e5e7eb);
    border-radius: 12px;
    padding: 16px 20px;
    transition: border-color 0.15s ease;
}
.cht-bgia-faq details:hover { border-color: var(--brand,#FD292E); }
.cht-bgia-faq summary {
    font-weight: 600; cursor: pointer;
    font-size: 15px; color: var(--ink,#0f1722);
    list-style: none; user-select: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
}
.cht-bgia-faq summary::-webkit-details-marker { display: none; }
.cht-bgia-faq summary::after {
    content: '+';
    font-size: 22px; font-weight: 300;
    line-height: 1;
    color: var(--ink-mute,#6b7280);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.cht-bgia-faq details[open] summary::after { transform: rotate(45deg); color: var(--brand,#FD292E); }
.cht-bgia-faq p {
    margin: 12px 0 0;
    font-size: 14px; line-height: 1.6;
    color: var(--ink-mute,#6b7280);
}
.cht-bgia-faq p strong { color: var(--ink,#0f1722); font-weight: 700; }
.cht-bgia-faq p a { color: var(--brand,#FD292E); text-decoration: none; }
.cht-bgia-faq p a:hover { text-decoration: underline; }
.cht-bgia-faq p code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12.5px;
    background: #f9fafb;
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--brand,#FD292E);
}

/* CTA cuối */
.cht-bgia-cta-final {
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(180deg, #FFE9E9 0%, #fff 100%);
    border: 1px solid #f1d4d4;
    border-radius: 16px;
}
.cht-bgia-cta-final h3 {
    margin: 0 0 8px;
    font-size: 22px; font-weight: 700;
    color: var(--ink,#0f1722);
}
.cht-bgia-cta-final p {
    margin: 0 0 20px;
    font-size: 14.5px;
    color: var(--ink-mute,#6b7280);
}
.cht-bgia-cta-final p strong { color: var(--brand,#FD292E); font-weight: 700; }
.cht-bgia-cta-final .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    background: var(--brand,#FD292E); color: #fff;
    border-radius: 12px;
    font-weight: 700; font-size: 15px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.cht-bgia-cta-final .btn-primary:hover {
    background: #b3262c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(214,58,64,0.25);
}

@media (max-width: 640px) {
    .cht-bgia-hero h1 { font-size: 24px; }
    .cht-bgia-section-title { font-size: 18px; }
    .cht-bgia-compare th, .cht-bgia-compare td { padding: 10px 12px; font-size: 13px; }
}

/* ============================================================
 * Banner xin phép cookies (Phase 17.x) — dính đáy, toàn site.
 * Ẩn mặc định; JS thêm .is-on nếu chưa có lựa chọn. z trên thanh
 * liên hệ pd (1150), dưới mobile-menu (1200).
 * ============================================================ */
.cht-cookie { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1190;
  background: #fff; color: #4b5563; border-top: 1px solid #e5e7eb;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(15,23,42,.10); }
.cht-cookie.is-on { display: block; }
.cht-cookie-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; }
.cht-cookie-text { flex: 1; margin: 0; font-size: 14px; line-height: 1.55; color: #4b5563; }
.cht-cookie-text a { color: #111827; font-weight: 600; text-decoration: underline; }
.cht-cookie-text a:hover { color: #FD292E; }
.cht-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cht-cookie-btn { font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 10px 22px; border-radius: 10px; border: 1.5px solid transparent; white-space: nowrap; }
.cht-cookie-decline { background: #fff; border-color: #d1d5db; color: #374151; }
.cht-cookie-decline:hover { border-color: #9ca3af; background: #f9fafb; }
.cht-cookie-accept { background: #FD292E; color: #fff; box-shadow: 0 6px 16px rgba(224,60,49,.3); }
.cht-cookie-accept:hover { background: #e0241f; }
@media (max-width: 640px) {
  .cht-cookie { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .cht-cookie-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cht-cookie-text { font-size: 13px; }
  .cht-cookie-actions { justify-content: stretch; }
  .cht-cookie-btn { flex: 1; text-align: center; padding: 11px 16px; }
}

/* ===== Phase 17 — Modal "Nâng cấp VIP" (slot model) ===== */
.cht-vipup-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, .55);
  opacity: 0; transition: opacity .2s ease;
}
.cht-vipup-overlay.is-open { display: flex; opacity: 1; }
.cht-vipup-box {
  background: #fff; border-radius: 16px; width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto; padding: 20px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  transform: translateY(8px); transition: transform .2s ease;
}
.cht-vipup-overlay.is-open .cht-vipup-box { transform: translateY(0); }
.cht-vipup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cht-vipup-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.cht-vipup-x { background: none; border: 0; font-size: 26px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 4px; }
.cht-vipup-x:hover { color: #111827; }
.cht-vipup-listing { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #111827; }
.cht-vipup-current { margin: 4px 0 0; font-size: 12.5px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 7px 10px; border-radius: 8px; }
.cht-vipup-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0;
  /* Phase 18 — vùng tier cuộn được: trên mobile (1 cột) 3 card không đẩy nút "Nâng cấp ngay" khỏi màn */
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; padding: 2px;
}
.cht-vipup-tiers::-webkit-scrollbar { width: 6px; }
.cht-vipup-tiers::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.cht-vipup-tiers::-webkit-scrollbar-track { background: transparent; }
.cht-vipup-card {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 10px 34px; border: 2px solid #e5e7eb; border-radius: 12px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cht-vipup-card input { position: absolute; opacity: 0; pointer-events: none; }
.cht-vipup-card.is-checked { border-color: #FD292E; box-shadow: 0 0 0 3px rgba(253, 41, 46, .12); }
.cht-vipup-card.is-disabled { opacity: .55; cursor: not-allowed; background: #f9fafb; }
.cht-vipup-card__name { font-weight: 700; font-size: 13.5px; color: #111827; }
.cht-vipup-card__pos { font-size: 11px; color: #6b7280; }
.cht-vipup-card__price { font-weight: 700; font-size: 15px; margin-top: 2px; color: #111827; }
.cht-vipup-card__price em { font-style: normal; font-weight: 500; font-size: 11px; color: #6b7280; }
.cht-vipup-card--silver { border-top: 3px solid #cbd5e1; }
.cht-vipup-card--gold { border-top: 3px solid #f59e0b; }
.cht-vipup-card--diamond { border-top: 3px solid #8b5cf6; }
.cht-vipup-slot { position: absolute; left: 10px; right: 10px; bottom: 9px; font-size: 10.5px; font-weight: 600; text-align: center; padding: 3px 0; border-radius: 6px; }
.cht-vipup-slot--free { background: #ecfdf5; color: #059669; }
.cht-vipup-slot--own { background: #eff6ff; color: #2563eb; }
.cht-vipup-slot--taken { background: #fef2f2; color: #dc2626; }
.cht-vipup-daysrow { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.cht-vipup-daysrow__label { font-size: 13px; font-weight: 600; color: #374151; }
.cht-vipup-days { display: flex; gap: 8px; flex: 1; }
.cht-vipup-day { flex: 1; position: relative; text-align: center; padding: 9px 0; border: 1.5px solid #e5e7eb; border-radius: 9px; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; color: #374151; }
.cht-vipup-day input { position: absolute; opacity: 0; pointer-events: none; }
.cht-vipup-day.is-active { border-color: #FD292E; background: rgba(253, 41, 46, .06); font-weight: 600; color: #111827; }
.cht-vipup-summary { border-top: 1px solid #e5e7eb; margin-top: 16px; padding-top: 12px; }
.cht-vipup-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 3px 0; }
.cht-vipup-summary__row strong { font-size: 18px; font-weight: 700; color: #FD292E; }
.cht-vipup-summary__row--bal { color: #6b7280; font-size: 13px; }
.cht-vipup-warn { margin-top: 8px; font-size: 13px; color: #dc2626; background: #fef2f2; border-radius: 8px; padding: 8px 10px; }
.cht-vipup-warn a { color: #FD292E; font-weight: 600; text-decoration: underline; margin-left: 4px; }
.cht-vipup-foot { display: flex; gap: 10px; margin-top: 16px; }
.cht-vipup-cancel { flex: 0 0 auto; padding: 11px 20px; border: 1.5px solid #e5e7eb; background: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; color: #374151; }
.cht-vipup-cancel:hover { background: #f9fafb; }
.cht-vipup-buy { flex: 1; padding: 11px 20px; border: 0; background: #FD292E; color: #fff; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.cht-vipup-buy:hover:not(:disabled) { filter: brightness(.94); }
.cht-vipup-buy:disabled { background: #d1d5db; cursor: not-allowed; }
@media (max-width: 480px) {
  .cht-vipup-tiers { grid-template-columns: 1fr; }
  .cht-vipup-card { padding: 12px; }
  .cht-vipup-slot { position: static; left: auto; right: auto; bottom: auto; margin-top: 8px; }
  .cht-vipup-box { padding: 16px; }
}

/* ===== Phase 17 — Popup "Đẩy tin" (thay confirm mặc định) ===== */
.cht-boost-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, .55);
  opacity: 0; transition: opacity .2s ease;
}
.cht-boost-overlay.is-open { display: flex; opacity: 1; }
.cht-boost-box {
  background: #fff; border-radius: 16px; width: 100%; max-width: 400px; padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  transform: translateY(8px); transition: transform .2s ease;
}
.cht-boost-overlay.is-open .cht-boost-box { transform: translateY(0); }
.cht-boost-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cht-boost-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.cht-boost-x { background: none; border: 0; font-size: 26px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 4px; }
.cht-boost-x:hover { color: #111827; }
.cht-boost-desc { margin: 0 0 14px; font-size: 13.5px; color: #6b7280; line-height: 1.5; }
.cht-boost-rows { border-top: 1px solid #e5e7eb; padding-top: 12px; }
.cht-boost-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 4px 0; color: #374151; }
.cht-boost-row strong.cht-boost-price { font-size: 18px; font-weight: 700; color: #FD292E; }
.cht-boost-row--bal { color: #6b7280; font-size: 13px; }
.cht-boost-warn { margin-top: 10px; font-size: 13px; color: #dc2626; background: #fef2f2; border-radius: 8px; padding: 8px 10px; }
.cht-boost-warn a { color: #FD292E; font-weight: 600; text-decoration: underline; margin-left: 2px; }
.cht-boost-foot { display: flex; gap: 10px; margin-top: 18px; }
.cht-boost-cancel { flex: 0 0 auto; padding: 11px 20px; border: 1.5px solid #e5e7eb; background: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; }
.cht-boost-cancel:hover { background: #f9fafb; }
.cht-boost-go { flex: 1; padding: 11px 20px; border: 0; background: #FD292E; color: #fff; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.cht-boost-go:hover:not(:disabled) { filter: brightness(.94); }
.cht-boost-go:disabled { background: #d1d5db; cursor: not-allowed; }

/* ===== Phase 17 — Sort dropdown + Bulk action bar (Quản lý tin) ===== */
.cht-sort-dd { position: relative; }
.cht-sort-dd > summary { list-style: none; cursor: pointer; }
.cht-sort-dd > summary::-webkit-details-marker { display: none; }
.cht-sort-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 160px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); padding: 6px; }
.cht-sort-opt { display: block; padding: 8px 12px; border-radius: 7px; font-size: 14px; color: #374151; text-decoration: none; }
.cht-sort-opt:hover { background: #f3f4f6; }
.cht-sort-opt.is-active { color: #FD292E; font-weight: 600; background: #fef2f2; }

.cht-bulkbar-float { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1150; display: flex; align-items: center; gap: 16px; background: #111827; color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); max-width: calc(100vw - 24px); flex-wrap: wrap; }
.cht-bulkbar-float[hidden] { display: none; } /* override display:flex khi có attr hidden */
.cht-bulkbar-float__count { font-size: 14px; white-space: nowrap; }
.cht-bulkbar-float__count strong { font-size: 16px; }
.cht-bulkbar-float__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cht-bulkbar-btn { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s; }
.cht-bulkbar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.cht-bulkbar-btn:disabled { opacity: .5; cursor: not-allowed; }
.cht-bulkbar-btn--danger { border-color: rgba(248, 113, 113, .5); color: #fca5a5; }
.cht-bulkbar-btn--danger:hover:not(:disabled) { background: rgba(220, 38, 38, .25); }
.cht-bulkbar-btn--ghost { border-color: transparent; background: transparent; color: #9ca3af; }
.cht-bulkbar-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 560px) {
  .cht-bulkbar-float { left: 12px; right: 12px; transform: none; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: space-between; }
}

/* ===== Phase 17 — Sub-label lợi ích trên nút hành động (kiểu batdongsan) ===== */
.cht-card-action-btn__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.cht-card-action-btn__txt small { font-size: 10.5px; font-weight: 500; color: #9ca3af; }

/* ===== Phase 17 — Bottom-sheet mobile cho Sort + menu ⋯ (kiểu app batdongsan) ===== */
#cht-sheet-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1195; display: none; }
#cht-sheet-backdrop.is-on { display: block; }
body.cht-sheet-lock { overflow: hidden; }
@media (max-width: 640px) {
  .cht-card-more-menu:not([hidden]) {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; min-width: 0 !important;
    z-index: 1200; border: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
    max-height: 72vh; overflow-y: auto;
    padding: 4px 10px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
  }
  .cht-card-more-menu:not([hidden])::before {
    content: 'Thao tác';
    display: block; padding: 14px 10px 10px;
    font-size: 16px; font-weight: 700; color: #111827;
    border-bottom: 1px solid #f3f4f6; margin-bottom: 6px;
  }
  .cht-card-more-menu:not([hidden]) .cht-menu-item { padding: 13px 10px; font-size: 15px; }

  .cht-sort-dd[open] .cht-sort-menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    min-width: 0; z-index: 1200; border: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
    padding: 4px 10px calc(14px + env(safe-area-inset-bottom));
  }
  .cht-sort-dd[open] .cht-sort-menu::before {
    content: 'Sắp xếp';
    display: block; padding: 14px 10px 10px;
    font-size: 16px; font-weight: 700; color: #111827;
    border-bottom: 1px solid #f3f4f6; margin-bottom: 6px;
  }
  .cht-sort-opt { padding: 13px 10px; font-size: 15px; }
}

/* ===== Phase 17 — Lead card phone-first (kiểu batdongsan) ===== */
.cht-lead-card { flex-direction: column; gap: 8px; height: 100%; }
.cht-lead-head2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cht-lead-head2__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cht-lead-phone2 { font-size: 17px; font-weight: 800; color: #111827; letter-spacing: .01em; }
.cht-lead-phone2.is-anon { font-size: 15px; font-weight: 700; color: #6b7280; }
.cht-lead-time2 { font-size: 12px; color: #9ca3af; white-space: nowrap; flex-shrink: 0; padding-top: 2px; }
/* Badge trạng thái lead (sync JS khi đổi) */
.cht-lead-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.cht-lead-badge--new { background: #fef3c7; color: #92400e; }
.cht-lead-badge--contacted { background: #dcfce7; color: #166534; }
.cht-lead-badge--closed { background: #f3f4f6; color: #6b7280; }
.cht-lead-listing2 { font-size: 13.5px; line-height: 1.45; }
.cht-lead-listing2 a { color: #374151; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cht-lead-listing2 a:hover { color: var(--brand, #FD292E); }
.cht-lead-loc2 { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #6b7280; min-width: 0; }
.cht-lead-loc2__addr { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.cht-lead-loc2__addr svg { flex-shrink: 0; }
.cht-lead-loc2__sep { color: #d1d5db; flex-shrink: 0; }
.cht-lead-loc2__price { font-weight: 700; color: #111827; flex-shrink: 0; }
.cht-lead-meta2 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b7280; }
.cht-lead-meta2__src { display: inline-flex; align-items: center; gap: 5px; background: #f3f4f6; color: #4b5563; padding: 2px 9px; border-radius: 6px; font-weight: 600; font-size: 11.5px; }
.cht-lead-meta2__sep { color: #d1d5db; }
.cht-lead-cta2 { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.cht-lead-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 8px; border-radius: 9px; font-size: 13.5px; font-weight: 700;
  white-space: nowrap; min-width: 0;
  text-decoration: none; cursor: pointer; transition: filter .15s, background .15s;
}
.cht-lead-btn--zalo { border: 1.5px solid #0068ff; color: #0068ff; background: #fff; }
.cht-lead-btn--zalo:hover { background: #f0f7ff; }
.cht-lead-btn--call { border: 0; background: var(--brand, #FD292E); color: #fff; }
.cht-lead-btn--call:hover { filter: brightness(.94); }
.cht-lead-cta2 .cht-lead-card-actions { margin-left: auto; flex-shrink: 0; }
/* Editor ghi chú inline (thay prompt() trình duyệt) */
.cht-lead-noteedit { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.cht-lead-noteedit__ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px; padding: 9px 11px; border: 1.5px solid #d1d5db; border-radius: 10px; font-family: inherit; font-size: 13px; line-height: 1.5; color: #111827; background: #fff; transition: border-color .15s; }
.cht-lead-noteedit__ta:focus { outline: none; border-color: var(--brand, #FD292E); box-shadow: 0 0 0 3px rgba(253,41,46,.1); }
.cht-lead-noteedit__row { display: flex; gap: 8px; justify-content: flex-end; }
.cht-lead-noteedit__btn { height: 34px; padding: 0 14px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s, background .15s, border-color .15s; border: 1px solid transparent; }
.cht-lead-noteedit__cancel { background: #fff; border-color: #e5e7eb; color: #6b7280; }
.cht-lead-noteedit__cancel:hover { border-color: #d1d5db; background: #f9fafb; }
.cht-lead-noteedit__save { background: var(--brand, #FD292E); color: #fff; }
.cht-lead-noteedit__save:hover { filter: brightness(.94); }
.cht-lead-noteedit__save:disabled { opacity: .6; cursor: default; }

/* ===== Phase 17 — Bottom nav mobile khu vực tài khoản (kiểu app batdongsan) ===== */
.cht-acc-bottomnav { display: none; }
@media (max-width: 768px) {
  .cht-acc-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1140;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    background: #fff; border-top: 1px solid #e5e7eb;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  }
  .cht-abn-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 2px; text-decoration: none; color: #6b7280;
  }
  .cht-abn-item svg { width: 22px; height: 22px; }
  .cht-abn-item span { font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; }
  .cht-abn-item.is-active { color: #111827; }
  .cht-abn-item.is-active span { font-weight: 700; }
  .cht-abn-post {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: #6b7280; padding: 0 2px;
    position: relative;
  }
  .cht-abn-post__btn {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--brand, #FD292E);
    box-shadow: 0 6px 16px rgba(253, 41, 46, .4);
    margin-top: -22px; /* nổi lên trên bar */
    border: 3px solid #fff;
  }
  .cht-abn-post__label { font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; }

  /* Chừa chỗ cho nav: nội dung account không bị che đáy */
  body.woocommerce-account.logged-in { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Thanh bulk + cookie banner nằm TRÊN nav */
  body.woocommerce-account .cht-bulkbar-float { bottom: calc(82px + env(safe-area-inset-bottom)); }
  body.woocommerce-account .cht-cookie { bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* Khi sheet (Thao tác / Sắp xếp) mở → ẩn nav cho gọn, tránh chồng */
  body.cht-sheet-lock .cht-acc-bottomnav { display: none; }

  /* Phase 17 — bottom nav + hub Tài khoản THAY THẾ thanh điều hướng WC trên mobile */
  body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { display: none !important; }
}

/* ===== Phase 17 — Hub "Tài khoản" (/tai-khoan/menu/ — kiểu app batdongsan) ===== */
.cht-accmenu { max-width: 640px; }
.cht-accmenu-user { display: flex; align-items: center; gap: 14px; padding: 4px 0 16px; }
.cht-accmenu-user__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #f3f4f6; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cht-accmenu-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cht-accmenu-user__initial { font-size: 22px; font-weight: 700; color: #6b7280; }
.cht-accmenu-user__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cht-accmenu-user__info strong { font-size: 18px; font-weight: 700; color: #111827; }
.cht-accmenu-user__info a { font-size: 13px; color: #6b7280; text-decoration: none; }
.cht-accmenu-user__info a:hover { color: var(--brand, #FD292E); }

.cht-accmenu-balance { background: #f3f4f6; border-radius: 16px; padding: 14px 16px; margin-bottom: 8px; }
.cht-accmenu-balance__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cht-accmenu-balance__label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #374151; }
.cht-accmenu-balance__amount { font-size: 18px; font-weight: 800; color: #111827; }
.cht-accmenu-balance__topup {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 999px; background: #111827; color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none; transition: filter .15s;
}
.cht-accmenu-balance__topup:hover { filter: brightness(1.15); }

.cht-accmenu-section { border-bottom: 1px solid #f3f4f6; padding: 6px 0 10px; }
.cht-accmenu-section__title { margin: 10px 0 2px; font-size: 12.5px; font-weight: 600; color: #9ca3af; }
.cht-accmenu-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; text-decoration: none; color: #111827;
  border-radius: 10px; transition: background .12s;
}
.cht-accmenu-row:hover { background: #f9fafb; }
.cht-accmenu-row__icon { display: inline-flex; color: #111827; flex-shrink: 0; }
.cht-accmenu-row__label { flex: 1; font-size: 15px; font-weight: 500; }
.cht-accmenu-row__badge { font-size: 12px; font-weight: 700; color: #dc2626; background: #fef2f2; padding: 3px 10px; border-radius: 999px; }
.cht-accmenu-row__chev { display: inline-flex; color: #d1d5db; flex-shrink: 0; }

.cht-accmenu-logout {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 2px 4px; text-decoration: none;
  color: #111827; font-size: 15px; font-weight: 500;
}
.cht-accmenu-logout:hover { color: var(--brand, #FD292E); }


/* ===== Phase 18 — Page "Môi giới đã lưu" (thiết kế C: thẻ giàu thông tin + 3 ảnh tin) ===== */
.cht-fbc-list{display:flex;flex-direction:column;gap:14px}
.cht-fbc{background:#fff;border:1px solid var(--border, #e5e7eb);border-radius:16px;padding:16px;transition:.16s}
.cht-fbc:hover{border-color:#d1d5db;box-shadow:0 6px 22px rgba(15,23,34,.07);transform:translateY(-1px)}
.cht-fbc__head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cht-fbc__av-wrap{position:relative;flex-shrink:0}
.cht-fbc__av{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block}
.cht-fbc__tick{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:#0ea5e9;display:grid;place-items:center;border:2px solid #fff}
.cht-fbc__main{flex:1;min-width:170px}
.cht-fbc__namerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cht-fbc__name{font-size:16px;font-weight:800;color:var(--ink, #0f1722);text-decoration:none}
.cht-fbc__name:hover{color:var(--red, #FD292E)}
.cht-fbc__role{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:#eef2ff;color:#4f46e5;white-space:nowrap}
.cht-fbc__role.pro{background:#fef3c7;color:#b45309}
.cht-fbc__role.agency{background:#ede9fe;color:#6d28d9}
.cht-fbc__stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-size:13px;color:var(--ink-soft, #6b7280);align-items:center}
.cht-fbc__stats span{display:inline-flex;align-items:center;gap:4px}
.cht-fbc__stats b{color:var(--ink, #0f1722);font-weight:700}
.cht-fbc__actions{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:auto}
.cht-fbc__btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 13px;border-radius:9px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;border:1px solid var(--border, #e5e7eb);background:#fff;color:var(--ink, #0f1722);text-decoration:none;white-space:nowrap;transition:.15s}
.cht-fbc__btn:hover{border-color:#cbd5e1;background:#f8fafc}
.cht-fbc__call{background:var(--green, #0E9F6E);border-color:transparent;color:#fff}
.cht-fbc__call:hover{background:#0a8a5d;border-color:transparent}
.cht-fbc__zalo{background:#0068FF;border-color:transparent;color:#fff}
.cht-fbc__zalo:hover{background:#0057d6;border-color:transparent}
.cht-fbc__profile{background:var(--red, #FD292E);border-color:transparent;color:#fff}
.cht-fbc__profile:hover{background:#e11d27;border-color:transparent;color:#fff}
.cht-fbc__remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border, #e5e7eb);background:#fff;cursor:pointer;color:var(--ink-soft, #6b7280);transition:.15s}
.cht-fbc__remove:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
/* Tin gần đây — tái dùng card "tin tương tự" (sim-grid) của trang chi tiết tin, scoped trong .cht-fbc.
   single-listing-v2.css KHÔNG nạp ở trang tài khoản → copy lại + fallback biến (--line/--ink/--muted/--red). */
/* Header "Tin đăng mới nhất" + link Xem tất cả → hồ sơ môi giới */
.cht-fbc__recent-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.cht-fbc__recent-title{font-size:12px;font-weight:700;color:var(--ink-soft, #6b7280);text-transform:uppercase;letter-spacing:.05em}
.cht-fbc__recent-all{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;color:var(--red, #FD292E);text-decoration:none;white-space:nowrap}
.cht-fbc__recent-all:hover{text-decoration:underline}

/* Strip card GỌN (~154px) — môi giới là chủ thể chính, tin chỉ là preview phụ → KHÔNG để card
   chiếm 1/3 rộng (lấn át info). Flex strip cố định bề ngang, cuộn ngang nếu nhiều. */
.cht-fbc .sim-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.cht-fbc .sim-card{flex:0 0 154px;width:154px;background:#fff;border:1px solid var(--border, #e5e7eb);border-radius:12px;overflow:hidden;cursor:pointer;transition:.18s;text-decoration:none;display:block}
.cht-fbc .sim-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,20,25,.08);border-color:#cbd5e1}
.cht-fbc .sim-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f3f4f6}
.cht-fbc .sim-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.cht-fbc .sim-card:hover .sim-thumb img{transform:scale(1.05)}
.cht-fbc .sim-photos{position:absolute;bottom:6px;right:6px;background:rgba(15,20,25,.7);color:#fff;padding:2px 6px;border-radius:5px;font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.cht-fbc .sim-body{padding:8px 10px 10px}
.cht-fbc .sim-price{font-size:14px;font-weight:800;color:var(--red, #FD292E);letter-spacing:-.01em}
.cht-fbc .sim-name{font-size:12px;font-weight:600;color:var(--ink, #0f1722);line-height:1.35;margin:3px 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
.cht-fbc .sim-meta{display:flex;flex-wrap:wrap;gap:7px;font-size:10.5px;color:var(--ink-soft, #6b7280)}
.cht-fbc .sim-meta .m{display:inline-flex;align-items:center;gap:2px}
@media (max-width:560px){
  .cht-fbc__actions{width:100%;margin-left:0;margin-top:12px;flex-wrap:wrap}
  .cht-fbc__btn{flex:1}
  .cht-fbc__remove{flex:0 0 auto}
  .cht-fbc .sim-grid{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding-bottom:4px}
  .cht-fbc .sim-card{scroll-snap-align:start}
}