/*
Theme Name:   Flatsome Child Travel
Theme URI:    https://github.com
Description:  Flatsome Child Theme chuyên nghiệp dành cho Website Du Lịch, Tour Thương Mại & Booking. Tối ưu 100% cho UX Builder và WooCommerce.
Author:       Senior WordPress Developer & UX/UI Designer
Author URI:   https://github.com
Template:     flatsome
Version: 1.0.4
Text Domain:  flatsome-child-travel
*/

/* Tùy chỉnh bổ sung được nạp từ assets/css/travel.css */


/* Ahotua Logo Styling - Increased 50% Size */
.header-main, .header-main .header-inner {
    min-height: 90px !important;
}
#logo, .logo {
    display: flex !important;
    align-items: center !important;
    width: 150px !important;
    flex: 0 0 150px !important;
}
#logo img, .header_logo, .header-logo, .trv-brand-logo img {
    max-height: 80px !important;
    height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
}


/* ==========================================================================
 * HEADER MENU — PERFECT HORIZONTAL ALIGNMENT (ALL TABS ON SAME LINE)
 * Mọi tab đều thẳng hàng, kể cả tab có trang con (dropdown)
 * ========================================================================== */

/* --- UL container: flex row, stretch để mọi li cao bằng nhau --- */
.header-main .header-nav-main,
.header-nav-main,
.header-nav,
.header-main .header-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;   /* stretch = mọi li cao bằng nhau */
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- LI items: flex + center để text luôn ở giữa chiều dọc --- */
.header-main .header-nav-main > li,
.header-nav-main > li {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    /* KHÔNG dùng height: 100% hoặc inline-flex để tránh lệch */
}

/* --- Link text: thống nhất padding, font tiếng Việt chuẩn (Montserrat / Inter / Segoe UI), line-height cho MỌI tab --- */
.header-main .header-nav-main > li > a,
.header-nav-main > li > a,
.nav-line-bottom > li > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 4px !important;
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;          /* line-height cố định */
    padding: 10px 10px !important;      /* padding đồng nhất */
    margin: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* --- Ẩn hoàn toàn mũi tên dropdown để tiêu đề menu 100% thẳng hàng --- */
.header-nav-main > li > a i.icon-angle-down,
.header-nav-main > li > a .icon-angle-down,
.header-nav-main > li.menu-item-has-children > a > i,
.header-nav-main > li.has-dropdown > a > i,
.header-nav-main > li.has-dropdown > a > .icon-angle-down,
.nav-line-bottom > li.has-dropdown > a > i {
    display: none !important;
}

/* --- Responsive: thu nhỏ trên màn hình vừa --- */
@media (max-width: 1300px) and (min-width: 850px) {
    .header-main .header-nav-main > li > a,
    .header-nav-main > li > a {
        font-size: 12px !important;
        padding: 10px 7px !important;
    }
}

#header,
#header .header-wrapper {
    position: relative !important;
    z-index: 100;
    background: #ffffff;
    isolation: isolate;
}

.header-main .header-inner,
#top-bar .container {
    max-width: 1300px !important;
}

/* Desktop Navigation styling */
@media (min-width: 850px) {
    .trv-primary-nav-wrap {
        display: flex !important;
        min-width: 0;
        padding-left: 20px;
    }

    .header-main .header-nav-main {
        width: 100%;
        justify-content: space-between;
        flex-wrap: nowrap !important;
        gap: 0;
        margin: 0 !important;
    }
}

@media (min-width: 1301px) {
    .trv-primary-nav-wrap {
        transform: none;
    }
}

.ux-timer {
    position: relative;
    z-index: 0;
    max-width: 100%;
}

.header-wrapper {
    overflow: hidden;
}

/* ==========================================================================
 * MOBILE MENU SCROLL & UI OPTIMIZATION (<= 849px)
 * Giữ logo nguyên bên trái, danh mục menu cuộn/gạt ngang sang trái/phải mượt mà
 * ========================================================================== */
@media (max-width: 849px) {
    .header-main, .header-main .header-inner {
        min-height: 70px !important;
        height: auto !important;
    }

    .header-main .header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 10px !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    #logo, .logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 120px !important;
        display: flex !important;
        align-items: center !important;
        z-index: 5 !important;
    }

    #logo img, .header_logo, .header-logo, .trv-brand-logo img {
        max-height: 55px !important;
        height: 55px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .trv-primary-nav-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important; /* Firefox */
        display: flex !important;
        align-items: center !important;
    }

    .trv-primary-nav-wrap::-webkit-scrollbar {
        display: none !important; /* Chrome / Safari */
    }

    .header-main .header-nav-main {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 6px 0 !important;
    }

    .header-main .header-nav-main > li {
        flex: 0 0 auto !important;
    }

    .header-main .header-nav-main > li > a {
        font-size: 13px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
    }

    /* Căn giữa các nút xem tất cả trên mobile */
    .col-inner.text-right:has(> a[href*="/tour/"], > a[href*="/du-an-thuc-hien/"], > a[href*="/tin-tuc/"]),
    .col-inner.text-right > a.button.primary.is-outline,
    .row .col.medium-4.small-12 .col-inner.text-right {
        text-align: center !important;
    }

    .row .col.medium-4.small-12 .col-inner.text-right > a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================================
 * RESPONSIVE HERO SLIDER / BANNER POSTER TRÊN MOBILE
 * Giữ đúng tỉ lệ ảnh poster 16:9, không bị ép thành hình vuông / cắt mất chữ
 * ========================================================================== */
@media (max-width: 849px) {
    .content-area > .row > .col > .section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .content-area > .row > .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .trv-hero-slider .banner {
        padding-top: 56.25% !important; /* Tỉ lệ chuẩn 16:9 (720 / 1280) */
        min-height: auto !important;
    }
    .trv-hero-slider .banner-bg img {
        object-fit: cover !important;
        object-position: center center !important;
    }
    .trv-hero-slider .text-box {
        width: 92% !important;
    }
    .trv-hero-slider .text-box h1 {
        font-size: 1.35em !important;
        margin-bottom: 6px !important;
    }
    .trv-hero-slider .text-box p {
        font-size: 0.85em !important;
        margin-bottom: 10px !important;
        line-height: 1.35 !important;
    }
}

/* ==========================================================================
 * CĂN GIỮA TIÊU ĐỀ TOUR & CẨM NANG TRÊN MOBILE
 * ĐỔI MÀU SỐ HOTLINE TƯ VẤN 24/7 SANG TRẮNG (PC & MOBILE)
 * ========================================================================== */
/* Màu số hotline tư vấn 24/7 trên cả desktop lẫn mobile */
.trv-consultation-section strong[style*="color:#E51924"],
.trv-consultation-section strong[style*="color: #E51924"],
.trv-consultation-section strong[style*="rgb(229, 25, 36)"] {
    color: #ffffff !important;
}

@media (max-width: 849px) {
    /* Căn giữa các tiêu đề section trên mobile */
    .content-area .section-title:has(.section-title-main) {
        justify-content: center !important;
        text-align: center !important;
    }
    .content-area .section-title:has(.section-title-main) > b {
        display: block !important;
    }
}

/* ==========================================================================
 * TOPBAR RESPONSIVE & MOBILE LANGUAGE SWITCHER (<= 849px)
 * Đảm bảo Hotline và Nút chuyển đổi ngôn ngữ (VI/EN) hiển thị song song trên mobile
 * ========================================================================== */
@media (max-width: 849px) {
    #top-bar {
        padding: 5px 0 !important;
    }

    #top-bar .container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #top-bar .flex-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #top-bar .header-social-icons {
        font-size: 11.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }

    #top-bar .flex-right {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #top-bar .topbar-lang-wrapper {
        margin-left: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #top-bar .trv-language-switcher {
        padding: 2px 4px !important;
        gap: 2px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    #top-bar .trv-language-button {
        min-width: 36px !important;
        min-height: 24px !important;
        padding: 2px 5px !important;
        font-size: 10.5px !important;
        gap: 3px !important;
    }

    #top-bar .trv-language-button svg {
        width: 15px !important;
        height: 10px !important;
    }
}