/* ========================================================================
   STYLES DÀNH RIÊNG CHO TRANG CHI TIẾT SẢN PHẨM
   ======================================================================== */

/* --- 1. HERO SLIDER --- */
@keyframes kenburns-pan {
    from { transform: scale(1.15) translate(-2%, 1%); }
    to { transform: scale(1.3) translate(2%, -1%); }
}
@media (max-width: 767px) {
    .hero-slider-container {
        width: 100vw; /* Chiếm 100% chiều rộng của màn hình */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 30px; /* Giữ khoảng cách với nội dung bên dưới */
    }

    .hero-slider {
        height: 350px; /* Điều chỉnh chiều cao cho phù hợp với mobile */
        border-radius: 0; /* Đảm bảo các góc không bị bo tròn */
    }
}

.hero-slider-container {
    position: relative;
    margin-bottom: 40px;
}
.main-container {
    padding-top: 0; /* Xóa padding-top mặc định */
}
.hero-slider {
    width: 100%;
    height: 450px;
    border-radius: 0px;
    overflow: hidden;
}
.slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: none;
}
.slide.active img {
    animation: kenburns-pan 8s ease-in-out infinite alternate;
}
.slider-track.paused .slide.active img {
    animation-play-state: paused;
}

/* Thanh điều khiển trung tâm */
.slider-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    border-radius: 50px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 20px; /* Khoảng cách giữa dots và nút play/pause */
}
.slider-dots { display: flex; gap: 10px; }
.slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background-color 0.3s;
    border: none;
    padding: 0;
}
.slider-dots .dot.active { background-color: white; }

.play-pause-btn { background: none; border: none; color: white; cursor: pointer; width: 24px; height: 24px; padding: 0; line-height: 0; }
.play-pause-btn svg { width: 100%; height: 100%; }
.play-pause-btn .icon-play { display: none; }
.play-pause-btn.paused .icon-play { display: block; }
.play-pause-btn.paused .icon-pause { display: none; }


/* Nút xem tất cả ảnh */
/* --- CSS MỚI ĐÃ ĐỒNG BỘ --- */
.view-all-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-dark);
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    /* Các thuộc tính được thêm/sửa để đồng bộ */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.view-all-btn:hover {
    background-color: white;
    transform: scale(1.05);
}
.view-all-btn:hover {
    opacity: 0.8;
}

/* --- 2. BỐ CỤC CHÍNH --- */
.product-detail-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.product-content-column { min-width: 0; }
.contact-sidebar {

    width: 100%;
    flex-shrink: 0;
    position: sticky;
    
    /* Vị trí mặc định khi header HIỂN THỊ (80px header + 32px khoảng hở) */
    top: 112px;
    
    align-self: flex-start;
    
    /* THÊM VÀO: Hiệu ứng trượt mượt mà cho sidebar */
    transition: top 0.3s ease-in-out;
}

/* THÊM VÀO: Trạng thái mới khi header BỊ ẨN */
.contact-sidebar.sidebar--header-hidden {
    /* Khi header ẩn, sidebar chỉ cần cách đỉnh 32px */
    top: 32px;
}

@media (min-width: 1024px) {
    .product-detail-layout {
        flex-direction: row;
        align-items: flex-start;
    }
    .contact-sidebar {
        order: 1;
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 112px;
        align-self: flex-start;
    }
    .product-content-column {
        order: 2;
        flex-grow: 1;
    }
}
/* --- CSS TỐI ƯU POPUP LIÊN HỆ CHO DI ĐỘNG --- */

/* Áp dụng các style này cho các màn hình có chiều rộng tối đa là 767px */
@media (max-width: 767px) {
    
    /* 1. Điều chỉnh container chính của modal:
      Loại bỏ padding mặc định để cho phép nội dung bên trong có thể chiếm toàn bộ màn hình.
    */
    #contact-modal.modal-container {
        padding: 0;
        align-items: flex-end; /* Đẩy modal xuống dưới cùng (tùy chọn, có thể bỏ) */
    }

    /* 2. Điều chỉnh cho hộp nội dung modal:
      - Chiếm 100% chiều rộng và chiều cao.
      - Bỏ bo góc.
      - Cho phép cuộn nếu nội dung quá dài.
    */
    #contact-modal .modal-content {
        width: 100%;        /* Chiếm toàn bộ chiều ngang thiết bị */
        height: 100%;       /* Chiếm toàn bộ chiều cao thiết bị */
        max-width: 100%;    /* Ghi đè max-width mặc định trên màn hình lớn */
        border-radius: 0;   /* Bỏ bo góc */
        overflow-y: auto;   /* Cho phép cuộn nếu nội dung dài (quan trọng) */
    }
}
/* --- CỘT TRÁI (STICKY) --- */
.broker-card { border: 1px solid var(--border-color); background-color: white; padding: 30px; border-radius: 12px; text-align: center; }
.broker-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px; }
.broker-name { font-size: 20px; font-weight: 700; margin: 0 0 5px 0; color: var(--secondary-color); }
.broker-role { color: var(--text-light); margin: 0 0 20px 0; }
.broker-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-call, .btn-zalo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    color: white;
    transition: opacity 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.btn-call:hover, .btn-zalo:hover { opacity: 0.9; }
.btn-call { background-color: #ef4444; }
.btn-zalo { background-color: #0068ff; }

/* --- CỘT PHẢI (NỘI DUNG) --- */
.address-line { display: flex; align-items: center; gap: 8px; color: var(--text-light); margin: 15px 0 30px 0; }
.highlight-info-box {
    background-color: #e0f2f1;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.info-item {
    line-height: 1.3;
}
.info-unit-price {
    display: block;
    font-size: 16px;
    color: var(--text-light);
    font-weight: 500;
    margin-top: 5px;
}
.info-label {
    font-size: 14px;
    color: #555;
    display: block;
    margin-bottom: 4px;
}
.info-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
    display: block;
}
.price-item .price-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
}
.other-specs-group {
    display: flex;
    gap: 30px;
    align-items: flex-end;
}

.description-content, .map-container, .amenities-nearby-pro { margin-top: 50px; }
.description-content h2, .detailed-info-table h2, .map-container h2, .amenities-nearby-pro h2 { margin: 0 0 20px 0; font-size: 22px; color: var(--secondary-color); }

/* ========================================================================
   CSS HOÀN CHỈNH CHO BẢNG THÔNG TIN CHI TIẾT (Thay thế mọi style cũ)
   ======================================================================== */

.detailed-info-table {
    margin-top: 50px;
}

.detailed-info-table table {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    border-collapse: separate; /* Cho phép bo góc hoạt động */
    border-spacing: 0;
    overflow: hidden;
    table-layout: auto;
}

.detailed-info-table th,
.detailed-info-table td {
    padding: 12px 15px;
    text-align: left; /* Luôn căn lề trái */
    word-break: break-word; /* Tự động xuống dòng */
}

/* Áp dụng đường kẻ cho cả HÀNG để tạo sự liền mạch */
.detailed-info-table tr {
    border-bottom: 1px solid var(--border-color);
}
.detailed-info-table tbody tr:last-child {
    border-bottom: none; /* Bỏ đường kẻ cho hàng cuối cùng */
}

/* Style cho tiêu đề bảng */
.detailed-info-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--text-dark);
}

/* Cột "Thuộc tính" */
.detailed-info-table tbody td:first-child {
    width: 33.3333%; /* Chiếm 1/3 chiều rộng */
    font-weight: 600;
    color: var(--text-dark);
}

/* Cột "Giá trị" */
.detailed-info-table tbody td:last-child {
    color: var(--text-light);
}

/* Tạo màu nền xen kẽ */
.detailed-info-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}


.project-info-box { display: flex; align-items: center; gap: 20px; background-color: #f8f9fa; padding: 20px; border-radius: 12px; margin-top: 40px; }
.project-info-box img { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.project-info-text h4 { margin: 0 0 5px 0; }
.project-info-text p { margin: 0; color: var(--text-light); }
.project-info-box .btn-secondary { margin-left: auto; white-space: nowrap; padding: 10px 20px; border-radius: 8px; border: 1px solid var(--border-color); background-color: white; font-weight: 600; text-decoration: none; color: var(--text-dark);}

@media (max-width: 767px) {

    .price-item .price-value {
    font-size: 26px;
    }
    .info-unit-price{
        font-size: 14px;
    }
}

.lightbox-control-btn:disabled {
    opacity: 0.3;
    cursor: default;
    transform: scale(1) !important; /* Ngăn hiệu ứng hover khi nút bị vô hiệu hóa */
}




/* --- 3. THANH CTA CHO MOBILE --- */
.mobile-cta-bar { display: none; }
@media (max-width: 1023px) {
    .mobile-cta-bar {
        position: fixed; bottom: 0; left: 0; right: 0; height: 65px;
        background-color: white; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 999; display: flex;
    }
    .mobile-cta-bar a { flex: 1; display: flex; justify-content: center; align-items: center; text-decoration: none; color: white; font-weight: 700; font-size: 16px; }
    .main-container { padding-bottom: 80px; }
}
.mobile-cta-bar .btn-call,
.mobile-cta-bar .btn-zalo {
    border-radius: 0;
}
.mobile-cta-bar .btn-call { background-color: var(--primary-color) }


/* --- CSS CHO THÔNG BÁO GỬI FORM THÀNH CÔNG --- */
.form-success-message {
    display: none; /* Mặc định ẩn */
    text-align: center;
    padding: 40px 20px;
}

.form-success-message h3 {
    font-size: 24px;
    color: var(--primary-color);
    margin: 0 0 10px 0;
}

.form-success-message p {
    font-size: 16px;
    color: var(--text-light);
    margin: 0;
}
/* THÊM VÀO CÁC QUY TẮC CSS MỚI CHO KHỐI THÔNG TIN DỰ ÁN */
.project-card-link {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 12px;
    margin-top: 40px;
}

.project-card-link .project-thumbnail {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px; /* Bo góc mềm mại cho ảnh */
    flex-shrink: 0;
}

.project-card-link .project-content {
    flex-grow: 1;
}

.project-card-link h5 {
    font-size: 1.125rem; /* ~text-lg */
    font-weight: 700;    /* font-bold */
    margin: 0 0 8px 0;
    color: var(--text-dark);
}

.project-card-link p {
    margin: 0 0 12px 0;
    color: var(--text-light);
    font-size: 15px;
}

/* Tên dự án có thể nhấp vào */
.project-card-link p a {
    color: var(--primary-color); /* Màu xanh nổi bật */
    font-weight: 600;
    text-decoration: none;
}

.project-card-link p a:hover {
    text-decoration: underline; /* Gạch chân khi hover */
}

/* Nút kêu gọi hành động (CTA) */
.project-card-link .project-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Khoảng cách ban đầu cho mũi tên */
    color: var(--secondary-color);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.project-card-link .project-cta-link:hover {
    gap: 8px; /* Tăng khoảng cách của mũi tên khi hover để tạo hiệu ứng */
}

.hero-actions {
 position: absolute;
 top: 20px;
 right: 20px;
 z-index: 10;
 display: flex;
 gap: 10px;
}

.hero-actions .action-button {
 background: rgba(255, 255, 255, 0.8);
    color: var(--text-dark);
    border: none;
    width: 36px; /* CỐ ĐỊNH CHIỀU RỘNG */
    height: 36px; /* CỐ ĐỊNH CHIỀU CAO */
    padding: 0; /* BỎ PADDING */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.hero-actions .action-button:hover {
 background-color: rgba(255, 255, 255, 0.95);
}



.hero-actions .action-button svg {
    width: 22px;
    height: 22px;
}

/* --- CSS cho trạng thái của nút Yêu thích --- */

/* Ẩn icon trái tim đặc (trạng thái đã thích) theo mặc định */
.favorite-btn .heart-solid {
    display: none;
}

/* Hiện icon trái tim rỗng (trạng thái chưa thích) theo mặc định */
.favorite-btn .heart-outline {
    display: block;
}

/* Khi nút có thêm class 'active' (do người dùng nhấp vào) */
.favorite-btn.active .heart-solid {
    display: block; /* Hiện icon trái tim đặc */
    color: #ef4444; /* Tô màu đỏ cho trạng thái đã thích */
}

.favorite-btn.active .heart-outline {
    display: none; /* Ẩn icon trái tim rỗng */
}
.loan-calculator {
    margin-top: 50px;
}
.loan-calculator h2 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: var(--secondary-color);
}

.loan-calculator-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
}

.lc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 30px;
}

.lc-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lc-form-group.lc-full-width {
    grid-column: 1 / -1;
}

.lc-form-group label {
    font-weight: 600;
    color: var(--text-dark);
}

.lc-form-group input[type="number"],
.lc-form-group input[type="date"],
.lc-form-group select {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lc-form-group input:focus,
.lc-form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(83, 185, 102, 0.2);
}

/* Thanh trượt (Slider) */
.lc-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
}

#lc-loan-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #e9e9e9;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}
#lc-loan-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#lc-loan-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#lc-loan-percentage {
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    font-size: 15px;
}

/* Nút bấm */
.lc-button-group {
    /* ĐÃ SỬA: Căn giữa nút bấm */
    justify-content: center;
    align-items: center;
}
.lc-button-group .btn-primary {
    width: auto;
    padding: 12px 30px;
    border: none;
}

/* Kết quả */
.lc-results-summary {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.summary-item { text-align: center; }
.summary-item .label { color: var(--text-light); margin-bottom: 5px; }
.summary-item .value { font-size: 24px; font-weight: 700; color: var(--secondary-color); }

/* Bảng kết quả chi tiết */
.table-scroll-wrapper {
    overflow-x: auto;
}
#lc-results-table table {
    width: 100%;
    /* ĐÃ BỎ: min-width: 900px; - Không cần thiết nữa */
    border-collapse: collapse;
    /* ĐÃ THÊM: Chia đều các cột */
    table-layout: fixed; 
}
#lc-results-table th, #lc-results-table td {
    padding: 12px;
    text-align: right;
    border: 1px solid var(--border-color);
}
#lc-results-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    position: sticky; top: 0;
    /* ĐÃ THÊM: Cho phép text trong header xuống dòng */
    white-space: normal;
    text-align: center;
}

/* Responsive */
@media (max-width: 767px) {
    .lc-form-grid {
        grid-template-columns: 1fr;
    }
    .loan-calculator-form {
        padding: 20px;
    }
    .lc-button-group {
        align-items: stretch;
    }
    .lc-button-group .btn-primary {
        width: 100%;
    }
}

/* ======================= CSS CHO KHỐI KẾT QUẢ ƯỚC TÍNH (MỚI) ======================= */
.lc-results-wrapper {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    background-color: #fff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.lc-results-left {
    flex: 1;
}
.lc-results-right {
    flex-basis: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lc-summary-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.lc-summary-header h4 {
    margin: 0;
    font-size: 20px;
    color: var(--secondary-color);
}
.lc-summary-item {
    margin-bottom: 20px;
}
.lc-summary-item .label {
    display: block;
    color: var(--text-light);
    margin-bottom: 5px;
}
.lc-summary-item .value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}
.lc-summary-item .value .light-text {
    font-weight: 400;
    color: var(--text-light);
}

.btn-secondary-custom {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-secondary-custom:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* Biểu đồ tròn */
.lc-payment-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* Gradient sẽ được JS thêm vào đây */
}
.lc-chart-legend {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}
.legend-label {
    flex: 1;
}
.legend-value {
    font-weight: 600;
}

/* Popup/Modal cho bảng chi tiết */
.lc-modal-container {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.lc-modal-content {
    background-color: white;
    padding: 25px;
    border-radius: 12px;
    width: 100%;
    /* ĐÃ SỬA: Tăng max-width */
    max-width: 1100px; 
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
}
.lc-modal-content h3 {
    margin: 0 0 20px 0;
    color: var(--secondary-color);
}
.lc-modal-close-btn {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 28px;
    line-height: 1;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    width: 40px; height: 40px;
}

/* Responsive */
@media (max-width: 767px) {
    .lc-results-wrapper {
        flex-direction: column;
    }
}
#lc-schedule-table-container table {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;     /* Gộp các đường viền lại cho đẹp mắt */
}

#lc-schedule-table-container th,
#lc-schedule-table-container td {
    padding: 12px 10px;           /* Căn chỉnh lại padding cho vừa vặn */
    text-align: right;            /* Căn lề phải cho các số liệu */
    border: 1px solid var(--border-color);
    word-wrap: break-word;        /* Tự động xuống dòng nếu nội dung quá dài */
}

#lc-schedule-table-container th {
    background-color: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    text-align: center;           /* Căn giữa cho tiêu đề cột */
    white-space: normal;          /* Cho phép tiêu đề dài xuống dòng */
}

#lc-schedule-table-container td:first-child, /* Cột "Kỳ trả" */
#lc-schedule-table-container td:nth-child(2) { /* Cột "Ngày TT" */
    text-align: center;
}

/* ========================================================================
   CSS CHO "TIỆN ÍCH LÂN CẬN" - ĐẢM BẢO CÁC THẺ TRÊN CÙNG HÀNG BẰNG NHAU
   ======================================================================== */

/* Xóa tất cả CSS cũ cho .amenities-grid-pro và thay bằng đoạn này */

.amenities-nearby-pro h2 {
    margin: 0 0 20px 0;
    font-size: 22px;
    color: var(--secondary-color);
}

/* Lưới chứa các thẻ tiện ích */
.amenities-grid-pro {
    display: grid;
    /* KHÔNG cần thêm 'align-items' vì giá trị mặc định 'stretch'
       sẽ tự động làm các thẻ trên cùng một hàng cao bằng nhau. */
    gap: 20px;
    grid-template-columns: 1fr; /* Mặc định 1 cột */
}

/* 2 cột cho màn hình > 640px */
@media (min-width: 640px) {
    .amenities-grid-pro {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 cột cho màn hình > 1024px */
@media (min-width: 1024px) {
    .amenities-grid-pro {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Thẻ tiện ích chung */
.amenities-grid-pro .amenity-card-pro {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    
}

/* ---- Các quy tắc cho nội dung bên trong thẻ (giữ nguyên) ---- */
.amenity-header-pro {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.amenity-icon-pro {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.amenity-icon-pro svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}
.amenity-header-pro h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
}
.amenity-details-pro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 0;
    margin-top: auto;
}
.amenity-item-pro {
    display: block;
    font-size: 15px;
}
.amenity-item-pro .name {
    color: var(--text-light);
    padding-right: 10px;
}
.amenity-item-pro .distance {
    font-weight: 400;
    color: var(--text-dark);
    white-space: nowrap;
}


/* ========================================================================
   CSS ĐÃ SỬA CHO POPUP THƯ VIỆN ẢNH
   ======================================================================== */

.image-gallery-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000; /* Đảm bảo z-index cao */
    display: none; /* Mặc định ẩn, JS sẽ đổi thành flex */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.image-gallery-popup.open {
    display: flex;
}

/* ĐÃ SỬA: .popup-content -> .gallery-container */
.image-gallery-popup .gallery-container {
    background-color: #1a1a1a; /* Nền tối cho sang trọng */
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    width: 95%;
    max-width: 1400px;
    height: 90%;
    max-height: 800px;
    overflow: hidden;
}

/* ĐÃ SỬA: .close-btn -> .gallery-close-btn */
.image-gallery-popup .gallery-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    z-index: 1001;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}
.image-gallery-popup .gallery-close-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ĐÃ SỬA: .main-image-container -> .gallery-main-view */
.image-gallery-popup .gallery-main-view {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    z-index: 10;
    position: relative; /* << THÊM DÒNG NÀY */
    
}

.image-gallery-popup #gallery-main-image {
    display: block;
    max-width: 100%;
    max-height: calc(100% - 40px); /* Trừ đi khoảng cách cho caption */
    object-fit: contain;
    border-radius: 4px;
}

/* ĐÃ SỬA: .image-caption -> .gallery-caption */
.image-gallery-popup .gallery-caption {
    color: #ccc;
    font-size: 16px;
    margin-top: 15px;
    text-align: center;
    height: 25px; /* Chiều cao cố định để không nhảy layout */
}

/* ĐÃ SỬA: .prev-btn, .next-btn -> .gallery-nav-btn */
.image-gallery-popup .gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    z-index: 1001;
    opacity: 0; /* Ẩn mặc định, chỉ hiện khi hover */
    transition: opacity 0.3s ease, background-color 0.3s ease;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hiện nút điều hướng khi hover vào khu vực ảnh chính */
.image-gallery-popup .gallery-main-view:hover .gallery-nav-btn {
    opacity: 0.7;
}
.image-gallery-popup .gallery-nav-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
}

.image-gallery-popup .gallery-nav-btn.prev {
    left: 20px;
}

.image-gallery-popup .gallery-nav-btn.next {
    right: 20px;
}

/* ĐÃ SỬA: .thumbnail-list -> .gallery-thumbnail-strip */
.image-gallery-popup .gallery-thumbnail-strip {
    flex: 0 0 200px; /* Chiều rộng cố định cho dải thumbnail */
    background-color: #111;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden; /* Ẩn thanh cuộn ngang */
    height: 100%;
    box-sizing: border-box;
    z-index: 1;
}

.image-gallery-popup .gallery-thumbnail-strip img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    margin-bottom: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 4px;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.6;
}

.image-gallery-popup .gallery-thumbnail-strip img:hover {
    opacity: 1;
}

.image-gallery-popup .gallery-thumbnail-strip img.active {
    border-color: #53b966; /* Màu chính của trang */
    opacity: 1;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 992px) {
    .image-gallery-popup .gallery-container {
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 0;
    }

    .image-gallery-popup .gallery-main-view {
        flex-grow: 1; /* Cho phép nó chiếm phần không gian còn lại */
        height: auto;
        padding: 10px;
        
        /* Thay đổi quan trọng ở đây */
        display: flex;
        flex-direction: column; /* Sắp xếp các phần tử bên trong theo chiều dọc */
        justify-content: center; /* Căn giữa theo chiều dọc */
        min-height: 0; /* Fix cho flexbox trên một số trình duyệt */
    }
    .image-gallery-popup #gallery-main-image {
        max-width: 100%;
        max-height: 100%; /* Sửa lại để ảnh không vượt quá container */
        object-fit: contain;
        flex-shrink: 1; /* Cho phép ảnh co lại */
        min-height: 0;
    }

    #gallery-main-image {
        max-height: 75vh;
    }




    /* Ẩn nút prev/next trên mobile, khuyến khích vuốt */
    .image-gallery-popup .gallery-nav-btn {
        display: none;
    }
     .image-gallery-popup .gallery-caption {
        margin-top: auto; /* Đẩy caption xuống dưới cùng */
        padding-top: 10px; /* Thêm khoảng cách với ảnh */
        flex-shrink: 0; /* KHÔNG cho phép caption co lại */
        width: 100%;
        text-align: center;
    }

    /* Đoạn CSS cho thumbnail strip và các nút giữ nguyên như cũ */
    .image-gallery-popup .gallery-thumbnail-strip {
        flex: 0 0 auto;
        width: 100%;
        height: 120px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        order: -1;
        background-color: #000;
    }

    .image-gallery-popup .gallery-thumbnail-strip img {
        width: 140px;
        height: 90px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .image-gallery-popup .gallery-nav-btn {
        opacity: 0.5;
    }
}
/* --- CSS HỖ TRỢ CHỨC NĂNG ZOOM --- */

/* Thay đổi con trỏ chuột khi có thể kéo ảnh */
#gallery-main-image.can-drag {
    cursor: grab;
}

/* Thay đổi con trỏ chuột khi đang kéo ảnh */
#gallery-main-image.is-dragging {
    cursor: grabbing;
}

/*
  Ngăn các hành động mặc định của trình duyệt trên ảnh (như cuộn trang)
  khi người dùng đang tương tác để zoom hoặc kéo.
  Điều này rất quan trọng để có trải nghiệm mượt mà trên di động.
*/
#gallery-main-image {
    cursor: grab;
    touch-action: none;
    transition: transform 0.2s ease-out; /* Thêm hiệu ứng chuyển động mượt mà */
}

/* ========================================================================
   STYLES DÀNH RIÊNG CHO TRANG CHI TIẾT SẢN PHẨM
   ======================================================================== */

/* ... (Toàn bộ CSS cũ giữ nguyên) ... */


/* ========================================================================
   CSS CHO BIỂU ĐỒ LỊCH SỬ GIÁ TRANG CHI TIẾT (MỚI)
   ======================================================================== */

.price-history-section-detail h2 {
    margin: 0 0 20px 0;
    font-size: 22px;
    color: var(--secondary-color);
}

.price-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.summary-card .card-label {
    display: block;
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 14px;
}

.summary-card .card-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary-color);
}

.summary-card .card-value.positive {
    color: #28a745; /* Màu xanh lá cho biến động tăng */
}
.summary-card .card-value.negative {
    color: #dc3545; /* Màu đỏ cho biến động giảm */
}


.price-chart-container-detail {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.chart-header-detail {
    display: flex;
    justify-content: flex-end; /* Căn lề bộ lọc sang phải */
    align-items: center;
    margin-bottom: 20px;
}

.chart-filters-detail label {
    font-weight: 600;
    margin-right: 10px;
}

.year-filter-buttons {
    display: inline-flex;
    gap: 8px;
}

.year-filter-buttons button {
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    background-color: #f0f0f0;
    color: var(--text-dark);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.year-filter-buttons button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.chart-wrapper-detail {
    position: relative;
    height: 400px;
}

/* ========================================================================
   CSS CHO FORM LIÊN HỆ TRONG SIDEBAR TRÊN MOBILE
   ======================================================================== */

/* Ẩn form trên desktop theo mặc định */
.inline-contact-form {
    display: none;
}

/* Áp dụng cho màn hình nhỏ (mobile) */
@media (max-width: 1023px) {
    /* Ẩn các nút "Gọi" và "Zalo" */
    .broker-actions {
        display: none;
    }

    /* Hiển thị form thay thế */
    .inline-contact-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
        text-align: left;
    }

    .inline-contact-form .form-title {
        font-weight: 600;
        margin-bottom: 0;
        color: var(--text-dark);
        font-size: 16px;
    }

    .inline-contact-form input,
    .inline-contact-form textarea {
        width: 100%;
        padding: 12px 15px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-sizing: border-box;
        font-family: 'Be Vietnam Pro', sans-serif;
    }

    .inline-contact-form button {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: none;
        background-color: var(--primary-color);
        color: white;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
    }
}
/* --- CSS CHO THÔNG BÁO GỬI FORM THÀNH CÔNG --- */
.form-success-message {
    display: none; /* Mặc định ẩn */
    text-align: center;
    padding: 40px 20px;
}

.form-success-message h3 {
    font-size: 24px;
    color: var(--primary-color);
    margin: 0 0 10px 0;
}

.form-success-message p {
    font-size: 16px;
    color: var(--text-light);
    margin: 0;
}
.chart-disclaimer {
    font-size: 14px;
    color: var(--text-light);
    font-style: italic;
    text-align: center;
    max-width: 800px;
    margin: 25px auto 0 auto; /* Căn giữa và tạo khoảng cách với biểu đồ */
    line-height: 1.6;
}
.similar-listings-link-box {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #f0f7ff;
    border: 1px solid #cce4ff;
    padding: 25px;
    border-radius: 12px;
    margin-top: 40px;
    color: #002d66;
}

.similar-listings-link-box .similar-listings-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: #cce4ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0056b3;
}

.similar-listings-link-box .similar-listings-icon svg {
    width: 28px;
    height: 28px;
}

.similar-listings-link-box .similar-listings-content {
    flex-grow: 1;
}

.similar-listings-link-box h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #004085;
}

.similar-listings-link-box p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.similar-listings-link-box .similar-listings-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #0056b3;
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
}

.similar-listings-link-box .similar-listings-cta:hover {
    background-color: #004085;
    transform: scale(1.03);
}
.similar-listings-link-box .similar-listings-cta svg {
    transition: transform 0.2s ease;
}
.similar-listings-link-box .similar-listings-cta:hover svg {
    transform: translateX(3px);
}

/* Responsive cho mobile */
@media (max-width: 767px) {
    .similar-listings-link-box {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .similar-listings-link-box .similar-listings-cta {
        width: 100%;
        margin-top: 15px;
        box-sizing: border-box; /* SỬA LỖI NÚT BỊ TRÀN */
    }
}


/* ========================================================================
   CSS CHO KHỐI SO SÁNH GIÁ LÂN CẬN (MỚI)
   ======================================================================== */
.nearby-comparison-section {
    margin-top: 50px;
}

.nearby-comparison-section h2 {
    margin: 0 0 20px 0;
    font-size: 22px;
    color: var(--secondary-color);
}

.comparison-grid {
    display: grid;
    /* Tạo 2 cột trên màn hình lớn và 1 cột trên mobile */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.comparison-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: #fdfdfd;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.comparison-card .card-content {
    flex-grow: 1;
}

.comparison-card .card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0 0 8px 0;
}

.comparison-card .card-price {
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 500;
    margin: 0 0 4px 0;
}

.comparison-card .card-listings {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
}

.comparison-card .card-icon {
    font-size: 24px;
    color: var(--border-color);
    font-weight: bold;
    margin-left: 15px;
    transition: color 0.3s ease;
}

.comparison-card:hover .card-icon {
    color: var(--primary-color);
}

/* ========================================================================
   CSS CHO BIỂU ĐỒ LỊCH SỬ GIÁ TRANG CHI TIẾT (MỚI)
   ======================================================================== */

.price-history-section-detail {
    margin-top: 50px;
}

.price-history-section-detail h2 {
    margin: 0 0 20px 0;
    font-size: 22px;
    color: var(--secondary-color);
}

.price-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.summary-card .card-label {
    display: block;
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 14px;
}

.summary-card .card-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary-color);
}

.summary-card .card-value.positive {
    color: #28a745; /* Màu xanh lá cho biến động tăng */
}
.summary-card .card-value.negative {
    color: #dc3545; /* Màu đỏ cho biến động giảm */
}


.price-chart-container-detail {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.chart-header-detail {
    display: flex;
    justify-content: flex-end; /* Căn lề bộ lọc sang phải */
    align-items: center;
    margin-bottom: 20px;
}

.chart-filters-detail label {
    font-weight: 600;
    margin-right: 10px;
}

.year-filter-buttons {
    display: inline-flex;
    gap: 8px;
}

.year-filter-buttons button {
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    background-color: #f0f0f0;
    color: var(--text-dark);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.year-filter-buttons button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.chart-wrapper-detail {
    position: relative;
    height: 400px;
}
.chart-disclaimer {
    font-size: 14px;
    color: var(--text-light);
    font-style: italic;
    text-align: center;
    max-width: 800px;
    margin: 25px auto 0 auto; /* Căn giữa và tạo khoảng cách với biểu đồ */
    line-height: 1.6;
}
/* Thêm vào cuối tệp assets/css/product-detail.css */

/* ========================================================================
   CSS CHO MỤC TIN TƯƠNG TỰ (MỚI)
   ======================================================================== */

.similar-listings-section {
    margin-top: 60px;
}

.similar-listings-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0 0 25px 0;
}

.similar-listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* --- Responsive cho Mobile --- */
@media (max-width: 767px) {
    .similar-listings-scroller {
        overflow-x: auto;
        padding-bottom: 15px;
        margin: 0 -15px; /* Cho phép cuộn tràn lề */
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .similar-listings-scroller::-webkit-scrollbar {
        display: none;
    }

    .similar-listings-grid {
        display: flex;
        width: max-content;
        grid-template-columns: unset;
        gap: 15px;
        padding: 0 15px;
    }

    /* Tái sử dụng card từ trang listing và đặt kích thước cho mobile */
    .similar-listings-grid .product-list-card {
        width: 80vw; /* Mỗi card chiếm 80% chiều rộng màn hình */
        max-width: 300px; /* Chiều rộng tối đa */
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}
.share-popup {
    display: none; /* Mặc định ẩn */
    position: absolute;
    top: calc(100% + 10px); /* Vị trí ngay dưới nút cha */
    right: 0;
    width: 280px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    z-index: 20;
    overflow: hidden;
}
.share-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}
.share-popup-header h4 {
    margin: 0;
    font-size: 16px;
}
.close-share-btn {
    background: none; border: none; font-size: 24px; cursor: pointer; color: #aaa;
}

.share-popup-body {
    padding: 15px;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #f8f9fa;
    cursor: pointer;
    margin-bottom: 15px;
}
.share-option:hover {
    background-color: #e9ecef;
}

.social-share-options {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.social-share-options .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f0f2f5;
    color: var(--text-dark);
    transition: all 0.2s ease;
}
.social-share-options .social-icon:hover {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: #fff;
}


/* ========================================================================
   CSS BỔ SUNG CHO CÁC TRƯỜNG NHẬP LIỆU (FORM)
   ======================================================================== */

/* Áp dụng style đồng nhất cho input, textarea, và select trong các form liên hệ */
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 12px 15px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', sans-serif;
    margin-bottom: 15px; /* Thêm khoảng cách giữa các trường */
    -webkit-appearance: none; /* Xóa giao diện mặc định trên Safari/Chrome */
    -moz-appearance: none;    /* Xóa giao diện mặc định trên Firefox */
    appearance: none;
    background-color: #fff; /* Đảm bảo nền trắng */
}

/* Thêm mũi tên tùy chỉnh cho thẻ select */
.contact-form select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Style khi người dùng focus vào trường nhập liệu */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(83, 185, 102, 0.2);
}
/* ========================================================================
   CSS CHO KẾT QUẢ PHONG THỦY
   ======================================================================== */
.feng-shui-result-grid {
    display: flex;
    gap: 20px;
    align-items: center;
}

#feng-shui-info-col {
    flex-grow: 1;
}

#feng-shui-info-col p {
    margin: 8px 0;
    font-size: 15px;
    color: var(--text-light);
}

#feng-shui-info-col p strong {
    color: var(--text-dark);
    width: 120px;
    display: inline-block;
}

#feng-shui-image-col {
    flex-shrink: 0;
    width: 120px;
    text-align: center;
}

#feng-shui-image-col img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

#feng-shui-result-title {
    font-size: 20px;
    line-height: 1.5; /* Cải thiện khả năng đọc */
    color: var(--text-dark); /* Màu chữ mặc định */
}

#feng-shui-result-title strong {
    color: var(--primary-color); /* Chỉ tô màu cho phần văn bản quan trọng */
    font-weight: 700; /* Đảm bảo chữ luôn đậm */
}
/* ========================================================================
   CSS CHO KẾT QUẢ PHÂN TÍCH HƯỚNG
   ======================================================================== */
#feng-shui-huong-results h5 {
    font-size: 16px;
    margin-bottom: 5px;

}

.huong-block {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
}

.huong-block strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}

/* Style cho hướng tốt */
.huong-block.huong-tot {
    background-color: #e9f5e9;
    border-left: 4px solid #4CAF50;
    color: #1b5e20;
}
.huong-block.huong-tot strong {
    color: #2e7d32;
}

/* Style cho hướng xấu */
.huong-block.huong-xau {
    background-color: #ffebee;
    border-left: 4px solid #f44336;
    color: #b71c1c;
}
.huong-block.huong-xau strong {
    color: #c62828;
}
/* ========================================================================
   CSS CHO KẾT QUẢ PHÂN TÍCH HƯỚNG (ĐÃ ĐỒNG BỘ)
   ======================================================================== */


.analysis-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.analysis-item .analysis-icon {
    flex-shrink: 0;
}

.analysis-item .analysis-content {
    flex-grow: 1;
}

.analysis-item .analysis-content h5 {
    margin: 0 0 5px 0;
    padding: 0;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
}

.analysis-item .analysis-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* Style cho kết quả Tốt */
.analysis-item.good {
    background-color: #e9f5e9;
    border-left: 4px solid #4CAF50;
}
.analysis-item.good .analysis-content h5 {
    color: var(--secondary-color);
}
.analysis-item.good .analysis-content p {
    color: #1b5e20;
}

/* Style cho kết quả Xấu */
.analysis-item.bad {
    background-color: #ffebee;
    border-left: 4px solid #f44336;
}
.analysis-item.bad .analysis-content h5 {
    color: #c62828;
}
.analysis-item.bad .analysis-content p {
    color: #b71c1c;
}
/* ========================================================================
   RESPONSIVE CHO MODAL PHONG THỦY (MOBILE)
   ======================================================================== */
@media (max-width: 767px) {
    .feng-shui-result-grid {
        flex-direction: column; /* Chuyển sang bố cục cột */
        align-items: center;    /* Căn giữa các mục */
    }

    #feng-shui-image-col {
        order: -1; /* Di chuyển hình ảnh lên trên cùng */
        margin-bottom: 15px; /* Tạo khoảng cách với khối thông tin bên dưới */
         margin-top: 15px;
    }
}

@media (max-width: 767px) {
    .feng-shui-result-grid {
        flex-direction: column; /* Chuyển sang bố cục cột */
        align-items: center;    /* Căn giữa các mục */
    }

    #feng-shui-image-col {
        order: -1; /* Di chuyển hình ảnh lên trên cùng */
        margin-bottom: 15px; /* Tạo khoảng cách với khối thông tin bên dưới */
    }

    /* === RULE MỚI ĐƯỢC THÊM VÀO ĐỂ LOẠI BỎ ĐƯỜNG KẺ === */
    #feng-shui-result-wrapper .modal-separator {
        display: none;
    }
    /* === KẾT THÚC RULE MỚI === */
}