/* =========================================
   RESPONSIVE CSS (TỐI ƯU HÓA TOÀN DIỆN & CLEAN CODE)
   ========================================= */

/* --- Mobile nhỏ: <= 389px --- */
@media (max-width: 389px) {
    :root { --grid-gap: 12px; }
    .nomad-grid { grid-template-columns: 1fr; }
    .nomad-col-6, .nomad-col-4, .nomad-col-3, .nomad-col-8 { grid-column: span 12; }
}

/* --- Mobile: 390px - 767px --- */
@media (min-width: 390px) and (max-width: 767px) {
    :root { --grid-gap: 16px; }
    .nomad-grid { grid-template-columns: repeat(4, 1fr); }
    .nomad-col-6, .nomad-col-4, .nomad-col-3, .nomad-col-8 { grid-column: span 4; }
    .hero-v2__cap p { margin-left: 0 !important; font-size: 12px; }
}

/* --- Màn hình siêu nhỏ <= 576px --- */
@media (max-width: 576px) {
    .nomad-section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Tablet & Mobile chung: <= 991px --- */
@media (min-width: 768px) and (max-width: 991px) {
    .nomad-grid { grid-template-columns: repeat(8, 1fr); }
    .hero-v2__cap p { margin-left: 0 !important; font-size: 12px; }
}

/* =========================================
   GIAO DIỆN TABLET (<= 1024px)
   ========================================= */
@media (max-width: 1024px) {
    /* Layout cơ bản */
    .nomad-hero { grid-template-columns: 1fr; }
    
    /* Trang chủ - Thống kê */
    .nomad-stats__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
    .nomad-stats__item { border-right: none !important; padding: 16px !important; text-align: center !important; }
    .nomad-stats__item:nth-last-child(-n+2) { border-bottom: none !important; }
    .nomad-stats__number { font-size: 2rem !important; margin-bottom: 8px !important; }
    .nomad-stats__label { font-size: 13px !important; }
    .nomad-stats__item:nth-child(2) { border-right: none; }
    
    /* Trang chủ - Hero V2 */
    .hero-v2 { display: block !important; position: relative !important; height: 100vh !important; min-height: 550px !important; margin-bottom: 0 !important; }
    .hero-v2__left { display: none !important; }
    .hero-v2__right { width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; }
    .hero-v2__search-box { position: absolute !important; bottom: 280px !important; left: 16px !important; width: calc(100% - 32px) !important; margin: 0 !important; padding: 16px !important; box-sizing: border-box !important; z-index: 10 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }
    .hero-v2__cap { position: absolute !important; bottom: 80px !important; left: 16px !important; right: 16px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; gap: 16px !important; z-index: 5 !important; }
    .hero-v2__cap p { margin-left: 0 !important; font-size: 14px !important; max-width: 80% !important; }
    .hero-v2__slider-controls { position: absolute !important; bottom: 80px !important; right: 16px !important; margin: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; z-index: 6 !important; }
    .hero-v2__search-box ul, .hero-v2__search-box .nomad-nav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 8px !important; gap: 16px !important; }
    .hero-v2__search-box ul::-webkit-scrollbar, .hero-v2__search-box .nomad-nav::-webkit-scrollbar { display: none !important; }
    .hero-v2__search-box ul > *, .hero-v2__search-box .nomad-nav > *, .hero-v2__search-box li { white-space: nowrap !important; flex-shrink: 0 !important; }

    /* Trang chủ - Các Section Khác */
    .nomad-way__inner { flex-direction: column; align-items: flex-start; gap: 60px; }
    .nomad-way__bg { width: 100%; }
    .nomad-way__bg-fade { background: linear-gradient(0deg, #101214 0%, rgba(16,18,20,0.9) 40%, transparent 100%); }
    .nomad-way__timeline-wrapper { padding-right: 0; }
    .nomad-steps { flex-direction: column; align-items: flex-start; padding: 24px; gap: 24px; }
    .nomad-step__divider { height: auto; border-left: none; padding: 0 0 0 64px; color: var(--color-silver, #DDE1E5); }
    .nomad-step__desc { max-width: 100%; }
    .nomad-journal-card { display: flex !important; flex-direction: row !important; height: auto !important; min-height: 110px !important; }
    .nomad-journal-card__image { width: 110px !important; height: auto !important; aspect-ratio: 1 / 1 !important; flex-shrink: 0 !important; }
    .nomad-journal-card__info { width: calc(100% - 110px) !important; padding: 16px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
    .nomad-journal-card__title { font-size: 14px !important; line-height: 1.4 !important; margin-bottom: 8px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
    .nomad-journal-card__meta { font-size: 10px !important; }
    .nomad-cta-banner { padding: 60px 0 100px 0 !important; height: auto !important; }
    .nomad-cta-banner__content { display: flex !important; flex-direction: column !important; gap: 40px !important; }
    .nomad-cta-banner__left, .nomad-cta-banner__right { width: 100% !important; }
    .nomad-cta-banner__left h2 { font-size: 2.2rem !important; line-height: 1.3 !important; max-width: 100% !important; word-wrap: break-word !important; }
    .nomad-cta-banner__left h2 br { display: none !important; }
    .nomad-typography-art { position: relative !important; font-size: 3.5rem !important; line-height: 1.1 !important; text-align: center !important; transform: none !important; right: auto !important; top: auto !important; }
    .nomad-slider-mobile { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 16px !important; padding-bottom: 24px !important; margin: 0 !important; }
    .nomad-slider-mobile::-webkit-scrollbar { display: none !important; }
    .nomad-slider-mobile > * { flex: 0 0 82% !important; max-width: 82% !important; scroll-snap-align: start !important; }
    .nomad-footer__top { flex-direction: column; gap: 60px; }
    .nomad-footer__intro, .nomad-footer__menus, .nomad-footer__actions { flex: 0 0 100%; max-width: 100%; }
    .nomad-footer__menus { flex-wrap: wrap; gap: 40px; }
    .nomad-footer__menu-col { flex: 0 0 calc(50% - 20px); }
    .nomad-footer__actions { flex-direction: column; gap: 32px; }
    .nomad-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }

    /* Trang Tours & Detail */
    .nomad-catalog__grid-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
    .nomad-filter-sidebar { position: fixed !important; top: 0 !important; left: -120% !important; width: 320px !important; max-width: 85vw !important; height: 100vh !important; z-index: 9999 !important; transition: left 0.3s ease-in-out !important; box-shadow: 10px 0 30px rgba(0,0,0,0.5) !important; background: #fff !important; }
    .nomad-filter-sidebar.is-open { left: 0 !important; }
    .nomad-tours-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .nomad-tour-card--featured { grid-column: span 2 !important; }
    .nomad-detail-hero { padding: 40px 0 160px 0; }
    .nomad-detail-hero .nomad-col-5, .nomad-detail-hero .nomad-col-7 { grid-column: span 1; width: 100%; }
    .nomad-detail-hero__title { font-size: 2.2rem !important; }
    .nomad-detail-hero .nomad-grid { display: flex; flex-direction: column-reverse; }
    .nomad-features-row { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

    /* Trang Destinations (Danh sách điểm đến) */
    .dest-hero-title { font-size: 3.5rem; }
    .dest-hero-desc { max-width: 100%; }
    .nomad-dest-search-box { width: 100%; }
    .nomad-collage-3d { margin-left: 0; margin-top: 40px; }
    .card-left, .card-right { width: 30%; height: 280px; margin: 0 -15px; }
    .card-center { width: 45%; height: 380px; }
    .nomad-inspiration-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* =========================================
   GIAO DIỆN MOBILE (<= 768px)
   ========================================= */
@media (max-width: 768px) {
    /* --- 1. Global Reset --- */
    .nomad-section { padding: 40px 0; }
    .nomad-container { padding-left: 16px !important; padding-right: 16px !important; overflow: visible !important; }
    .nomad-features-row { grid-template-columns: 1fr !important; }

    /* --- 2. Trang Tours (ĐÃ FIX DỨT ĐIỂM HERO & SEARCH) --- */
    .nomad-tours-hero { padding: 120px 16px 80px 16px !important; background-position: center !important; height: auto !important; width: 100% !important; overflow: hidden !important; }
    .nomad-tours-hero__overlay { background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0) 100%) !important; }
    
    /* Ép container của hero thành flex dọc, căn giữa tuyệt đối */
    html body .nomad-tours-hero .nomad-grid { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; align-items: center !important; }
    
    /* Hủy bỏ mọi lệnh chia cột cũ (thủ phạm đẩy chữ sang phải) */
    html body .nomad-tours-hero__content, 
    html body .nomad-tours-hero div[class*="nomad-col-"] { 
        width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; 
        display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; 
        grid-column: auto !important; transform: none !important; 
    }
    
    .nomad-tours-hero__title { font-size: 2.2rem !important; margin-bottom: 12px !important; text-align: center !important; width: 100% !important; }
    .nomad-tours-hero__desc { max-width: 100% !important; text-align: center !important; width: 100% !important; }
    
    /* Fix Form Tìm Kiếm đè lên Hero */
    html body .nomad-container .nomad-tours-search { 
        margin: -60px 16px 24px 16px !important; 
        width: calc(100% - 32px) !important; box-sizing: border-box !important; 
        border-radius: 16px !important; padding: 24px !important; 
        background: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; 
        position: relative !important; z-index: 10 !important; 
    }
    html body .nomad-tours-search .nomad-search-box__input-group { display: grid !important; grid-template-columns: 24px 1fr !important; gap: 20px 12px !important; align-items: center !important; }
    html body .nomad-search-divider { display: none !important; }
    html body .nomad-tours-search input { border-bottom: 1px solid #E5E7EB !important; border-radius: 0 !important; padding: 8px 0 !important; width: 100% !important; }
    /* Fix nút mũi tên bị kéo giãn thành xúc xích */
    html body .nomad-tours-search button { 
        grid-column: 1 / -1 !important; 
        width: 56px !important;  /* Fix cứng chiều rộng */
        height: 56px !important; /* Fix cứng chiều cao */
        margin: 16px auto 0 auto !important; /* Đẩy xuống 16px và tự động căn giữa */
        border-radius: 50% !important; /* Bo tròn xoe 100% */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Lưới Tour Card */
    html body .nomad-tours-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; }
    html body .nomad-tour-card--featured { grid-column: span 1 !important; }


    /* --- 3. Trang Detail --- */
    .nomad-booking-bar { position: fixed; bottom: 60px; left: 0; width: 100%; max-width: 100%; flex-direction: column; padding: 16px 20px; border-radius: 16px 16px 0 0; border-top: 1px solid #DDE1E5; z-index: 99; background: #fff; }
    .nomad-booking-bar__date { margin: 12px 0; padding: 12px 0; border-left: none; border-top: 1px solid #DDE1E5; border-bottom: 1px solid #DDE1E5; }
    .nomad-booking-bar__price { text-align: center; }
    .nomad-booking-bar__date .date-status { justify-content: center; }
    .nomad-anchor-nav ul { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; gap: 24px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; }
    .nomad-anchor-nav ul::-webkit-scrollbar { display: none; }
    .nomad-stats-row { grid-template-columns: 1fr 1fr; flex-wrap: wrap; gap: 32px 0; }
    .nomad-stats-row .stat-item { flex: 0 0 50%; }
    .nomad-stats-row .stat-item.divider::before { display: none; }
    .nomad-overview-layout { flex-direction: column; align-items: stretch; }
    #bao-gom .nomad-grid { display: flex; flex-direction: column; gap: 32px; }
    .nomad-timeline__content { flex-direction: column; align-items: flex-start; }
    .nomad-timeline__img { width: 100%; height: 160px; }
    .nomad-table-responsive { border: none; }
    .nomad-table, .nomad-table tbody, .nomad-table th, .nomad-table td, .nomad-table tr { display: block; }
    .nomad-table thead tr { position: absolute; top: -9999px; left: -9999px; }
    .nomad-table tr { border: 1px solid #DDE1E5; border-radius: 12px; margin-bottom: 16px; padding: 16px; }
    .nomad-table td { border: none; padding: 8px 0; position: relative; display: flex; justify-content: space-between; align-items: center; text-align: right; }
    .nomad-table td:before { content: attr(data-label); font-weight: 600; color: #667085; text-align: left; }
    .nomad-table td button { width: 100%; margin-top: 8px; }
    .nomad-reviews { flex-direction: column; padding: 24px; gap: 24px; }
    .nomad-review-list { flex-direction: column; }
    .nomad-bento-gallery { grid-template-columns: 1fr !important; grid-template-rows: auto !important; gap: 12px; }
    .bento-item { grid-column: 1 !important; grid-row: auto !important; height: 200px; }
    .bento-item--large { height: 300px; }

    /* --- 4. Trang Destinations --- */
    /* Hero & Grid Tiêu đề */
    .dest-hero-container { display: flex !important; flex-direction: column !important; gap: 40px !important; }
    .dest-hero-left, .nomad-col-6 { width: 100% !important; }
    .dest-hero-title { font-size: 2.8rem; }
    .dest-hero-section { padding-top: 20px; }
    .nomad-section .nomad-container > div[style*="justify-content: space-between"] { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    
    /* 3D Collage (Gỡ vát 3D, xếp dọc) */
    .nomad-hero-collage { grid-template-columns: 1fr; }
    .nomad-hero-collage img:nth-child(2) { transform: none; box-shadow: none; }
    .nomad-collage-3d { flex-direction: column !important; gap: 16px !important; width: 100% !important; margin: 0 !important; }
    .collage-card { transform: none !important; } 
    .card-left, .card-center, .card-right { width: 100% !important; height: 320px !important; margin: 0 !important; }
    .dest-search-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 8px; }

    /* Tabs Châu Lục */
    .continent-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; }
    .continent-tabs::-webkit-scrollbar { display: none; }
    .continent-tab { flex: 0 0 auto !important; min-width: 150px !important; padding: 16px 20px !important; scroll-snap-align: start; }
    .continent-text strong, .continent-text span { white-space: nowrap !important; }

    /* Slider Nền Carbon */
    .nomad-dom-slider { height: auto; min-height: 560px; }
    .nomad-dom-slide__bg { width: 100%; }
    .nomad-dom-slide__overlay { background: linear-gradient(to top, #101214 30%, rgba(16,18,20,0.8) 60%, rgba(16,18,20,0) 100%); }
    .nomad-dom-slide { align-items: flex-end; padding-bottom: 120px; }
    .nomad-dom-slide__content h2 { font-size: 3.2rem !important; }
    .nomad-dom-controls-container { bottom: 24px; }

    /* Cảm Hứng Du Lịch (Vuốt ngang) */
    .nomad-inspiration-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding-bottom: 24px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
    .nomad-inspiration-grid::-webkit-scrollbar { display: none !important; }
    .inspiration-card { display: flex !important; flex-direction: row !important; flex: 0 0 85% !important; min-width: 280px !important; scroll-snap-align: center !important; }
    .inspiration-card img { width: 90px !important; height: 90px !important; flex-shrink: 0 !important; }
    /* ============================================== */
    /* FLOATING CONTACT DẠNG TRÒN (FAB) SÁT TRÁI      */
    /* ============================================== */
    
    .nomad-floating-contact {
        position: fixed !important;
        bottom: 30px !important; 
        left: 16px !important;   /* Dính sát mép trái */
        right: auto !important;  /* Hủy căn phải */
        width: auto !important;  
        border-radius: 0 !important; 
        
        background: transparent !important; 
        backdrop-filter: none !important; 
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important; 
        border: none !important;
        
        padding: 0 !important;
        margin: 0 !important;
        
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; 
        align-items: center !important;
        z-index: 99999 !important;
    }

    .nomad-floating-contact__btn {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        text-decoration: none !important;
        
        width: 48px !important;  
        height: 48px !important;
        padding: 0 !important;
        border-radius: 50% !important; 
        
        background: #ffffff !important;
        color: #101214 !important; 
        box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        
        flex: none !important;
        transition: transform 0.2s ease;
    }

    .nomad-floating-contact__btn:active {
        transform: scale(0.92);
    }

    .nomad-floating-contact__btn--primary {
        background: #FF4D2E !important;
        color: #ffffff !important;
    }

    .nomad-floating-contact__text {
        display: none !important; 
    }

    .nomad-floating-contact__icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    .nomad-floating-contact__icon svg {
        width: 100% !important;
        height: 100% !important;
        stroke: currentColor !important; 
        fill: none !important;
    }

    .nomad-floating-contact__btn span:not(.nomad-floating-contact__icon) {
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }
}

/* =========================================
   RESPONSIVE MOBILE CHO TRANG CHI TIẾT ĐIỂM ĐẾN
   ========================================= */
@media (max-width: 768px) {
    /* 1. HERO SECTION */
    .nomad-detail-hero .nomad-grid {
        display: flex !important;
        flex-direction: column-reverse !important; /* Đẩy ảnh lên trên, chữ xuống dưới */
        gap: 32px;
    }
    .nomad-detail-hero__left, .nomad-detail-hero__right { width: 100% !important; }
    .nomad-detail-hero__title { font-size: 3rem !important; } /* Thu nhỏ font chữ tiêu đề */
    .detail-hero-slider { height: 350px !important; }
    .nomad-detail-hero__stats { 
        flex-direction: column; /* Xếp dọc 3 thông số thời tiết, thời gian */
        gap: 16px; 
    }

    /* 2. STICKY NAV (Menu neo cuộn ngang) */
    .nomad-anchor-nav ul {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 0 16px !important;
        gap: 24px !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Tắt thanh cuộn Firefox */
    }
    .nomad-anchor-nav ul::-webkit-scrollbar { display: none; } /* Tắt thanh cuộn Chrome/Safari */
    .nomad-anchor-nav li { scroll-snap-align: start; }

    /* 3. TỔNG QUAN & BENTO GALLERY */
    .dest-overview-section .nomad-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px;
    }
    .overview-content, .nomad-col-8 { width: 100% !important; }
    .overview-stats-grid { gap: 16px; }

    /* 4. FIX DỨT ĐIỂM TIMELINE THỜI ĐIỂM DU LỊCH (Cuộn ngang không vỡ layout) */
    html body .timeline-section .section-heading-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    html body .timeline-wrapper {
        width: calc(100% + 32px) !important; /* Ép tràn lề 16px hai bên để vuốt */
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }
    html body .timeline-wrapper::-webkit-scrollbar { display: none !important; }
    
    html body .timeline-months {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important; /* Chìa khóa: Cho phép nội dung dài tự do */
        min-width: 860px !important; /* Đảm bảo đủ chiều dài cho 12 tháng */
        position: relative !important;
    }
    
    html body .t-month {
        flex: 1 !important; 
        min-width: 70px !important; /* Khóa cứng chiều rộng từng tháng, cấm bóp méo */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    html body .t-desc {
        white-space: nowrap !important; /* Cấm tuyệt đối rớt dòng chữ "Cực quang", "Mùa hè" */
        font-size: 11px !important;
    }

    html body .timeline-line {
        width: 100% !important; 
        min-width: 860px !important; /* Dây gạch ngang cũng phải dài bằng 12 tháng */
        left: 0 !important;
    }

    /* Đưa chú thích (Legend) xuống xếp dọc */
    html body .timeline-legend {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 16px !important;
        width: 100% !important;
    }
    html body .legend-item { width: 100% !important; max-width: 100% !important; }

    /* 5. CÁC KHỐI CARD: TRẢI NGHIỆM, VÙNG, TOUR (Biến thành vuốt ngang) */
    .exp-grid, 
    .region-section .nomad-grid, 
    .tour-suggest-section .nomad-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 16px !important;
        padding-bottom: 24px !important;
        scrollbar-width: none;
        margin: 0 -16px !important; /* Tràn lề để vuốt mượt hơn */
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .exp-grid::-webkit-scrollbar, 
    .region-section .nomad-grid::-webkit-scrollbar, 
    .tour-suggest-section .nomad-grid::-webkit-scrollbar { display: none; }
    
    .exp-card, .detail-card {
        flex: 0 0 85% !important; /* Mỗi thẻ chiếm 85% màn hình để lòi 1 góc thẻ tiếp theo */
        scroll-snap-align: center;
        max-width: 320px;
    }

    /* 6. THÔNG TIN DU LỊCH HỮU ÍCH (Xếp dọc) */
    .info-section .nomad-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .info-section .detail-card {
        flex: 1 !important;
        width: 100% !important;
        max-width: 100% !important; /* Ghi đè max-width 320px ở trên */
    }
    
    /* Thu gọn Header Text cho vừa màn hình nhỏ */
    .section-heading-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
/* =========================================
   TỐI ƯU NEWSLETTER TRÊN MOBILE
   ========================================= */
@media (max-width: 768px) {
    html body .jn-inner {
        flex-direction: column !important; /* Bẻ gập xuống thành 1 cột dọc */
        align-items: flex-start !important; 
        gap: 20px !important; /* Thu hẹp khoảng cách giữa chữ và form */
    }
    
    html body .jn-text {
        width: 100% !important; 
    }
    
    html body .jn-text h3 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    html body .jn-form {
        width: 100% !important; /* Bắt form giãn 100% chiều ngang màn hình */
        max-width: 100% !important; /* Hủy giới hạn max-width 400px của desktop */
    }
}

/* =========================================
   ĐẶC TRỊ RESPONSIVE MOBILE CHO TRANG DESTINATIONS (<768px)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Reset chống tràn ngang toàn trang destinations */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Hero Section: Bẻ gập 2 cột thành 1 cột dọc (Text trên, Collage ảnh dưới) */
    .dest-hero-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        gap: 32px !important;
        margin: 0 !important;
    }

    .dest-hero-left, 
    .dest-hero-container > div[class*="nomad-col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Typography Tiêu đề Hero */
    .dest-hero-title {
        font-size: 2.4rem !important;
        line-height: 1.2 !important;
        margin: 16px 0 !important;
    }

    .dest-hero-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    /* Khối Search Box trong Hero trên mobile */
    .nomad-dest-search-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    .dest-search-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }
    .dest-search-tabs::-webkit-scrollbar { display: none !important; }
    .dest-search-tabs a { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 13px !important; }

    .dest-search-input {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .dest-search-input input {
        width: 100% !important;
        font-size: 13px !important;
    }

    /* 3. Collage 3 ảnh 3D bên phải: Xếp chồng hoặc xếp dọc gọn gàng */
    .nomad-collage-3d {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .collage-card, 
    .card-left, .card-center, .card-right {
        width: 100% !important;
        height: 260px !important;
        transform: none !important;
        margin: 0 !important;
    }

    /* 4. Tabs Châu lục (Châu Á, Châu Âu, v.v.): Vuốt ngang mượt mà */
    .continent-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding: 0 16px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .continent-tabs::-webkit-scrollbar { display: none !important; }
    .continent-tab {
        flex: 0 0 auto !important;
        min-width: 140px !important;
        padding: 12px 16px !important;
    }

    /* 5. Lưới điểm đến các châu (Châu Á, Châu Âu, Châu Mỹ, Châu Úc) */
    /* Ép tất cả các grid con trong trang Destinations thành 1 cột dọc */
    .nomad-main#mainContent .nomad-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .nomad-main#mainContent .nomad-col-6,
    .nomad-main#mainContent .nomad-col-3,
    .nomad-main#mainContent .nomad-col-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        grid-column: span 1 !important;
    }

    /* Chiều cao các card điểm đến trên mobile cho cân đối */
    .dest-card {
        height: 220px !important;
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Riêng card lớn đầu tiên của Châu Á */
    .nomad-main#mainContent .nomad-col-6 .dest-card[style*="height: 420px"] {
        height: 280px !important;
    }

    /* 6. Slider Điểm đến của tháng & Cảm hứng du lịch */
    .nomad-dom-slider {
        height: auto !important;
        min-height: 480px !important;
    }
    .nomad-dom-slide__content h2 {
        font-size: 3rem !important;
    }
    
    .nomad-inspiration-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }
    .inspiration-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    html body .nomad-pagination {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
}

html body .nomad-pagination::-webkit-scrollbar {
    display: none !important;
}

html body .nomad-page-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

html body .nomad-page-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    padding: 0 4px !important;
    font-size: 13px !important;
    color: #101214 !important;
}
}