:root {
    --light-orange: #ff9d4d;
/*    --primary-color: #f37201;*/
    --primary-color: #f15a22;
    --title-color: #252525;
    --dark-color: #1e293b;
    --bg-light: #f8fafc;

}

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

/* Khai báo Roboto Regular */
@font-face {
    font-family: 'MyRoboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Khai báo Roboto Bold (file ông đang có) */
@font-face {
    font-family: 'MyRoboto';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Khai báo Arizonia */
@font-face {
    font-family: 'MyArizonia';
    src: url('../fonts/Arizonia-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Ép cụ thể cho các thẻ form vì chúng cứng đầu */
input, button, select, textarea {
    font-family: 'MyRoboto', sans-serif !important;
}

body { 
    font-family: 'MyRoboto', sans-serif; 
    background: #fff; 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*///////////////////////////////// code tren laptop (GIỮ NGUYÊN 100%) */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 15px; 
    position: relative; 
}

/* --- HEADER --- */
.site-header {
    background: #fff;
    border-bottom-left-radius: 150px 155px;
    border-bottom-right-radius: 150px 155px;/*
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);*/
    padding: 10px 0 0px 0;
    position: -webkit-sticky; /* Cho Safari */
    position: sticky;
    top: 0;
    z-index: 1054; /* Để chắc chắn nó nằm trên các card ưu đãi */
    background: #ffffff; /* Bắt buộc phải có màu nền để không bị xuyên thấu nội dung dưới */
    box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* Thêm bóng đổ nhẹ để phân tách khi cuộn */
    transition: all 0.3s ease;
}
.header-top-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 50px;
}
.logo-box{ margin-left: 50px; }
.auth-box{ 
    margin-right: 50px; 
}

/* --- CUSTOM HEADER AUTH: TÀI KHOẢN --- */
.header-auth-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    padding: 8px 15px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid transparent;
}

.auth-icon-circle i {
    font-size: 26px;
    color: var(--primary-color); /* Màu cam thương hiệu CHOTHUETOT */
    transition: all 0.3s ease;
}

.auth-text-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.auth-text-content strong {
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.auth-text-content p {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: #888;
    line-height: 1.3;
    font-weight: 500;
}

/* --- HIỆU ỨNG HOVER CHUYÊN NGHIỆP --- */
.header-auth-wrapper:hover {
    background: #fff5ed; /* Nền cam nhạt */
    border-color: var(--primary-color);
    transform: translateY(-3px); /* Nhấc nhẹ lên */
    box-shadow: 0 5px 15px rgba(243, 114, 1, 0.1);
}

.header-auth-wrapper:hover .auth-icon-circle i {
    transform: scale(1.1) rotate(-10deg); /* Icon to và xoay nhẹ */
}

.header-auth-wrapper:hover .auth-text-content strong {
    color: #222; /* Đổi màu chữ chính sang đen khi hover */
}

/* Responsive cho Mobile */
@media (max-width: 767px) {
    /* Ép khối text không có khoảng cách dòng */
    .auth-text-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Nhắm trực tiếp vào thẻ strong để ép khít chữ TÀI KHOẢN */
    .auth-text-content strong {
        font-size: 11px !important;
        letter-spacing: -0.8px !important; /* Tăng độ khít chữ cái */
/* line-height: 0.9 !important;*/
        margin-bottom: -1px !important;   /* Kéo dòng dưới sát lên trên */
        display: block !important;
        font-weight: 900 !important;
    }

    /* Nhắm trực tiếp vào thẻ p class sub-text */
    .auth-text-content p.sub-text {
        font-size: 9px !important;
        letter-spacing: -0.9px !important; /* Ép khít chữ dòng phụ */
        margin-top: -2px !important;       /* Kéo dòng này dính vào chữ TÀI KHOẢN */
/* line-height: 1 !important;*/
        white-space: nowrap !important;
    }

    /* Ẩn dòng ưu đãi */
    .auth-text-content p.sub-text .promo-text {
        display: none !important;
    }

    /* Icon sát sàn sạt khối chữ */
    .header-auth-wrapper {
        gap: 4px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
}

.btn-post-group { display: flex; align-items: center; gap: 12px; }
.btn-main {
    border-radius: 12px; /* Giảm độ bo góc cho tinh tế hơn */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border: none;
    background: radial-gradient(ellipse at center, #ffe135 0%, #ff9d00 65%, var(--primary-color) 100%);
    color: #fff; 
    text-decoration: none; 
    gap: 8px;
   height: 45px !important;       /* Ép chiều cao đúng 30px như ý bạn */
    padding: 0 70px !important;   /* Tăng chiều dài bằng cách nới rộng padding trái phải */
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-size: 22px !important;    /* Vì chiều cao chỉ 30px nên phải hạ size chữ xuống để không bị tràn */
     font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: all 0.3s ease;
}

.btn-main .italic { 
    font-family: 'MyArizonia', cursive !important;
    font-size: 25px !important; /* GIẢM font-size chữ nghệ thuật từ 26px xuống 20px */
    font-weight: 700 !important; 
    margin-right: 8px !important; 
}

/* Hiệu ứng hover cho chuyên nghiệp */
.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(243, 114, 1, 0.3);
    filter: brightness(1.05);
}
.note-side { font-size: 11px; color: #888; line-height: 1.3; text-align: left; min-width: 80px; }
.login-wrapper { text-decoration: none; text-align: right; display: block; }
.login-wrapper strong { color: var(--primary-color); font-size: 20px; display: block; }
.login-wrapper p { font-size: 11px; color: #888; line-height: 1.3; margin: 0; }

/* --- NAVIGATION --- */
.nav-container { border-top: 1px solid #f2f2f2; margin-top: 15px; padding-top: 5px; }
.nav-list { display: flex; justify-content: center; list-style: none; }
.nav-list > li { margin: 0 30px; position: relative; padding-bottom: 10px; }
.nav-list a { text-decoration: none; color: #333; font-weight: 700; font-size: 0.8rem; }
.nav-list a.active { color: var(--primary-color); }
.submenu {
    display: none; position: absolute; top: 100%; left: 0; background: #fff;
    min-width: 220px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 10px 0; list-style: none; margin-top: -10px; z-index: 2000;
}
.submenu li a { padding: 10px 20px; display: block; font-weight: 400; font-size: 13px; }
.submenu li a:hover { background: #fff5ed; color: var(--primary-color); }
.has-drop:hover .submenu { display: block; }

/* --- HERO & SLIDER --- */
.hero-wrapper { 
    position: relative;
    margin-top: -150px; 
    z-index: 1; 
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.hero-bg-img {
    height: 800px; background-size: cover; background-position: center;
    display: flex; align-items: flex-end;
}
.hero-full-height { height: 100%; display: flex; align-items: flex-end; width: 100%; }
.property-info-bottom-left {
    background: linear-gradient(to right, #3d3d3d 0%, rgba(220, 217, 212, 0) 100%);
    backdrop-filter: none; 
    padding: 30px; 
    border-radius: 15px 15px 15px 0px; 
    color: #fff;
    width: 1000px;
    margin-left: -2px; 
    margin-bottom: 0px; 
}
.property-info-bottom-left .loc-pin {
    font-size: 27px; font-weight: 700; margin-bottom: 5px;
    display: flex; align-items: center; gap: 12px; margin-left: 30px;
}
.property-info-bottom-left .loc-pin i { color: var(--primary-color); font-size: 26px; }
.property-info-bottom-left h2 {
    font-size: 21px; font-weight: 400; margin-bottom: 20px;
    opacity: 0.9; margin-left: 60px;
}
.property-info-bottom-left .price-row { margin-left: 60px; }
.property-info-bottom-left .meta-row { margin-left: 70px; }

.price-row {
    display: flex; 
    align-items: stretch; 
    height: 56px; 
    margin-bottom: 25px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    position: relative; 
    width: 320px; 
}
.p-main {
    flex: 1; 
    background: linear-gradient(126deg, transparent 80%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0.2) 100%), #fff;
    color: var(--primary-color); 
    font-weight: 900; 
    font-size: 28px;
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 12px 0 0 12px;
    clip-path: polygon(0% 0%, 100% 0%, 84% 100%, 0% 100%);
    position: relative; 
    z-index: 2;
    padding-right: 20px; 
}
.p-sub {
    width: 130px; 
    background: var(--primary-color); 
    color: #fff; 
    font-weight: 700; 
    font-size: 20px;
    display: flex; 
    align-items: center;
    justify-content: center; 
    border-radius: 0 12px 12px 0; 
    margin-left: -40px; 
    padding-left: 30px; 
    position: relative; 
    z-index: 1;
}
.meta-row { display: flex; gap: 60px; }
.meta-item { display: flex; align-items: center; color: #fff; font-size: 18px; font-weight: 500; }
.meta-item i { margin-left: 10px; font-size: 18px; display: inline-flex; align-items: center; }

/* --- SEARCH --- */
.search-top-fixed {
    position: absolute; 
    top: 185px; 
    width: 100%; 
    z-index: 100;
}
.search-bar-white {
    background: #fff; 
    max-width: 500px; 
    margin: 0 auto;
    display: flex; 
    padding: 10px; 
    border-radius: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.search-bar-white input { flex: 1; border: none; padding: 0 30px; outline: none; font-size: 16px; }
.search-bar-white button { background: none; border: none; color: var(--primary-color); font-size: 24px; padding-right: 20px; cursor: pointer; }

/* --- SWIPER NAVIGATION & PAGINATION --- */
.swiper-slide { transition-timing-function: ease-in-out; }
.swiper-button-next, .swiper-button-prev {
    width: 50px; height: 50px; background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%; color: #fff; transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background: var(--primary-color); border-color: var(--primary-color); transform: scale(1.1);
}
.swiper-button-next:after, .swiper-button-prev:after { font-size: 18px !important; font-weight: bold; }
.swiper-button-prev { left: 30px; top: 50%; }
.swiper-button-next { right: 30px; top: 50%; }

.hero-swiper .swiper-pagination {
    bottom: 40px !important; display: flex; justify-content: center; align-items: center; gap: 15px; z-index: 100;
}
.hero-swiper .swiper-pagination-bullet {
    width: 18px; height: 18px; background: #fff; opacity: 0.6;
    border: 2px solid rgba(255, 255, 255, 0.5); transition: all 0.3s ease-in-out;
    margin: 0 !important; cursor: pointer;
}
.hero-swiper .swiper-pagination-bullet-active {
    width: 20px; border-radius: 10px; background: var(--primary-color) !important;
    opacity: 1; border-color: var(--primary-color); box-shadow: 0 0 15px rgba(243, 114, 1, 0.6);
}

/* =========================================================
   4. BADGE VIP & ANIMATIONS (BẢN TINH CHỈNH GỌN ĐẸP)
   ========================================================= */
.vip-badge-glitter {
    position: absolute; 
    top: 15px; /* Giảm khoảng cách từ trên xuống */
    right: 10px; /* Giảm khoảng cách từ trái sang */
    background: linear-gradient(135deg, var(--primary-color), #ff9800);
    color: #fff; 
    padding: 3px 8px; /* Giảm padding cho nhỏ lại */
    border-radius: 6px; /* Bo góc nhỏ lại cho cân đối */
    font-weight: 800; 
    font-size: 10px; /* Giảm cỡ chữ xuống (gốc có thể là 12-14px) */
    z-index: 10; 
    overflow: hidden;
    display: flex; 
    align-items: center; 
    gap: 4px; /* Thu hẹp khoảng cách giữa icon và chữ */
    box-shadow: 0 4px 10px rgba(243, 114, 1, 0.3);
    text-transform: uppercase; /* Cho chữ in hoa để dễ đọc dù nhỏ */
    letter-spacing: 0.5px;
}

/* VIP 1: Màu Cam (Phổ thông) */
.vip-badge-glitter.vip-1 {
    background: linear-gradient(135deg, var(--primary-color), #ff9800);
    box-shadow: 0 4px 10px rgba(243, 114, 1, 0.3);
}

/* VIP 2: Màu Vàng Kim (Sang trọng) */
.vip-badge-glitter.vip-2 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000; /* Chữ đen cho nổi trên nền vàng */
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.4);
}
.vip-badge-glitter.vip-2 i { color: #000; }

/* VIP ĐẶC BIỆT: Màu Đỏ (Nổi bật nhất) */
.vip-badge-glitter.vip-special {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.5);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Hiệu ứng lấp lánh dùng chung cho tất cả */
.vip-badge-glitter::before { 
    content: ''; position: absolute; top: 0; left: -100%; width: 30%; height: 100%; 
    background: rgba(255, 255, 255, 0.5); transform: skewX(-25deg); 
    animation: glitter-run 3s infinite linear; 
}

@keyframes glitter-run { 0% { left: -100%; } 30%, 100% { left: 150%; } }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////// style moi ///////////////////////////*/
/* --- 1. NỀN TẢNG & RESET --- */
.spotlight-luxury-magazine {
    width: 100%; 
    background: #ffffff; 
    padding: 40px 0;
/* font-family: 'MyRoboto', sans-serif; */
    color: #1e293b;
    overflow: hidden;
}

/* ÉP 2 DÒNG CHO TIÊU ĐỀ/VỊ TRÍ */
.ms-loc-text, .m-loc-main, .mp-loc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Hiện tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px !important; /* (Dòng 20px * 2) - Phải có height để khung bằng nhau khi chữ chỉ có 1 dòng */
    line-height: 20px !important;
    margin-bottom: 5px !important;
}
.m-loc-main i, .ms-loc-text i, .mp-loc i { 
/* color: #f37201; */
    margin-right: 6px; 
    font-size: 0.9em; 
}

/* --- 2. HEADER --- */
.mag-title-wrap h3 {
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa chữ uốn và chữ đứng */
    flex-wrap: wrap;
}

/* 1. Lớp chữ "SIÊU TRUẤT" - Uốn lượn, Luxury */
.m-cursive-luxury {
    font-family: 'MyArizonia', cursive !important;
    font-size: 36px !important; /* To hơn để thấy rõ nét đậm */
    font-weight: 700 !important; /* ÉP ĐẬM TỐI ĐA */
    color: #000000 !important; /* ĐEN TUYỀN */
    
    /* ĐỔ BÓNG NHẸ ĐỂ CHỮ NỔI KHỐI, KHÔNG BỊ BỆT */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    
    display: inline-block;
    line-height: 0.8;
    transform: rotate(-4deg); /* Nghiêng nhẹ cho nghệ thuật */
    margin-right: 10px;
    vertical-align: middle;
}

/* Giữ nguyên cái này để bổ trợ */
.m-spotlight-text {
/* font-family: 'MyRoboto', sans-serif;*/
    font-weight: 900;
    font-size: 38px;
    letter-spacing: -1.5px;
    color: #1e293b;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Fix lỗi hiển thị trên Mobile cho tiêu đề */
@media (max-width: 768px) {
    /* Ép tiêu đề Spotlight xuống 2 dòng cho thoáng */
    .mag-title-wrap h3 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0 !important;
    }

    .m-cursive-luxury {
        font-size: 30px !important;
        transform: none !important;
        margin-bottom: -5px !important;
        display: inline-block !important;
    }

    .m-spotlight-text {
        font-size: 26px !important;
        letter-spacing: -1px !important;
    }

    /* Fix các card bị tràn lề mobile */
    .mag-container-100 {
        padding: 20px 15px !important;
    }
}

.mag-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 50px; 
}
.mag-title-wrap h3 { 
    font-size: 38px; 
    font-weight: 900; 
    letter-spacing: -1.2px; 
    margin: 0; 
}
.mag-title-wrap h3 span { color: var(--primary-color); }
.mag-title-wrap p { 
    color: #94a3b8; 
    font-size: 13px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin-top: 5px; 
}
.mag-btn-more { 
    font-size: 12px; 
    font-weight: 800; 
    color: #1e293b; 
    text-decoration: none; 
    border-bottom: 2px solid var(--primary-color); 
    padding-bottom: 5px; 
    transition: 0.3s;
}
.mag-btn-more:hover { color: var(--primary-color); border-color: #1e293b; }

/* --- 3. GRID LAYOUT CHÍNH (FIX LỖI CÂN ĐỐI) --- */
.mag-top-row { 
    display: flex; 
    gap: 30px; 
    margin-bottom: 30px; 
    align-items: stretch; /* Ép 2 cột bằng nhau */
}
.mag-left { 
    flex: 0 0 65%; 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}
.mag-right { 
    flex: 1; 
    display: flex; 
    min-width: 0; 
}

/* --- 4. HỆ THỐNG BADGES (NHÃN) --- */
.m-badge-left, .m-badge-right { 
    position: absolute; 
    top: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    z-index: 5; 
}
.m-badge-left { left: 20px; }
.m-badge-right { right: 20px; }

.m-badge {
    padding: 6px 14px; 
    border-radius: 50px; 
    font-size: 10px; 
    font-weight: 800;
    text-transform: uppercase; 
    color: #fff; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; 
    align-items: center; 
    gap: 5px; 
    white-space: nowrap;
}

/* Màu Nhãn Trái */
.b-diamond { 
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); 
    position: relative; 
    overflow: hidden;
}
.b-diamond::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: glitter 3s infinite;
}
@keyframes glitter { 0% { left: -100%; } 100% { left: 100%; } }

.b-vip { background: linear-gradient(135deg, #FFD700 0%, #DAA520 100%); color: #000; }
.b-hot { background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%); }

/* Màu Nhãn Phải (Cố định 1 màu sang trọng) */
.b-status { 
    background: rgba(30, 41, 59, 0.75); 
    backdrop-filter: blur(8px); 
    border: 1px solid rgba(255,255,255,0.2); 
}

/* --- 5. CARD STYLE --- */
.m-card { 
    background: #fff; 
    border-radius: 30px; 
    overflow: hidden; 
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative; 
    border: 1px solid #f1f5f9; 
    display: flex; 
    flex-direction: column;
}
.m-card:hover { 
    transform: translateY(-10px); 
    border-color: var(--primary-color); 
    box-shadow: 0 20px 40px rgba(243,114,1,0.12); 
}

/* HERO BOX PHÁ CÁCH */
.m-hero { height: 480px; border: none; flex-direction: row !important; }
.m-img-wrap { width: 90%; height: 100%; border-radius: 30px; overflow: hidden; position: relative; }
.m-img-wrap img, .ms-img img, .mst-img img, .m-poster img { 
    width: 100%; height: 100%; object-fit: cover; transition: 0.8s; 
}
.m-card:hover img { transform: scale(1.08); filter: brightness(0.9); }

.m-capsule-info {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    width: 300px; background: #fff; padding: 35px; border-radius: 35px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12); border: 1px solid #f1f5f9; z-index: 10;
}
.hero-premium-footer { margin-top: 15px; padding-top: 15px; border-top: 1px solid #f1f5f9; }

/* TIN NHỎ & DƯỚI */
.m-small-grid, .mag-bottom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mag-bottom-grid { grid-template-columns: repeat(4, 1fr); margin-top: 30px; }

.ms-img, .mst-img { height: 170px; overflow: hidden; position: relative; }
.ms-body, .mst-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }

/* TYPOGRAPHY */
.m-loc-main { font-size: 16px; font-weight: 900; color: #1e293b; margin-bottom: 8px; text-transform: uppercase; }

/*.ms-loc-text { font-size: 14px; font-weight: 900; color: #1e293b; margin-bottom: 6px; text-transform: uppercase; height: 38px; }*/
.ms-loc-text {
    font-size: 13px !important; font-weight: 800; color: #1e293b;
    margin-bottom: 3px; text-transform: uppercase;
}

/* Placeholder cho ảnh đang load */
.lazyload {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 0.3s;
}

/* ÉP KHUNG CHO THẺ CHỨA ẢNH */
.m-img-wrap, .ms-img, .mst-img, .ed-img-box, .mc-img {
    background-color: #f1f5f9; /* Màu nền xám nhẹ */
    background-image: url('../images/loading-spinner.gif'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px; /* Ép cái spinner chỉ nhỏ 30px thôi */
}

.ms-title-text, .m-title-sub, .mp-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #94a3b8;
    text-overflow: ellipsis;
    height: 36px !important; /* (Dòng 18px * 2) */
    line-height: 18px !important;
    font-size: 12px !important;
    margin-bottom: 10px !important;
}


/* --- 6. FOOTER CHI TIẾT --- */
.new-card-footer { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-top: auto; padding-top: 15px; border-top: 1px solid #f1f5f9; 
}
.footer-price, .h-price, .p-price { font-weight: 900; color: var(--primary-color); }
/*.footer-price { font-size: 18px; }*/
.h-price { font-size: 24px; margin-bottom: 10px; }
.p-price { font-size: 28px; color: #ff9d4d; margin-bottom: 12px; }
span.unit { font-size: 0.6em; color: #94a3b8; font-weight: 600; margin-left: 2px; }

.footer-specs, .h-specs, .p-specs { display: flex; gap: 8px; color: #64748b; font-size: 11px; font-weight: 700; }
.footer-specs span, .h-specs span, .p-specs span { 
    background: #f8fafc; padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 5px; 
}
.footer-specs i, .h-specs i, .p-specs i { color: var(--primary-color); }

/* --- 7. TIN PHẢI (THE POSTER) --- */
.m-poster { height: 100% !important; flex: 1; border: none; }
.m-poster-content {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(30, 41, 59, 0.95) 15%, transparent 60%);
    display: flex; align-items: flex-end; padding: 30px; box-sizing: border-box;
}
.mp-box {
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2); padding: 35px; border-radius: 35px;
    width: 100%; text-align: center; color: #fff;
}
.mp-loc { font-size: 18px; font-weight: 900; text-transform: uppercase; margin-bottom: 10px; color: #fff !important; }
.mp-loc i { color: #ff9d4d !important; }
.p-specs { justify-content: center; color: #fff; }
.p-specs span { background: rgba(255,255,255,0.1); }
.p-specs i { color: #ff9d4d; }

/* --- 8. RESPONSIVE --- */

@media (max-width: 1024px) {
    .mag-top-row, .m-small-grid, .mag-bottom-grid { display: block; }
    .m-card { margin-bottom: 30px; height: auto !important; }
    .m-hero { flex-direction: column !important; }
    .m-img-wrap { width: 100%; height: 400px; }
    .m-capsule-info { position: relative; width: 100%; top: 0; transform: none; margin-top: -35px; border-radius: 0 0 35px 35px; }
    .m-poster { height: 500px !important; }
    .mag-bottom-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .mag-bottom-grid { grid-template-columns: 1fr; }
    .mag-title-wrap h3 { font-size: 28px; }
}

/* --- PHONG CÁCH TỐI ƯU MẬT ĐỘ TIN (HIGH DENSITY) --- */
.compact-grid-triple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.compact-column {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các tin trong 1 cột */
}

/* Card Siêu Gọn */
.m-card-compact {
    display: flex;
    background: #fff;
    border-radius: 15px;
    padding: 10px;
    border: 1px solid #f1f5f9;
    transition: 0.3s ease;
    height: 110px; /* Cố định chiều cao thấp để show được nhiều tin */
    align-items: center;
}

.m-card-compact:hover {
    border-color: var(--primary-color);
    transform: translateX(5px); /* Hiệu ứng nhích nhẹ sang phải thay vì bay lên */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Container Grid */
.grid-quan-tam-responsive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Thẻ A bao ngoài */
.compact-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

/* Card phiên bản mới */
.m-card-compact-v2 {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #f1f5f9;
    transition: 0.3s ease;
    height: 135px; /* Tăng chiều cao một chút để chứa đủ text 2 dòng */
    align-items: flex-start;
}

.m-card-compact-v2:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transform: translateX(5px);
}

/* Ảnh tỷ lệ 16:9 */
.mc-img-169 {
    flex: 0 0 130px; /* Độ rộng ảnh */
    height: 73px;    /* 130 * 9 / 16 = ~73px để ra đúng tỷ lệ 16:9 */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
    margin-top: 5px;
}

.mc-img-169 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body nội dung */
.mc-body-v2 {
    flex: 1;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Fix lỗi text tràn khung flex */
}

/* Fix lỗi địa chỉ hiển thị 2 dòng */
.qt-loc-text {
    font-size: 13px !important;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 3px !important;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Hiện tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 36px; /* 13px * 1.4 * 2 = ~36px */
}
.qt-loc-text i { color: var(--primary-color); margin-right: 4px; }

/* Fix lỗi tiêu đề hiển thị 2 dòng */
.qt-title-text {
    font-size: 12px !important;
    color: #94a3b8;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 34px;
    margin-bottom: 5px;
}

/* Footer (Giá & Specs) */
/* --- RESET CARD QUAN TÂM --- */
.m-card-compact-v2 {
    display: flex !important;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #f1f5f9;
    height: 125px !important; /* Chiều cao cố định cho cả hàng đều nhau */
    align-items: stretch; /* Ép body cao bằng ảnh */
    overflow: hidden;
}

/* --- ẢNH 16:9 CHUẨN --- */
.mc-img-169 {
    flex: 0 0 130px !important;
    height: 100% !important; /* Cao bằng card */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
}
.mc-img-169 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- BODY NỘI DUNG --- */
.mc-body-v2 {
    flex: 1;
    padding-left: 12px;
    display: flex !important;
    flex-direction: column !important; /* Sắp xếp theo chiều dọc */
    justify-content: space-between !important; /* Đẩy text lên trên, footer xuống dưới */
    min-width: 0;
}

/* Text wrap */
.mc-text-wrap {
    display: block;
}

/* ĐỊA CHỈ (Ép 2 dòng) */
.qt-loc-text {
    font-size: 13px !important;
    font-weight: 800;
    line-height: 1.3;
    color: #1e293b;
    margin: 0 0 4px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 34px !important; /* Chiều cao cố định cho 2 dòng */
}

/* TIÊU ĐỀ (Ép 1 dòng cho thoáng vì card này nhỏ) */
.qt-title-text {
    font-size: 12px !important;
    color: #94a3b8;
    display: -webkit-box !important;
    -webkit-line-clamp: 1; /* Để 1 dòng cho đỡ chật card */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 18px !important;
}

/* --- FOOTER: ĐỊNH VỊ CHUẨN ĐÁY --- */
.mc-footer-v2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px;
    border-top: 1px dashed #eee;
    margin-top: 5px;
}

.qt-price {
    color: var(--primary-color);
    font-weight: 900;
    font-size: 15px;
}
.qt-price small { font-size: 10px; color: #94a3b8; font-weight: 400; }

.qt-specs {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: #64748b;
}
/* Responsive */
@media (max-width: 1024px) {
    .grid-quan-tam-responsive { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .grid-quan-tam-responsive { grid-template-columns: 1fr; }
    .m-card-compact-v2 { height: auto; min-height: 130px; }
}

/* Ảnh vuông nhỏ */
.mc-img {
    flex: 0 0 90px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.mc-img img { width: 100%; height: 100%; object-fit: cover; }

/* Nội dung tinh giản */
.mc-body {
    flex: 1;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}


/* Footer mini */
.mc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mc-price { font-size: 16px; font-weight: 900; color: #1e293b; }
.mc-price small { font-size: 10px; color: #94a3b8; font-weight: 400; }

.mc-specs { display: flex; gap: 10px; font-size: 10px; color: #94a3b8; }
.mc-specs i { color: var(--primary-color); }



/* --- CSS RIÊNG CHO KHU VỰC QUAN TÂM (KHÔNG LỖI CHỖ KHÁC) --- */
.grid-quan-tam-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
@media (min-width: 1024px) {
    .grid-quan-tam-responsive { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.m-card-compact {
    display: flex; background: #fff; border-radius: 15px; padding: 10px;
    border: 1px solid #f1f5f9; transition: 0.3s ease; height: 110px; align-items: center;
}
.mc-img { flex: 0 0 90px; height: 90px; border-radius: 12px; overflow: hidden; position: relative; }
.mc-body { flex: 1; padding-left: 15px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }

* Tablet: 2 cột */
@media (min-width: 768px) {
    .compact-grid-responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Desktop: 3 cột */
@media (min-width: 1024px) {
    .compact-grid-responsive {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    .mc-img {
        flex: 0 0 95px;
        height: 95px;
    }
    .ms-title-text { font-size: 14px; }
}

/* Mobile nhỏ: Điều chỉnh nút khám phá */
@media (max-width: 480px) {
    .mag-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .mag-btn-more {
        width: 100%;
        text-align: center;
        font-size: 11px;
    }
}


/* Badges siêu nhỏ (Chỉ hiện chữ cái đầu để tiết kiệm chỗ) */
.m-badge-mini {
    position: absolute; top: 5px; left: 5px;
    width: 20px; height: 20px;
    border-radius: 5px; color: #fff; font-size: 9px;
    display: flex; align-items: center; justify-content: center; font-weight: 900;
}
.b-diamond { background: #00d2ff; }
.b-vip { background: #daa520; }
.b-hot { background: #ff416c; }

/* Button chuẩn cam */
.mag-btn-more-standard {
    border: 2px solid var(--primary-color); padding: 10px 30px; border-radius: 50px;
    background: transparent; font-weight: 800; color: #1e293b; cursor: pointer;
}

/* Mobile */
@media (max-width: 1024px) {
    .compact-grid-triple { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .compact-grid-triple { grid-template-columns: 1fr; }
}

/* --- SETUP NỀN TẢNG --- */
.luxury-editorial { 
    padding: 40px 0; 
    background: #fff; 
}
.mag-container-100 { 
    width: 100%; 
    padding: 40px 100px; 
    box-sizing: border-box; }

/* Header */
.mag-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.mag-title-wrap h3 { font-size: 32px; font-weight: 800; margin: 0; letter-spacing: -1px; }
.mag-title-wrap h3 span { color: var(--primary-color); }
.mag-title-wrap p { color: #94a3b8; font-size: 14px; margin-top: 5px; }

/* GRID 4 CỘT */
.editorial-grid-v4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 25px;
}

/* CARD ĐÓNG KHUNG & ĐỔ BÓNG */
.ed-card { 
    background: #fff; 
    border-radius: 24px; 
    border: 1px solid #f1f5f9; 
    padding: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.ed-card:hover { 
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(243, 114, 1, 0.12);
}

/* Ảnh */
.ed-img-box {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 15px;
}
.ed-img-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; }
.ed-card:hover img { transform: scale(1.1); }

/* Specs lơ lửng */
.ed-specs-top {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 10px;
    display: flex; gap: 10px;
    font-size: 10px; font-weight: 700; color: #1e293b;
}
.ed-specs-top i { color: var(--primary-color); }

/* Badge Diamond */
.ed-badge-left { position: absolute; top: 10px; left: 10px; }
.ed-badge { 
    padding: 4px 10px; border-radius: 6px; font-size: 9px; font-weight: 800; 
    text-transform: uppercase; color: #fff;
}
.b-diamond { background: var(--primary-color); box-shadow: 0 4px 12px rgba(243, 114, 1, 0.2); }

/* --- TYPOGRAPHY ĐỒNG BỘ SPOTLIGHT (2 DÒNG) --- */
.ed-body { padding: 5px; flex-grow: 1; display: flex; flex-direction: column; }

/* VỊ TRÍ: TO, ĐẬM, 2 DÒNG */
.ed-loc-v4 { 
    font-size: 15px !important; 
    font-weight: 900; 
    color: #1e293b; 
    margin: 0 0 8px 0; 
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Ép 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 42px; /* Giữ khung cố định cho 2 dòng */
    line-height: 1.4;
}
.ed-loc-v4 i { color: var(--primary-color); margin-right: 4px; }

/* TIÊU ĐỀ: NHỎ, 2 DÒNG */
/*.ed-title-v4 { 
    font-size: 12px !important; 
    font-weight: 400; 
    color: #94a3b8; 
    margin: 0; 
    line-height: 1.5;
    display: -webkit-box; 
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden;
    height: 36px;
}*/

/* Footer & Giá Cam */
.ed-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-top: 1px dashed #eee;
    margin-top: auto; /* Đẩy footer xuống đáy card */
    padding-top: 15px; 
}
.ed-price { font-size: 19px; font-weight: 900; color: var(--primary-color); letter-spacing: -0.5px; }
.unit { font-size: 11px; color: #94a3b8; font-weight: 500; }
.ed-status { font-size: 10px; font-weight: 700; color: #1e293b; text-transform: uppercase; opacity: 0.5; }

/* Nút Load More */
.ed-load-more {
    background: #1e293b; color: #fff; border: none;
    padding: 12px 45px; border-radius: 50px;
    font-weight: 700; cursor: pointer; transition: 0.3s;
}
.ed-load-more:hover { background: var(--primary-color); transform: translateY(-3px); }

/* Responsive */
@media (max-width: 1200px) {
    .mag-container-100 { padding: 0 40px; }
    .editorial-grid-v4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .editorial-grid-v4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .editorial-grid-v4 { grid-template-columns: 1fr; }
    .mag-container-100 { padding: 0 15px; }
}

/* --- BANNER GROUP: HIỆU ỨNG CAO CẤP --- */
.banner-group { 
/* padding: 40px 0; */
    background: #fff; 
}

.banner-wrapper { 
    display: flex; 
    gap: 25px; 
    align-items: center; 
    justify-content: center;
}

/* KHUNG NGOÀI */
.banner-item {
    flex: 1;
    height: 250px !important; 
    border-radius: 20px;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    background: #f8fafc;
    position: relative;
    /* Hiệu ứng mượt mà khi di chuột */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}

/* Ô GIỮA TO */
.banner-item:nth-child(2) {
    flex: 1.6;
    height: 320px !important; 
}

.banner-link-box {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
}

/* HIỆU ỨNG ẢNH */
.banner-link-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important; 
    display: block !important;
    /* Chuyển động scale của ảnh */
    transition: transform 0.6s ease;
}

/* --- HIỆU ỨNG KHI HOVER (DI CHUỘT VÀO) --- */

.banner-item:hover {
    /* Nhấc khung lên nhẹ */
    transform: translateY(-8px); 
    /* Đổi màu viền sang cam thương hiệu */
    border-color: var(--primary-color); 
    /* Đổ bóng mịn */
    box-shadow: 0 20px 40px rgba(243, 114, 1, 0.15); 
}

.banner-item:hover img {
    /* Phóng to ảnh nhẹ nhàng */
    transform: scale(1.05); 
}

/* LỚP ÁNH KIM LƯỚT QUA (SHINE EFFECT) */
.banner-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    transition: 0.7s;
}

.banner-item:hover::after {
    left: 150%;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .banner-item { height: 200px !important; }
    .banner-item:nth-child(2) { height: 260px !important; }
}

@media (max-width: 768px) {
    .banner-wrapper { flex-direction: column; gap: 20px; }
    .banner-item, .banner-item:nth-child(2) { 
        width: 100%; flex: none; height: 220px !important; 
    }
}




/* --- EXPERIENCE --- tin tuc */
.experience-section {
    width: 100%;
    padding: 60px 100px; 
    background: #fff;
    box-sizing: border-box; 
}
.section-title { font-size: 28px; font-weight: 700; color: #222; margin-bottom: 30px; }
.filter-tabs {
    display: flex;
    justify-content: flex-start; /* Hoặc center nếu bạn muốn căn giữa */
    gap: 10px;
    padding: 15px;
    overflow-x: auto; /* Cho phép vuốt ngang nếu quá nhiều tab trên đt nhỏ */
    scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */
}

.filter-tabs::-webkit-scrollbar {
    display: none; /* Ẩn thanh cuộn trên Chrome/Safari */
}
.tab-btn {
    padding: 8px 20px;
    border-radius: 50px; /* Ép bo tròn hình viên thuốc */
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap; /* Quan trọng: Giữ chữ trên 1 hàng, không cho xuống dòng */
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px; /* Đảm bảo các nút có độ rộng tối thiểu bằng nhau */
}
.tab-btn.active { 
     background: var(--primary-color); /* Màu cam thương hiệu của bạn */
    color: #fff;
    border-color: var(--primary-color);
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px;
    margin-bottom: 50px;
}
.news-card { 
    display: flex; 
    flex-direction: column; 
    text-decoration: none; 
    transition: all 0.3s ease;

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



.news-img { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; margin-bottom: 15px; }
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
.news-title { font-size: 16px; font-weight: 700; color: #222; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-excerpt { font-size: 13px; color: #777; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Nút Xem thêm: Chỉ đóng vai trò là link dẫn trang */
.load-more-container_news {
    text-align: center;
    margin-top: 30px;
}

.btn-view-more_news {
    position: relative;
    display: inline-block;
    padding: 12px 40px;
    background: transparent; /* Nền trong suốt để lộ lớp dưới */
    color: #888; /* Màu chữ mặc định */
    border: 2px solid #888; /* Border mặc định */
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden; /* Để lớp fill không tràn ra ngoài border */
    transition: all 0.4s ease;
    z-index: 1;
    border-radius: 5px;
}
/* Lớp nền màu cam sẽ chạy từ trái qua */
.btn-view-more_news:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Mặc định nằm ngoài cùng bên trái */
    width: 100%;
    height: 100%;
    background: var(--primary-color); /* Màu cam thương hiệu CHOTHUETOT */
    transition: all 0.4s ease;
    z-index: -1; /* Nằm dưới chữ */
}
.btn-view-more_news:hover {
   color: #fff; /* Chữ chuyển sang trắng cho nổi */
    border-color: var(--primary-color); /* Border cũng chuyển cam */
}
.btn-view-more_news:hover:before {
    left: 0; /* Tràn màu cam vào đầy khung */
}
/* --- INTRO TEXT --- */
.text-intro-section {
    width: 100%;
    padding: 60px 100px; 
    background: #fff;
    box-sizing: border-box;
}
.intro-wrapper { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.intro-text { font-size: 16px; color: #888; line-height: 1.8; margin-bottom: 30px; text-align: justify; }
/*.btn-read-more { padding: 8px 30px; background: transparent; border: 1.5px solid #000; border-radius: 30px; font-size: 14px; font-weight: 600; color: #000; cursor: pointer; transition: 0.3s ease; }*/
/* Chiều cao khi thu gọn: Hiện khoảng 3-4 đoạn đầu */
.seo-description.collapsed {
    max-height: 250px; 
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s ease;
}

/* Lớp phủ mờ đáy */
.seo-description.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.seo-description.expanded {
    max-height: 10000px; /* Số cực lớn để bung hết bài text dài của ông */
    transition: max-height 1s ease;
}

.seo-description.expanded::after {
    display: none;
}

.btn-read-more {
    background: transparent;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 25px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-read-more:hover {
    background: var(--primary-color);
    color: #fff;
}
/* --- PROMO BANNER --- */
.promo-banner-section {
    width: 100%;
    min-height: 450px;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),  
                url('/assets/images/bg_banner.jpg'); 
    background-size: cover;
    background-position: center;
    padding: 0 100px; 
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}
.banner-container { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.banner-left-content { flex: 0 0 60%; }
.banner-title { font-size: 38px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 20px; }
.banner-title span { color: var(--primary-color); }
.banner-note { font-size: 13px; color: #ccc; font-style: italic; margin-bottom: 40px; }
.contact-boxes { display: flex; gap: 20px; }
.contact-item { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 15px 25px; display: flex; align-items: center; gap: 15px; color: #fff; }
.contact-icon { font-size: 24px; color: #fff; opacity: 0.9; }
.contact-info strong { font-size: 18px; display: block; }
.banner-right-mockup { flex: 0 0 40%; display: flex; justify-content: flex-end; }
.banner-right-mockup img { max-width: 120%; height: auto; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); }

/* --- FOOTER --- */
.main-footer { width: 100%; background: #fff; border-top: 1px solid #eee; }
.footer-container {
    padding: 60px 100px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer-col h4 { font-size: 18px; font-weight: 700; margin-bottom: 25px; color: #333; }
.footer-col p { color: #777; font-size: 0.8rem; line-height: 1.8; }
.footer-logo { width: 245px; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 10px; margin-top: 20px; }
.footer-socials a { width: 35px; height: 35px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #aaa; transition: 0.3s; }
.footer-socials a:hover { background: var(--primary-color); color: #fff; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { 
    font-size: 0.85rem; color: #666; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px; }
.footer-col ul li i { color: var(--primary-color); margin-top: 3px; }
.links-grid { display: flex; gap: 40px; }
.newsletter-form input { width: 100%; border: none; border-bottom: 1px solid #ddd; margin: 20px 0; outline: none; }
.newsletter-form button { background: var(--primary-color); color: #fff; border: none; padding: 4px 15px; border-radius: 4px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.footer-socket { background: #1a1e23; padding: 20px 100px; position: relative; }
.socket-container { display: flex; justify-content: space-between; align-items: center; }
.footer-socket p { color: #fff; font-size: 13px; margin: 0; }
.footer-socket p span { color: var(--primary-color); font-weight: 700; }
.footer-menu { list-style: none; display: flex; gap: 25px; margin: 0; }
.footer-menu a { color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; opacity: 0.8; transition: 0.3s; }
.footer-menu a.active, .footer-menu a:hover { color: var(--primary-color); opacity: 1; }


.sitemap-header {
    background: #fff;
    padding: 60px 0;
    border-bottom: 1px solid #edf2f7;
    border-radius: 0 0 40px 40px;
}

.sitemap-container {
    padding: 50px 0;
}

.sitemap-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.sitemap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(243, 114, 1, 0.1);
}

.sitemap-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #fff9f4;
    padding-bottom: 10px;
}

.sitemap-title i {
    color: var(--primary-color);
    margin-right: 12px;
    font-size: 1.4rem;
}

.sitemap-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-links li {
    margin-bottom: 12px;
}

.sitemap-links a {
    color: #64748b;
    text-decoration: none;
    transition: 0.2s;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

.sitemap-links a i {
    font-size: 0.7rem;
    margin-right: 10px;
    opacity: 0.5;
}

.sitemap-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.text-gradient {
    background: linear-gradient(90deg, var(--primary-color), #ff9a44);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
/* --- HIỆU ỨNG CHỚP NHÁY CHO NÚT BACK TO TOP --- */

.go-to-top {
    position: fixed !important;
    right: 20px;
    bottom: 20px;
    /* ẨN MẶC ĐỊNH */
    opacity: 0;
    visibility: hidden;
    
    width: 45px;
    height: 45px;
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    
    /* HIỆU ỨNG HIỆN LÊN MƯỢT MÀ */
    transition: all 0.4s ease-in-out;
    animation: pulse-orange 2s infinite;
}

/* Class này sẽ được JS thêm vào khi cuộn xuống */
.go-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Định nghĩa hiệu ứng chớp nháy lan tỏa */
@keyframes pulse-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(243, 114, 1, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(243, 114, 1, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(243, 114, 1, 0);
    }
}

/* Hiệu ứng khi di chuột vào (Hover) */
.go-to-top:hover {
    background-color: #333 !important; /* Đổi sang màu đen hoặc màu khác khi hover */
    animation: none; /* Tắt chớp nháy khi người dùng đang định bấm */
    transform: translateY(-5px); /* Nhảy nhẹ lên trên */
}

/* --- SEO LINKS --- */
.seo-links-section {
    width: 100%;
    padding: 60px 100px; 
    background: #fff;
    box-sizing: border-box;
    border-top: 1px solid #f0f0f0;
}
.seo-container { width: 100%; }
.seo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px;
    margin-bottom: 50px;
}
.seo-col h4 { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 15px; }
.seo-col ul { list-style: none; padding: 0; margin: 0; }
.seo-col ul li { margin-bottom: 10px; }
.seo-col ul li a { text-decoration: none; font-size: 14px; color: #555; display: flex; align-items: center; justify-content: flex-start; gap: 5px; transition: 0.2s; }
.seo-col ul li a i { font-size: 10px; color: #bbb; margin-top: 2px; }
.seo-col ul li a:hover { color: var(--primary-color); }
.view-more-red { display: inline-block; margin-top: 5px; color: #d93025; font-size: 14px; text-decoration: none; font-weight: 500; }


.note-side-mobile { display: none; }

/* ==========================================================================
   PHẦN GOM NHÓM RESPONSIVE (DÀNH CHO TABLET & MOBILE)
   ========================================================================== */

/* Ẩn nút 3 gạch vì bạn muốn hiện Menu trực tiếp */
.menu-mobile-btn { display: none !important; }

@media (max-width: 1024px) {
    /* 1. TINH CHỈNH HEADER */
    /* 1. ĐIỀU KHIỂN ẨN/HIỆN */
    .note-side { display: none !important; } /* Ẩn bản có <br> */
    .note-side-mobile { 
        display: block; /* Hiện bản 1 hàng */
        font-size: 10px !important;
        color: #888;
        text-align: center;
        white-space: nowrap;
        margin-top: -3px;
    }

    .site-header { 
       border-radius: 0 0 30px 30px !important; /* Giảm độ bầu của nền trắng */
        padding: 8px 0 0 0 !important; /* Xóa padding bottom thừa */
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .header-top-row { 
        height: auto !important; 
        display: flex !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        gap: 10px; 
    }
    
    /* Thu nhỏ logo */
    .logo-box { margin-left: 0 !important; }
    .logo-box img { width: 160px !important; } 

    /* ÉP CHỮ "KHÔNG CẦN ĐĂNG NHẬP" XUỐNG DƯỚI NÚT */
    .btn-post-group { 
        flex-direction: column !important; /* Chuyển sang hàng dọc */
        align-items: center !important; 
        gap: 5px !important; 
    }
    .btn-main { 
           height: 45px;           /* Ép chiều cao đúng 30px như ý bạn */
            padding: 0 70px;   /* Tăng chiều dài bằng cách nới rộng padding trái phải */

/* padding: 6px 15px !important; */
        font-size: 15px; 
        border-radius: 10px !important; 
    }
    .btn-main .italic { font-size: 15px; margin-right: 5px ; }

    /* Thu nhỏ khu vực Đăng Nhập */
    .auth-box { margin-right: 0 !important; }
    .login-wrapper strong { font-size: 14px !important; }
    .login-wrapper p { font-size: 9px !important; }

    /* 2. HIỆN THANH MENU TRỰC TIẾP NHƯ PC */
    .nav-container { 
        display: block !important; 
        width: 100% !important; 
        margin-top: 10px !important; 
        border-top: 1px solid #f2f2f2 !important;
        padding-top: 2px !important;
    }
    .nav-list { 
        display: flex !important; 
        justify-content: center !important; 
        flex-wrap: wrap !important; 
        gap: 8px 12px !important; 
    }
    .nav-list > li { margin: 0 !important; padding-bottom: 5px !important; }
    .nav-list a { font-size: 11px !important; white-space: nowrap !important; }

    /* 3. Chống tràn trang và lề 100px */
    .experience-section, .text-intro-section, .promo-banner-section, .footer-container, .footer-socket, .seo-links-section, .container {
        padding-left: 15px !important; padding-right: 15px !important; width: 100% !important; max-width: 100vw !important;
    }
    .property-info-bottom-left { width: 90% !important; margin: 0 !important; border-radius: 0 !important; }
    .hero-wrapper { margin-top: -120px !important; }
}

@media (max-width: 768px) {
    /* 4. MOBILE: ÉP NHỎ TỐI ĐA */
    .logo-box img { width: 100px !important; }
    .note-side-mobile { display: none; }
    .btn-main { 
        gap: 2px;
        height: 25px !important;           /* Ép chiều cao đúng 30px như ý bạn */
         padding: 0 10px !important;   /* Tăng chiều dài bằng cách nới rộng padding trái phải */
        font-size: 10px !important; 
    }
    .btn-main .italic { 
        font-size: 12px !important; 
    }
   .btn-post-group { 
        flex-direction: column !important; /* Chuyển sang hàng dọc */
        align-items: center !important; 
        gap: 1px !important; 

    }
    /* Ẩn dòng tin nhắn phụ của Đăng nhập cho đỡ chật, chỉ giữ strong */
    .auth-icon-circle i {
        font-size: 16px;
        color: var(--primary-color); /* Màu cam thương hiệu CHOTHUETOT */
        transition: all 0.3s ease;
    }
    .login-wrapper p { display: none !important; }
    .login-wrapper strong { font-size: 10px !important; }

.nav-list {
        display: flex !important;
        flex-wrap: nowrap !important; /* KHÔNG cho xuống dòng */
        justify-content: center !important; /* Căn từ trái qua */
        gap: 10px !important; /* Thu nhỏ khoảng cách giữa các chữ */
        padding: 5px 10px !important;
        scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */
    }

 

    .nav-list > li {
        margin: 0 !important;
        padding-bottom: 2 !important;
        flex: 0 0 auto !important; /* Giữ kích thước chữ tự nhiên */
    }

    .nav-list a {
        font-size: 10px !important; /* Thu nhỏ chữ một chút để vừa màn hình */
        white-space: nowrap !important; /* ÉP chữ không được xuống dòng */
        letter-spacing: -0.3px !important; /* Ép khít các ký tự lại */
    }

 

    .featured-grid, .news-grid, .banner-wrapper, .seo-grid, .footer-container { display: block !important; }
    .card-item { width: 100% !important; margin-bottom: 20px !important; height: auto !important; }
    html, body { overflow-x: hidden !important; position: relative !important; }
}

/*/////////////////////////////// phan hero-wrapper*/

/* ==========================================================================
   FIX TRIỆT ĐỂ: SEARCH GIỐNG PC - HIỆN RÕ ẢNH - TEXT CĂN THẲNG LOC
   ========================================================================== */

/* ==========================================================================
   FIX CHUẨN: HIỆN THANH SEARCH - HIỆN RÕ ẢNH - TEXT THẲNG HÀNG
   ========================================================================== */

@media (max-width: 1024px) {
    /* 1. HIỆN THANH SEARCH: Ép nó nổi lên trên tất cả slide */
    .hero-wrapper {
        position: relative !important;
        overflow: visible !important; /* Quan trọng: để thanh search không bị cắt */
    }

    /* --- SEARCH --- */
.search-top-fixed {
        position: absolute !important; 
        top: 185px !important; /* Giữ đúng con số bạn đã fix */
        width: 100% !important;
        left: 0 !important;
        z-index: 9999 !important;
        display: block !important;
    }

    /* Thu nhỏ khung trắng */
    .search-bar-white {
        background: #fff !important; 
        max-width: 300px !important; /* ÉP NHỎ LẠI TẠI ĐÂY */
        margin: 0 auto !important; /* Căn giữa màn hình */
        display: flex !important; 
        padding: 8px !important; /* Giảm padding cho gọn */
        border-radius: 50px !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
    }

    /* Giữ nguyên input nằm trước */
    .search-bar-white input { 
        flex: 1 !important; 
        border: none !important; 
        padding: 0 15px !important; /* Thu nhỏ khoảng cách */
        outline: none !important; 
        font-size: 14px !important; /* Hạ size chữ cho cân đối khung nhỏ */
    }

    /* Giữ nguyên button nằm sau */
    .search-bar-white button { 
        background: none !important; 
        border: none !important; 
        color: var(--primary-color) !important; 
        font-size: 20px !important; /* Thu nhỏ icon chút cho đỡ thô */
        padding-right: 10px !important;
        cursor: pointer !important; 
    }

    /* 2. HIỆN RÕ ẢNH: Chỉ phủ đen mờ cực thấp ở đáy */
    .property-info-bottom-left {
        width: 100% !important;
        padding: 20px 0 50px 0 !important;
        margin-left: 0 !important;
        /* Giảm độ mờ để ảnh trong trẻo hơn */
        background: linear-gradient(to right, #3d3d3d 0%, rgba(220, 217, 212, 0) 100%);
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* 3. ICON THỤT 10PX - TEXT CĂN THEO CHỮ CỦA LOC */
    .property-info-bottom-left .loc-pin {
        margin-left: 10px !important; 
        display: flex !important;
        gap: 8px !important;
        font-size: 18px !important;
        align-items: center !important;
    }

    .property-info-bottom-left h2,
    .property-info-bottom-left .price-row {
        margin-left: 40px !important; 
        width: calc(100% - 40px) !important;
        text-align: left !important;
    }


    .property-info-bottom-left h2 {
        font-size: 17px !important;
        margin-top: 4px !important;
    }

    .property-info-bottom-left .price-row {
        justify-content: flex-start !important;
        margin-top: 10px !important;
        height: 40px !important;
        width: 260px !important;
    }

    .property-info-bottom-left .meta-row {
        gap: 30px !important;
        margin-bottom: 30px !important;
        margin-left: 50px !important; 
        margin-top: -13px !important; 
    }

    /* 4. NÚT TRÒN SLIDE NHỎ LẠI */
    .hero-swiper .swiper-pagination-bullet {
        width: 5px !important;
        height: 5px !important;
        background: #fff !important;
    }
}

/*/////////////////////// phan spotlight*/



/*///////////////////////////////////////// tin tuc*/
/* TABLET: Hiện 3 tin mỗi hàng (2 hàng là 6 tin) */
/* Tablet: 3 cột, hiện tối đa 2 hàng (6 tin) */
@media (max-width: 1023px) {
    .news-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 15px !important;
        padding: 0 15px !important;
    }
    
    .news-card {
        display: block; /* Mặc định hiện để JS điều khiển */
        height: auto !important;
    }
}

/* Mobile: 1 cột dọc */
@media (max-width: 767px) {
    .news-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px !important;
    }
}

/* Hiệu ứng khi lọc cho mượt */
.news-card.filtering {
    animation: fadeInNews 0.4s ease forwards;
}

@keyframes fadeInNews {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/*///bennet protion*/

/* --- FIX PROMO BANNER CHO TABLET & MOBILE --- */

/* --- THỐNG NHẤT BREAKPOINT: TABLET 1024px | MOBILE 767px --- */

/* 1. DÀNH CHO TABLET (Từ 768px đến 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .banner-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* Giữ hình bên phải nhưng thu nhỏ lại */
    .banner-right-mockup {
        display: block !important;
        flex: 0 0 40% !important;
    }

    .banner-right-mockup img {
        max-height: 300px !important;
        width: auto !important;
    }

    /* Co nhỏ contact-boxes cho vừa hàng ngang */
    .contact-item {
        padding: 10px !important;
        gap: 8px !important;
    }
    
    .contact-info strong {
        font-size: 12px !important;
    }
}

/* 2. DÀNH CHO MOBILE (Dưới 767px) */
@media (max-width: 767px) {
    /* ẨN HÌNH BÊN PHẢI THEO YÊU CẦU */
    .banner-right-mockup {
        display: none !important;
    }

    .banner-left-content {
        width: 100% !important;
        padding: 0 !important;
    }

    /* ÉP 2 Ô CONTACT NẰM NGANG, KHÔNG XUỐNG HÀNG */
    .contact-boxes {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .contact-item {
        flex: 1 !important;
        padding: 8px !important;
        min-width: 0 !important; /* Quan trọng để không đẩy khung */
    }

    .contact-icon {
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }

    /* Ép font nhỏ để không vỡ hàng ngang trên điện thoại */
    .contact-info span {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .contact-info strong {
        font-size: 10px !important;
        white-space: nowrap !important;
    }
}

/*///////////////////////// footer*/

/* 1. DÀNH CHO TABLET (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .footer-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 20px !important;
        padding: 40px 15px !important;
    }
    
    /* Giữ nguyên các cột trên Tablet */
    .footer-col {
        display: block !important;
    }
}

/* 2. DÀNH CHO MOBILE (Dưới 767px) */
@media (max-width: 767px) {
    /* Container chính */
    .newsletter-form {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
        height: 42px !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        /* Bo góc tổng thể nếu bạn muốn cả khối vẫn bo nhẹ */
        border-radius: 5px !important; 
        overflow: hidden !important;
    }

    /* Ô Input bên trái */
    .newsletter-form input {
        flex: 1 !important;
        height: 100% !important;
        border: none !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        /* Bỏ bo góc hoàn toàn để dính vào button bên phải */
        border-radius: 0 !important; 
        margin: 0 !important;
        outline: none !important;
    }

    /* Nút Cảm ơn bên phải */
    .newsletter-form button {
        flex: 0 0 auto !important;
        height: 100% !important;
        padding: 0 15px !important;
        background: var(--primary-color) !important;
        color: #fff !important;
        border: none !important;
        font-size: 13px !important;
        font-weight: bold !important;
        
        /* CHỈ BO GÓC BÊN PHẢI THEO Ý BẠN */
        border-radius: 0 5px 5px 0 !important; 
        
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .footer-socket .footer-menu {
        display: none !important;
    }

   .footer-socket .socket-container {
        display: flex !important;
        justify-content: flex-start !important; /* Đẩy sang trái */
        text-align: left !important; /* Chữ căn trái */
        padding: 15px 50px 15px 15px !important; /* Padding phải 50px để chừa chỗ cho nút Top */
    }

    .footer-socket p {
        font-size: 11px !important;
        margin: 0 !important;
        white-space: normal !important; /* Cho phép xuống dòng nếu tên quá dài */
    }


}