/*
Theme Name: BDS
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/



/* Tạm xóa background chuyển màu
// Đã sửa lỗi: Dùng background-image thay cho background để không khóa cứng Animation //
#header .header-bg-container,
#header .header-bg-color,
#masthead {
    background-image: linear-gradient(270deg, #00192f, #002b5e, #01346d, #00192f) !important;
    background-size: 200% 200% !important;
    animation: gradientAnimation 6s ease infinite !important;
}

// Định nghĩa khung hình chuyển động (Animation) //
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
*/ 






/* ========================================================
   NÚT ĐIỀU HƯỚNG SLIDER (NEXT / PREV)
   ======================================================== */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 39, 82, 0.4); /* Nền xanh đậm mờ trong suốt */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Viền mờ tinh tế */
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Nút bo tròn */
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 15; /* Phải lớn hơn z-index của ảnh và khung nội dung */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ép nút nằm sát 2 bên mép màn hình */
.prev-btn { left: 30px; }
.next-btn { right: 30px; }

/* Hiệu ứng Luxury khi di chuột vào */
.slider-btn:hover {
    background: #c29b47; /* Đổi nền sang Vàng nhũ đồng */
    border-color: #c29b47;
    color: #002752; /* Icon đổi sang màu Xanh đậm */
    box-shadow: 0 0 15px rgba(194, 155, 71, 0.5); /* Ánh sáng tỏa ra nhẹ nhàng */
}

/* Responsive: Thu nhỏ hoặc ẩn nút trên màn hình điện thoại để tránh chật chội */
@media (max-width: 768px) {
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    .slider-btn { width: 35px; height: 35px; font-size: 1rem; }
}




/* Container chứa các nút Social */
.custom-social-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Khung vuông bên ngoài của nút */
.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid #002e62;
    border-radius: 5px; /* Bo góc */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Cấu hình hiển thị ảnh icon bên trong */
.icon-img {
    width: 23px; /* Kích thước ảnh bên trong khung */
    height: 23px;
    background-color: #002e62;
    
    /* Thiết lập để ảnh không bị méo và nằm giữa */
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    
    transition: background-color 0.3s ease;
}

/* HIỆU ỨNG KHI DI CHUỘT (HOVER) */
.social-icon:hover {
    border-color: #c29b47; /* Viền chuyển sang vàng nhũ đồng */
    transform: translateY(-3px); /* Nút nảy nhẹ lên */
}

/* Đổi màu ảnh bên trong sang vàng nhũ đồng khi di chuột vào nút */
.social-icon:hover .icon-img {
    background-color: #c29b47; 
}



/* Container bao bọc cụm liên hệ */
.custom-contact-wrap {
    display: flex;
    flex-wrap: wrap; /* Tránh bị rớt dòng trên màn hình quá nhỏ */
    gap: 20px; /* Khoảng cách giữa sđt và email */
    align-items: center;
}

/* Định dạng thẻ a (chứa cả icon và chữ) */
.contact-link {
    display: flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa icon và đoạn chữ */
    color: #002e62; 
    font-size: 15px; /* Kích cỡ chữ vừa đọc */
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Định dạng riêng cho Icon để tạo điểm nhấn */
.contact-link i {
    font-size: 18px;
    color: #002e62;
    transition: transform 0.3s ease;
}

/* Hiệu ứng khi di chuột vào (Hover) */
.contact-link:hover {
    color: #c29b47; /* Cả cụm chữ chuyển sang vàng nhũ đồng */
}

.contact-link:hover i {
    transform: scale(1.15) translateY(-2px); /* Icon phóng to nhẹ và nảy lên */
}




/* Container bao bọc cụm liên hệ */
.custom-contact-wrap {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
    align-items: center;
}

/* Định dạng thẻ a (chứa cả icon và chữ) */
.contact-link {
    display: flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa icon và đoạn chữ */
    color: #002e62;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Định dạng riêng cho Icon để tạo điểm nhấn */
.contact-link i {
    font-size: 18px;
    color: #002e62;
    transition: transform 0.3s ease;
}

/* Hiệu ứng khi di chuột vào (Hover) */
.contact-link:hover {
    color: #c29b47; /* Cả cụm chữ chuyển sang vàng nhũ đồng */
}

.contact-link:hover i {
    transform: scale(1.15) translateY(-2px); /* Icon phóng to nhẹ và nảy lên */
}






/* ========================================================
   1. KHUNG BANNER CHÍNH & SLIDER ẢNH
   ======================================================== */
.custom-hero-banner {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* THÊM: Màu nền dự phòng. Nếu ảnh tải chậm sẽ hiện màu xanh sang trọng này */
    background-color: #002752; 
}

.hero-slider, .slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}

.hero-slider { z-index: 1; }

.hero-slider::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 39, 82, 0.3); /* Phủ mờ nhẹ bằng màu xanh dương đậm */
    z-index: 2;
}

.slide {
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease-in-out;
}

.slide.active { opacity: 1; 
    z-index: 2; /* Ảnh đang hiển thị sẽ nổi lên trên */ }

/* ========================================================
   2. TIÊU ĐỀ & KHUNG CHỨA NỘI DUNG
   ======================================================== */
.hero-content {
    position: relative; z-index: 10; text-align: center; 
    width: 100%; max-width: 900px; padding: 0 15px;
}

.hero-title {
    color: #ffffff; font-size: 2.5rem; font-weight: 700; margin-bottom: 35px;
    text-shadow: 2px 4px 8px rgba(0, 39, 82, 0.8);
    letter-spacing: 1px;
}

/* ========================================================
   3. THANH TÌM KIẾM (ĐÃ CHUẨN HÓA CHIỀU CAO VÀ CÂN ĐỐI)
   ======================================================== */
.hero-search-form {
    display: flex; 
    align-items: stretch; /* Cực kỳ quan trọng: Ép mọi thứ bên trong cao bằng nhau */
    height: 50px; /* ĐÃ GIẢM CHIỀU CAO: Đây là chiều cao cố định cho cả thanh */
    background: #ffffff; 
    border-radius: 6px; 
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 39, 82, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.8);
    margin: 0 auto !important; /* Xóa lề thừa của Flatsome */
    padding: 0 !important;
    width: 100%;
}

.form-group {
    flex: 1; 
    border-right: 1px solid #e5e5e5; 
    position: relative; 
    height: 100%; /* Cao full 50px của khung cha */
}

.form-group:last-of-type { border-right: none; }

.search-select {
    width: 100%; 
    height: 100% !important; /* Ép cao full 50px */
    border: none !important; 
    outline: none !important; 
    padding: 0 20px !important;
    font-size: 1rem; 
    color: #002752; 
    font-weight: 600; 
    background: transparent; 
    cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    box-shadow: none !important; /* Xóa bóng mờ mặc định của Flatsome form */
    margin: 0 !important;
}

/* Icon mũi tên thả xuống màu Vàng nhũ đồng */
.form-group::after {
    content: '\f107'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    color: #c29b47; font-size: 1.2rem; pointer-events: none;
}

/* ========================================================
   4. NÚT BẤM (GRADIENT NHŨ ĐỒNG)
   ======================================================== */
.btn-search {
    background: linear-gradient(135deg, #e8c971, #c29b47, #99731b) !important; 
    color: #002752 !important; 
    border: none !important; 
    height: 100% !important; /* Ép cao full 50px, bằng y hệt ô chọn */
    padding: 0 35px !important;
    font-size: 1rem; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    cursor: pointer; 
    transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 !important; /* Xóa margin thừa */
    border-radius: 0; /* Đảm bảo góc nút bấm ôm sát vào form */
}

.btn-search:hover { 
    background: linear-gradient(135deg, #f5d67b, #d4af37, #aa8222) !important; 
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.4);
}

/* ========================================================
   5. RESPONSIVE DÀNH CHO MOBILE
   ======================================================== */
@media (max-width: 768px) {
    .custom-hero-banner { height: 450px; }
    .hero-title { font-size: 1.6rem; margin-bottom: 20px; }
    
    .hero-search-form { 
        flex-direction: column; 
        height: auto; /* Thả tự do chiều cao trên mobile */
        border-radius: 8px; 
    }
    
    .form-group { border-right: none; border-bottom: 1px solid #e5e5e5; height: 50px; }
    
    .btn-search { 
        height: 55px !important; /* Cho nút to ra một chút trên đt để dễ bấm */
        width: 100%; 
    }
}






/* Container chứa danh sách BĐS (Grid 3 cột) */
.custom-bds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

/* Thẻ BĐS (Card) */
.bds-card {
    background: #fff;
    border: 1px solid #e0e5ea; /* Viền bao quanh tinh tế */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease; /* Hiệu ứng mượt mà */
}

/* Hiệu ứng Hover: Nổi lên và đổ bóng */
.bds-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 39, 82, 0.15);
    border-color: #c29b47; /* Đổi viền sang vàng nhũ khi hover */
}

/* Khối Ảnh */
.bds-img {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.bds-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bds-card:hover .bds-img img {
    transform: scale(1.08); /* Zoom nhẹ ảnh khi hover */
}

/* Nhãn "CẦN BÁN" */
.bds-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #002752; /* Nền xanh đậm */
    color: white; /* Chữ trắng */
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Khối Nội dung chính */
.bds-body {
    padding: 20px;
    flex-grow: 1; /* Ép phần nội dung giãn ra, đẩy thanh giá xuống sát đáy */
}

.bds-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.bds-title a { color: #333; text-decoration: none; transition: color 0.3s; }
.bds-title a:hover { color: #c29b47; }

/* Dòng Địa chỉ */
.bds-location {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}
.bds-location i { color: #c29b47; margin-right: 5px; }

/* Thông số (Nằm TRÊN giá) */
.bds-info {
    display: flex;
    justify-content: flex-start;
    gap: 25px;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    color: #555;
    font-size: 0.95rem;
    font-weight: 500;
}
.bds-info i { color: #002752; margin-right: 6px; font-size: 1.1rem; }

/* =========================================
   THANH GIÁ TIỀN & TRẠNG THÁI (LUXURY BAR)
   ========================================= */
.bds-price-bar {
    background: linear-gradient(135deg, #002752, #001530); /* Nền xanh dương đậm */
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hiển thị 2 tỷ giá */
.price-wrap {
    display: flex;
    flex-direction: column;
}

.price-vnd {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.price-usd {
    color: #aeb9c4; /* Xám nhạt dịu mắt */
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Nhãn Trạng Thái bên phải */
.status-wrap {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

.status-wrap.available {
    background-color: rgba(194, 155, 71, 0.2); /* Nền vàng nhạt */
    color: #fff;
    border: 1px solid #fff;
}

.status-wrap.sold {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff; /* Chữ trắng nếu đã bán */
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Responsive Mobile (Về 1 cột) */
@media (max-width: 768px) {
    .custom-bds-grid { grid-template-columns: 1fr; }
}






/* ========================================================
   1. KHUNG FOOTER VÀ NỀN GRADIENT
   ======================================================== */
.custom-main-footer {
    /* Nền gradient chuyển từ xanh đen sang xanh dương đậm */
    background: linear-gradient(270deg, #001530, #002752, #003b73, #001530);
    background-size: 600% 600%;
    animation: footerGradient 15s ease infinite;
    color: #f9f1d8; /* Nhũ đồng sáng pha kem để cực kỳ dễ đọc */
    padding: 60px 0 0 0;
    font-family: inherit;
    border-top: 4px solid #c29b47; /* Vạch nhấn nhũ đồng ở mép trên cùng */
}

@keyframes footerGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Chia 4 cột ngang nhau */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* ========================================================
   2. TIÊU ĐỀ VÀ ĐƯỜNG KẺ NHẤN
   ======================================================== */
.footer-heading {
    color: #c29b47; /* Vàng nhũ đồng nguyên bản */
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 12px;
    letter-spacing: 0.5px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #c29b47;
}

/* ========================================================
   3. CÁC ĐƯỜNG LINK & HIỆU ỨNG HOVER
   ======================================================== */
.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li, .footer-contact li {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Thêm dấu chấm nhỏ trước các link ở cột 1 và 2 giống ảnh mẫu */
.footer-links li::before {
    content: '•';
    color: #c29b47;
    font-size: 1.2rem;
    line-height: 1;
}

.footer-links a, .footer-contact a {
    color: #f9f1d8;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Hiệu ứng mượt mà: Đổi sang màu vàng nguyên bản và trượt sang phải */
.footer-links a:hover, .footer-contact a:hover {
    color: #c29b47;
    transform: translateX(6px);
}

/* ========================================================
   4. THÔNG TIN LIÊN HỆ & FACEBOOK
   ======================================================== */
.footer-contact i {
    color: #c29b47; /* Icon màu vàng nhũ đồng */
    margin-top: 4px;
    font-size: 1.1rem;
    min-width: 18px; /* Giữ icon không bị xô lệch khi chữ rớt dòng */
}

/* Bọc viền trắng để Fanpage không bị chìm vào nền xanh đen */
.fb-page-wrapper {
    background: #ffffff;
    border-radius: 6px;
    padding: 5px;
    overflow: hidden;
}

/* ========================================================
   5. BẢN QUYỀN (COPYRIGHT) DƯỚI CÙNG
   ======================================================== */
.footer-bottom {
    background-color: rgba(0, 15, 30, 0.6); /* Đen xanh mờ */
    text-align: center;
    padding: 18px 15px;
    font-size: 0.85rem;
    color: #aeb9c4;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ========================================================
   6. RESPONSIVE DÀNH CHO MOBILE & TABLET
   ======================================================== */
@media (max-width: 991px) {
    .footer-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .footer-container { grid-template-columns: 1fr; gap: 30px; }
}



/* ========================================================
   1. BẢNG THÔNG SỐ KỸ THUẬT (2 CỘT, KẺ VIỀN)
   ======================================================== */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Ép thành 2 cột */
    border: 1px solid #eaeaea;
    border-bottom: none;
    border-right: none;
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    background: #ffffff;
    font-size: 0.95rem;
}

/* Kỹ thuật tạo nền xen kẽ (Zebra striping) cho lưới 2 cột */
.spec-item:nth-child(4n+1),
.spec-item:nth-child(4n+2) {
    background: #f4f7f9; /* Màu nền xen kẽ */
}

/* Đảm bảo bảng hiển thị 1 cột trên Mobile để không bị bóp chữ */
@media (max-width: 768px) {
    .specs-grid { grid-template-columns: 1fr; border-right: 1px solid #eaeaea; }
    .spec-item { border-right: none; }
    .spec-item:nth-child(even) { background: #f4f7f9; }
    .spec-item:nth-child(odd) { background: #ffffff; }
}

/* ========================================================
   2. BĐS LIÊN QUAN (4 CỘT / HÀNG NGANG)
   ======================================================== */
.single-bds-box .custom-bds-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* Đặt thành 4 cột */
    gap: 15px;
}

/* Responsive cho phần BĐS liên quan */
@media (max-width: 1024px) {
    .single-bds-box .custom-bds-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    .single-bds-box .custom-bds-grid { grid-template-columns: 1fr !important; }
}

/* ========================================================
   3. FORM & NÚT LIÊN HỆ ĐỒNG NHẤT
   ======================================================== */
.agent-actions {
    margin-top: 15px;
}

.agent-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.agent-btn i {
    margin-right: 8px;
    font-size: 1.1rem;
}

.phone-btn { background: #002752; color: #fff; }
.phone-btn:hover { background: #c29b47; color: #002752; }

/* Chia lưới ngang cho Zalo và Messenger */
.agent-socials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.zalo-btn { background: #0068ff; color: #fff; }
.mess-btn { background: #0084ff; color: #fff; }

.zalo-btn:hover, .mess-btn:hover {
    opacity: 0.8;
    color: #fff;
    transform: translateY(-2px); /* Nẩy lên nhẹ khi hover */
}





/* ========================================================
   CỘT PHẢI: TIN TỨC MỚI NHẤT TRONG TRANG CHI TIẾT BĐS
   ======================================================== */
.news-sidebar-box {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.sidebar-news-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eaeaea;
}

.sidebar-news-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Định dạng Ảnh thu nhỏ */
.sidebar-news-item .news-thumb {
    flex: 0 0 80px; /* Chiều rộng ảnh cố định 80px */
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
}

.sidebar-news-item .news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Hiệu ứng zoom ảnh nhẹ khi hover */
.sidebar-news-item:hover .news-thumb img {
    transform: scale(1.1);
}

/* Định dạng Tiêu đề và Ngày tháng */
.sidebar-news-item .news-content h5 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.sidebar-news-item .news-content h5 a {
    color: #002752;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar-news-item .news-content h5 a:hover {
    color: #c29b47;
}

.sidebar-news-item .news-content .news-date {
    font-size: 0.8rem;
    color: #777;
}

.sidebar-news-item .news-content .news-date i {
    margin-right: 4px;
    color: #c29b47; /* Icon lịch màu nhũ đồng */
}



/* ========================================================
   GIAO DIỆN TOPBAR & NGÔN NGỮ (MENU NGANG)
   ======================================================== */
.custom-topbar-wrapper {
    display: flex;
    justify-content: space-between; /* Đẩy menu sang trái, ngôn ngữ sang phải */
    align-items: center;
    width: 100%;
    padding: 0 15px;
    height: 40px; /* Độ cao topbar */
}

/* --- Menu Chính --- */
.topbar-main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

.topbar-main-menu li {
    margin: 0;
}

.topbar-main-menu a {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: none; /* Không viết hoa toàn bộ theo ảnh mẫu */
    transition: color 0.3s ease;
}

.topbar-main-menu a:hover {
    color: #c29b47; /* Đổi màu vàng nhũ khi trỏ chuột */
}

/* --- Nút chọn Ngôn Ngữ --- */
.topbar-lang-switcher {
    position: relative;
    cursor: pointer;
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 600;
    z-index: 999;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.3s;
	margin-left: 20px;
}

.lang-current:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-current img {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.lang-current i {
    font-size: 0.8rem;
    margin-left: 5px;
}

/* --- Khối Dropdown Xổ Xuống --- */
.lang-dropdown {
    display: none; /* Mặc định ẩn */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    border-radius: 4px;
    list-style: none;
    padding: 5px 0;
    margin: 5px 0 0 0;
}

/* Class hiển thị khi click */
.lang-dropdown.show {
    display: block;
    animation: fadeInLang 0.2s ease-in-out;
}

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

.lang-dropdown li {
    margin: 0;
}

.lang-dropdown a {
    color: #333333;
    padding: 8px 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.lang-dropdown a img {
    width: 20px;
    border-radius: 2px;
}

.lang-dropdown a:hover {
    background-color: #f4f7f9;
    color: #c29b47;
}

/* Responsive cho Mobile: Giấu menu chữ, chỉ giữ icon cờ */
@media (max-width: 768px) {
    .topbar-main-menu { display: none; }
    .custom-topbar-wrapper { justify-content: flex-end; }
    .lang-current span { display: none; }
}


/* ========================================================
   CSS ẨN THANH CÔNG CỤ MẶC ĐỊNH CỦA GOOGLE TRANSLATE
   ======================================================== */
/* Ép thẻ body không bị đẩy xuống bởi iframe của Google */
body {
    top: 0 !important; 
}

/* Ẩn hoàn toàn khung Banner của Google trên cùng */
.skiptranslate iframe,
.goog-te-banner-frame.skiptranslate { 
    display: none !important; 
}

/* Ẩn bảng chú giải hiện ra khi di chuột vào chữ đã dịch */
#goog-gt-tt, .goog-te-balloon-frame { 
    display: none !important; 
}
.goog-text-highlight { 
    background: none !important; 
    box-shadow: none !important; 
}




/* ========================================================
   CSS CHO SUB-MENU XỔ XUỐNG Ở TOP BAR
   ======================================================== */
.topbar-main-menu {
    display: flex;
    align-items: center;
    position: relative;
}

/* Định vị mục có chứa sub-menu */
.topbar-main-menu .menu-item-has-children {
    position: relative;
}

/* Thêm khoảng cách cho icon mũi tên */
.topbar-main-menu .menu-item-has-children > a i {
    margin-left: 5px;
    font-size: 0.85em;
}

/* Ẩn Sub-menu mặc định */
.topbar-main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background-color: #ffffff;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);
    border-top: 3px solid #c29b47; /* Viền nhũ vàng thương hiệu */
    list-style: none;
    padding: 10px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); /* Hiệu ứng trượt lên */
    transition: all 0.3s ease;
    z-index: 99999;
}

/* Hiện Sub-menu khi trỏ chuột */
.topbar-main-menu .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Định dạng các thẻ link trong Sub-menu */
.topbar-main-menu .sub-menu li {
    margin: 0;
}

.topbar-main-menu .sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #333333 !important;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: none;
    transition: background 0.3s, padding-left 0.3s, color 0.3s;
}

/* Hiệu ứng hover cho thẻ link con (Tụt vào trong 1 xíu + đổi màu) */
.topbar-main-menu .sub-menu li a:hover {
    background-color: #f4f7f9;
    color: #c29b47 !important;
    padding-left: 28px; 
}










/* ========================================================
   TÙY CHỈNH TỶ LỆ BẢN ĐỒ GOOGLE MAPS (DẠNG TOÀN CẢNH)
   ======================================================== */
.single-bds-box .responsive-map iframe {
    width: 100% !important; /* Luôn ép rộng 100% theo khung chứa */
    height: 250px !important; /* Khống chế chiều cao thấp xuống (có thể thay đổi số này) */
    border-radius: 8px; /* Bo góc nhẹ cho bản đồ thêm phần sang trọng */
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Đổ bóng nhẹ phân tách với nền */
}

/* Tối ưu thêm cho màn hình điện thoại (Mobile) */
@media (max-width: 768px) {
    .single-bds-box .responsive-map iframe {
        height: 250px !important; /* Trên điện thoại thì cho thấp thêm chút nữa cho vừa mắt */
    }
}




/* ========================================================
   FIX LỖI VỠ GIAO DIỆN CUSTOM TOPBAR TRONG MENU MOBILE
   ======================================================== */
/* 1. Ẩn khối menu thừa bị vỡ nét trong sidebar điện thoại */
.mobile-sidebar .topbar-main-menu {
    display: none !important;
}

/* 2. Căn chỉnh lại bộ chọn ngôn ngữ và các thành phần còn lại cho ngay ngắn */
.mobile-sidebar .custom-topbar-wrapper {
    display: block !important;
    padding: 15px 20px !important;
    border-top: 1px solid #ececec; /* Thêm đường kẻ ngang phân cách nhẹ nhàng */
    margin-top: 10px;
}

.mobile-sidebar .topbar-lang-switcher {
    display: inline-block;
    position: relative;
    z-index: 99;
}

.mobile-sidebar .lang-current {
    justify-content: flex-start; /* Căn lề trái cho lá cờ */
}