/* =========================================
   DETAIL PAGE - CSS CHÍNH (DESKTOP)
   ========================================= */

/* 1. HERO SECTION */
.nomad-detail-hero {
    background-color: var(--color-light, #F5F7F9);
    padding: 60px 0 100px 0; /* padding bottom chừa chỗ cho floating bar */
    position: relative;
    border-bottom: 1px solid var(--color-silver, #DDE1E5);
}

.nomad-breadcrumb {
    font-size: 13px;
    color: var(--color-gray, #667085);
    margin-bottom: 24px;
}
.nomad-breadcrumb a { color: var(--color-gray, #667085); text-decoration: none; }
.nomad-breadcrumb a:hover { color: var(--color-primary, #FF4D2E); }

.nomad-detail-hero__title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--color-text, #101214);
}
.nomad-text-highlight { display: block; color: var(--color-primary, #FF4D2E); }

.nomad-detail-hero__desc {
    font-size: 16px;
    color: var(--color-gray, #667085);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 90%;
}

.nomad-detail-hero__meta { display: flex; flex-wrap: wrap; gap: 20px; }
.nomad-detail-hero__meta span {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500;
}
.nomad-detail-hero__meta svg { color: var(--color-gray, #667085); }

.nomad-detail-hero__media { position: relative; width: 100%; }
.nomad-detail-hero__media img { width: 100%; object-fit: cover; }
.nomad-play-btn {
    position: absolute; bottom: 24px; right: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    color: white; border: none; padding: 12px 20px;
    border-radius: 40px; font-weight: 600; font-size: 14px; cursor: pointer;
}

/* BOOKING BAR (Floating Desktop) */
.nomad-booking-bar {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1000px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px;
    z-index: 10;
}
.nomad-booking-bar__price span, .nomad-booking-bar__date span {
    font-size: 14px; color: var(--color-gray, #667085); display: block; margin-bottom: 4px;
}
.nomad-booking-bar__price strong {
    font-size: 32px; font-weight: 800; color: var(--color-text, #101214);
}
.nomad-booking-bar__date {
    border-left: 1px solid var(--color-silver, #DDE1E5);
    padding-left: 40px; flex: 1; margin: 0 40px;
}
.nomad-booking-bar__date .date-status {
    font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}

/* =========================================
   2. STICKY ANCHOR NAV (FIX MÀU MENU)
   ========================================= */
.nomad-anchor-nav {
    position: sticky;
    top: 70px; 
    background: white;
    border-bottom: 1px solid var(--color-silver, #DDE1E5);
    z-index: 90;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.nomad-anchor-nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    gap: 40px; 
}

.nomad-anchor-nav a {
    display: block; 
    padding: 20px 0; 
    color: var(--color-gray, #667085);
    font-weight: 600; 
    text-decoration: none; 
    /* Vạch kẻ mặc định ẩn đi */
    border-bottom: 3px solid transparent; 
    transition: all 0.2s ease;
}

/* Hiệu ứng màu Cam chói lóa khi Active hoặc Hover */
.nomad-anchor-nav a:hover,
.nomad-anchor-nav a.active { 
    color: var(--color-primary, #FF4D2E); 
    border-bottom: 3px solid var(--color-primary, #FF4D2E); /* Vạch cam dày 3px */
}

/* SCROLL OFFSET: MA THUẬT CUỘN TRANG KHÔNG LẸM CHỮ */
.nomad-detail-section {
    scroll-margin-top: 130px; 
}
.nomad-section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.nomad-section-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.nomad-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.nomad-dot.green { background: #52C41A; }
.nomad-dot.red { background: #FF4D4F; }

/* =========================================
   FIX CHUẨN DEMO: TỔNG QUAN & 4 ICON NẰM NGANG
   ========================================= */
.nomad-overview-layout {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px !important;
}

.nomad-overview-layout__left {
    flex: 0 0 35% !important; 
}

.nomad-overview-layout__left h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
}

.nomad-overview-layout__left p {
    font-size: 15px !important;
    color: var(--color-gray, #667085) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.nomad-overview-layout__right {
    flex: 0 0 60% !important; 
}

/* Ép dàn ngang 4 cột */
.nomad-overview-layout__right .nomad-stats-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important; /* Bỏ khoảng cách mặc định để vạch kẻ chia đều */
    background: transparent !important;
}

.nomad-overview-layout__right .stat-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    padding: 0 10px !important;
    background: transparent !important;
}

/* Vạch kẻ dọc xám nhạt (Bỏ vạch ở phần tử đầu tiên) */
.nomad-overview-layout__right .stat-item:not(:first-child)::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 50px !important; /* Chiều cao vạch kẻ */
    width: 1px !important;
    background-color: #E5E7EB !important;
}

/* Định dạng Icon và Chữ chuẩn Demo */
.nomad-overview-layout__right .stat-item svg {
    margin-bottom: 12px !important;
    stroke: #FF4D2E !important; /* Icon màu cam */
}

.nomad-overview-layout__right .stat-item strong {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #101214 !important; /* Chữ số màu ĐEN (Không phải đỏ) */
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

.nomad-overview-layout__right .stat-item span {
    font-size: 13px !important;
    color: #667085 !important;
}

/* =========================================
   TIMELINE LỊCH TRÌNH V3 (CHUẨN 100% ẢNH MẪU)
   ========================================= */
.nomad-timeline-v3 {
    position: relative;
    padding-left: 0; 
    margin-top: 32px;
}

/* Đường kẻ dọc màu cam nhạt */
.nomad-timeline-v3__line {
    position: absolute;
    left: 13px; /* Căn thẳng hàng tâm của marker */
    top: 14px;  /* Tránh đè lên marker đầu tiên */
    bottom: 20px;
    width: 2px;
    background-color: rgba(255, 77, 46, 0.3); /* Cam mờ */
    z-index: 1;
}

.nomad-timeline-v3__item {
    display: flex;
    align-items: center; /* Căn giữa toàn bộ cụm theo chiều dọc */
    margin-bottom: 8px; /* Khoảng cách giữa các ngày rất sát nhau như hình */
    position: relative;
    z-index: 2;
}

/* --- CỘT TRÁI (CHỨA NGÀY & MARKER) --- */
/* --- CỘT TRÁI: CHỨA CẢ MARKER & CHỮ NGÀY --- */
.nomad-timeline-v3__marker-area {
    flex: 0 0 100px; /* Tăng độ rộng lên 100px để chứa cả cụm thoải mái */
    display: flex;
    align-items: center; /* Quan trọng nhất: Căn giữa theo chiều dọc */
    gap: 16px; /* Khoảng cách giữa chấm đỏ và chữ Ngày */
    padding-top: 0; /* Xóa padding-top gây lệch dòng cũ */
}

/* Cục tròn cam */
.nomad-timeline-v3__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #FF4D2E;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px white; 
    z-index: 2;
    flex-shrink: 0; /* Không cho icon bị ép nhỏ */
}

/* --- XỬ LÝ KHỐI CHỮ NGÀY TRỰC TIẾP TRONG CỘT TRÁI --- */
.nomad-timeline-v3__date-column {
    display: flex;
    flex-direction: column;
    padding-top: 0; /* Xóa padding-top gây lệch dòng cũ */
}

.nomad-timeline-v3__date-column strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text, #101214);
    line-height: 1.2;
}

.nomad-timeline-v3__date-column span {
    font-size: 12px;
    color: var(--color-gray, #98A2B3);
    margin-top: 2px;
}

/* --- ĐIỀU CHỈNH ĐƯỜNG KẺ DỌC --- */
.nomad-timeline-v3__line {
    position: absolute;
    left: 13px; /* Giữ nguyên tâm của marker */
    top: 28px;  /* Đẩy lùi xuống để bắt đầu từ dưới marker đầu tiên */
    bottom: 28px;
    width: 2px;
    background-color: rgba(255, 77, 46, 0.3); 
    z-index: 1;
}

/* --- CỘT PHẢI (CHỨA CARD TRẮNG) --- */
.nomad-timeline-v3__card {
    flex: 1;
    background: white;
    border: 1px solid var(--color-silver, #F2F4F7);
    border-radius: 5px;
    padding: 10px;
    display: flex;
    align-items: center; 
    gap: 20px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer; 
    margin-left: 20px; /* Thêm margin-left để tạo khoảng cách rộng với Cột Ngày */
}

.nomad-timeline-v3__card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-color: #E5E7EB;
}

/* Ảnh nhỏ bên trong Card */
.nomad-timeline-v3__img {
    width: 240px;
    height: 90px; /* Ảnh bẹt hơn bản cũ */
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Chữ mô tả trong Card */
.nomad-timeline-v3__text {
    flex: 1;
}

.nomad-timeline-v3__text h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--color-text, #101214);
}

.nomad-timeline-v3__text p {
    font-size: 14px;
    color: var(--color-gray, #667085);
    margin: 0;
    line-height: 1.5;
}

/* Mũi tên > bên góc phải */
.nomad-timeline-v3__arrow {
    flex-shrink: 0;
    padding-right: 8px;
    display: flex;
    align-items: center;
}

/* =========================================
   GALLERY SLIDER CHUẨN GỌN (CHỈ DÙNG DOTS)
   ========================================= */
.nomad-gallery-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 40px 0;
}

.nomad-gallery-slider {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; 
    scroll-behavior: smooth !important; 
    -webkit-overflow-scrolling: touch !important; 
    scrollbar-width: none !important;
    width: 100% !important;
}

.nomad-gallery-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important; /* Đảm bảo slide luôn chiếm trọn 100% container */
    height: 360px !important; 
    position: relative !important;
    scroll-snap-align: start !important; 
    scroll-snap-stop: always !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 60px !important; 
}

.nomad-gallery-slider::-webkit-scrollbar {
    display: none; 
}


.nomad-gallery-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.nomad-gallery-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.nomad-gallery-slide__text {
    position: relative;
    z-index: 3;
    text-align: left;
    color: white;
    max-width: 500px;
}

.nomad-gallery-slide__text h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}

.nomad-gallery-slide__text p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

.nomad-gallery-slide__text .nomad-chip--orange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    color: white !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.nomad-gallery-slide__text .nomad-chip--orange::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #52C41A;
}

/* DẢI CHẤM TRÒN (DOTS) DƯỚI ĐÁY */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    width: 24px;
    border-radius: 4px;
    background: white;
}

/* BAO GỒM / KHÔNG BAO GỒM */
.nomad-list-check, .nomad-list-cross { list-style: none; padding: 0; margin: 0; }
.nomad-list-check li, .nomad-list-cross li { position: relative; padding-left: 32px; margin-bottom: 16px; font-size: 15px; }
.nomad-list-check li::before, .nomad-list-cross li::before {
    content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
    border-radius: 50%; background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.nomad-list-check li::before { background-color: #F6FFED; border: 1px solid #B7EB8F; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352C41A' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); }
.nomad-list-cross li::before { background-color: #FFF1F0; border: 1px solid #FFA39E; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D4F' stroke-width='3'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); }

/* BẢNG LỊCH KHỞI HÀNH (DESKTOP) */
.nomad-table-responsive { overflow-x: auto; }
.nomad-table { width: 100%; border-collapse: collapse; }
.nomad-table th, .nomad-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--color-silver, #DDE1E5); }
.nomad-table th { background: var(--color-light, #F5F7F9); font-weight: 600; font-size: 14px; color: var(--color-gray, #667085); }
.nomad-btn--small { padding: 8px 16px; height: auto; font-size: 13px; }

/* REVIEWS */
.nomad-reviews { display: flex; gap: 40px; background: var(--color-light, #F5F7F9); padding: 40px; border-radius: 16px; margin-bottom: 40px; }
.nomad-review-score { flex: 0 0 200px; text-align: center; }
.nomad-review-score .score-big { font-size: 48px; font-weight: 800; margin-bottom: 8px; }
.nomad-review-score .stars { color: #FAAD14; font-size: 20px; margin-bottom: 8px; }
.nomad-review-item { display: flex; gap: 16px; background: white; padding: 24px; border-radius: 12px; flex: 1; border: 1px solid var(--color-silver, #DDE1E5); }
.user-avatar { width: 48px; height: 35px; border-radius: 50%; background: #FFE5E0; color: var(--color-primary, #FF4D2E); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* FAQ ACCORDION (CHUẨN W3C) */
.nomad-faq-container { margin-top: 40px; }
.nomad-accordion { border-bottom: 1px solid var(--color-silver, #DDE1E5); }
.nomad-accordion__btn {
    width: 100%; text-align: left; background: none; border: none; padding: 20px 0;
    font-size: 16px; font-weight: 600; color: var(--color-text, #101214); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
}
.nomad-accordion__btn[aria-expanded="true"] .icon-plus { transform: rotate(45deg); }
.nomad-accordion__content { padding-bottom: 20px; color: var(--color-gray, #667085); line-height: 1.6; }
/* Ẩn bằng thuộc tính hidden từ JS, không dùng display:none ở CSS để thân thiện Screen Reader */
/* =========================================
   VÁ LỖI KHẨN CẤP: PHỤC HỒI LƯỚI GRID DESKTOP
   ========================================= */
@media (min-width: 1025px) {
    /* Tái tạo hệ thống Grid 12 cột cực mạnh cho toàn bộ trang chi tiết */
    main#mainContent .nomad-grid {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        gap: 40px !important;
        align-items: start; /* Mặc định căn trên */
    }

    /* Ép tỷ lệ cột chuẩn xác */
    main#mainContent .nomad-col-3 { grid-column: span 3 !important; width: 100% !important; }
    main#mainContent .nomad-col-4 { grid-column: span 4 !important; width: 100% !important; }
    main#mainContent .nomad-col-5 { grid-column: span 5 !important; width: 100% !important; }
    main#mainContent .nomad-col-6 { grid-column: span 6 !important; width: 100% !important; }
    main#mainContent .nomad-col-7 { grid-column: span 7 !important; width: 100% !important; }
    main#mainContent .nomad-col-8 { grid-column: span 8 !important; width: 100% !important; }

    /* --- TINH CHỈNH RIÊNG CHO HERO SECTION --- */
    /* Hero cần căn giữa theo chiều dọc */
    .nomad-detail-hero .nomad-grid {
        align-items: center !important; 
    }

    /* Đảm bảo ảnh Hero hiển thị to, rộng, không bị ép bẹp */
    .nomad-detail-hero__media {
        height: 480px !important; /* Chiều cao lý tưởng cho ảnh cover */
        width: 100% !important;
        position: relative !important;
    }

    .nomad-detail-hero__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}
/* =========================================
   TÚT LẠI VẺ ĐẸP CHUẨN DEMO (DÁN ĐÁY FILE)
   ========================================= */

/* 1. NÚT GIỮ CHỖ ĐEN TUYỀN (Viên thuốc) */
.nomad-booking-bar button {
    background-color: #101214 !important; /* Nền đen */
    color: #ffffff !important; /* Chữ trắng */
    border: none !important;
    padding: 14px 32px !important;
    border-radius: 40px !important; /* Bo góc tròn xoe */
    font-size: 16px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
.nomad-booking-bar button svg {
    stroke: #FF4D2E !important; /* Mũi tên cam */
}

/* 2. CHUẨN HÓA LẠI KHỐI THỐNG KÊ (BỎ NỀN XÁM, CHỈNH LẠI GRID) */
.nomad-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Ép chia 2 cột */
    gap: 32px 24px !important;
}
.nomad-stats-row .stat-item {
    background: transparent !important; /* Xóa nền xám */
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.nomad-stats-row .stat-item svg {
    margin-bottom: 12px !important;
}
.nomad-stats-row .stat-item strong {
    font-size: 28px !important;
    color: #FF4D2E !important; /* Màu đỏ cam */
    margin-bottom: 4px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.nomad-stats-row .stat-item span {
    font-size: 14px !important;
    color: #667085 !important;
}

/* =========================================
   FIX LỖI BOOKING BAR ĐÈ LÊN ẢNH HERO (DESKTOP)
   ========================================= */
@media (min-width: 1025px) {
    /* 1. Xóa khoảng trắng thừa dưới đáy Hero */
    .nomad-detail-hero {
        padding: 60px 0 0 0 !important; /* Bỏ hoàn toàn padding bottom */
        border-bottom: none !important;
    }

    /* 2. Ép 2 cột cao bằng nhau để ảnh chạm sát đáy grid */
    .nomad-detail-hero .nomad-grid {
        align-items: stretch !important; 
    }
    
    .nomad-detail-hero__media {
        height: 100% !important;
        min-height: 440px !important;
        display: block !important;
    }

    .nomad-detail-hero__media img {
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 3. Tuyệt chiêu Lề Âm (Negative Margin) kéo Bar đè lên ảnh */
    .nomad-booking-bar {
        position: relative !important;
        margin-top: -48px !important; /* Kéo ngược lên trên 48px để đè vào ảnh */
        margin-bottom: 40px !important; /* Đẩy menu Anchor Nav bên dưới xích ra một chút */
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 20 !important; /* Luôn nổi lên trên cùng */
    }
}
/* HIỆU ỨNG HOVER CHO CÂU HỎI THƯỜNG GẶP & ĐÁNH GIÁ */
.faq-item:hover {
    border-color: #DDE1E5 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}

@media (max-width: 1024px) {
    .nomad-reviews-grid {
        grid-template-columns: 1fr !important;
    }
    .nomad-faq-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   RESPONSIVE TOÀN TRANG CHO MOBILE (< 768px)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Chỉnh container và lề chung tránh tràn viền */
    .nomad-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Ép Hero section và Grid về cột đơn */
    .nomad-detail-hero .nomad-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .nomad-col-5, .nomad-col-7, .nomad-col-6 {
        width: 100% !important;
    }

    /* 3. Thanh Booking Bar trên mobile */
    .nomad-booking-bar {
        position: relative !important;
        margin-top: -20px !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    .nomad-booking-bar__date {
        border-left: none !important;
        border-top: 1px solid var(--color-silver, #DDE1E5) !important;
        padding-left: 0 !important;
        padding-top: 12px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .nomad-booking-bar button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 4. Khối Tổng quan & Thống kê xếp dọc */
    .nomad-overview-layout {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .nomad-overview-layout__left,
    .nomad-overview-layout__right {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .nomad-stats-row {
        flex-wrap: wrap !important;
        gap: 20px 0 !important;
    }
    .nomad-stats-row .stat-item {
        flex: 0 0 50% !important;
    }
    .nomad-stats-row .stat-item.divider::before {
        display: none !important; /* Ẩn vạch kẻ dọc trên mobile */
    }

    /* 5. Cố định chiều rộng ảnh timeline lịch trình */
    .nomad-timeline-v3__card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .nomad-timeline-v3__img {
        width: 100% !important;
        height: 80px !important;
    }

    /* 6. Ẩn thanh anchor nav thừa hoặc cho cuộn ngang */
    .nomad-anchor-nav ul {
        gap: 20px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 4px;
    }
}

/* Lưới thống kê 2x2 chuyên biệt cho mobile */
@media (max-width: 768px) {
    .nomad-stats-grid-mobile {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .nomad-stats-grid-mobile .stat-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px 12px !important;
        background: #F9FAFB !important;
        border: 1px solid #E5E7EB !important;
        border-radius: 10px !important;
        width: auto !important;
    }
    
    .nomad-stats-grid-mobile .stat-item strong {
        margin-top: 8px !important;
        font-size: 16px !important;
    }
    
    .nomad-stats-grid-mobile .stat-item span {
        font-size: 12px !important;
        color: #667085 !important;
    }
}