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

:root {
    --bg: #f0f4fb;
    --surface: #fff;
    --border: #dde4f0;
    --border2: #c8d3ea;
    --text: #1a2340;
    --muted: #7a88aa;
    --muted2: #a0aec0;
    --gold: #e8a500;
    --orange: #f05a28;
    --pink: #e8185a;
    --teal: #0a9e84;
    --blue: #1a56ff;
    --green: #16a34a;
    --red: #dc2626;
    --purple: #7c3aed;
    --sidebar: 270px;
    --r: 10px;
    --shadow: 0 2px 8px rgba(26, 35, 64, .07), 0 6px 20px rgba(26, 35, 64, .04);
    --shadow-lg: 0 8px 32px rgba(26, 35, 64, .11);
}

html {
    height: 100%;
    overflow-x: clip;
}

body {
    min-height: 100%;
    height: auto;
    font-family: 'Be Vietnam Pro', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: clip;
}

/* ── LAYOUT ── */
.app {
    display: flex;
    min-height: 100vh
}

/* ── SIDEBAR ── */
.sidebar {
    --sb-logo-h: 65px;
    width: var(--sidebar);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-anchor: none;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sb-logo {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px 14px 10px;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    flex-shrink: 0;
}

.sb-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 0;
}

.sb-logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 52px;
    object-fit: contain;
    object-position: center center;
}

.sb-user {
    --sb-ease: cubic-bezier(.4, 0, .2, 1);
    --sb-dur: .38s;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #f8faff, #fff);
    flex-shrink: 0;
    overflow: hidden;
    transition: padding var(--sb-dur) var(--sb-ease),
        gap var(--sb-dur) var(--sb-ease);
}

.sb-user.is-animating {
    overflow: hidden;
}

.sb-user-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: #fff;
    color: #7a88aa;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    transition: background .12s, border-color .12s, color .12s;
    z-index: 2;
}

.sb-user-account {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: #fff;
    color: #7a88aa;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background .12s, border-color .12s, color .12s, opacity .2s;
    z-index: 2;
}

.sb-user-account:hover {
    background: #e8efff;
    border-color: #1a56ff;
    color: #1a56ff;
}

.sb-user.is-compact .sb-user-account {
    display: none;
}

.sb-user-toggle:hover {
    background: #e8efff;
    border-color: #1a56ff;
    color: #1a56ff;
}

.sb-toggle-min,
.sb-toggle-max {
    position: absolute;
    transition: opacity .25s ease, transform .25s ease;
}

.sb-toggle-max {
    opacity: 0;
    transform: scale(.75);
}

.sb-user.is-compact .sb-toggle-min {
    opacity: 0;
    transform: scale(.75);
}

.sb-user.is-compact .sb-toggle-max {
    opacity: 1;
    transform: scale(1);
}

.sb-user-main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
    justify-items: center;
    align-items: center;
    width: 100%;
    transition: grid-template-columns var(--sb-dur) var(--sb-ease),
        grid-template-rows var(--sb-dur) var(--sb-ease),
        gap var(--sb-dur) var(--sb-ease),
        padding var(--sb-dur) var(--sb-ease);
}

.sb-user-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
    grid-column: 1;
    grid-row: 2;
    transition: grid-column var(--sb-dur) var(--sb-ease),
        grid-row var(--sb-dur) var(--sb-ease),
        align-items var(--sb-dur) var(--sb-ease);
}

.sb-user-actions {
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: grid-template-rows var(--sb-dur) var(--sb-ease),
        opacity .22s ease .06s;
}

.sb-user-actions-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sb-user.is-compact {
    padding: 10px 12px;
    gap: 0;
}

.sb-user.is-compact .sb-user-main {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 18px;
    justify-items: start;
    padding-right: 24px;
}

.sb-user.is-compact .sb-user-details {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
}

.sb-user.is-compact .sb-avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
}

.sb-user.is-compact .user-avatar-chip--sb {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.sb-user.is-compact .user-avatar-chip--sb .sb-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.sb-user.is-compact .sb-user-name {
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sb-user.is-compact .sb-user-meta {
    text-align: left;
    font-size: 9.5px;
    line-height: 1.35;
}

.sb-user.is-compact .sb-user-email,
.sb-user.is-compact .sb-user-phone {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sb-user.is-compact .sb-user-actions {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows var(--sb-dur) var(--sb-ease),
        opacity .16s ease;
}

.sb-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(26, 86, 255, .25);
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
    transition: width var(--sb-dur) var(--sb-ease),
        height var(--sb-dur) var(--sb-ease),
        font-size var(--sb-dur) var(--sb-ease);
    overflow: hidden;
    position: relative;
}

.sb-user .user-avatar-chip {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 68px;
    height: 68px;
}

.sb-user.is-compact .user-avatar-chip--sb {
    width: 48px;
    height: 48px;
}

.sb-user.is-compact .user-avatar-chip--sb .user-avatar-chip__camera svg {
    width: 14px;
    height: 14px;
}

.sb-user.is-compact .user-avatar-chip--sb .user-avatar-chip__online {
    width: 13px;
    height: 13px;
    right: -1px;
    bottom: -1px;
}

.sb-user-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    width: 100%;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    transition: font-size var(--sb-dur) var(--sb-ease);
}

.sb-user-meta {
    font-size: 10.5px;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
    width: 100%;
    transition: font-size var(--sb-dur) var(--sb-ease);
}

.sb-user-email,
.sb-user-phone {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sb-booking-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.sb-user-action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.sb-password {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    padding: 4px 10px;
    font-size: 11.5px;
    line-height: 1.2;
    color: var(--blue);
    background: rgba(26, 86, 255, .07);
    border: 1px solid rgba(26, 86, 255, .18);
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, transform .1s;
}

.sb-password:hover {
    background: rgba(26, 86, 255, .13);
}

.sb-password:active {
    transform: scale(.96);
}

.sb-user-action-btns .sb-logout {
    margin-top: 0;
    box-sizing: border-box;
    line-height: 1.2;
}

.sb-logout {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--red);
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .15);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    margin-top: 2px;
}

.sb-logout:hover {
    background: rgba(220, 38, 38, .13)
}

.sb-user-guest {
    padding: 18px 16px 16px;
}

.sb-guest-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.sb-avatar-guest {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    font-size: 18px;
}

.sb-guest-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.sb-login-btn {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue), #1340d4);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(26, 86, 255, .25);
    transition: transform .12s, box-shadow .12s;
}

.sb-login-btn:hover {
    box-shadow: 0 4px 14px rgba(26, 86, 255, .35);
}

.sb-login-btn:active {
    transform: scale(.98)
}

.sb-nav {
    flex: 1;
    padding: 10px 0
}

.sb-section {
    padding: 6px 14px 3px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted2)
}

.sb-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    transition: all .13s;
    border-left: 2.5px solid transparent;
}

.sb-link:hover {
    background: #f0f4fb;
    color: var(--text);
    border-left-color: var(--border2)
}

.sb-link.active {
    background: #eff3ff;
    color: var(--blue);
    border-left-color: var(--blue);
    font-weight: 700
}

.sb-link .icon {
    font-size: 15px;
    flex-shrink: 0;
    width: 18px;
    text-align: center
}

.sb-link-chat {
    position: relative;
}

.sb-link-text {
    flex: 1;
    min-width: 0;
}

.sb-chat-badge {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}

.sb-chat-badge.is-hidden {
    display: none;
}

.sb-chat-badge:not(.is-hidden) {
    display: inline-block;
}

.sb-collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    border-left: 2.5px solid transparent;
}

.sb-collapse:hover {
    background: #f0f4fb;
    color: var(--text)
}

.sb-collapse .icon {
    font-size: 15px
}

.sb-collapse-arrow {
    font-size: 10px;
    color: var(--muted2);
    transition: transform .2s
}

.sb-sub {
    padding-left: 14px
}

.sb-sub .sb-link {
    font-size: 12px;
    padding: 6px 16px
}

/* Nhóm menu con (Cài đặt) */
.nav-group .sb-collapse {
    width: 100%;
    background: none;
    border: none;
    border-left: 2.5px solid transparent;
    font-family: inherit;
    text-align: left;
}

.nav-group-label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.nav-group .sb-sub {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
}

.nav-group.open .sb-sub {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
}

.nav-group.open .sb-collapse-arrow {
    transform: rotate(180deg);
}

/* ── MAIN ── */
.main {
    margin-left: 0;
    padding-left: var(--sidebar);
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Nội dung ngắn: đẩy footer xuống đáy màn hình */
.main>.footer-strip {
    margin-top: auto;
}

/* ── HERO ── */
.hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0b1220 0%, #141e36 45%, #1a2d52 70%, #0e1f35 100%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(10, 18, 36, .9) 0%, rgba(10, 18, 36, .75) 55%, rgba(10, 18, 36, .88) 100%);
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none
}

.hb1 {
    width: 380px;
    height: 380px;
    background: radial-gradient(#1a56ff, transparent 70%);
    top: -80px;
    right: 340px;
    opacity: .35
}

.hb2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(#7c3aed, transparent 70%);
    bottom: -30px;
    left: 10%;
    opacity: .3
}

.hero-left {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 99px;
    padding: 4px 13px 4px 9px;
    width: fit-content;
    margin-bottom: 18px;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 7px var(--teal);
    animation: blink 2s ease infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.eyebrow-text {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    letter-spacing: .08em;
    text-transform: uppercase
}

.hero-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: 16px;
}

.hero-title .l1 {
    display: block;
    color: #fff
}

.hero-title .l2 {
    display: block;
    background: linear-gradient(90deg, var(--gold), var(--orange), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, .58);
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 28px
}

.hero-stats {
    display: flex;
    gap: 36px
}

.stat-val {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--gold), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.stat-lbl {
    font-size: 11px;
    color: rgba(255, 255, 255, .45);
    margin-top: 3px;
    font-weight: 500
}

/* CAT GRID inside hero */
.hero-right {
    position: relative;
    z-index: 2;
    width: 340px;
    flex-shrink: 0;
    padding: 20px 20px 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 8px;
    align-items: stretch;
}

.cat-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .22s, box-shadow .22s;
}

.cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45)
}

.cat-flash {
    grid-column: 1;
    grid-row: 1/3
}

.cat-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .35s
}

.cat-card:hover .cat-img {
    transform: scale(1.06)
}

.cat-flash .cat-img {
    background: linear-gradient(145deg, #c05422, #7a2500);
}

.cat-noshop .cat-img {
    background: linear-gradient(135deg, #1b4d94, #0e2c5a);
}

.cat-tet .cat-img {
    background: linear-gradient(135deg, #941b4d, #5a0e2c);
}

.cat-full .cat-img {
    background: linear-gradient(135deg, #0c6e5e, #053c34);
}

.cat-fam .cat-img {
    background: linear-gradient(135deg, #2c6a1b, #163908);
}

.cat-vip .cat-img {
    background: linear-gradient(135deg, #7a5010, #402a06);
}

.cat-sem .cat-img {
    background: linear-gradient(135deg, #491b94, #270e5a);
}

.cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 10, 25, .85) 0%, rgba(5, 10, 25, .15) 60%, transparent 100%)
}

.cat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 3
}

.cat-flash::after {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.cat-noshop::after {
    background: linear-gradient(90deg, #2979ff, #00d4aa)
}

.cat-tet::after {
    background: linear-gradient(90deg, #e91e63, #ff5722)
}

.cat-full::after {
    background: linear-gradient(90deg, #00d4aa, #2979ff)
}

.cat-fam::after {
    background: linear-gradient(90deg, #66bb6a, #26c6da)
}

.cat-vip::after {
    background: linear-gradient(90deg, var(--gold), #ff6b2b)
}

.cat-sem::after {
    background: linear-gradient(90deg, #9c27ff, #2979ff)
}

.cat-body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 12px
}

.cat-flash .cat-body {
    padding: 14px 16px
}

.cat-label {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    line-height: 1.1;
    font-size: 16px
}

.cat-flash .cat-label {
    font-size: 22px
}

.cat-icon {
    font-size: 16px;
    margin-bottom: 4px
}

.cat-flash .cat-icon {
    font-size: 22px;
    margin-bottom: 8px
}

/* ── SEARCH BOX ── */
.search-wrap {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 32px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(26, 35, 64, .05);
}

.sf {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px
}

.sf label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted)
}

.sf select {
    appearance: none;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 7px 28px 7px 11px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer
}

.sf select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26, 86, 255, .1)
}

.toggle-group {
    display: flex;
    gap: 4px
}

.tbtn {
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    font-family: inherit
}

.tbtn.active,
.tbtn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.search-btn {
    background: linear-gradient(135deg, var(--blue), #1340d4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-end;
    box-shadow: 0 4px 12px rgba(26, 86, 255, .3);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity .13s;
}

.search-btn:hover {
    opacity: .9
}

/* ── SECTION ── */
.section {
    padding: 28px 32px
}

.section+.section {
    padding-top: 0
}

.section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.section-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--text)
}

.section-title span:not(.tg-group-badge) {
    background: linear-gradient(90deg, var(--blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.view-all {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap .13s
}

.view-all:hover {
    gap: 7px
}

/* FILTER TAGS */
.filter-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center
}

.ftag {
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    white-space: nowrap;
}

.ftag:hover,
.ftag.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.filter-right {
    margin-left: auto
}

.status-sel {
    appearance: none;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 5px 26px 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer
}

/* UPCOMING CARDS */
.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.ucard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
    position: relative;
}

.ucard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)
}

.ucard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2
}

.uc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.uc2::before {
    background: linear-gradient(90deg, var(--orange), var(--pink))
}

.uc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.uc4::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.ucard-top {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border)
}

.uc-agent {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px
}

.uc-airline {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500
}

.uc-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 8px;
}

.uc-date .cal {
    font-size: 12px
}

.uc-meta {
    font-size: 10.5px;
    color: var(--muted);
    margin-left: auto
}

.ucard-bar {
    padding: 10px 14px
}

.seat-bar {
    display: flex;
    height: 18px;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

.sb-chot {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-pend {
    background: linear-gradient(90deg, #ca8a04, #facc15);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-con {
    background: linear-gradient(90deg, #c2410c, #f97316);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-lbl {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .95);
    padding: 0 4px;
    white-space: nowrap
}

.uc-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px
}

.uctag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .03em
}

.ut-noshop {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4
}

.ut-flash {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.ut-tet {
    background: #fdf4ff;
    color: #7c3aed;
    border: 1px solid #e9d5ff
}

.ut-full {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.ut-fam {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.ut-vip {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

/* VIEW MORE */
.view-more-row {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px
}

.view-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 8px 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    cursor: pointer;
    transition: all .13s;
}

.view-more-btn:hover {
    background: #eff3ff;
    border-color: var(--blue)
}

/* TOUR GROUP SECTION */
.tour-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(90deg, #f8faff, #fff);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.tg-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 7px
}

.tg-title::before {
    content: '—';
    color: var(--blue);
    opacity: .5
}

.tg-vall {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px
}

.tg-vall:hover {
    text-decoration: underline
}

.tour-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
    cursor: pointer;
    gap: 16px;
}

.tour-row:last-child {
    border-bottom: none
}

.tour-row:hover {
    background: #f7f9ff
}

.tr-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0
}

.tr-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap
}

.tr-price .coin {
    font-size: 13px
}

.tr-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.tr-month {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap
}

.date-chip {
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    background: #f0f4fb;
    border: 1px solid var(--border2);
    color: var(--text);
    cursor: pointer;
    transition: all .13s;
}

.date-chip:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.date-chip.hot {
    background: rgba(255, 107, 43, .1);
    border-color: rgba(255, 107, 43, .3);
    color: var(--orange)
}

/* SECTION DIVIDER */
.section-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--teal), var(--purple), var(--pink));
    margin: 0 32px;
    border-radius: 99px;
    opacity: .2;
}

/* ── FEATURES FOOTER ── */
.feat-footer {
    position: relative;
    overflow: hidden;
    padding: 52px 32px;
    background: #0d1829;
    margin-top: 8px;
}

.feat-footer-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0d1829 0%, #1a3050 50%, #0d1829 100%);
    opacity: .15
}

.feat-footer-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 24, 41, .95), rgba(13, 24, 41, .85))
}

.feat-fb1 {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(#1a56ff, transparent 70%);
    top: -80px;
    left: -40px;
    opacity: .25;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-fb2 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(#7c3aed, transparent 70%);
    bottom: -40px;
    right: 10%;
    opacity: .2;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-content {
    position: relative;
    z-index: 2
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.feat-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: transform .18s, background .18s;
    position: relative;
    overflow: hidden;
}

.feat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .08)
}

.feat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px
}

.fc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.fc2::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.fc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.fc4::before {
    background: linear-gradient(90deg, var(--green), var(--teal))
}

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px
}

.fi1 {
    background: rgba(26, 86, 255, .15);
    border: 1px solid rgba(26, 86, 255, .25)
}

.fi2 {
    background: rgba(232, 165, 0, .12);
    border: 1px solid rgba(232, 165, 0, .25)
}

.fi3 {
    background: rgba(124, 58, 237, .15);
    border: 1px solid rgba(124, 58, 237, .25)
}

.fi4 {
    background: rgba(22, 163, 74, .12);
    border: 1px solid rgba(22, 163, 74, .25)
}

.feat-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 7px
}

.feat-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, .48);
    line-height: 1.6
}

/* FOOTER STRIP */
.footer-strip {
    background: #060e1c;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fs-left {
    font-size: 12px;
    color: rgba(255, 255, 255, .4)
}

.fs-left span {
    color: var(--gold)
}

.fs-contact {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.fs-ci {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5)
}

.fs-ci .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal)
}

/* ── HERO v2 final ── */
.hero2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    background: linear-gradient(130deg, #eef2ff 0%, #e8ecfc 45%, #f0eaff 100%);
    position: relative;
    overflow: hidden;
    height: 540px;
}



.h2bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(88px);
    pointer-events: none;
    z-index: 0
}

.hb1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(#c2d0ff, transparent 70%);
    top: -130px;
    left: 25%;
    opacity: .7
}

.hb2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(#d8c4ff, transparent 70%);
    bottom: -50px;
    right: 410px;
    opacity: .55
}

.hb3 {
    width: 240px;
    height: 240px;
    background: radial-gradient(#b4edd9, transparent 70%);
    top: 40px;
    left: 5%;
    opacity: .5
}

/* LEFT */
.h2-left {
    flex: 3 3 0;
    min-width: 0;
    padding: 24px 24px 20px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.h2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(26, 86, 255, .07);
    border: 1px solid rgba(26, 86, 255, .15);
    border-radius: 99px;
    padding: 4px 12px 4px 8px;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #1a56ff;
    letter-spacing: .04em;
    width: fit-content;
    white-space: nowrap;
}

.h2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00c9a0;
    box-shadow: 0 0 8px #00c9a0;
    animation: blink 2s ease infinite;
    flex-shrink: 0
}

.h2-title {
    margin-bottom: 6px;
    line-height: 1.06
}

.h2-t1 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 900;
    color: #1a2340;
    letter-spacing: -.025em
}

.h2-t2 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 900;
    letter-spacing: -.025em;
    background: linear-gradient(90deg, #e69400, #ef5820);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.h2-desc {
    font-size: 12px;
    color: #7a88aa;
    line-height: 1.6;
    max-width: 460px;
    margin-bottom: 10px
}

.h2-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px
}

.h2-stat {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.h2-sv {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: #ef5820
}

.h2-sl {
    font-size: 10px;
    color: #9aa3be;
    font-weight: 500
}

.h2-vdiv {
    width: 1px;
    height: 26px;
    background: rgba(26, 35, 64, .12)
}

/* BADGE GRID 4×2 */
.h2-badge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.h2badge {
    border-radius: 9px;
    padding: 8px 11px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
    border: 1.5px solid rgba(255, 255, 255, .2);
}

.h2badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18)
}

.hb-icon-img {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

.h2badge.flash {
    background: linear-gradient(145deg, #c05422, #7a2500)
}

.h2badge.noshop {
    background: linear-gradient(135deg, #1b4d94, #0e2c5a)
}

.h2badge.tet {
    background: linear-gradient(135deg, #941b4d, #5a0e2c)
}

.h2badge.full {
    background: linear-gradient(135deg, #0c6e5e, #053c34)
}

.h2badge.fam {
    background: linear-gradient(135deg, #2c6a1b, #163908)
}

.h2badge.vip {
    background: linear-gradient(135deg, #7a5010, #402a06)
}

.h2badge.sem {
    background: linear-gradient(135deg, #491b94, #270e5a)
}

.h2badge.more {
    background: linear-gradient(135deg, #2c3e6e, #1a2445);
    border: 1.5px dashed rgba(255, 255, 255, .25)
}

/* accent top line */
.h2badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px
}

.h2badge.flash::before {
    background: linear-gradient(90deg, #fbbf24, #f97316)
}

.h2badge.noshop::before {
    background: linear-gradient(90deg, #60a5fa, #34d399)
}

.h2badge.tet::before {
    background: linear-gradient(90deg, #f472b6, #fb923c)
}

.h2badge.full::before {
    background: linear-gradient(90deg, #34d399, #60a5fa)
}

.h2badge.fam::before {
    background: linear-gradient(90deg, #86efac, #67e8f9)
}

.h2badge.vip::before {
    background: linear-gradient(90deg, #fbbf24, #fb923c)
}

.h2badge.sem::before {
    background: linear-gradient(90deg, #c084fc, #818cf8)
}

.h2badge.more::before {
    background: linear-gradient(90deg, #94a3b8, #cbd5e1)
}

.hb-icon {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3))
}

.hb-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
    text-align: center;
    width: 100%;
}

.hb-sub {
    font-size: 9.5px;
    color: rgba(255, 255, 255, .55);
    line-height: 1;
    text-align: center;
    width: 100%;
}

/* RIGHT */
.h2-right {
    flex: 2 2 0 !important;
    width: auto !important;
    padding: 14px 16px 14px 10px;
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.h2-filter-card {
    width: 100%;
    height: 100%;
    background: #ffffff !important;
    border: 1.5px solid rgba(26, 35, 64, .1) !important;
    border-radius: 14px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 24px rgba(26, 35, 64, .09), 0 1px 4px rgba(26, 35, 64, .05);
}

.h2-fcard-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #edf0f8;
    margin-bottom: 0
}

.h2-fcard-icon {
    font-size: 14px
}

.h2-fcard-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #1a2340 !important
}

.h2-frow {
    display: flex;
    gap: 6px;
    align-items: flex-start
}

.h2-fg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0
}

.h2-fl {
    font-size: 8.5px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #9aa3be !important
}

.h2-fs {
    appearance: none;
    background: #f5f7fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%239aa3be' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center !important;
    border: 1.5px solid #dde4f0 !important;
    border-radius: 7px;
    padding: 5px 18px 5px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #1a2340 !important;
    cursor: pointer;
    width: 100%;
    transition: border-color .12s, background .12s;
}

.h2-fs:focus {
    outline: none;
    border-color: #1a56ff !important;
    background: #eff3ff !important
}

.h2-month-nav {
    display: flex;
    align-items: center
}

.h2-msel {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: 56px !important;
    text-align: center;
    flex-shrink: 0
}

.h2-marrow {
    width: 26px;
    height: 30px;
    border: 1.5px solid #dde4f0 !important;
    background: #f5f7fd !important;
    color: #7a88aa !important;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    flex-shrink: 0;
}

.h2-marrow:first-child {
    border-radius: 7px 0 0 7px
}

.h2-marrow:last-child {
    border-radius: 0 7px 7px 0
}

.h2-marrow:hover {
    background: #e8efff !important;
    color: #1a56ff !important;
    border-color: #1a56ff !important
}

.h2-dr {
    display: flex;
    align-items: center;
    gap: 3px
}

.h2-date {
    background: #f5f7fd !important;
    border: 1.5px solid #dde4f0 !important;
    border-radius: 7px;
    padding: 5px 5px;
    font-family: inherit;
    font-size: 10.5px;
    color: #1a2340 !important;
    flex: 1;
    min-width: 0;
}

.h2-date:focus {
    outline: none;
    border-color: #1a56ff !important
}

.h2-dr-sep {
    color: #9aa3be;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0
}

.h2-apply {
    width: 100%;
    background: linear-gradient(135deg, #1a56ff, #1340d4);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 8px 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(26, 86, 255, .32);
    transition: opacity .12s, transform .12s;
    margin-top: 2px;
}

.h2-apply:hover {
    opacity: .9;
    transform: translateY(-1px)
}

/* ── SEARCH BOX ── /* ── SEARCH BOX ── */
.search-wrap {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 32px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(26, 35, 64, .05);
}

.sf {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px
}

.sf label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted)
}

.sf select {
    appearance: none;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 7px 28px 7px 11px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer
}

.sf select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26, 86, 255, .1)
}

.toggle-group {
    display: flex;
    gap: 4px
}

.tbtn {
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    font-family: inherit
}

.tbtn.active,
.tbtn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.search-btn {
    background: linear-gradient(135deg, var(--blue), #1340d4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-end;
    box-shadow: 0 4px 12px rgba(26, 86, 255, .3);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity .13s;
}

.search-btn:hover {
    opacity: .9
}

/* ── SECTION ── */
.section {
    padding: 28px 32px
}

.section+.section {
    padding-top: 0
}

.section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.section-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--text)
}

.section-title span:not(.tg-group-badge) {
    background: linear-gradient(90deg, var(--blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.view-all {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap .13s
}

.view-all:hover {
    gap: 7px
}

/* FILTER TAGS */
.filter-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center
}

.ftag {
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    white-space: nowrap;
}

.ftag:hover,
.ftag.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.filter-right {
    margin-left: auto
}

.status-sel {
    appearance: none;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 5px 26px 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer
}

/* UPCOMING CARDS */
.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.ucard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
    position: relative;
}

.ucard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)
}

.ucard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2
}

.uc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.uc2::before {
    background: linear-gradient(90deg, var(--orange), var(--pink))
}

.uc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.uc4::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.ucard-top {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border)
}

.uc-agent {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px
}

.uc-airline {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500
}

.uc-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 8px;
}

.uc-date .cal {
    font-size: 12px
}

.uc-meta {
    font-size: 10.5px;
    color: var(--muted);
    margin-left: auto
}

.ucard-bar {
    padding: 10px 14px
}

.seat-bar {
    display: flex;
    height: 18px;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

.sb-chot {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-pend {
    background: linear-gradient(90deg, #ca8a04, #facc15);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-con {
    background: linear-gradient(90deg, #c2410c, #f97316);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-lbl {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .95);
    padding: 0 4px;
    white-space: nowrap
}

.uc-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px
}

.uctag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .03em
}

.ut-noshop {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4
}

.ut-flash {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.ut-tet {
    background: #fdf4ff;
    color: #7c3aed;
    border: 1px solid #e9d5ff
}

.ut-full {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.ut-fam {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.ut-vip {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

/* VIEW MORE */
.view-more-row {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px
}

.view-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 8px 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    cursor: pointer;
    transition: all .13s;
}

.view-more-btn:hover {
    background: #eff3ff;
    border-color: var(--blue)
}

/* TOUR GROUP SECTION */
.tour-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(90deg, #f8faff, #fff);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.tg-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 7px
}

.tg-title::before {
    content: '—';
    color: var(--blue);
    opacity: .5
}

.tg-vall {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px
}

.tg-vall:hover {
    text-decoration: underline
}

.tour-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
    cursor: pointer;
    gap: 16px;
}

.tour-row:last-child {
    border-bottom: none
}

.tour-row:hover {
    background: #f7f9ff
}

.tr-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0
}

.tr-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap
}

.tr-price .coin {
    font-size: 13px
}

.tr-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.tr-month {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap
}

.date-chip {
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    background: #f0f4fb;
    border: 1px solid var(--border2);
    color: var(--text);
    cursor: pointer;
    transition: all .13s;
}

.date-chip:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.date-chip.hot {
    background: rgba(255, 107, 43, .1);
    border-color: rgba(255, 107, 43, .3);
    color: var(--orange)
}

/* SECTION DIVIDER */
.section-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--teal), var(--purple), var(--pink));
    margin: 0 32px;
    border-radius: 99px;
    opacity: .2;
}

/* ── FEATURES FOOTER ── */
.feat-footer {
    position: relative;
    overflow: hidden;
    padding: 52px 32px;
    background: #0d1829;
    margin-top: 8px;
}

.feat-footer-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0d1829 0%, #1a3050 50%, #0d1829 100%);
    opacity: .15
}

.feat-footer-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 24, 41, .95), rgba(13, 24, 41, .85))
}

.feat-fb1 {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(#1a56ff, transparent 70%);
    top: -80px;
    left: -40px;
    opacity: .25;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-fb2 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(#7c3aed, transparent 70%);
    bottom: -40px;
    right: 10%;
    opacity: .2;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-content {
    position: relative;
    z-index: 2
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.feat-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: transform .18s, background .18s;
    position: relative;
    overflow: hidden;
}

.feat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .08)
}

.feat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px
}

.fc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.fc2::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.fc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.fc4::before {
    background: linear-gradient(90deg, var(--green), var(--teal))
}

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px
}

.fi1 {
    background: rgba(26, 86, 255, .15);
    border: 1px solid rgba(26, 86, 255, .25)
}

.fi2 {
    background: rgba(232, 165, 0, .12);
    border: 1px solid rgba(232, 165, 0, .25)
}

.fi3 {
    background: rgba(124, 58, 237, .15);
    border: 1px solid rgba(124, 58, 237, .25)
}

.fi4 {
    background: rgba(22, 163, 74, .12);
    border: 1px solid rgba(22, 163, 74, .25)
}

.feat-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 7px
}

.feat-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, .48);
    line-height: 1.6
}

/* FOOTER STRIP */
.footer-strip {
    background: #060e1c;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fs-left {
    font-size: 12px;
    color: rgba(255, 255, 255, .4)
}

.fs-left span {
    color: var(--gold)
}

.fs-contact {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.fs-ci {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5)
}

.fs-ci .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal)
}

/* ── HERO v2: 2-col side-by-side ── */
.hero2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    background: linear-gradient(135deg, #f2f5ff 0%, #eceffe 50%, #f4eeff 100%) !important;
    position: relative;
    overflow: hidden;
    min-height: 480px;
}

/* bg blobs */
.h2bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(88px);
    pointer-events: none;
    z-index: 0
}

.hb1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(#c4d3ff, transparent 70%);
    top: -120px;
    left: 20%;
    opacity: .7
}

.hb2 {
    width: 340px;
    height: 340px;
    background: radial-gradient(#dcc7ff, transparent 70%);
    bottom: -60px;
    right: 340px;
    opacity: .55
}

.hb3 {
    width: 240px;
    height: 240px;
    background: radial-gradient(#b6eedd, transparent 70%);
    top: 40px;
    left: 8%;
    opacity: .5
}

/* ── LEFT col ── */
.h2-left {
    flex: 1 1 0;
    min-width: 0;
    padding: 32px 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
}

.h2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(26, 86, 255, .08);
    border: 1px solid rgba(26, 86, 255, .16);
    border-radius: 99px;
    padding: 4px 12px 4px 9px;
    margin-bottom: 14px;
    font-size: 10px;
    font-weight: 700;
    color: #1a56ff;
    letter-spacing: .07em;
    text-transform: uppercase;
    width: fit-content;
}

.h2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00c9a0;
    box-shadow: 0 0 8px #00c9a0;
    animation: blink 2s ease infinite;
    flex-shrink: 0
}

.h2-title {
    margin-bottom: 10px;
    line-height: 1.05
}

.h2-t1 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 900;
    color: #1a2340;
    letter-spacing: -.025em
}

.h2-t2 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 900;
    letter-spacing: -.025em;
    background: linear-gradient(90deg, #e69400, #ef5820);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.h2-desc {
    font-size: 12.5px;
    color: #7a88aa;
    line-height: 1.65;
    max-width: 500px;
    margin-bottom: 18px
}

.h2-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px
}

.h2-stat {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.h2-sv {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #ef5820
}

.h2-sl {
    font-size: 10px;
    color: #9aa3be;
    font-weight: 500
}

.h2-vdiv {
    width: 1px;
    height: 28px;
    background: rgba(26, 35, 64, .12)
}

/* Category badges */
.h2-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.h2badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.h2badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12)
}

.h2badge.flash {
    background: linear-gradient(135deg, #bf5520, #7a2500);
    color: #fff;
    box-shadow: 0 3px 10px rgba(191, 85, 32, .35)
}

.h2badge.noshop {
    background: #1c4f96;
    color: #fff;
    box-shadow: 0 3px 10px rgba(28, 79, 150, .3)
}

.h2badge.tet {
    background: #961c4f;
    color: #fff;
    box-shadow: 0 3px 10px rgba(150, 28, 79, .3)
}

.h2badge.full {
    background: #0d7060;
    color: #fff;
    box-shadow: 0 3px 10px rgba(13, 112, 96, .3)
}

.h2badge.fam {
    background: #2d6b1c;
    color: #fff;
    box-shadow: 0 3px 10px rgba(45, 107, 28, .3)
}

.h2badge.vip {
    background: linear-gradient(135deg, #7a5210, #4a3008);
    color: #fde68a;
    box-shadow: 0 3px 10px rgba(122, 82, 16, .35)
}

.h2badge.sem {
    background: #4a1c96;
    color: #fff;
    box-shadow: 0 3px 10px rgba(74, 28, 150, .3)
}

/* Badge grid tiles — giữ layout cột, căn giữa nội dung */
.h2-badge-grid .h2badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    gap: 3px;
    min-height: 0;
}

.h2-badge-grid .hb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.h2-badge-grid .hb-name,
.h2-badge-grid .hb-sub {
    text-align: center;
    width: 100%;
}

/* ── RIGHT col: filter card ── */
.h2-right {
    flex: 0 0 360px;
    width: 360px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.h2-filter-card {
    width: 100%;
    background: #ffffff !important;
    border: 1.5px solid #dde4f0 !important;
    border-radius: 16px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 24px rgba(26, 35, 64, .08), 0 1px 4px rgba(26, 35, 64, .05);
}

.h2-fcard-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 2px
}

.h2-fcard-icon {
    font-size: 14px
}

.h2-fcard-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #1a2340 !important
}

.h2-frow {
    display: flex;
    gap: 6px;
    align-items: flex-start
}

.h2-fg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0
}

.h2-fl {
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #9aa3be !important
}

.h2-fs {
    appearance: none;
    background: #f4f6fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%239aa3be' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center !important;
    border: 1.5px solid #dde4f0 !important;
    border-radius: 7px;
    padding: 5px 18px 5px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #1a2340 !important;
    cursor: pointer;
    width: 100%;
    transition: border-color .12s, background .12s;
}

.h2-fs:focus {
    outline: none;
    border-color: #1a56ff;
    background: #eff3ff
}

.h2-month-nav {
    display: flex;
    align-items: center
}

.h2-msel {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: 52px !important;
    text-align: center;
    background: #f4f6fc !important
}

.h2-marrow {
    width: 26px;
    height: 30px;
    border: 1.5px solid #dde4f0 !important;
    background: #f4f6fc !important;
    color: #7a88aa !important;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    flex-shrink: 0;
}

.h2-marrow:first-child {
    border-radius: 7px 0 0 7px
}

.h2-marrow:last-child {
    border-radius: 0 7px 7px 0
}

.h2-marrow:hover {
    background: #e8efff;
    color: #1a56ff;
    border-color: #1a56ff
}

.h2-dr {
    display: flex;
    align-items: center;
    gap: 3px
}

.h2-date {
    background: #f4f6fc !important;
    border: 1.5px solid #dde4f0 !important;
    border-radius: 7px;
    padding: 5px 5px;
    font-family: inherit;
    font-size: 10.5px;
    color: #1a2340 !important;
    flex: 1;
    min-width: 0;
}

.h2-date:focus {
    outline: none;
    border-color: #1a56ff
}

.h2-dr-sep {
    color: #9aa3be;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0
}

.h2-apply {
    width: 100%;
    background: linear-gradient(135deg, #1a56ff, #1340d4);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(26, 86, 255, .35);
    transition: opacity .12s, transform .12s;
    margin-top: 2px;
}

.h2-apply:hover {
    opacity: .9;
    transform: translateY(-1px)
}

/* ── SEARCH BOX ── /* ── SEARCH BOX ── */
.search-wrap {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 32px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(26, 35, 64, .05);
}

.sf {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px
}

.sf label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted)
}

.sf select {
    appearance: none;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 7px 28px 7px 11px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer
}

.sf select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26, 86, 255, .1)
}

.toggle-group {
    display: flex;
    gap: 4px
}

.tbtn {
    padding: 6px 11px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    font-family: inherit
}

.tbtn.active,
.tbtn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.search-btn {
    background: linear-gradient(135deg, var(--blue), #1340d4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-end;
    box-shadow: 0 4px 12px rgba(26, 86, 255, .3);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity .13s;
}

.search-btn:hover {
    opacity: .9
}

/* ── SECTION ── */
.section {
    padding: 28px 32px
}

.section+.section {
    padding-top: 0
}

.section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.section-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--text)
}

.section-title span:not(.tg-group-badge) {
    background: linear-gradient(90deg, var(--blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.view-all {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap .13s
}

.view-all:hover {
    gap: 7px
}

/* FILTER TAGS */
.filter-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center
}

.ftag {
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    white-space: nowrap;
}

.ftag:hover,
.ftag.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.filter-right {
    margin-left: auto
}

.status-sel {
    appearance: none;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 5px 26px 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer
}

/* UPCOMING CARDS */
.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.ucard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
    position: relative;
}

.ucard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)
}

.ucard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2
}

.uc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.uc2::before {
    background: linear-gradient(90deg, var(--orange), var(--pink))
}

.uc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.uc4::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.ucard-top {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border)
}

.uc-agent {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px
}

.uc-airline {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500
}

.uc-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 8px;
}

.uc-date .cal {
    font-size: 12px
}

.uc-meta {
    font-size: 10.5px;
    color: var(--muted);
    margin-left: auto
}

.ucard-bar {
    padding: 10px 14px
}

.seat-bar {
    display: flex;
    height: 18px;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

.sb-chot {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-pend {
    background: linear-gradient(90deg, #ca8a04, #facc15);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-con {
    background: linear-gradient(90deg, #c2410c, #f97316);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-lbl {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .95);
    padding: 0 4px;
    white-space: nowrap
}

.uc-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px
}

.uctag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .03em
}

.ut-noshop {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4
}

.ut-flash {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.ut-tet {
    background: #fdf4ff;
    color: #7c3aed;
    border: 1px solid #e9d5ff
}

.ut-full {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.ut-fam {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.ut-vip {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

/* VIEW MORE */
.view-more-row {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px
}

.view-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 8px 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    cursor: pointer;
    transition: all .13s;
}

.view-more-btn:hover {
    background: #eff3ff;
    border-color: var(--blue)
}

/* TOUR GROUP SECTION */
.tour-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(90deg, #f8faff, #fff);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.tg-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 7px
}

.tg-title::before {
    content: '—';
    color: var(--blue);
    opacity: .5
}

.tg-vall {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px
}

.tg-vall:hover {
    text-decoration: underline
}

.tour-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
    cursor: pointer;
    gap: 16px;
}

.tour-row:last-child {
    border-bottom: none
}

.tour-row:hover {
    background: #f7f9ff
}

.tr-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0
}

.tr-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap
}

.tr-price .coin {
    font-size: 13px
}

.tr-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.tr-month {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap
}

.date-chip {
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    background: #f0f4fb;
    border: 1px solid var(--border2);
    color: var(--text);
    cursor: pointer;
    transition: all .13s;
}

.date-chip:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.date-chip.hot {
    background: rgba(255, 107, 43, .1);
    border-color: rgba(255, 107, 43, .3);
    color: var(--orange)
}

/* SECTION DIVIDER */
.section-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--teal), var(--purple), var(--pink));
    margin: 0 32px;
    border-radius: 99px;
    opacity: .2;
}

/* ── FEATURES FOOTER ── */
.feat-footer {
    position: relative;
    overflow: hidden;
    padding: 52px 32px;
    background: #0d1829;
    margin-top: 8px;
}

.feat-footer-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0d1829 0%, #1a3050 50%, #0d1829 100%);
    opacity: .15
}

.feat-footer-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 24, 41, .95), rgba(13, 24, 41, .85))
}

.feat-fb1 {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(#1a56ff, transparent 70%);
    top: -80px;
    left: -40px;
    opacity: .25;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-fb2 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(#7c3aed, transparent 70%);
    bottom: -40px;
    right: 10%;
    opacity: .2;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-content {
    position: relative;
    z-index: 2
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.feat-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: transform .18s, background .18s;
    position: relative;
    overflow: hidden;
}

.feat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .08)
}

.feat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px
}

.fc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.fc2::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.fc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.fc4::before {
    background: linear-gradient(90deg, var(--green), var(--teal))
}

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px
}

.fi1 {
    background: rgba(26, 86, 255, .15);
    border: 1px solid rgba(26, 86, 255, .25)
}

.fi2 {
    background: rgba(232, 165, 0, .12);
    border: 1px solid rgba(232, 165, 0, .25)
}

.fi3 {
    background: rgba(124, 58, 237, .15);
    border: 1px solid rgba(124, 58, 237, .25)
}

.fi4 {
    background: rgba(22, 163, 74, .12);
    border: 1px solid rgba(22, 163, 74, .25)
}

.feat-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 7px
}

.feat-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, .48);
    line-height: 1.6
}

/* FOOTER STRIP */
.footer-strip {
    background: #060e1c;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fs-left {
    font-size: 12px;
    color: rgba(255, 255, 255, .4)
}

.fs-left span {
    color: var(--gold)
}

.fs-contact {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.fs-ci {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5)
}

.fs-ci .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal)
}

/* ── HERO v2: TRUE 2-column ── */
.hero2 {
    display: flex !important;
    flex-direction: row !important;
    height: 580px;
    overflow: hidden;
    background: linear-gradient(135deg, #f4f7ff 0%, #edf0fc 50%, #f0eaff 100%);
    position: relative;
}

.h2-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none
}

.h2b1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(#c5d5ff, transparent 70%);
    top: -120px;
    right: 0;
    opacity: .65
}

.h2b2 {
    width: 360px;
    height: 360px;
    background: radial-gradient(#ddc8ff, transparent 70%);
    bottom: -60px;
    left: 45%;
    opacity: .5
}

.h2b3 {
    width: 260px;
    height: 260px;
    background: radial-gradient(#b8f0e0, transparent 70%);
    top: 60px;
    left: 35%;
    opacity: .45
}

/* LEFT: flex col, takes remaining space */
.h2-left {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding: 22px 22px 18px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.h2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(26, 86, 255, .07);
    border: 1px solid rgba(26, 86, 255, .16);
    border-radius: 99px;
    padding: 4px 13px 4px 9px;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #1a56ff;
    letter-spacing: .07em;
    text-transform: uppercase;
    width: fit-content;
}

.h2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d4aa;
    box-shadow: 0 0 8px #00d4aa;
    animation: blink 2s ease infinite;
    flex-shrink: 0
}

.h2-title {
    margin-bottom: 6px;
    line-height: 1.06
}

.h2-t1 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #1a2340;
    letter-spacing: -.02em
}

.h2-t2 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -.02em;
    background: linear-gradient(90deg, #e8a500, #f05a28);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.h2-desc {
    font-size: 12.5px;
    color: #7a88aa;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 10px
}

.h2-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 12px
}

.h2-stat {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.h2-sv {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: #f05a28
}

.h2-sl {
    font-size: 10px;
    color: #7a88aa;
    font-weight: 500
}

/* CAT GRID */
.h2-catgrid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.h2cat {
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
}

.h2cat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18)
}

.h2cat-flash {
    grid-row: 1/3;
    background: linear-gradient(145deg, #bf5520, #7a2500)
}

.h2cat-noshop {
    background: linear-gradient(135deg, #1c4f96, #0e2d5a)
}

.h2cat-tet {
    background: linear-gradient(135deg, #961c4f, #5a0e2d)
}

.h2cat-full {
    background: linear-gradient(135deg, #0d7060, #053d34)
}

.h2cat-fam {
    background: linear-gradient(135deg, #2d6b1c, #163a0c)
}

.h2cat-vip {
    background: linear-gradient(135deg, #7a5210, #3d2800)
}

.h2cat-sem {
    background: linear-gradient(135deg, #4a1c96, #260e5a)
}

.h2cat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px
}

.h2cat-flash::before {
    background: linear-gradient(90deg, #fbbf24, #f97316)
}

.h2cat-noshop::before {
    background: linear-gradient(90deg, #60a5fa, #34d399)
}

.h2cat-tet::before {
    background: linear-gradient(90deg, #f472b6, #fb923c)
}

.h2cat-full::before {
    background: linear-gradient(90deg, #34d399, #60a5fa)
}

.h2cat-fam::before {
    background: linear-gradient(90deg, #86efac, #67e8f9)
}

.h2cat-vip::before {
    background: linear-gradient(90deg, #fbbf24, #fb923c)
}

.h2cat-sem::before {
    background: linear-gradient(90deg, #c084fc, #818cf8)
}

.h2cat-tag {
    position: absolute;
    top: 7px;
    left: 7px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 99px;
    padding: 1px 7px;
    font-size: 9px;
    font-weight: 700;
    color: #fbbf24
}

.h2cat-icon {
    font-size: 14px;
    margin-bottom: 3px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35))
}

.h2cat-flash .h2cat-icon {
    font-size: 20px;
    margin-bottom: 6px
}

.h2cat-name {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: 13px;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.h2cat-flash .h2cat-name {
    font-size: 17px
}

.h2cat-sub {
    font-size: 9px;
    color: rgba(255, 255, 255, .55);
    margin-top: 2px
}

/* RIGHT: dark filter, fixed width */
.h2-right {
    flex: 0 0 360px;
    width: 360px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background: transparent
}

.h2-filter-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.h2-filter-icon {
    font-size: 14px
}

.h2-filter-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .88)
}

.h2-fgroup {
    display: flex;
    gap: 7px;
    align-items: flex-start
}

.h2-fg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0
}

.h2-fg-grow {
    flex: 1.5
}

.h2-fg-full {
    flex: 10
}

.h2-fl {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .38)
}

.h2-fs {
    appearance: none;
    background: rgba(255, 255, 255, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 7px center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    padding: 5px 20px 5px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #e8eeff;
    cursor: pointer;
    width: 100%
}

.h2-fs:focus {
    outline: none;
    border-color: rgba(26, 86, 255, .55)
}

.h2-month-nav {
    display: flex;
    align-items: center
}

.h2-month-sel {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    width: 52px !important;
    text-align: center
}

.h2-marrow {
    width: 24px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    flex-shrink: 0
}

.h2-marrow:first-child {
    border-radius: 6px 0 0 6px
}

.h2-marrow:last-child {
    border-radius: 0 6px 6px 0
}

.h2-marrow:hover {
    background: rgba(26, 86, 255, .28);
    color: #fff
}

.h2-dr {
    display: flex;
    align-items: center;
    gap: 3px
}

.h2-date-inp {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    padding: 5px 5px;
    font-family: inherit;
    font-size: 10.5px;
    color: #e8eeff;
    flex: 1;
    min-width: 0
}

.h2-date-inp:focus {
    outline: none;
    border-color: rgba(26, 86, 255, .55)
}

.h2-dr-sep {
    color: rgba(255, 255, 255, .3);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0
}

.h2-apply-btn {
    width: 100%;
    background: linear-gradient(135deg, #1a56ff, #1340d4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(26, 86, 255, .4);
    transition: opacity .13s, transform .12s;
    margin-top: auto
}

.h2-apply-btn:hover {
    opacity: .9;
    transform: translateY(-1px)
}

/* ── SEARCH BOX ──
.search-wrap{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:16px 32px;
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  box-shadow:0 2px 8px rgba(26,35,64,.05);
}
.sf{display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px}
.sf label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sf select{appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;border:1.5px solid var(--border2);border-radius:8px;padding:7px 28px 7px 11px;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--text);cursor:pointer}
.sf select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,255,.1)}
.toggle-group{display:flex;gap:4px}
.tbtn{padding:6px 11px;border-radius:7px;font-size:11.5px;font-weight:600;border:1.5px solid var(--border2);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .13s;font-family:inherit}
.tbtn.active,.tbtn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.search-btn{
  background:linear-gradient(135deg,var(--blue),#1340d4);
  color:#fff;border:none;border-radius:8px;
  padding:9px 20px;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;align-self:flex-end;
  box-shadow:0 4px 12px rgba(26,86,255,.3);
  display:flex;align-items:center;gap:6px;
  transition:opacity .13s;
}
.search-btn:hover{opacity:.9}

/* ── SECTION ── */
.section {
    padding: 20px 18px;
}

.section+.section {
    padding-top: 0
}

.section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.section-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--text)
}

.section-title span:not(.tg-group-badge) {
    background: linear-gradient(90deg, var(--blue), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.view-all {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap .13s
}

.view-all:hover {
    gap: 7px
}

/* FILTER TAGS */
.filter-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center
}

.ftag {
    padding: 5px 14px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    white-space: nowrap;
}

.ftag:hover,
.ftag.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.filter-right {
    margin-left: auto
}

.status-sel {
    appearance: none;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 5px 26px 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer
}

/* UPCOMING CARDS */
.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.ucard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
    position: relative;
}

.ucard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg)
}

.ucard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2
}

.uc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.uc2::before {
    background: linear-gradient(90deg, var(--orange), var(--pink))
}

.uc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.uc4::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.ucard-top {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border)
}

.uc-agent {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px
}

.uc-airline {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500
}

.uc-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 8px;
}

.uc-date .cal {
    font-size: 12px
}

.uc-meta {
    font-size: 10.5px;
    color: var(--muted);
    margin-left: auto
}

.ucard-bar {
    padding: 10px 14px
}

.seat-bar {
    display: flex;
    height: 18px;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

.sb-chot {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-pend {
    background: linear-gradient(90deg, #ca8a04, #facc15);
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-con {
    background: linear-gradient(90deg, #c2410c, #f97316);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.sb-lbl {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, .95);
    padding: 0 4px;
    white-space: nowrap
}

.uc-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px
}

.uctag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .03em
}

.ut-noshop {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4
}

.ut-flash {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.ut-tet {
    background: #fdf4ff;
    color: #7c3aed;
    border: 1px solid #e9d5ff
}

.ut-full {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.ut-fam {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.ut-vip {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

/* VIEW MORE */
.view-more-row {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px
}

.view-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 8px 22px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    cursor: pointer;
    transition: all .13s;
}

.view-more-btn:hover {
    background: #eff3ff;
    border-color: var(--blue)
}

/* TOUR GROUP SECTION */
.tour-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(90deg, #f8faff, #fff);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.tg-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 7px
}

.tg-title::before {
    content: '—';
    color: var(--blue);
    opacity: .5
}

.tg-vall {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px
}

.tg-vall:hover {
    text-decoration: underline
}

.tour-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
    cursor: pointer;
    gap: 16px;
}

.tour-row:last-child {
    border-bottom: none
}

.tour-row:hover {
    background: #f7f9ff
}

.tr-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0
}

.tr-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap
}

.tr-price .coin {
    font-size: 13px
}

.tr-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.tr-month {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap
}

.date-chip {
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    background: #f0f4fb;
    border: 1px solid var(--border2);
    color: var(--text);
    cursor: pointer;
    transition: all .13s;
}

.date-chip:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.date-chip.hot {
    background: rgba(255, 107, 43, .1);
    border-color: rgba(255, 107, 43, .3);
    color: var(--orange)
}

/* SECTION DIVIDER */
.section-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--teal), var(--purple), var(--pink));
    margin: 0 32px;
    border-radius: 99px;
    opacity: .2;
}

/* ── FEATURES FOOTER ── */
.feat-footer {
    position: relative;
    overflow: hidden;
    padding: 52px 32px;
    background: #0d1829;
    margin-top: 8px;
}

.feat-footer-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0d1829 0%, #1a3050 50%, #0d1829 100%);
    opacity: .15
}

.feat-footer-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 24, 41, .95), rgba(13, 24, 41, .85))
}

.feat-fb1 {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(#1a56ff, transparent 70%);
    top: -80px;
    left: -40px;
    opacity: .25;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-fb2 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(#7c3aed, transparent 70%);
    bottom: -40px;
    right: 10%;
    opacity: .2;
    border-radius: 50%;
    filter: blur(70px)
}

.feat-content {
    position: relative;
    z-index: 2
}

.feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.feat-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: transform .18s, background .18s;
    position: relative;
    overflow: hidden;
}

.feat-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .08)
}

.feat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px
}

.fc1::before {
    background: linear-gradient(90deg, var(--blue), var(--teal))
}

.fc2::before {
    background: linear-gradient(90deg, var(--gold), var(--orange))
}

.fc3::before {
    background: linear-gradient(90deg, var(--purple), var(--pink))
}

.fc4::before {
    background: linear-gradient(90deg, var(--green), var(--teal))
}

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px
}

.fi1 {
    background: rgba(26, 86, 255, .15);
    border: 1px solid rgba(26, 86, 255, .25)
}

.fi2 {
    background: rgba(232, 165, 0, .12);
    border: 1px solid rgba(232, 165, 0, .25)
}

.fi3 {
    background: rgba(124, 58, 237, .15);
    border: 1px solid rgba(124, 58, 237, .25)
}

.fi4 {
    background: rgba(22, 163, 74, .12);
    border: 1px solid rgba(22, 163, 74, .25)
}

.feat-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 7px
}

.feat-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, .48);
    line-height: 1.6
}

/* FOOTER STRIP */
.footer-strip {
    background: #060e1c;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fs-left {
    font-size: 12px;
    color: rgba(255, 255, 255, .4)
}

.fs-left span {
    color: var(--gold)
}

.fs-contact {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.fs-ci {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5)
}

.fs-ci .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal)
}

/* ── HERO v2: 2-col layout ── */
.hero2 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f5f7ff 0%, #eef1fc 40%, #f5eeff 100%);
}

.h2-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none
}

.h2b1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(#c7d4ff, transparent 70%);
    top: -100px;
    right: 10%;
    opacity: .6
}

.h2b2 {
    width: 380px;
    height: 380px;
    background: radial-gradient(#e0c9ff, transparent 70%);
    bottom: 40px;
    right: 30%;
    opacity: .5
}

.h2b3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(#c9f0e8, transparent 70%);
    top: 80px;
    left: 30%;
    opacity: .4
}

/* LEFT */
.h2-left {
    padding: 20px 0 20px 20px;
    background: transparent;
    position: relative;
    z-index: 2;
}

.h2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(26, 86, 255, .08);
    border: 1px solid rgba(26, 86, 255, .18);
    border-radius: 99px;
    padding: 5px 14px 5px 10px;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 700;
    color: #1a56ff;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.h2-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 7px var(--teal);
    animation: blink 2s ease infinite;
    flex-shrink: 0
}

.h2-title {
    margin-bottom: 14px;
    line-height: 1.06
}

.h2-t1 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 900;
    color: #1a2340;
    letter-spacing: -.02em
}

.h2-t2 {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 900;
    letter-spacing: -.02em;
    background: linear-gradient(90deg, var(--gold), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 5px;
}

.h2-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 600px;
    margin-bottom: 22px
}

.h2-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 26px
}

.h2-stat {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.h2-sv {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: var(--orange)
}

.h2-sl {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500
}

/* CATEGORY FLAT CARDS GRID */
.h2-catgrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
}

.h2cat {
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.h2cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .15)
}

.h2cat-flash {
    grid-row: 1/3;
    background: linear-gradient(145deg, #c45c20, #8b2a00);
    min-height: 220px
}

.h2cat-noshop {
    background: linear-gradient(135deg, #1a4a8f, #0f2d5c)
}

.h2cat-tet {
    background: linear-gradient(135deg, #8f1a4a, #5c0f2d)
}

.h2cat-full {
    background: linear-gradient(135deg, #0a6e5c, #054035)
}

.h2cat-fam {
    background: linear-gradient(135deg, #2d6e1a, #1a4010)
}

.h2cat-vip {
    background: linear-gradient(135deg, #6e4c0a, #3d2800)
}

.h2cat-sem {
    background: linear-gradient(135deg, #4a1a8f, #2a0f5c)
}

/* accent top bar */
.h2cat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px
}

.h2cat-flash::before {
    background: linear-gradient(90deg, #fbbf24, #f97316)
}

.h2cat-noshop::before {
    background: linear-gradient(90deg, #60a5fa, #34d399)
}

.h2cat-tet::before {
    background: linear-gradient(90deg, #f472b6, #fb923c)
}

.h2cat-full::before {
    background: linear-gradient(90deg, #34d399, #60a5fa)
}

.h2cat-fam::before {
    background: linear-gradient(90deg, #86efac, #67e8f9)
}

.h2cat-vip::before {
    background: linear-gradient(90deg, #fbbf24, #fb923c)
}

.h2cat-sem::before {
    background: linear-gradient(90deg, #c084fc, #818cf8)
}

.h2cat-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 99px;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
}

.h2cat-icon {
    font-size: 20px;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4))
}

.h2cat-flash .h2cat-icon {
    font-size: 28px;
    margin-bottom: 10px
}

.h2cat-name {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4)
}

.h2cat-flash .h2cat-name {
    font-size: 24px
}

.h2cat-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    margin-top: 4px
}

/* RIGHT: Dark filter panel */
.h2-right {
    flex: 0 0 360px;
    width: 360px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background: transparent
}

.h2-filter-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.h2-frow {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap
}

.h2-fg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 100px
}

.h2-fl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .4)
}

.h2-fs {
    appearance: none;
    background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    padding: 6px 26px 6px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #f0f4ff;
    cursor: pointer;
    width: 100%;
}

.h2-fs:focus {
    outline: none;
    border-color: rgba(26, 86, 255, .6)
}

.h2-month-nav {
    display: flex;
    align-items: center
}

.h2-marrow {
    width: 28px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    line-height: 1;
}

.h2-marrow:first-child {
    border-radius: 7px 0 0 7px
}

.h2-marrow:last-child {
    border-radius: 0 7px 7px 0
}

.h2-marrow:hover {
    background: rgba(26, 86, 255, .25);
    color: #fff;
    border-color: rgba(26, 86, 255, .4)
}

.h2-dr {
    display: flex;
    align-items: center;
    gap: 4px
}

.h2-date-inp {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    padding: 6px 7px;
    font-family: inherit;
    font-size: 11.5px;
    color: #f0f4ff;
    width: 116px;
}

.h2-date-inp:focus {
    outline: none;
    border-color: rgba(26, 86, 255, .6)
}

.h2-dr-sep {
    color: rgba(255, 255, 255, .35);
    font-weight: 700;
    font-size: 12px
}

.h2-apply-btn {
    background: linear-gradient(135deg, #1a56ff, #1340d4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 24px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-end;
    box-shadow: 0 4px 14px rgba(26, 86, 255, .4);
    transition: opacity .13s, transform .12s;
}

.h2-apply-btn:hover {
    opacity: .9;
    transform: translateY(-1px)
}

/* ── FINAL RATIO OVERRIDE: hero 3/5 · filter 2/5 ── */
.hero2 .h2-left {
    flex: 3 3 0 !important;
    width: auto !important;
    min-width: 0;
}

.hero2 .h2-right {
    flex: 2 2 0 !important;
    width: auto !important;
}

/* ── NEWS inside filter card ── */
.h2-news {
    border-top: 1px solid #edf0f8;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.h2-news-hd {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px
}

.h2-news-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0
}

.h2-news-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #9aa3be
}

.h2-news-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    text-decoration: none;
    padding: 5px 7px;
    border-radius: 7px;
    transition: background .12s;
    cursor: pointer;
}

.h2-news-item:hover {
    background: #f5f7fd
}

.h2-news-icon {
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px
}

.h2-news-text {
    font-size: 11.5px;
    font-weight: 500;
    color: #1a2340;
    line-height: 1.45;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2-news-item:hover .h2-news-text {
    color: var(--blue)
}

.h2-news-more {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 6px;
    transition: background .12s;
    align-self: flex-start;
    margin-top: 1px;
}

.h2-news-more:hover {
    background: #eff3ff
}

/* ── UPCOMING DARK TABLE ── */
.upcom-section {
    padding: 20px 18px;
}

.upcom-hd {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 14px;
    gap: 10px
}

.upcom-hd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.upcom-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.utag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    white-space: nowrap
}

.utag-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 13px;
    line-height: 1;
}

.utag-ico-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 2px;
}

.utag-txt {
    line-height: 1.2;
}

.utag.is-disabled {
    pointer-events: none;
    opacity: .55;
    cursor: wait;
}

.utag:hover,
.utag.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.upcom-sel {
    appearance: none;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 4px 24px 4px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer
}

/* Table wrapper */
.upcom-table {
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #dde4f0;
    box-shadow: 0 2px 8px rgba(26, 35, 64, .06);
    overflow: hidden;
}

/* Head row */
.upt-head {
    display: grid;
    grid-template-columns: 32px 66px 1fr 176px 96px 82px 82px 62px 74px;
    padding: 0 12px;
    background: #f5f7fd;
    height: 38px;
    align-items: center;
    border-bottom: 1.5px solid #dde4f0;
}

.upt-col {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9aa3be
}

.upt-total-hint {
    font-size: 8.5px;
    font-weight: 600;
    color: #b0bbd0;
    letter-spacing: 0;
    text-transform: none
}

/* Body rows */
.upt-row {
    display: grid;
    grid-template-columns: 32px 66px 1fr 176px 96px 82px 82px 62px 74px;
    padding: 0 12px;
    border-bottom: 1px solid #edf0f8;
    align-items: center;
    transition: background .1s;
    cursor: pointer;
    gap: 0;
}

.upt-row:last-child {
    border-bottom: none
}

.upt-row:hover {
    background: #f7f9ff
}

/* cell styles */
.col-stt {
    font-size: 11px;
    font-weight: 600;
    color: #b0bbd0;
    text-align: center
}

.col-date .upt-day {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a56ff;
    line-height: 1
}

.col-date .upt-yr {
    font-size: 9px;
    color: #b0bbd0;
    margin-top: 1px
}

.col-name .upt-tname {
    font-size: 12px;
    font-weight: 600;
    color: #1a2340;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px !important;
    display: block
}

.col-name .upt-tsub {
    font-size: 10px;
    color: #9aa3be;
    margin-top: 1px
}

.col-price {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #e67700;
    white-space: nowrap;
    text-align: right
}

/* Seats bar */
.col-seats {
    display: flex;
    align-items: center;
    gap: 6px
}

.upt-bar-wrap {
    flex: 1;
    height: 22px;
    border-radius: 4px;
    display: flex;
    position: relative;
    background: #e8edf4;
    border: 1px solid #c5cdd9;
    overflow: hidden;
}

.upt-seg-chot,
.upt-seg-pend,
.upt-seg-con,
.hsd-sb-g,
.hsd-sb-y,
.hsd-sb-r,
.seat-bar-seg {
    position: relative;
    height: 100%;
    min-width: 0;
    flex-basis: 0;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.seat-bar-seg {
    min-width: 20px;
}

.upt-seg-chot {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.upt-seg-pend {
    background: linear-gradient(90deg, #ca8a04, #facc15);
}

.upt-seg-con {
    background: linear-gradient(90deg, #c2410c, #f97316);
}

.upt-seg-lbl {
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    padding: 0 4px;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.2px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .5);
}

.upt-lbadge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0
}

.ulb-ll {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.ulb-lp {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe
}

.ulb-lf {
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid #fbcfe8
}

/* Status pills */
.upt-status {
    display: inline-block;
    padding: 3px 0;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap
}

.ust-full {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca
}

.ust-sap {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74
}

.ust-con {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

/* Actions */
.col-act {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center
}

.upt-ico {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all .12s
}

.upt-ico:hover {
    transform: translateY(-1px)
}

.upt-ico-edit {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe
}

.upt-ico-ns {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74
}

.upt-ico-del {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca
}

/* More btn */
.upcom-more-row {
    display: flex;
    justify-content: center;
    padding: 12px
}

.upcom-more-btn {
    background: #f5f7fd;
    border: 1.5px solid #c8d3ea;
    border-radius: 8px;
    padding: 7px 24px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #7a88aa;
    cursor: pointer;
    transition: all .13s
}

.upcom-more-btn:hover:not(:disabled) {
    background: #e8efff;
    border-color: #1a56ff;
    color: #1a56ff
}

.upcom-more-btn:disabled,
.upcom-more-btn.is-active {
    opacity: .75;
    cursor: default;
}

.col-seats {
    display: flex;
    align-items: center;
    gap: 5px
}

.upt-bar-wrap {
    flex: 1;
    height: 22px;
}

.upt-total-chip {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    color: #5a6a88;
    background: #f3f6fb;
    border: 1px solid #c5cdd9;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

.upt-row .upt-col {
    text-transform: none !important;
}

.col-name .upt-tsub {
    text-transform: none !important;
}

/* column dividers */
.upt-head .upt-col,
.upt-row .upt-col {
    border-right: 1px solid #edf0f8;
    padding: 0 10px;
}

.upt-head .upt-col:first-child,
.upt-row .upt-col:first-child {
    padding-left: 0
}

.upt-head .upt-col:last-child,
.upt-row .upt-col:last-child {
    border-right: none
}

.upt-head .upt-col {
    border-right-color: #dde4f0
}

/* label badge in table */
.col-label {
    display: flex;
    align-items: center
}

.upt-label-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ulb2-ll {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.ulb2-lp {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe
}

.ulb2-lf {
    background: #fdf2f8;
    color: #be185d !important;
    border: 1px solid #fbcfe8
}

.ulb2-fam {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.ulb2-vip {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d
}

.ulb2-ns {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4
}

/* status pills */
.ust-full {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap
}

.ust-sap {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap
}

.ust-con {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap
}

.ust-nguyen {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    white-space: normal
}

.upt-status {
    display: flex;
    align-items: center;
    justify-content: center
}

/* row spacing */
.upt-row {
    min-height: 52px
}

.col-name .upt-tname {
    max-width: none
}

.col-name .upt-tsub {
    font-size: 10px;
    color: #9aa3be;
    margin-top: 2px
}

/* seats col tighter */
.col-seats {
    display: flex;
    align-items: center;
    gap: 4px
}

.upt-bar-wrap {
    flex: 1;
    height: 22px;
}

.upt-total-chip {
    font-size: 10px;
    font-weight: 700;
    color: #5a6a88;
    white-space: nowrap;
}

/* actions: just edit + delete (no noshow) */
.col-act {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center
}

/* ── UPCOMING v3 CSS ── */
.upcom-hd {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
    gap: 10px
}

.upcom-hd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.upcom-tags {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap
}

.utag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1.5px solid #dde4f0;
    background: #fff;
    color: #7a88aa;
    cursor: pointer;
    transition: all .13s;
    white-space: nowrap
}

.utag-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 13px;
    line-height: 1;
}

.utag-ico-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 2px;
}

.utag-txt {
    line-height: 1.2;
}

.utag.is-disabled {
    pointer-events: none;
    opacity: .55;
    cursor: wait;
}

.utag:hover {
    background: #f0f4ff;
    color: #1a56ff;
    border-color: #c5d3f8
}

.utag.active {
    background: #1a56ff;
    border-color: #1a56ff;
    color: #fff
}

/* Status selector - right side prominent */
.upcom-status-sel {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    background: #f5f7fd;
    border: 1.5px solid #c8d3ea;
    border-radius: 8px;
    padding: 5px 10px
}

.upcom-sel-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #4a6088;
    white-space: nowrap
}

.upcom-sel-status {
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%231a56ff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 7px center;
    border: 1.5px solid #c5d3f8;
    border-radius: 6px;
    padding: 4px 22px 4px 9px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #1a56ff;
    cursor: pointer;
    min-width: 90px;
}

.upcom-sel-status:focus {
    outline: none;
    border-color: #1a56ff
}

/* Table - slim font */
.upcom-table * {
    font-family: 'Be Vietnam Pro', sans-serif
}

.upt-head {
    letter-spacing: 0
}

.upt-col {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa3be;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.upt-col.col-name,
.upt-col.col-date {
    justify-content: flex-start;
    text-align: left
}

/* Row cells - reset alignment per cell */
.upt-row .upt-col {
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #1a2340;
    height: 48px;
}

.upt-row .col-stt {
    justify-content: center;
    color: #b0bbd0;
    font-size: 11px
}

.upt-row .col-date {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px
}

.upt-row .col-name {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0
}

.upt-row .col-price {
    justify-content: flex-end;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #e67700
}

.upt-row .col-seats {
    gap: 4px;
    justify-content: flex-start
}

.upt-row .col-status {
    justify-content: center
}

.upt-row .col-act {
    justify-content: center;
    gap: 5px
}

/* Name cell */
.upt-tname {
    font-size: 12px;
    font-weight: 600;
    color: #1a2340;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block
}

.upt-name-footer {
    align-items: center;
    margin-top: 2px
}

.upt-tsub {
    font-size: 10px;
    color: #9aa3be
}

.upt-inline-badge {
    display: inline-block;
    padding: 2px 7px;
    margin-bottom: 1px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 5px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 0 0 1px rgba(15, 23, 42, .04);
}

/* Date cell slim */
.upt-day {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1a56ff;
    line-height: 1
}

.upt-yr {
    font-size: 9px;
    color: #b0bbd0
}

/* Seats bar — compact */
.upt-bar-wrap {
    height: 20px;
    border-radius: 4px;
    flex: 1;
}

.upt-seg-lbl {
    font-size: 8.5px;
}

.upt-total-chip {
    font-size: 9.5px;
    font-weight: 700;
    color: #7a88aa;
    white-space: nowrap;
    flex-shrink: 0
}

/* Actions slim */
.upt-ico {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: 12px
}

/* ── TOUR GROUP CARD LAYOUT (image style) ── */
.tg-tabs {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.tg-tab {
    padding: 4px 13px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: all .13s;
    white-space: nowrap;
}

.tg-tab.active,
.tg-tab:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.tg-groups-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.tg-group {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent, #1a56ff);
    box-shadow: 0 2px 8px rgba(26, 35, 64, .06);
    background: var(--surface);
}

.tg-group-inner {
    display: flex;
    min-height: 0
}

/* LEFT: tour list */
.tg-group-left {
    flex: 0 0 52%;
    min-width: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.tg-group-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, #f8faff, #fff);
}

.tg-group-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue)
}

.tg-vall {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none
}

.tg-vall:hover {
    text-decoration: underline
}

.tg-tour-row {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}

.tg-tour-row:last-child {
    border-bottom: none
}

.tg-tour-row:hover {
    background: #f7f9ff
}

.tg-tour-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
    line-height: 1.4
}

.tg-airline {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 1px 7px;
    color: #2563eb;
    margin-left: 6px;
    vertical-align: middle;
}

.tg-airline.road {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d
}

.tg-tour-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 7px
}

.tg-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--orange)
}

.tg-price b {
    color: var(--orange)
}

.tg-lbl {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
}

.tgl-flash {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.tgl-ns {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4
}

.tgl-full {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.tgl-luxury {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe
}

.tgl-ltet {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047
}

.tgl-vip {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d
}

.tgl-fam {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.tg-tour-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.tg-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity .13s, transform .12s;
    background: #f5f7fd;
    color: #4a6088;
    border: 1px solid #dde4f0;
}

.tg-act-btn:hover {
    opacity: .85;
    transform: translateY(-1px)
}

.tg-act-consult {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a
}

/* RIGHT: calendar */
.tg-group-right {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafbff;
}

.tg-cal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.tg-cal-month {
    font-size: 11.5px;
    font-weight: 700;
    color: #4a6088;
    white-space: nowrap;
    min-width: 110px;
    flex-shrink: 0
}

.tg-cal-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.date-chip {
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: #f0f4fb;
    border: 1px solid var(--border2);
    color: var(--text);
    transition: all .13s;
}

.date-chip:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.date-chip.hot {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .35);
    color: #dc2626;
    font-weight: 800
}

.tg-cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.tg-cal-btn {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: color .12s;
}

.tg-cal-btn:hover {
    color: #1340d4
}

.tg-cal-sep {
    color: var(--muted);
    font-size: 13px
}

/* ── TOUR SECTION REDESIGN ── */
.tg-filter-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.tg-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end
}

.tg-fg {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.tg-fl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted)
}

.tg-fs {
    appearance: none;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 7px center;
    border: 1.5px solid var(--border2);
    border-radius: 7px;
    padding: 6px 22px 6px 9px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    min-width: 120px;
}

.tg-fs:focus {
    outline: none;
    border-color: var(--blue)
}

/* Route block */
.tg-routes-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.tg-route {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent, #1a56ff);
    box-shadow: 0 2px 8px rgba(26, 35, 64, .06);
    background: var(--surface);
}

/* Route header: colored gradient */


.tg-vall {
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none
}

.tg-vall:hover {
    text-decoration: underline
}

/* Each tour card row with its own calendar */
.tc-card {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
}

.tc-card.js-tour-item .tc-actions,
.tc-card.js-tour-item .tcn-btn,
.tc-card.js-tour-item .tg-act-btn {
    cursor: pointer;
}

.tc-card:last-child {
    border-bottom: none
}

.tc-left {
    flex: 0 0 48%;
    min-width: 0;
    padding: 12px 16px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tc-line-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.45;
}

.tc-card.js-tour-item .js-tour-detail-name,
.mob-card.js-tour-item .js-tour-detail-name {
    cursor: pointer;
    transition: color .12s;
}

.tc-card.js-tour-item .js-tour-detail-name:hover,
.mob-card.js-tour-item .js-tour-detail-name:hover {
    color: #0369a1;
}

.tc-line-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11.5px;
    line-height: 1.4;
}

.tc-line-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--orange);
}

.tc-line-price b {
    color: var(--orange);
    font-weight: 800;
}

.tc-line-muted {
    color: var(--muted);
    font-size: 11.5px;
}

.tc-meta-sep {
    color: #94a3b8;
    padding: 0 2px;
}

.tc-type-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tc-ttag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    background: #f0f4fb;
    border: 1px solid #dde4f0;
    color: #4a6088;
}

.tc-airline.tg-airline {
    margin-left: 0;
}

.tg-airline {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 1px 7px;
    color: #2563eb;
    margin-left: 6px;
    vertical-align: middle;
}

.tg-airline.road {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d
}

.tc-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.tc-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--orange)
}

.tc-price b {
    color: var(--orange)
}

.tg-lbl {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
}

.tgl-flash {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.tgl-ns {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4
}

.tgl-full {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.tgl-luxury {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe
}

.tgl-ltet {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047
}

.tgl-fam {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.tc-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 8px;
}

.tg-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    background: #f5f7fd;
    color: #4a6088;
    border: 1px solid #dde4f0;
    transition: all .12s;
}

.tg-act-btn:hover {
    background: #e8efff;
    color: var(--blue);
    border-color: var(--blue)
}

.tg-act-consult {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a
}

.tg-act-consult:hover {
    background: #fef3c7
}

/* Calendar per tour */
.tc-right {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafbff;
    position: relative;
}

.tc-right.is-loading {
    opacity: .5;
    pointer-events: none;
}

.tc-right.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--accent, #e8800a);
    border-radius: 50%;
    animation: homeGroupSpin .7s linear infinite;
}

.tc-cal-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: visible;
    padding-top: 7px;
}

.tc-cal-m {
    font-size: 11.5px;
    font-weight: 700;
    color: #4a6088;
    white-space: nowrap;
    min-width: 112px;
    flex-shrink: 0;
    padding-top: 3px;
}

.tc-cal-chips {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    gap: 4px;
    margin-bottom: 4px;
    overflow: visible;
}

.dc-wrap,
.mdc-wrap {
    position: relative;
    display: inline-flex;
    vertical-align: top;
}

.dc-wrap:has(.dc-lbls:hover),
.dc-wrap:has(.dc-lbls:focus-within),
.mdc-wrap:has(.mdc-lbls:hover),
.mdc-wrap:has(.mdc-lbls:focus-within) {
    z-index: 120;
}

.dc-lbls,
.mdc-lbls {
    --lbl-size: 11px;
    --lbl-step-x: 1px;
    --lbl-step-y: 1px;
    position: absolute;
    top: -6px;
    right: -6px;
    left: auto;
    width: calc(var(--lbl-size) + max(0, var(--lbl-n, 1) - 1) * var(--lbl-step-x));
    height: calc(var(--lbl-size) + max(0, var(--lbl-n, 1) - 1) * var(--lbl-step-y));
    z-index: 5;
    pointer-events: auto;
    cursor: help;
}

.dc-lbl,
.mdc-lbl {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--lbl-size);
    height: var(--lbl-size);
    min-width: var(--lbl-size);
    min-height: var(--lbl-size);
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: none;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
    pointer-events: none;
    flex-shrink: 0;
}

.dc-lbls > .dc-lbl:nth-child(1),
.mdc-lbls > .mdc-lbl:nth-child(1) {
    top: 0;
    right: 0;
    z-index: 5;
}

.dc-lbls > .dc-lbl:nth-child(2),
.mdc-lbls > .mdc-lbl:nth-child(2) {
    top: calc(var(--lbl-step-y) * 1);
    right: calc(var(--lbl-step-x) * 1);
    z-index: 4;
}

.dc-lbls > .dc-lbl:nth-child(3),
.mdc-lbls > .mdc-lbl:nth-child(3) {
    top: calc(var(--lbl-step-y) * 2);
    right: calc(var(--lbl-step-x) * 2);
    z-index: 3;
}

.dc-lbls > .dc-lbl:nth-child(4),
.mdc-lbls > .mdc-lbl:nth-child(4) {
    top: calc(var(--lbl-step-y) * 3);
    right: calc(var(--lbl-step-x) * 3);
    z-index: 2;
}

.dc-lbls > .dc-lbl:nth-child(5),
.mdc-lbls > .mdc-lbl:nth-child(5) {
    top: calc(var(--lbl-step-y) * 4);
    right: calc(var(--lbl-step-x) * 4);
    z-index: 1;
}

.dc-lbl-tip,
.mdc-lbl-tip {
    display: none !important;
}

.home-dc-lbl-tip-portal {
    position: fixed;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: max-content;
    max-width: 220px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .94);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .22);
    pointer-events: none;
}

.home-dc-lbl-tip-portal[hidden] {
    display: none !important;
}

.home-dc-lbl-tip-portal::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 10px;
    border: 5px solid transparent;
    border-bottom-color: rgba(15, 23, 42, .94);
    border-top-color: transparent;
}

.home-dc-lbl-tip-portal.is-above::after {
    bottom: auto;
    top: 100%;
    border-bottom-color: transparent;
    border-top-color: rgba(15, 23, 42, .94);
}

.dc-lbl-tip-item,
.mdc-lbl-tip .dc-lbl-tip-item,
.home-dc-lbl-tip-portal .dc-lbl-tip-item {
    display: block;
}

.dc-lbl-tip-item::before,
.mdc-lbl-tip .dc-lbl-tip-item::before,
.home-dc-lbl-tip-portal .dc-lbl-tip-item::before {
    content: '• ';
    opacity: .75;
}

.dc-lbl-emoji,
.mdc-lbl .dc-lbl-emoji {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 8px;
    line-height: 11px;
    text-align: center;
}

.dc-lbl-img,
.mdc-lbl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
    padding: 0;
    margin: 0;
}

.tg-group-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.2;
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

.dc {
    width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: #f0f4fb;
    border: 1px solid var(--border2);
    color: var(--text);
    transition: all .13s;
}

.dc:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff
}

.dc.dc-con {
    background: #f0fdf4;
    border-color: #86efac;
    color: #16a34a;
}

.dc.dc-sap {
    background: #fefce8;
    border-color: #fde047;
    color: #ca8a04;
}

.dc.dc-it {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    font-weight: 800;
}

.dc.dc-con:hover,
.dc.dc-sap:hover,
.dc.dc-it:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    font-weight: 600;
}

.dc.hot {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .35);
    color: #dc2626;
    font-weight: 800
}

.dc.dc-past {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    opacity: .85;
    cursor: default;
}

.dc.dc-past:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.dc.js-group-schedule-day:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

.tc-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.tc-cal-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 9.5px;
    font-weight: 600;
    color: #a0aec0;
    min-width: 0;
}

.tc-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tc-leg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tc-leg-con { background: #22c55e; }
.tc-leg-sap { background: #eab308; }
.tc-leg-it { background: #ef4444; }

.tc-cal-nav-btns {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}

.tcn-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #fff;
    border: 1.5px solid #b0bcd8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #1a2340;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(26, 35, 64, .12);
    transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
    white-space: nowrap;
}

.tcn-btn:hover:not([disabled]) {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 3px 10px rgba(26, 86, 255, .25);
}

.tcn-btn[disabled] {
    opacity: .45;
    cursor: default;
    pointer-events: none
}

.tcn-btn:disabled {
    opacity: .45;
    cursor: default
}

.tcn-btn .tcn-arrow {
    font-size: 15px;
    font-weight: 900;
    line-height: 1
}

/* ── UNIFIED LABEL COLORS (all contexts) ── */
/* Flash Sales: cam */
.tgl-flash,
.ulb2-flash,
.ulb-flash,
.upt-inline-badge.ulb2-flash,
.h2badge.flash,
.uctag.ut-flash,
.ttag-flash,
.lf {
    background: #fff3e0 !important;
    color: #e65100 !important;
    border: 1px solid #ffcc80 !important;
}

/* No Shop: xanh lam nhạt */
.tgl-ns,
.ulb2-ns,
.ulb-ns,
.upt-inline-badge.ulb2-ns,
.h2badge.noshop,
.uctag.ut-noshop,
.ttag-noshop {
    background: #e3f2fd !important;
    color: #1565c0 !important;
    border: 1px solid #90caf9 !important;
}

/* Tour Lễ Tết / LTết: đỏ */
.tgl-ltet,
.ulb2-ll,
.ulb-ll,
.upt-inline-badge.ulb2-ll,
.h2badge.tet,
.uctag.ut-tet,
.ll,
.lbadge.ll {
    background: #ffebee !important;
    color: #c62828 !important;
    border: 1px solid #ef9a9a !important;
}

/* Nguyên Code (Fullcode): xanh đậm */
.tgl-full,
.ulb2-full,
.ulb-full,
.upt-inline-badge.ulb2-full,
.h2badge.full,
.uctag.ut-full,
.lp,
.lbadge.lp {
    background: #e8eaf6 !important;
    color: #1a237e !important;
    border: 1px solid #7986cb !important;
}

/* Famtrip: vàng */
.tgl-fam,
.ulb2-fam,
.h2badge.fam,
.uctag.ut-fam {
    background: #fffde7 !important;
    color: #f57f17 !important;
    border: 1px solid #ffe082 !important;
}

/* VIP-Luxury: đỏ bordeaux bóng sáng */
.tgl-luxury,
.tgl-vip,
.ulb2-lp,
.ulb2-vip,
.h2badge.vip,
.uctag.ut-vip,
.ulb-lp {
    background: linear-gradient(135deg, #f8e8ec, #fce4ec) !important;
    color: #880e4f !important;
    border: 1px solid #f48fb1 !important;
    box-shadow: 0 2px 6px rgba(136, 14, 79, .15) !important;
}

/* Seminar: tím */
.tgl-sem,
.h2badge.sem,
.uctag.ut-sem {
    background: #f3e5f5 !important;
    color: #6a1b9a !important;
    border: 1px solid #ce93d8 !important;
}

/* Hero category badges — keep vivid bg, update text/border only */
.h2badge.flash {
    background: linear-gradient(145deg, #e64a19, #bf360c) !important;
    color: #fff !important;
    border-color: transparent !important
}

.h2badge.noshop {
    background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
    color: #fff !important;
    border-color: transparent !important
}

.h2badge.tet {
    background: linear-gradient(135deg, #c62828, #b71c1c) !important;
    color: #fff !important;
    border-color: transparent !important
}

.h2badge.full {
    background: linear-gradient(135deg, #1a237e, #283593) !important;
    color: #fff !important;
    border-color: transparent !important
}

.h2badge.fam {
    background: linear-gradient(135deg, #f57f17, #e65100) !important;
    color: #fff !important;
    border-color: transparent !important
}

.h2badge.vip {
    background: linear-gradient(135deg, #880e4f, #ad1457) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(136, 14, 79, .4) !important
}

.h2badge.sem {
    background: linear-gradient(135deg, #6a1b9a, #7b1fa2) !important;
    color: #fff !important;
    border-color: transparent !important
}

/* ── ROUTE TITLE elegant font ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');



/* per-route filter bar — styles chính ở block tg-route-filter dưới tg-route-hd */

.trf-fg {
    flex: 1;
    min-width: 100px
}

.trf-fs {
    width: 100%;
    appearance: none;
    background: #f8faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 7px center;
    border: 1px solid #dde4f0;
    border-radius: 6px;
    padding: 5px 22px 5px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: #4a6088;
    cursor: pointer;
}

.trf-fs:focus {
    outline: none;
    border-color: var(--blue)
}

/* ── LABEL COLORS REVERTED ── */
.tgl-flash,
.ulb2-flash,
.h2badge.flash,
.uctag.ut-flash,
.lf {
    background: linear-gradient(145deg, #bf5520, #7a2500) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(191, 85, 32, .35) !important;
}

.tgl-ns,
.ulb2-ns,
.h2badge.noshop,
.uctag.ut-noshop,
.ttag-noshop {
    background: #1c4f96 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(28, 79, 150, .3) !important;
}

.tgl-ltet,
.ulb2-ll,
.h2badge.tet,
.ll,
.lbadge.ll {
    background: #961c4f !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(150, 28, 79, .3) !important;
}

.tgl-full,
.ulb2-full,
.h2badge.full,
.lp,
.lbadge.lp {
    background: #0d7060 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(13, 112, 96, .3) !important;
}

.tgl-fam,
.ulb2-fam,
.h2badge.fam {
    background: #2d6b1c !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(45, 107, 28, .3) !important;
}

.tgl-luxury,
.tgl-vip,
.ulb2-lp,
.ulb2-vip,
.h2badge.vip,
.ulb-lp {
    background: linear-gradient(135deg, #7a5210, #4a3008) !important;
    color: #fde68a !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(122, 82, 16, .35) !important;
}

.tgl-sem,
.h2badge.sem {
    background: #491b94 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(73, 27, 148, .3) !important;
}

/* Upcoming table inline badges — pastel + shadow, chữ tối dễ đọc */
.upt-label-badge {
    color: #fff;
    border: none;
}

.upt-inline-badge.tg-lbl {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(71, 85, 105, .18), 0 0 0 1px rgba(71, 85, 105, .06) !important;
}

.upt-inline-badge.tgl-flash,
.upt-inline-badge.ulb2-flash,
.upt-inline-badge.ulb2-lf {
    background: #fff3e0 !important;
    color: #c2410c !important;
    border-color: #fdba74 !important;
    box-shadow: 0 1px 5px rgba(234, 88, 12, .24), 0 0 0 1px rgba(234, 88, 12, .1) !important;
}

.upt-inline-badge.tgl-ns,
.upt-inline-badge.ulb2-ns {
    background: #e3f2fd !important;
    color: #1565c0 !important;
    border-color: #90caf9 !important;
    box-shadow: 0 1px 5px rgba(21, 101, 192, .22), 0 0 0 1px rgba(21, 101, 192, .08) !important;
}

.upt-inline-badge.tgl-ltet,
.upt-inline-badge.ulb2-ll {
    background: #ffebee !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 1px 5px rgba(185, 28, 28, .2), 0 0 0 1px rgba(185, 28, 28, .08) !important;
}

.upt-inline-badge.tgl-full,
.upt-inline-badge.ulb2-full,
.upt-inline-badge.ulb2-lp {
    background: #e8eaf6 !important;
    color: #1e3a8a !important;
    border-color: #a5b4fc !important;
    box-shadow: 0 1px 5px rgba(30, 58, 138, .2), 0 0 0 1px rgba(30, 58, 138, .08) !important;
}

.upt-inline-badge.tgl-fam,
.upt-inline-badge.ulb2-fam {
    background: #fffde7 !important;
    color: #a16207 !important;
    border-color: #fde047 !important;
    box-shadow: 0 1px 5px rgba(161, 98, 7, .2), 0 0 0 1px rgba(161, 98, 7, .08) !important;
}

.upt-inline-badge.tgl-vip,
.upt-inline-badge.tgl-luxury,
.upt-inline-badge.ulb2-vip,
.upt-inline-badge.ulb2-lp {
    background: linear-gradient(135deg, #fce7f3, #fdf2f8) !important;
    color: #9d174d !important;
    border-color: #f9a8d4 !important;
    box-shadow: 0 1px 5px rgba(157, 23, 77, .22), 0 0 0 1px rgba(157, 23, 77, .08) !important;
}

.upt-inline-badge.tgl-sem {
    background: #f3e5f5 !important;
    color: #6a1b9a !important;
    border-color: #ce93d8 !important;
    box-shadow: 0 1px 5px rgba(106, 27, 154, .2), 0 0 0 1px rgba(106, 27, 154, .08) !important;
}

/* seats bar badges */
.ulb-ll {
    background: #961c4f !important;
    color: #fff !important;
    border: none !important
}

.ulb-lp {
    background: #0d7060 !important;
    color: #fff !important;
    border: none !important
}

.ulb-lf {
    background: linear-gradient(145deg, #bf5520, #7a2500) !important;
    color: #fff !important;
    border: none !important
}

/* upcoming table labels */
.ust-full {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important
}

.ust-sap {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #fdba74 !important
}

.ust-con {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important
}

.ust-nguyen {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    text-align: center;
}

/* ── ROUTE TITLE FONT ── */


/* ── ROUTE HEADER inline layout ── */
/* tg-route-filter nằm dưới .tg-route-hd — xem block .tg-route-filter phía dưới */

/* ── CALENDAR NAV redesign ── */
.tc-cal-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid #edf0f8 !important;
}

.tc-cal-nav .tc-cal-legend {
    flex: 1;
    min-width: 0;
}

.tc-cal-nav .tc-cal-nav-btns {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0;
    margin-left: auto;
}

.tcn-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 14px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #4a6088 !important;
    background: #f0f4fb !important;
    border: 1.5px solid #dde4f0 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .15s !important;
}

.tc-cal-nav-btns .tcn-btn:first-child {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important
}

.tc-cal-nav-btns .tcn-btn:last-child {
    border-radius: 0 8px 8px 0 !important;
}

.tcn-btn:hover {
    background: #e8efff !important;
    color: var(--blue) !important;
    border-color: #c5d3f8 !important
}

.tcn-sep {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 10px !important;
    background: #f8faff !important;
    border-top: 1.5px solid #dde4f0 !important;
    border-bottom: 1.5px solid #dde4f0 !important;
    font-size: 11px !important;
    color: #9aa3be !important;
    letter-spacing: .05em !important;
}

/* merged month-year select */
.h2-msel-full {
    width: 140px !important;
    text-align: left !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}

/* apply button with icon */
.h2-apply {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.h2-apply svg {
    flex-shrink: 0
}

/* ── NEWS compact 3-item ── */
.h2-news {
    border-top: 1px solid #edf0f8;
    padding-top: 7px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.h2-news-item {
    padding: 4px 7px;
    border-radius: 7px
}

.h2-news-text {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2-news-more {
    padding: 3px 7px;
    font-size: 11px;
    margin-top: 1px
}

/* Month filter fix */
.h2-msel {
    min-width: 106px !important;
    width: 106px !important;
    flex-shrink: 0;
}

.h2-month-nav {
    flex-shrink: 0;
}

.h2-frow-nobreak {
    flex-wrap: nowrap !important;
}

.h2-frow-nobreak .h2-fg {
    min-width: 0;
    flex-shrink: 1;
}

.h2-frow-nobreak .h2-date {
    width: 100px !important;
    min-width: 90px;
}

.h2-frow-nobreak .h2-fs {
    min-width: 80px;
}

.tc-name-labels {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.tc-name-labels .tg-lbl {
    font-size: 10px;
    padding: 1px 6px;
    vertical-align: middle;
}

.tc-meta .tg-lbl {
    display: none !important;
}

/* hide any remaining labels in meta */

/* ── RESTORE filter panel width ── */
.hero2 .h2-right {
    flex: 0 0 450px  !important;
    width: 450px  !important;
}

/* ════════════════════════════════════════════
   TOURGATE ADD-ONS  (spam btn + collapse + NM)
   ════════════════════════════════════════════ */

/* SPAM BTN */
.spam-btn-wrap {
    padding: 10px 16px 6px;
    border-top: 1px solid var(--border)
}

.spam-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 13px;
    background: linear-gradient(135deg, #e8185a, #f05a28);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 4px 14px rgba(232, 24, 90, .35);
    transition: opacity .13s, transform .12s
}

.spam-btn:hover {
    opacity: .92;
    transform: translateY(-1px)
}

.spam-btn .sp-icon {
    font-size: 16px;
    flex-shrink: 0
}

/* NEWS MANAGER PANEL */
.nm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(10, 16, 36, .55);
    backdrop-filter: blur(3px)
}

.nm-overlay.open {
    display: block
}

.nm-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(800px, 100vw);
    background: var(--bg);
    box-shadow: -8px 0 40px rgba(10, 16, 36, .2);
    display: flex;
    flex-direction: column;
    z-index: 501;
    transform: translateX(110%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1)
}

.nm-overlay.open .nm-panel {
    transform: translateX(0)
}

.nm-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0
}

.nm-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 17px;
    font-weight: 900;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 9px
}

.nm-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s
}

.nm-close:hover {
    background: #fee2e2
}

.nm-toolbar {
    padding: 12px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0
}

.nm-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--blue), #1340d4);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(26, 86, 255, .28);
    transition: opacity .13s
}

.nm-add-btn:hover {
    opacity: .9
}

.nm-fsel {
    appearance: none;
    background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1.5px solid var(--border2);
    border-radius: 7px;
    padding: 7px 26px 7px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer
}

.nm-search {
    flex: 1;
    min-width: 160px;
    border: 1.5px solid var(--border2);
    border-radius: 7px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12px;
    background: var(--bg);
    color: var(--text)
}

.nm-search:focus {
    outline: none;
    border-color: var(--blue)
}

.nm-stats {
    margin-left: auto;
    display: flex;
    gap: 8px
}

.nm-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px
}

.nms-t {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.nms-a {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.nms-p {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a
}

.nm-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px
}

.nm-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.nm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s
}

.nm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px
}

.nm-card.sa::before {
    background: var(--green)
}

.nm-card.sp::before {
    background: var(--gold)
}

.nm-card.se::before {
    background: var(--muted2)
}

.nm-card:hover {
    box-shadow: var(--shadow-lg)
}

.nm-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px
}

.nm-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    flex: 1
}

.nm-card-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex-shrink: 0
}

.nmbg {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px
}

.nmbg-a {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac
}

.nmbg-p {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047
}

.nmbg-e {
    background: #f4f4f5;
    color: #71717a;
    border: 1px solid #d4d4d8
}

.nmbg-fl {
    background: linear-gradient(145deg, #bf5520, #7a2500);
    color: #fff
}

.nmbg-ns {
    background: #1c4f96;
    color: #fff
}

.nmbg-lt {
    background: #961c4f;
    color: #fff
}

.nmbg-fc {
    background: #0d7060;
    color: #fff
}

.nm-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px
}

.nm-card-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nm-card-acts {
    display: flex;
    gap: 6px;
    margin-top: 10px
}

.nm-ab {
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .12s
}

.nm-ab-ed {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe
}

.nm-ab-ed:hover {
    background: #dbeafe
}

.nm-ab-sh {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0
}

.nm-ab-sh:hover {
    background: #dcfce7
}

.nm-ab-dl {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca
}

.nm-ab-dl:hover {
    background: #fee2e2
}

.nm-ab-pb {
    background: linear-gradient(135deg, #e8185a, #f05a28);
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(232, 24, 90, .25)
}

.nm-ab-pb:hover {
    opacity: .9
}

.nm-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
    font-size: 13px
}

.nm-empty-icon {
    font-size: 40px;
    margin-bottom: 12px
}

/* COLLAPSE – TUYEN TOUR */
.tg-toggle-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(26, 86, 255, .08);
    border: 1px solid rgba(26, 86, 255, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--blue);
    transition: transform .22s, background .13s;
    pointer-events: none
}

.tg-route.is-collapsed .tg-toggle-btn {
    transform: rotate(-90deg)
}

.tg-route.is-collapsed .tg-route-body {
    display: none
}

.tg-route.is-collapsed .tg-route-filter {
    display: none !important
}

.tg-route-filter-bottom {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border);
    background: #fafbfd;
}

.tg-route-filter-bottom .trf-fg {
    flex: 1;
    min-width: 140px;
    max-width: none;
}

.trf-fl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #7a88aa;
    margin-bottom: 4px;
    white-space: nowrap;
}

/* filter ngay dưới tg-route-hd */
.tg-route-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--border);
    background: #fafbfd;
}

.tg-route-filter .trf-fg {
    flex: 1;
    min-width: 0;
}

.tg-route-filter .trf-fg--tour {
    flex: 2.2 1 240px;
    min-width: 200px;
}

.tg-route-filter .trf-fg--month {
    flex: 0 0 108px;
    max-width: 108px;
}

.trf-month-wrap {
    position: relative;
    width: 100%;
}

.trf-month-wrap .trf-month-dp {
    padding-right: 24px;
}

.trf-month-clear {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.trf-month-clear:hover {
    color: #64748b;
    background: #eef2f8;
}

.tg-route-filter .trf-fg--status {
    flex: 0 0 112px;
    max-width: 112px;
}

.tg-route-filter .trf-fg--label {
    flex: 1 1 130px;
    min-width: 110px;
}

.tg-route-filter .trf-fs--month.trf-month-dp {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    font-size: 10.5px;
    cursor: pointer;
    background: #f8faff;
    border: 1px solid #dde4f0;
    border-radius: 6px;
    color: #4a6088;
}

.tg-route-filter .trf-fs--status {
    padding-left: 6px;
    padding-right: 20px;
    font-size: 10.5px;
}

.tg-route-filter .select2-container {
    width: 100% !important;
}

.tg-route-filter .select2-container--default .select2-selection--single {
    height: 30px;
    border: 1px solid #dde4f0;
    border-radius: 6px;
    background: #f8faff;
}

.tg-route-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    font-size: 11px;
    font-weight: 500;
    color: #4a6088;
    padding-left: 8px;
}

.tg-route-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

.tg-route-panel {
    position: relative;
}

.tg-route-panel.is-loading {
    min-height: 120px;
}

.tg-route-panel-loading {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(2px);
}

.tg-route-panel-loading[hidden] {
    display: none !important;
}

.tg-route-panel-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7a88aa;
    font-size: 12px;
    font-weight: 600;
}

.tg-route-filter-result {
    padding: 14px 16px 16px;
    text-align: center;
    color: #7a88aa;
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    border-bottom: 1px solid var(--border);
    background: #fafbfd;
}

.tg-route-filter-result[hidden] {
    display: none !important;
}

.tg-route.is-collapsed .tg-route-filter-result,
.tg-route.is-collapsed .tg-route-panel-loading {
    display: none !important;
}

.tg-toggle-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(0, 0, 0, .08);
    flex-shrink: 0;
    transition: transform .22s;
    color: inherit
}

.tg-route.is-collapsed .tg-toggle-btn {
    transform: rotate(-90deg)
}

/* COLLAPSE – SECTION */
.sec-hd-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px
}

.sec-hd-row .section-title {
    flex-shrink: 0;
    margin: 0;
    padding-top: 2px;
}

.tg-route-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    flex: 1;
    min-width: 0;
    padding: 2px 0 0;
}

.tg-route-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    color: var(--muted);
    background: transparent;
    border: none;
    font-family: inherit;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    transition: color .12s, background .12s;
}

.tg-route-pill:hover {
    color: var(--blue);
    background: #eff3ff;
}

.tg-route-pill.active {
    color: var(--blue);
    font-weight: 700;
}

.tg-route-pill.active::before {
    content: '✓';
    font-size: 10px;
    color: var(--blue);
    font-weight: 800;
    margin-right: 2px;
}

.tg-route-sep {
    color: #d0d7e8;
    font-size: 11px;
    user-select: none;
    line-height: 1;
    align-self: center;
}

.sec-toggle-btn {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
    cursor: pointer;
    background: rgba(26, 86, 255, .07);
    border: 1.5px solid rgba(26, 86, 255, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--blue);
    transition: transform .22s
}

.sec-toggle-btn:hover {
    background: rgba(26, 86, 255, .14)
}

.tg-section.sec-collapsed .sec-toggle-btn {
    transform: rotate(-90deg)
}

.tg-section.sec-collapsed .tg-routes-wrap {
    display: none
}


/* ── CỘT HẠN HS + PPOINT ── */
.col-hs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px
}

.col-hs .hs-date {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1
}

.col-hs .hs-time {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 1px
}

.col-hs .hs-urgent {
    color: #dc2626
}

.col-hs .hs-warn {
    color: #ca8a04
}

.col-ppoint {
    display: flex;
    align-items: center;
    justify-content: center
}

.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
    box-shadow: 0 2px 6px rgba(124, 58, 237, .3)
}

.pp-badge .pp-star {
    font-size: 10px
}

/* upt-head Hạn HS header */
.col-hs-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.2
}


/* ── ẢNH ĐỊA DANH TRONG ROUTE HEADER ── */

.tg-toggle-btn {
    flex-shrink: 0;
    margin-left: 4px
}


/* ROUTE HEADER – colored background */


.tg-toggle-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .08);
    flex-shrink: 0;
    transition: transform .22s;
    color: inherit;
}

.tg-route.is-collapsed .tg-toggle-btn {
    transform: rotate(-90deg)
}

.tc-cal-viewport {
    overflow: hidden;
    flex-shrink: 0;
    padding-bottom: 8px;
}

.tc-cal-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow: visible;
}

.tg-route-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 800;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* tg-route-hd CLEAN */
.tg-route-hd {
    display: block;
    cursor: pointer;
    user-select: none;
}

.tg-route-hd-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 10px 16px;
    gap: 12px;
}

.tg-route.is-collapsed .tg-toggle-btn {
    transform: rotate(-90deg)
}

.tg-route.is-collapsed .tg-route-body {
    display: none
}

.tg-route.is-collapsed .tg-route-filter {
    display: none
}

/* ── TABLE SCROLL (màn hình hẹp) ── */
.upcom-scroll-wrap {
    position: relative;
    border-radius: 12px;
    border: 1.5px solid #dde4f0;
    box-shadow: 0 2px 8px rgba(26, 35, 64, .06);
    background: #fff;
    overflow: hidden;
}

.upcom-table-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 8;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(2px);
    color: #5a6a8a;
    font-size: 13px;
    font-weight: 700;
}

.upcom-scroll-wrap.is-loading .upcom-table-loading {
    display: flex;
}

.upcom-scroll-wrap.is-loading .upcom-table-scroll,
.upcom-scroll-wrap.is-loading .upcom-more-row {
    pointer-events: none;
    user-select: none;
}

.upcom-table-spin {
    width: 28px;
    height: 28px;
    border: 3px solid #e8edf5;
    border-top-color: #1a56ff;
    border-radius: 50%;
    animation: homeGroupSpin .7s linear infinite;
}

.upcom-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c5cfe0 transparent;
}

.upcom-table-scroll::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.upcom-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.upcom-table-scroll::-webkit-scrollbar-thumb {
    background: #c5cfe0;
    border-radius: 99px;
}

.upcom-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #9aa8c4;
}

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: #c5cfe0 transparent;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #c5cfe0;
    border-radius: 99px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #9aa8c4;
}

.upcom-scroll-wrap .upcom-more-row {
    border-top: 1px solid #edf0f8;
}

.upcom-table.upcom-data-table {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0;
}

table.upcom-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 0;
}

table.upcom-data-table col.col-stt { width: 40px; }
table.upcom-data-table col.col-date { width: 72px; }
table.upcom-data-table col.col-name { width: auto; }
table.upcom-data-table col.col-seats { width: 168px; }
table.upcom-data-table col.col-price { width: 96px; }
table.upcom-data-table col.col-hs { width: 82px; }
table.upcom-data-table col.col-status { width: 84px; }
table.upcom-data-table col.col-ppoint { width: 64px; }
table.upcom-data-table col.col-act { width: 30px; }

table.upcom-data-table thead th.col-act,
table.upcom-data-table tbody td.col-act {
    display: table-cell !important;
    width: 30px !important;
    max-width: 30px !important;
    min-width: 30px !important;
    padding: 4px 2px !important;
    white-space: nowrap;
    text-align: center !important;
    vertical-align: middle;
    overflow: visible;
    align-items: unset;
    justify-content: unset;
    gap: unset;
}

table.upcom-data-table .upt-col {
    display: table-cell !important;
    border-right: 1px solid #edf0f8;
}

table.upcom-data-table .upt-col:last-child {
    border-right: none;
}

table.upcom-data-table .upt-col:first-child {
    padding-left: 8px;
}

table.upcom-data-table thead th {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9aa3be;
    padding: 10px 8px;
    height: 38px;
    background: #f5f7fd;
    border-bottom: 1.5px solid #dde4f0;
    text-align: left;
    vertical-align: middle;
}

table.upcom-data-table thead th.col-stt,
table.upcom-data-table tbody td.col-stt {
    text-align: center !important;
}

table.upcom-data-table .col-date,
table.upcom-data-table .col-hs,
table.upcom-data-table .col-act,
table.upcom-data-table .col-ppoint {
    text-align: center !important;
}

table.upcom-data-table tbody td {
    padding: 10px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #edf0f8;
}

table.upcom-data-table tbody tr:last-child td {
    border-bottom: none;
}

table.upcom-data-table tbody tr:hover {
    background: #f7f9ff;
    cursor: pointer;
}

table.upcom-data-table .upt-head,
table.upcom-data-table .upt-row {
    display: table-row !important;
    min-width: 0;
    padding: 0;
    border-bottom: none;
}

table.upcom-data-table .upt-row .upt-col {
    height: auto;
}

table.upcom-data-table .col-name {
    overflow: visible;
    max-width: 0;
    vertical-align: middle;
    padding: 5px;
}

table.upcom-data-table .col-name .upt-tname {
    max-width: 100% !important;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    line-height: 1.35;
}

table.upcom-data-table .upt-name-footer {
    min-width: 0;
    overflow: hidden;
}

table.upcom-data-table .upt-name-footer .upt-tsub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

table.upcom-data-table .upt-seats-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

table.upcom-data-table .upt-seats-inline .upt-bar-wrap {
    flex: 1 1 auto;
    min-width: 96px;
    height: 22px;
    padding: 0;
}

table.upcom-data-table .col-seats.upt-seats-action {
    cursor: pointer;
}

table.upcom-data-table .col-seats.upt-seats-action:hover .upt-bar-wrap {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .35);
}

table.upcom-data-table .col-seats.upt-seats-action:focus-visible {
    outline: 2px solid rgba(59, 130, 246, .55);
    outline-offset: 2px;
}

table.upcom-data-table .upt-seats-inline .upt-total-chip {
    flex-shrink: 0;
    padding: 2px 9px;
    margin-left: 2px;
    border-radius: 4px;
}

table.upcom-data-table .upt-seg-lbl {
    padding: 0 4px;
    font-size: 8.5px;
}

table.upcom-data-table .col-price {
    white-space: nowrap;
    font-size: 11.5px;
}

table.upcom-data-table .upt-act-menu {
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: 24px;
    margin: 0 auto;
}

table.upcom-data-table .upt-act-toggle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1.5px solid #dde4f0;
    background: #f5f7fd;
    color: #7a88aa;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s;
    flex-shrink: 0;
}

table.upcom-data-table .upt-act-toggle:hover,
table.upcom-data-table .upt-act-menu.is-open .upt-act-toggle {
    background: #e8efff;
    border-color: #1a56ff;
    color: #1a56ff;
}

table.upcom-data-table .upt-act-dropdown {
    display: none;
    position: fixed;
    min-width: 148px;
    background: #fff;
    border: 1.5px solid #dde4f0;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(26, 35, 64, .12);
    overflow: hidden;
    z-index: 9999;
}

table.upcom-data-table .upt-act-menu.is-open .upt-act-dropdown {
    display: block;
}

table.upcom-data-table .upt-act-item {
    width: 100%;
    border: none;
    background: #fff;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

table.upcom-data-table .upt-act-item:hover {
    background: #f5f7fd;
}

table.upcom-data-table .upt-act-edit {
    color: #2563eb;
}

table.upcom-data-table .upt-act-del {
    color: #dc2626;
    border-top: 1px solid #edf0f8;
}

.upt-act-dropdown.home-upcoming-ctx {
    display: none;
    position: fixed;
    min-width: 148px;
    background: #fff;
    border: 1.5px solid #dde4f0;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(26, 35, 64, .12);
    overflow: hidden;
    z-index: 9999;
}

.upt-act-dropdown.home-upcoming-ctx.is-open {
    display: block;
}

.upt-act-dropdown.home-upcoming-ctx .upt-act-item {
    width: 100%;
    border: none;
    background: #fff;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.upt-act-dropdown.home-upcoming-ctx .upt-act-item:hover {
    background: #f5f7fd;
}

/* ── Hero filter card: giữ tin tức trong block ── */
.hero2 .h2-filter-card {
    height: auto !important;
    max-height: none;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow: visible;
}

.hero2 .h2-news {
    flex: 0 0 auto !important;
    margin-top: 2px;
    min-height: 0;
    overflow: visible;
}

.hero2 .h2-news-more {
    align-self: flex-start;
    margin-top: 2px;
}

.hero2 .h2-news-item {
    min-width: 0;
}

.hero2 .h2-news-text {
    display: block !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Chỉ hiển thị tối đa 3 tin (sau header) */
.hero2 .h2-news > .h2-news-item:nth-child(n + 5) {
    display: none !important;
}

/* Datepicker inputs trong filter */
.hero2 .h2-date {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a88aa' 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") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    padding-right: 22px !important;
    cursor: pointer;
    width: 100%;
}

.hero2 .datetimepicker,
.datetimepicker.datetimepicker-dropdown-bottom-right,
.datetimepicker.datetimepicker-dropdown-bottom-left {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 12px;
    border-radius: 10px;
    border: 1.5px solid #dde4f0;
    box-shadow: 0 8px 28px rgba(26, 35, 64, .12);
    z-index: 10060 !important;
}

.hero2 .datetimepicker table tr td.active,
.hero2 .datetimepicker table tr td.active:hover {
    background: #1a56ff !important;
    background-image: none !important;
}

/* ── Select2 trong bộ lọc tìm kiếm trang chủ ── */
.h2-filter-card .select2-container {
    width: 100% !important;
}

.h2-filter-card .select2-container .select2-selection--single {
    height: 26px;
    background: #f4f6fc;
    border: 1.5px solid #dde4f0;
    border-radius: 7px;
    outline: none;
}

.h2-filter-card .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 23px;
    padding-left: 8px;
    font-size: 11px;
    font-weight: 500;
    color: #1a2340;
}

.h2-filter-card .select2-container .select2-selection--single .select2-selection__arrow {
    height: 24px;
}

.h2-filter-card .select2-container--open .select2-selection--single,
.h2-filter-card .select2-container--focus .select2-selection--single {
    border-color: #7aa7ff;
}

.select2-dropdown .select2-results__option {
    font-size: 11.5px;
}

.select2-search--dropdown .select2-search__field {
    font-size: 11.5px;
    padding: 4px 6px;
}

.home-group-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--muted);
    font-size: 13px;
}
.home-group-spin {
    width: 22px;
    height: 22px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--accent, #e8800a);
    border-radius: 50%;
    animation: homeGroupSpin .7s linear infinite;
}
.home-group-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.upt-body.is-loading {
    opacity: .45;
    pointer-events: none;
}
@keyframes homeGroupSpin {
    to { transform: rotate(360deg); }
}

/* Home itinerary modal */
.home-itin-ov {
    position: fixed;
    inset: 0;
    z-index: 12050;
    background: rgba(10, 18, 36, .55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.home-itin-ov.open {
    opacity: 1;
    pointer-events: auto;
}

body.home-itin-open {
    overflow: hidden;
}

.home-itin-modal {
    width: min(920px, 100%);
    max-height: min(88vh, 900px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px);
    transition: transform .22s;
}

.home-itin-ov.open .home-itin-modal {
    transform: none;
}

.home-itin-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #f8faff;
}

.home-itin-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    min-width: 0;
}

.home-itin-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #eef2f8;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.home-itin-close:hover {
    background: #e2e8f0;
    color: var(--text);
}

.home-itin-body {
    flex: 1;
    min-height: 280px;
    background: #f1f5f9;
    overflow: auto;
}

.home-itin-preview-wrap {
    position: relative;
    min-height: 280px;
    background: #fff;
}

.home-itin-preview-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
    background: rgba(241, 245, 249, 0.96);
}

.home-itin-preview-loading.is-hidden {
    display: none;
}

.home-itin-preview-hint {
    font-size: 12px;
    opacity: 0.85;
}

.home-itin-preview-fallback {
    color: #0284c7;
    font-weight: 600;
    text-decoration: underline;
}

.home-itin-frame {
    width: 100%;
    height: min(68vh, 720px);
    min-height: 280px;
    border: none;
    display: block;
    background: #fff;
}

.home-itin-frame--loading {
    opacity: 0;
}

.home-itin-file,
.home-itin-empty {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
}

.home-itin-file-icon {
    font-size: 42px;
}

.home-itin-file-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.home-itin-file-hint {
    font-size: 12px;
}

.home-itin-ft {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: #fff;
}

.home-itin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .12s, background .12s;
}

.home-itin-btn-share {
    background: #f0f4fb;
    color: var(--blue);
    border: 1.5px solid #dde4f0;
}

.home-itin-btn-share:hover {
    background: #e8efff;
    filter: none;
}

.home-itin-btn-dl {
    background: var(--blue);
    color: #fff;
}

.home-itin-btn-dl:hover {
    filter: brightness(1.05);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 991px) {
    .home-itin-ov {
        padding: 0;
        align-items: flex-end;
    }

    .home-itin-modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }

    .home-itin-frame {
        height: min(62vh, 620px);
    }
}

/* Home consult modal */
.home-consult-ov {
    position: fixed;
    inset: 0;
    z-index: 12050;
    background: rgba(10, 18, 36, .55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.home-consult-ov.open {
    opacity: 1;
    pointer-events: auto;
}

body.home-consult-open {
    overflow: hidden;
}

.home-consult-modal {
    width: min(760px, 100%);
    max-height: min(88vh, 900px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px);
    transition: transform .22s;
}

.home-consult-ov.open .home-consult-modal {
    transform: none;
}

.home-consult-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #fffbeb;
}

.home-consult-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}

.home-consult-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #eef2f8;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.home-consult-close:hover {
    background: #e2e8f0;
    color: var(--text);
}

.home-consult-body {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: #fff;
}

.home-consult-summary {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: #f8faff;
}

.home-consult-sum-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 12px;
}

.home-consult-sum-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin-bottom: 14px;
}

.home-consult-sum-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.home-consult-sum-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.home-consult-sum-val {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.home-consult-sum-val b {
    color: var(--orange);
}

.home-consult-schedules {
    margin-top: 4px;
}

.home-consult-sched-hd {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.home-consult-sched-count {
    font-weight: 600;
    color: var(--muted);
}

.home-consult-sched-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
    padding-right: 2px;
}

.home-consult-sched-item {
    display: grid;
    grid-template-columns: 1.1fr .9fr .8fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}

.home-consult-sched-item.is-past {
    opacity: .72;
    background: #f8fafc;
}

.home-consult-sched-date {
    font-weight: 700;
    color: var(--text);
}

.home-consult-sched-price {
    font-weight: 700;
    color: var(--orange);
    text-align: center;
}

.home-consult-sched-seats {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a6088;
    text-align: right;
}

.home-consult-sched-empty {
    font-size: 12.5px;
    color: var(--muted);
    padding: 8px 0;
}

.home-consult-section {
    padding: 16px 18px;
}

.home-consult-section-hd {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
}

.home-consult-rich {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text);
}

.home-consult-rich h2,
.home-consult-rich h3 {
    font-size: 14px;
    font-weight: 800;
    margin: 14px 0 8px;
}

.home-consult-rich h2:first-child,
.home-consult-rich h3:first-child {
    margin-top: 0;
}

.home-consult-rich ul,
.home-consult-rich ol {
    padding-left: 20px;
    margin: 8px 0;
}

.home-consult-rich p {
    margin: 8px 0;
}

.home-consult-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.home-consult-ops {
    border-top: 1px solid var(--border);
    background: #f8faff;
    padding: 14px 16px 16px;
    flex-shrink: 0;
}

.home-consult-ops-hd {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
}

.home-consult-ops-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-consult-ops-empty {
    font-size: 12.5px;
    color: var(--muted);
}

.home-consult-op {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.home-consult-op-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a56ff, #0ea5e9);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-consult-op-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.home-consult-op-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.home-consult-op-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
}

.home-consult-op-link:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .home-consult-ov {
        padding: 0;
        align-items: flex-end;
    }

    .home-consult-modal {
        width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }

    .home-consult-sum-grid {
        grid-template-columns: 1fr;
    }

    .home-consult-sched-item {
        grid-template-columns: 1fr;
        gap: 4px;
        text-align: left;
    }

    .home-consult-sched-price,
    .home-consult-sched-seats {
        text-align: left;
    }
}

/* ── Trang tìm kiếm tour (legacy helpers) ── */
.h2-badge-grid .h2badge[data-tour-type-id],
.h2-badge-grid .h2badge.more,
.mob-badge-grid .mb-badge[data-tour-type-id],
.mob-badge-grid .mb-badge.more {
    cursor: pointer;
}

.mob-search-page {
    padding: 0 0 20px;
}

.mob-search-page-hd {
    padding: 8px 14px 0;
}

.mob-search-back {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    margin-bottom: 8px;
}

.mob-search-page-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}

.mob-search-filter {
    margin: 0 14px 14px;
}

/* ── Hero: form tìm kiếm không bị cắt ── */
.home-desktop .hero2 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
    padding-bottom: 14px;
}

.hero2 .h2-left {
    padding-bottom: 18px;
}

.hero2 .h2-right {
    align-items: flex-start !important;
    overflow: visible;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* ── Form tìm kiếm: gọn + thu gọn ── */
.h2-filter-card.is-collapsible .h2-fcard-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0;
}

.h2-fcard-hd-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.h2-fcard-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1.5px solid #dde4f0;
    background: #f5f7fd;
    color: #5b6b8a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, color .12s;
}

.h2-fcard-toggle:hover {
    background: #eff3ff;
    border-color: #b8c8f8;
    color: #1a56ff;
}

.h2-fcard-toggle-ico {
    font-size: 11px;
    line-height: 1;
    transition: transform .18s ease;
}

.h2-filter-card.is-collapsed .h2-fcard-toggle-ico {
    transform: rotate(180deg);
}

.h2-filter-card.is-collapsible .h2-filter-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 6px;
}

.h2-filter-card.is-collapsible.is-collapsed .h2-filter-body {
    display: none;
}

.h2-filter-card.is-compact .h2-frow,
.home-search-form-card.is-compact .h2-frow,
.home-search-form .h2-frow {
    gap: 4px;
}

.h2-filter-card.is-compact .h2-fg,
.home-search-form-card .h2-fg {
    gap: 2px;
}

.h2-filter-card.is-compact .h2-fs,
.home-search-form-card .h2-fs,
.home-search-form .h2-fs {
    padding: 4px 18px 4px 8px;
    font-size: 10.5px;
    border-radius: 6px;
}

.h2-filter-card.is-compact .h2-fl,
.home-search-form-card .h2-fl {
    font-size: 8px !important;
    letter-spacing: .08em;
}

.h2-filter-card.is-compact .h2-apply,
.home-search-form-card .h2-apply {
    margin-top: 2px;
    padding: 7px 12px;
    font-size: 11px;
}

.home-search-form-card {
    max-width: 100%;
    padding: 10px 12px 10px !important;
}

.home-search-form-card .h2-filter-body {
    gap: 6px;
}

.home-search-form .h2-frow-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

.home-search-form .h2-frow-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

.home-search-form .h2-frow-rest {
    display: grid;
    grid-template-columns: minmax(108px, 0.75fr) minmax(180px, 1.1fr) minmax(0, 1.25fr) auto;
    gap: 8px;
    align-items: end;
}

.home-search-form .h2-fg-submit {
    min-width: 0;
}

.home-search-form .h2-fl-invisible {
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.home-search-form .h2-apply-inline {
    width: 100%;
    margin-top: 0;
    white-space: nowrap;
    min-height: 28px;
    padding: 6px 12px;
}

.home-search-form .h2-dr {
    display: flex;
    align-items: center;
    gap: 4px;
}

.home-search-form .h2-dr .h2-date {
    flex: 1;
    min-width: 0;
}

.home-search-filters-top {
    justify-content: flex-end;
}

.home-search-filters .upcom-hd-top {
    margin-bottom: 8px;
}

@media (max-width: 1100px) {
    .home-search-form .h2-frow-3,
    .home-search-form .h2-frow-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-search-form .h2-frow-rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-search-form .h2-fg-submit {
        grid-column: 1 / -1;
    }

    .home-search-form .h2-fl-invisible {
        display: none;
    }
}

.home-search-text {
    width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    border: 1.5px solid #dde4f0;
    border-radius: 6px;
    background: #fff;
    font-size: 10.5px;
}

.home-search-form-card .select2-container .select2-selection--single,
.h2-filter-card.is-compact .select2-container .select2-selection--single {
    height: 24px;
}

.home-search-form-card .select2-container .select2-selection--single .select2-selection__rendered,
.h2-filter-card.is-compact .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 21px;
    font-size: 10.5px;
}

.home-search-form-card .select2-container .select2-selection--single .select2-selection__arrow,
.h2-filter-card.is-compact .select2-container .select2-selection--single .select2-selection__arrow {
    height: 22px;
}

/* ── Trang tìm kiếm: header chung ── */
.home-search-mgmt {
    flex: 1;
    min-width: 0;
    background: var(--bg);
}

.home-search-mgmt .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(26, 35, 64, .05);
}

.home-search-mgmt .ph-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 10px;
}

.home-search-page {
    padding: 14px 14px 28px;
}

.home-search-top {
    margin-bottom: 14px;
}

.home-search-results {
    margin-top: 0;
    padding: 0;
}

.home-search-mgmt .home-search-filters-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.home-search-mgmt .home-search-result-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.home-search-mgmt .home-search-pagination {
    display: flex;
    justify-content: center;
    padding: 16px 12px 8px;
}

.home-search-mgmt .home-search-pagination .pag {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.home-search-mgmt .pg-btn {
    width: 31px;
    height: 31px;
    border-radius: 7px;
    border: 1.5px solid var(--border2);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .13s;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

.home-search-mgmt .pg-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
    background: #f0f9ff;
}

.home-search-mgmt .pg-btn.active {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    border-color: #0ea5e9;
    color: #fff;
    box-shadow: 0 3px 10px rgba(14, 165, 233, .28);
}

.home-search-mgmt .pg-btn-disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* Schedule detail modal — desktop */
.home-sched-detail-ov {
    position: fixed;
    inset: 0;
    z-index: 12040;
    background: rgba(15, 25, 45, .45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.home-sched-detail-ov.open {
    opacity: 1;
    pointer-events: auto;
}

body.home-sched-detail-open {
    overflow: hidden;
}

.home-sched-detail-modal {
    width: min(1080px, 100%);
    max-height: min(92vh, 940px);
    min-height: 0;
    background: #f2f4f6;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 25, 45, .2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(14px);
    transition: transform .22s;
}

.home-sched-detail-ov.open .home-sched-detail-modal {
    transform: none;
}

.home-sched-detail-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #e6e9ef;
    background: #eef2f8;
    flex-shrink: 0;
}

.home-sched-detail-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #3a4a64;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 7px;
}

.home-sched-detail-close {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 6px;
    background: rgba(220, 38, 38, .2);
    color: #f08080;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.home-sched-detail-close:hover {
    background: rgba(220, 38, 38, .32);
}

.home-sched-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 18px;
    background: #f2f4f6;
    -webkit-overflow-scrolling: touch;
}

.home-sched-detail-ft {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #e6e9ef;
    box-shadow: 0 -4px 14px rgba(20, 30, 55, .07);
    position: relative;
    z-index: 2;
}

.home-sched-detail-ft:empty {
    display: none;
}

.home-sched-detail-ft .hsd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: #fafbfc;
}

.home-sched-detail-body:has(+ .home-sched-detail-ft:not(:empty)) {
    padding-bottom: 12px;
}

.home-sched-detail-ft .hsd-modal-footer .hsd-sf-btn {
    min-height: 36px;
}

.home-sched-detail-loading,
.home-sched-detail-error {
    padding: 32px 20px;
    text-align: center;
    color: #8a96aa;
    font-size: 13px;
}

.home-sched-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hsd-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hsd-hero {
    display: none;
}

.hsd-page-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.hsd-meta-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(20, 30, 55, .04), 0 3px 10px rgba(20, 30, 55, .05);
    overflow: hidden;
}

.hsd-meta-card .hsd-meta-strip {
    border-top: none;
}

.hsd-meta-card .hsd-meta-grid {
    border-top: none;
}

.hsd-page-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: #252e3e;
}

.hsd-accent {
    color: #3a6bc4;
}

.hsd-page-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.hsd-meta-strip {
    display: flex;
    border-top: 1px solid #e6e9ef;
    overflow: hidden;
}

.hsd-mc {
    padding: 10px 16px;
    border-right: 1px solid #e6e9ef;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hsd-mc:last-child {
    border-right: none;
}

.hsd-mc.narrow {
    flex: 0 1 30%;
    min-width: 210px;
    max-width: 340px;
}

.hsd-mc.mid {
    flex: 0 1 16%;
    min-width: 0;
}

.hsd-mc.wide {
    flex: 0 1 16%;
    min-width: 0;
    max-width: 180px;
}

.hsd-meta-strip .hsd-mc.narrow .hsd-mc-val {
    min-width: 0;
}

.hsd-meta-strip .hsd-mc.narrow .hsd-mc-val,
.hsd-meta-strip .hsd-mc.narrow .tg-group-badge {
    font-size: 11px;
    font-weight: 600;
}

.hsd-meta-strip .hsd-mc.narrow .tg-group-badge {
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    border-radius: 8px;
    text-align: center;
    line-height: 1.35;
}

.hsd-meta-strip .hsd-mc.wide .hsd-mc-val {
    font-size: 11.5px;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

.hsd-mc-lbl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8a96aa;
}

.hsd-mc-val {
    font-size: 12.5px;
    font-weight: 600;
    color: #252e3e;
}

.hsd-mc-val.blue {
    color: #3a6bc4;
}

.hsd-lm-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 1px;
}

.hsd-lm {
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}

.hsd-lm-blue {
    background: #eef3fb;
    color: #3a6bc4;
    border-color: #c8d8f0;
}

.hsd-lm-green {
    background: #eef7f2;
    color: #2a7848;
    border-color: #b8ddc8;
}

.hsd-lm-gold {
    background: #faf6e8;
    color: #9a7018;
    border-color: #d8c888;
}

.hsd-lm-purple {
    background: #f5f2fb;
    color: #5c3898;
    border-color: #d0c0f0;
}

.hsd-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(20, 30, 55, .04), 0 3px 10px rgba(20, 30, 55, .05);
    overflow: hidden;
}

.hsd-card-hd {
    background: #eef2f8;
    border-bottom: 1px solid #e6e9ef;
    padding: 10px 16px;
}

.hsd-card-hd-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: #4a5870;
    letter-spacing: .5px;
}

.hsd-dep-date-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e6e9ef;
    flex-shrink: 0;
}

.hsd-dep-date {
    background: linear-gradient(160deg, #eef3fb, #e2eaf8);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 76px;
}

.hsd-dep-day {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #3a6bc4;
    line-height: 1;
}

.hsd-dep-mo {
    font-size: 10.5px;
    color: #6a84b0;
    font-weight: 600;
    margin-top: 3px;
}

.hsd-dep-yr {
    font-size: 9px;
    color: #a0b0d0;
    margin-top: 1px;
}

.hsd-date-nav {
    display: flex;
    gap: 1px;
    background: #e6e9ef;
    border-top: 1px solid #e6e9ef;
}

.hsd-dn-btn {
    flex: 1;
    padding: 6px 4px;
    border: none;
    background: #fff;
    font-size: 9.5px;
    font-weight: 600;
    color: #8a96aa;
    cursor: pointer;
    font-family: inherit;
    transition: all .14s;
    white-space: nowrap;
}

.hsd-dn-btn:not(:disabled):hover {
    background: #eef3fb;
    color: #3a6bc4;
}

.hsd-dn-btn:disabled {
    opacity: .45;
    cursor: default;
}

.hsd-dep-block {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e6e9ef;
}

.hsd-dep-info {
    flex: 1;
    padding: 12px 16px;
    min-width: 0;
}

.hsd-dep-route {
    font-size: 13px;
    font-weight: 700;
    color: #252e3e;
    line-height: 1.4;
    margin-bottom: 6px;
}

.hsd-dep-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.hsd-dep-tag-air {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    background: #eef2ff;
    color: #3b5bdb;
    border: 1px solid #c5d0f5;
}

.hsd-lbadge {
    display: inline-flex;
    padding: 1.5px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.hsd-lbadge.tgl-ltet,
.hsd-lbadge.ulb2-ll { background: #6e1c38; }
.hsd-lbadge.tgl-ns,
.hsd-lbadge.ulb2-ns { background: #1c3e6e; }
.hsd-lbadge.tgl-full,
.hsd-lbadge.ulb2-full { background: #0c5245; }
.hsd-lbadge.tgl-flash,
.hsd-lbadge.ulb2-flash { background: #7a3408; }
.hsd-lbadge.tgl-vip,
.hsd-lbadge.tgl-luxury { background: #5c3898; }
.hsd-lbadge.tgl-fam { background: #2d6b1c; }
.hsd-lbadge.tg-lbl { background: #6a7690; }

.hsd-dep-price-col {
    border-left: 1px solid #e6e9ef;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
}

.hsd-dep-price {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: #b85e30;
    line-height: 1;
}

.hsd-dep-price-note {
    font-size: 10px;
    color: #8a96aa;
}

.hsd-seat-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #f7f8fa;
    border-bottom: 1px solid #e6e9ef;
    flex-wrap: wrap;
}

.hsd-seat-wrap--action {
    cursor: pointer;
    transition: background .12s;
}

.hsd-seat-wrap--action:hover {
    background: #eef3ff;
}

.hsd-seat-wrap--action:focus-visible {
    outline: 2px solid rgba(26, 86, 255, .35);
    outline-offset: -2px;
}

.hsd-seat-wrap--agent-text {
    justify-content: flex-start;
    background: transparent;
    border-bottom: none;
    padding-top: 5px;
    padding-left: 5px;
}

.hsd-seat-wrap--agent-text .hsd-seat-status {
    font-size: 12px;
    font-weight: 700;
}

.hsd-seat-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: #8a96aa;
}

.hsd-seat-bar {
    display: flex;
    height: 17px;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    max-width: 200px;
    min-width: 100px;
    position: relative;
}

.hsd-sb-g {
    background: #488060;
}

.hsd-sb-y {
    background: #a08030;
}

.hsd-sb-r {
    background: #904040;
}

.hsd-sb-lbl {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, .95);
    padding: 0 3px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .5);
}

.hsd-seat-total {
    font-size: 11px;
    font-weight: 600;
    color: #8a96aa;
}

.hsd-seat-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
}

.hsd-hs-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e6e9ef;
}

.hsd-hs-left {
    flex: 1;
    display: flex;
    align-items: stretch;
    background: #fdfbf6;
    border-right: 1px solid #e6e9ef;
    min-width: 0;
}

.hsd-hs-icon {
    padding: 12px;
    font-size: 18px;
    flex-shrink: 0;
    opacity: .75;
}

.hsd-hs-info {
    padding: 11px 12px 11px 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.hsd-hs-lbl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8a96aa;
}

.hsd-hs-date {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #9a7018;
    line-height: 1;
    margin-top: 2px;
}

.hsd-hs-sub {
    font-size: 10px;
    color: #8a96aa;
    margin-top: 2px;
}

.hsd-hs-warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 2px 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    background: #faf6e8;
    border: 1px solid #e8d090;
    color: #8a6010;
    width: fit-content;
}

.hsd-hs-cd-wrap {
    padding: 11px 14px;
    border-left: 1px solid #ede8d8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

.hsd-hs-cd-lbl {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8a96aa;
    margin-bottom: 5px;
}

.hsd-hs-cd {
    display: flex;
    align-items: flex-start;
    gap: 3px;
}

.hsd-cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hsd-cd-box {
    background: #eef2f8;
    color: #3a4a64;
    border: 1px solid #d4dce8;
    border-radius: 5px;
    padding: 4px 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 800;
    min-width: 28px;
    text-align: center;
    line-height: 1;
}

.hsd-hs-cd.hsd-cd-urgent .hsd-cd-box {
    background: #faf2f2;
    color: #a83030;
    border-color: #e8c0c0;
}

.hsd-cd-u {
    font-size: 7.5px;
    color: #b8c0cc;
    font-weight: 600;
}

.hsd-cd-sep {
    color: #b8c0cc;
    font-size: 13px;
    font-weight: 600;
    padding: 0 1px;
    margin-top: 3px;
}

.hsd-hs-stats {
    display: flex;
    flex-shrink: 0;
}

.hsd-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-left: 1px solid #e6e9ef;
    cursor: pointer;
    gap: 2px;
    min-width: 108px;
    position: relative;
    transition: background .12s;
    background: #fff;
}

.hsd-stat-card:hover {
    background: #eef3fb;
}

.hsd-stat-card::after {
    content: '↗';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    color: #b8c0cc;
}

.hsd-stat-num {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.hsd-stat-num.booked,
.hsd-stat-num.bk {
    color: #2a7848;
}

.hsd-stat-num.req {
    color: #b85e30;
}

.hsd-stat-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: #8a96aa;
}

.hsd-stat-card:hover .hsd-stat-lbl {
    color: #3a6bc4;
}

/* Quick actions — departure card */
.hsd-quick-actions {
    display: flex;
    justify-content: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e6e9ef;
    background: #fafbfd;
}

.hsd-qa-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 62%;
    min-width: 280px;
}

.hsd-qa-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 10px 14px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid #d4d9e4;
    background: #fff;
    color: #3d4a60;
    transition: all .16s;
}

.hsd-qa-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(20, 30, 55, .07), 0 6px 20px rgba(20, 30, 55, .05);
}

.hsd-qa-icobox {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.hsd-qa-itinerary .hsd-qa-icobox { background: #eef3fb; color: #3a6bc4; }
.hsd-qa-itinerary:hover { border-color: #3a6bc4; color: #3a6bc4; }
.hsd-qa-share .hsd-qa-icobox { background: #eef8f5; color: #228070; }
.hsd-qa-share:hover { border-color: #228070; color: #228070; }
.hsd-qa-consult {
    background: linear-gradient(160deg, #2a8fc4, #3a9fd4);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(42, 143, 196, .28);
}
.hsd-qa-consult .hsd-qa-icobox { background: rgba(255, 255, 255, .18); color: #fff; }
.hsd-qa-consult:hover {
    box-shadow: 0 8px 22px rgba(42, 143, 196, .36);
    transform: translateY(-3px);
}

/* Giữ chỗ + Booking — under pricing */
.hsd-book-actions {
    display: flex;
    justify-content: center;
    padding: 14px 16px;
}

.hsd-ba-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 62%;
    min-width: 280px;
}

.hsd-ba-inner--single {
    grid-template-columns: 1fr;
    width: auto;
    max-width: 320px;
    min-width: 0;
    margin: 0 auto;
}

.hsd-btn-giucho,
.hsd-btn-booking {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px 14px 16px;
    border-radius: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all .16s;
    position: relative;
    overflow: hidden;
    border: none;
    width: 100%;
}

.hsd-btn-giucho {
    border: 1.5px solid #c8d8f5;
    background: linear-gradient(160deg, #eef4ff, #e4edfd);
    box-shadow: 0 2px 10px rgba(58, 107, 196, .1);
}

.hsd-btn-giucho:hover {
    background: linear-gradient(160deg, #e4edfd, #d8e4fa);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(58, 107, 196, .22);
    border-color: #a8c4f0;
}

.hsd-btn-booking {
    border: 1.5px solid #c0e0d4;
    background: linear-gradient(160deg, #eefaf5, #e4f5ec);
    box-shadow: 0 2px 10px rgba(34, 128, 112, .1);
}

.hsd-btn-booking:hover {
    background: linear-gradient(160deg, #e4f5ec, #d8f0e4);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(34, 128, 112, .22);
    border-color: #90d0b8;
}

.hsd-bgc-icobox {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.hsd-btn-giucho .hsd-bgc-icobox { background: rgba(58, 107, 196, .13); color: #3a6bc4; }
.hsd-btn-booking .hsd-bgc-icobox { background: rgba(34, 128, 112, .13); color: #228070; }

.hsd-bgc-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hsd-bgc-main {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .3px;
    line-height: 1;
}

.hsd-btn-giucho .hsd-bgc-main { color: #2850a0; }
.hsd-btn-booking .hsd-bgc-main { color: #1a6050; }

.hsd-bgc-sub {
    font-size: 10.5px;
    font-weight: 500;
}

.hsd-btn-giucho .hsd-bgc-sub { color: #5a78b8; }
.hsd-btn-booking .hsd-bgc-sub { color: #4a9080; }

.hsd-bgc-arr {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 14px;
    font-weight: 900;
}

.hsd-btn-giucho .hsd-bgc-arr { color: #7a98d0; }
.hsd-btn-booking .hsd-bgc-arr { color: #6ab0a0; }

.hsd-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    flex-wrap: wrap;
    border-top: 1px solid #e6e9ef;
}

.hsd-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #d4d9e4;
    background: #fff;
    color: #3d4a60;
    font-family: inherit;
    transition: all .12s;
}

.hsd-btn-sm:hover {
    border-color: #3a6bc4;
    color: #3a6bc4;
    background: #eef3fb;
}

.hsd-btn-sky {
    background: #2a8fc4 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(42, 143, 196, .2);
}

.hsd-btn-sky:hover {
    background: #2280b0 !important;
    color: #fff !important;
}

.hsd-pricing-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 0;
    border-bottom: 1px solid #e6e9ef;
}

.hsd-pricing-row--agent {
    grid-template-columns: 1fr auto;
}

.hsd-pc {
    padding: 14px 16px;
    border-right: 1px solid #e6e9ef;
    position: relative;
    overflow: hidden;
}

.hsd-pc:last-child {
    border-right: none;
}

.hsd-pc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.hsd-pc.std::before,
.hsd-pc.silver::before { background: #8a96a8; }

.hsd-pc.vip::before,
.hsd-pc.gold::before { background: #9a7018; }

.hsd-pc.tit::before,
.hsd-pc.platinum::before { background: #3a6bc4; }

.hsd-pc.diamond::before { background: #5c3898; }

.hsd-pc.pp::before { background: #228070; }

.hsd-pc-lbl {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #8a96aa;
}

.hsd-pc.silver .hsd-pc-lbl { color: #6a7690; }
.hsd-pc.gold .hsd-pc-lbl { color: #9a7018; }
.hsd-pc.platinum .hsd-pc-lbl { color: #3a6bc4; }
.hsd-pc.diamond .hsd-pc-lbl { color: #5c3898; }
.hsd-pc.pp .hsd-pc-lbl { color: #228070; }

.hsd-pc.std .hsd-pc-lbl { color: #3a6bc4; }
.hsd-pc.vip .hsd-pc-lbl { color: #9a7018; }
.hsd-pc.tit .hsd-pc-lbl { color: #5c3898; }

.hsd-pc-val {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #252e3e;
}

.hsd-pc-sub,
.hsd-pp-note {
    font-size: 10px;
    color: #8a96aa;
    margin-top: 3px;
}

.hsd-pc.pp {
    background: #f4fbf9;
    min-width: 150px;
}

.hsd-pp-val {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: #228070;
}

.hsd-notes-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
}

.hsd-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.hsd-note-warn {
    background: #faf6e8;
    border-color: #e8d898;
    border-left: 3px solid #9a7018;
}

.hsd-note-intern {
    background: #eef7f2;
    border-color: #b8ddc8;
    border-left: 3px solid #2a7848;
}

.hsd-note-oper {
    background: #faf2f2;
    border-color: #e8c0c0;
    border-left: 3px solid #a83030;
}

.hsd-note-attach {
    background: #f5f2fb;
    border-color: #d8c8f0;
    border-left: 3px solid #5c3898;
}

.hsd-ntag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1.5px 7px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}

.hsd-note-warn .hsd-ntag {
    background: #9a7018;
}

.hsd-note-intern .hsd-ntag {
    background: #2a7848;
}

.hsd-note-oper .hsd-ntag {
    background: #a83030;
}

.hsd-note-attach .hsd-ntag {
    background: #5c3898;
}

.hsd-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e6e9ef;
    background: #fafbfc;
}

.hsd-sf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .14s;
}

.hsd-sf-btn.edit {
    background: transparent;
    border-color: #d4d9e4;
    color: #3d4a60;
}

.hsd-sf-btn.edit:hover {
    background: #faf3ee;
    border-color: #d89878;
    color: #b85e30;
}

.hsd-sf-btn.del {
    background: transparent;
    border-color: #d4d9e4;
    color: #8a96aa;
}

.hsd-sf-btn.del:hover {
    background: #faf2f2;
    border-color: #d8a8a8;
    color: #a83030;
}

.hsd-sf-btn.hide {
    background: #eef2f8;
    color: #4a5870;
    border-color: #d4d9e4;
}

.hsd-sf-btn.hide:hover {
    background: #e0e6f0;
    color: #2a3850;
}

.hsd-sub-empty {
    padding: 16px;
    text-align: center;
    color: #8a96aa;
    font-size: 12px;
}

/* Sub-modal: booking / request lists */
.home-sched-sub-ov {
    position: fixed;
    inset: 0;
    z-index: 12050;
    background: rgba(15, 25, 45, .45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.home-sched-sub-ov.open {
    opacity: 1;
    pointer-events: auto;
}

.home-sched-sub-modal {
    width: min(560px, 94vw);
    max-height: 78vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 25, 45, .2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.home-sched-sub-pill {
    display: none;
}

.home-sched-sub-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #e6e9ef;
    background: #253348;
}

.home-sched-sub-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #c8d8f0;
}

.home-sched-sub-close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(220, 38, 38, .2);
    border: 1px solid rgba(220, 38, 38, .25);
    color: #f08080;
    font-size: 12px;
    cursor: pointer;
}

.home-sched-sub-body {
    padding: 12px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hsd-m-item {
    background: #f2f4f6;
    border: 1px solid #e6e9ef;
    border-radius: 7px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.hsd-m-ico {
    font-size: 16px;
    flex-shrink: 0;
    opacity: .8;
}

.hsd-m-main {
    flex: 1;
    min-width: 0;
}

.hsd-m-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #252e3e;
}

.hsd-m-sub {
    font-size: 11px;
    color: #8a96aa;
    margin-top: 1px;
}

.hsd-m-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.hsd-m-badge.mb-done {
    background: #eef7f2;
    color: #2a7848;
    border: 1px solid #b4dfc5;
}

.hsd-m-badge.mb-pend {
    background: #faf3ee;
    color: #b85e30;
    border: 1px solid #e8c0a0;
}

.hsd-m-badge.mb-wait {
    background: #eef3fb;
    color: #3a6bc4;
    border: 1px solid #c0ccf0;
}

.tc-line-name.js-schedule-detail-name,
.mcard-line-name.js-schedule-detail-name {
    cursor: pointer;
    transition: color .12s;
}

.tc-line-name.js-schedule-detail-name:hover,
.mcard-line-name.js-schedule-detail-name:hover {
    color: #0369a1;
}

/* ── Homepage custom banner (must be last to beat earlier .hero2 !important) ── */
.hero2.hero2-has-banner {
    background: transparent !important;
    background-image: none !important;
}

.hero2-banner-img,
.hero2-banner-dim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero2-banner-img {
    z-index: 0;
    object-fit: cover !important;
    object-position: center;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.hero2-banner-dim {
    z-index: 1;
    background: linear-gradient(
        130deg,
        rgba(8, 15, 30, .72) 0%,
        rgba(12, 20, 40, .55) 48%,
        rgba(15, 23, 42, .65) 100%
    );
}

.hero2.hero2-has-banner .h2bg-blob,
.hero2.hero2-has-banner .h2-blob {
    display: none !important;
}

.hero2.hero2-has-banner .h2-left,
.hero2.hero2-has-banner .h2-right {
    position: relative;
    z-index: 2;
}

.hero2.hero2-has-banner .h2-eyebrow {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #fff !important;
}

.hero2.hero2-has-banner .h2-title,
.hero2.hero2-has-banner .h2-t1,
.hero2.hero2-has-banner .h2-t2,
.hero2.hero2-has-banner .h2-desc,
.hero2.hero2-has-banner .h2-sl,
.hero2.hero2-has-banner .h2-sv {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.hero2.hero2-has-banner .h2-vdiv {
    background: rgba(255, 255, 255, .35) !important;
}

.hero2.hero2-has-banner .h2-filter-card {
    box-shadow: 0 10px 36px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .16) !important;
}

/* Route pills + seat-status day chips (homepage groups) */
.sec-hd-row .tg-route-pills { order: 0; }
.sec-hd-row .sec-toggle-btn { margin-left: auto; flex-shrink: 0; margin-top: 2px; }