/* Global: remove ALL focus outlines/borders site-wide */
*:focus, *:active,
*:focus-within { outline: 0 !important; outline-style: none !important; outline-width: 0 !important; }
a:focus, a:active,
button:focus, button:active,
input:focus, select:focus,
.btn:focus, .btn:active, .btn:active:focus,
.form-control:focus { outline: 0 !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; }

/* ========== BANNER HEIGHT CAP - full cluster visible in 1 viewport ========== */
/* Banner dùng padding-top:29.86% → ở 1920px sẽ cao 589px, vượt viewport của laptop.
   Cap tại 430px (design height) hoặc thấp hơn khi viewport ngắn, đảm bảo banner+search
   luôn nằm trọn trong 1 màn hình (100vh - header ~90px - search ~140px - buffer 50px). */
.dlv-box-slide {
    max-height: min(430px, calc(100vh - 280px));
    overflow: hidden;
}
.dlv-box-slide #vnt-slide-home .img img {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
    max-height: inherit;
}

/* ========== LOCAL SEARCH BAR - OVERLAP BANNER ========== */
.local-search-overlay {
    position: relative;
    z-index: 50;
    margin-top: -45px;
    margin-bottom: 20px;
}

.local-search-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    overflow: visible;
    max-height: none;
}

/* ========== TABS ========== */
.ls-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 0 24px;
    gap: 0;
    overflow-x: visible;
    overflow-y: visible;
    background: #fff;
    border-radius: 12px 12px 0 0;
}

.ls-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-decoration: none !important;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    margin-bottom: -1px;
    outline: none !important;
}
.ls-tab:focus, .ls-tab:active {
    outline: none !important;
    box-shadow: none !important;
}

.ls-tab:hover {
    color: #333;
    text-decoration: none !important;
}

.ls-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

/* ========== PANELS ========== */
.ls-panel {
    display: none;
}

.ls-panel.active {
    display: block;
}

/* ========== FLIGHT TYPE RADIO ========== */
.ls-flight-type {
    display: flex;
    gap: 20px;
    padding: 12px 24px 0;
}

.ls-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    margin: 0;
}

.ls-radio input[type="radio"] {
    accent-color: var(--c-primary);
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.ls-radio input[type="radio"]:checked + span,
.ls-radio:has(input:checked) {
    color: var(--c-primary);
    font-weight: 600;
}

/* ========== SEARCH FIELDS ========== */
.ls-fields {
    display: flex;
    align-items: flex-end;
    padding: 20px 24px;
    gap: 12px;
}

.ls-field {
    flex: 1;
    min-width: 0;
}

.ls-field-grow {
    flex: 1.5;
}

.ls-field-sm {
    flex: 0.6;
}

/* ========== AIRPORT TYPEAHEAD (thay <select> cũ) ========== */
.ls-typeahead {
    position: relative;
    width: 100%;
}
.ls-typeahead-text {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: #fff;
    cursor: text;
    transition: border-color .15s;
    font-family: inherit;
}
.ls-typeahead-text:focus,
.ls-typeahead.open .ls-typeahead-text {
    outline: none;
    border-color: var(--c-primary);
}
.ls-typeahead-text::placeholder {
    color: #aaa;
    font-weight: 400;
}
.ls-typeahead-dd {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 340px;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.15);
    z-index: 100;
    padding: 6px 0;
}
.ls-typeahead.open .ls-typeahead-dd {
    display: block;
}
.ls-typeahead-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid #f5f5f5;
}
.ls-typeahead-item:last-child { border-bottom: none; }
.ls-typeahead-item:hover,
.ls-typeahead-item.ls-hl {
    background: #fff7fb;
}
.ls-typeahead-item-ic {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}
.ls-typeahead-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.ls-typeahead-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.ls-typeahead-item-city {
    font-size: 12px;
    color: #1e40af;
    font-weight: 600;
}
.ls-typeahead-item-code {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #1e40af;
    min-width: 36px;
    text-align: right;
}
.ls-typeahead-empty {
    padding: 16px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.ls-typeahead-grp {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #fafafa;
}

/* Nút đảo chiều Điểm đi ↔ Điểm đến (dùng cho Flight + Combo) */
.ls-swap-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-bottom: 4px;           /* align với đáy select (select có padding ~10px) */
    align-self: flex-end;
    border: 1.5px solid var(--c-primary);
    background: #fff;
    border-radius: 50%;
    color: var(--c-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, background .15s, color .15s;
    padding: 0;
    box-shadow: 0 2px 6px rgba(214, 36, 140, 0.15);
    position: relative;
    z-index: 2;
}
.ls-swap-btn:hover {
    background: var(--c-primary);
    color: #fff;
    transform: rotate(180deg);
}
.ls-swap-btn.swapping {
    transform: rotate(180deg);
}
.ls-swap-btn svg {
    width: 18px;
    height: 18px;
}
@media (max-width: 900px) {
    .ls-swap-btn {
        width: 32px;
        height: 32px;
        align-self: center;
        margin: 0 auto;           /* center khi mobile fields stack vertical */
        transform: rotate(90deg); /* xoay 90° vì layout mobile vertical */
    }
    .ls-swap-btn:hover, .ls-swap-btn.swapping {
        transform: rotate(270deg);
    }
    .ls-swap-btn svg { width: 16px; height: 16px; }
}

.ls-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}

.ls-field label .req {
    color: var(--c-primary);
}

.ls-field select,
.ls-field input[type="text"],
.ls-field input[type="date"] {
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #000;
    font-weight: 700;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: auto;
    appearance: auto;
}

.ls-field input::placeholder {
    color: #999;
    font-weight: 400;
}

.ls-field select:focus,
.ls-field input:focus {
    border-color: var(--c-primary);
}

/* Date picker inputs: luôn có cursor pointer + touch-action để iOS nhận touch */
#lsHotelCheckin,
#lsHotelCheckout,
#lsFlightStart,
#lsFlightEnd,
.lsfc-tour-date {
    cursor: pointer;
    touch-action: manipulation; /* tắt double-tap-to-zoom, tăng độ nhạy touch */
    -webkit-tap-highlight-color: rgba(214,36,140,.08);
    user-select: none;
    -webkit-user-select: none;
}
/* Parent .ls-field cũng clickable để tăng touch target */
.ls-field:has(#lsHotelCheckin),
.ls-field:has(#lsHotelCheckout),
.ls-field:has(#lsFlightStart),
.ls-field:has(#lsFlightEnd),
.ls-field:has(.lsfc-tour-date) {
    cursor: pointer;
    touch-action: manipulation;
}

/* Visa select: ẩn native browser arrow (tách rời text), dùng SVG tự render */
#ls-panel-visa .ls-field select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.ls-btn-search {
    width: auto;
    height: 42px;
    min-width: 130px;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    background: var(--c-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.ls-btn-search:hover {
    background: #b81e76;
}

.ls-btn-search:disabled,
.ls-btn-search[disabled] {
    background: #fff;
    color: #bdbdbd;
    border: 1px solid #e0e0e0;
    cursor: not-allowed;
    box-shadow: none;
}

.ls-btn-search:disabled:hover,
.ls-btn-search[disabled]:hover {
    background: #fff;
    color: #bdbdbd;
}

/* ========== BUDGET DROPDOWN ========== */
.ls-field-budget {
    position: relative;
}

.ls-budget-trigger {
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #000;
    font-weight: 700;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s;
    user-select: none;
}

.ls-budget-trigger #lsBudgetLabel.ls-placeholder {
    color: #999;
    font-weight: 400;
}

.ls-budget-trigger:hover {
    border-color: var(--c-primary);
}

.ls-budget-trigger i {
    color: #999;
    font-size: 13px;
}

.ls-budget-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    z-index: 200;
    padding: 6px 0;
}

.ls-budget-dropdown.active {
    display: block;
}

.ls-budget-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f5f5f5;
}

.ls-budget-item:last-child {
    border-bottom: none;
}

.ls-budget-item:hover {
    background: #fdf0f6;
    color: var(--c-primary);
}

.ls-budget-item.selected {
    color: var(--c-primary);
    font-weight: 600;
}

/* ========== COMBO TYPE BUTTONS ========== */
.ls-combo-types {
    display: flex;
    gap: 12px;
    padding: 14px 24px 0;
}

.ls-combo-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}

.ls-combo-type i {
    font-size: 13px;
    color: #888;
}

.ls-combo-type:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.ls-combo-type.active {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: #fdf0f6;
}

.ls-combo-type.active i {
    color: var(--c-primary);
}

/* ========== PASSENGER PICKER ========== */
.ls-field-pax {
    position: relative;
    flex: 1.2 !important;
}

.ls-pax-trigger {
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    color: #333;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s;
    user-select: none;
    white-space: nowrap;
    gap: 4px;
    min-width: 150px;
}

.ls-pax-trigger:hover {
    border-color: var(--c-primary);
}

.ls-pax-trigger #lsPaxLabel,
.ls-pax-trigger #lsHotelGuestLabel {
    color: #000;
    font-weight: 700;
}

.ls-pax-trigger i {
    color: #999;
    font-size: 13px;
}

.ls-pax-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 240px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    z-index: 200;
    padding: 12px 16px;
}

.ls-pax-dropdown.active {
    display: block;
}

.ls-pax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ls-pax-row:last-child {
    border-bottom: none;
}

.ls-pax-info strong {
    display: block;
    font-size: 14px;
    color: #333;
}

.ls-pax-info small {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 1px;
}

.ls-pax-ctrl {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ls-pax-ctrl span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    min-width: 20px;
    text-align: center;
}

.ls-pax-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}

.ls-pax-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

/* ========== AUTOCOMPLETE DROPDOWN ========== */
.ls-autocomplete-wrap {
    position: relative;
}

.ls-autocomplete-wrap input[type="text"] {
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    color: #000;
    font-weight: 700;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.ls-autocomplete-wrap input[type="text"]::placeholder {
    color: #999;
    font-weight: 400;
}

.ls-autocomplete-wrap input[type="text"]:focus {
    border-color: var(--c-primary);
}

.ls-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #f0e4ec;
    z-index: 100;
    max-height: 340px;
    overflow-y: auto;
    padding: 4px 0;
    font-family: 'Muli', 'Mulish', sans-serif;
}

.ls-autocomplete-dropdown.active {
    display: block;
}

.ls-ac-group {
    font-size: 12px;
    font-weight: 700;
    color: #000;
    padding: 10px 14px 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-top: 1px solid #f0f0f0;
}
.ls-ac-group:first-child {
    border-top: none;
}
.ls-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Muli', 'Mulish', sans-serif;
}

.ls-ac-item:hover {
    background: #fdf0f6;
}

.ls-ac-item img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.ls-ac-item span {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* Popular destinations grid — shown khi #lsTourDestInput được focus với value rỗng.
   Style match Mytour/Traveloka: 3-column grid, image + name + tour count. */
.ls-autocomplete-dropdown.ls-pop-mode {
    min-width: 720px;
    max-width: calc(100vw - 24px);
    max-height: 520px;
    padding: 8px 12px 12px;
}
.ls-pop-section { padding: 12px 4px 0; }
.ls-pop-section + .ls-pop-section { border-top: 1px solid #f0f0f0; margin-top: 6px; }
.ls-pop-title {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    padding: 0 0 12px;
}
.ls-pop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 12px;
}
.ls-pop-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}
.ls-pop-card:hover { background: #fdf0f6; }
.ls-pop-card img,
.ls-pop-card .ls-pop-img-fallback {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f4f4f4;
    display: block;
}
.ls-pop-card .ls-pop-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary);
}
.ls-pop-info { min-width: 0; }
.ls-pop-name {
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ls-pop-count {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
    line-height: 1;
}

/* ── Mobile responsive dropdown ── */
@media (max-width: 991px) {
    .ls-autocomplete-dropdown.ls-pop-mode {
        min-width: 0;
        width: calc(100vw - 24px);
        max-height: 70vh;
    }
    .ls-pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile primary (390px / 6.1 inch) — redesign card đẹp hơn ── */
@media (max-width: 599px) {
    /* Dropdown: full-width, đẹp hơn */
    .ls-autocomplete-dropdown {
        left: 0;
        right: 0;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 36px rgba(0,0,0,.18);
        max-height: 65vh;
        padding: 0;
        z-index: 200;
    }
    .ls-autocomplete-dropdown.ls-pop-mode {
        width: 100%;
        padding: 0 0 8px;
        max-height: 65vh;
    }

    /* Section title: "Địa điểm trong nước đang HOT nhất" */
    .ls-pop-section { padding: 0; }
    .ls-pop-section + .ls-pop-section {
        border-top: 6px solid #f8f8f8;
        margin-top: 0;
    }
    .ls-pop-title {
        font-size: 12px;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: .4px;
        padding: 12px 16px 6px;
        border-bottom: 1px solid #f5f5f5;
    }

    /* Grid: 1 cột list với card ngang đẹp */
    .ls-pop-grid {
        display: block;
        padding: 4px 0;
    }

    /* Card redesign: horizontal card với image lớn hơn */
    .ls-pop-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        border-radius: 0;
        border-bottom: 1px solid #f8f8f8;
        background: #fff;
        transition: background .1s;
    }
    .ls-pop-card:last-child { border-bottom: none; }
    .ls-pop-card:active { background: #fdf0f6; }

    /* Image: lớn hơn, đẹp hơn */
    .ls-pop-card img,
    .ls-pop-card .ls-pop-img-fallback {
        width: 64px;
        height: 64px;
        border-radius: 12px;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    /* Info section */
    .ls-pop-info {
        flex: 1;
        min-width: 0;
    }

    /* Tên địa điểm */
    .ls-pop-name {
        font-size: 15px;
        font-weight: 700;
        color: #1a1a1a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }

    /* Số tour — badge style */
    .ls-pop-count {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: #d6248c;
        background: #fdf0f7;
        padding: 2px 8px;
        border-radius: 20px;
        margin-top: 2px;
    }
    .ls-pop-count::before {
        content: "🗺";
        font-size: 11px;
    }

    /* Arrow indicator */
    .ls-pop-card::after {
        content: "";
        width: 6px;
        height: 6px;
        border-right: 2px solid #ddd;
        border-top: 2px solid #ddd;
        transform: rotate(45deg);
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Autocomplete item (search results) cũng cải thiện */
    .ls-ac-item {
        padding: 12px 16px;
        gap: 12px;
    }
    .ls-ac-item img {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }
    .ls-ac-item span {
        font-size: 14px;
        font-weight: 600;
    }
    .ls-ac-group {
        padding: 10px 16px 4px;
        font-size: 11px;
        background: #fafafa;
    }
}

/* Fallback ≤374px */
@media (max-width: 374px) {
    .ls-pop-card img,
    .ls-pop-card .ls-pop-img-fallback { width: 54px; height: 54px; }
    .ls-pop-name { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   HOTEL EMPTY-STATE DROPDOWN — Agoda-style
   Render khi user focus #lsHotelCity nhưng chưa gõ:
     - Tìm kiếm gần đây (3 cards, localStorage)
     - Các điểm đến ở Việt Nam (2-col grid)
     - Các điểm đến quốc tế (1-col)
   ═══════════════════════════════════════════════════════════ */
.ls-autocomplete-dropdown.ls-hotel-empty-mode {
    min-width: 720px;
    max-width: calc(100vw - 24px);
    max-height: 540px;
    padding: 14px 16px 16px;
}
.ls-hotel-empty { display: flex; flex-direction: column; gap: 14px; }
.ls-hotel-empty-section + .ls-hotel-empty-section { margin-top: 4px; }
.ls-hotel-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: #5f6368;
    margin-bottom: 10px;
}

/* ── Recent searches row (3 cards horizontal) ── */
.ls-hotel-recent-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.ls-hotel-recent-card {
    background: #f1f5fc;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    min-width: 0;
}
.ls-hotel-recent-card:hover { background: #e3ecfa; }
.ls-hotel-recent-card:active { transform: scale(0.98); }
.ls-hotel-recent-name {
    font-size: 13px;
    font-weight: 600;
    color: #202124;
    line-height: 1.3;
    margin-bottom: 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ls-hotel-recent-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #5f6368;
}
.ls-hotel-recent-pax {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #5f6368;
    font-weight: 500;
}
.ls-hotel-recent-pax svg { color: #5f6368; }

/* ── Destination columns (VN 2-col + Intl 1-col) ── */
.ls-hotel-dest-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    border-top: 1px solid #f0f0f0;
    padding-top: 14px;
}
.ls-hotel-dest-col-intl {
    border-left: 1px solid #f0f0f0;
    padding-left: 18px;
}
.ls-hotel-dest-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.ls-hotel-dest-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}
.ls-hotel-dest-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    min-width: 0;
}
.ls-hotel-dest-card:hover { background: #fdf0f6; }
.ls-hotel-dest-thumb,
.ls-hotel-dest-thumb-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: block;
}
.ls-hotel-dest-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.ls-hotel-dest-thumb svg {
    width: 26px;
    height: 26px;
    display: block;
}
.ls-hotel-dest-thumb-img {
    object-fit: cover;
    background: #f4f4f4;
}
.ls-hotel-dest-info { min-width: 0; flex: 1; }
.ls-hotel-dest-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ls-hotel-dest-count {
    font-size: 13px;
    font-weight: 400;
    color: #5f6368;
}
.ls-hotel-dest-tags {
    font-size: 12px;
    color: #5f6368;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Hotel dropdown mobile responsive ── */
@media (max-width: 991px) {
    .ls-autocomplete-dropdown.ls-hotel-empty-mode {
        min-width: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 36px rgba(0,0,0,.18);
    }
    .ls-hotel-dest-columns { grid-template-columns: 1fr; gap: 0; }
    .ls-hotel-dest-col-intl { border-left: none; padding-left: 0; border-top: 1px solid #f5f5f5; padding-top: 10px; }
}

@media (max-width: 767px) {
    /* Dropdown: full-width, compact */
    .ls-autocomplete-dropdown.ls-hotel-empty-mode {
        padding: 12px 14px 16px;
        left: 0; right: 0;
        max-height: 68vh;
    }

    /* Section title */
    .ls-hotel-empty-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .3px;
        color: #888;
        margin-bottom: 8px;
    }

    /* Recent searches: 1 column, NHƯNG card nhỏ gọn hơn */
    .ls-hotel-recent-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .ls-hotel-recent-card {
        padding: 10px 12px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #f8f9fa;
    }
    /* Icon left cho recent card */
    .ls-hotel-recent-card::before {
        content: "🕐";
        font-size: 16px;
        flex-shrink: 0;
        opacity: .6;
    }
    .ls-hotel-recent-name {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 2px;
        -webkit-line-clamp: 1;
    }
    .ls-hotel-recent-meta {
        font-size: 12px;
        color: #888;
    }
    .ls-hotel-recent-pax {
        font-size: 11px;
        color: #aaa;
    }

    /* Destination cards: compact horizontal list */
    .ls-hotel-dest-grid-2,
    .ls-hotel-dest-grid-1 {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .ls-hotel-dest-card {
        padding: 8px 4px;
        gap: 12px;
        border-bottom: 1px solid #f5f5f5;
        border-radius: 0;
    }
    .ls-hotel-dest-card:last-child { border-bottom: none; }
    .ls-hotel-dest-card:active { background: #fdf0f7; }
    .ls-hotel-dest-thumb,
    .ls-hotel-dest-thumb-img {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
    .ls-hotel-dest-name {
        font-size: 14px;
        font-weight: 700;
    }
    .ls-hotel-dest-count {
        font-size: 12px;
        color: #d6248c;
        font-weight: 600;
    }
    .ls-hotel-dest-tags {
        font-size: 11px;
        color: #aaa;
    }

    /* Gap giữa sections */
    .ls-hotel-empty { gap: 10px; }
    .ls-hotel-empty-section + .ls-hotel-empty-section {
        margin-top: 8px;
        border-top: 6px solid #f5f5f5;
        padding-top: 10px;
    }
}

@media (max-width: 374px) {
    .ls-autocomplete-dropdown.ls-hotel-empty-mode { padding: 10px 12px; }
    .ls-hotel-dest-name { font-size: 13px; }
    .ls-hotel-recent-name { font-size: 13px; }
}

/* Hotel nights badge — pill ở giữa Nhận phòng / Trả phòng, align bottom với date input.
   Height khớp với input (38-40px) để không lệch bậc. */
.ls-hotel-nights {
    flex: 0 0 auto;
    align-self: flex-end;
    height: 40px;
    min-width: 52px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5f6368;
    margin: 0 -8px;
    flex-shrink: 0;
    z-index: 1;
    line-height: 1;
}
.ls-hotel-nights-num { line-height: 1; }
.ls-hotel-nights svg { width: 16px; height: 16px; color: #9aa0a6; flex-shrink: 0; }

/* Hotel typeahead — item 2 line: tên bold + sub text phụ đề */
.ls-hotel-ac-item {
    padding: 10px 16px;
    border-bottom: 1px solid #fceef6;
    gap: 12px;
    font-family: 'Muli', 'Mulish', sans-serif;
}
.ls-hotel-ac-item:last-child { border-bottom: none; }
.ls-hotel-ac-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ls-hotel-ac-name { font-size: 14px; font-weight: 700; color: #292524; line-height: 1.35; font-family: 'Muli', 'Mulish', sans-serif; }
.ls-hotel-ac-sub { font-size: 12px; color: #78716c; line-height: 1.3; font-family: 'Muli', 'Mulish', sans-serif; }
/* Section label trong dropdown ("Khách sạn" / "Điểm đến") */
.ls-ac-section-label { font-size: 10px; font-weight: 800; color: var(--c-primary); text-transform: uppercase; letter-spacing: .8px; padding: 10px 16px 5px; background: #fdf8fc; border-bottom: 1px solid #f5e0ee; font-family: 'Muli', 'Mulish', sans-serif; }
.ls-ac-section-label:first-child { padding-top: 8px; border-top: none; }

/* ========== DATEPICKER OVERRIDE ========== */
.ui-datepicker {
    z-index: 10001 !important;
    font-family: inherit !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
    border: none !important;
    padding: 16px !important;
    width: 280px !important;
}

/* Header: month/year nav */
.ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #333 !important;
    padding: 4px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ui-datepicker-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #333 !important;
    order: 0;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f0f0f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    top: auto !important;
    transition: background 0.2s !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: #e0e0e0 !important;
}

.ui-datepicker-prev {
    order: -1;
}

.ui-datepicker-next {
    order: 1;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    background-image: none !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
}

.ui-datepicker-prev span::after {
    content: '←';
    font-size: 14px;
    color: #555;
}

.ui-datepicker-next span::after {
    content: '→';
    font-size: 14px;
    color: #555;
}

/* Table */
.ui-datepicker table {
    font-size: 13px !important;
    margin: 0 !important;
}

.ui-datepicker th {
    font-weight: 600 !important;
    color: #888 !important;
    font-size: 12px !important;
    padding: 6px 0 !important;
    text-transform: none !important;
}

/* Sunday column (last) in red */
.ui-datepicker th:last-child {
    color: var(--c-primary) !important;
}

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

.ui-datepicker td a,
.ui-datepicker td span {
    text-align: center !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    font-weight: 500 !important;
}

/* Sunday dates in red */
.ui-datepicker td:last-child a,
.ui-datepicker td:last-child span {
    color: var(--c-primary) !important;
}

/* Hover */
.ui-datepicker td a.ui-state-hover {
    background: #f0f0f0 !important;
    color: #333 !important;
}

/* Selected / Active */
.ui-datepicker td a.ui-state-active {
    background: #3b6cb5 !important;
    color: #fff !important;
}

/* Today */
.ui-datepicker td a.ui-state-highlight {
    background: #fdf0f6 !important;
    color: var(--c-primary) !important;
    font-weight: 700 !important;
}

/* Disabled / other month */
.ui-datepicker td span.ui-state-default {
    color: #ccc !important;
}

.ui-datepicker .ui-datepicker-other-month span {
    color: #ddd !important;
}

/* ========== FLIGHT TOP ROW (trip pills + options) ========== */
.ls-flight-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px 0;
}

.ls-flight-trip-pills {
    display: inline-flex;
    background: #eaf4ff;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.ls-trip-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    border-radius: 999px;
    text-decoration: none !important;
    transition: all 0.18s;
    cursor: pointer;
    white-space: nowrap;
}
.ls-trip-pill:hover {
    color: var(--c-primary);
    text-decoration: none !important;
}
.ls-trip-pill.active {
    background: var(--c-primary);
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(214, 36, 140, 0.25);
}
.ls-trip-pill-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.ls-trip-pill-disabled:hover { color: #4a5568; }

.ls-flight-options {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ls-direct-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
.ls-direct-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--c-primary);
    cursor: pointer;
    margin: 0;
}

.ls-flight-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.ls-flight-pill:hover {
    background: #f7f7fa;
}
.ls-flight-pill > i.fa {
    color: var(--c-primary);
    font-size: 14px;
}
.ls-flight-pill > i.fa.fa-angle-down {
    color: #6b7280;
    font-size: 12px;
    margin-left: 2px;
}

.ls-class-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    z-index: 200;
    padding: 6px 0;
}
.ls-class-dropdown.active { display: block; }
.ls-class-item {
    padding: 10px 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background 0.12s;
    font-weight: 500;
}
.ls-class-item:hover { background: #fdf0f6; color: var(--c-primary); }
.ls-class-item.selected { color: var(--c-primary); font-weight: 700; background: #fdf0f6; }

/* When inside ls-flight-pill, the pax dropdown should anchor to that pill */
.ls-pax-pill .ls-pax-dropdown {
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    min-width: 280px;
}

/* Disable Return Date field for one-way */
.ls-field-return-disabled input {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

/* Search Flights button on flight panel */
.ls-flight-fields .ls-btn-flight-search {
    width: auto;
    min-width: 168px;
    padding: 0 28px;
    height: 48px;
    border-radius: 10px;
    background: var(--c-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    align-self: flex-end;
    margin-bottom: 0;
}
.ls-flight-fields .ls-btn-flight-search:hover {
    background: #b81e78;
}
.ls-flight-fields .ls-btn-flight-search:disabled,
.ls-flight-fields .ls-btn-flight-search[disabled] {
    background: #e5e7eb;
    color: #9ca3af;
    border: none;
    box-shadow: none;
}

/* Slightly taller fields on flight panel to match the new pill button height */
.ls-flight-fields .ls-typeahead-text,
.ls-flight-fields input[type="text"] {
    height: 48px;
    border-radius: 10px;
}
.ls-flight-fields .ls-swap-btn {
    width: 38px;
    height: 38px;
    margin-bottom: 5px;
}

/* Combined date trigger — hidden on desktop, shown on mobile via @media block below */
.ls-flight-date-range { display: none; }
.ls-fdr-label { display: none; }

@media (max-width: 991px) {
    .ls-flight-top {
        padding: 14px 16px 0;
    }
    .ls-flight-options {
        gap: 8px;
    }
    .ls-flight-pill {
        padding: 6px 10px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .ls-flight-top {
        flex-direction: column;
        align-items: stretch;
    }
    .ls-flight-trip-pills {
        align-self: flex-start;
    }
    .ls-flight-options {
        justify-content: space-between;
    }
    .ls-class-dropdown,
    .ls-pax-pill .ls-pax-dropdown {
        right: auto;
        left: 0;
    }
    .ls-flight-fields .ls-btn-flight-search {
        width: 100%;
    }
    /* ════════════════════════════════════════════════════════════
       FLIGHT PANEL MOBILE REDESIGN — list-style with icons
       Layout: pills → fields (list rows + dividers) → pax/class
       (2-col) → search button. Swap-btn positioned right side
       between Điểm đi và Điểm đến.
       ════════════════════════════════════════════════════════════ */
    #ls-panel-flight.active {
        display: flex;
        flex-direction: column;
        padding: 14px;
        gap: 0;
    }
    /* Flatten wrappers để children là flex item của #ls-panel-flight,
       cho phép reorder bằng `order`. */
    #ls-panel-flight .ls-flight-top,
    #ls-panel-flight .ls-fields.ls-flight-fields {
        display: contents;
    }
    /* Reorder */
    #ls-panel-flight .ls-flight-trip-pills   { order: 0; margin: 0 0 8px; }
    /* Default order 0 cho .ls-field, .ls-swap-btn → render theo document order */
    #ls-panel-flight .ls-flight-options      { order: 5; }
    #ls-panel-flight .ls-btn-flight-search   { order: 6; }

    /* Re-show labels của "Điểm đi"/"Điểm đến" (đã bị visually-hidden ở edit trước) */
    #ls-panel-flight .ls-flight-fields > .ls-field:nth-of-type(1) > label,
    #ls-panel-flight .ls-flight-fields > .ls-field:nth-of-type(2) > label {
        position: static;
        width: auto; height: auto;
        clip: auto;
        white-space: normal;
        margin: 0 0 4px;
        padding: 0;
        overflow: visible;
    }

    /* Field row: list-like với divider bottom */
    #ls-panel-flight .ls-flight-fields .ls-field {
        padding: 10px 0;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
        min-width: 0;
        flex: 0 0 auto;
        width: 100%;
    }
    #ls-panel-flight .ls-flight-fields .ls-field > label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #5f6368;
        margin: 0 0 4px;
    }
    /* Inputs: borderless, transparent, icon prefix */
    #ls-panel-flight .ls-typeahead-text,
    #ls-panel-flight .ls-flight-fields input[type="text"] {
        border: 0 !important;
        border-radius: 0;
        background-color: transparent !important;
        padding: 0 0 0 26px;
        height: 28px;
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        box-shadow: none;
    }
    #ls-panel-flight .ls-typeahead.open .ls-typeahead-text {
        border-bottom: 0;
    }
    /* Icon: airplane cho 2 airport field */
    #ls-panel-flight .ls-flight-fields > .ls-field:nth-of-type(1) .ls-typeahead-text,
    #ls-panel-flight .ls-flight-fields > .ls-field:nth-of-type(2) .ls-typeahead-text {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }
    /* Icon: calendar cho 2 date field */
    #ls-panel-flight .ls-flight-fields > .ls-field:nth-of-type(3) input,
    #ls-panel-flight .ls-flight-fields > .ls-field:nth-of-type(4) input {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }

    /* Swap button: nổi bên phải, nằm trên đường divider giữa Điểm đi và Điểm đến */
    #ls-panel-flight .ls-flight-fields .ls-swap-btn {
        align-self: flex-end;
        margin: -22px 0 -22px auto;
        width: 38px;
        height: 38px;
        transform: rotate(90deg);
        z-index: 10;
        box-shadow: 0 4px 12px rgba(214,36,140,0.2);
    }
    #ls-panel-flight .ls-flight-fields .ls-swap-btn:hover,
    #ls-panel-flight .ls-flight-fields .ls-swap-btn.swapping {
        transform: rotate(270deg);
    }

    /* Pax + Class options: 2-column grid, dưới các field date */
    #ls-panel-flight .ls-flight-options {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 14px 0 0;
        padding: 14px 0 0;
        border-top: 1px solid #f0f0f0;
        align-items: stretch;
    }
    #ls-panel-flight .ls-flight-options .ls-flight-pill {
        width: 100%;
        justify-content: space-between;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
    }
    /* "Chỉ bay thẳng" — span full width, hiển thị dạng toggle row trên các pill */
    #ls-panel-flight .ls-direct-check {
        grid-column: 1 / -1;
        order: -1;          /* hiện trước Pax/Class trong grid */
        padding: 4px 0;
        font-size: 13px;
    }

    /* Hide separate date fields, show combined trigger */
    #ls-panel-flight .ls-flight-fields > .ls-flight-date-sep {
        display: none !important;
    }
    .ls-fdr-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #5f6368;
        padding: 10px 0 0;
        width: 100%;
    }
    .ls-flight-date-range {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0 10px;
        cursor: pointer;
        min-width: 0;
        flex: 0 0 auto;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        -webkit-tap-highlight-color: transparent;
    }
    .ls-fdr-icon { flex-shrink: 0; }
    .ls-fdr-start, .ls-fdr-end {
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        white-space: nowrap;
    }
    .ls-fdr-sep {
        font-size: 15px;
        font-weight: 400;
        color: #5f6368;
        flex-shrink: 0;
        margin: 0 2px;
    }
    .ls-fdr-placeholder {
        color: #aaa;
        font-weight: 400;
    }

    /* Search button: full-width, prominent */
    #ls-panel-flight .ls-btn-flight-search {
        width: 100%;
        margin-top: 14px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 10px;
    }

    /* ════════════════════════════════════════════════════════════
       HOTEL PANEL MOBILE REDESIGN — list-style với icons (cùng pattern
       như flight). Badge số đêm sit bên phải giữa Nhận phòng / Trả phòng.
       ════════════════════════════════════════════════════════════ */
    #ls-panel-hotel.active {
        padding: 14px;
    }
    /* Container: column, no gap (dùng border-bottom của từng row làm divider) */
    #ls-panel-hotel .ls-fields {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    /* Field row: list-style với divider */
    #ls-panel-hotel .ls-fields > .ls-field {
        padding: 10px 0;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
        min-width: 0;
        flex: 0 0 auto;
        width: 100%;
    }
    #ls-panel-hotel .ls-fields > .ls-field > label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #5f6368;
        margin: 0 0 4px;
        position: static;
        width: auto; height: auto;
        clip: auto;
        white-space: normal;
        overflow: visible;
    }
    /* Inputs: borderless, transparent, icon prefix */
    #ls-panel-hotel input[type="text"],
    #ls-panel-hotel .ls-pax-trigger {
        border: 0 !important;
        border-radius: 0;
        background-color: transparent !important;
        padding: 0 0 0 26px;
        height: 28px;
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        box-shadow: none;
        width: 100%;
    }
    /* Trigger số khách có chevron đi kèm — căn lại flex */
    #ls-panel-hotel .ls-pax-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    /* Icons */
    /* Địa điểm: location pin */
    #ls-panel-hotel .ls-fields > .ls-field:nth-of-type(1) input#lsHotelCity {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }
    /* Calendar icon cho Nhận phòng + Trả phòng */
    #ls-panel-hotel .ls-fields > .ls-field:nth-of-type(2) input,
    #ls-panel-hotel .ls-fields > .ls-field:nth-of-type(4) input {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }
    /* User icon cho Số khách */
    #ls-panel-hotel .ls-fields > .ls-field:nth-of-type(5) .ls-pax-trigger {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }

    /* Badge số đêm: nổi bên phải, nằm trên đường divider giữa Nhận phòng / Trả phòng */
    #ls-panel-hotel .ls-hotel-nights {
        align-self: flex-end;
        margin: -22px 0 -22px auto;
        height: 36px;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(214,36,140,0.15);
        background: #fff;
        order: 0;
    }

    /* Search button: full-width, prominent */
    #ls-panel-hotel .ls-btn-search {
        width: 100%;
        margin-top: 14px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 10px;
    }

    /* ════════════════════════════════════════════════════════════
       SHARED RULES cho TOUR / COMBO / VISA panel — list-style
       (cùng pattern flight/hotel). Selector chung cho 3 panel.
       ════════════════════════════════════════════════════════════ */
    #ls-panel-tour.active,
    #ls-panel-combo.active,
    #ls-panel-visa.active {
        padding: 14px;
    }
    #ls-panel-tour .ls-fields,
    #ls-panel-combo .ls-fields,
    #ls-panel-visa .ls-fields {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    #ls-panel-tour .ls-fields > .ls-field,
    #ls-panel-combo .ls-fields > .ls-field,
    #ls-panel-visa .ls-fields > .ls-field {
        padding: 10px 0;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
        min-width: 0;
        flex: 0 0 auto;
        width: 100%;
    }
    #ls-panel-tour .ls-fields > .ls-field > label,
    #ls-panel-combo .ls-fields > .ls-field > label,
    #ls-panel-visa .ls-fields > .ls-field > label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #5f6368;
        margin: 0 0 4px;
    }
    /* Inputs / triggers borderless với icon prefix */
    #ls-panel-tour input[type="text"],
    #ls-panel-tour .ls-budget-trigger,
    #ls-panel-combo input[type="text"],
    #ls-panel-combo .ls-typeahead-text,
    #ls-panel-visa select {
        border: 0 !important;
        border-radius: 0;
        background-color: transparent !important;
        padding: 0 0 0 26px;
        height: 28px;
        font-size: 15px;
        font-weight: 600;
        color: #1a1a1a;
        box-shadow: none;
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
    }
    /* Budget trigger có chevron — căn flex */
    #ls-panel-tour .ls-budget-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }
    /* Select arrow — ẩn native browser arrow, dùng SVG tự render */
    #ls-panel-visa select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 32px;
    }
    /* Search button: full-width, prominent */
    #ls-panel-tour .ls-btn-search,
    #ls-panel-combo .ls-btn-search,
    #ls-panel-visa .ls-btn-search {
        width: 100%;
        margin-top: 14px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        border-radius: 10px;
    }

    /* ── TOUR icons ── */
    /* Bạn muốn đi đâu? (destination) — location pin */
    #ls-panel-tour .ls-fields > .ls-field:nth-of-type(1) input#lsTourDestInput {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }
    /* Ngày đi — calendar */
    #ls-panel-tour .ls-fields > .ls-field:nth-of-type(2) input {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }
    /* Ngân sách — money/wallet icon */
    #ls-panel-tour .ls-fields > .ls-field:nth-of-type(3) .ls-budget-trigger {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }

    /* ── COMBO icons + swap button ── */
    /* Combo-type tabs (Combo giá tốt / Combo tự chọn) — 2 buttons full-width
       chia đều, padding giảm để không tràn frame trên màn hẹp. */
    #ls-panel-combo .ls-combo-types {
        padding: 0;
        margin-bottom: 8px;
        gap: 8px;
    }
    #ls-panel-combo .ls-combo-type {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 8px;
        font-size: 12px;
        gap: 4px;
        justify-content: center;
    }
    /* Plane icon cho Điểm đi/đến (1st + 2nd .ls-field) */
    #ls-panel-combo .ls-fields > .ls-field:nth-of-type(1) .ls-typeahead-text,
    #ls-panel-combo .ls-fields > .ls-field:nth-of-type(2) .ls-typeahead-text {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }
    /* Calendar cho Ngày đi/về (3rd + 4th .ls-field) */
    #ls-panel-combo .ls-fields > .ls-field:nth-of-type(3) input,
    #ls-panel-combo .ls-fields > .ls-field:nth-of-type(4) input {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 18px 18px;
    }
    /* Swap button của combo — bên phải, sit trên divider giữa Điểm đi / Điểm đến */
    #ls-panel-combo .ls-fields > .ls-swap-btn {
        align-self: flex-end;
        margin: -22px 0 -22px auto;
        width: 38px;
        height: 38px;
        transform: rotate(90deg);
        z-index: 10;
        box-shadow: 0 4px 12px rgba(214,36,140,0.2);
    }
    #ls-panel-combo .ls-fields > .ls-swap-btn:hover,
    #ls-panel-combo .ls-fields > .ls-swap-btn.swapping {
        transform: rotate(270deg);
    }

    /* ── VISA icons ── */
    /* Quốc gia cần làm visa — globe/passport icon */
    #ls-panel-visa .ls-fields > .ls-field:nth-of-type(1) select {
        background-image:
            url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"),
            url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat;
        background-position: 0 center, right 4px center;
        background-size: 18px 18px, 12px 12px;
    }
    /* Loại visa — document/file icon */
    #ls-panel-visa .ls-fields > .ls-field:nth-of-type(2) select {
        background-image:
            url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d6248c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E"),
            url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat;
        background-position: 0 center, right 4px center;
        background-size: 18px 18px, 12px 12px;
    }
    /* Visa shortcuts (link Visa Mỹ/Canada…) bên dưới — giữ wrapping ngang gọn */
    #ls-panel-visa .ls-visa-shortcuts {
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 12px;
        overflow-x: visible;
    }
}

/* ========== VISA SHORTCUTS ========== */
.ls-visa-shortcuts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ls-visa-shortcuts a {
    display: inline-block;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: 20px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s;
}

.ls-visa-shortcuts a:hover {
    background: var(--c-primary);
    color: #fff !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1199px) {
    .ls-tab {
        padding: 14px 16px;
        font-size: 13px;
    }

    .ls-fields {
        gap: 10px;
    }

    .ls-visa-shortcuts a {
        padding: 6px 10px;
        font-size: 11px;
    }
}

@media (max-width: 991px) {
    .ls-fields {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .ls-field {
        flex: 1 1 calc(50% - 8px);
        min-width: calc(50% - 8px);
    }

    .ls-field-grow {
        flex: 1 1 100%;
    }

    .ls-tabs {
        padding: 0 16px;
    }

    .ls-tab {
        padding: 12px 14px;
        font-size: 13px;
    }

    .ls-visa-shortcuts {
        flex-wrap: wrap;
        flex: 1 1 100%;
    }
}

@media (max-width: 767px) {
    .local-search-overlay {
        /* Mobile: KHÔNG sticky — local_search_bar chỉ dùng ở trang chủ + landing khách sạn
           (đều là hero search, không có kết quả ngay dưới). Sticky làm form ghim lại và
           ĐÈ lên FLASH SALE / nội dung khi cuộn. Để relative cho nó cuộn theo trang.
           (Trang kết quả khách sạn có thanh search sticky riêng - hsr-editpanel.) */
        position: relative;
        top: auto;
        z-index: 50;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /* Đảm bảo wrapper parent không clip overflow */
    .local-search-overlay .wrapper,
    .wrapCont > .wrapper {
        overflow: visible !important;
    }

    .ls-fields {
        flex-direction: column;
        gap: 10px;
    }

    .ls-field,
    .ls-field-grow,
    .ls-field-sm {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .ls-btn-search {
        width: 100%;
    }

    .ls-visa-shortcuts {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* ============================================================
   Mobile compact: pax label icons + tabs horizontal scroll
   Fix: pax text quá dài đẩy cabin "Phổ thông" ra ngoài,
        và tabs "Visa" bị cắt khỏi viewport.
   ============================================================ */

/* Pill SVG icons: cùng style airplane/calendar (thin-line, currentColor) */
.ls-flight-pill > svg {
    width: 15px; height: 15px;
    color: var(--c-primary);
    flex-shrink: 0;
    vertical-align: middle;
}

/* Pax lead icon (FA fa-users) — desktop */
.ls-pax-lead-icon {
    font-size: 14px;
    color: var(--c-primary);
    flex-shrink: 0;
    margin-right: 4px;
    vertical-align: middle;
}

/* Default desktop: hide per-group icons (chỉ leading icon + text) */
.ls-pax-grp-icon { display: none; }

@media (max-width: 767px) {
    /* Pax label: icon lead + số, ngăn cách bằng · */
    .ls-pax-lead-icon { display: none; }
    .ls-pax-word,
    .ls-pax-sep { display: none; }
    .ls-pax-grp-icon {
        display: inline-block;
        width: 26px; height: 18px;
        color: var(--c-primary);
        vertical-align: middle;
        margin-right: 2px;
        flex-shrink: 0;
    }
    .ls-pax-grp {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        margin-right: 0;
    }
    .ls-pax-grp:not(:last-child) { margin-right: 8px; }
    .ls-pax-grp:not(:last-child)::after { content: ''; }
    #lsPaxLabel { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 0; }

    /* Tabs: swipe ngang để Visa không bị cắt */
    .ls-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .ls-tabs::-webkit-scrollbar { display: none; }
    .ls-tab { flex-shrink: 0; }
}

/* Visa country combobox — chevron indicator */
.ls-visa-country-ta::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #aaa;
    pointer-events: none;
    transition: transform .2s;
}
.ls-visa-country-ta.open::after {
    transform: translateY(-50%) rotate(180deg);
}
.ls-visa-country-ta .ls-typeahead-text {
    padding-right: 30px;
    cursor: pointer;
}