/* =====================================
    CSS cho frontend hiển thị bất động sản
    ===================================== */

/* Ẩn thông tin tác giả và ngày đăng trên trang bài viết đơn */
.entry-header .entry-meta, /* Phổ biến trong nhiều theme */
.entry-header .ast-single-post-order, /* Cụ thể hơn cho Astra */
.ast-below-single-post-header .entry-meta, /* Một vị trí khác có thể có trong Astra */
.entry-header .posted-on, /* Đôi khi ngày đăng có class này */
.entry-header .byline { /* Đôi khi tác khi có class này */
    display: none !important;
}


/* Giảm khoảng cách giữa tiêu đề và phần giá/meta */
.entry-header .entry-title { /* Selector cho tiêu đề bài viết đơn */
    margin-bottom: 0px !important; /* Đảm bảo không có khoảng cách dưới tiêu đề */
    padding-bottom:0px !important; /* Đảm bảo không có padding dưới tiêu đề */
}

/* Các phần tử p hoặc div trống sau tiêu đề trong cấu trúc của Astra */
.entry-header p,
.entry-header div {
    margin: 0px !important;
    padding: 0px !important;
}


/* =====================================
    CSS cho frontend hiển thị bất động sản
    ===================================== */

.mrel-single-property-meta {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex; /* Dùng flexbox để căn chỉnh các phần tử */
    align-items: center; /* Căn giữa theo chiều dọc */
    flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
    gap: 5px; /* Khoảng cách giữa giá và trạng thái */
}

.mrel-single-price {
    font-size: 1.3em;
    font-weight: bold;
    color: #333; /* Màu chữ cho giá */
}

/* =====================================
    Thêm màu cho nhãn giá (tiền tố và hậu tố)
    ===================================== */
.mrel-single-price .mrel-price-prefix,
.mrel-single-price .mrel-price-suffix {
    font-size: 0.9em; /* Kích thước nhỏ hơn so với giá chính */
    font-weight: normal; /* Chữ thường, không in đậm */
}

.mrel-single-price .mrel-price-prefix {
    color: #0073aa; /* Ví dụ: màu xanh cho tiền tố */
}

.mrel-single-price .mrel-price-suffix {
    color: #28a745; /* Ví dụ: màu xanh lá cho hậu tố */
}


.mrel-property-status-badge {
    /* Style này đã được tạo ra bởi PHP, nhưng có thể điều chỉnh thêm ở đây */
    text-transform: uppercase;
    font-size: 0.9em;
    line-height: 1; /* Để text không quá cao */
    padding: 5px 12px !important; /* Ghi đè padding từ inline style */
    border-radius: 5px !important; /* Ghi đè border-radius từ inline style */
    white-space: nowrap; /* Ngăn trạng thái bị xuống dòng */
}

/* Styles cho khối chi tiết bất động sản */
.mrel-property-details-grid {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng */
    justify-content: flex-start; /* Bắt đầu từ bên trái, không căn đều */
    gap: 20px 30px; /* Khoảng cách giữa các mục (hàng và cột) */
    margin-top: 15px; /* Khoảng cách từ phần giá/trạng thái */
    width: 100%; /* Đảm bảo chiếm đủ chiều rộng */
    padding: 0 10px; /* Thêm padding để không bị dính vào cạnh */
    box-sizing: border-box; /* Bao gồm padding trong width */
}

.mrel-detail-item {
    display: flex; /* Biến mỗi item thành một flex container */
    flex-direction: row; /* Icon và phần nội dung (giá trị + nhãn) nằm trên cùng một hàng */
    align-items: center; /* Căn giữa theo chiều dọc: Thay đổi ở đây */
    text-align: left; /* Căn trái văn bản */
    flex-shrink: 0; /* Ngăn item bị co lại trên màn hình nhỏ */
    gap: 8px; /* Khoảng cách giữa icon và khối nội dung */
}

.mrel-detail-item .mrel-detail-content { /* Wrapper mới cho giá trị số và nhãn */
    display: flex;
    flex-direction: column; /* Xếp giá trị trên, nhãn dưới */
    align-items: flex-start; /* Căn trái giá trị và nhãn */
    justify-content: center; /* Căn giữa theo chiều dọc nếu có chiều cao lớn hơn */
    flex-grow: 1; /* Cho phép khối này chiếm hết không gian còn lại trong item */
    gap: 0; /* Không có khoảng cách giữa giá trị và nhãn */
}

/* Style chung cho tất cả các SVG icon tùy chỉnh */
.mrel-custom-icon {
    width: 24px; /* Kích thước icon */
    height: 24px;
    flex-shrink: 0; /* Ngăn icon bị co lại */
    color: #ff9800; /* Màu cam cho tất cả các icon SVG tùy chỉnh */
}

.mrel-detail-item .mrel-detail-content .mrel-detail-value { /* span chứa giá trị số (có class mới) */
    font-size: 0.85em; /* Kích thước font cho giá trị */
    font-weight: bold;
    color: #555;
    white-space: nowrap; /* Đảm bảo giá trị không bị xuống dòng */
    line-height: 1.2; /* Tối ưu hóa line-height cho giá trị */
}

.mrel-detail-item .mrel-detail-content .mrel-detail-label { /* nhãn mô tả (có class mới) */
    font-size: 0.85em; /* Kích thước font cho nhãn */
    color: #888;
    text-transform: capitalize; /* Chữ cái đầu viết hoa cho nhãn */
    white-space: nowrap; /* Đảm bảo nhãn không bị xuống dòng */
    line-height: 1.2; /* Tối ưu hóa line-height cho nhãn */
}

/* Các styles khác cho danh sách bất động sản (nếu cần) */
.mrel-property-item {
    margin-bottom: 20px;
    border: 1px solid #eee;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.mrel-property-thumbnail img {
    max-width: 150px;
    height: auto;
    display: block;
}

.mrel-property-content {
    flex-grow: 1;
}

.mrel-property-content h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.mrel-property-content p {
    margin-bottom: 8px;
}

.mrel-property-content .mrel-price {
    font-weight: bold;
    color: #e44d26; /* Màu cam cho giá */
}

.mrel-property-content .mrel-details .dashicons {
    font-size: 1em;
    vertical-align: middle;
    margin-right: 3px;
    color: #888;
}

.mrel-property-content .mrel-readmore {
    display: inline-block;
    background-color: #0073aa;
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
}

/* Styles cho các nhãn (tags) và trạng thái trong danh sách */
.mrel-property-tags a,
.mrel-property-status a {
    margin-right: 5px;
    margin-bottom: 5px; /* Cho phép xuống dòng nếu nhiều */
    display: inline-block;
}

/* =====================================
    Styles for Property Gallery
    ===================================== */
.mrel-property-gallery-container {
    width: 100%;
    max-width: 900px; /* Max width for the gallery container */
    margin: 30px auto; /* Center the gallery and add vertical spacing */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* Ensure rounded corners are applied */
    background-color: #fff;
}

.mrel-main-gallery-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 66.66%; /* Aspect ratio 3:2 (height/width * 100) */
    background-color: #f0f0f0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mrel-main-gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    transition: opacity 0.3s ease-in-out;
}

/* Wrapper for arrow buttons */
.mrel-gallery-nav-arrows-group {
    position: absolute;
    bottom: 15px; /* Vị trí cách đáy 15px */
    left: 15px; /* Vị trí cách trái 15px */
    z-index: 10;
    display: flex; /* Dùng flexbox để sắp xếp các nút con */
    flex-direction: row; /* Xếp các nút cạnh nhau */
    gap: 10px; /* Khoảng cách giữa nút prev và next */
}

.mrel-gallery-nav-arrow {
    background-color: rgba(255, 255, 255, 0.85); /* Nền bán trong suốt */
    border: none;
    border-radius: 4px; /* Hình vuông với góc bo nhẹ */
    width: 44px; /* Kích thước */
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #333; /* Màu chữ mặc định */
    font-size: 26px; /* Kích thước font cho ký tự < và > */
    font-weight: bold; /* In đậm ký tự */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Đổ bóng */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.mrel-gallery-nav-arrow:hover {
    background-color: #ff9800; /* Màu cam khi hover */
    color: #fff; /* Màu chữ trắng khi hover */
    transform: scale(1.05); /* Hiệu ứng phồng nhẹ */
}
.mrel-gallery-nav-arrow:active {
    transform: scale(0.95); /* Hiệu ứng nhấn xuống */
}


.mrel-gallery-thumbnails {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling for thumbnails */
    padding: 10px 0;
    background-color: #f8f8f8;
    border-top: 1px solid #eee;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE/Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.mrel-gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

.mrel-thumbnail-image {
    width: 100px; /* Fixed width for thumbnails */
    height: 70px; /* Fixed height for thumbnails */
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, transform 0.2s ease;
    margin: 0 5px; /* Spacing between thumbnails */
    border-radius: 4px;
    flex-shrink: 0; /* Prevent shrinking */
}

.mrel-thumbnail-image:first-child {
    margin-left: 10px; /* Add margin to the first thumbnail */
}
.mrel-thumbnail-image:last-child {
    margin-right: 10px; /* Add margin to the last thumbnail */
}


.mrel-thumbnail-image:hover {
    transform: translateY(-3px);
    border-color: #ffcc80; /* Lighter orange on hover */
}

.mrel-thumbnail-image.active {
    border-color: #ff9800; /* Active thumbnail border color */
    transform: translateY(-1px);
}

/* =====================================
    Styles for "MÔ TẢ" title
    ===================================== */
.mrel-description-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #ff9800;
    display: block;
    width: 100%;
    padding-left: 10px;
    padding-right: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-sizing: border-box;
}

/* =====================================
    Styles for Property Location Details
    ===================================== */
.mrel-location-details-wrapper {
    margin-top: 30px;
    margin-bottom: 20px;
}

.mrel-location-header-row {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ff9800;
    width: 100%;
    box-sizing: border-box;
}

.mrel-location-main-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: none;
    display: inline;
}

.mrel-open-map-link {
    display: none;
}

.mrel-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px 30px;
    margin-top: 15px;
    padding: 0 10px;
    box-sizing: border-box;
}

.mrel-location-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 5px;
    border-bottom: 1px dotted #eee;
}

.mrel-location-item:last-child {
    border-bottom: none;
}

.mrel-location-label {
    font-size: 0.9em;
    color: #888;
    text-transform: uppercase;
    line-height: 1.2;
    flex-shrink: 0;
    margin-right: 10px;
}

.mrel-location-value {
    font-size: 1em;
    font-weight: bold;
    color: #555;
    line-height: 1.2;
    text-align: right;
    flex-grow: 1;
}

.mrel-location-value .mrel-location-link {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.mrel-location-value .mrel-location-link:hover {
    color: #005177;
    text-decoration: underline;
}

.mrel-map-coords-link {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.mrel-map-coords-link:hover {
    color: #005177;
    text-decoration: underline;
}


/* =====================================
    Styles for Property Overview Section
    ===================================== */
.mrel-overview-section-wrapper {
    /* Đã được tích hợp vào mrel-tabs-content-frontend */
}

.mrel-overview-header-row {
    display: none;
}

.mrel-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px 30px;
    margin-top: 0;
    padding: 0;
    box-sizing: border-box;
}

.mrel-overview-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 5px;
    border-bottom: 1px dotted #eee;
}

.mrel-overview-item:last-child {
    border-bottom: none;
}

.mrel-overview-label {
    font-size: 0.9em;
    color: #888;
    text-transform: uppercase;
    line-height: 1.2;
    flex-shrink: 0;
    margin-right: 10px;
}

.mrel-overview-value {
    font-size: 1em;
    font-weight: bold;
    color: #555;
    line-height: 1.2;
    text-align: right;
    flex-grow: 1;
}

.mrel-overview-value .mrel-price-prefix,
.mrel-overview-value .mrel-price-suffix {
    font-size: 0.9em;
    font-weight: normal;
}

.mrel-overview-value .mrel-price-prefix {
    color: #0073aa;
}

.mrel-overview-value .mrel-price-suffix {
    color: #28a745;
}

.mrel-overview-value .mrel-overview-link {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.mrel-overview-value .mrel-overview-link:hover {
    color: #005177;
    text-decoration: underline;
}

/* =====================================
    Styles for Property Video Section
    ===================================== */
.mrel-property-video-wrapper {
    /* Đã được tích hợp vào mrel-tabs-content-frontend */
}

.mrel-video-title {
    display: none;
}

.mrel-video-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mrel-video-player iframe,
.mrel-video-player object,
.mrel-video-player embed,
.mrel-video-player .mrel-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mrel-video-fallback {
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.mrel-video-fallback::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease;
}

.mrel-video-fallback:hover::before {
    background-color: rgba(0, 0, 0, 0.6);
}

.mrel-video-play-button {
    position: relative;
    z-index: 10;
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.mrel-video-play-button:hover {
    transform: scale(1.1);
    background-color: #ff9800;
    color: #fff;
}

.mrel-video-play-button:hover svg {
    fill: #fff;
}

.mrel-video-play-button svg {
    width: 30px;
    height: 30px;
    fill: #333;
    margin-left: 5px;
    transition: fill 0.3s ease;
}

/* =====================================
    Frontend Tabs Styles (Overview & Video)
    ===================================== */
.mrel-tabs-frontend-wrapper {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box;
}

.mrel-tabs-navigation-frontend {
    background-color: #333;
    padding-left: 0;
    padding-right: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
}

.mrel-tabs-navigation-frontend ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    margin-left: 10px;
}

.mrel-tabs-navigation-frontend ul li {
    padding: 15px 20px;
    cursor: pointer;
    color: #ccc;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-right: 1px solid #444;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-right: -1px;
    z-index: 1;
    white-space: nowrap;
}

.mrel-tabs-navigation-frontend ul li:first-child {
    margin-left: -10px;
    border-top-left-radius: 8px;
}

.mrel-tabs-navigation-frontend ul li:last-child {
    border-right: none;
    margin-right: 0;
}

.mrel-tabs-navigation-frontend ul li.active {
    background-color: #ff9800;
    color: #fff;
    z-index: 2;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-right: -1px;
}

.mrel-tabs-navigation-frontend ul li.active:first-child {
    border-top-left-radius: 8px;
}

.mrel-tabs-navigation-frontend ul li:hover {
    background-color: #444;
    color: #fff;
}

.mrel-tabs-navigation-frontend ul li.active::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff9800;
}


.mrel-tabs-content-frontend {
    padding: 20px 10px;
    background-color: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid #eee;
    border-top: none;
    box-sizing: border-box;
}

.mrel-tab-pane-frontend {
    display: none;
}

.mrel-tab-pane-frontend.active {
    display: block;
}

.mrel-tab-pane-frontend .mrel-overview-grid,
.mrel-tab-pane-frontend .mrel-property-video-wrapper {
    margin-top: 0;
    padding: 0;
}


/* =====================================
    Styles for Property Contact Info Section
    (New section, similar to location)
    ===================================== */
.mrel-contact-info-wrapper {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Kế thừa style từ .mrel-location-header-row cho tiêu đề Liên hệ */
.mrel-contact-main-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin: 0; /* Xóa margin mặc định của h2 */
    padding-bottom: 5px; /* Giữ khoảng cách dưới tiêu đề */
    border-bottom: 2px solid #ff9800; /* Đường gạch dưới màu cam */
    display: block;
    width: 100%;
    padding-left: 10px; /* Thụt vào 10px */
    padding-right: 10px; /* Đảm bảo chiều rộng chuẩn */
    text-transform: uppercase;
    letter-spacing: 1px;
    box-sizing: border-box;
}

.mrel-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2 cột trên desktop, 1 cột trên mobile */
    gap: 15px 30px; /* Khoảng cách giữa các hàng và cột */
    margin-top: 15px;
    padding: 0 10px; /* Thêm padding vào đây để nội dung căn chỉnh đúng */
    box-sizing: border-box;
}

.mrel-contact-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 5px;
    border-bottom: 1px dotted #eee;
}

.mrel-contact-item:last-child {
    border-bottom: none;
}

.mrel-contact-item.mrel-contact-info-full {
    grid-column: 1 / -1; /* Chiếm toàn bộ chiều rộng nếu có 2 cột */
    display: block; /* Trở thành block để thông tin thêm có thể xuống dòng */
    border-bottom: none; /* Không có đường kẻ dưới cho item này */
    padding-bottom: 0;
}

.mrel-contact-item.mrel-contact-info-full .mrel-contact-label {
    display: block; /* Nhãn nằm trên */
    margin-bottom: 5px;
    margin-right: 0;
}
.mrel-contact-item.mrel-contact-info-full .mrel-contact-value {
    text-align: left; /* Căn trái toàn bộ nội dung */
}


.mrel-contact-label {
    font-size: 0.9em;
    color: #888;
    text-transform: uppercase;
    line-height: 1.2;
    flex-shrink: 0;
    margin-right: 10px;
}

.mrel-contact-value {
    font-size: 1em;
    font-weight: bold;
    color: #555;
    line-height: 1.2;
    text-align: right;
    flex-grow: 1;
}

.mrel-contact-value .mrel-contact-link {
    color: #0073aa; /* Màu xanh đặc trưng cho liên kết, ví dụ màu xanh của WordPress */
    text-decoration: none; /* Không gạch chân mặc định */
    font-weight: bold; /* Giữ in đậm như giá trị */
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.mrel-contact-value .mrel-contact-link:hover {
    color: #005177; /* Màu xanh đậm hơn khi di chuột */
    text-decoration: underline; /* Gạch chân khi di chuột */
}

/* =====================================
    Styles cho frontend hiển thị File Đính Kèm
    (Tối ưu hóa để hiển thị tốt trên màn hình nhỏ)
    ===================================== */

/* Wrapper chính cho phần File Đính Kèm */
.mrel-attachments-frontend-wrapper {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Tiêu đề "File Đính Kèm" */
.mrel-attachments-frontend-wrapper .mrel-contact-main-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #ff9800;
    display: block;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-sizing: border-box;
}

/* Lưới chứa các file đính kèm */
.mrel-attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px 30px;
    margin-top: 15px;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Từng mục file đính kèm */
.mrel-attachment-item-frontend {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px dotted #eee;
}

/* Bỏ đường gạch dưới cho mục cuối cùng */
.mrel-attachment-item-frontend:last-child {
    border-bottom: none;
}

/* Icon file */
.mrel-attachment-item-frontend .file-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 8px;
    vertical-align: middle;
}

/* Nhãn (Tên file) */
.mrel-attachment-item-frontend .mrel-contact-label {
    font-size: 0.9em;
    color: #555;
    text-transform: none;
    line-height: 1.2;
    flex-grow: 1; /* Cho phép co giãn để chiếm không gian */
    flex-shrink: 1; /* Cho phép co lại nếu cần */
    margin-right: 10px;
    white-space: nowrap; /* Ngăn tên file xuống dòng */
    overflow: hidden; /* Ẩn phần tên file thừa */
    text-overflow: ellipsis; /* Thêm dấu ba chấm (...) */
}

/* Giá trị (liên kết Tải xuống) */
.mrel-attachment-item-frontend .mrel-contact-value {
    flex-grow: 0;
    flex-shrink: 0; /* Ngăn không cho co lại */
    text-align: right;
}

/* Liên kết "Tải xuống" */
.mrel-attachment-item-frontend .mrel-contact-link {
    color: #ff9800;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    white-space: nowrap; /* Đảm bảo nút này không bị xuống dòng */
}

.mrel-attachment-item-frontend .mrel-contact-link:hover {
    color: #e44d26;
    text-decoration: underline;
}

/* Cụ thể hơn cho màn hình di động */
@media (max-width: 600px) {
    /* Điều chỉnh kích thước nút chuyển ảnh trong thư viện ảnh */
    .mrel-gallery-nav-arrow {
        width: 30px !important; /* Giảm chiều rộng nút */
        height: 30px !important; /* Giảm chiều cao nút */
        font-size: 16px !important; /* Giảm kích thước icon mũi tên */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; /* Giảm độ đổ bóng nhẹ hơn nữa */
        border-radius: 3px !important; /* Giữ bo tròn */
    }

    /* Điều chỉnh vị trí của nhóm nút chuyển ảnh */
    .mrel-gallery-nav-arrows-group {
        bottom: 8px !important; /* Đẩy lên trên một chút */
        left: 8px !important; /* Giảm khoảng cách từ lề trái */
        gap: 6px !important; /* Giảm khoảng cách giữa các nút */
    }


    /* Đảm bảo thumbnail có thể co lại trên màn hình nhỏ hơn */
    .mrel-thumbnail-image {
        width: 80px; /* Giảm kích thước thumbnail */
        height: 56px; /* Giữ tỷ lệ 4:3 */
        margin: 0 3px; /* Giảm khoảng cách */
    }

    /* Cho phép chữ xuống dòng thay vì bị ép một hàng */
    .mrel-detail-item .mrel-detail-content .mrel-detail-value,
    .mrel-detail-item .mrel-detail-content .mrel-detail-label,
    .mrel-contact-label,
    .mrel-contact-value,
    .mrel-attachment-item-frontend .mrel-contact-label {
        white-space: normal !important;
    }

    /* Cho phép icon và text co lại */
    .mrel-detail-item,
    .mrel-custom-icon {
        flex-shrink: 1 !important;
    }

    /* Grid mobile chỉ 1 cột và giảm khoảng cách */
    .mrel-overview-grid,
    .mrel-location-grid,
    .mrel-contact-grid,
    .mrel-attachments-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important; /* Giảm khoảng cách giữa các hàng */
        padding: 0 10px !important; /* Đảm bảo padding ngang phù hợp */
    }

    /* Giảm gap và padding cho khối chi tiết chính */
    .mrel-property-details-grid {
        gap: 10px !important;
        padding: 0 5px !important;
    }

    /* Điều chỉnh font-size cho các tiêu đề phần trên mobile */
    .mrel-description-title,
    .mrel-location-main-title,
    .mrel-contact-main-title,
    .mrel-attachments-frontend-wrapper .mrel-contact-main-title {
        font-size: 1.1em;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Điều chỉnh thanh navigation tabs */
    .mrel-tabs-navigation-frontend ul {
        margin-left: 0 !important; /* Loại bỏ margin âm */
        overflow-x: auto; /* Cho phép cuộn ngang nếu số lượng tab nhiều */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mrel-tabs-navigation-frontend ul::-webkit-scrollbar {
        display: none;
    }
    .mrel-tabs-navigation-frontend ul li {
        padding: 10px 12px !important; /* Giảm padding tab */
        font-size: 0.9em !important; /* Giảm kích thước font tab */
        letter-spacing: 0.2px; /* Giảm khoảng cách chữ */
        margin-right: 0 !important; /* Loại bỏ margin giữa các tab */
        white-space: nowrap; /* Giữ nguyên để cuộn ngang */
    }
    .mrel-tabs-navigation-frontend ul li:first-child {
        border-top-left-radius: 8px; /* Đảm bảo góc bo tròn */
    }
    .mrel-tabs-navigation-frontend ul li.active {
        margin-right: 0 !important;
    }

    /* Đảm bảo nội dung tab cũng có padding phù hợp */
    .mrel-tabs-content-frontend {
        padding: 15px 10px !important;
    }

    .mrel-attachment-item-frontend .mrel-contact-link {
        font-size: 0.9em; /* Giảm kích thước font cho link "Tải xuống" */
    }
}

/* Đảm bảo các tab của Media Library luôn hiển thị và có thể click được */
.media-router .media-menu-item {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}