@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap');

:root {
    --primary-color: #1B365D;
    --primary-light: #e6f0f9;
    --secondary-color: #f8f9fa;
    --accent-color: #C2A26D;
    --accent-hover: #A88954;
    --text-main: #333333;
    --text-muted: #6c757d;
    --vh-text-dark: #1A1A1A;
    --vh-text-sub: #4A4A4A;
    --vh-text-micro: #888888;
    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 12px 24px rgba(27, 54, 93, 0.12);
    --card-radius: 12px;
    --input-radius: 8px;
    --border-color: #E2E8F0;
}

/* ==========================================
   CẤU TRÚC BODY & TIỆN ÍCH CƠ BẢN
========================================== */
body {
    background-color: #f8f9fa;
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    font-size: 0.95rem;
    padding-bottom: 80px;
    transition: 0.3s;
    -webkit-font-smoothing: antialiased;
}

.hidden {
    display: none !important;
}

.capitalize {
    text-transform: capitalize;
}

.no-copy {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.no-interaction-img {
    pointer-events: none;
}

/* CHẾ ĐỘ THUÊ/BÁN TRONG ADMIN */
.rent-only {
    display: none;
}

.sale-only {
    display: block;
}

body.rent-mode .rent-only {
    display: block;
}

body.rent-mode .sale-only {
    display: none;
}

body.rent-mode .hidden-on-rent {
    display: none !important;
}

/* ==========================================
   TYPOGRAPHY (TEXT & HEADINGS)
========================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.brand-title {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.4;
    text-align: left;
    word-spacing: normal;
    letter-spacing: normal;
}

h1,
.h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
}

h2,
.h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--vh-text-dark);
}

h3,
.h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
}

h4,
.h4 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-main);
}

h5,
.h5 {
    font-size: 16px;
    font-weight: 500;
    color: var(--vh-text-sub);
}

h6,
.h6 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.h7 {
    font-size: 12px;
    font-weight: 400;
    color: var(--vh-text-micro);
    line-height: 1.2;
}

.h8 {
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

h1.text-center,
h2.text-center,
h3.text-center,
h4.text-center,
h5.text-center,
h6.text-center,
.section-title.text-center {
    text-align: center !important;
}

/* ==========================================
   COMPONENTS (BUTTONS, INPUTS, CARDS)
========================================== */
.btn {
    border-radius: 50px;
    font-weight: 600;
    padding: 8px 24px;
    transition: all 0.2s;
}

.btn-sm {
    padding: 6px 16px;
    font-size: 0.85rem;
}

.btn-action {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-primary,
.page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #122643 !important;
    border-color: #122643 !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.btn-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2A528A 100%);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.text-primary {
    color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-primary-subtle {
    background-color: var(--primary-light) !important;
}

label {
    font-weight: 600;
    font-size: 0.8rem;
    color: #7f8c8d;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.form-control,
.form-select {
    border-radius: var(--input-radius);
    border: 1px solid #dee2e6;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.1);
}

.card-section {
    background: #fff;
    border-radius: var(--card-radius);
    border: none;
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    overflow: hidden;
    transition: transform 0.2s;
}

.card-header-custom {
    background: #fff;
    padding: 20px 24px;
    border-bottom: 1px solid #edf2f7;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body-custom {
    padding: 24px;
}

/* THE CAN HO & TIN TUC */
.result-card,
.news-card,
.hover-box {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    overflow: hidden;
    height: auto !important;
    padding: 0 !important;
    margin-bottom: 5px !important;
}

.result-card img.card-img-top {
    height: 160px !important;
    width: 100%;
    object-fit: cover;
}

.result-card .card-body {
    padding: 12px !important;
}

.result-card .card-body h6,
.result-card .card-body h5 {
    font-size: 0.95rem !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

.result-card .card-body .text-muted {
    margin-bottom: 8px !important;
    font-size: 0.75rem !important;
}

.result-card .card-body .d-flex {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.result-card .card-body h4,
.result-card .card-body h3 {
    font-size: 1.15rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.result-card .card-body .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.result-card .card-body .row>div {
    margin-bottom: 4px !important;
    font-size: 0.75rem !important;
}

.result-card .card-footer {
    padding: 0 12px 12px 12px !important;
}

.result-card .card-footer .btn {
    font-size: 0.85rem !important;
    padding: 8px 5px !important;
    white-space: nowrap !important;
}

.result-card.sold {
    background-color: #fff5f5;
    border-color: #feb2b2;
}

.result-card.sold::after {
    content: "ĐÃ GIAO DỊCH";
    position: absolute;
    right: 20px;
    top: 20px;
    color: #c0392b;
    font-weight: 800;
    border: 2px solid #c0392b;
    padding: 4px 10px;
    border-radius: 6px;
    transform: rotate(15deg);
    opacity: 0.3;
    font-size: 0.7rem;
    z-index: 2;
}

/* FIX HINH ANH LOGO TRONG THE */
.result-card img[src*="logo.png"],
.news-card img[src*="logo.png"] {
    object-fit: contain !important;
    padding: 30px !important;
    background-color: #f8f9fa !important;
    opacity: 0.4 !important;
}

/* ==========================================
   HIỂN THỊ NỘI DUNG BÀI VIẾT (ARTICLE/CMS)
========================================== */
.article-content,
.seo-content-block {
    text-align: left !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100%;
    overflow-x: hidden;
}

.article-content p,
.seo-content-block p {
    text-align: justify !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
    color: #4a4a4a;
    margin-bottom: 1.2rem;
}

.article-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 15px auto;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.article-content p[style*="text-align: center"] img {
    margin: 10px auto !important;
}

.article-content table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95rem;
    white-space: nowrap;
}

.article-content th,
.article-content td {
    border: 1px solid #dee2e6;
    padding: 12px;
}

.article-content thead,
.article-content th {
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-weight: bold;
    text-align: center;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
    line-height: 1.7;
    text-align: left !important;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content pre,
.article-content code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-width: 100%;
    overflow-x: hidden;
}

.article-content h2,
#article-content-body h2 {
    font-size: 1.4rem !important;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    line-height: 1.5;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    text-align: left !important;
}

.article-content h2::before {
    display: none;
}

.article-content h3,
#article-content-body h3 {
    font-size: 1.2rem !important;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    color: #2c3e50;
    text-align: left !important;
}

#article-content-body:not(.album-loaded) img {
    opacity: 0 !important;
    visibility: hidden;
}

#article-content-body.album-loaded img {
    opacity: 1 !important;
    visibility: visible;
    transition: opacity 0.5s ease-in-out;
}

/* ==========================================
   LAYOUTS & MODULES KHÁC
========================================== */
#login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a4a7b 100%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    background: rgba(255, 255, 255, 0.98);
    padding: 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.section-title {
    color: var(--primary-color);
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
    text-align: left !important;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--accent-color);
}

.section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.top-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.top-table tr {
    background: #fff;
    transition: 0.2s;
    cursor: pointer;
}

.top-table tr:hover {
    transform: scale(1.01);
    background: var(--primary-light);
}

.top-table td {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.btn-dl-float {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
}

.modal-backdrop.show {
    opacity: 0.85;
    background-color: var(--primary-color);
}

.cke_notifications_area {
    display: none !important;
    pointer-events: none !important;
}

#editor-container,
#seo-editor-container {
    height: 400px;
    background: #fff;
}

/* NAV PUBLIC TABS & BUTTONS */
.public-nav-link {
    color: var(--text-main);
    font-weight: 600;
    transition: 0.2s;
    border-bottom: 2px solid transparent;
    padding: 15px 10px;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    height: 100%;
}

.public-nav-link:hover,
.public-nav-link.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
}

.vhm-tab-btn {
    background: transparent !important;
    color: #6c757d !important;
    font-weight: bold;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 8px 20px !important;
    box-shadow: none !important;
    font-size: 1.05rem !important;
}

.vhm-tab-btn.active {
    color: var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

/* ==========================================
   HIỆU ỨNG (ANIMATIONS) DÙNG CHUNG
========================================== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-soft {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(40, 167, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

@keyframes pulse-zalo {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0, 104, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 104, 255, 0);
    }
}

@keyframes pulse-mess {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0, 132, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
    }
}

@keyframes tada {
    0% {
        transform: scale(1);
    }

    10%,
    20% {
        transform: scale(0.9) rotate(-8deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(8deg);
    }

    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-8deg);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fadeInSubMenu {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   NÚT LIÊN HỆ & SEARCH FLOAT CƠ BẢN
========================================== */
.floating-contact {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.contact-btn .icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    animation: pulse-ring 2s infinite;
    transition: transform 0.3s;
}

.contact-btn.phone-btn .icon-wrap {
    background-color: #28a745;
}

.contact-btn.zalo-btn .icon-wrap {
    background-color: #0068ff;
    animation-name: pulse-zalo;
}

.contact-btn.mess-btn .icon-wrap {
    background-color: #0084ff;
    animation-name: pulse-mess;
}

.contact-btn.phone-btn .icon-wrap i {
    animation: tada 1.5s infinite;
}

.contact-btn .contact-text {
    position: absolute;
    right: 100%;
    margin-right: -20px;
    background: #fff;
    color: #333;
    font-weight: 700;
    padding: 6px 25px 6px 15px;
    border-radius: 20px 0 0 20px;
    box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.vhm-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    z-index: 2000;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
    height: 48px !important;
}

.action-item {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: var(--primary-color) !important;
    transition: 0.3s;
    padding: 5px 10px;
    border-radius: 10px;
    flex: 1;
    justify-content: center;
}

.action-item i,
.action-item svg {
    font-size: 1.1rem !important;
    margin-right: 8px !important;
    color: var(--primary-color) !important;
}

.action-item .label,
.action-item .value,
.action-item .m-label {
    color: var(--primary-color) !important;
    font-size: 0.75rem !important;
}

.btn-vhm-main {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 8px 16px !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px;
    transition: 0.3s;
    white-space: nowrap;
}

.premium-form-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.modern-input-group {
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    background: #fff;
    transition: all 0.2s;
}

.modern-input-group:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(194, 162, 109, 0.2);
}

.modern-input-group .input-group-text {
    background: transparent;
    border: none;
    color: var(--primary-color);
    padding-right: 5px;
    padding-left: 20px;
}

.modern-input-group .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    padding-left: 10px;
    font-size: 14px;
}

#searchTab .nav-link {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    color: var(--text-muted);
    background-color: transparent;
}

#searchTab .nav-link.active#tab-sale-float {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

#searchTab .nav-link.active#tab-rent-float {
    background-color: #E53E3E !important;
    color: #fff !important;
}

#searchTab .nav-link.active#tab-kygui-float {
    background-color: var(--accent-color) !important;
    color: #fff !important;
}

/* ==========================================
   CSS QUỸ CĂN TRƯỢT NGANG (DÙNG CHUNG GLOBLAL)
========================================== */
.property-horizontal-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 15px;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Ẩn scrollbar trên Firefox */
}

.property-horizontal-scroll::-webkit-scrollbar {
    display: none;
    /* Ẩn scrollbar trên Chrome, Safari */
}

.property-scroll-item {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    .property-scroll-item {
        flex: 0 0 240px !important;
        /* Thu nhỏ thẻ trên Mobile cho vừa mắt */
        max-width: 240px !important;
    }
}

/* ==========================================
   FIX ẢNH TRÀN LỀ & CHÚ THÍCH (CHUẨN VINHOMES MARKET)
========================================== */
/* 1. Phá vỡ "lồng kính" - Gỡ bỏ thuộc tính cắt xén nội dung cũ của web */
.article-content,
.seo-content-block {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* 2. Xóa các viền rác do thư viện sinh ra */
.article-content figure,
.article-content .custom-album-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* Mở khóa để không bị che mất dòng chú thích */
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* 3. GIAO DIỆN MOBILE: ÉP TRÀN LỀ TUYỆT ĐỐI & FIX CHÚ THÍCH */
@media (max-width: 767px) {

    /* Ép khối ảnh rộng bằng màn hình */
    .article-content .custom-album-wrapper,
    .article-content>figure,
    .article-content p>img,
    .article-content>img {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        display: block !important;
    }

    /* Bỏ bo góc của ảnh con bên trong */
    .article-content .custom-album-wrapper .carousel-inner,
    .article-content .custom-album-wrapper img,
    .article-content>figure img {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        display: block !important;
    }

    /* FIX 1: Chú thích (Caption) - BỎ MARGIN ÂM, ĐẨY NHẸ XUỐNG DƯỚI ẢNH 6PX */
    .article-content .custom-mobile-caption,
    .article-content figcaption,
    .article-content figure figcaption {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        margin-top: 6px !important;
        /* Đã nhả phanh: Cách mép dưới ảnh đúng 6px */
        padding: 0px 20px 15px 20px !important;
        display: block !important;
        white-space: normal !important;
        text-align: center !important;
        background: transparent !important;
    }

    /* Bắt thẳng vào thẻ p bên trong chú thích */
    .article-content .custom-mobile-caption p,
    .article-content figcaption p,
    .article-content figure figcaption p {
        margin: 0 !important;
        color: #888888 !important;
        opacity: 0.9 !important;
        /* Nhìn rõ hơn 1 xíu vì đang nằm trên nền trắng */
        font-weight: 500 !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* FIX 2: Ép lại khoảng trống của TẤT CẢ các thẻ Tiêu đề và Thẻ ngăn cách (HR) */
    .article-content h2,
    #article-content-body h2,
    .article-content h3,
    #article-content-body h3,
    .article-content h4,
    #article-content-body h4 {
        margin-top: 1.2rem !important;
        /* Kéo tiêu đề sát lên trên */
        margin-bottom: 0.6rem !important;
    }

    /* Ép các thẻ gạch ngang (HR) vô tình bị gắn class my-5 thu hẹp lại */
    .article-content hr,
    #article-content-body hr {
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
        opacity: 0.3 !important;
        /* Cho mờ đi để không bị thô */
    }

    /* Ép khoảng trống dưới cùng của các đoạn văn và ảnh */
    .article-content figure,
    .article-content .custom-album-wrapper {
        margin-top: 1rem !important;
        margin-bottom: 0.2rem !important;
        /* Ép sát xuống mức tối đa */
    }

    .article-content p {
        margin-bottom: 0.8rem !important;
        /* Tránh các thẻ p rỗng đẩy layout */
    }
}

/* 4. GIAO DIỆN PC (Màn hình lớn): Bo góc sang trọng, Căn giữa chú thích & Giảm khoảng cách */
@media (min-width: 768px) {

    /* Đảm bảo ảnh PC luôn full chiều rộng khung chữ và bo góc */
    .article-content img,
    .article-content .custom-album-wrapper img,
    .article-content>figure img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
        /* Thêm chút bóng mờ cho sang */
    }

    /* Xóa viền/khoảng trống rườm rà của các hộp chứa ảnh trên PC */
    .article-content figure,
    .article-content .custom-album-wrapper {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-top: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0 !important;
    }

    /* Chú thích (Caption) trên PC: Căn giữa, xám mờ, kéo sát ảnh */
    .article-content figcaption,
    .article-content figure figcaption,
    .article-content .custom-mobile-caption {
        margin-top: 8px !important;
        /* Đẩy xuống 1 chút xíu cho hợp với PC */
        padding: 0 20px 15px 20px !important;
        text-align: center !important;
        background: transparent !important;
        display: block !important;
    }

    /* Style chữ chú thích: Màu xám, mờ đi */
    .article-content figcaption p,
    .article-content figure figcaption p,
    .article-content .custom-mobile-caption p,
    .article-content figcaption {
        /* Cả thẻ p và chữ trần */
        margin: 0 !important;
        color: #888888 !important;
        opacity: 0.9 !important;
        /* 0.9 trên nền trắng PC là vừa đẹp */
        font-weight: 500 !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Giảm khoảng trống trước thẻ H2 trên PC */
    .article-content h2,
    #article-content-body h2 {
        margin-top: 2rem !important;
        /* Thoáng hơn mobile 1 tí nhưng vẫn gọn hơn cũ */
        margin-bottom: 1rem !important;
    }
}

/* ==========================================
   ĐỒNG BỘ CHIỀU CAO VÀ CĂN TRÁI CARD (PAGE BUILDER)
========================================== */
/* 1. Ép toàn bộ container cuộn ngang dãn đều chiều cao các cột */
#subpage-dynamic-sections .mobile-horizontal-scroll,
#homepage-sections .mobile-horizontal-scroll {
    display: flex !important;
    align-items: stretch !important;
}

/* 2. Ép các cột (col) bên trong dãn 100% theo cha */
#subpage-dynamic-sections .mobile-horizontal-scroll>div,
#homepage-sections .mobile-horizontal-scroll>div {
    display: flex !important;
    height: auto !important;
}

/* 3. Thẻ Card chiếm 100% chiều cao cột, căn trái tất cả nội dung */
#subpage-dynamic-sections .card,
#homepage-sections .card {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    /* Ép chữ dạt sang trái */
}

/* 4. Khối nội dung (Card body) sẽ phình to ra lấp đầy khoảng trống */
#subpage-dynamic-sections .card-body,
#homepage-sections .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 5. Mấu chốt: Tự động đẩy nút bấm (VD: Khám phá ngay) xuống tịt dưới đáy card */
#subpage-dynamic-sections .card .btn,
#homepage-sections .card .btn {
    margin-top: auto !important;
    /* Lực đẩy ma thuật xuống đáy */
    margin-right: auto !important;
    /* Dồn về lề trái */
    margin-left: 0 !important;
    display: inline-block !important;
    width: fit-content !important;
    /* Khung nút ôm sát chữ */
}

/* ==========================================
   CSS ĐỘC LẬP CHO TRANG CHI TIẾT CĂN HỘ
========================================== */
.prop-hero-section {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: -1px;
}

.hero-slider-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: var(--primary-color);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dùng màu primary của hệ thống để làm mờ */
    background: linear-gradient(90deg, rgba(27, 54, 93, 0.85) 0%, rgba(27, 54, 93, 0.3) 100%);
    z-index: 1;
}

.prop-gallery-wrapper {
    position: relative;
    width: 100%;
    height: 550px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
}

.prop-gallery-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* KHỐI TÍNH KHOẢN VAY */
.loan-calc-box {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.loan-input-section {
    padding: 25px;
    border-bottom: 1px dashed var(--border-color);
}

.loan-result-section {
    padding: 25px;
    background-color: var(--secondary-color);
}

.loan-calc-box label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.loan-calc-box .form-control {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    font-weight: 600;
    font-size: 1rem;
}

.loan-calc-box .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(27, 54, 93, 0.1);
}

.loan-calc-box .input-group-text {
    background-color: #fff;
    border-color: var(--border-color);
    color: var(--text-muted);
    font-weight: 500;
}

.progress-stacked {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    background: #e9ecef;
}

.progress-own {
    background-color: #00b894;
}

.progress-loan {
    background-color: var(--primary-color);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

/* LỊCH ĐẶT XEM NHÀ */
.horizontal-date-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.horizontal-date-scroll::-webkit-scrollbar {
    display: none;
}

.booking-date-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: 0.2s;
    min-width: 85px;
    flex-shrink: 0;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    padding: 12px 5px;
}

.booking-date-card:hover {
    border-color: var(--primary-color);
}

.booking-date-card.active {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.booking-date-card.active .date-day,
.booking-date-card.active .date-weekday {
    color: var(--primary-color) !important;
    font-weight: 800 !important;
}

.suggest-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
    background: #fff;
}

.suggest-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

.suggest-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}