/* =========================================
   1. CONTAINER CHÍNH
   ========================================= */
.vn-travel-wrapper { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    margin-bottom: 50px; 
    width: 100%; 
    position: relative; 
}

/* =========================================
   2. HEADER: TABS & FILTERS (CHỐNG XUNG ĐỘT THEME)
   ========================================= */
.vn-travel-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 30px; 
    flex-wrap: wrap; 
}

/* Khối bọc Tabs */
.vn-travel-tabs-wrapper { 
    background: #fff !important; 
    padding: 6px 8px !important; 
    border-radius: 50px !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    border: none !important;
}
.vn-travel-tabs { 
    display: flex !important; 
    flex-direction: row !important; /* Ép nằm ngang */
    align-items: center !important; 
    gap: 5px !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* Từng Nút Tab */
.vn-tab-btn { 
    border: none !important; 
    background: transparent !important; 
    padding: 10px 24px !important; 
    border-radius: 40px !important; 
    cursor: pointer !important; 
    transition: 0.3s !important; 
    display: flex !important; 
    flex-direction: row !important; /* Ép icon nằm ngang với text */
    align-items: center !important; 
    justify-content: center !important;
    gap: 8px !important; 
    font-weight: 600 !important; 
    font-size: 15px !important; 
    color: #555 !important; 
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    outline: none !important;
}
.vn-tab-btn:hover { 
    color: #e60023 !important; 
    background: #f9f9f9 !important; 
}
.vn-tab-btn.active { 
    background: #e60023 !important; 
    color: #fff !important; 
    box-shadow: 0 4px 10px rgba(230, 0, 35, 0.3) !important; 
}

/* Icon & Text trong Tab */
.vn-tab-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}
.vn-tab-btn .vn-tab-icon svg { 
    width: 18px !important; 
    height: 18px !important; 
    fill: none !important; 
    display: block !important;
    margin: 0 !important;
}
.vn-tab-btn.active .vn-tab-icon svg { 
    fill: #fff !important; 
}
.vn-btn-text {
    line-height: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
}

/* =========================================
   Khối Filters
   ========================================= */
.vn-travel-filters { 
    background: #fff !important; 
    padding: 6px 10px !important; 
    border-radius: 50px !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    border: none !important;
}
.vn-filter-label-main { 
    font-size: 14px !important; 
    font-weight: 500 !important; 
    color: #999 !important; 
    margin: 0 10px !important; 
}
.vn-filter-group { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    padding: 6px 16px !important; 
    border: 1px solid #eee !important; 
    border-radius: 40px !important; 
    margin-left: 10px !important; 
    background: #fff !important;
    height: auto !important;
}
.vn-f-label { 
    font-size: 13px !important; 
    color: #777 !important; 
    font-weight: 400 !important; 
    white-space: nowrap !important;
    margin: 0 !important;
}
.vn-select-wrap {
    display: inline-flex !important;
    align-items: center !important;
}
.vn-select-wrap select { 
    border: none !important; 
    background: transparent !important; 
    font-size: 13px !important; 
    font-weight: 700 !important; 
    color: #333 !important; 
    outline: none !important; 
    cursor: pointer !important; 
    -webkit-appearance: none !important; 
    -moz-appearance: none !important;
    appearance: none !important;
    padding: 0 20px 0 0 !important; 
    min-width: 90px !important; 
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right center !important; 
}

/* =========================================
   3. BANNER (DYNAMIC BG & ICON)
   ========================================= */
.vn-travel-banner { 
    position: relative; 
    height: 120px; 
    border-radius: 12px; 
    overflow: hidden; 
    margin-bottom: 40px; 
    background: #1a4d80; 
}
.vn-banner-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center; 
    z-index: 1; 
    transition: 0.5s ease; 
}
.vn-banner-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, rgba(23,62,98,0.95) 0%, rgba(23,62,98,0.7) 50%, rgba(23,62,98,0.4) 100%); 
    z-index: 2; 
}
.vn-banner-content { 
    position: relative; 
    z-index: 3; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    padding: 0 40px; 
    gap: 15px; 
}
.vn-banner-icon-wrap svg, .vn-banner-icon-wrap img { 
    width: 35px; 
    height: 35px; 
    fill: #fff; 
}
#vn-banner-title { 
    margin: 0; 
    font-size: 28px; 
    font-weight: 700; 
    color: #fff; 
    text-transform: capitalize; 
}

/* =========================================
   4. GRID ITEMS & LOADING SPINNER
   ========================================= */
.vn-travel-grid-wrap { 
    position: relative; 
    min-height: 300px; 
}
.vn-travel-loader { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.6); 
    backdrop-filter: blur(2px); 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 16px; 
}
.vn-spinner { 
    width: 40px; 
    height: 40px; 
    border: 4px solid #f3f3f3; 
    border-top: 4px solid #e60023; 
    border-radius: 50%; 
    animation: vn-spin 1s linear infinite; 
}
@keyframes vn-spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

.vn-travel-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
}

/* Card Giao diện */
.vn-travel-item { 
    position: relative; 
    border-radius: 16px; 
    overflow: hidden; 
    height: 420px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    transition: 0.3s; 
    background: #000; 
    cursor: pointer; 
}
.vn-travel-item:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
}
.vn-travel-inner { 
    display: block; 
    width: 100%; 
    height: 100%; 
    position: relative; 
}
.vn-travel-thumb { 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: 0.5s; 
    z-index: 1; 
}
.vn-travel-item:hover .vn-travel-thumb { 
    transform: scale(1.05); 
}
.vn-travel-overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 80%; 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); 
    z-index: 2; 
    pointer-events: none; 
}

/* Nội dung Text đè trên ảnh */
.vn-travel-content { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    padding: 25px; 
    z-index: 3; 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}
.vn-date-badge {
    display: inline-flex; 
    align-items: center; 
    gap: 6px;
    background: #eaf0fb; 
    color: #1a4d80; 
    padding: 6px 14px; 
    border-radius: 30px;
    font-size: 13px; 
    font-weight: 600;
    margin-bottom: 15px;
}
.vn-date-badge .dashicons { 
    font-size: 14px; 
    width: 14px; 
    height: 14px; 
    margin-top: 1px; 
}
.vn-travel-title { 
    font-size: 18px; 
    font-weight: 700; 
    color: #fff; 
    margin: 0 0 8px 0; 
    line-height: 1.35; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}
.vn-excerpt { 
    color: #eee; 
    font-size: 14px; 
    margin-bottom: 15px; 
    line-height: 1.4; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}
.vn-travel-price { 
    font-size: 22px; 
    font-weight: 700; 
    color: #fff; 
    letter-spacing: 0.5px; 
}

.vn-no-result { 
    grid-column: 1 / -1; 
    text-align: center; 
    padding: 60px; 
    background: #f9f9f9; 
    border-radius: 12px; 
    color: #666; 
}

/* =========================================
   5. POPUP MODAL (SPLIT 50/50)
   ========================================= */
.vn-modal { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: 99999; 
}
.vn-modal-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); 
    backdrop-filter: blur(4px); 
}
.vn-modal-container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
    max-width: 1000px; 
    height: 85vh; 
    max-height: 600px; 
    background: #fff; 
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); 
}

/* Nút Close */
.vn-modal-close { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    z-index: 10; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background: #fff; 
    border: 1px solid #ddd; 
    font-size: 18px; 
    color: #666; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.3s; 
}
.vn-modal-close:hover { 
    background: #e60023; 
    color: #fff; 
    border-color: #e60023; 
}

/* Layout Trái - Phải */
.vn-modal-layout { 
    display: flex; 
    width: 100%; 
    height: 100%; 
}
.vn-modal-left { 
    width: 50%; 
    height: 100%; 
    background: #000; 
    position: relative; 
}
.vn-modal-right { 
    width: 50%; 
    height: 100%; 
    padding: 50px 40px; 
    overflow-y: auto; 
    box-sizing: border-box; 
    position: relative; 
}

/* Slider trong Modal */
.vn-modal-swiper { 
    width: 100%; 
    height: 100%; 
}
.vn-modal-swiper .swiper-slide img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.vn-modal-swiper .swiper-pagination-bullet { 
    background: #fff; 
    opacity: 0.5; 
}
.vn-modal-swiper .swiper-pagination-bullet-active { 
    opacity: 1; 
    background: #e60023; 
}
.vn-modal-swiper .swiper-button-next, 
.vn-modal-swiper .swiper-button-prev { 
    color: #fff; 
    background: rgba(0,0,0,0.3); 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
}
.vn-modal-swiper .swiper-button-next:after, 
.vn-modal-swiper .swiper-button-prev:after { 
    font-size: 18px; 
}

/* Nội dung Modal */
.vn-m-header { margin-bottom: 25px; }
.vn-m-date { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: #f0f4ff; 
    color: #1a4d80; 
    padding: 6px 14px; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 600; 
    margin-bottom: 15px; 
}
.vn-m-date .dashicons { 
    font-size: 16px; 
    width: 16px; 
    height: 16px; 
    margin-top: 2px;
}
.vn-m-title { 
    font-size: 26px; 
    font-weight: 700; 
    color: #333; 
    margin: 0; 
    line-height: 1.3; 
    text-transform: uppercase; 
}
.vn-m-meta { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    margin-bottom: 25px; 
    padding-bottom: 25px; 
    border-bottom: 1px solid #eee; 
}
.vn-m-info { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 15px; 
    color: #555; 
}
.vn-m-info .dashicons { 
    font-size: 18px; 
    width: 18px; 
    height: 18px; 
    color: #999; 
    margin-top: 2px; 
}
.vn-m-info a { 
    color: #1a4d80; 
    text-decoration: none; 
    word-break: break-all; 
}
.vn-m-info a:hover { 
    text-decoration: underline; 
}
.vn-m-content { 
    font-size: 15px; 
    line-height: 1.6; 
    color: #444; 
}
.vn-m-content p { 
    margin-bottom: 15px; 
}

/* =========================================
   6. RESPONSIVE (MOBILE & TABLET)
   ========================================= */
@media (max-width: 1024px) { 
    .vn-travel-grid { grid-template-columns: repeat(3, 1fr); } 
}
@media (max-width: 768px) {
    .vn-travel-grid { grid-template-columns: repeat(2, 1fr); }
    .vn-travel-tabs-wrapper { width: 100%; overflow-x: auto; white-space: nowrap; justify-content: flex-start; }
    .vn-travel-filters { width: 100%; justify-content: space-between; }
    
    /* Responsive Modal */
    .vn-modal-layout { flex-direction: column; }
    .vn-modal-left { width: 100%; height: 40%; }
    .vn-modal-right { width: 100%; height: 60%; padding: 25px; }
    .vn-m-title { font-size: 20px; }
}
@media (max-width: 480px) { 
    .vn-travel-grid { grid-template-columns: 1fr; } 
    .vn-filter-group { margin-left: 0; padding: 5px 10px; }
}