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

.bg-header-img {
    min-height: 450px;
}

.header-hero {
    position: relative;
}



.header-carousel {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.header-content {
    position: relative;
}

.carousel {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    height: 100%;
}

.slide {
    height: 100%;
    flex-shrink: 0;
}

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

@media (min-width: 576px) {
    .header-carousel {
        top: 60px !important;
    }
}

#scrollTopBtn {
    position: fixed;
    background: #fff;
    z-index: 999999999;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    transition-property: bottom, transform;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    bottom: 0px;
    width: 60px;
    height: 60px;
    right: 0;
    left: auto;
    margin: 20px;
}

@media (max-width: 1440px) {
    #scrollTopBtn {
        bottom: 70px;
    }
}

#scrollTopBtn svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* --- Next Block --- */

#loading-animation img {
    width: 150px !important;
}

/* --- Next Block --- */

/*                .header-hero.bg-header-img {
                    background: none;
                }*/

.bg-header-img {
    min-height: 520px;
}

/* --- Next Block --- */

/* Chrome / Edge / Safari */

html::-webkit-scrollbar,

body::-webkit-scrollbar {

    width: 0px !important;

    height: 0px !important;

}



/* Firefox */

html,
body {

    scrollbar-width: none !important;

}





.lang-item {

    display: block;

    border: 1.5px solid #e0e0e0;

    color: #212427;

    font-size: 0.9rem;

    padding: 0.3rem 1rem;

    border-radius: 22px;

    white-space: nowrap;

    font-weight: 500;

    cursor: pointer;

    text-align: center;

}



.lang-item.active {

    background-color: #3563ed;

    color: white;

    border-color: #3563ed;

    font-weight: 600;

}



.lang-item.active:hover {

    background-color: #0056b3 !important;

    color: white !important;

}



.lang-item.active b {

    color: white;

}



.currency-item {

    display: block;

    border: 1.5px solid #e0e0e0;

    color: #212427;

    font-size: 0.9rem;

    padding: 0.3rem 1rem;

    border-radius: 22px;

    transition: all 0.2s ease;

    white-space: nowrap;

    font-weight: 500;

    cursor: pointer;

    text-align: center;

}



.currency-item:hover {

    background-color: #f8f9fa;

    text-decoration: none;

    color: #212427;

}



.currency-item.active {

    background-color: #3563ed;

    color: white;

    border-color: #3563ed;

    font-weight: 600;

}



.currency-item.active:hover {

    background-color: #0056b3 !important;

    color: white !important;

}



.dropdown-section-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: #333;

    margin-bottom: 0.85rem;

}



#dropdownHoverButton {

    border-radius: 0.5rem;

}



#dropdownHoverButton p {

    font-weight: 600 !important;

    color: #212427 !important;

}



.lang-currency-btn {

    padding: 2px 6px !important;

    font-size: 0.85rem;

    line-height: 1;

}



.lang-currency-btn .dropdown-arrow {

    width: 16px;

    height: 16px
}



.lang-currency-btn .img-culture-selected {

    width: 16px !important;

    height: 16px !important;

}



.lang-currency-btn .fw-semibold {

    font-size: 0.8rem;

}











.drawer-overlay {

    position: fixed !important;

    inset: 0 !important;

    z-index: 9999 !important;

    pointer-events: none !important;

}



.drawer-panel-top {

    position: fixed !important;

    left: 0 !important;

    right: 0 !important;

    top: 39px !important;

    max-height: calc(100vh - 39px) !important;

    background: #fff !important;

    border-bottom-left-radius: 16px !important;

    border-bottom-right-radius: 16px !important;

    overflow: hidden !important;



    pointer-events: auto !important;



    clip-path: inset(0 0 100% 0) !important;

    transition: clip-path .25s ease !important;

    border-bottom: 1px solid #E5E7EB !important;



    padding-bottom: 35px !important;

}



/* mở */

.drawer-overlay.is-open .drawer-panel-top {

    clip-path: inset(0 0 0 0) !important;

}





body.drawer-open {

    overflow: hidden !important;

}







.drawer-content {

    width: 100% !important;

}



.drawer-content .mobile-menu {

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #fff !important;

    border-radius: 0 !important;

    /*  padding-left: 16px !important;*/

    padding-bottom: 8px !important;

}



.drawer-content .mobile-menu>li {

    margin: 0 !important;

    padding: 0 !important;

    border-top: 1px solid #E9ECEF !important;

}



.drawer-content .mobile-menu>li:first-child {

    border-top: 0 !important;

}



/* link */

.drawer-content .mobile-menu>li>a {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;



    padding: 14px 0px !important;

    color: #6B7280 !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    text-decoration: none !important;



    background: transparent !important;

}



.drawer-content .mobile-menu>li>a:hover {

    background: #F8F9FA !important;

    color: #111827 !important;

}



.drawer-content .mobile-menu svg {

    flex: 0 0 auto !important;

    margin-left: 12px !important;

}



.drawer-content .mobile-menu .social-link {

    display: flex !important;

    gap: 12px !important;

    padding: 14px 16px !important;

    border-top: 1px solid #E9ECEF !important;

}



.drawer-content .mobile-menu .social-link a {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-decoration: none !important;

}













@media (min-width: 576px) {

    #header .navbar-header {

        height: 60px;

    }

}



/* Menu Items Animation */

.li-menu-item {

    position: relative;

}



.li-menu-item a {

    color: #212427 !important;

    font-weight: 500;

    font-size: 1rem;

    padding: 0.5rem;

    position: relative;

    transition: all 0.25s ease;

    text-decoration: none;

    line-height: 1.2;

    white-space: nowrap;

    z-index: 2;

}



/* Animated border bottom */

.li-menu-item::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0%;

    height: 3px;

    background: #000000;

    transition: width 0.25s ease-in-out 0s;

    z-index: 1;

}



.li-menu-item:hover::after {

    width: 100%
}



/* Active state */

.li-menu-item.active::after {

    transform: translateX(0);

    background: #000000;

}



/* Alternative Animation - Sliding from center */

.li-menu-item.center-slide::after {

    left: 50%;

    width: 0;

    transform: translateX(-50%);

    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.li-menu-item.center-slide:hover::after {

    width: 100%;

}



/* Alternative Animation - Expanding width */

.li-menu-item.expand::after {

    width: 0;

    transform: translateX(0);

    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.li-menu-item.expand:hover::after {

    width: 100%;

}



/* Dropdown menu items animation */

.item-menu {

    position: relative;

    transition: all 0.3s ease;

}



/* Mobile responsive */

@media (max-width: 1023px) {

    .li-menu-item::after {

        height: 2px;

    }

}





.logo-header {

    height: 26px !important;

}



@media (min-width: 576px) {

    .logo-header {

        height: 32px !important;

    }

    .drawer-panel-top {

        top: 59px !important;

        max-height: calc(100vh - 59px) !important;

    }



    .lang-currency-btn {

        padding: 4px 10px !important;

        font-size: 0.9rem;

        line-height: 1;

    }



    .lang-currency-btn .dropdown-arrow {

        width: 20px;

        height: 20px
    }



    .lang-currency-btn .img-culture-selected {

        width: 20px !important;

        height: 20px !important;

    }



    .lang-currency-btn .fw-semibold {

        font-size: 0.9rem;

    }



}




.icon-menu-mobile {

    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center center;

    width: 30px;

    height: 30px;

    display: block;

    background-size: contain;

}



.icon-menu-mobile1 {

    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center center;

    width: 30px;

    height: 30px;

    display: block;

    background-size: contain;

}



.lang-item:hover,
.currency-item:hover {

    border-color: rgba(0, 0, 0, 0.3);

}





.lang-item:hover,
.currency-item:hover {

    border-color: rgba(0, 0, 0, 0.3);

}





.lang-currency-dropdown {

    position: relative;

    z-index: 10050;

}



.lang-currency-dropdown .language-currency-dropdown {

    position: relative;

    z-index: 10051 !important;

}

/* --- Next Block --- */

/* @media (max-width: 767px) {
                                                            .header-hero.bg-header-img {
                                                                background: url('/assets/smiletrip/Images/background/bg-home.webp') center/cover no-repeat !important;
                                                            }
                                                        } */

@media screen and (min-width: 992px) {
    /*            .search-wraper {
                margin-top: 100px !important;
            }*/
}

.bg-header-img {
    background: none !important;
}

/* Homepage Slider Styles */
.homepage-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;

}

.homepage-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide-item.active {
    opacity: 1;
    z-index: 1;
}

.homepage-search-banner {
    position: relative;
    z-index: 100;
}

.search-box-home {
    margin-top: 220px !important;
}

@media screen and (max-width: 991px) {
    .search-box-home {
        margin-top: 100px !important;
    }
}

@media screen and (max-width: 500px) {
    .search-box-home {
        margin-top: 20px !important;
    }
}

/* --- Next Block --- */

:is(.sugestion ul) li+li,
:is(.sugestion) ul+.suggest-item,
:is(.sugestion) .suggest-item+.suggest-item,
:is(.sugestion) ul.hidden+.items-center {
    border-top: 1px dotted #BCBCBC;
}

.hot-place-search:nth-last-child(1) {
    border: none;
}

.pb-\[8px\] {
    padding-bottom: 8px !important;
}

.sugestion div:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

:is(.sugestion) div:last-child+ul.hidden {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.ui-datepicker-calendar td span {
    position: relative;
}

.ui-datepicker-calendar td span[data-slot]::before {
    content: attr(data-slot);
    display: block;
    position: absolute;
    font-size: 8px;
    font-weight: 500;
    color: #BCBCBC;
    right: 2px;
    top: -1px;
}

.err-msg:after {
    position: absolute;
    left: -1px;
    bottom: 100%;
    padding: 8px 10px;
    max-width: 100%;
    border: 1px solid #d9481b;
    opacity: 1;
    background-color: #d9481b;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    content: attr(data-error);
    z-index: 100
}

.err-msg:before {
    position: absolute;
    left: 30px;
    top: 0;
    border: 9px solid transparent;
    border-top-color: #d9481b;
    content: "";
    z-index: 10;
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 100%;
}

.date-in-trip a {
    background: var(--Palette-01, #E5EFF7) !important;
    border-radius: 0 !important;
    font-weight: bold;
    color: #3264ff !important;
}

.date-in-trip-hover a {
    background: #EEF3FE !important;
    border-radius: 0 !important;
}

.end-date-hover a {
    background: #B8CFFF !important;
    border-radius: 0 4px 4px 0 !important;
    font-weight: bold;
    color: #3264ff !important;
}

.start-date-hover a {
    background: #B8CFFF !important;
    border-radius: 4px 0 0 4px !important;
    font-weight: bold;
    color: #3264ff !important;
}

.ui-datepicker-inline .ui-state-default {
    width: 100%;
    height: 42px;
}

.ui-datepicker td {
    padding: 2px 0;
}

.start-date-in-trip a,
.ui-datepicker-current-day a {
    background: #3264ff !important;
    border: none !important;
    color: #fff !important;
    font-weight: bold !important;
}

.start-date-in-trip a {
    border-radius: 4px 0 0 4px !important;
}

.date-in-trip.ui-datepicker-current-day a {
    border-radius: 0 4px 4px 0 !important;
}

.ui-datepicker-current-day.start-date-in-trip a {
    border-radius: 4px !important;
}

.ui-state-disabled.ui-datepicker-today span {
    background: inherit !important;
}

.search-box [type='radio']:checked {
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.search-box [type='radio']:hover,
.search-box .items-center label:hover {
    cursor: pointer;
}

.border-1 {
    border-width: 1px !important;
}

.search-box .border-\[\#E1E1EA\]:hover {
    --tw-border-opacity: 1;
    border-color: #475569;
}

.xl\:py-\[9px\] {
    padding-bottom: 9px;
    padding-top: 9px;
}

.xl\:py-\[17px\] {
    padding-bottom: 17px;
    padding-top: 17px;
}

.switch-button {
    transform-origin: center center;
    will-change: transform;
}

.switch-button.spinning {
    animation: switch-spin 420ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@keyframes switch-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    30% {
        transform: rotate(180deg) scale(1.05);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.country-header {
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
}

.country-header-icon {
    color: #3563ed;
    font-size: 16px;
}

.country-header-text {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.toggle-icon {
    color: #666;
    font-size: 14px;
    transition: transform 0.2s;
}

.cities-list {
    padding: 8px 0;
}

.suggestion-item {
    padding: 10px 12px 10px 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.suggestion-item:hover {
    background: #f5f7fa;
    border-radius: 4px;
}

.suggestion-icon {
    color: #666;
    font-size: 14px;
}

.suggestion-text {
    font-weight: 500;
    font-size: 12px;
}

#flightClassBtn:focus,
#flightClassBtn:focus-visible,
#flightClassBtn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile overrides */
@media (max-width: 992px) {
    .add-segment-wrapper {
        margin-top: 0px !important;
        font-size: 0.75rem !important;
    }

    .country-header {
        padding: 6px 0 !important;
    }

    .country-header-text,
    .country-header-icon,
    .toggle-icon {
        font-size: 0.75rem !important;
    }

    .suggestion-item {
        padding: 6px 10px 6px 20px !important;
    }

    .suggestion-text,
    .suggestion-icon {
        font-size: 0.625rem !important;
    }
}

.dropdown-section-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.dropdown-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.dropdown-item-custom {
    flex: 0 0 33.3333%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flight-passenger {
    font-size: 14px;
}

@media (max-width: 992px) {
    .flight-passenger {
        font-size: 0.75rem !important;
    }

    .custom-dropdown {
        min-width: 20rem !important;
        left: 0 !important;
        padding: 1rem !important;
        max-height: 350px !important;
    }

    .recent-search-tag {
        font-size: 0.625rem !important;
    }

    .dropdown-section-title {
        font-size: 0.75rem !important;
    }

    .city-item {
        font-size: 0.625rem !important;
    }

    .custom-title-wrapper {
        padding: 8px 12px;
        font-size: 10px;
        margin: 0 !important;
    }
}

.lunar-date {
    font-size: 0.5rem;
    color: #999;
    position: absolute;
    top: -20%;
}

#calendar-month-1,
#calendar-month-2 {
    overflow: hidden;
    position: relative;
}

/* Calendar styles */
#calendar-container {
    padding: 0.5rem 1rem 1rem 1rem !important;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.flatpickr-day.flatpickr-disabled {
    color: rgba(57, 57, 57, 0.4) !important;
}

.form-control {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.flatpickr-calendar {
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.flatpickr-calendar.hasTime .flatpickr-time {
    display: none !important;
}

/* Header styles */
.calendar-header {
    padding: 12px 16px;
    background: white;
}

.calendar-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.calendar-tab {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 10px;
    cursor: pointer;
}

.calendar-tab.active {
    background: #3563ed;
    color: white;
}

.calendar-tab:not(.active) {
    background: white;
    color: #3563ed;
    border: 1px solid rgb(217, 217, 217);
}

/* Month navigation */
.calendar-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.btn-order-reorder {
    max-width: 12rem;
}

.month-title {
    font-size: 16px;
    font-weight: 500;
    color: #3563ed;
    text-align: center;
}

.month {
    font-size: 1rem;
}

.nav-btn {
    border: none;
    background: none;
    padding: 8px;
    cursor: pointer;
    color: #3563ed;
}

/* Calendar grid */
.flatpickr-weekdays {
    background: white;
    margin-bottom: 4px;
}

.flatpickr-weekday {
    color: #666 !important;
    font-weight: 500;
    font-size: 14px !important;
}

.flatpickr-day {
    border-radius: 8px;
    height: 40px;
    line-height: 1.2;
    margin: 2px;
    font-size: 16px;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative !important;
}

.flatpickr-day.flatpickr-disabled.prevMonthDay,
.flatpickr-day.flatpickr-disabled.nextMonthDay {
    visibility: hidden !important;
    pointer-events: none;
}

.flatpickr-calendar .dayContainer .flatpickr-day:nth-child(n + 36) {
    display: none !important;
}

.dayContainer {
    padding-bottom: 5px !important;
}

.flatpickr-day.selected {
    background: #3563ed !important;
    border-color: #3563ed !important;
    color: white !important;
}

.flatpickr-day.today {
    border-color: transparent !important;
}

.app-input-text-full-black:focus {
    outline: none !important;
    box-shadow: none !important;
}

.flatpickr-weekday:nth-child(6),
.flatpickr-weekday:nth-child(7) {
    color: #ff9800 !important;
}

/* Price indicators */
.price-indicator {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.price-special {
    color: #ff6b00;
}

/* Calendar wrapper */
.calendar-wrapper {
    display: flex;
    gap: 24px;
}

.departure-calendar,
.return-calendar {
    flex: 1;
    position: relative;
}

/* Month arrows */
.prev-month,
.next-month {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    color: #3563ed;
    cursor: pointer;
    z-index: 2;
}

.prev-month {
    left: -12px;
}

.next-month {
    right: -12px;
}

/* Misc */
.scroll-down-to-see-more {
    position: absolute;
    bottom: 0;
    text-align: center;
}

.scroll-down-to-see-more p {
    margin-bottom: 0.25rem;
}

.scroll-down-to-see-more i {
    animation: bounce infinite 2s;
}

.multi-city-container {
    transition: all 0.3s ease;
}

.multi-city-container .flight-route-choosing,
.multi-city-container .flight-time-choosing {
    transition: all 0.3s ease;
}

.btn-link {
    color: #3563ed;
}

.btn-link:hover {
    color: #0d47a1;
}

.segment-header {
    color: #666;
    margin-bottom: 0.5rem;
}

.flight-segment {
    padding-top: 0.5rem;
}

.add-segment-btn {
    color: #3563ed;
    border: none;
    background: none;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.add-segment-btn:hover {
    color: #0d47a1;
}

#segment-calendar-container {
    position: absolute;
    background: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1060;
}

#flightClassBtn {
    transition: all 0.2s ease;
}

#flightClassBtn:hover {
    background: #f8f9fa !important;
}

/* --- ADDED: truncate long selected class text with ellipsis --- */
#flightClassBtn #selectedClass {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flight class dropdown */
#flightClassDropdown {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.flight-class-option {
    transition: all 0.2s ease;
}

.flight-class-option:hover {
    background: #f8f9fa !important;
}

.flight-class-option.selected {
    background: #e3f2fd !important;
}

.flight-class-option .fw-bold {
    color: #333;
    font-size: 1.1rem;
}

.flight-class-option .text-muted {
    color: #666 !important;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tabs-row {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 1.5rem;
}

.tabs-row .nav-tabs {
    margin-bottom: 0 !important;
    border: 0 !important;
}

.tabs-row #flightClassBtn {
    white-space: nowrap;
}

@media (max-width: 992px) {
    #checkbox {
        justify-content: start !important;
    }

    .btn-order-reorder {
        width: 100% !important;
    }

    .add-segment-wrapper,
    .form-check {
        width: 100% !important;
        justify-content: center !important;
    }

    .form-check {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .form-check .btn {
        width: 100% !important;
        /* nút "Tìm kiếm" chiếm hết ngang */
    }

    .form-control {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem;
        height: 40px !important;
    }

    .flatpickr-day {
        font-size: 0.75rem !important;
    }

    .lunar-date {
        font-size: 0.45rem !important;
    }

    .month,
    .flatpickr-weekday {
        font-size: 0.625rem !important;
    }
}

/* Stack on mobile */
@media (max-width: 992px) {
    .tabs-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 1rem;
    }

    .tabs-row #flightClassBtn {
        width: 100%;
    }

    #flightClassBtn #selectedClass {
        max-width: 80% !important;
    }
}

/* Inputs responsive grouping */
.input-rows {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    width: 100%;
}

.left-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 9;
}

.right-controls {
    display: flex;
    flex: 2;
}

@media (max-width: 414px) {
    .input-rows {
        flex-direction: column;
        gap: 0px;
    }
}

@media (max-width: 992px) {
    .input-rows {
        flex-direction: column;
        gap: 0.5rem;
    }

    .left-controls {
        display: flex;
        align-items: center;
        flex-direction: row !important;
        gap: 0.5rem;
    }

    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .flight-route-choosing,
    .flight-time-choosing,
    .flight-passenger,
    .right-controls {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100%;
        gap: 0.5rem;
    }

    .flight-route-choosing-left,
    .flight-route-choosing-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    .filter-move {
        align-self: center !important;
        position: static !important;
        margin-bottom: 0 !important;
    }
}

/* 0-767px: inputs have margin-top: 12px, switch needs to match */

@media (min-width: 993px) {

    .flight-route-choosing,
    .flight-time-choosing,
    .flight-passenger,
    .right-controls {
        gap: 1rem;
    }
}


@media (max-width: 767px) {
    .filter-move {
        margin-top: 12px !important;
    }
}

/* 768-992px: inputs have no margin-top, switch needs 0 */
@media (min-width: 768px) and (max-width: 992px) {
    .filter-move {
        margin-top: 0 !important;
    }
}

.input-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: none;
    color: #999;
    font-size: 16px;
    z-index: 10;
}

.input-clear-btn:hover {
    color: #666;
}

.input-clear-btn.show {
    display: block;
}

.search-suggestions::-webkit-scrollbar {
    width: 6px;
}

.search-suggestions::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
}

.custom-dropdown::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
}

.custom-dropdown::-webkit-scrollbar {
    width: 6px;
}

/* Recent search tags */
.recent-search-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    color: black;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    justify-content: space-between;
}

.recent-search-tag:hover {
    background-color: #e8e8e8;
}

.recent-search-tag i {
    font-size: 10px;
    color: #ff6b00;
}

/* City items */
.city-item {
    font-size: 12px;
    color: black;
    cursor: pointer;
    transition: all 0.2s ease;
}

.city-item:hover {
    color: #3563ed;
}

.dropdown-section-title {
    font-size: 14px;
    font-weight: 600;
    color: black;
    margin-bottom: 0.75rem;
}

/* Override existing dropdown-row for grid layout */
.dropdown-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Separate class for city grid layout */
.cities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 992px) {
    .cities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.country-header {
    transition: background-color 0.2s ease;
    padding: 8px 12px 8px 0;
    font-size: 14px;
}

.country-header:hover {
    background-color: #f5f5f5;
}

.cities-list {
    padding-left: 0;
}

.search-suggestions {
    max-height: 300px;
    overflow-y: auto;
}

.suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.suggestion-item:hover {
    background-color: #f5f5f5;
    color: #3563ed;
}

.suggestion-item i {
    color: #666;
    font-size: 14px;
}

.search-input-location:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.1);
    border-color: #3563ed;
}

/* Highlight for dates between departure and return */
.flatpickr-day.in-range {
    background-color: rgba(21, 101, 192, 0.1) !important;
    border-color: transparent !important;
    border-radius: 8px !important;
}

.flatpickr-day.in-range:hover {
    background-color: rgba(21, 101, 192, 0.2) !important;
}

/* Keep selected dates style */
.flatpickr-day.selected {
    background-color: #3563ed !important;
    color: white !important;
    border-color: #3563ed !important;
}

.flatpickr-day.selected:hover {
    background-color: #0d47a1 !important;
    border-color: #0d47a1 !important;
}

.ticket-type-list {
    padding: 0px;
}

.ticket-name-selected {
    font-weight: 700;
    font-size: 1.25rem;
    color: #585353;
}

@media screen and (max-width: 992px) {
    .ticket-name-selected {
        font-size: 14px;
        color: black;
        font-weight: 500;
    }

    .trip-type-selected {
        font-size: 14px;
        color: black;
        font-weight: 500;
    }

    .ticket-type-list {
        padding: 0px 0px 50px;
    }
}

.dropdown-header {
    display: none;
}

@media screen and (max-width: 1024px) {
    .dropdown-header {
        display: flex;
    }
}

@media screen and (min-width: 992px) {
    .lg_mt_4 {
        margin-top: 16px;
    }
}


/* Override Tailwind sm: classes to keep mobile layout until 992px */
@media (max-width: 992px) {
    .filter-route-type .filter-route-type-item label {
        font-size: 16px;
    }

    /* sm:block → keep hidden */
    .filter-route-type-item.sm\:block {
        display: none !important;
    }

    /* sm:hidden → keep visible */
    .filter-route-type-item.sm\:hidden,
    .flex.sm\:hidden {
        display: flex !important;
    }

    /* sm:w-auto → keep full width */
    .sm\:w-auto {
        width: 100% !important;
    }

    /* sm:w-[238px] → keep full width */
    .sm\:w-\[238px\] {
        width: 100% !important;
    }

    /* sm:w-[calc(100%-254px)] → keep full width */
    .sm\:w-\[calc\(100\%-254px\)\] {
        width: 100% !important;
    }

    /* sm:py-[4px] → keep small padding so height matches other inputs */
    .sm\:py-\[4px\] {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* sm:py-[12px] → adjust to match 50px total height */
    .sm\:py-\[12px\] {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    /* Uniform height for all input containers on mobile */
    .flight-route-choosing-left,
    .flight-route-choosing-right {
        min-height: 50px !important;
        box-sizing: border-box !important;
    }

    .filter-date,
    .dropdown-date-wrap {
        min-height: 50px !important;
        box-sizing: border-box !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #dropdownPersonButton {
        min-height: 50px !important;
        box-sizing: border-box !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    /* Uniform font styles for all search form inputs */
    .flight-route-choosing-left input,
    .flight-route-choosing-right input,
    .dropdownDatepicker,
    .pax-summary {
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    /* sm:text-[14px] → keep small */
    .sm\:text-\[14px\] {
        font-size: 12px !important;
    }

    /* sm:flex-nowrap → keep wrap */
    .sm\:flex-nowrap {
        flex-wrap: wrap !important;
    }

    /* sm:mt-[24px] → keep smaller margin */
    .sm\:mt-\[24px\] {
        margin-top: 12px !important;
    }

    /* sm:gap-[16px] → keep smaller gap */
    .sm\:gap-\[16px\] {
        gap: 12px !important;
    }

    /* sm:justify-center → keep start */
    .sm\:justify-center {
        justify-content: flex-start !important;
    }

    /* sm:block for SVG icons → keep hidden */
    svg.sm\:block {
        display: none !important;
    }

    /* sm:hidden for SVG icons → keep visible */
    svg.sm\:hidden {
        display: block !important;
    }
}

/* Apply desktop (xl:) styles from 993px instead of 1280px */
@media (min-width: 993px) {


    .pl-\[35px\] {
        padding-left: 10px;
    }

    /* Form layout: desktop widths */
    .filter-date.xl\:w-\[34\%\],
    .filter-date {
        width: 34% !important;
    }

    .filter-person.xl\:w-\[22\.5\%\],
    .filter-person,
    .sm\:w-\[238px\] {
        width: 20.5% !important;
    }

    /* Desktop padding */
    .xl\:py-\[9px\] {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .xl\:py-\[17px\] {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .xl\:p-\[24px\] {
        padding: 24px !important;
    }

    /* Desktop font sizes */
    .xl\:text-lg {
        font-size: 1.125rem !important;
    }

    .xl\:text-\[16px\] {
        font-size: 16px !important;
    }

    .xl\:text-sm {
        font-size: 0.875rem !important;
    }

    /* Desktop flex */
    .xl\:flex-nowrap {
        flex-wrap: nowrap !important;
    }

    /* Desktop margins */
    .xl\:mt-\[32px\] {
        margin-top: 32px !important;
    }

    .xl\:mb-0 {
        margin-bottom: 0 !important;
    }

    /* xl:hidden → hide on desktop */
    /*.xl\:hidden {
      display: none !important;
    }*/
    /* Equalize input container heights */
    .flight-route-choosing-left,
    .flight-route-choosing-right {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
}

@media (min-width: 1200px) {
    .pl-\[35px\] {
        padding-left: 35px;
    }
}

@media (max-width: 435px) {

    .search-wraper .dropdown-place-btn input,
    .txtAirport,
    .txtCity {
        padding: 5px;
    }
}

ul {
    padding-left: 0px;
}

/* --- Next Block --- */

.deals-service-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    overflow: hidden;
    gap: 20px;
}

.deals-service-swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 40px) / 3);
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .deals-service-swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - 15px) / 2);
    }
}

@media (max-width: 768px) {
    .deals-service-swiper:not(.swiper-initialized) .swiper-slide {
        width: 100%;
    }
}

/* --- GIỮ NGUYÊN CSS GIAO DIỆN CỦA BẠN --- */
.visa-service-block {
    position: relative;
    padding: 1rem 0;
}

.deals-service-swiper {
    position: relative;
    overflow: hidden;
}

.deals-service-swiper .card {
    border-radius: 12px;
    border: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deals-service-swiper .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.deals-service-swiper .card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 12px;
}

/* Swiper Action Buttons */
.swiper-action {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 10;
}

.swiper-action .swiper-button-next,
.swiper-action .swiper-button-prev {
    position: absolute;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(21, 94, 210, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

#visa-service-action .swiper-button-prev {
    left: 10px;
}

#visa-service-action .swiper-button-next {
    right: 10px;
}

@media screen and (min-width: 845px) {
    #visa-service-action .swiper-button-prev {
        left: -60px;
    }

    #visa-service-action .swiper-button-next {
        right: -60px;
    }
}

@media (min-width: 992px) and (max-width: 1079px) {
    #visa-service-action .swiper-button-prev {
        left: 10px;
    }

    #visa-service-action .swiper-button-next {
        right: 10px;
    }
}


@media (min-width: 1200px) and (max-width: 1250px) {
    #visa-service-action .swiper-button-prev {
        left: 10px;
    }

    #visa-service-action .swiper-button-next {
        right: 10px;
    }
}

@media screen and (min-width: 1440px) {
    #visa-service-action .swiper-button-prev {
        width: 48px;
        height: 48px;
    }

    #visa-service-action .swiper-button-next {
        width: 48px;
        height: 48px;
    }
}

/* --- Next Block --- */

.tab-deals {
    display: flex;
    align-items: center !important;
    justify-content: center;
    margin: 10px 0;
    margin-bottom: 1.5rem;
    gap: 0;
}

.tab-deals-scroll {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
    align-items: center;
}

.tab-deals-scroll::-webkit-scrollbar {
    display: none;
}

.tab-deal {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tab-deal-skeleton {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    background: gray;
}

.tab-deal.active {
    background-color: #3563ed;
    color: white;
}

.tab-deal:hover {
    background-color: #e9ecef;
    text-decoration: none;
    color: #333;
}

.tab-deal.active:hover {
    background-color: #0056b3;
    color: white;
}

.departure-label {
    color: black;
    font-size: 1.2rem;
    margin-right: 12px;
    margin-left: 16px;
    white-space: nowrap;
    flex: 0 0 auto;
    z-index: 2;
    position: relative;
}

.deal-item-card {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.deal-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.departure-date {
    font-size: 1rem;
    color: black;
    display: flex;
    align-items: center;
    gap: 2px;
}

.deal-item-card .deal-item-card-content {
    padding: 1rem;
}

.deal-item-card .deal-item-card-content .text-price {
    font-size: 1rem;
    color: #f7941d;
    font-weight: 700;
}

.deal-item-card .deal-item-card-content .time-flight {
    font-size: 1rem;
    color: #3563ed;
    font-weight: 600;
}

.deal-item-card .deal-item-card-content .deal-item-card-content-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Grid layout */
.deals-flight-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

/* View more/less buttons */
.deals-actions {
    text-align: center;
    margin-top: 2rem;
}

.btn-view-more,
.btn-view-less {
    background-color: #3563ed;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-view-more:hover,
.btn-view-less:hover {
    background-color: #0056b3;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.btn-view-less {
    background-color: #6c757d;
}

.btn-view-less:hover {
    background-color: #545b62;
}

@media (max-width: 1200px) {
    .deals-flight-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .deals-flight-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .deals-flight-list {
        grid-template-columns: 1fr;
    }
}

.custom-card {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
}

.time-flight {
    font-size: 1rem;
    color: #3563ed;
    font-weight: 600;
}

.card-img-top-custom {
    height: 168px;
    width: 100%;
    object-fit: cover;
    /* Đảm bảo ảnh bao phủ toàn bộ vùng */
    position: relative;
}

.airline-logo-overlay {
    position: absolute;
    top: 73%;
    left: 5%;
    background-color: white;
    padding: 5px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    display: flex;
    align-items: center;
}

.airline-logo-overlay img {
    height: 20px;
    /* Kích thước logo */
    /* margin-right: 8px; */
}

.flight-info {
    font-size: 1.05rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-text {
    color: #007bff;
    /* Màu xanh nổi bật */
    font-size: 1.5rem;
    font-weight: bold;
}

.departure-date {
    font-size: 1rem;
    color: black;
}

.expand-icon {
    font-size: 1.5rem;
    color: #495057;
    border: 1px solid #ced4da;
    padding: 8px;
    border-radius: 50%;
    /* Hình tròn */
    background-color: #f8f9fa;
}

/* Nút Xem thêm / Ẩn bớt mặc định */
.d-flex.justify-content-center.align-items-center a {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.departure-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 0;
    border-radius: 10px;
    font-weight: 500;
    margin-bottom: 1.5rem;
    background: transparent;
    position: relative;
}

.departure-label {
    color: black;
    font-size: 1.2rem;
    margin-right: 12px;
    margin-left: 16px;
    white-space: nowrap;
    flex: 0 0 auto;
    z-index: 2;
    position: relative;
}

.departure-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    flex: 1 1 auto;
}

.departure-scroll::-webkit-scrollbar {
    display: none;
}

.departure-btn {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: black;
    font-size: 1.2rem;
    padding: 8px 24px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.departure-btn.active {
    background: #3563ed;
    color: #fff;
}

.departure-btn:hover {
    background: #e2e6ef;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    /* Giảm kích thước ảnh nhẹ */
    .d-flex.align-items-center.p-3 img {
        width: 50px !important;
    }

    /* Giảm kích thước tiêu đề */
    .d-flex.align-items-center.p-3 h6 {
        font-size: 0.9rem;
    }

    /* Giảm kích thước text màu vàng */
    .d-flex.align-items-center.p-3 .text-warning {
        font-size: 0.85rem !important;
    }

    /* Giảm kích thước text bình thường */
    .d-flex.align-items-center.p-3 p,
    .d-flex.align-items-center.p-3 span,
    .d-flex.align-items-center.p-3 .text-muted {
        font-size: 0.85rem;
    }

    /* Nút xem thêm nhỏ hơn chút */
    .d-flex.justify-content-center.align-items-center a {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .departure-btn:hover {
        background: #3563ed;
        color: #fff;
    }

    .departure-bar {
        gap: 0;
        padding: 6px 0 12px 0;
    }

    .departure-label {
        font-size: 0.85rem;
        margin-left: 8px;
        margin-right: 8px;
        position: sticky;
        left: 0;
        z-index: 2;
        padding-right: 8px;
    }

    .departure-scroll {
        gap: 8px;
    }

    .departure-btn {
        font-size: 0.85rem;
        padding: 6px 16px;
    }
}

@media (max-width: 576px) {

    /* Thu nhỏ hơn nữa cho điện thoại */
    .d-flex.justify-content-center.align-items-center {
        min-height: 45px !important;
    }

    .d-flex.align-items-center.p-3 h6 {
        font-size: 0.8rem;
    }

    .d-flex.align-items-center.p-3 .text-warning,
    .d-flex.align-items-center.p-3 p,
    .d-flex.align-items-center.p-3 span,
    .d-flex.align-items-center.p-3 .text-muted {
        font-size: 0.75rem;
    }

    /* Nút xem thêm / ẩn bớt trên điện thoại */
    .d-flex.justify-content-center.align-items-center a {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}

/* Hiệu ứng hover vẫn giữ nguyên */
.d-flex.rounded-3.align-items-center:hover {
    background-color: #f8f9fa !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.deals-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

@media screen and (max-width: 1300px) {
    .deals-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 800px) {
    .deals-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 500px) {
    .deals-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

.airline-logo-overlay {
    position: absolute;
    top: 73%;
    left: 5%;
    background-color: white;
    padding: 5px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    display: flex;
    align-items: center;
}

.airline-logo-overlay img {
    width: 80px;
    height: 25px;
    object-fit: contain;
}

/* --- Next Block --- */

.price-original {
    display: none;
}

.price-from {
    flex-direction: column;
}

.text-from {
    font-size: 1rem;
    color: black;
    font-weight: 500;
}

.text-price {
    font-size: 1rem !important;
}

.flight-flex {
    flex-direction: row;
}

@media screen and (min-width: 500px) {
    .flight-flex {
        flex-direction: column;
    }

    .price-from {
        flex-direction: row;
        gap: 8px;
    }

    .flight-departure {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .departure-date {
        gap: 0px !important;
    }

    .departure-date img {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .flight-flex {
        flex-direction: row;
    }

    .price-from {
        flex-direction: column;
        gap: 0px;
    }

    .flight-departure {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 0px;
    }

    .departure-date img {
        display: block;
        margin-right: 8px !important;
    }
}

@media screen and (min-width: 801px) {
    .flight-flex {
        flex-direction: column;
    }

    .price-from {
        flex-direction: row;
        gap: 8px;
    }

    .flight-departure {
        margin-bottom: 4px;
        flex-direction: row;
    }

    .departure-date {
        gap: 0px !important;
    }

    .departure-date img {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    .flight-flex {
        flex-direction: row;
    }

    .price-from {
        flex-direction: column;
        gap: 0px;
    }

    .flight-departure {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 0px;
    }

    .departure-date img {
        display: block;
        margin-right: 8px !important;
    }
}

/* --- Next Block --- */

.why-icon {
    height: 55px;
    object-fit: contain;
    transition: transform 0.2s ease;
    margin: auto;
}

/* Text sizing */
.why-text {
    font-size: 1rem;
    font-weight: 600;
}

.why-smiletrip .row {
    margin-left: 0;
    margin-right: 0;
}

/* Hover effect */
.why-item:hover .why-icon {
    transform: scale(1.1);
}

/* Small mobile - smaller icons and text */
@media (max-width: 576px) {
    .why-icon {
        height: 30px;
    }

    .why-text {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .why-smiletrip h4 {
        font-size: 1.1rem;
    }
}

/* Extra small mobile */
@media (max-width: 400px) {
    .why-icon {
        height: 25px;
    }

    .why-text {
        font-size: 0.7rem;
    }
}

/* --- Next Block --- */

/* WHY US - style nhẹ, dễ hòa vào layout homepage */
.st-whyus {
    padding: 32px 0;
    background: #fff;
}

.st-whyus__title {
    margin: 0 0 18px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    color: #111827;
}

.st-whyus__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 22px;
    align-items: stretch;
}

.st-whyus__item {
    height: 100%;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    padding: 16px 16px 14px;
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.st-whyus__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 83, 193, 0.18);
}

.st-whyus__item--wide {
    grid-column: 1 / -1;
}

.st-whyus__icon {
    height: 55px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 10px;
}

.st-whyus__icon img {
    height: 55px;
    width: auto;
    display: block;
    object-fit: contain;
}

.st-whyus__heading {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: #111827;
    text-align: center;
}

.st-whyus__desc {
    --clamp-lines: 3;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.65;
}

.st-whyus__desc.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: var(--clamp-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-whyus__desc.is-expanded {
    display: block;
    overflow: visible;
}

.st-whyus__toggle {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #0f53c1;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.st-whyus__toggle:hover {
    text-decoration: underline;
}

.st-whyus__list {
    margin: 10px 0 10px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
    color: #111827;
    font-size: 14px;
    line-height: 1.55;
}

.st-whyus__list li {
    position: relative;
    margin: 0;
    padding-left: 30px;
}

.st-whyus__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(15, 83, 193, 0.12);
    color: #0f53c1;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.st-whyus__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.st-whyus__chip {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    background: rgba(15, 83, 193, 0.04);
    color: #111827;
    font-size: 13px;
    line-height: 1;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .st-whyus__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .st-whyus__grid {
        grid-template-columns: 1fr;
    }

    .st-whyus__title {
        font-size: 20px;
    }
}

/* --- Next Block --- */

/* --- THAY ĐỔI QUAN TRỌNG Ở ĐÂY --- */

.certificate-item {
    /* PC: 5 ảnh 1 hàng => 100% / 5 = 20% */

    flex: 0 0 20%;
    max-width: 20%;
    /*        padding: 0 10px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
}

/* Ảnh tròn - Có thể chỉnh nhỏ lại chút nếu thấy 5 ảnh bị chật */

.img-circle-wrapper {
    width: 130px;
    /* Giảm từ 140 xuống 130 cho thoáng */

    height: 130px;
    /* border-radius: 50%;*/
    /*    background: #fff;*/
    /*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    /*   border: 4px solid #f07c1d;*/

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /*        margin-bottom: 10px;*/
}

.img-circle-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.text-sml {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

/* Giảm font chữ xíu */

/* Nút bấm (Giữ nguyên) */

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}


/*  @media (max-width: 768px) {
    .img-circle-wrapper {
      width: 90px;
      height: 90px !important;
      border-width: 2px;
    }
    .text-sml {
      font-size: 10px !important;
    }
    .nav-btn {
      width: 30px;
      height: 30px;
    }

  }*/

.slider-wrapper {
    position: relative;
    padding: 0 40px;
}

.slider-content {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Trượt mượt */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slider-content::-webkit-scrollbar {
    display: none;
}

.certificate-item {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start;
}

.img-circle-wrapper {
    width: 100px;
    height: 80px;
    /*    border-radius: 50%;*/
    /*    background: #fff;*/
    /*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    /*    border: 4px solid #f07c1d;*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /*        margin-bottom: 10px;*/
}

.img-circle-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.text-sml {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    /* Tăng kích thước nút lên chút cho dễ ấn */
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Màu đen trong suốt */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.nav-btn svg {
    width: 24px;
    height: 24px;
}

/* Mũi tên to rõ */

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* 6. RESPONSIVE MOBILE */

@media (max-width: 500px) {


    .slider-wrapper {
        padding: 0 50px;
    }

    /* Giảm padding khung */

    .certificate-item {
        flex: 0 0 50%;
        /* Mobile hiện 2 ảnh */

        max-width: 50%;
    }

    .certificate-item img {
        background: none;
        box-shadow: none;
    }

    /*        .img-circle-wrapper {
            width: 150px;
            height: 150px;
        }*/

    .img-circle-wrapper img {
        margin-bottom: 0;
    }




    .img-circle-wrapper {
        padding: 6px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .text-sml {
        font-size: 0.75rem;
    }

    /* Mobile ẩn nút đi cũng được, vì vuốt tay sướng hơn, hoặc để nhỏ lại */

    .nav-btn {
        width: 30px;
        height: 30px;
    }

    .nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }
}


@media (min-width: 500px) and (max-width: 768px) {


    .slider-wrapper {
        padding: 0 50px;
    }

    /* Giảm padding khung */

    .certificate-item {
        flex: 0 0 33%;
        /* Mobile hiện 2 ảnh */

        max-width: 33%;
    }

    .certificate-item img {
        background: none;
        box-shadow: none;
    }

    /*.img-circle-wrapper {
            width: 200px;
            height: 200px;*/
    /*      border-width: 2px;*/
    /*}*/

    .img-circle-wrapper {
        padding: 6px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }


    .img-circle-wrapper img {
        margin-bottom: 0;
    }

    .text-sml {
        font-size: 0.75rem;
    }

    /* Mobile ẩn nút đi cũng được, vì vuốt tay sướng hơn, hoặc để nhỏ lại */

    .nav-btn {
        width: 30px;
        height: 30px;
    }

    .nav-btn svg {
        width: 16px;
        height: 16px;
    }

    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .slider-wrapper {
        padding: 0 20px;
    }

    /* Giảm padding khung */

    .certificate-item {
        flex: 0 0 25%;
        /* Mobile hiện 2 ảnh */

        max-width: 25%;
    }

    .certificate-item img {
        background: none;
    }

    /*        .img-circle-wrapper {
            width: 200px;
            height: 200px;
        }*/
}

/* --- Next Block --- */

#prority-tab-content {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 16px;
}

@media screen and (max-width: 1280px) {
    #prority-tab-content {
        grid-template-columns: auto auto auto;
    }
}

@media screen and (max-width: 1024px) {
    #prority-tab-content {
        grid-template-columns: auto auto;
    }
}

@media screen and (max-width: 414px) {
    #prority-tab-content {
        grid-template-columns: auto auto;
    }
}

/* NEW: Tabs header scroll ngang trên mobile */
@media screen and (max-width: 768px) {
    #tab-action-plan {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge legacy */
    }

    #tab-action-plan::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    #tab-action-plan>li {
        flex: 0 0 auto;
        /* không co lại */
    }

    #tab-action-plan button {
        white-space: nowrap;
    }
}

/* --- Next Block --- */

/* Container bao ngoài để ẩn phần tràn */
.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    /* Làm mờ 2 bên cạnh để trông đẹp hơn (tùy chọn) */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Track chứa toàn bộ logo */
.marquee-track {
    display: flex;
    width: max-content;
    /* Quan trọng: độ rộng tự động theo nội dung */
}

/* Hiệu ứng trượt sang trái */
.scroll-left {
    animation: scrollLeft 30s linear infinite;
}

/* Hiệu ứng trượt sang phải */
.scroll-right {
    animation: scrollRight 30s linear infinite;
}

/* Định nghĩa chuyển động */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Dịch chuyển 50% chiều dài (vì đã nhân đôi content) */
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Style cho từng thẻ Logo (giống ảnh mẫu) */
.partner-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    /* Viền xám nhạt */
    border-radius: 10px;
    /* Bo tròn góc */
    padding: 10px 20px;
    width: 160px;
    /* Chiều rộng cố định cho đều */
    height: 60px;
    /* Chiều cao cố định */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Không cho thẻ bị co lại */
    transition: transform 0.3s ease;
}

.gapc-3 {
    gap: 1rem;
}

.msc-3 {
    margin-left: 1rem;
}

.mbc-3 {
    margin-bottom: 1rem;
}

.partner-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Đảm bảo logo không bị méo */
    filter: grayscale(0%);
    /* Có thể để 100% nếu muốn đen trắng */
}

@media (max-width: 768px) {
    .partner-card {
        width: 120px;
        /* Chiều rộng nhỏ hơn trên thiết bị di động */
        height: 45px;
        padding: 5px 10px;
        /* Chiều cao nhỏ hơn trên thiết bị di động */
    }

    .gapc-3 {
        gap: 0.5rem !important;
        /* Giảm khoảng cách giữa các logo trên thiết bị di động */
    }

    .msc-3 {
        margin-left: 0.5rem !important;
    }

    .mbc-3 {
        margin-bottom: 0.5rem !important;
    }
}

/* Tùy chọn: Dừng khi di chuột vào */
/* .marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
  } */
/* .partner-card:hover {
    border-color: #007bff;
    transform: translateY(-2px); 
  } */

/* --- Next Block --- */

footer.bg-light {
    background-color: #f4f4f4 !important;
}

.footer-link {
    color: #444;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.text-normal {
    color: #444;
    font-weight: 500;
}

.footer-link:hover {
    color: #ff9f2b;
    text-decoration: underline;
}

footer h6 {
    color: #333;
    font-size: 1rem;
    text-transform: uppercase;
}

.bi-geo-alt-fill {
    margin-top: 3px;
}

.copyright-bar small {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* --- CÁC STYLE MỚI CHO COLLAPSE --- */

/* Chỉ hiện con trỏ chuột khi ở mobile */
@media (max-width: 767px) {
    .footer-heading {
        cursor: pointer;
    }
}

/* Hiệu ứng xoay icon mũi tên */
.footer-heading .bi-chevron-down {
    transition: transform 0.3s ease;
}

/* Khi mở ra (không có class collapsed) thì xoay mũi tên lên */
.footer-heading:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

/* Fix .collapse utility overriding Bootstrap collapse visibility */
footer .collapse,
footer .collapsing {
    visibility: visible;
}

/* --- STYLE CŨ CHO PARTNER (GIỮ NGUYÊN) --- */
.partner-logo {
    width: auto;
    object-fit: contain;
}

.partner-logo-sm {
    height: 25px;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.partner-cell {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    height: 40px;
    transition: box-shadow 0.2s;
    overflow: hidden;
}

.partner-cell img {
    height: 20px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .partner-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .partner-cell {
        height: 44px;
        padding: 4px;
    }

    .partner-cell img {
        max-height: 24px;
        max-width: 60px;
    }
}

.footer-link {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
    font-size: 14px !important;
}