/* ==========================================================================
   HỆ THỐNG KHUNG CHUẨN DESKTOP 1140PX (ĐỒNG BỘ 100% VỚI TRANG CHỦ)
   Tối ưu hóa không gian hiển thị cho màn hình Macbook & Desktop chuẩn 2026
   Đảm bảo lề 2 bên thoáng đãng, hài hòa trên Macbook (1280px-1440px)
   và giữ nguyên hành lang an toàn 2 bên lườn để chèn Banner quảng cáo.
   Áp dụng đồng bộ cho:
   - Mua Bán / Cho Thuê & Tìm kiếm BĐS (Category & Search Listing)
   - Chi tiết Bất Động Sản (Property Detail)
   - Dự Án (Project Listing & Detail)
   - Tin Tức / Bài Viết (Blog / News Listing & Detail)
   - Trang Tĩnh (Giới thiệu, Điều khoản, MeeyMap...) & Bảng Giá Dịch Vụ
   - Danh Bạ Môi Giới & Trang Cá Nhân Thành Viên
   - Toàn bộ các khối nội dung trên Trang Chủ
   ========================================================================== */

/* 1. KHUNG CONTAINER CHÍNH CHUẨN 1140PX */
.re__main-content-layout,
.re__body .re__main .re__main-content-layout,
.re__project-main-container,
.re__nlcc-main-layout {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* Clearfix đảm bảo layout không bị tràn hay sập float */
.re__main-content-layout::after,
.re__body .re__main .re__main-content-layout::after,
.re__project-main-container::after,
.re__nlcc-main-layout::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* 2. CỘT NỘI DUNG CHÍNH (BÊN TRÁI: 805PX) */
.re__main-content-layout .re__main-content,
.re__body .re__main .re__main-content-layout .re__main-content,
.re__project-main-left,
.re__nlcc-main-left,
.body-left {
    float: left !important;
    width: calc(100% - 335px) !important;
    max-width: 805px !important;
    margin-right: 20px !important;
    box-sizing: border-box !important;
}

/* 3. CỘT SIDEBAR (BÊN PHẢI: 315PX) */
.re__main-content-layout .re__main-sidebar,
.re__body .re__main .re__main-content-layout .re__main-sidebar,
.re__project-main-right,
.re__nlcc-main-right,
.body-right {
    float: right !important;
    width: 315px !important;
    box-sizing: border-box !important;
}

/* 4. ĐỒNG BỘ THANH TÌM KIẾM 2 TẦNG ĐẦU TRANG */
#boxSearchForm .search-bar-2tier {
    max-width: 1140px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#boxSearchForm .search-bar-2tier.fix .search-inner-wrap {
    max-width: 1140px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 5. TỐI ƯU CỘT SIDEBAR (GIAO DIỆN HIỆN ĐẠI, THÔNG THOÁNG) */
.re__sidebar-box {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.re__sidebar-box .re__sidebar-box-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    line-height: 1.4 !important;
}

.re__sidebar-box .re__sidebar-box-content {
    width: 100% !important;
    box-sizing: border-box !important;
}

.re__sidebar-box .re__sidebar-box-item {
    font-size: 14px !important;
    line-height: 22px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border: none !important;
}

.re__sidebar-box .re__sidebar-box-item a {
    color: #475569 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.re__sidebar-box .re__sidebar-box-item a:hover {
    color: #e03c31 !important;
}

/* Ẩn triệt để các item vượt quá số lượng hiển thị ban đầu, loại bỏ hoàn toàn khoảng trắng */
.re__hide-item,
.re__sidebar-box .re__sidebar-box-item.re__hide-item,
h5.re__sidebar-box-item.re__hide-item,
div.re__sidebar-box-item.re__hide-item,
a.re__link-pr.re__hide-item {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Tối ưu nút Xem thêm / Thu gọn trong Sidebar */
.re__sidebar-box .re__link-more-suggestion-box {
    margin-top: 6px !important;
    padding-top: 6px !important;
    clear: both !important;
}

.re__sidebar-box .re__link-more-suggestion-box a.re__link-pr {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    color: #e03c31 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.re__sidebar-box .re__link-more-suggestion-box a.re__link-pr:hover {
    color: #b91c1c !important;
    text-decoration: underline !important;
}

/* 6. TỐI ƯU KHỐI TIN TỨC TRANG CHỦ TIN TỨC (_indexHome.php) */
.re__box-three-type .re__main-type {
    width: calc(50% - 15px) !important;
    float: left !important;
    box-sizing: border-box !important;
}

.re__box-three-type .re__main-type .re__main-thumb {
    width: 100% !important;
    max-height: 250px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.re__box-three-type .re__main-type .re__main-thumb > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.re__box-three-type .re__main-type .re__main-title {
    font-size: 16px !important;
    line-height: 22px !important;
    margin-top: 10px !important;
    font-weight: 700 !important;
}

.re__box-three-type .re__major-type {
    width: calc(50% - 15px) !important;
    float: right !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 14px !important;
}

.re__box-three-type .re__major-type .re__major-thumb {
    width: 80px !important;
    height: 56px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
}

.re__box-three-type .re__major-type .re__major-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.re__box-three-type .re__major-type .re__major-title {
    width: calc(100% - 92px) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* 7. ĐỒNG BỘ CÁC KHỐI TRANG CHỦ THEO CHUẨN 1140PX */
.re__body .re__main .re__content-block .re__content-container,
.re__home .re__content-container,
.re__home .re__home__bds-for-you-block .re__content-container,
.re__home .re__home__project-block.re__content-block .re__content-container,
.re__home .re__home__hot-news-block .re__content-container,
.re__home .re__home__enterprise-block.re__content-block .re__content-container,
.re__home .re__home__utility-block .re__content-container {
    max-width: 1140px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* 8. RESPONSIVE THÍCH ỨNG CHO CÁC MÀN HÌNH NHỎ HƠN */
@media only screen and (max-width: 1139px) {
    .re__main-content-layout,
    .re__body .re__main .re__main-content-layout,
    .re__project-main-container,
    .re__nlcc-main-layout,
    .re__body .re__main .re__content-block .re__content-container,
    .re__home .re__content-container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .re__main-content-layout .re__main-content,
    .re__body .re__main .re__main-content-layout .re__main-content,
    .re__project-main-left,
    .re__nlcc-main-left,
    .body-left {
        width: calc(100% - 325px) !important;
        margin-right: 15px !important;
    }

    .re__main-content-layout .re__main-sidebar,
    .re__body .re__main .re__main-content-layout .re__main-sidebar,
    .re__project-main-right,
    .re__nlcc-main-right,
    .body-right {
        width: 310px !important;
    }
}

@media only screen and (max-width: 991px) {
    .re__main-content-layout .re__main-content,
    .re__body .re__main .re__main-content-layout .re__main-content,
    .re__project-main-left,
    .re__nlcc-main-left,
    .body-left,
    .re__main-content-layout .re__main-sidebar,
    .re__body .re__main .re__main-content-layout .re__main-sidebar,
    .re__project-main-right,
    .re__nlcc-main-right,
    .body-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
}
