/* --- RESPONSIVE DESIGN (FINAL & ROBUST VERSION) --- */
@media (max-width: 768px) {

    /* --- Cấu trúc Header trên Mobile --- */
    .main-header .container {
        position: relative; /* Đảm bảo z-index hoạt động đúng */
    }

    .cta-button-container {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }


    /* Dùng max-height để có hiệu ứng trượt xổ xuống */
    /* --- Dropdown trên Mobile (Optimized) --- */
    .dropdown .submenu {
        /* display: none;*/
        position: static;
        background-color: #f8f8f8;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        /* Chỉ dùng max-height và overflow để ẩn/hiện */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; /* Thêm transition cho padding */
        /* Xóa các thuộc tính không cần thiết ở trạng thái đóng */
        padding: 0;
        list-style: none;
        margin: 0;
    }

    .dropdown.open .submenu {
        max-height: 500px; /* Chiều cao đủ lớn để chứa các mục con */
        padding: 10px 0; /* Thêm padding khi mở ra */
    }

    .submenu li a {
        padding: 12px 40px; /* Điều chỉnh padding cho đẹp hơn */
        font-size: 0.95rem;
        color: #555;
        display: block; /* Đảm bảo link chiếm hết không gian */
        transition: background-color 0.2s ease;
    }

        .submenu li a:hover {
            background-color: #e9e9e9;
        }

    .dropdown.open > a .icon-down {
        transform: rotate(180deg);
    }

    .icon-down {
        transition: transform 0.3s ease;
    }


    .cta-button-container {
        display: none;
    }


    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero {
        height: 50vh;
    }

    .featured-listings {
        padding-top: 60px;
    }

    .hero-slider-section {
        height: 50vh; /* Giảm từ 70vh xuống 50vh */
        min-height: 350px; /* Đảm bảo chiều cao tối thiểu trên các thiết bị ngắn */
    }

    /* 2. Thu nhỏ và di chuyển các nút điều hướng */
    .slider-nav {
        width: 40px; /* Nhỏ hơn */
        height: 40px;
        font-size: 1.2rem;
    }

        .slider-nav.prev {
            left: 15px; /* Gần lề hơn */
        }

        .slider-nav.next {
            right: 15px; /* Gần lề hơn */
        }

    /* 3. Điều chỉnh vị trí và kích thước dấu chấm */
    .slider-dots {
        bottom: 15px; /* Gần đáy hơn một chút */
        gap: 10px;
    }

    .slider-dot {
        width: 10px; /* Có thể giữ nguyên hoặc giảm nhẹ */
        height: 10px;
    }

    /* Nếu bạn quyết định hiện lại chữ trên mobile, hãy dùng các style này */

    .hero-content p {
        font-size: 1rem; /* Giảm cỡ chữ mô tả */
    }
    /* --- FIX HOVER EFFECT ON MOBILE --- */
    /* Tắt hiệu ứng hover của nút Back to Top */
    .button:hover {
        width: 35px; /* Giữ nguyên chiều rộng hình tròn */
        background-color: rgb(20, 20, 20); /* Giữ nguyên màu nền đen */
    }

        .button:hover .svgIcon {
            transform: translateY(0); /* Giữ nguyên vị trí icon */
        }

        .button:hover::before {
            opacity: 0; /* Luôn ẩn chữ */
        }

    /* Tùy chọn: Tắt các hiệu ứng hover khác nếu cần */
    .card ul li a:hover {
        transform: none;
        box-shadow: none;
    }

    .InputContainer:hover, .SelectContainer:hover, .ButtonContainer:hover {
        transform: none;
    }

    /* === RESPONSIVE CHO PHÂN TRANG (PAGINATION) === */

    .pagination-container {
        margin-top: 30px; /* Giảm khoảng cách trên mobile */
        gap: 12px; /* Tăng khoảng cách giữa các nút */
    }

    .pagination-button {
        width: 25px; /* Tăng kích thước nút */
        height: 25px;
        font-size: 0.8rem; /* Tăng cỡ chữ số */
        font-weight: 700; /* Chữ đậm hơn */
    }

    /* Style riêng cho phân trang ở trang chi tiết trên mobile */
    .related-properties-section .pagination-container {
        position: static; /* Bỏ định vị tuyệt đối */
        transform: none;
        padding: 10px 0;
        margin-top: 30px;
    }

    .related-properties-section {
        padding-bottom: 20px; /* Reset padding-bottom */
    }

    .listings-section .pagination-container {
        position: static; /* Reset vị trí cho tất cả */
        transform: none;
        padding: 20px 0;
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .page-search-basic {
        grid-template-columns: 1fr;
    }

    .custom-submenu.submenu-popped-out {
        white-space: normal;
        word-wrap: break-word;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        /* === CÁC STYLE MỚI ĐỂ GHI ĐÈ LÊN DESKTOP === */
        background: var(--light-color); /* Nền trắng thay vì xám */
        border-radius: 0; /* Bỏ bo tròn 999px của desktop */
        padding: 0; /* Bỏ padding 5px của desktop */
        margin: 0;
        list-style: none;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* Giữ lại shadow */
    }

        .nav-links.active {
            right: 0;
        }

        /* --- Các mục menu (li) trên mobile --- */
        .nav-links li {
            width: 100%; /* Đảm bảo thẻ li chiếm hết chiều rộng */
            padding: 5px;
        }

        /* --- Các thẻ link (a) trên mobile --- */
        .nav-links a {
            display: flex; /* Dùng flex để căn chỉnh icon (nếu có) */
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 16px 25px; /* Padding cho dễ bấm */
            border-bottom: 1px solid #f0f0f0; /* Đường kẻ ngang phân cách */
            /* Ghi đè style của desktop */
            /* Bỏ bo tròn của link desktop */
            color: var(--dark-color);
            font-weight: 500;
            background: #f3f3f5;
            border: 1px solid #e0e0e0;
        }

            /* --- Style cho link đang active trên mobile --- */
            .nav-links a.active {
                /*border-radius: 0px;*/
                background-color: #f0f0f0; /* Nền xám nhẹ thay vì xanh lá */
                color: var(--primary-color); /* Chữ màu xanh lá */
                font-weight: 600; /* Chữ đậm hơn */
            }

        /* Bỏ hiệu ứng hover của desktop */
        .nav-links li a:not(.active):hover {
            background-color: #f8f8f8; /* Hiệu ứng hover nhẹ hơn cho mobile */
        }
}

/* =================================================================== */
/* === RESPONSIVE FOR HEADER WISHLIST DROPDOWN === */
/* =================================================================== */

@media (max-width: 768px) {
    /* 1. Biến dropdown thành panel toàn màn hình */
    .wishlist-dropdown {
        position: fixed; /* Định vị so với cửa sổ trình duyệt */
        top: 65px; /* Vị trí dưới header (bạn có thể cần điều chỉnh số này cho khớp với chiều cao header của bạn) */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; /* Chiếm toàn bộ chiều rộng */
        max-height: none; /* Bỏ giới hạn chiều cao */

        border-radius: 0; /* Bỏ bo góc */
        border: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        /* Hiệu ứng trượt vào từ trên xuống */
        transform: translateY(-100%);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

        /* 2. Trạng thái hiển thị trên di động */
        .wishlist-dropdown.active {
            transform: translateY(0);
        }

        /* 3. Ẩn mũi tên nhỏ đi */
        .wishlist-dropdown::before {
            display: none;
        }

    /* 4. Cho phép phần thân của dropdown cuộn nếu có nhiều sản phẩm */
    .wishlist-body {
        height: calc(100% - 100px); /* Tự động tính toán chiều cao để vừa vặn */
        max-height: none;
    }

    /* 5. Thêm class helper để khóa cuộn trang chính khi dropdown mở */
    body.dropdown-open {
        overflow: hidden;
    }
}