/* Real Estate Listing Grid */
.rep-grid {
    display: grid;
    gap: 20px; /* Khoảng cách giữa các card */
}

/* Responsive grid columns */
.rep-grid-1 {
    grid-template-columns: repeat(1, 1fr);
}
.rep-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.rep-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
.rep-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
.rep-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}
.rep-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .rep-grid-3, .rep-grid-4, .rep-grid-5, .rep-grid-6 {
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên tablet */
    }
}

/* Mobile breakpoint */
@media (max-width: 767px) { /* Elementor mobile breakpoint is usually 767px */
    .rep-grid-2, .rep-grid-3, .rep-grid-4, .rep-grid-5, .rep-grid-6 {
        grid-template-columns: repeat(1, 1fr); /* 1 cột trên mobile */
    }
}


/* Real Estate Card */
.real-estate-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.real-estate-card:hover {
    transform: translateY(-5px);
}

.real-estate-thumbnail {
    position: relative;
    overflow: hidden;
    height: 200px; /* Chiều cao cố định cho ảnh */
    width: 100%;
}

.real-estate-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.real-estate-card:hover .real-estate-thumbnail img {
    transform: scale(1.05);
}

.hot-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4d4d;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 2;
}

.real-estate-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Đảm bảo nội dung chiếm hết không gian còn lại */
}

.real-estate-title {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.real-estate-title a {
    text-decoration: none;
    color: #333;
}

.real-estate-title a:hover {
    color: #0073aa; /* WordPress default blue */
}

.real-estate-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    line-height: 1.5;
}

.real-estate-meta span {
    display: flex;
    align-items: center;
}

.real-estate-meta i {
    margin-right: 5px;
    color: #0073aa; /* Icon color */
}

.real-estate-price {
    font-size: 1.3em;
    font-weight: bold;
    color: #28a745; /* Green for price */
    margin-top: auto; /* Đẩy giá xuống cuối */
    margin-bottom: 15px;
}

.real-estate-button {
    display: inline-block;
    background-color: #0073aa;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    cursor: pointer;
    font-size: 0.95em;
}

.real-estate-button:hover {
    background-color: #005177;
}

/* Single Product Page Styles */
.real-estate-single-entry .entry-header { /* Thêm class cho entry để tăng độ ưu tiên nếu cần */
    margin-bottom: 25px;
}

.real-estate-single-address,
.real-estate-single-price {
    font-size: 1.1em;
    margin-bottom: 15px;
}

.real-estate-single-address i {
    margin-right: 8px;
    color: #0073aa;
}

.real-estate-single-price {
    font-size: 1.6em; /* Tăng kích thước giá cho nổi bật hơn */
    font-weight: bold;
    color: #28a745;
}

.real-estate-single-thumbnail {
    margin-bottom: 30px; /* Tăng khoảng cách dưới ảnh đại diện */
    text-align: center;
}

.real-estate-single-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Tăng độ sâu bóng */
}

.real-estate-single-details,
.real-estate-single-description,
.real-estate-single-gallery,  /* Thêm selector cho gallery */
.real-estate-single-video {   /* Thêm selector cho video */
    margin-top: 25px; /* Tăng khoảng cách trên */
    margin-bottom: 30px; /* Đồng nhất khoảng cách dưới */
    padding: 20px; /* Tăng padding */
    border: 1px solid #e0e0e0; /* Border nhẹ hơn một chút */
    border-radius: 8px;
    background-color: #fdfdfd; /* Nền sáng hơn chút */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Bóng nhẹ cho khối */
}

.real-estate-single-details h2,
.real-estate-single-description h2,
.real-estate-single-gallery h2, /* Thêm selector cho gallery */
.real-estate-single-video h2 {  /* Thêm selector cho video */
    margin-top: 0;
    font-size: 1.4em; /* Tăng kích thước tiêu đề section */
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px; /* Tăng padding dưới gạch chân */
    margin-bottom: 20px; /* Tăng khoảng cách dưới tiêu đề section */
}

.real-estate-single-details p {
    margin-bottom: 10px; /* Tăng khoảng cách giữa các dòng thông tin */
    font-size: 1em;
    line-height: 1.7; /* Tăng line-height cho dễ đọc */
}

.real-estate-single-description {
    line-height: 1.7; /* Tăng line-height */
}

/* CSS cho Gallery Ảnh trên trang chi tiết */
.gallery-image-wrapper {
    display: flex; /* Sắp xếp ảnh trên một hàng */
    flex-wrap: wrap; /* Cho phép xuống hàng nếu không đủ chỗ */
    gap: 15px; /* Khoảng cách giữa các ảnh */
    margin-top: 10px;
}

.gallery-image-wrapper a {
    display: block; /* Để border và shadow áp dụng đúng */
    border-radius: 6px; /* Bo góc cho link */
    overflow: hidden; /* Đảm bảo img không tràn ra ngoài border-radius của link */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.gallery-image-wrapper a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.gallery-image-wrapper img {
    display: block; /* Loại bỏ khoảng trắng thừa dưới ảnh */
    max-width: 150px; /* Hoặc kích thước bạn muốn */
    height: 100px;   /* Giữ chiều cao cố định hoặc 'auto' */
    object-fit: cover; /* Đảm bảo ảnh lấp đầy không bị méo */
    border: none; /* Bỏ border mặc định nếu có */
    /* border-radius đã được xử lý ở thẻ a */
}

/* CSS cho Video YouTube trên trang chi tiết */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #f0f0f0; /* Màu nền nhẹ trong khi video tải */
    border-radius: 8px; /* Bo góc cho video wrapper */
    margin-top: 10px;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Đảm bảo không có border iframe */
}


/* Pagination styles */
.real-estate-pagination {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.real-estate-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    /* margin: 0 5px; */ /* Removed gap to use flexbox gap */
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

.real-estate-pagination .page-numbers.current,
.real-estate-pagination .page-numbers:hover:not(.current) {
    background-color: #0073aa;
    color: white;
    border-color: #0073aa;
}

.real-estate-pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
    color: #666;
}

/* --- General Full Width Wrapper for Single Real Estate --- */
.rep-single-full-width-wrapper {
    /* Nếu theme của bạn giới hạn chiều rộng, bạn có thể cần
       width: 100vw;
       position: relative;
       left: 50%;
       right: 50%;
       margin-left: -50vw;
       margin-right: -50vw;
       để làm nó full-width, nhưng hãy cẩn thận với overflow.
       Hoặc đơn giản là đảm bảo container cha của nó là full-width.
    */
}

/* --- Section 1: Full Width Gallery Slider --- */
.rep-single-gallery-slider-section {
    width: 100%;
    margin-bottom: 30px; /* Khoảng cách với nội dung bên dưới */
    background-color: #f0f0f0; /* Màu nền cho khu vực slider nếu cần */
}
.rep-single-featured-image-only img { /* Dành cho trường hợp chỉ có ảnh đại diện */
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 600px; /* Giới hạn chiều cao */
    object-fit: cover;
}

/* Swiper Main (Copy từ bước trước, có thể điều chỉnh) */
.rep-swiper-main {
    width: 100%;
    /* aspect-ratio: 16 / 7;  Ví dụ tỷ lệ cho ảnh chính */
    /* max-height: 65vh; */ /* Giới hạn chiều cao tối đa */
    margin-bottom: 10px;
    border-radius: 0; /* Bỏ bo góc nếu muốn full-width sát viền */
}
.rep-swiper-main .swiper-slide img { object-fit: cover; width:100%; height:100%;}
.rep-swiper-main .swiper-button-next,
.rep-swiper-main .swiper-button-prev { /* ... style cũ ... */ }
.rep-swiper-main .swiper-pagination-bullet-active { background-color: #0073aa; }

/* Swiper Thumbs (Copy từ bước trước, có thể điều chỉnh) */
.rep-swiper-thumbs {
    /* max-width: 1200px; */ /* Giới hạn chiều rộng cho thumbnails nếu slider chính là full-width */
    /* margin: 0 auto; */
    padding: 5px 15px; /* Padding cho thumbs */
}
.rep-swiper-thumbs .swiper-slide { opacity: 0.7; border-radius:4px; height:80px; } /* Ví dụ chiều cao cố định cho thumb */
.rep-swiper-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: #0073aa; }


/* --- Section 2: Main Content & Sidebar --- */
.rep-custom-content-area {
    max-width: 1200px; /* Hoặc chiều rộng bạn muốn cho nội dung */
    margin: 0 auto;
    padding: 0 15px; /* Padding hai bên */
}

.rep-columns-wrapper {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống hàng trên màn hình nhỏ */
    gap: 30px; /* Khoảng cách giữa cột chính và sidebar */
}

.rep-main-content-col {
    flex: 1; /* Linh hoạt hơn */
    min-width: 0; /* Quan trọng cho flex item để co giãn đúng */
    /* width: 65%; */ /* Hoặc % cố định */
}

.rep-sidebar-col {
    flex-basis: 320px; /* Chiều rộng cố định cho sidebar */
    flex-shrink: 0; /* Không cho co lại */
    /* width: 30%; */
}

/* Styling for elements within main content */
.rep-main-entry-header .entry-title {
    font-size: 2.2em; /* Kích thước tiêu đề lớn */
    margin-bottom: 10px;
}
.rep-basic-info { margin-bottom: 15px; display:flex; flex-wrap:wrap; gap:10px 20px; color:#555; font-size:0.95em;}
.rep-basic-info .info-item i { margin-right: 5px; color: #0073aa; }
.rep-single-price-main { font-size: 2em; font-weight: bold; color: #c00; margin-bottom: 20px; }

.rep-property-details .detail-item { margin-bottom: 8px; line-height:1.6; }
.rep-property-details .detail-item strong { margin-right: 5px; }

.rep-cta-buttons { margin-top:25px; margin-bottom: 30px; display:flex; gap:15px; }
.rep-cta-buttons .button {
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    font-size:1.1em;
}
.rep-cta-primary { background-color: #007bff; color: white; border:1px solid #007bff;}
.rep-cta-primary:hover { background-color: #0056b3; }
.rep-cta-secondary { background-color: #6c757d; color: white; border:1px solid #6c757d;}
.rep-cta-secondary:hover { background-color: #545b62; }

/* Tab Section */
.rep-tabs-section { margin-top: 30px; }
.rep-tab-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 -1px 0; /* Để gạch dưới của tab active đè lên border của content */
    display: flex;
    border-bottom: 1px solid #ddd;
}
.rep-tab-nav li { margin-right: 5px; }
.rep-tab-nav li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #0073aa;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    position: relative;
    bottom: -1px; /* Đẩy lên để gạch dưới của content không bị thừa */
}
.rep-tab-nav li.active a {
    background-color: #fff;
    border-color: #ddd;
    border-bottom: 1px solid #fff; /* Gạch dưới của tab active trùng màu nền content */
    color: #333;
    font-weight:bold;
}
.rep-tab-content .rep-tab-pane {
    display: none;
    padding: 20px;
    border: 1px solid #ddd;
    border-top:none; /* Vì nav đã có border bottom */
    background-color: #fff;
}
.rep-tab-content .rep-tab-pane.active { display: block; }
.rep-tab-content .video-wrapper { /* Đã có từ trước */ }


/* Styling for Sidebar */
.rep-contact-box {
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}
.rep-contact-box h4 { margin-top:0; font-size:1.5em; margin-bottom:15px; }
.rep-contact-phone { font-size: 1.8em; font-weight: bold; margin-bottom:10px; }
.rep-contact-phone a { text-decoration:none; color:#333; }
.rep-contact-phone i { color: #007bff; margin-right:8px; }
.rep-contact-form-intro { margin-bottom:15px; font-size:0.95em; color:#555;}

/* Basic Form Styling (nếu không dùng plugin) - Cần style kỹ hơn cho Contact Form 7 */
.rep-contact-form p { margin-bottom: 15px; }
.rep-contact-form label { display: block; margin-bottom: 5px; font-weight: bold; font-size:0.9em; }
.rep-contact-form input[type="text"],
.rep-contact-form input[type="tel"],
.rep-contact-form input[type="email"],
.rep-contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.rep-contact-form textarea { min-height:100px; }
.rep-contact-form input[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight:bold;
}
.rep-contact-form input[type="submit"]:hover { background-color: #0056b3; }
.rep-contact-form .required { color:red; }


/* Responsive Adjustments */
@media (max-width: 991px) { /* Tablet và nhỏ hơn */
    .rep-main-content-col {
        width: 100%;
        margin-bottom: 30px; /* Khoảng cách với sidebar khi xuống hàng */
    }
    .rep-sidebar-col {
        flex-basis: 100%; /* Sidebar chiếm full width */
    }
     .rep-swiper-thumbs {
        /* Có thể ẩn thumbs trên mobile nếu không gian hẹp */
        /* display: none; */
    }
}

@media (max-width: 767px) { /* Mobile */
    .rep-main-entry-header .entry-title { font-size: 1.8em; }
    .rep-single-price-main { font-size: 1.6em; }
    .rep-cta-buttons { flex-direction:column; } /* Nút xếp chồng */
    .rep-cta-buttons .button { width:100%; }
    .rep-tab-nav { flex-direction:column; } /* Tab xếp chồng */
    .rep-tab-nav li { margin-right:0; margin-bottom:2px; }
    .rep-tab-nav li a { border-radius:5px 5px 0 0; border-bottom:1px solid #ddd; } /* Chỉnh lại border cho tab mobile */
    .rep-tab-nav li.active a { border-bottom:1px solid #ddd; } /* Bỏ hiệu ứng đè border khi xếp chồng */
    .rep-contact-phone { font-size: 1.5em; }
}