:root {
    --primary-color: #00b713;
    --secondary-color: #f8f9fa;
    --dark-color: #343a40;
    --light-color: #ffffff;
    --text-color: #555;
    --success-color: #28a745;
    --border-radius: 8px;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fdfdfd;
}

.container {
    background: #ffffff;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.container-header {
    background: #ffffff;
    margin: auto;
    padding: 0 20px;
}

.container-footer {
    background: #f3f3f5;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

h1, h2, h3 {
    color: var(--dark-color);
}

.logo-link {
    display: flex; /* Dùng flexbox để căn chỉnh logo và chữ */
    align-items: center; /* Căn giữa theo chiều dọc */
    text-decoration: none; /* Bỏ gạch chân của link */
}

/* Style cho ảnh logo */
.logo-image {
    height: 75px; /* Chỉnh chiều cao của logo cho phù hợp, ví dụ 40px */
    width: 120px; /* Chiều rộng sẽ tự động điều chỉnh theo tỷ lệ */
    margin-right: 5px; /* Tạo khoảng cách giữa logo và chữ "An Lâm" */
}

/* Style cho chữ logo (giữ nguyên từ code cũ của bạn) */
.logo-text {
    font-size: 24px;
    font-weight: bold;
    /*color: #1a1a1a;*/
    color: #00b713;
}

/* --- SECTION PADDING RULES --- */

/* 1. Padding mặc định cho các section trên trang chủ */
.home-page section {
    padding: 10px 0;
}

/* 2. Padding riêng cho các section trên trang tìm kiếm (mua.html) */
.search-page section {
    padding: 30px 0; /* Ví dụ: Tăng padding lên cho trang tìm kiếm thoáng hơn */
}

/* 3. Ghi đè lại padding cho các trường hợp đặc biệt (nếu cần) */
/* Ví dụ: Vẫn giữ cho hero slider và search section không có padding top */
.home-page .hero-slider-section,
.home-page .search-section {
    padding-top: 0;
}

.search-page .page-search-section {
    padding-top: 40px; /* Đảm bảo có khoảng cách với header */
    padding-bottom: 40px;
}

/* --- HEADER & NAVIGATION --- */
/* === NEW HEADER STYLE (EXACT MATCH) === */

/* --- Main Header Container --- */
.main-header {
    background: var(--light-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #eee;
}

    .main-header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .main-header .container-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

/* --- Left Section: Logo & Hamburger --- */
.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hamburger-icon {
    width: 24px;
    height: 18px;
    display: none; /* Ẩn trên PC */
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 2px;
    }


/* --- Center Section: Navigation Links --- */
.nav-links {
    background-color: #f0f0f0;
    border-radius: 999px;
    padding: 5px;
    display: flex;
    list-style: none;
    margin: 0;
}

.nav-close-btn-container,
.nav-overlay {
    display: none;
}

.nav-links li a {
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 999px;
    display: block;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}

    .nav-links li a.active {
        background-color: var(--primary-color);
        color: #ffffff;
    }

    .nav-links li a:not(.active):hover {
        background-color: #e0e0e0;
    }


/* --- Right Section: User Actions --- */
.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-button {
    background-color: #f0f0f0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    transition: background-color 0.3s;
}

    .icon-button:hover {
        background-color: #e0e0e0;
    }

    .icon-button svg {
        width: 20px;
        height: 20px;
        stroke: #333;
        stroke-width: 1.5;
        fill: none;
    }

.profile-container {
    position: relative;
}

.profile-pic {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    border: 2px solid #eee;
}

/* --- Responsive cho Header mới --- */
@media (max-width: 1024px) {
    .nav-links {
        display: none; /* Ẩn menu giữa */
    }

    .hamburger-icon {
        display: flex; /* Hiện hamburger */
    }
}

@media (max-width: 768px) {
    .user-actions {
        display: none; /* Ẩn các icon bên phải trên mobile */
    }

    .main-header .container {
        justify-content: flex-start; /* Căn logo và hamburger về bên trái */
    }
}

/* --- DROPDOWN MENU FOR PILL NAVIGATION --- */

/* 1. Thẻ li.dropdown cần có position relative */
.nav-links .dropdown {
    position: relative;
}

/* 2. Style cho menu con (ẩn mặc định) */
.dropdown .submenu {
    display: block; /* Luôn là block để tính toán */
    position: absolute;
    top: calc(100% + 15px); /* Vị trí dưới thẻ li cha, cộng thêm 15px khoảng cách */
    left: 50%;
    background-color: var(--light-color);
    list-style: none;
    padding: 8px;
    margin: 0;
    min-width: 220px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #f0f0f0;
    z-index: 1001;
    /* Hiệu ứng ẩn/hiện */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* 3. Hiển thị menu con khi di chuột vào mục cha */
.dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 4. Style cho các mục con bên trong */
.submenu li a {
    padding: 10px 15px;
    display: block;
    color: var(--text-color);
    white-space: nowrap;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    font-size: 0.95rem;
}
    /* Ghi đè lại màu chữ khi active (không cần nền xanh) */
    .submenu li a.active {
        background-color: transparent;
        color: var(--primary-color);
        font-weight: 600;
    }

    .submenu li a:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

/* 5. Icon mũi tên */
.icon-down {
    font-size: 0.7em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown:hover > a .icon-down {
    transform: rotate(180deg);
}
/* --- UNIFIED GRADIENT BUTTON STYLE (FINAL VERSION) --- */

/* 1. Style chung cho CONTAINER của các nút */
.ButtonContainer {
    height: 50px;
    /* background: linear-gradient(to bottom, #e3d9ff, #ffe3e3); /* Viền gradient */
    border-radius: 35px;
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);*/
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 3px; /* Dùng padding để tạo độ dày cho viền */
    display: inline-block;
    vertical-align: middle;
}

    .ButtonContainer:hover {
        transform: scale(1.02);
    }

    /* 2. Style chung cho các NÚT BẤM bên trong */
    .ButtonContainer .cta-button,
    .ButtonContainer .advanced-search-toggle {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        border-radius: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        padding: 0 20px;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    /* 3. Style RIÊNG cho nút TÌM KIẾM (nền gradient chuyển động) */
    .ButtonContainer .cta-button {
        color: black;
        /*background-size: 300% 300%;
		  background-image: radial-gradient(
			  at 15% 89%, hsla(120, 70%, 60%, 1) 0px, transparent 50%
			),
			radial-gradient(at 88% 76%, hsla(110, 75%, 55%, 1) 0px, transparent 50%),
			radial-gradient(at 52% 39%, hsla(55, 90%, 65%, 1) 0px, transparent 50%),
			radial-gradient(at 12% 37%, hsla(130, 65%, 50%, 1) 0px, transparent 50%),
			radial-gradient(at 34% 9%, hsla(60, 100%, 70%, 1) 0px, transparent 50%),
			radial-gradient(at 89% 18%, hsla(100, 80%, 65%, 1) 0px, transparent 50%),
			radial-gradient(at 36% 37%, hsla(50, 95%, 60%, 1) 0px, transparent 50%);
		  
		  animation: gradient-animation 4s ease infinite; */
        background-color: #fff;
    }

    /* 4. Style RIÊNG cho nút NÂNG CAO (nền trắng) */
    .ButtonContainer .advanced-search-toggle {
        background-color: #ffffff;
        color: #333;
    }

    .ButtonContainer:hover .advanced-search-toggle {
    }

/* 5. Keyframes cho animation (giữ nguyên) */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* --- HERO SECTION --- */

.hero-slider-section {
    position: relative;
    width: 100%;
    height: 70vh; /* Tăng chiều cao một chút */
    overflow: hidden; /* Ẩn các slide không active */
    background-color: white;
    padding-top: 0;
    /* === SET TỶ LỆ MẶC ĐỊNH CHO PC (16:9) === */
    aspect-ratio: 16 / 9;
}

.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Hiệu ứng chuyển slide */
    opacity: 1;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

    /* Lớp phủ tối màu cho mỗi slide */
    .hero-slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .hero-slide.active {
        opacity: 1;
        visibility: visible;
    }

.hero-content {
    position: relative; /* Để nổi lên trên lớp phủ */
    z-index: 2;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

    .hero-content h1 {
        font-size: 3.5rem;
        margin-bottom: 20px;
        color: white;
        text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    }

    .hero-content p {
        font-size: 1.3rem;
    }

/* Nút điều hướng */
.slider-nav, .slider-dots {
    position: absolute; /* Định vị dựa trên .hero-slider-section */
    z-index: 11; /* Luôn nằm trên cùng */
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
    background-color: rgba(255, 255, 255, 0.2); /* Nền trắng, độ mờ 0.2 */
    color: white; /* Giữ màu icon là trắng */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Thêm viền trắng mờ */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .slider-nav:hover {
        background-color: rgba(255, 255, 255, 0.4); /* Tăng độ mờ khi hover */
    }

    .slider-nav.prev {
        left: 30px;
    }

    .slider-nav.next {
        right: 30px;
    }

/* Dấu chấm chỉ báo */
.slider-dots {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    display: flex;
    gap: 12px;
    opacity: 1;
    visibility: visible;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: gray; /*màu dot*/
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .slider-dot.active {
        background-color: white; /*màu dot*/
    }

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--light-color);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}


/* --- SEARCH tabs --- */
.search-tabs-container {
    background: #f3f3f5;
    padding: 8px; /* Tăng padding cho đẹp hơn */
    border-radius: 35px;
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Điều chỉnh shadow */
    width: 100%;
    max-width: 400px;
    /* XÓA DÒNG NÀY: transform: translateY(50%); */
    margin: auto; /* Giữ lại để căn giữa */
    margin-bottom: 10px;
}

/* --- SEARCH FORM --- */
.search-form-container {
    /*border: 1px solid #e0e0e0;*/
    background: #f3f3f5;
    padding: 8px; /* Tăng padding cho đẹp hơn */
    border-radius: 35px;
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Điều chỉnh shadow */
    width: 100%;
    max-width: 1200px;
    margin: auto; /* Giữ lại để căn giữa */
}

.search-section {
    padding: 5; /* Xóa padding mặc định của section */
    margin-top: 0px; /* << PHÉP THUẬT Ở ĐÂY */
}
/* --- SEARCH FORM TABS (GRADIENT STYLE) --- */
.search-tabs {
    display: flex;
    margin-bottom: 0px;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Thêm shadow cho đẹp hơn */

    background: #fff;
}

.tab-button {
    flex: 1;
    padding: 15px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    /* Style cho nút không được chọn */
    background-color: #fff; /* Nền xám nhạt */
    color: black;
    transition: all 0.4s ease;
}

    .tab-button:hover:not(.active) {
        background-color: #e0e0e0; /* Hiệu ứng hover nhẹ cho nút không active */
    }

    .tab-button.active {
        color: white;
        /* === ÁP DỤNG HIỆU ỨNG GRADIENT CHUYỂN ĐỘNG === */
        /*	background-size: 300% 300%;
			background-image: radial-gradient(
				at 65% 89%, hsla(120, 70%, 60%, 1) 0px, transparent 50%
			  ),
			  radial-gradient(at 88% 76%, hsla(110, 75%, 55%, 1) 0px, transparent 50%),
			  radial-gradient(at 52% 39%, hsla(55, 90%, 65%, 1) 0px, transparent 50%),
			  radial-gradient(at 12% 37%, hsla(130, 65%, 50%, 1) 0px, transparent 50%),
			  radial-gradient(at 34% 9%, hsla(60, 100%, 70%, 1) 0px, transparent 50%),
			  radial-gradient(at 89% 18%, hsla(100, 80%, 65%, 1) 0px, transparent 50%),
			  radial-gradient(at 36% 37%, hsla(50, 95%, 60%, 1) 0px, transparent 50%);
			
			/* Dùng animation để hiệu ứng chạy liên tục */
        /* animation: gradient-animation 4s ease infinite; */
        background-color: #00b713;
    }

/* Định nghĩa animation */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.search-fields {
    display: flex;
    flex-direction: column; /* Xếp các phần tử theo chiều dọc */
    gap: 0;
}

    .search-fields .cta-button {
        width: 100%;
        padding: 12px;
        text-align: center;
    }

.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

/* --- CUSTOM SEARCH INPUT & SELECT BOX STYLE (UNIFIED & FIXED) --- */

/* 1. THỐNG NHẤT STYLE CHUNG CHO CẢ HAI CONTAINER */
.InputContainer, .SelectContainer {
    width: 100%;
    height: 50px;
    /*background: linear-gradient(to bottom, #e3d9ff, #ffe3e3);*/
    background: #f3f3f5;
    border-radius: 30px;
    /*   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);*/
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    /* ÁP DỤNG PADDING ĐỂ TẠO VIỀN CHO CẢ HAI */
    padding: 3px;
}

    /* 2. THỐNG NHẤT HIỆU ỨNG HOVER */
    .InputContainer:hover, .SelectContainer:hover {
        transform: scale(1.02);
    }

    /* 3. THỐNG NHẤT STYLE CHUNG CHO CÁC THẺ BÊN TRONG */
    .input, .SelectContainer select {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        background-color: #fff;
        border-radius: 27px; /* Luôn nhỏ hơn border-radius của cha */
        color: #131313;
        font-size: 14px;
        cursor: pointer;
    }

/* 4. STYLE RIÊNG CHO INPUT */
.input {
    padding-left: 20px;
}

    .input::placeholder {
        color: #888;
        font-weight: 400;
    }

/* 5. STYLE RIÊNG CHO SELECT */
.SelectContainer select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 40px 0 20px; /* Thêm padding phải để chừa chỗ cho mũi tên */
}

/* Mũi tên giả cho Select (giữ nguyên) */
.SelectContainer::after {
    content: '\f078';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    pointer-events: none;
}

/* --- ADVANCED SEARCH STYLING --- */
/* Bố cục cho phần tìm kiếm cơ bản */
.basic-search {
    display: grid;
    /*grid-template-columns: repeat(4, 1fr) auto;*/
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
    gap: 15px;
    align-items: center;
    width: 100%;
}


/* Bố cục cho 2 nút cuối */
.search-actions {
    display: flex;
    gap: 10px;
}

/* Nút "Nâng cao" */
.advanced-search-toggle {
    padding: 12px 15px;
    border: 1px solid #ddd;
    background: var(--light-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap; /* không xuống dòng */
    transition: all 0.3s ease;
}

    .advanced-search-toggle:hover {
        background-color: var(--secondary-color);
        border-color: #ccc;
    }

    .advanced-search-toggle i {
        margin-left: 8px;
    }

/* Khu vực tìm kiếm nâng cao - Ẩn mặc định */
.advanced-search {
    display: none; /* Ẩn hoàn toàn và không chiếm không gian */
    padding-top: 20px; /* Thêm khoảng cách với phần cơ bản */
    border-top: 1px solid #eee; /* Thêm đường kẻ phân cách */
    margin-top: 20px;
    /* Hiệu ứng xuất hiện */
    animation: fadeIn 0.25s ease-in-out;
}

    /* Trạng thái hiện của khu vực nâng cao */
    .advanced-search.active {
        display: block; /* Hiện ra và chiếm không gian, đẩy nội dung khác xuống */
    }

/* Lưới cho các tùy chọn nâng cao */
.advanced-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.form-group {
    display: flex;
    flex-direction: column;
}

    .form-group label {
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
    }

/* --- STYLE CHO KHỐI TIỆN ÍCH --- */

.amenities-group {
    /* Thêm đường kẻ phân cách ở trên */
    border-top: 1px solid #eee;
    /* Tạo khoảng cách giữa đường kẻ và các thành phần khác */
    margin-top: 25px;
    padding-top: 25px;
}

    .amenities-group label { /* Style riêng cho label chính "Tiện ích" */
        margin-bottom: 15px; /* Tăng khoảng cách dưới label một chút */
    }

.amenities-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* Responsive cho danh sách tiện ích */
@media (max-width: 768px) {
    .amenities-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- SVG ANIMATED CHECKBOX STYLE --- */

/* Style cho label cha */
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    gap: 8px; /* Khoảng cách giữa SVG và chữ */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Style từ Uiverse.io đã được tinh chỉnh */
.checkbox-wrapper-31 {
    position: relative;
    display: inline-block;
    width: 24px; /* Giảm kích thước cho phù hợp */
    height: 24px;
}

    .checkbox-wrapper-31 .background {
        fill: #ccc;
        transition: ease all 0.4s;
    }

    .checkbox-wrapper-31 .stroke {
        fill: none;
        stroke: #fff;
        stroke-miterlimit: 10;
        stroke-width: 2px;
        stroke-dashoffset: 100;
        stroke-dasharray: 100;
        transition: ease all 0.4s;
    }

    .checkbox-wrapper-31 .check {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
        stroke-dashoffset: 22;
        stroke-dasharray: 22;
        transition: ease all 0.4s;
    }

    .checkbox-wrapper-31 input[type=checkbox] {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

        /* Hiệu ứng khi check */
        .checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {
            fill: var(--primary-color); /* Dùng màu xanh lá cây chủ đạo */
        }

        .checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {
            stroke-dashoffset: 0;
        }

        .checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {
            stroke-dashoffset: 0;
        }

/* === ẨN THANH SCROLLBAR CHO CUSTOM SELECT === */
.page-search-basic .custom-select-wrapper {
    min-width: 0; /* Cho phép grid item co lại nhỏ hơn nội dung của nó */
}

.custom-options {
    /* --- Dành cho trình duyệt Firefox --- */
    scrollbar-width: none;
    /* --- Dành cho trình duyệt Internet Explorer và Edge cũ --- */
    -ms-overflow-style: none;
}



    /* --- Dành cho các trình duyệt Webkit (Chrome, Safari, Edge mới, Opera) --- */
    .custom-options::-webkit-scrollbar {
        display: none; /* Ẩn hoàn toàn thanh scrollbar */
    }

/* --- CUSTOM SELECT DROPDOWN (NEW & ADVANCED) --- */

/* 1. Container chính */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
    cursor: pointer;
    /* CHUYỂN NỀN XÁM VÀ PADDING VIỀN RA ĐÂY */
    background: #f3f3f5;
    border-radius: 30px;
    /*	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);*/
    padding: 3px;
    /* Bỏ overflow ở đây nếu bạn đang dùng giải pháp JS */
    /* Nếu bạn dùng giải pháp CSS, hãy giữ lại overflow: hidden */
    overflow: hidden;
}


/* 2. Khung hiển thị (giả lập select box) */
.custom-select-trigger {
    width: 100%;
    height: 100%;
    /* BIẾN NÓ THÀNH HỘP TRẮNG */
    background: #fff;
    border-radius: 27px; /* Bo góc nhỏ hơn cha */
    /* Bỏ các thuộc tính cũ */
    /* background: #f3f3f5; */
    /* box-shadow: ...; */
    /* padding: 3px; */
    /* THIẾT LẬP FLEXBOX ĐỂ SẮP XẾP */
    display: flex;
    align-items: center;
    padding: 0 20px; /* Padding trái phải cho hộp trắng */
}

.custom-select-wrapper:hover .custom-select-trigger {
    transform: scale(1.02);
}

/* Phần nền trắng bên trong */
.custom-select-trigger .custom-select-text {
    /* ĐÂY LÀ PHẦN QUAN TRỌNG NHẤT */
    flex: 1; /* Tự động co giãn */
    min-width: 0; /* Cho phép co lại vô hạn */
    /* GIỮ LẠI CÁC THUỘC TÍNH NÀY */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* BỎ ĐI CÁC THUỘC TÍNH KHÔNG CẦN THIẾT NỮA */
    /* width: 100%; */
    /* height: 100%; */
    /* background-color: #fff; */
    /* border-radius: 27px; */
    /* display: flex; */
    /* align-items: center; */
    /* padding: 0 40px 0 20px; */
    font-size: 14px;
    font-weight: 500;
    color: #131313;
}

.basic-search > .custom-select-wrapper {
    min-width: 0; /* Cho phép cột grid co lại */
    /* QUAN TRỌNG: Tạo ra một "bức tường", ngăn nội dung bên trong
								phá vỡ kích thước của cột grid. Đây là chìa khóa giải quyết vấn đề. */
}

/* === STYLE CHO DROPDOWN KHI ĐƯỢC "NHẤC" RA NGOÀI BẰNG JS === */
.custom-options.dropdown-popped-out {
    position: absolute;
    z-index: 1100;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    max-height: 200px;
    overflow-y: auto;
}

.custom-options.dropdown-popped-out {
    /* Giữ lại các hiệu ứng và style gốc */
    /*background-color: #fff;
			border-radius: 20px;
			box-shadow: var(--shadow);
			z-index: 1100; /* Z-index rất cao để nổi lên trên mọi thứ */
    /*max-height: 200px;*/
    /*overflow-y: auto;*/
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: none; /* Bỏ transition khi định vị bằng JS */
}

.basic-search > .custom-select-wrapper,
.basic-search > .InputContainer {
    min-width: 0;
    overflow: hidden;
}

/* 
		Áp dụng tương tự cho ô Input để đảm bảo tính nhất quán.
		*/
.basic-search > .InputContainer {
    min-width: 0;
    overflow: hidden;
}

/* Mũi tên */
.custom-select-trigger .arrow {
    /* BỎ HOÀN TOÀN POSITION ABSOLUTE */
    /* position: absolute; */
    /* right: 20px; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* STYLE MỚI CHO FLEX ITEM */
    color: #555;
    transition: transform 0.3s ease;
    margin-left: 10px; /* Tạo một khoảng cách nhỏ với text */
}

.custom-select-wrapper.open .arrow {
    transform: translateY(-50%) rotate(180deg); /* Xoay mũi tên khi mở */
}

/* 3. Danh sách các lựa chọn (ẩn mặc định) */
.custom-options {
    position: absolute;
    top: 110%; /* Vị trí ngay dưới select box */
    left: 0;
    right: 0;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    /* Hiệu ứng xuất hiện */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.5s ease;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 4. Từng lựa chọn */
.custom-option {
    font-weight: 500;
    font-size: 14px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .custom-option:hover {
        background-color: var(--secondary-color);
    }

    .custom-option.selected {
        background-color: #00b713;
        color: white;
    }

/* --- FEATURED LISTINGS --- */
.section-header {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

    .section-header h2 {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .section-header p {
        font-size: 1.1rem;
        max-width: 600px;
        margin: auto;
    }

.listings-grid {
    display: flex;
    flex-wrap: wrap;
    /* Dùng margin âm để căn chỉnh hoàn hảo */
    margin: 0 -15px;
}

.property-card {
    /* Chiều rộng cho 3 cột, tính cả khoảng trống */
    width: calc(33.333% - 20px);
    margin: 10px; /* Tạo khoảng trống  giữa các card */
    /* Các style khác của .property-card giữ nguyên */
    background: #f3f3f5;
    border-radius: 35px;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 992px) {
    .property-card {
        width: calc(50% - 30px); /* 2 cột */
    }
}

@media (max-width: 768px) {
    .property-card {
        width: calc(100% - 30px); /* 1 cột */
    }
}

.property-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}
/* --- 1. PHẦN ẢNH --- */
.property-image {
    position: relative;
    width: 100%;
    padding: 6px 6px 0;
    box-sizing: border-box;
}

.card-wishlist-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1; /* Luôn hiện rõ */
    transform: translateY(0); /* Không có hiệu ứng trượt lên */
    transition: transform 0.2s ease, background-color 0.2s ease; /* Chỉ giữ lại hiệu ứng cho hover */
}

    .card-wishlist-btn svg {
        width: 15px;
        height: 15px;
        stroke: #333; /* Màu viền mặc định */
        transition: all 0.2s ease;
    }

    /* 5. Hiệu ứng khi di chuột vào chính nút trái tim */
    .card-wishlist-btn:hover svg {
        transform: scale(1.1);
    }

    /* 6. Trạng thái "đã thích" (active) */
    .card-wishlist-btn.active svg {
        stroke: #e53e3e; /* Viền đỏ */
        fill: #e53e3e; /* Tô đầy màu đỏ */
    }

.property-image a, .property-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 25px 25px 8px 8px; /* Bo góc cho ảnh */
    padding: 1px;
}
/* Bỏ style cũ cho status và price */
.property-status, .property-price {
    display: none; /* Ẩn đi vì layout mới không dùng */
}

/* Các tag trên ảnh */
.property-tags {
    position: absolute; /* BẮT BUỘC: Để nằm đè lên ảnh */
    top: 22px; /* Khoảng cách từ mép trên của .property-image */
    left: 22px; /* Khoảng cách từ mép trái của .property-image */
    display: flex;
    gap: 8px;
    z-index: 2; /* Đảm bảo nằm trên ảnh */
}

.tag {
    background-color: rgba(255, 255, 255, 255);
    backdrop-filter: blur(5px);
    color: #333;
    padding: 5px 12px;
    border-radius: 22px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- 2. PHẦN NỘI DUNG --- */
.property-content {
    padding: 0px 5px 5px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


/* --- 4. PHẦN GIÁ VÀ ĐỊA CHỈ (WITH WRAPPER) --- */

/* Wrapper mới để tạo khung */
.property-info-wrapper {
    background-color: #ffffff;
    border: 1px solid #f3f3f5; /* Viền xám rất nhạt */
    border-radius: 8px 8px 35px 35px; /* << ĐIỀU CHỈNH BO GÓC Ở ĐÂY */
    padding: 20px;
    margin-top: 0; /* Đẩy xuống dưới cùng */
}

.property-info-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /*display: block;*/
    /* Không cần margin-top ở đây nữa */
}

.property-price-new {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-color);
}

.property-address {
    text-align: right;
    font-size: 0.8rem;
    color: black;
    line-height: 1.5;
}

    .property-address .street {
        font-weight: 600;
        display: block;
    }
/* --- 3. PHẦN CHI TIẾT (ICONS) - GRID LAYOUT --- */
.property-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 8px 0;
    margin-top: 0px;
    margin-bottom: 0px;
    flex-shrink: 0;
}

    .property-details span {
        background-color: #ffffff;
        border: 1px solid #f3f3f5; /* Viền xám rất nhạt */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-color: #ffffff;
        padding: 10px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
        color: black;
    }

    .property-details i {
        color: #00b713;
        font-size: 1.1rem;
    }

/* --- STATUS TAG COLORS --- */
.property-status {
    /* Các style chung nếu có, ví dụ: */
    color: var(--light-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Màu cho trạng thái Bán */
.status-for-sale {
    background-color: #dc3545; /* Một màu đỏ đẹp */
}

/* Màu cho trạng thái Thuê */
.status-for-rent {
    background-color: #146588; /* Màu xanh dương chính */
}

/* Màu mặc định cho các trạng thái khác (tùy chọn) */
.status-default {
    background-color: #6c757d; /* Màu xám */
}


/* === PAGINATION STYLING (GENERALIZED) === */

/* 1. STYLE CHUNG CHO CONTAINER */

.pagination-container {
    /* --- BẮT BUỘC HIỂN THỊ --- */
    display: flex;
    opacity: 1;
    visibility: visible;
    /* --- CĂN CHỈNH VỊ TRÍ --- */
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 40px;
    padding: 10px 0;
    gap: 8px;
    /* Viền đỏ để gỡ lỗi - BẠN PHẢI THẤY CÁI NÀY */
}
/* 2. STYLE CHUNG CHO CÁC NÚT */
.pagination-button {
    border: 1px solid #ddd;
    background-color: #f3f3f5;
    color: #333333;
    width: 35px;
    height: 35px;
    border-radius: 100px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .pagination-button:hover {
        background-color: #fff;
        border-color: #ccc;
    }

    .pagination-button.active {
        background-color: var(--primary-color);
        color: var(--light-color);
        border-color: var(--primary-color);
        cursor: default;
    }

.property-card.hidden-by-pagination,
.blog-post-card.hidden-by-pagination { /* Thêm cả blog-post-card */
    display: none;
}
/* 3. STYLE RIÊNG CHO PHÂN TRANG Ở TRANG CHI TIẾT */
/* (Giữ nguyên logic này nếu bạn vẫn muốn nó có vị trí đặc biệt) */
.related-properties-section {
    position: relative;
    padding-bottom: 80px;
}

    .related-properties-section .pagination-container {
        position: absolute;
        bottom: 20px;
        left: 0;
    }

/* Ẩn các sản phẩm không thuộc trang hiện tại */
.property-card.hidden-by-pagination {
    display: none;
}


/* === EXPERTISE SECTION (NEW LAYOUT) === */

.expertise-section {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 60px 0;
    background-color: #ffffff;
}

.expertise-layout {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Cột tiêu đề 1 phần, cột nội dung 2 phần */
    gap: 40px;
    align-items: center;
}

.expertise-title h2 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* Sắp xếp các item theo hàng và cột */
    grid-template-areas:
        "item1 item2 item2"
        "item3 item4 item5";
}

.expertise-card {
    background-color: #ffffff;
    border: 1px solid var(--primary-color);
    border-radius: 16px;
    padding: 25px;
    position: relative;
    transition: all 0.3s ease;
}

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

/* Gán các item vào đúng vị trí trong grid-template-areas */
.expertise-grid .expertise-card:nth-child(1) {
    grid-area: item1;
}

.expertise-grid .expertise-card:nth-child(2) {
    grid-area: item2;
}

.expertise-grid .expertise-card:nth-child(3) {
    grid-area: item3;
}

.expertise-grid .expertise-card:nth-child(4) {
    grid-area: item4;
}

.expertise-grid .expertise-card:nth-child(5) {
    grid-area: item5;
}

.expertise-icon {
    position: absolute;
    top: -20px; /* Đẩy icon lên trên */
    left: 25px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.expertise-card:hover .expertise-icon {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: rotate(10deg) scale(1.1);
}

.expertise-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 20px; /* Tạo khoảng trống cho icon */
    margin-bottom: 8px;
}

.expertise-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Style cho thẻ nổi bật */
.expertise-card.featured {
    background-color: #fff;
    color: white;
    border-color: var(--primary-color);
}

    .expertise-card.featured h3,
    .expertise-card.featured p {
        color: black;
    }

    .expertise-card.featured .expertise-icon {
        background-color: white;
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

/* Responsive */
@media (max-width: 992px) {
    .expertise-layout {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột */
        text-align: center;
    }

    .expertise-grid {
        grid-template-columns: 1fr 1fr; /* 2 cột trên tablet */
        grid-template-areas:
            "item1 item2"
            "item3 item4"
            "item5 item5";
    }
}

@media (max-width: 768px) {
    .expertise-grid {
        grid-template-columns: 1fr; /* 1 cột trên mobile */
        grid-template-areas:
            "item1"
            "item2"
            "item3"
            "item4"
            "item5";
    }
}

/* --- FOOTER --- */
.main-footer {
    background: #f3f3f5;
    color: #ccc;
    padding-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding-bottom: 40px;
}

.footer-col h4 {
    color: #00b713;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-col p, .footer-col li {
    margin-bottom: 10px;
    color: black;
}

.footer-col ul {
    list-style: none;
}

.footer-col a {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .footer-col a:hover {
        color: var(--primary-color);
    }

.social-links a {
    font-size: 1.5rem;
    margin-right: 15px;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #444;
    color: black;
}



/* --- FLOATING SOCIAL CONTACT CARD (MINIMALIST STYLE) --- */

/* Container để định vị khối card */
.card-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

/* Khung trắng bo tròn bên ngoài */
.card {
    background-color: green;
    backdrop-filter: blur(10px);
    border-radius: 35px;
    /*border: 2px dotted #000000;*/
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    padding: 8px;
    /* Áp dụng animation */
    animation: pulse-animation 2.5s infinite;
    animation-delay: 0s;
}

    .card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column; /* XẾP DỌC */
        gap: 10px; /* Khoảng cách giữa các icon */
    }

        .card ul li a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
            font-size: 1.2rem;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

            .card ul li a:hover {
                transform: translateY(-3px); /* Giữ lại hiệu ứng nhấc lên */
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
                /* Áp dụng animation */
                animation: shake-animation 0.6s;
            }

        /* Tùy chỉnh màu sắc cho từng icon */
        /* Điện thoại */
        .card ul li:nth-child(1) a {
            color: #25D366;
        }
        /* Zalo */
        .card ul li:nth-child(2) a {
            color: #313133;
        }
        /* Facebook */
        .card ul li:nth-child(3) a {
            color: #1877F2;
        }

        /* Tùy chỉnh cho icon Zalo SVG */
        .card ul li:nth-child(2) a svg {
            fill: currentColor; /* Lấy màu từ thẻ a cha */
        }

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.9);
    }

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

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

@keyframes shake-animation {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(-10deg);
    }

    20% {
        transform: rotate(10deg);
    }

    30% {
        transform: rotate(-10deg);
    }

    40% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media (max-width: 768px) {
    /* 1. Thay đổi vị trí của container để căn giữa theo chiều ngang */
    .card-container {
        bottom: 15px;
        left: 50%; /* Đặt ở giữa */
        transform: translateX(-50%); /* Căn chỉnh chính xác vào giữa */
        right: auto; /* Bỏ vị trí bên phải */
        width: auto; /* Để chiều rộng tự co theo nội dung */
    }

    /* 2. Bỏ nền và bóng đổ của khung ngoài để trông gọn hơn */
    .card {
        background-color: green;
        backdrop-filter: blur(10px);
        border-radius: 35px;
        /*border: 2px dotted #000000;*/
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        padding: 8px;
        /* Áp dụng animation */
        animation: pulse-animation 2.5s infinite;
        animation-delay: 0s;
    }

        /* 3. QUAN TRỌNG: Chuyển layout sang hàng ngang */
        .card ul {
            flex-direction: row; /* Xếp các icon theo hàng ngang */
            gap: 15px; /* Tăng khoảng cách ngang một chút */
        }

            /* 4. Giảm kích thước của các nút icon */
            .card ul li a {
                width: 45px;
                height: 45px;
                font-size: 1.1rem; /* Giảm kích thước icon một chút */
            }

    /* Hiệu ứng hover vẫn hoạt động bình thường */
}
/*=================================================*/















/* Responsive cho form tìm kiếm */
@media (max-width: 992px) {
    .basic-search {
        grid-template-columns: 1fr 1fr;
    }

    .search-actions {
        grid-column: 1 / -1; /* Chiếm hết chiều rộng */
        justify-content: flex-end; /* Đẩy các nút về bên phải */
    }
}

@media (max-width: 576px) {
    .basic-search {
        grid-template-columns: 1fr; /* Mỗi input một hàng */
    }

    .search-actions {
        flex-direction: column-reverse; /* Đảo ngược thứ tự nút */
        gap: 10px;
    }
}

/* Responsive cho trang chi tiết */
@media (max-width: 992px) {
    .detail-layout {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột trên tablet/mobile */
    }

    .agent-contact-card {
        position: static; /* Bỏ dính trên tablet và mobile */
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .property-title-header h1 {
        font-size: 2rem;
    }

    .info-list {
        grid-template-columns: 1fr;
    }

    .detail-layout {
        gap: 30px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .related-properties-section .listings-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        min-height: initial; /* Bỏ min-height trên mobile */
    }
}

@media (max-width: 768px) {
    .related-properties-section {
        padding-bottom: 70px; /* Giảm khoảng trống dưới trên mobile */
    }

    .pagination-container {
        bottom: 15px;
    }
}

.mobile-menu-toggle {
    display: none; /* << QUAN TRỌNG: Ẩn đi ở trạng thái mặc định */
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark-color);
}

/* --- BACK TO TOP BUTTON --- */

.button {
    /* --- ĐỊNH VỊ CỐ ĐỊNH --- */
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 999;
    /* --- Ẩn nút đi mặc định --- */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* --- Style gốc --- */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgb(20, 20, 20);
    border: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); /* Sửa lại transition */
    overflow: hidden;
}

    /* Class để hiện nút */
    .button.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.svgIcon {
    width: 12px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

    .svgIcon path {
        fill: white;
    }

.button:hover {
    width: 140px;
    border-radius: 50px;
    background-color: var(--primary-color);
    align-items: center;
}

    .button:hover .svgIcon {
        width: 15px; /* Tăng kích thước icon một chút khi hover */
        transform: translateY(-200%);
    }

.button::before {
    position: absolute;
    /* bottom: -20px; */ /* Sẽ được điều khiển bởi JS/CSS transform */
    content: "Back to Top";
    color: white;
    font-size: 13px;
    opacity: 0; /* Ẩn chữ đi mặc định */
    transform: translateY(50px); /* Đẩy chữ xuống dưới */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
    opacity: 1;
    transform: translateY(0); /* Đưa chữ về vị trí trung tâm */
}


/* --- DELETE POST BUTTON STYLE --- */
.article-card, .blog-post-card, .video-card-yt {
    position: relative; /* Cần thiết để định vị nút xóa */
}

.delete-post-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background-color: rgba(220, 53, 69, 0.8); /* Màu đỏ mờ */
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .delete-post-btn:hover {
        background-color: #dc3545; /* Màu đỏ đặc */
        transform: scale(1.1);
    }

/* =================================================================== */
/* ===         BROWSE BY AREA SECTION STYLES                     === */
/* =================================================================== */

.browse-by-area-section {
    padding: 60px 0;
    background-color: #fff; /* Nền xám nhạt giống trong ảnh */
    border-top: 1px solid #eee;
}

    /* Tinh chỉnh lại style cho tiêu đề trong section này */
    .browse-by-area-section .section-header {
        text-align: left; /* Căn lề trái giống trong ảnh */
        margin-bottom: 40px;
    }

        .browse-by-area-section .section-header h2 {
            font-size: 2rem;
            font-weight: 600;
            color: #333;
        }

/* Dùng Grid để tạo layout 3 cột */
.area-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 40px; /* 20px khoảng cách dọc, 40px khoảng cách ngang */
}

/* Style cho mỗi cột link */
.area-links-column {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .area-links-column li {
        margin-bottom: 16px; /* Khoảng cách giữa các link */
    }

        .area-links-column li a {
            text-decoration: none;
            color: var(--text-color); /* Dùng biến màu chung của bạn */
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 12px; /* Khoảng cách giữa dấu chấm và chữ */
            transition: color 0.2s ease;
        }

            .area-links-column li a:hover {
                color: var(--primary-color); /* Đổi sang màu chính khi hover */
            }

            /* Tạo dấu chấm đen bằng pseudo-element ::before */
            .area-links-column li a::before {
                content: '';
                display: inline-block;
                width: 8px;
                height: 8px;
                background-color: #333; /* Màu của dấu chấm */
                border-radius: 50%;
                flex-shrink: 0; /* Ngăn dấu chấm bị co lại */
            }

.wishlist-icon-wrapper {
    position: relative;
}

/* Dropdown chính */
.wishlist-dropdown {
    position: absolute;
    top: calc(100% + 15px); /* Vị trí: dưới icon 15px */
    right: 0;
    width: 320px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
    z-index: 1000;
    /* Trạng thái ẩn mặc định */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    /* Tạo mũi tên nhỏ chỉ lên icon */
    .wishlist-dropdown::before {
        content: '';
        position: absolute;
        top: -10px;
        right: 10px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }

    /* Trạng thái hiển thị */
    .wishlist-dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.wishlist-header, .wishlist-footer {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
}

    .wishlist-header h3 {
        margin: 0;
        font-size: 1rem;
    }

.wishlist-footer {
    text-align: center;
    border-bottom: none;
    border-top: 1px solid #f0f0f0;
}

    .wishlist-footer a {
        color: #007bff;
        text-decoration: none;
        font-weight: 500;
    }

.wishlist-body {
    max-height: 400px;
    overflow-y: auto;
}

.wishlist-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Từng sản phẩm trong danh sách */
.wishlist-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
}

    .wishlist-item a {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #333;
        flex-grow: 1; /* Chiếm hết không gian có thể */
        overflow: hidden;
    }

    .wishlist-item img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 4px;
    }

    .wishlist-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Hiển thị dấu "..." nếu tên dài */
    }

/* Tin nhắn khi trống */
.wishlist-empty {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    display: none; /* Mặc định ẩn */
}

/* Trên Tablet: chuyển thành 2 cột */
@media (max-width: 992px) {
    .area-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Trên Mobile: chuyển thành 1 cột */
@media (max-width: 576px) {
    .area-links-grid {
        grid-template-columns: 1fr;
    }

    .browse-by-area-section .section-header {
        text-align: center; /* Căn giữa tiêu đề cho đẹp hơn trên mobile */
    }
}

/* --- 2. CUSTOM SELECT (PHIÊN BẢN FLEXBOX) --- */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
    cursor: pointer;
    background: #f3f3f5;
    border-radius: 30px; /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075)*/
    ;
    padding: 3px;
}

.custom-select-trigger {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 27px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

    .custom-select-trigger .custom-select-text {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #131313;
    }

    .custom-select-trigger .arrow {
        color: #555;
        transition: transform 0.3s ease;
        margin-left: 10px;
    }

.custom-select-wrapper.open .arrow {
    transform: rotate(180deg);
}

/* --- 3. MENU ĐA CẤP --- */
.custom-option[data-parent="true"] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .custom-option[data-parent="true"]::after {
        content: '\f054';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.8em;
        color: #aaa;
        transition: transform 0.3s ease;
    }

    .custom-option[data-parent="true"].submenu-open::after {
        transform: rotate(90deg);
    }

.custom-submenu {
    display: none;
}

    /* --- 4. CÁC CLASS HỖ TRỢ JS --- */
    .custom-submenu.submenu-popped-out {
        display: block;
        position: absolute; /* <<<<<<< THAY ĐỔI QUAN TRỌNG NHẤT Ở ĐÂY */
        z-index: 1100;
        width: auto;
        white-space: nowrap;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border: 1px solid #f0f0f0;
        padding: 8px;
        transition: none;
    }



/* --- 5. RESPONSIVE --- */
@media (max-width: 992px) {
    .page-search-basic {
        grid-template-columns: 1fr 1fr;
    }

    .page-search-actions {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

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

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



/* CSS để hiển thị menu khi có class .mobile-menu-open */
@media (max-width: 992px) {
    .main-header.mobile-menu-open .main-nav,
    .main-header.mobile-menu-open .user-actions {
        display: flex; /* Hoặc block, tùy theo cách bạn muốn hiển thị */
        /* Thêm các style khác để định dạng menu mobile ở đây */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
    }
}

@media (max-width: 992px) {
    /* Ghi đè quy tắc ẩn user-actions */
    .user-actions {
        display: flex !important; /* Dùng !important để đảm bảo nó được ưu tiên */
    }

    /* Bạn cũng có thể cần phải ẩn menu chữ đi để có đủ chỗ */
    .main-nav {
        display: none;
    }

    /* Có thể cần giảm kích thước các icon một chút */
    .user-actions .icon-button svg {
        width: 22px;
        height: 22px;
    }
}

/*alert*/
/* Alert Notifications */
.alert {
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .alert.alert-success {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
        border-left: 4px solid #28a745;
    }

        .alert.alert-success .bi-check-circle-fill {
            color: #28a745;
        }

    .alert.alert-error {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
        border-left: 4px solid #dc3545;
    }

        .alert.alert-error .bi-exclamation-triangle-fill {
            color: #dc3545;
        }

    .alert .bi {
        font-size: 18px;
        vertical-align: middle;
    }

    .alert .btn-close {
        background: none;
        border: none;
        font-size: 16px;
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

        .alert .btn-close:hover {
            opacity: 1;
        }

    .alert.fade {
        opacity: 0;
        transform: translateX(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .alert.fade.show {
            opacity: 1;
            transform: translateX(0);
        }

/* Responsive adjustments for mobile */
@media (max-width: 576px) {
    .alert {
        right: 10px !important;
        left: 10px !important;
        margin: 0 auto !important;
        min-width: 280px;
        max-width: calc(100vw - 20px);
    }
}

/* Animation for stacking */
.alert.position-fixed {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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