@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   HỆ THỐNG THIẾT KẾ "MIDNIGHT & GILT" — bảng màu xanh navy đậm + ánh vàng,
   lấy cảm hứng từ đồng hồ và bất động sản cao cấp. Dùng biến CSS để toàn bộ
   trang (bản đồ, thẻ dự án, modal, footer, trang chi tiết, admin...) đồng
   bộ một ngôn ngữ thị giác sang trọng, nhất quán trên mọi thiết bị.
   ========================================================================= */
:root {
    --navy-950: #070f1c;
    --navy-900: #0d1b30;
    --navy-800: #12233d;
    --navy-700: #1e3a5f;
    --navy-600: #2d4a6d;

    --gold-700: #8a6a16;
    --gold-600: #a9782c;
    --gold-500: #c9a227;
    --gold-400: #d9b64f;
    --gold-300: #e8cf8f;
    --gold-100: #f7efd9;

    --cream: #faf7f1;
    --paper: #ffffff;
    --ink: #182233;
    --slate: #5b6472;
    --line: #e8e2d3;
    --line-soft: #f0ece0;

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 2px 8px rgba(13,27,48,.06);
    --shadow-md: 0 10px 28px rgba(13,27,48,.10);
    --shadow-lg: 0 20px 48px rgba(13,27,48,.16);
    --shadow-gold: 0 10px 24px rgba(169,120,44,.28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
h1, h2, h3, .detail-title, .lead-modal-header h3 { font-family: var(--font-display); letter-spacing: .2px; }

/* Vùng chạm tối thiểu 44px cho mọi phần tử tương tác — chuẩn khả dụng trên
   di động, tránh bấm nhầm bằng ngón tay. */
button, .btn, a.btn, select, input[type="text"], input[type="tel"], input[type="email"] {
    min-height: 44px;
}
::selection { background: var(--gold-300); color: var(--navy-900); }

/* ---- Topbar ---- */
.topbar { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 20; }
.topbar-inner { max-width: 1400px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; position: relative; }
.brand { font-weight: 700; font-size: 18px; color: #2563eb; white-space: nowrap; }
.search-box { flex: 1; }
.search-box input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.count-badge { background: #eff6ff; color: #2563eb; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---- Menu topbar - luôn hiện ngang trên máy tính, thu gọn trên di động ---- */
.topbar-menu-toggle {
    display: none;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px;
    width: 38px; height: 38px; font-size: 18px; cursor: pointer; flex-shrink: 0;
}
.topbar-extra { display: flex; align-items: center; gap: 10px; margin-left: auto; }

@media (max-width: 900px) {
    .topbar-inner { flex-wrap: wrap; gap: 10px; }
    .search-box { order: 3; width: 100%; }
    .topbar-menu-toggle { display: block; }
    .topbar-extra {
        display: none;
        position: absolute;
        top: 100%; right: 12px;
        background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.15);
        padding: 14px; margin-left: 0;
        flex-direction: column; align-items: stretch; gap: 8px;
        min-width: 200px; z-index: 200;
    }
    .topbar-extra.open { display: flex; }
    .topbar-extra .user-menu { justify-content: center; }
}

/* Logo trong topbar (dùng khi có ảnh logo thay vì chỉ chữ) */
.brand-logo-link { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand-logo-link img { height: 44px; width: auto; display: block; }
.brand-logo-link .brand-text { font-weight: 700; font-size: 18px; color: #2563eb; }

/* ---- Banner quảng cáo / giới thiệu đầu trang ---- */
.site-banner { width: 100%; max-width: 1400px; margin: 12px auto 0; padding: 0 20px; }
.site-banner img { width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 900px) {
    .site-banner { padding: 0 12px; }
    .site-banner img { max-height: 140px; }
}

/* ---- Layout: sidebar + map ---- */
.layout { display: flex; height: calc(100vh - 57px); }
.sidebar { width: 380px; min-width: 380px; overflow-y: auto; border-right: 1px solid #e5e7eb; background: #fff; padding: 12px; }
.map-wrap { flex: 1; position: relative; }
#map {
    width: 100%; height: 100%;
    /* Báo trình duyệt để Leaflet tự xử lý toàn bộ cử chỉ chạm (kéo/zoom),
       tránh xung đột với việc cuộn trang - đây là nguyên nhân phổ biến
       khiến bản đồ kéo/zoom bị giật, khó dùng trên điện thoại. */
    touch-action: none;
}

/* Phóng to nút +/- zoom cho dễ bấm bằng ngón tay trên di động */
.leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 34px !important;
    font-size: 20px !important;
}

@media (max-width: 900px) {
    .layout { flex-direction: column; height: auto; }
    .sidebar { width: 100%; min-width: 0; max-height: 40vh; }
    .map-wrap { height: 60vh; }
}
/* Điện thoại (màn hình hẹp hơn nữa): giảm tỉ lệ khung danh sách xuống,
   nhường thêm chỗ cho bản đồ - khách đỡ phải cuộn nhiều mới thấy bản đồ.
   (Phần gọn ảnh thẻ dự án + ẩn dòng phụ đặt ở cuối file style.css, trong
   khối "TỐI ƯU RIÊNG CHO DI ĐỘNG" để không bị khối đó ghi đè lại.) */
@media (max-width: 640px) {
    .sidebar { max-height: 26vh; }
    .map-wrap { height: 68vh; }
}

/* ---- Bộ lọc trong sidebar ---- */
.filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
}
.filter-bar select {
    padding: 8px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 12.5px;
    background: #fff;
    color: #1f2937;
}
@media (max-width: 900px) {
    .filter-bar { grid-template-columns: 1fr 1fr; }
}

/* ---- Project card ---- */
.project-card {
    display: flex; flex-direction: column;
    padding: 0; border-radius: 14px; cursor: pointer;
    margin-bottom: 16px; border: 1px solid #e5e7eb;
    background: #fff; overflow: hidden; position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}
.project-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.project-card.active { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* Dự án nổi bật (đang chạy quảng cáo) - viền phát sáng, màu theo cấp độ */
.project-card.featured {
    border: 2px solid #f97316;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 60%);
    box-shadow: 0 0 0 3px rgba(249,115,22,.15), 0 4px 14px rgba(249,115,22,.2);
    animation: featured-glow 2.5s ease-in-out infinite;
}
/* Cấp Chuyên nghiệp - tím */
.project-card.featured-pro {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 60%);
    box-shadow: 0 0 0 3px rgba(124,58,237,.15), 0 4px 14px rgba(124,58,237,.2);
    animation: featured-glow-pro 2.5s ease-in-out infinite;
}
/* Cấp VIP - vàng gold, hiệu ứng mạnh nhất */
.project-card.featured-vip {
    border-color: #d97706;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 55%);
    box-shadow: 0 0 0 4px rgba(217,119,6,.2), 0 6px 18px rgba(217,119,6,.3);
    animation: featured-glow-vip 2s ease-in-out infinite;
}
@keyframes featured-glow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(249,115,22,.15), 0 4px 14px rgba(249,115,22,.2); }
    50% { box-shadow: 0 0 0 5px rgba(249,115,22,.25), 0 6px 20px rgba(249,115,22,.35); }
}
@keyframes featured-glow-pro {
    0%, 100% { box-shadow: 0 0 0 3px rgba(124,58,237,.15), 0 4px 14px rgba(124,58,237,.2); }
    50% { box-shadow: 0 0 0 5px rgba(124,58,237,.25), 0 6px 20px rgba(124,58,237,.35); }
}
@keyframes featured-glow-vip {
    0%, 100% { box-shadow: 0 0 0 4px rgba(217,119,6,.2), 0 6px 18px rgba(217,119,6,.3); }
    50% { box-shadow: 0 0 0 7px rgba(217,119,6,.35), 0 8px 24px rgba(217,119,6,.45); }
}
.featured-badge {
    position: absolute; top: 8px; left: 8px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
    box-shadow: 0 2px 6px rgba(234,88,12,.4);
    z-index: 3;
}
.featured-badge-pro { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 2px 6px rgba(124,58,237,.4); }
.featured-badge-vip { background: linear-gradient(135deg, #f59e0b, #b45309); box-shadow: 0 2px 6px rgba(180,83,9,.5); }
.card-image-wrap { position: relative; width: 100%; height: 168px; flex-shrink: 0; }
.card-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-status-overlay {
    position: absolute; bottom: 8px; left: 8px; margin: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.project-card-body { flex: 1; min-width: 0; padding: 12px 14px 14px; }

.card-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.card-rating-stars { font-size: 11px; letter-spacing: -1px; }
.card-rating-num { font-weight: 700; font-size: 12.5px; color: #12233d; }
.card-rating-count { font-size: 11px; color: #9ca3af; }

.card-stats-row {
    display: flex; gap: 12px; font-size: 11.5px; color: #9ca3af;
    margin: 6px 0 10px;
}

.view-detail-btn {
    display: block; text-align: center;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; font-weight: 700; font-size: 13px;
    padding: 10px; border-radius: 8px; text-decoration: none;
    margin-bottom: 8px;
    box-shadow: 0 4px 10px rgba(37,99,235,.3);
    transition: transform .15s;
}
.view-detail-btn:hover { transform: translateY(-1px); }
.ai-image-badge {
    position: absolute; bottom: 4px; left: 4px;
    background: rgba(0,0,0,.65); color: #fff;
    font-size: 9px; padding: 1px 5px; border-radius: 4px;
    font-weight: 600;
}
.project-card-body h3 { margin: 2px 0 4px; font-size: 15px; }
.project-card-body .addr { font-size: 12px; color: #6b7280; margin: 0 0 4px; }
.project-card-body .price { font-size: 13px; color: #16a34a; font-weight: 600; margin: 0; }
.project-card-body .area { font-size: 12px; color: #6b7280; margin: 2px 0; }
.project-card-body .developer { font-size: 12px; color: #4b5563; margin: 0 0 2px; }
.project-card-body .slogan { font-size: 12px; color: #7c3aed; font-style: italic; margin: 0 0 4px; }
.view-detail { font-size: 12px; color: #2563eb; font-weight: 600; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.btn-view-map { font-size: 11.5px; color: #2563eb; background: #eff6ff; border: none; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.card-contact { display: flex; gap: 6px; margin-top: 6px; }
.card-contact-btn {
    flex: 1; text-align: center; font-size: 12px; font-weight: 600;
    padding: 6px 8px; border-radius: 6px; color: #fff;
}
.card-contact-btn.call { background: #16a34a; }
.card-contact-btn.zalo { background: #0ea5e9; }

.status-tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-bottom: 4px; }
.status-dang_mo_ban { background: #dcfce7; color: #15803d; }
.status-sap_mo_ban { background: #fef9c3; color: #a16207; }
.status-da_ban_giao { background: #dbeafe; color: #1d4ed8; }
.status-ngung_ban { background: #f3f4f6; color: #6b7280; }

.empty-state { padding: 40px 16px; text-align: center; color: #6b7280; font-size: 14px; }

/* ---- Ghim bản đồ Leaflet tùy chỉnh (màu được set inline theo trạng thái qua JS) ---- */
.pin {
    width: 22px; height: 22px;
    background: #6b7280; /* màu mặc định, JS sẽ ghi đè theo trạng thái */
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.pin-active { background: #dc2626 !important; } /* dự án đang được chọn luôn nổi bật màu đỏ */
.leaflet-container { font-family: 'Segoe UI', Arial, sans-serif; }

/* ---- Ghim nhấp nháy cho dự án nổi bật (quảng cáo) ---- */
.pin-wrap { position: relative; width: 26px; height: 26px; }
.pin-featured { box-shadow: 0 0 0 2px #f97316, 0 2px 6px rgba(0,0,0,.35) !important; }
.pin-pulse-ring {
    position: absolute;
    top: 0; left: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(249,115,22,.5);
    animation: pin-pulse 1.6s ease-out infinite;
}
@keyframes pin-pulse {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Ghim dự án nổi bật: nhảy lên-xuống liên tục để thu hút mắt */
.pin-bounce { animation: pin-bounce .9s ease-in-out infinite; }
@keyframes pin-bounce {
    0%, 100% { transform: rotate(-45deg) translateY(0); }
    50% { transform: rotate(-45deg) translateY(-7px); }
}

/* Nhãn nổi phía trên ghim, luôn hiển thị (không cần bấm), nhấp nháy nhẹ */
.pin-float-tag {
    position: absolute;
    top: -20px; left: 50%;
    transform: translateX(-50%);
    color: #fff; font-size: 9px; font-weight: 700;
    padding: 2px 7px; border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    animation: tag-blink 1.3s ease-in-out infinite;
    z-index: 3;
}
@keyframes tag-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* Nhãn giá hiện trên ghim khi zoom gần (không phải dự án nổi bật, vì nổi
   bật đã có nhãn HOT/VIP riêng, tránh chồng lấn) */
.pin-price-tag {
    position: absolute;
    bottom: -18px; left: 50%;
    transform: translateX(-50%);
    background: #12233d; color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    z-index: 2;
}

/* Bong bóng gộp số dự án khi zoom xa (kiểu Google Maps/Zillow) */
.pin-cluster {
    background: linear-gradient(135deg, #2563eb, #1e3a5f);
    color: #fff; font-weight: 700; font-size: 12.5px;
    padding: 8px 14px; border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap;
}

/* ---- Xe/nhân vật tự động thăm dự án nổi bật ---- */
.tour-vehicle {
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
    animation: tour-bounce 0.6s ease-in-out infinite alternate;
}
@keyframes tour-bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

/* ---- Nút chọn phương tiện, góc trên-phải bản đồ ---- */
.vehicle-selector {
    display: flex; gap: 4px;
    background: #fff;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.vehicle-btn {
    width: 32px; height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.vehicle-btn.active { background: #eff6ff; border-color: #2563eb; }
.vehicle-btn:hover { background: #eff6ff; }

/* ---- Tuyến đường xe chạy trên bản đồ (vẽ tạm rồi tự xóa) ---- */
.route-line-flow {
    stroke-dasharray: 9 7;
    animation: route-dash-flow 0.8s linear infinite;
}
@keyframes route-dash-flow {
    to { stroke-dashoffset: -16; }
}
.route-distance-label {
    background: #1f2937 !important;
    color: #fff !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.route-distance-label::before { display: none !important; }

/* ---- Công cụ so khoảng cách 2 dự án (trong sidebar) ---- */
.distance-tool-toggle {
    width: 100%; text-align: left;
    background: #f8fafc; border: 1px solid #e5e7eb;
    border-radius: 8px; padding: 8px 10px;
    font-size: 13px; font-weight: 600; color: #374151;
    cursor: pointer; margin-bottom: 8px;
}
.distance-tool-toggle:hover { background: #eff6ff; }
.distance-tool {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px; margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.distance-tool label { font-size: 11px; color: #6b7280; font-weight: 600; }
.distance-tool select {
    width: 100%; padding: 7px 8px; font-size: 12.5px;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
}
#distanceResult { font-size: 12.5px; color: #374151; margin-top: 6px; line-height: 1.5; }

/* ---- Tagline dưới topbar ---- */
.tagline-bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 8px;
    font-size: 13px;
    color: #6b7280;
}
@media (max-width: 900px) {
    .tagline-bar { padding: 0 12px 8px; font-size: 12px; }
}

/* ---- Thanh uy tín / social proof ---- */
.trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 20px;
    background: #f0fdf4;
    border-top: 1px solid #f1f5f9;
    font-size: 12.5px;
    color: #15803d;
    font-weight: 600;
}
@media (max-width: 900px) {
    .trust-bar { padding: 8px 12px; font-size: 11.5px; gap: 6px 12px; }
}
/* Ẩn thanh uy tín trên điện thoại - chiếm quá nhiều chỗ phía trên, đẩy nội
   dung dự án xuống thấp. Vẫn giữ hiển thị bình thường trên máy tính (màn
   hình rộng hơn 640px, dư chỗ). */
@media (max-width: 640px) {
    .trust-bar { display: none; }
}

/* ---- Banner liên hệ đặt quảng cáo (admin tự chỉnh nội dung) ---- */
.ad-notice-bar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(90deg, #1e293b, #334155);
    color: #fff;
    padding: 8px 20px;
    font-size: 13px;
    text-align: center;
}
.ad-notice-btn {
    background: #f59e0b; color: #1f2937;
    font-weight: 700; font-size: 12.5px;
    padding: 5px 14px; border-radius: 20px;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .ad-notice-bar { padding: 8px 12px; font-size: 12px; }
}

/* ---- Chú thích (legend) trạng thái - thanh ngang đầu trang, dưới topbar ---- */
.legend-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 8px 20px;
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid #f1f5f9;
    font-size: 13px;
    color: #374151;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-pin {
    width: 14px; height: 14px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
    flex-shrink: 0;
    display: inline-block;
}
@media (max-width: 900px) {
    .legend-bar { gap: 10px 14px; padding: 8px 12px; font-size: 12px; }
}

/* ---- Trang chi tiết dự án ---- */
.detail-wrap { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.detail-hero { width: 100%; height: 360px; object-fit: cover; border-radius: 12px; }
.detail-title { font-size: 26px; font-weight: 700; margin: 16px 0 4px; }
.detail-addr { color: #6b7280; font-size: 14px; margin-bottom: 4px; }
.detail-stats { color: #9ca3af; font-size: 12.5px; margin-bottom: 12px; }
.card-stats { color: #9ca3af; font-size: 11px; margin: 2px 0; }

/* ---- Đánh giá dự án ---- */
.review-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.review-stars-big { font-size: 20px; }
.review-avg { font-size: 22px; font-weight: 800; color: #12233d; }
.review-count { color: #6b7280; font-size: 13px; }
.review-scores { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.review-score-box { background: #f8fafc; border-radius: 10px; padding: 10px 16px; text-align: center; }
.review-score-box .score-num { font-size: 20px; font-weight: 800; color: #2563eb; }
.review-score-box .score-label { font-size: 11px; color: #6b7280; }
.review-list { display: flex; flex-direction: column; gap: 12px; }
.review-item { border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; }
.review-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13.5px; }
.review-date { color: #9ca3af; font-size: 11.5px; margin-left: auto; }
.review-pros { color: #15803d; font-size: 13px; margin: 2px 0; }
.review-cons { color: #b91c1c; font-size: 13px; margin: 2px 0; }

/* ---- Menu tài khoản (đăng nhập Google) ---- */
.user-menu { position: relative; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; }
.user-name { font-size: 13px; font-weight: 600; color: #12233d; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown {
    display: none;
    position: absolute; top: 38px; right: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 160px; z-index: 100; overflow: hidden;
}
.user-menu:hover .user-dropdown { display: block; }
.user-dropdown a { display: block; padding: 10px 14px; font-size: 13px; color: #374151; text-decoration: none; }
.user-dropdown a:hover { background: #f8fafc; }

/* ---- Nút lưu dự án yêu thích ---- */
.btn-favorite {
    background: none; border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 4px 10px; font-size: 14px; cursor: pointer;
}
.btn-favorite.saved { border-color: #fca5a5; background: #fef2f2; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.info-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; }
.info-box .label { font-size: 12px; color: #9ca3af; text-transform: uppercase; }
.info-box .value { font-size: 15px; font-weight: 600; margin-top: 4px; }
.detail-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.detail-section h3 { margin-top: 0; font-size: 16px; }
.detail-section p { line-height: 1.7; color: #374151; white-space: pre-line; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }

.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.related-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s, transform .15s; }
.related-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-2px); }
.related-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.related-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.related-card-body strong { font-size: 13.5px; line-height: 1.3; }
.related-card-body span { font-size: 12px; color: #6b7280; }
.related-card-body .related-price { color: #b45309; font-weight: 700; }

.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-q { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.faq-a { font-size: 13.5px; color: #4b5563; line-height: 1.6; }

/* Nút thu gọn/mở giới thiệu + chú thích + bộ lọc - CHỈ hiện trên điện
   thoại, máy tính đủ chỗ nên luôn hiện đầy đủ, không cần nút này.
   Làm NỔI BẬT để khách dễ nhận ra có thể bấm ẩn/hiện. */
.mobile-filter-toggle { display: none; }
@media (max-width: 640px) {
    .mobile-filter-toggle {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        width: calc(100% - 24px); margin: 10px 12px 4px; padding: 11px;
        border: 2px solid #f59e0b; border-radius: 10px;
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #92400e; font-size: 13.5px; font-weight: 700;
        box-shadow: 0 2px 8px rgba(245,158,11,.25);
        cursor: pointer;
    }
    .mobile-filter-toggle:active { transform: scale(.98); }
    .mobile-list-toggle {
        border-color: #2563eb;
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        color: #1e3a8a;
        margin-top: 6px;
    }
    body.filters-collapsed .collapsible-filters { display: none !important; }
    /* Ẩn hẳn danh sách thẻ dự án - chỉ xem trên bản đồ, bản đồ chiếm gần
       hết chiều cao còn lại của màn hình. */
    body.list-hidden .sidebar { display: none !important; }
    body.list-hidden .map-wrap { height: 78vh !important; }
}

.amenity-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.amenity-tag { background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 20px; }
.back-link { display: inline-block; margin-bottom: 12px; color: #2563eb; font-weight: 600; font-size: 14px; }
.contact-btns a { display: inline-block; padding: 10px 18px; border-radius: 8px; margin-right: 8px; font-weight: 600; font-size: 14px; }
.btn-call { background: #2563eb; color: #fff; }
.btn-zalo { background: #0ea5e9; color: #fff; }
.detail-map { width: 100%; height: 300px; border-radius: 10px; margin-top: 10px; }

/* ---- Admin ---- */
.admin-wrap { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; font-size: 14px; }
.admin-table th { background: #f8fafc; font-size: 12px; text-transform: uppercase; color: #6b7280; }
.btn { display: inline-block; padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-secondary { background: #f1f5f9; color: #1f2937; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-family: inherit; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; }
.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.alert-success { background: #dcfce7; color: #15803d; }
.alert-error { background: #fee2e2; color: #991b1b; }
.pick-map { width: 100%; height: 320px; border-radius: 8px; margin-top: 8px; }
.login-box { max-width: 360px; margin: 80px auto; background: #fff; padding: 30px; border-radius: 10px; border: 1px solid #e5e7eb; }
.thumb-small { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; }

/* ---- Nút CTA nổi góc phải ---- */
.floating-cta {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}
.fab {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    text-decoration: none;
}
.fab-call { background: #16a34a; }
.fab-zalo { background: #0ea5e9; }
.fab-lead { background: #2563eb; }
.fab-chat { background: #7c3aed; }
.fab-install { background: #12233d; }
.fab-reload { background: #6b7280; }

/* ---- Nút mở chat + khung chat, đặt GÓC DƯỚI-TRÁI, tách biệt hoàn toàn
   khỏi cụm nút gọi/Zalo/form/cài app ở góc phải (tránh mọi chồng lấn) ---- */
.chat-fab-left {
    position: fixed;
    bottom: 18px; left: 18px;
    z-index: 1040;
}

.chat-widget {
    display: none;
    position: fixed;
    bottom: 84px; left: 18px;
    /* Dùng min()/calc() thay vì chỉ vh - giới hạn an toàn theo màn hình
       thật, không bao giờ tràn ra ngoài dù màn hình nhỏ đến đâu. */
    width: min(340px, calc(100vw - 36px));
    height: min(460px, calc(100vh - 140px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    z-index: 1050;
    flex-direction: column;
    overflow: hidden;
}
.chat-widget.open { display: flex; animation: lead-fade-in .2s ease; }
.chat-widget-header {
    background: linear-gradient(135deg, #12233d, #1e3a5f);
    color: #fff; padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.chat-widget-title { font-weight: 700; font-size: 14px; }
.chat-widget-close {
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px;
}
.chat-widget-body {
    flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
    background: #f8fafc;
}
.chat-msg { max-width: 85%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.chat-msg-bot { background: #fff; border: 1px solid #e5e7eb; align-self: flex-start; border-bottom-left-radius: 3px; }
.chat-msg-user { background: #2563eb; color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.chat-widget-typing { padding: 0 16px 8px; font-size: 12px; color: #9ca3af; font-style: italic; }
.chat-widget-input { display: flex; border-top: 1px solid #e5e7eb; flex-shrink: 0; }
.chat-widget-input input {
    flex: 1; border: none; padding: 12px 14px; font-size: 13.5px; outline: none; font-family: inherit;
}
.chat-widget-input button {
    width: 46px; border: none; background: #7c3aed; color: #fff; font-size: 16px; cursor: pointer;
}
.chat-remaining { font-size: 11px; color: #9ca3af; text-align: center; padding: 4px 0; }

@media (max-width: 640px) {
    .chat-fab-left { bottom: 14px; left: 14px; }
    .chat-widget { bottom: 74px; left: 14px; }

    /* SỬA LỖI: trên điện thoại, khi bàn phím bật lên, "100vh" không tự co
       lại theo bàn phím (lỗi phổ biến của trình duyệt di động) khiến
       khung chat nhỏ góc màn hình bị đẩy lệch, tin nhắn bị đẩy ra ngoài
       tầm nhìn, chỉ còn thấy khoảng trống. Khắc phục triệt để: trên điện
       thoại, khi mở chat sẽ hiện TOÀN MÀN HÌNH (giống Messenger/Zalo)
       thay vì ô nhỏ - dùng "dvh" (chiều cao khả kiến thực tế) thay vì
       "vh" thường, tự co giãn đúng theo bàn phím. */
    .chat-widget.open {
        position: fixed;
        inset: 0;
        bottom: 0; left: 0;
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        z-index: 2100;
    }
    /* Ẩn icon 🤖 nổi khi đang mở chat toàn màn hình - tránh icon đè lên
       nội dung chat như trong ảnh lỗi trước đó. */
    body.chat-open .chat-fab-left { display: none; }
    .chat-widget.open .chat-widget-header {
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }
}
@media (max-width: 900px) {
    .fab { width: 46px; height: 46px; font-size: 19px; }
    .floating-cta { right: 12px; bottom: 12px; gap: 8px; }
}

/* ---- Modal đăng ký tư vấn (thiết kế theo tông navy + gold của thương hiệu) ---- */
.lead-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,17,32,.6);
    backdrop-filter: blur(2px);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lead-modal-backdrop.open { display: flex; animation: lead-fade-in .25s ease; }
@keyframes lead-fade-in { from { opacity: 0; } to { opacity: 1; } }

.lead-modal {
    background: #fff;
    border-radius: 18px;
    max-width: 400px;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    animation: lead-pop-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lead-pop-in {
    from { transform: scale(.92) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.lead-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 28px; height: 28px;
    background: rgba(255,255,255,.15);
    border: none; border-radius: 50%;
    font-size: 14px; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.lead-modal-close:hover { background: rgba(255,255,255,.3); }

.lead-modal-header {
    background: linear-gradient(135deg, #12233d 0%, #1e3a5f 55%, #2d4a6d 100%);
    padding: 30px 28px 22px;
    text-align: center;
    position: relative;
}
.lead-modal-header::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 24px;
    background: #fff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.lead-modal-icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #f59e0b, #b45309);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 16px rgba(180,83,9,.4);
}
.lead-modal-header h3 { margin: 0 0 6px; font-size: 19px; color: #fff; font-weight: 700; }
.lead-modal-sub { margin: 0; font-size: 13px; color: #cbd5e1; }

#leadForm {
    display: flex; flex-direction: column; gap: 12px;
    padding: 24px 28px 8px;
}
.lead-input-group {
    display: flex; align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 4px 0 14px;
    transition: border-color .2s, box-shadow .2s;
}
.lead-input-group:focus-within {
    border-color: #b45309;
    box-shadow: 0 0 0 3px rgba(180,83,9,.12);
}
.lead-input-icon { font-size: 15px; margin-right: 8px; flex-shrink: 0; }
.lead-input-group input {
    flex: 1;
    border: none; outline: none;
    padding: 12px 8px 12px 0;
    font-size: 14px; font-family: inherit;
    background: transparent;
}

.btn-lead-submit {
    margin-top: 4px;
    padding: 13px 20px;
    border: none; border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #fff; font-weight: 700; font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(180,83,9,.35);
    transition: transform .15s, box-shadow .15s;
}
.btn-lead-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(180,83,9,.45); }
.btn-lead-submit:active { transform: translateY(0); }
.btn-lead-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.lead-form-msg { font-size: 13px; margin: 2px 0 0; text-align: center; }
.lead-form-msg.success { color: #15803d; font-weight: 600; }
.lead-form-msg.error { color: #dc2626; font-weight: 600; }

.lead-modal-trust {
    display: flex; justify-content: center; gap: 14px;
    flex-wrap: wrap;
    padding: 14px 24px 22px;
    font-size: 11.5px; color: #6b7280; font-weight: 600;
}


/* ---- Footer dùng chung ---- */
.site-footer { background: #12233d; color: #cbd5e1; margin-top: 40px; }
.site-footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 36px 20px 20px;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px;
}
.site-footer-col strong { color: #fff; display: block; margin-bottom: 10px; font-size: 14px; }
.site-footer-col p { font-size: 13px; margin: 4px 0; color: #94a3b8; }
.site-footer-col a { display: block; color: #cbd5e1; font-size: 13px; text-decoration: none; margin: 6px 0; }
.site-footer-col a:hover { color: #fff; }
.site-footer-col a[href^="tel:"] { display: inline; color: #f59e0b; }
.site-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 16px 20px; text-align: center;
    font-size: 11.5px; color: #64748b; max-width: 1100px; margin: 0 auto;
}
@media (max-width: 700px) {
    .site-footer-inner { grid-template-columns: 1fr; }
}

/* ---- Chip gợi ý chủ đề blog ---- */
.topic-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.topic-chip {
    background: #f0f4ff; border: 1px solid #dbeafe; color: #2563eb;
    font-size: 12.5px; padding: 6px 12px; border-radius: 20px;
    cursor: pointer; transition: background .15s;
}
.topic-chip:hover { background: #dbeafe; }
.topic-chip-refresh { background: #f8fafc; border-color: #e5e7eb; color: #6b7280; }

/* ---- Máy tính vay ngân hàng ---- */
.loan-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
@media (max-width: 700px) { .loan-calc-grid { grid-template-columns: repeat(2, 1fr); } }
.loan-calc-grid input {
    width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13.5px;
}
.loan-calc-result { background: #f8fafc; border-radius: 10px; padding: 14px 16px; margin-top: 8px; }
.loan-result-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: #374151; border-bottom: 1px solid #e5e7eb; }
.loan-result-row:last-of-type { border-bottom: none; }
.loan-result-highlight { color: #12233d; font-size: 16px; }
.loan-result-highlight strong { color: #2563eb; }
.loan-result-note { font-size: 11.5px; color: #9ca3af; margin-top: 8px; }

/* ---- Nút link dự án gợi ý trong chatbot ---- */
.chat-project-links { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 4px; }
.chat-project-link {
    background: #fff; border: 1px solid #dbeafe; color: #2563eb;
    font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px;
    text-decoration: none; transition: background .15s;
}
.chat-project-link:hover { background: #eff6ff; }

/* ---- Thông báo tự động lọc theo định vị GPS ---- */
.geo-notice {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    font-size: 12.5px; padding: 10px 12px; border-radius: 8px;
    margin-bottom: 12px;
}
.geo-notice a { color: #2563eb; font-weight: 600; text-decoration: underline; }

/* =========================================================================
   TINH CHỈNH GIAO DIỆN CAO CẤP (LUXURY REDESIGN) + TỐI ƯU DI ĐỘNG
   Khối này đặt sau để ưu tiên ghi đè màu sắc/kiểu chữ/khoảng cách theo hệ
   thống Midnight & Gilt phía trên, đồng thời mở rộng vùng chạm và bố cục
   cho màn hình nhỏ. Không đổi cấu trúc HTML/JS — chỉ chỉnh trình bày.
   ========================================================================= */

/* ---- Topbar sang trọng: nền trắng ngà, viền chỉ vàng mảnh phía dưới ---- */
.topbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--gold-300);
    padding-top: env(safe-area-inset-top);
}
.topbar-inner { max-width: 1400px; padding: 14px 20px; }
.brand-logo-link img { height: 40px; }
.brand-logo-link .brand-text, .brand-text, .brand {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--navy-900);
    font-size: 19px;
}
.search-box input {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 14.5px;
    background: var(--cream);
}
.search-box input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,.15); }
.count-badge {
    background: var(--navy-900);
    color: var(--gold-300);
    font-weight: 700;
    letter-spacing: .3px;
}
.topbar-menu-toggle {
    width: 44px; height: 44px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.topbar-extra { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.tagline-bar { color: var(--slate); }
.legend-bar { color: var(--slate); border-top-color: var(--line-soft); }
.trust-bar { background: var(--gold-100); border-top-color: var(--line-soft); color: var(--gold-700); }
.ad-notice-bar { background: linear-gradient(90deg, var(--navy-900), var(--navy-700)); }
.ad-notice-btn { background: var(--gold-500); color: var(--navy-950); }

/* ---- Bộ lọc: bo tròn mềm hơn, chữ dễ đọc hơn trên di động ---- */
.filter-bar select {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    min-height: 42px;
    background: var(--paper);
    color: var(--ink);
}
.filter-bar select:focus { outline: none; border-color: var(--gold-500); }
.sidebar { -webkit-overflow-scrolling: touch; background: var(--cream); }

/* ---- Thẻ dự án: viền hairline mảnh, bóng ấm, tiêu đề dùng font hiển thị ---- */
.project-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}
.project-card:hover { box-shadow: var(--shadow-md); }
.project-card.active { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
.project-card-body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    color: var(--navy-900);
}
.project-card-body .price { color: var(--navy-800); font-weight: 800; }
.project-card-body .slogan { color: var(--gold-700); }
.view-detail, .chat-project-link, .topic-chip { color: var(--navy-800); }
.card-rating-num { color: var(--navy-900); }

/* Nút "Xem chi tiết": phủ navy, viền chỉ vàng, đảo màu vàng khi hover — chữ ký thị giác của bộ nhận diện */
.view-detail-btn {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
    border: 1px solid var(--gold-500);
    color: var(--gold-300);
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: var(--shadow-sm);
}
.view-detail-btn:hover {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    border-color: var(--gold-600);
    color: var(--navy-950);
}
.card-contact-btn { border-radius: var(--radius-sm); min-height: 40px; display: flex; align-items: center; justify-content: center; }
.btn-view-map { background: var(--gold-100); color: var(--gold-700); border-radius: var(--radius-sm); }

/* Nhãn nổi bật giữ nguyên hệ cam/tím/vàng phân cấp gói quảng cáo, chỉ làm mềm bo góc */
.featured-badge, .status-tag { border-radius: 20px; }

/* ---- Nút hành động chung / admin ---- */
.btn-primary {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
    color: var(--gold-300);
    border: 1px solid var(--gold-500);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-950); }
.btn-secondary { background: var(--cream); color: var(--navy-800); border: 1px solid var(--line); }
.btn { border-radius: var(--radius-sm); min-height: 42px; }

/* ---- Trang chi tiết dự án ---- */
.detail-hero { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.detail-title { color: var(--navy-900); font-size: 28px; }
.info-box, .detail-section { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.info-box .value { color: var(--navy-900); }
.review-avg { color: var(--navy-900); font-family: var(--font-display); }
.review-score-box { background: var(--gold-100); }
.review-score-box .score-num { color: var(--gold-700); }
.back-link { color: var(--navy-800); }
.btn-call { background: #16a34a; }
.btn-zalo { background: #0ea5e9; }
.contact-btns a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---- Modal đăng ký tư vấn: tinh chỉnh sắc vàng đồng bộ token mới ---- */
.lead-modal-header { background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%); }
.lead-modal-icon, .btn-lead-submit { background: linear-gradient(135deg, var(--gold-500), var(--gold-700)); }
.lead-input-group:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,.14); }
.lead-input-group input { min-height: 46px; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-950); }
.site-footer-col a[href^="tel:"] { color: var(--gold-400); }
.site-footer-col a { min-height: 40px; display: flex; align-items: center; }

/* ---- Nút nổi (gọi/zalo/tư vấn/chat/cài app) + khung chat ---- */
.fab-lead { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); }
.fab-chat { background: linear-gradient(135deg, var(--gold-500), var(--gold-700)); }
.fab-install { background: var(--navy-950); }
.chat-widget-header { background: linear-gradient(135deg, var(--navy-950), var(--navy-700)); }
.chat-msg-user { background: var(--navy-800); }
.chat-widget-input button { background: var(--gold-600); }
.floating-cta { bottom: calc(18px + env(safe-area-inset-bottom)); }
.chat-fab-left { bottom: calc(18px + env(safe-area-inset-bottom)); }
.chat-widget { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---- Máy tính vay & tiện ích khác: hoà theo tông ấm ---- */
.loan-result-highlight strong { color: var(--gold-700); }
.geo-notice { background: var(--gold-100); border-color: var(--gold-300); color: var(--gold-700); }
.geo-notice a { color: var(--navy-800); }

/* =========================================================================
   TỐI ƯU RIÊNG CHO DI ĐỘNG (≤ 640px và ≤ 900px)
   ========================================================================= */
@media (max-width: 900px) {
    body { font-size: 14.5px; }
    .detail-title { font-size: 22px; }
    .project-card-body h3 { font-size: 15.5px; }
    .card-image-wrap { height: 180px; }
    .fab { width: 50px; height: 50px; }
    .topbar-menu-toggle { width: 46px; height: 46px; }
    .vehicle-btn { width: 38px; height: 38px; }
    .review-scores { gap: 8px; }
    .form-row { grid-template-columns: 1fr; }
    .detail-grid { gap: 10px; }
}

@media (max-width: 640px) {
    .topbar-inner { padding: 12px 14px; }
    .brand-text, .brand { font-size: 17px; }
    .detail-wrap { margin: 16px auto; padding: 0 14px; }
    .detail-hero { height: 220px; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery img { height: 96px; }
    .lead-modal { max-width: 94vw; }
    .lead-modal-header { padding: 24px 20px 18px; }
    #leadForm { padding: 20px 20px 6px; }
    .site-footer-inner { padding: 28px 16px 16px; gap: 20px; }
    .review-summary { flex-wrap: wrap; }
    .card-actions { flex-direction: column; align-items: stretch; }
    .card-actions .btn-view-map { text-align: center; }
    /* Gọn thẻ dự án lại trên điện thoại: ảnh thấp hơn (110px thay vì
       180px), ẩn dòng chủ đầu tư/diện tích - chỉ giữ tên/giá/địa chỉ là
       thông tin cốt lõi - để bản đồ lộ ra sớm hơn, đỡ phải cuộn nhiều. */
    .card-image-wrap { height: 110px; }
    .project-card .developer, .project-card .area { display: none; }
}

/* Tôn trọng lựa chọn giảm hiệu ứng chuyển động của người dùng (trợ năng) */
@media (prefers-reduced-motion: reduce) {
    .project-card.featured, .project-card.featured-pro, .project-card.featured-vip,
    .pin-bounce, .pin-pulse-ring, .pin-float-tag, .tour-vehicle { animation: none !important; }
}

/* ---- Lối vào nhanh các trang khu vực - ngay đầu trang chủ, thấy được
   không cần cuộn. Cuộn ngang mượt trên di động nếu danh sách dài. ---- */
.area-quicklinks {
    display: flex; align-items: center; gap: 8px;
    max-width: 1400px; margin: 0 auto;
    padding: 4px 20px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.area-quicklinks::-webkit-scrollbar { display: none; }
.area-quicklinks-label {
    font-size: 12.5px; font-weight: 700; color: var(--navy-800);
    white-space: nowrap; flex-shrink: 0;
}
.area-chip {
    flex-shrink: 0;
    background: var(--paper); border: 1px solid var(--gold-300);
    color: var(--navy-800); font-size: 12.5px; font-weight: 600;
    padding: 6px 14px; border-radius: 20px; white-space: nowrap;
    transition: background .15s, color .15s;
}
.area-chip:hover, .area-chip:active { background: var(--gold-500); color: var(--navy-950); border-color: var(--gold-500); }
@media (max-width: 900px) {
    .area-quicklinks { padding: 4px 12px 10px; }
}

/* ---- Banner mời đặt quảng cáo trong trang khu vực - mục đích chính của
   các trang /khu-vuc/... là chuyển traffic thành khách đặt quảng cáo. ---- */
.area-ad-pitch {
    display: block;
    background: linear-gradient(135deg, var(--navy-950), var(--navy-700));
    border: 1px solid var(--gold-500);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
    text-decoration: none;
}
.area-ad-pitch-title { color: var(--gold-300); font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.area-ad-pitch-body { color: #cbd5e1; font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.area-ad-pitch-body strong { color: #fff; }
.area-ad-pitch-cta { color: var(--gold-400); font-weight: 700; font-size: 12.5px; }