/* ============================================================================
   RV SYSTEM — Typography · Space · Layout
   Áp dụng theo tài liệu "Hệ thống build website — font, motion, an toàn".
   Nạp sau style.css nên các quy tắc ở đây là bản chốt.
   ========================================================================== */

:root {
  /* Font gốc theo tài liệu */
  --rv-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rv-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Desktop */
  --rv-fs-display: 56px;   --rv-lh-display: 1.30;  --rv-ls-display: 0em;
  --rv-fs-section: 42px;   --rv-lh-section: 1.28;  --rv-ls-section: 0em;
  --rv-fs-heading: 36px;   --rv-lh-heading: 1.28;  --rv-ls-heading: 0em;
  --rv-fs-body: 15px;      --rv-lh-body: 1.50;     --rv-ls-body: -0.03em;
  --rv-fs-caption: 14px;   --rv-lh-caption: 1.47;  --rv-ls-caption: -0.03em;

  /* Không gian giữa các section */
  --rv-section-pad: 80px;
  --rv-section-gap: 100px;
  --rv-banner-gap: 160px;

  --rv-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1. Typography ---------- */
body { font-family: var(--rv-body); font-size: var(--rv-fs-body); font-weight: 300;
       line-height: var(--rv-lh-body); letter-spacing: var(--rv-ls-body); }

h1, h2, h3, h4, h5, h6,
.rv-display, .btn, .logo b, .nav a, .stat b, .pk-stat b, .step-num {
  font-family: var(--rv-display); font-weight: 500; letter-spacing: 0em;
}

/* DISPLAY — tiêu đề lớn nhất của trang */
h1, .hero h1, .page-head h1 {
  font-size: var(--rv-fs-display); line-height: var(--rv-lh-display);
  letter-spacing: var(--rv-ls-display); font-weight: 500;
  max-width: 20ch; overflow-wrap: anywhere;
}
.hero h1 { max-width: 16ch; }

/* TIÊU ĐỀ SECTION */
h2 { font-size: var(--rv-fs-section); line-height: var(--rv-lh-section);
     letter-spacing: var(--rv-ls-section); font-weight: 500; max-width: 24ch; overflow-wrap: anywhere; }
.section-head.center h2, .cta-band h2 { max-width: none; }

/* HEADING */
h3 { font-size: var(--rv-fs-heading); line-height: var(--rv-lh-heading);
     letter-spacing: var(--rv-ls-heading); font-weight: 500; overflow-wrap: anywhere; }
/* Heading trong card/form dùng cỡ nhỏ hơn để không phá vỡ ô chứa */
.card-body h3, .post-card h3, .form-card h3, .step h3, .faq-q, .pk-towers h3,
.footer h4, .subarea-card h3, .empty h3 {
  font-size: 20px; line-height: 1.35; letter-spacing: 0em;
}

/* BODY */
p, li, label, input, select, textarea, .lead, .btn {
  font-family: var(--rv-body); letter-spacing: var(--rv-ls-body);
}
p, li { font-size: var(--rv-fs-body); line-height: var(--rv-lh-body); }
.lead { font-size: 17px; line-height: 1.65; }
.btn { font-weight: 500; letter-spacing: 0em; }

/* CAPTION */
.note, .list-note, .card-specs, .card-extra, .card-loc, .sub, .res-count,
.eyebrow, small, figcaption, .breadcrumb, .form-status, .footer-bottom {
  font-size: var(--rv-fs-caption); line-height: var(--rv-lh-caption);
  letter-spacing: var(--rv-ls-caption);
}
.eyebrow { letter-spacing: .12em; }

/* ---------- 2. Nền trắng cho toàn bộ trang, trừ banner và footer ---------- */
body, main { background: var(--white); }
.section-ivory, .search-section, .cta-band { background: var(--white); }
.search-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band { border-top: 1px solid var(--line); color: var(--ink); }
.cta-band h2, .cta-band p, .cta-band svg { color: var(--navy); }

/* Khối ký gửi: bỏ nền tối, giữ khung để vẫn tách khỏi phần trên */
.consign { background: var(--white); color: var(--ink); isolation: auto; }
.consign-media { display: none; }
.consign h2, .consign h3 { color: var(--navy); }
.consign .lead, .consign .benefits span { color: var(--muted); }
.consign .benefits svg { color: var(--gold); }
.consign-quote { color: var(--gold-600); }

/* ---------- 3. Khung 86% và hệ khoảng cách ---------- */
@media (min-width: 901px) {
  .container { width: 86%; max-width: none; padding-inline: 0; margin-inline: auto; }
}

main > section { padding-block: var(--rv-section-pad); margin-block-end: var(--rv-section-gap); }
main > section.hero { padding-block: 0; margin-block-end: var(--rv-banner-gap); }
main > section:last-child { margin-block-end: 0; }
/* Section liền kề dùng padding riêng thì bỏ đè của style.css cũ */
main > section[style*="padding-top:0"] { padding-block-start: 0; }

/* Ảnh lớn trong section không cao quá 60% màn hình */
.about-media, .consign-grid img, .project-hero img, .detail-gallery img { max-height: 60vh; }

/* ---------- 4. Card: 4 cột desktop, 2 cột mobile, nội dung căn giữa ---------- */
.listing-grid, .post-grid, .project-grid { grid-template-columns: repeat(4, 1fr); }
.listing-grid-2 { grid-template-columns: repeat(2, 1fr); }

.card-body, .post-body { text-align: center; align-items: center; }
.card-body h3, .post-body h3 { text-align: center; }
.card-loc, .card-specs { justify-content: center; }
.card-body .card-price, .card-body .card-extra { text-align: center; }

/* ---------- 5. Mobile ---------- */
@media (max-width: 900px) {
  :root {
    --rv-fs-display: 36px;  --rv-lh-display: 1.20;  --rv-ls-display: 0em;
    --rv-fs-section: clamp(17px, calc((100vw - 40px) / 16.2), 32px);
    --rv-lh-section: 1.25;  --rv-ls-section: 0em;
    --rv-fs-heading: 26px;  --rv-lh-heading: 1.25;  --rv-ls-heading: 0em;
    --rv-fs-body: 14px;     --rv-lh-body: 1.55;     --rv-ls-body: -0.02em;
    --rv-fs-caption: 12px;  --rv-lh-caption: 1.50;  --rv-ls-caption: -0.02em;
    --rv-section-pad: 30px;
    --rv-section-gap: 40px;
    --rv-banner-gap: 60px;
  }
  .lead { font-size: 15px; }
  .card-body h3, .post-card h3, .form-card h3, .step h3, .faq-q { font-size: 17px; }
  .listing-grid, .post-grid, .project-grid, .listing-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-body { padding: 12px 10px 14px; gap: 6px; }
  .card-specs { gap: 4px 8px; }
  .card-specs span + span::before { margin-right: 8px; }
}

/* ---------- 6. Header: trong suốt trên banner, ẩn khi cuộn xuống ---------- */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: transform .35s var(--rv-ease), background .3s var(--rv-ease),
              border-color .3s var(--rv-ease), box-shadow .3s var(--rv-ease);
  will-change: transform;
}
/* Trên nền banner tối: chữ trắng */
.header:not(.is-solid) .logo small,
.header:not(.is-solid) .nav a { color: var(--white); }
.header:not(.is-solid) .icon-btn { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.header:not(.is-solid) .icon-btn:hover { background: rgba(255,255,255,.14); border-color: var(--white); color: var(--white); }
.header:not(.is-solid) .nav a::after { background: var(--white); }

/* Đã rời khỏi banner hoặc trang không có banner tối */
.header.is-solid { background: var(--white); border-bottom-color: var(--line); box-shadow: 0 1px 14px rgba(16,39,72,.06); }
.header.is-hidden { transform: translateY(-100%); }

/* Banner chiếm trọn màn hình vì header nằm đè lên trên */
.hero { min-height: 100vh; min-height: 100svh; }
.hero-inner { padding-block: calc(var(--header-h) + 40px) 80px; }
/* Trang không có banner tối cần chừa chỗ cho header */
body:not(.has-hero) main { padding-top: var(--header-h); }

/* ---------- 7. Splash intro: logo 2,5s rồi tách đôi theo chiều dọc ---------- */
.rv-splash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.rv-splash__half {
  position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--navy);
  transition: transform 1100ms var(--rv-ease);
}
.rv-splash__half--l { left: 0; }
.rv-splash__half--r { right: 0; }
.rv-splash__logo {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 18px;
  align-content: center; text-align: center; color: var(--white);
  transition: opacity 420ms var(--rv-ease), transform 420ms var(--rv-ease);
}
/* Logo vàng trên nền navy; giữ nguyên nhịp và thời lượng của splash cũ */
.rv-splash__mark { width: min(74vw, 420px); height: auto; max-width: none;
  opacity: 0; transform: translateY(14px) scale(.96); }
.rv-splash__tag { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); opacity: 0; transform: translateY(14px); }
.rv-splash.is-in .rv-splash__mark { animation: rv-splash-up 700ms var(--rv-ease) forwards; }
.rv-splash.is-in .rv-splash__tag { animation: rv-splash-up 700ms 280ms var(--rv-ease) forwards; }
@keyframes rv-splash-up { to { opacity: 1; transform: none; } }
.rv-splash.is-out .rv-splash__logo { opacity: 0; transform: scale(1.04); }
.rv-splash.is-out .rv-splash__half--l { transform: translate3d(-100%, 0, 0); }
.rv-splash.is-out .rv-splash__half--r { transform: translate3d(100%, 0, 0); }
html.rv-splash-on { overflow: hidden; }

/* ---------- 9. Header: bố cục 3 phần, không để chữ xuống dòng ---------- */
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: var(--header-h); }
.nav { justify-content: center; gap: 6px; flex-wrap: nowrap; }
.nav a { white-space: nowrap; padding: 0 12px; font-size: 15px; letter-spacing: 0; position: relative; background: none; }
.nav a:hover { background: none; }
/* Gạch chân trượt từ giữa thay cho nền xám */
.nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform .32s var(--rv-ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { box-shadow: none; border-radius: var(--radius-ui); }
.header-actions { justify-self: end; gap: 22px; }
.logo small { font-size: 9.5px; letter-spacing: .12em; }

/* Menu 5 mục với nhãn dài nên khoảng 1024-1400px phải bó lại, nếu không nút
   "Nhận tư vấn" bị đẩy ra ngoài khung. Dưới 1240px chuyển hẳn sang nút menu. */
@media (max-width: 1400px) {
  .header-inner { gap: 14px; }
  .nav { gap: 0; }
  .nav a { padding: 0 7px; font-size: 14px; }
  .nav a::after { left: 7px; right: 7px; }
  .header-actions { gap: 16px; }
}
@media (max-width: 1024px) { .logo small { display: none; } }
@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto; gap: 12px; }
  .logo small { display: block; }
}

/* ---------- 10. Thu hẹp 30% khoảng cách giữa thanh tìm kiếm và lưới sản phẩm ---------- */
/* Ba thành phần tạo nên khoảng này: đệm dưới của thanh lọc, khoảng cách giữa hai
   section, và đệm trên của khối kết quả. Cả ba cùng giảm còn 70%. */
/* Bỏ đường kẻ dưới thanh lọc và kéo lưới sản phẩm lên sát hơn */
.search-section { padding-block: 40px 24px; border-bottom: 0; }
main > section.search-section { margin-block-end: 20px; }
main > section#ket-qua { padding-block-start: 16px; }
#ket-qua .res-count { margin-bottom: 8px; }
@media (max-width: 900px) {
  .search-section { padding-block: 24px 14px; }
  main > section.search-section { margin-block-end: 12px; }
  main > section#ket-qua { padding-block-start: 10px; }
  #ket-qua .res-count { margin-bottom: 8px; }
}

/* Header cố định che mất đỉnh phần tử khi nhảy tới liên kết neo */
main [id], main > section { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ---------- Card sản phẩm: giá dẫn đầu, canh trái, thông số có icon ---------- */
.card-body { text-align: left; align-items: stretch; gap: 10px; padding: 18px; }
.card-body h3, .card-body .card-price, .card-body .card-extra { text-align: left; }
.card-loc, .card-specs { justify-content: flex-start; }

/* Giá là thứ người mua lọc trước nên đặt trên cùng và nhấn mạnh nhất */
.card-price { order: -1; margin-top: 0; font-size: 24px; font-weight: 600; color: var(--gold-600); line-height: 1.2; }
.card-price small { display: none; }

.card-body h3 { font-size: 17px; font-weight: 600; color: var(--navy); -webkit-line-clamp: 2; margin-top: -2px; }
.card-loc { gap: 6px; color: var(--muted); }

/* Thông số: icon + số, khoảng trắng thay cho gạch ngăn */
.card-specs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 2px 0 0; padding: 0; list-style: none; }
.card-specs li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.card-specs li svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.card-specs span + span::before { content: none; }

/* Thẻ đặc điểm cho những điểm không quy về con số được */
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.card-tags span { padding: 5px 10px; border-radius: 4px; background: var(--ivory); color: var(--muted);
  font-size: 12.5px; line-height: 1.4; white-space: nowrap; }

@media (max-width: 900px) {
  .card-body { padding: 12px 12px 14px; gap: 7px; }
  .card-price { font-size: 19px; }
  .card-body h3 { font-size: 15px; }
  .card-specs { gap: 6px 12px; }
  .card-specs li svg { width: 15px; height: 15px; }
  .card-tags span { padding: 4px 8px; font-size: 11px; }
}

/* ============================ TRANG PHÂN KHU ============================ */
/* ---------- Hero ảnh ---------- */
.pk-hero { height: 560px; align-items: center; }
.pk-hero::after { background: linear-gradient(180deg, rgba(16,39,72,.55), rgba(16,39,72,.72)); }
.pk-hero .container { padding-bottom: 0; }
.pk-hero h1 { text-transform: uppercase; letter-spacing: .01em; margin: 10px 0 0; max-width: none; }
.pk-hero-sub { font-size: 22px; color: rgba(255,255,255,.9); margin-top: 4px; }
.pk-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.breadcrumb.light, .breadcrumb.light a { color: rgba(255,255,255,.82); }

/* ---------- Tabs căn giữa ---------- */
.pk-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.pk-tabs button { min-height: 42px; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white); color: var(--muted); font-family: var(--rv-display); font-weight: 500; cursor: pointer;
  transition: background .25s var(--rv-ease), color .25s var(--rv-ease), border-color .25s var(--rv-ease); }
.pk-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--white); }

/* ---------- Bộ lọc gọn ---------- */
/* Hiện đủ 5 tiêu chí, không giấu sau nút gộp */
.pk-filter { display: grid; grid-template-columns: repeat(5, 1fr) 56px; gap: 12px; margin-bottom: 28px; }
/* Từ 901px trở lên: 5 ô lọc và nút tìm kiếm nằm trọn trên một hàng */
@media (min-width: 901px) and (max-width: 1200px) {
  .pk-filter { grid-template-columns: repeat(5, 1fr) 48px; gap: 10px; }
  .pk-filter .control { padding-inline: 12px 30px; font-size: 14px; }
}
.pk-search { padding: 0; }
.pk-search svg { width: 20px; height: 20px; }
.pk-load { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- Lưới 3 cột ---------- */
.pk-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- Khối liên hệ ---------- */
.pk-lead-card { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 44px; }
.pk-lead-text h2 { max-width: 16ch; margin-bottom: 12px; }
.pk-lead-text p { color: var(--muted); }
.pk-agent { display: flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--muted); }
.pk-agent svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.pk-agent b { color: var(--navy); font-weight: 600; }
.pk-lead-form { display: grid; gap: 14px; }
.pk-lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pk-lead-form input { background: var(--white); }
.pk-radio { display: flex; gap: 22px; }
.pk-radio label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--navy); }
.pk-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); flex: none; }

@media (max-width: 900px) {
  .pk-hero { height: 380px; }
  .pk-hero-sub { font-size: 16px; }
  .pk-hero-ctas { margin-top: 20px; }
  .pk-hero-ctas .btn { flex: 1 1 auto; }
  .pk-filter { grid-template-columns: 1fr 1fr; }
  .pk-search { grid-column: 2; grid-row: 3; min-height: 46px; }
  .pk-grid { grid-template-columns: repeat(2, 1fr); }
  .pk-lead-card { grid-template-columns: 1fr; gap: 26px; padding: 24px 20px; }
  .pk-lead-row { grid-template-columns: 1fr; }
}
/* Ghi chú dưới lưới căn giữa cho cân với tiêu đề và nút Xem thêm */
#ket-qua .list-note { text-align: center; }

/* ---------- Cột nút liên hệ nhanh (desktop) ----------
   Nhỏ hơn bản cũ 15% (48 -> 41px). Mỗi nút một màu thương hiệu riêng, viền trắng
   mảnh và một mức đổ bóng chung để cả cột đọc thành một khối thống nhất. */
:root { --q-zalo: #0068FF; --q-fb: #1877F2; --q-tiktok: #121212; --q-size: 41px; }
.quick { right: 18px; bottom: 22px; gap: 9px; }
.quick a, .quick button {
  width: var(--q-size); height: var(--q-size);
  border: 1.5px solid rgba(255,255,255,.92);
  box-shadow: 0 3px 10px rgba(16,39,72,.16), 0 8px 24px rgba(16,39,72,.10);
}
.quick svg { width: 19px; height: 19px; }
.quick .q-zalo { background: var(--q-zalo); font-size: 10px; letter-spacing: .01em; }
.quick .q-fb { background: var(--q-fb); }
.quick .q-tiktok { background: var(--q-tiktok); }
.quick .q-call { background: var(--navy); }
.quick .q-top { background: var(--navy); }
.quick a:hover, .quick button:hover {
  box-shadow: 0 6px 16px rgba(16,39,72,.22), 0 14px 34px rgba(16,39,72,.14);
}
.quick .q-call:hover, .quick .q-top:hover { background: var(--navy-700); }
.quick .q-zalo:hover { background: #0056D6; }
.quick .q-fb:hover { background: #1461C9; }
.quick .q-tiktok:hover { background: #000; }
.quick a:focus-visible, .quick button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
/* Nút lên đầu trang cao bằng các nút khác khi hiện ra */
.quick .q-top.show { max-height: var(--q-size); }

/* ---------- Bộ xem ảnh ở khối "Về chúng tôi" ----------
   Khung ngoài vốn cắt ảnh theo tỉ lệ vuông; khi thành bộ xem ảnh thì bỏ cắt ở
   khung ngoài và chuyển tỉ lệ vuông xuống ô ảnh, nếu không thumbnail bị cắt mất. */
/* Bỏ aspect-ratio thì khung mất luôn bề rộng nội tại và co lại bằng hàng
   thumbnail, nên phải trả lại width 100%; max-height cũng phải gỡ để hàng
   thumbnail không tràn ra ngoài khung. */
.about-media.has-gal { aspect-ratio: auto; overflow: visible; border-radius: 0;
  width: 100%; max-height: none; height: auto; }
.about-media .gal, .about-media .gal .detail-viewer { width: 100%; }
.about-media .gal .detail-viewer { gap: 12px; }
.about-media .gal .detail-stage { height: auto; aspect-ratio: 1 / 1; width: 100%;
  border-radius: var(--radius-card); overflow: hidden; }
.about-media .gal .detail-thumbs { margin-top: 12px; }
/* Nút mũi tên ở đây nhỏ hơn trang chi tiết vì khung ảnh cũng nhỏ hơn */
.about-media .gal .stage-nav { width: 34px; height: 34px; border-width: 1.5px; }
.about-media .gal .stage-nav svg { width: 15px; height: 15px; }
/* Chốt an toàn: chỉ ảnh đang chọn được hiện, tránh mọi luật khác ép opacity */
.about-media .gal .stage-img { opacity: 0; }
.about-media .gal .stage-img.is-on { opacity: 1; }
@media (max-width: 900px) {
  .about-media .gal .detail-stage { height: auto; }
}

/* ---------- Cỡ chữ card theo chỉ định, dùng chung cho mọi khổ màn hình ---------- */
.card-price { font-size: 18px; }
.card-body h3 { font-size: 14px; }
.card-loc, .card-specs li { font-size: 12px; }
.card-tags span { font-size: 11px; }
/* Card sản phẩm 3 cột trên desktop */
.listing-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .card-price { font-size: 18px; }
  .card-body h3 { font-size: 14px; }
  .card-loc, .card-specs li { font-size: 12px; }
  .card-tags span { font-size: 11px; }
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- Trang chi tiết: ảnh chính giữa trang, thumbnail tròn, tên căn ở dưới ---------- */
.detail-hero { text-align: center; margin-bottom: 8px; }
/* Chiều cao quyết định, chiều rộng chạy theo tỉ lệ ảnh nên ảnh luôn nằm giữa */
/* Khung ảnh: chiều cao quyết định, chiều rộng theo tỉ lệ 4:3 của ảnh nguồn.
   Các ảnh xếp chồng lên nhau để chuyển bằng hiệu ứng mờ, không nạp lại src. */
.detail-stage { position: relative; height: min(70vh, 740px); aspect-ratio: 4 / 3;
  max-width: 100%; border-radius: var(--radius-card); background: var(--ivory); }
.stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; opacity: 0; transform: scale(1.03); pointer-events: none;
  transition: opacity 620ms var(--rv-ease), transform 780ms var(--rv-ease); }
.stage-img.is-on { opacity: 1; transform: scale(1); }
/* Ảnh vừa rời đi vẫn nằm dưới trong lúc mờ dần nên không thấy nền lộ ra */
.stage-img.is-out { opacity: 0; transform: scale(1.015); z-index: -1; }
.rv-motion-off .stage-img { transition: none; transform: none; }

/* Hai nút nằm ngoài khung ảnh ở mọi bề rộng: xếp hàng ngang cùng khung,
   ảnh tự co lại để chừa chỗ nên không bao giờ đè lên ảnh. */
.detail-viewer { display: flex; align-items: center; justify-content: center; gap: 14px; }
/* pan-y: trình duyệt giữ quyền cuộn dọc, phần vuốt ngang để mã JS xử lý */
.detail-stage { flex: 0 1 auto; touch-action: pan-y; }
.stage-nav { flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border: 2px solid var(--gold); border-radius: 50%; background: var(--white); color: var(--gold);
  cursor: pointer; box-shadow: 0 6px 20px rgba(16,39,72,.10);
  transition: background .25s var(--rv-ease), color .25s var(--rv-ease),
              border-color .25s var(--rv-ease), box-shadow .25s var(--rv-ease),
              transform .2s var(--rv-ease); }
.stage-nav svg { width: 22px; height: 22px; }
.stage-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--white);
  box-shadow: 0 10px 26px rgba(0,102,255,.28); }
.stage-nav:active { transform: scale(.94); }

/* Thumbnail còn 30% cỡ cũ (64px -> 19px). Vùng bấm vẫn giữ 44px bằng padding
   để trên điện thoại không bị hụt tầm ngón tay. */
.detail-thumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 14px; }
.thumb { width: 19px; height: 19px; box-sizing: content-box; padding: 12px; border: 1px solid transparent;
  border-radius: 50%; background: none; cursor: pointer; flex: none;
  background-clip: content-box;
  transition: border-color .25s var(--rv-ease), transform .25s var(--rv-ease); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.thumb:hover { transform: translate3d(0,-2px,0); }
.thumb[aria-current="true"] img { outline: 2px solid var(--gold); outline-offset: 1px; }

.detail-name { text-align: center; font-size: 29px; line-height: 1.3; max-width: 30ch;
  margin: 24px auto 0; }

@media (max-width: 900px) {
  .detail-stage { height: min(56vh, 400px); }
  /* Điện thoại bỏ hẳn hai nút mũi tên, đổi ảnh bằng cách vuốt ngang */
  .detail-viewer { gap: 0; }
  .stage-nav { display: none; }
  .detail-stage { flex: 1 1 100%; width: 100%; }
  .thumb { width: 16px; height: 16px; padding: 12px; }
  .detail-name { font-size: 19px; margin-top: 18px; }
}

/* ---------- Trang chi tiết: một cột, khối liên hệ nằm dưới phần Mô tả ---------- */
.detail-body { margin-top: 40px; max-width: 900px; margin-inline: auto; }
/* Mã sản phẩm, vị trí, hình thức và giá căn giữa cho khớp với tiêu đề bên trên */
.detail-meta { justify-content: center; text-align: center; }
.detail-price { text-align: center; }
/* Tiêu đề "Mô tả" căn giữa; đoạn văn và gạch đầu dòng vẫn canh trái cho dễ đọc */
.detail-section h2 { text-align: center; }
/* Nút gọi trong khối liên hệ đổi từ navy sang xanh dương tươi của hệ CTA */
.contact-acts .btn-navy { background: var(--gold); }
.contact-acts .btn-navy:hover { background: var(--gold-600); }

.contact-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 20px 28px; margin: 8px 0 24px; padding: 22px 26px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-card); }
.contact-who { display: flex; align-items: center; gap: 12px; }
.contact-who .avatar { width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--navy); color: var(--white); display: grid; place-items: center;
  font-family: var(--rv-display); font-weight: 600; }
.contact-who b { color: var(--navy); font-weight: 600; }
.contact-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-acts .btn { flex: none; }
.contact-acts .btn-ghost { background: var(--white); }

@media (max-width: 900px) {
  /* Còn hai nút nên xếp ngang chia đôi, đỡ tốn chiều cao khi thanh CTA dưới
     màn hình đã có sẵn Gọi/Zalo/Tư vấn */
  .contact-bar { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .contact-who { justify-content: center; text-align: center; }
  .contact-acts { flex-wrap: nowrap; }
  .contact-acts .btn { flex: 1 1 0; min-width: 0; }
}

/* Nhóm lựa chọn 4 mục: xếp 2x2 để chữ "Cho thuê nhà" không bị cắt trong hộp thoại hẹp */
.segmented.seg-2 { grid-template-columns: 1fr 1fr; }
.segmented.seg-2 label { border-bottom: 1px solid var(--line-strong); }
.segmented.seg-2 label:nth-child(2n) { border-right: 0; }
.segmented.seg-2 label:nth-last-child(-n+2) { border-bottom: 0; }
.field-label { font-size: 14px; font-weight: 500; color: var(--navy); }

/* ---------- Rê chuột vào card: ảnh thứ hai hiện chồng lên ---------- */
.card-media a { position: relative; }
/* Độ ưu tiên phải cao hơn quy tắc hiện dần của rv-motion (.rv-img.is-in > img),
   nếu không ảnh hover sẽ hiện sẵn ngay khi card lọt vào khung nhìn. */
.card .card-media .card-img-hover { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 520ms var(--rv-ease), transform 620ms var(--rv-ease); }
/* Chỉ chạy trên thiết bị có con trỏ thật; trên cảm ứng không có trạng thái rê chuột */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-media .card-img-hover { opacity: 1; }
  .card:hover .card-media img { transform: scale(1.04); }
}
.rv-motion-off .card .card-media .card-img-hover { transition: none; }

/* Card tin không còn đoạn tóm tắt nên tiêu đề được thêm chỗ, khỏi bị cắt cụt */
.post-body h3 { -webkit-line-clamp: 3; }

/* Tiêu đề card tin bằng cỡ tiêu đề card sản phẩm */
.post-body h3 { font-size: 14px; }

/* ---------- Điện thoại: gọn lại sau khi giảm cỡ tiêu đề ---------- */
@media (max-width: 640px) {
  /* Tiêu đề và dòng mô tả của mọi section căn giữa trang */
  .section-head { align-items: center; text-align: center; }
  .section-head > div { text-align: center; }

  /* Giá căn nằm giữa card cho cân với ảnh vuông bên trên */
  .card-body .card-price { text-align: center; }

  /* Footer: hai cột cho hai danh sách ngắn, khối thương hiệu và Liên hệ trải ngang */
  .footer { padding-top: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding-bottom: 24px; }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer p { font-size: 13px; }
  .footer .logo { margin-bottom: 10px; }
  .footer h4 { font-size: 14px; margin-bottom: 8px; }
  .footer ul { gap: 4px; }
  .footer li a { min-height: 24px; font-size: 13px; }
  .footer-social { gap: 8px; margin-top: 12px; }
  .footer-social a { width: 34px; height: 34px; }
  .footer-social svg { width: 16px; height: 16px; }
  .footer-bottom { gap: 6px; padding: 14px 0; font-size: 12px; }
}

/* ============================ SECTION KÝ GỬI ============================ */
.ky-card { display: grid; grid-template-columns: 340px 1fr; align-items: stretch;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; box-shadow: 0 10px 34px rgba(16,39,72,.07); }

/* Panel trái nền navy, cao bằng cả thẻ */
.ky-side { background: var(--navy); color: var(--white); padding: 40px 32px; }
.ky-side .eyebrow { color: #7FB0FF; margin-bottom: 14px; }
.ky-side h2 { color: var(--white); font-size: 32px; line-height: 1.2; max-width: none; margin-bottom: 12px; }
.ky-side p { color: rgba(255,255,255,.78); margin-bottom: 30px; }
/* Cụm eyebrow + tiêu đề + mô tả căn giữa */
.ky-side .eyebrow, .ky-side h2, .ky-side p { text-align: center; }
.ky-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ky-benefits li { display: flex; align-items: center; gap: 12px; color: var(--white); font-weight: 500; }
/* Danh sách co bằng đúng dòng dài nhất rồi tự căn giữa, nhờ vậy ba nút tròn
   thẳng một hàng dọc thay vì mỗi dòng lệch một kiểu. Đặt sau khai báo gốc
   vì khai báo đó có margin: 0. */
.ky-benefits { width: max-content; max-width: 100%; margin-inline: auto; }
.ky-benefits li { justify-content: flex-start; }
.ky-benefits svg { width: 26px; height: 26px; flex: none; color: var(--white);
  background: var(--gold); border-radius: 50%; padding: 4px; }
/* Icon check vốn có sẵn vòng tròn nét; ẩn đi để thành đĩa tròn đặc như mẫu */
.ky-benefits svg circle { display: none; }

/* Cột phải */
.ky-main { padding: 30px 32px 28px; min-width: 0; }
.ky-head { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px;
  flex-wrap: wrap; margin-bottom: 22px; }
.ky-head h3 { font-size: 26px; margin: 0; }
.ky-need { display: flex; align-items: center; gap: 12px; }
.ky-need .field-label { white-space: nowrap; }
.ky-need .segmented { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; }
.ky-need .segmented label { padding: 0 20px; min-height: 42px; }
.ky-need .segmented label:has(input:checked) { background: var(--gold); color: var(--white); }

.ky-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; }
.ky-grid .ky-full { grid-column: 1 / -1; }
.ky-form .field input, .ky-form .field select { min-height: 46px; }

/* Hàng thao tác: nút đính kèm bên trái, nút gửi đẩy sang phải */
.ky-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.ky-upload { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 1px solid var(--gold); border-radius: var(--radius-ui);
  color: var(--gold); font-weight: 500; cursor: pointer; background: var(--white);
  transition: background .25s var(--rv-ease), color .25s var(--rv-ease); }
.ky-upload:hover { background: var(--gold-100); }
.ky-upload svg { width: 20px; height: 20px; }
.ky-upload input { display: none; }
.ky-hint { font-size: 13px; color: var(--muted); }
.ky-submit { margin-left: auto; min-height: 52px; padding: 0 34px; }
/* Cột phải căn giữa: hàng tiêu đề + Nhu cầu, và nút gửi.
   Đặt sau khai báo gốc vì khai báo đó có margin-left: auto đẩy nút sang phải. */
.ky-head { justify-content: center; }
.ky-actions { justify-content: center; }
.ky-submit { margin-left: 0; }

.ky-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.ky-foot .check { font-size: 14px; color: var(--navy); }
.ky-note { padding-left: 14px; border-left: 1px solid var(--line-strong); font-size: 14px; color: var(--muted); }
.ky-form .form-status { margin-top: 14px; }

@media (max-width: 1100px) {
  .ky-card { grid-template-columns: 260px 1fr; }
  .ky-side { padding: 32px 24px; }
  .ky-side h2 { font-size: 30px; }
  .ky-main { padding: 26px 24px; }
  .ky-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ky-card { grid-template-columns: 1fr; }
  .ky-side { padding: 26px 20px; }
  .ky-side h2 { font-size: 26px; }
  .ky-side p { margin-bottom: 20px; }
  .ky-benefits { grid-auto-flow: row; gap: 12px; }
  .ky-main { padding: 22px 18px 20px; }
  .ky-head { gap: 14px; }
  .ky-head h3 { font-size: 20px; }
  .ky-need { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
  .ky-need .segmented { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
  .ky-need .segmented label { padding: 0 8px; border-bottom: 1px solid var(--line-strong); }
  .ky-need .segmented label:nth-child(2n) { border-right: 0; }
  .ky-need .segmented label:nth-last-child(-n+2) { border-bottom: 0; }
  .ky-grid { grid-template-columns: 1fr; }
  .ky-actions { flex-wrap: wrap; }
  .ky-upload, .ky-submit { width: 100%; margin-left: 0; }
  .ky-hint { width: 100%; text-align: center; }
  .ky-note { padding-left: 0; border-left: 0; }
}

/* ============================================================
   BANNER — dựng lại theo ảnh mẫu desktop + mobile (09/09)
   ============================================================ */
.hero { min-height: 100vh; min-height: 100svh; align-items: center; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Lớp phủ: tối dần từ trái sang phải để chữ trắng luôn đọc được */
.hero::before {
  background:
    linear-gradient(96deg, rgba(16,39,72,.86) 0%, rgba(16,39,72,.62) 34%, rgba(16,39,72,.18) 64%, rgba(16,39,72,.04) 100%);
}

.hero-inner { padding-block: calc(var(--header-h) + 40px) 80px; padding-inline: 0; }
@media (max-width: 900px) { .hero-inner { padding-inline: var(--gutter); } }
.hero-content { max-width: 640px; }

.hero-eyebrow {
  display: block; margin-bottom: 14px;
  font-family: var(--rv-body); font-size: 14px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.hero h1 {
  color: var(--white); max-width: 14ch;
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.06;
  letter-spacing: -.02em; margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(16,39,72,.28);
}
.hero p {
  font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55;
  color: rgba(255,255,255,.9); max-width: 30ch; margin-bottom: 34px;
}
.hero-ctas { gap: 14px; }
.hero-ctas .btn { min-height: 54px; padding: 0 30px; font-size: 16px; }
.hero-ctas .btn-outline-light { border-width: 1.5px; }

/* Chữ ký + ghi chú ảnh, góc dưới bên phải */
.hero-sign {
  position: absolute; right: 7%; bottom: 42px; z-index: 1;
  text-align: right; pointer-events: none;
}
.hero .hero-sign .hero-tagline {
  position: static; transform: none; rotate: none;
  font-style: italic; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.45;
  color: rgba(255,255,255,.88); text-align: right; margin: 0;
  text-shadow: 0 1px 14px rgba(16,39,72,.4);
}
.hero .hero-sign .hero-tagline span,
.hero .hero-sign .hero-tagline strong { display: block; }
.hero .hero-sign .hero-tagline strong { font-weight: 700; }
.hero .hero-illus {
  margin: 12px 0 0; font-size: 11px; font-style: normal;
  color: rgba(255,255,255,.6); letter-spacing: .02em;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero-content { max-width: 78%; }
  .hero-sign { bottom: 30px; }
}

/* ---------- Mobile: ảnh dọc, chữ nằm trên vùng trời ---------- */
@media (max-width: 768px) {
  .hero { align-items: flex-start; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(16,39,72,.62) 0%, rgba(16,39,72,.44) 30%, rgba(16,39,72,.16) 52%, rgba(16,39,72,0) 66%),
      linear-gradient(0deg, rgba(16,39,72,.5) 0%, rgba(16,39,72,0) 28%);
  }
  .hero-inner { padding-block: calc(var(--header-h) + 26px) 0; padding-inline: var(--gutter); }
  .hero-content { max-width: 100%; }
  .hero-eyebrow { font-size: 12px; letter-spacing: .18em; margin-bottom: 10px; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 44px); max-width: 12ch; margin-bottom: 14px; }
  .hero p { font-size: 16px; max-width: 28ch; margin-bottom: 26px; }
  .hero-ctas { flex-direction: column; gap: 12px; }
  .hero-ctas .btn { width: 100%; min-height: 52px; }
  .hero-sign { right: var(--gutter); bottom: 96px; }
  .hero-ctas .btn-outline-light { background: rgba(16,39,72,.3); backdrop-filter: blur(3px); }
  .hero .hero-sign .hero-tagline { display: block; font-size: 15px; }
  .hero .hero-illus { font-size: 10px; margin-top: 8px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 15px; margin-bottom: 20px; }
  .hero-ctas .btn { min-height: 48px; font-size: 15px; }
}

/* Trang chi tiết: thu hẹp 50% khoảng cách giữa khối liên hệ và mục "Bất động sản tương tự" */
[data-page="detail"] main > section#detail { padding-bottom: 24px; margin-block-end: 32px; }
[data-page="detail"] main > section#similarWrap { padding-top: 48px; }
@media (max-width: 900px) {
  [data-page="detail"] main > section#detail { padding-bottom: 18px; margin-block-end: 22px; }
  [data-page="detail"] main > section#similarWrap { padding-top: 32px; }
}

/* ============================================================
   MENU PHÂN KHU TRONG HEADER — sinh từ dữ liệu, tự cập nhật
   ============================================================ */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-chev { width: 14px; height: 14px; flex: none; transition: transform .22s var(--rv-ease); }
.nav-item:hover > a .nav-chev, .nav-item:focus-within > a .nav-chev { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 460px; padding: 14px 14px 10px; z-index: 40;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16,39,72,.14);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--rv-ease), transform .22s var(--rv-ease), visibility .22s;
}
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
/* Vùng đệm để chuột đi từ nút xuống menu không bị mất hover */
.nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.nav-sub-in { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.nav .nav-sub a {
  min-height: 38px; padding: 0 12px; font-size: 14.5px; font-weight: 500;
  color: var(--navy); border-radius: 9px; white-space: nowrap;
}
.nav .nav-sub a::after { display: none; }
.nav .nav-sub a:hover { background: var(--ivory); color: var(--gold-600); }
/* Header trong suốt trên banner: menu con vẫn nền trắng chữ đậm */
.header:not(.is-solid) .nav .nav-sub a { color: var(--navy); }

@media (max-width: 1180px) { .nav-sub { min-width: 400px; } }

/* ---------- Menu di động ---------- */
.mnav-group { border: 0; }
.mnav-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 12px; font-size: 17px; font-weight: 500;
  color: var(--navy); border-radius: var(--radius-ui);
}
.mnav-group > summary::-webkit-details-marker { display: none; }
.mnav-group[open] > summary .nav-chev { transform: rotate(180deg); }
.mnav-sub { display: grid; padding: 2px 0 8px 12px; border-left: 2px solid var(--line); margin-left: 12px; }
.mobile-nav .mnav-sub a { min-height: 42px; font-size: 15px; color: var(--muted); }

/* ============================================================
   BÀI VIẾT — nhãn góc thẻ và nội dung soạn từ CMS
   ============================================================ */
.post-media { position: relative; }
.post-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--rv-body); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--white); background: var(--gold);
}
.post-badge.b-hot { background: #E11D48; }
.post-badge.b-urgent { background: #B45309; }

.post-article > * { margin-bottom: 16px; }
.post-article > *:last-child { margin-bottom: 0; }
.post-article img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); margin: 24px 0; }
.post-article h2 { font-size: 26px; margin: 32px 0 12px; }
.post-article h3 { font-size: 20px; margin: 26px 0 10px; }
.post-article ul, .post-article ol { padding-left: 22px; }
.post-article li { margin-bottom: 8px; }
.post-article [data-style="lead"] { font-size: 18px; line-height: 1.65; color: var(--navy); font-weight: 500; }
.post-article [data-style="note"] {
  padding: 14px 18px; border-left: 3px solid var(--gold);
  background: var(--ivory); border-radius: 0 10px 10px 0; color: var(--muted); font-size: 14.5px;
}
.post-article [data-align="center"] { text-align: center; }
.post-article [data-align="right"] { text-align: right; }

/* ============================================================
   THANH TÌM KIẾM — một kích thước dùng chung cho mọi trang
   ============================================================ */
:root { --loc-cao: 42px; --loc-khe: 10px; --loc-chu: 14px; }

.search-form, .pk-filter { gap: var(--loc-khe); align-items: end; }
.search-form { padding: 16px; }
.pk-filter { margin-bottom: 22px; }

.search-form .control,
.pk-filter .control,
.search-form .search-btn,
.pk-filter .pk-search {
  height: var(--loc-cao); min-height: var(--loc-cao);
  font-size: var(--loc-chu); border-radius: 10px;
}
.search-form .control, .pk-filter .control {
  padding: 0 30px 0 13px;
  background-position: right 10px center; background-size: 15px;
}
.search-form .search-btn, .pk-filter .pk-search { padding: 0 18px; }
.search-form .search-btn svg, .pk-filter .pk-search svg { width: 17px; height: 17px; }
.search-form .field label, .pk-filter .field label { font-size: 12px; }

/* Bỏ các quy tắc cột cố định cũ — số cột nay do JS tính theo số ô đang hiện */
@media (min-width: 901px) {
  .search-form .search-btn,
  .search-form.no-subarea .search-btn,
  .pk-filter .pk-search { grid-column: auto; grid-row: auto; }
}
@media (max-width: 900px) {
  :root { --loc-cao: 44px; }
  .search-form { padding: 14px; }
}

/* Ba nút dưới banner nằm chung một hàng ở mọi khổ máy tính và máy tính bảng.
   Dưới 700px mới xếp dọc vì hàng ngang sẽ quá chật. Đặt cuối tệp để thắng
   luật xếp dọc ở khối max-width: 900px phía trên. */
@media (min-width: 700px) {
  .hero-ctas { flex-direction: row; flex-wrap: nowrap; gap: 14px; }
  .hero-ctas .btn { width: auto; white-space: nowrap; }
}

/* Máy hẹp 320px: logo + nút gọi + nút menu rộng hơn màn hình 34px nên tràn.
   Thu logo lại và cho tên co được, có dấu ba chấm làm chốt an toàn. */
@media (max-width: 380px) {
  .header-inner { gap: 8px; }
  .logo { min-width: 0; gap: 7px; }
  .logo img { height: 26px; }
  .logo small { display: none; }
  .header-actions { gap: 6px; }
}

/* ---------- Logo ảnh ----------
   Bản vàng sáng dùng cho nền tối (banner chưa cuộn, footer), bản vàng đậm dùng
   cho nền trắng vì vàng sáng đặt trên trắng gần như không đọc được. */
/* max-width:100% toàn cục làm logo bị bóp lại khi cột lưới hẹp, phải gỡ ra
   thì logo mới giữ đúng bề ngang và ta mới đo được menu có vừa thật hay không. */
.logo { flex: none; }
.logo img { height: 34px; width: auto; max-width: none; display: block; flex: none; }
/* Logo ảnh đã có sẵn tên thương hiệu nên header không lặp lại dòng mô tả nữa;
   footer và ngăn kéo menu vẫn giữ vì ở đó còn chỗ. */
.header .logo small { display: none; }
.logo .lg-light { display: none; }
.header:not(.is-solid) .logo .lg-light,
.footer .logo .lg-light { display: block; }
.header:not(.is-solid) .logo .lg-dark,
.footer .logo .lg-dark { display: none; }
.footer .logo img { height: 38px; }
@media (max-width: 900px) { .logo img { height: 30px; } }

/* Nút tìm kiếm: luôn sát lề phải và cùng một bề ngang ở trang chủ lẫn trang
   phân khu, thay vì co giãn theo số cột còn trống. */
@media (min-width: 901px) {
  .search-acts { justify-self: end; }
  /* flex: none để nút Tìm kiếm không bị nút Xoá lọc bóp nhỏ lại */
  .search-form .search-btn, .pk-filter .pk-search { flex: 0 0 200px; width: 200px; }
}

/* ---------- Xem ảnh phóng to ----------
   Ảnh dùng contain nên giấy tờ, sơ đồ hiện đủ chứ không bị cắt như ở khung nhỏ. */
.lb { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: rgba(8,16,30,.92); opacity: 0; transition: opacity 200ms var(--rv-ease);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.lb.is-in { opacity: 1; }
.lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.lb-fig img { display: block; max-width: min(94vw, 1400px); max-height: 86vh;
  width: auto; height: auto; object-fit: contain; border-radius: 6px;
  transform: scale(.97); transition: transform 240ms var(--rv-ease); }
.lb.is-in .lb-fig img { transform: scale(1); }
.lb-close, .lb-nav { position: absolute; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.10);
  color: #fff; width: 44px; height: 44px; backdrop-filter: blur(4px);
  transition: background .2s var(--rv-ease), border-color .2s var(--rv-ease), transform .2s var(--rv-ease); }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.22); border-color: #fff; }
.lb-close:active, .lb-nav:active { transform: scale(.94); }
.lb-close { top: 18px; right: 18px; }
.lb-close svg { width: 20px; height: 20px; }
.lb-nav svg { width: 22px; height: 22px; }
.lb-prev { left: 18px; top: 50%; margin-top: -22px; }
.lb-next { right: 18px; top: 50%; margin-top: -22px; }
.lb-count { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: .06em;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 5px 14px; backdrop-filter: blur(4px); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Khung ảnh bấm được thì con trỏ phải báo cho biết */
.detail-stage { cursor: zoom-in; }
@media (max-width: 640px) {
  .lb-nav { display: none; }              /* điện thoại vuốt để chuyển ảnh */
  .lb-close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .lb-fig img { max-width: 96vw; max-height: 78vh; }
}

/* Tên dài hơn bề ngang ô lọc thì cắt bằng dấu ba chấm thay vì cụt giữa chữ.
   Danh sách khi xổ xuống vẫn hiện đủ tên. */
.search-form select, .pk-filter select {
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

/* Tiêu đề trong phần Mô tả bị luật h2 { max-width } bó lại, nên căn giữa xong
   vẫn lệch sang trái. Bỏ giới hạn để nó căn giữa đúng cột nội dung. */
.detail-section h2 { max-width: none; }

/* ---------- Khối liên hệ ở trang chi tiết: dựng lại cho chỉn chu ---------- */
.contact-bar {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 26px 20px 30px;
  box-shadow: 0 2px 6px rgba(16,39,72,.05), 0 12px 32px rgba(16,39,72,.07);
  gap: 20px 32px;
}
/* Vạch màu thương hiệu ở mép trái, thay cho mảng nền xanh nhạt phẳng lì */
.contact-bar::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--navy));
}
.contact-who { gap: 14px; }
.contact-who .avatar {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--navy); color: var(--white);
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  box-shadow: 0 0 0 3px rgba(0,102,255,.12);
}
.contact-name { display: grid; gap: 2px; }
.contact-name b { color: var(--navy); font-weight: 600; font-size: 15px; line-height: 1.3; }
.contact-name > span { font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }
.contact-acts .btn { gap: 8px; min-height: 46px; padding: 0 20px; font-size: 14.5px; }
.contact-acts .btn svg { width: 17px; height: 17px; flex: none; }
.contact-acts .btn-ghost { background: var(--white); border: 1px solid var(--line-strong); color: var(--navy); }
.contact-acts .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-100); }
@media (max-width: 640px) {
  /* Điện thoại: thẻ xếp dọc, hai nút chia đôi hàng và cho phép chữ co lại
     để không đẩy rộng quá khung. */
  .contact-bar { padding: 18px 16px 18px 20px; border-radius: 14px; }
  .contact-who { justify-content: flex-start; text-align: left; }
  .contact-acts { flex-wrap: nowrap; gap: 8px; width: 100%; }
  .contact-acts .btn { min-width: 0; padding: 0 10px; font-size: 13.5px; gap: 6px; }
  /* Số điện thoại là nội dung chính nên nút gọi được chia phần rộng hơn,
     đủ chỗ hiện trọn số thay vì cắt bằng dấu ba chấm. */
  .contact-acts .btn-navy { flex: 1.7 1 0; }
  .contact-acts .btn-ghost { flex: 1 1 0; }
  .contact-acts .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Máy rất hẹp (<=400px) không đủ chỗ cho hai nút cạnh nhau mà giữ trọn số
   điện thoại, nên xếp dọc mỗi nút một hàng. */
@media (max-width: 400px) {
  .contact-acts { flex-wrap: wrap; }
  .contact-acts .btn-navy, .contact-acts .btn-ghost { flex: 1 1 100%; }
}

/* ---------- Cụm nút của thanh lọc: Xoá lọc + Tìm kiếm ---------- */
.search-acts { display: flex; align-items: end; gap: 10px; justify-content: flex-end; min-width: 0; }
.search-acts .btn { min-height: var(--loc-cao); height: var(--loc-cao);
  font-size: var(--loc-chu); border-radius: 10px; }
.search-reset { flex: none; white-space: nowrap; padding: 0 16px;
  background: var(--white); border: 1px solid var(--line-strong); color: var(--muted); }
.search-reset:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-100); }
@media (max-width: 900px) {
  /* Màn hẹp: cụm nút chiếm trọn hàng, hai nút chia đôi */
  .search-form .search-acts { grid-column: 1 / -1; order: 9; }
  .pk-filter .search-acts { grid-column: 1 / -1; grid-row: auto; }
  .search-acts .btn { flex: 1 1 0; }
  .search-reset { flex: 0 1 40%; }
}

/* ---------- Dòng vị trí trong card: mobile tách "Tòa ..." xuống dòng riêng ---------- */
/* Chỉ thay cách hiển thị, dữ liệu phân khu/tòa trong CMS giữ nguyên */
.card-loc .loc-toa i { font-style: normal; }
@media (max-width: 900px) {
  .card-loc { align-items: flex-start; }
  .card-loc svg { margin-top: 2px; }
  .card-loc .loc-toa { display: block; }
  .card-loc .loc-toa i { display: none; }
}

/* ---------- Mobile: 3 thông số (m², PN, WC) luôn nằm trên một hàng ---------- */
/* Cỡ chữ co theo bề ngang màn hình, icon và khoảng cách tính bằng em nên cả
   cụm thu nhỏ đồng đều; trần 12px giữ nguyên cỡ cũ ở màn rộng. */
@media (max-width: 900px) {
  .card-body { padding-inline: 12px; }
  .card-specs { flex-wrap: nowrap; gap: 0 0.45em; font-size: min(12px, 2.75vw); }
  .card-specs li { gap: 0.25em; white-space: nowrap; font-size: inherit; }
  .card-specs li svg { width: 1em; height: 1em; }
}
/* Màn rất hẹp (dưới 360px) cần co thêm một nấc mới đủ chỗ cho cả ba thông số */
@media (max-width: 359px) {
  .card-specs { font-size: 2.5vw; }
}

/* ---------- Card sản phẩm: mọi thành phần căn giữa ---------- */
/* Giữ align-items: stretch để mỗi dòng vẫn rộng bằng card, chỉ căn giữa nội dung
   bên trong — tránh việc dòng thông số co lại rồi tràn ra hai bên. */
.card-body { text-align: center; }
.card-body h3, .card-body .card-price, .card-body .card-extra { text-align: center; }
.card-loc, .card-specs, .card-tags { justify-content: center; }

/* ---------- Form ký gửi: ô đánh dấu và khu tải ảnh của khách ---------- */
.ky-form .field-check { justify-content: flex-end; }
.ky-check { display: flex; align-items: center; gap: 10px; min-height: 46px; cursor: pointer; }
.ky-check input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--gold); }
.ky-check span { font-size: 14px; font-weight: 500; color: var(--navy); }

.ky-anh .up-box { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.ky-anh .up-ds { display: contents; }
.ky-anh .up-add {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 92px; height: 92px; padding: 6px; border: 1px dashed var(--line-strong); border-radius: var(--radius-ui);
  background: var(--white); color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.ky-anh .up-add:hover { border-color: var(--gold); color: var(--gold); background: var(--ivory); }
.ky-anh .up-add svg { width: 22px; height: 22px; }
.ky-anh .up-o {
  position: relative; width: 92px; height: 92px; border-radius: var(--radius-ui);
  overflow: hidden; background: var(--ivory); border: 1px solid var(--line-strong);
}
.ky-anh .up-o img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ky-anh .up-o.dang-tai img { opacity: .45; }
.ky-anh .up-o.dang-tai::after {
  content: ''; position: absolute; inset: 50% auto auto 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid rgba(16,39,72,.25); border-top-color: var(--gold); border-radius: 50%;
  animation: up-quay .7s linear infinite;
}
@keyframes up-quay { to { transform: rotate(360deg); } }
.ky-anh .up-o.loi { border-color: var(--danger); }
.ky-anh .up-tt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px;
  background: var(--danger); color: #fff; font-size: 11px; text-align: center;
}
.ky-anh .up-o:not(.loi) .up-tt { display: none; }
.ky-anh .up-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: rgba(16,39,72,.72); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.ky-anh .up-x:hover { background: var(--danger); }
.ky-anh .up-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .ky-anh .up-add, .ky-anh .up-o { width: 78px; height: 78px; }
  .ky-form .field-check { justify-content: flex-start; }
}

/* ---------- Badge tiện ích trên thẻ sản phẩm ---------- */
.card-media { position: relative; }
/* Xếp từ phải sang, hết chỗ thì xuống dòng; không chắn thao tác bấm vào ảnh */
.card-badges {
  position: absolute; z-index: 2; top: 10px; right: 10px; max-width: calc(100% - 20px);
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px;
  pointer-events: none;
}
.card-badge {
  max-width: 100%; padding: 5px 10px; border-radius: 999px;
  background: rgba(16, 39, 72, .82); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}
.card-badge.is-more { background: rgba(16, 39, 72, .62); }
@media (max-width: 900px) {
  .card-badges { top: 7px; right: 7px; gap: 3px; max-width: calc(100% - 14px); }
  .card-badge { padding: 4px 8px; font-size: 11px; }
}