/* =========================================================
   TOUR DU LỊCH — ARCHIVE CSS v4
   Font: Montserrat | Layout: 3 cột
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
    --tbx-font:     'Montserrat', sans-serif;
    --tbx-green:    #00a87f;
    --tbx-green-h:  #008768;
    --tbx-text:     #111827;
    --tbx-muted:    #6b7280;
    --tbx-border:   rgba(0,0,0,0.08);
    --tbx-border-h: rgba(0,0,0,0.14);
    --tbx-bg:       #f3f4f6;
    --tbx-white:    #ffffff;
    --tbx-radius:   16px;
    --tbx-max:      1340px;
    --tbx-trans:    all .2s ease;
}

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

.tbx-tour-archive {
    background: #FFFFFF;
    min-height: 100vh;
    font-family: var(--tbx-font);

    /* Breakout khỏi mọi wrapper cha có max-width của theme */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    box-sizing: border-box;
}

.tbx-archive-header {
    background: #dffff7;
    padding: 50px 24px 42px;
    text-align: center;
    width: 100%;
}
.tbx-archive-header__inner { max-width: var(--tbx-max); margin: 0 auto; }
.tbx-archive-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    color: #005f4c;
    margin-bottom: 9px;
    letter-spacing: -0.3px;
}
.tbx-archive-desc {
    font-size: 13px;
    color: #005f4c;
    line-height: 1.5;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tbx-archive-content {
    max-width: var(--tbx-max);
    margin: 0 auto;
    padding: 32px 24px 64px;
    background: #FFFFFF;
    min-height: 60vh;
}

.tbx-filter-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 28px; }
.tbx-filter-btn {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    border: 0.5px solid var(--tbx-border-h);
    background: var(--tbx-white);
    color: var(--tbx-muted);
    font-family: var(--tbx-font);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    transition: var(--tbx-trans);
    cursor: pointer;
}
.tbx-filter-btn:hover,
.tbx-filter-btn.active { background: var(--tbx-green); color: #fff; border-color: var(--tbx-green); box-shadow: 0 3px 10px rgba(0,168,127,0.22); }

/* === GRID 3 CỘT === */
.tbx-tour-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;
}
@media (max-width: 900px) { .tbx-tour-grid { grid-template-columns: repeat(2, 1fr); } }
/* Archive page (không phải shortcode): 1 cột trên mobile */
@media (max-width: 560px) { .tbx-tour-grid { grid-template-columns: 1fr; } }
/* Shortcode trên mobile: override bằng flex (xem cuối file) */

/* === SỐ CỘT TÙY CHỈNH (từ shortcode so_cot="N") === */
.tbx-tour-grid[data-cols="1"] { grid-template-columns: repeat(1, 1fr); }
.tbx-tour-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.tbx-tour-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.tbx-tour-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.tbx-tour-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.tbx-tour-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
/* Responsive: 4-6 cột thu về 2 trên tablet, 1 trên mobile */
@media (max-width: 1100px) {
    .tbx-tour-grid[data-cols="5"],
    .tbx-tour-grid[data-cols="6"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .tbx-tour-grid[data-cols="3"],
    .tbx-tour-grid[data-cols="4"],
    .tbx-tour-grid[data-cols="5"],
    .tbx-tour-grid[data-cols="6"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .tbx-tour-grid[data-cols] { grid-template-columns: 1fr; }
}

/* === CARD === */
.tbx-tour-card {
    background: var(--tbx-white);
    border-radius: var(--tbx-radius);
    border: 0.5px solid var(--tbx-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
    min-width: 0;
    width: 100%;
}
.tbx-tour-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.10); }

/* === IMAGE WRAP – giữ tỉ lệ 4:3 === */
.tbx-tour-card__image-wrap {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    background: #e5e7eb;
    text-decoration: none;
    flex-shrink: 0;
}
.tbx-tour-card__image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}
.tbx-tour-card:hover .tbx-tour-card__image-wrap img { transform: scale(1.06); }

.tbx-tour-card__discount {
    position: absolute;
    top: 10px; right: 10px;
    background: #e53e3e;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 6px;
    letter-spacing: .02em;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(229,62,62,.35);
    pointer-events: none;
}

.tbx-tour-card__body {
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.tbx-tour-card__title { font-size: 17px; font-weight: 500; color: var(--tbx-text); line-height: 1.38; margin-bottom: 5px;}
.tbx-tour-card__title a { color: var(--tbx-text); text-decoration: none; }
.tbx-tour-card__title a:hover { color: var(--tbx-green); }

.tbx-tour-card__toggle {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; padding: 8px 14px;
    border-radius: 50px; border: 0.5px solid var(--tbx-border-h);
    background: transparent; color: var(--tbx-muted);
    font-family: var(--tbx-font); font-size: 12px; font-weight: 500;
    letter-spacing: 0.8px; text-transform: uppercase;
    cursor: pointer; transition: var(--tbx-trans);
}
.tbx-tour-card__toggle:hover { border-color: var(--tbx-text); color: var(--tbx-text); background: #FFFFFF; }
.tbx-tour-card__toggle svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform .25s ease; flex-shrink: 0; }
.tbx-tour-card__toggle.open svg { transform: rotate(180deg); }



/* Fix lỗi sau khi nhấn (focus) vẫn giữ màu nền cũ hoặc không bị đổi sang màu tối */
.tbx-tour-card__toggle:focus {
    outline: none; /* Bỏ đường viền mặc định của trình duyệt */
    background: transparent; /* Hoặc giữ nguyên màu bạn muốn khi đã nhấn xong */
    color: var(--tbx-muted);
    border-color: var(--tbx-border-h);
}

/* Nếu bạn muốn khi nhấn xong mà vẫn đang hover thì nó vẫn giữ màu trắng của hover */
.tbx-tour-card__toggle:focus:hover {
    background: #FFFFFF;
    color: var(--tbx-text);
    border-color: var(--tbx-text);
}

/* Đảm bảo khi nút đang mở (.open) cũng không bị đổi màu nền lạ */
.tbx-tour-card__toggle.open {
    background: transparent; 
    /* Nếu bạn muốn lúc mở nút có màu khác thì chỉnh ở đây */
}




.tbx-tour-card__excerpt {
    font-size: 13px; color: #000; line-height: 1.5;
    font-weight: 500;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tbx-tour-card__excerpt.open { max-height: 150px; opacity: 1; }

.tbx-tour-card__footer {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: auto; padding-top: 4px;
}
.tbx-tour-card__dur { display: flex; flex-direction: column; gap: 1px; }
.tbx-tour-card__dur-label { font-size: 10px; font-weight: 500; color: #000; text-transform: uppercase; letter-spacing: 0.5px; }
.tbx-tour-card__dur-val { font-size: 15px; font-weight: 500; color: var(--tbx-text); }
.tbx-tour-card__price { font-size: 18px; font-weight: 600; color: #BF292C; white-space: nowrap; }

.tbx-tour-card__btn {
    display: block; width: 100%; padding: 15px 20px;
    background: var(--tbx-green); color: #fff;
    border-radius: 50px; text-align: center;
    font-family: var(--tbx-font); font-size: 14px; font-weight: 500;
    text-decoration: none; border: none; cursor: pointer;
    transition: background .2s ease, transform .15s ease;
    margin-top: 4px;
}
.tbx-tour-card__btn:hover { background: var(--tbx-green-h); color: #FFFFFF; transform: translateY(-1px); }

.tbx-pagination { margin-top: 44px; display: flex; justify-content: center; }
.tbx-pagination .page-numbers { display: inline-flex; gap: 5px; list-style: none; padding: 0; }
.tbx-pagination .page-numbers li a,
.tbx-pagination .page-numbers li span {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    font-family: var(--tbx-font); font-size: 12px; font-weight: 400;
    text-decoration: none; color: var(--tbx-text);
    background: var(--tbx-white); border: 0.5px solid var(--tbx-border-h);
    transition: var(--tbx-trans);
}
.tbx-pagination .page-numbers li a:hover { background: var(--tbx-green); color: #fff; border-color: var(--tbx-green); }
.tbx-pagination .page-numbers li .current { background: var(--tbx-green); color: #fff; border-color: var(--tbx-green); }
.tbx-pagination .page-numbers li a.prev,
.tbx-pagination .page-numbers li a.next { font-size: 16px; font-weight: 600; }
/* =========================================================
   SHORTCODE WRAPPER — padding khi dùng trên trang chủ / trang tĩnh
   ========================================================= */
.tbx-shortcode-wrap {
    padding: 32px 24px 48px;
    max-width: var(--tbx-max);
    margin: 0 auto;
    box-sizing: border-box;
}

/* =========================================================
   MOBILE: Shortcode grid — 1 hàng, cuộn ngang, lòi 2 bên khi cuộn
   Chỉ áp dụng trong shortcode (.tbx-shortcode-wrap),
   KHÔNG ảnh hưởng archive page bình thường.
   ========================================================= */
@media (max-width: 560px) {
    /* Wrapper: bỏ overflow:hidden để grid scroll được, bỏ padding ngang */
    .tbx-shortcode-wrap {
        padding-left: 0;
        padding-right: 0;
        overflow: visible;
    }

    /* Tiêu đề loại và link "Xem tất cả" vẫn có padding bình thường */
    .tbx-shortcode-wrap .tbx-loai-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Grid: scroll ngang — padding 2 bên bằng nhau để lòi đều */
    .tbx-shortcode-wrap .tbx-tour-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        gap: 12px;
        padding: 4px 20px 16px 20px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tbx-shortcode-wrap .tbx-tour-grid::-webkit-scrollbar {
        display: none;
    }

    /* Card 78vw → ~11vw mỗi bên lòi ra, snap từ lề trái */
    .tbx-shortcode-wrap .tbx-tour-grid .tbx-tour-card {
        flex: 0 0 78vw;
        min-width: 0;
        width: 78vw;
        scroll-snap-align: start;
    }
}

/* Section theo loại: tiêu đề + link "Xem tất cả" */
.tbx-loai-section {
    padding-bottom: 56px;
}
.tbx-loai-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.tbx-loai-title {
    font-family: var(--tbx-font);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--tbx-text);
    margin: 0;
    line-height: 1.3;
}
.tbx-loai-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--tbx-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--tbx-green);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--tbx-trans);
}
.tbx-loai-link:hover { color: var(--tbx-green-h); }
.tbx-loai-link svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2.5;
}

/* ============================================================
   PROMOTION — Card dropdown
   ============================================================ */

/* Nút Promotion — màu đỏ cam nổi bật */
.tbx-tour-card__toggle {
    /* inherit existing toggle styles; only override color aspects below */
}

/* Promotion content area */
.tbx-tour-card__promotion {
    padding: 0 4px;
}

.tbx-tour-card__promotion p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}

/* Danh sách ưu đãi trong card */
.tbx-promo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tbx-promo-list li {
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
    padding: 5px 8px;
    background: #f0faf7;
    border-left: 3px solid #008768;
    border-radius: 0 4px 4px 0;
}

/* ============================================================
   GIÁ KHUYẾN MÃI — Card (archive / shortcode)
   ============================================================ */
.tbx-tour-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.tbx-price-original {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
    line-height: 1.2;
}

.tbx-price-sale {
    font-size: 18px;
    font-weight: 600;
    color: #BF292C;
    line-height: 1.2;
}

/* ============================================================
   FALLBACK EXCERPT — khi tour không có "Điểm Nổi Bật"
   ============================================================ */
.tbx-tour-card__fallback-excerpt {
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
    margin: 6px 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
/* ============================================================
   SEARCH BOX — v3.0 Premium
   Tone: #00A87F | Style: Glass-morphism + Premium Travel
   ============================================================ */

/* ── Palette & tokens ── */
:root {
    --tbx-accent:          #00A87F;
    --tbx-accent-h:        #009370;
    --tbx-accent-dark:     #006e54;
    --tbx-accent-soft:     rgba(0, 168, 127, 0.07);
    --tbx-accent-mid:      rgba(0, 168, 127, 0.15);
    --tbx-accent-glow:     rgba(0, 168, 127, 0.25);
    --tbx-field-bg:        #ffffff;
    --tbx-field-border:    #e2f5ef;
    --tbx-field-border-h:  #a8dece;
    --tbx-label-color:     #007a5e;
    --tbx-input-radius:    12px;
    --tbx-box-radius:      24px;
}

/* ══════════════════════════════════════════════════════════════
   ARCHIVE SEARCH BOX — khung search trong trang danh sách tour
   ══════════════════════════════════════════════════════════════ */

.tbx-search-box {
    background: #ffffff;
    border: 1.5px solid #d4f0e8;
    border-radius: var(--tbx-box-radius);
    padding: 28px 32px 26px;
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;

    /* Layered shadow — depth + green tint */
    box-shadow:
        0 2px 4px rgba(0, 168, 127, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 20px 48px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Gradient accent bar on top */
.tbx-search-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        #00A87F 0%,
        #00c9a0 40%,
        #5fead4 75%,
        #b8f5e8 100%
    );
    border-radius: var(--tbx-box-radius) var(--tbx-box-radius) 0 0;
}

/* Decorative soft orb — top right */
.tbx-search-box::after {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(0, 168, 127, 0.06) 0%,
        rgba(0, 168, 127, 0.02) 50%,
        transparent 70%
    );
    pointer-events: none;
}

/* ── Header row ── */
.tbx-search-box__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf8f4;
}

/* Icon badge */
.tbx-search-box__header .fa-magnifying-glass {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(145deg, #00A87F 0%, #009370 100%);
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow:
        0 4px 12px rgba(0, 168, 127, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.tbx-search-box__title {
    font-family: var(--tbx-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: #0a3326;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.tbx-search-box__subtitle {
    font-size: 11.5px;
    color: #7dbfae;
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: 0.1px;
}

/* ── Fields Grid ── */
.tbx-search-box__fields {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

/* Archive: 3 selects + nút bên phải */
.tbx-search-box__fields--archive {
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    margin-bottom: 0;
    align-items: end;
}

@media (max-width: 1100px) {
    .tbx-search-box__fields { grid-template-columns: repeat(3, 1fr); }
    .tbx-search-box__fields--archive { grid-template-columns: 1fr 1fr; }
    .tbx-search-box__fields--archive .tbx-search-field--actions { grid-column: span 2; }
}
@media (max-width: 700px) {
    .tbx-search-box__fields { grid-template-columns: repeat(2, 1fr); }
    .tbx-search-box__fields--archive { grid-template-columns: 1fr; }
    .tbx-search-box__fields--archive .tbx-search-field--actions { grid-column: span 1; }
    .tbx-search-box { padding: 24px 20px 20px; }
}
@media (max-width: 440px) {
    .tbx-search-box__fields { grid-template-columns: 1fr; }
}

/* ── Field wrapper ── */
.tbx-search-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* ── Label ── */
.tbx-search-field__label {
    font-family: var(--tbx-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--tbx-label-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
}

.tbx-search-field__label i {
    font-size: 11px;
    opacity: 0.7;
}

/* ── Input & Select chung ── */
.tbx-search-input,
.tbx-search-select {
    font-family: var(--tbx-font);
    font-size: 13.5px;
    font-weight: 500;
    color: #0f2d25;
    background: var(--tbx-field-bg);
    border: 1.5px solid var(--tbx-field-border);
    border-radius: var(--tbx-input-radius);
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        transform .15s ease;
    -moz-appearance: textfield;
}

.tbx-search-input::placeholder {
    color: #b0d9cc;
    font-weight: 400;
    font-size: 13px;
}

.tbx-search-input::-webkit-outer-spin-button,
.tbx-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Focus state */
.tbx-search-input:focus,
.tbx-search-select:focus {
    outline: none;
    border-color: var(--tbx-accent);
    background: #f6fffe;
    box-shadow:
        0 0 0 4px rgba(0, 168, 127, 0.10),
        0 2px 8px rgba(0, 168, 127, 0.08);
    transform: translateY(-1.5px);
}

/* Hover state */
.tbx-search-input:hover:not(:focus),
.tbx-search-select:hover:not(:focus) {
    border-color: var(--tbx-field-border-h);
    background: #f9fffe;
}

/* ── Select wrapper ── */
.tbx-select-wrap {
    position: relative;
    display: block;
}

.tbx-select-wrap .tbx-search-select {
    width: 100%;
    padding-right: 40px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Arrow icon */
.tbx-select-arrow {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--tbx-accent);
    font-size: 10px;
    opacity: 0.7;
    transition: transform .2s ease, opacity .2s ease;
    line-height: 1;
}

.tbx-select-wrap:hover .tbx-select-arrow {
    opacity: 1;
}

.tbx-select-wrap .tbx-search-select:focus ~ .tbx-select-arrow {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
}

/* ── Actions ── */
.tbx-search-box__actions {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}

.tbx-search-field--actions {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tbx-search-field--actions .tbx-search-box__actions {
    height: 48px;
}

/* Reset — icon only */
.tbx-search-btn--reset-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   INLINE SHORTCODE SEARCH — [tbx_tim_kiem_tour]
   Khung tìm kiếm đơn giản nhúng vào bất kỳ trang nào
   ══════════════════════════════════════════════════════════════ */

/* ── Hero wrapper ── */
.tbx-search-shortcode-wrap--hero {
    width: 100%;
    background: #191B24;
    border-radius: 20px;
    padding: 36px 36px 32px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Decorative orbs */
.tbx-sc-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.tbx-sc-orb--1 {
    top: -80px; right: -80px;
    width: 340px; height: 340px;
    background: radial-gradient(circle at center,
        rgba(0, 151, 113, 0.18) 0%,
        rgba(0, 151, 113, 0.06) 50%,
        transparent 70%
    );
}
.tbx-sc-orb--2 {
    bottom: -60px; left: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle at center,
        rgba(0, 151, 113, 0.10) 0%,
        transparent 65%
    );
}
.tbx-sc-orb--3 {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 200px;
    background: radial-gradient(ellipse at center,
        rgba(0, 151, 113, 0.05) 0%,
        transparent 70%
    );
}

/* Inner content — above orbs */
.tbx-sc-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* Eyebrow tag */
.tbx-sc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tbx-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #009771;
    background: rgba(0, 151, 113, 0.12);
    border: 1px solid rgba(0, 151, 113, 0.25);
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 14px;
}
.tbx-sc-hero__eyebrow i {
    font-size: 11px;
    opacity: 0.9;
}

/* Title */
.tbx-sc-hero__title {
    font-family: var(--tbx-font);
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Subtitle */
.tbx-sc-hero__sub {
    font-family: var(--tbx-font);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 24px;
    line-height: 1.6;
}

/* Search pill */
.tbx-search-inline {
    display: flex;
    align-items: center;
    gap: 0;
    background: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    padding: 7px 7px 7px 26px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .15s ease;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.tbx-search-inline:hover {
    border-color: rgba(0, 151, 113, 0.4);
    background: #FFFFFF;
}

.tbx-search-inline:focus-within {
    border-color: #009771;
    background: #FFFFFF;
    box-shadow:
        0 0 0 4px rgba(0, 151, 113, 0.18),
        0 8px 32px rgba(0, 151, 113, 0.15);
    transform: translateY(-1.5px);
}

/* Icon bên trái */
.tbx-search-inline__icon {
    color: #009771;
    font-size: 16px;
    flex-shrink: 0;
    margin-right: 14px;
    opacity: 0.8;
    transition: opacity .2s ease;
}

.tbx-search-inline:focus-within .tbx-search-inline__icon {
    opacity: 1;
}

/* Input */
.tbx-search-inline__input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--tbx-font);
    font-size: 15px;
    font-weight: 500;
    color: #191B24 !important;
    padding: 10px 0;
    min-width: 0;
    -webkit-text-fill-color: #191B24;
}
/* Override autofill yellow bg */
.tbx-search-inline__input:-webkit-autofill,
.tbx-search-inline__input:-webkit-autofill:hover,
.tbx-search-inline__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #191B24 !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}

.tbx-search-inline__input::placeholder {
    color: #191B24;
    font-weight: 400;
}

/* Button pill bên phải */
.tbx-search-inline__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #009771;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 13px 30px;
    font-family: var(--tbx-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background .22s ease,
        box-shadow .22s ease,
        transform .15s ease;
    box-shadow:
        0 4px 16px rgba(0, 151, 113, 0.40),
        inset 0 1px 0 rgba(255,255,255,0.12);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.tbx-search-inline__btn:hover {
    background: #00aa82;
    box-shadow:
        0 6px 24px rgba(0, 151, 113, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.tbx-search-inline__btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 151, 113, 0.30);
}

/* Trust badges */
.tbx-sc-hero__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.tbx-sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--tbx-font);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.40);
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.tbx-sc-badge i {
    font-size: 12px;
    color: #009771;
    opacity: 0.8;
}

/* Separator dots between badges */
.tbx-sc-hero__badges .tbx-sc-badge + .tbx-sc-badge::before {
    content: '·';
    margin-right: 24px;
    color: rgba(255,255,255,0.15);
    font-size: 16px;
    line-height: 1;
}

/* Responsive */
@media (max-width: 700px) {
    .tbx-search-shortcode-wrap--hero {
        padding: 28px 20px 24px;
        border-radius: 16px;
    }
    .tbx-sc-hero__title {
        font-size: 1.6rem;
    }
    .tbx-search-inline {
        padding: 6px 6px 6px 18px;
    }
    .tbx-search-inline__btn {
        padding: 12px 20px;
        font-size: 13.5px;
    }
    .tbx-sc-hero__badges {
        gap: 16px;
    }
    .tbx-sc-hero__badges .tbx-sc-badge + .tbx-sc-badge::before {
        margin-right: 16px;
    }
}
@media (max-width: 480px) {
    .tbx-search-shortcode-wrap--hero {
        padding: 22px 14px 20px;
    }
    .tbx-search-inline__btn .fa-arrow-right {
        display: none;
    }
    .tbx-sc-hero__badges {
        gap: 12px;
    }
    .tbx-sc-badge + .tbx-sc-badge::before {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS CHUNG — dùng trong archive search box
   ══════════════════════════════════════════════════════════════ */

.tbx-search-btn {
    font-family: var(--tbx-font);
    font-size: 13.5px;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 100px;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition:
        background .22s ease,
        box-shadow .22s ease,
        transform .15s ease,
        color .2s ease;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Shimmer overlay */
.tbx-search-btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0) 70%
    );
    transform: translateX(-100%);
    transition: transform .5s ease;
    pointer-events: none;
}
.tbx-search-btn--primary:hover::before {
    transform: translateX(100%);
}

/* Primary */
.tbx-search-btn--primary {
    background: linear-gradient(145deg, #00A87F 0%, #009370 100%);
    color: #ffffff;
    box-shadow:
        0 4px 14px rgba(0, 168, 127, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.15);
    height: 48px;
}
.tbx-search-btn--primary:hover {
    background: linear-gradient(145deg, #00bd91 0%, #00A87F 100%);
    box-shadow:
        0 6px 22px rgba(0, 168, 127, 0.42),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-2px);
}
.tbx-search-btn--primary:active { transform: translateY(0); }
.tbx-search-btn--primary:disabled {
    background: #c2ddd7;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    color: #a0bdb7;
}

/* Reset */
.tbx-search-btn--reset {
    background: #f4faf8;
    color: #5a9e8c;
    border: 1.5px solid #d0ede5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tbx-search-btn--reset:hover {
    background: #fff2f2;
    color: #c0392b;
    border-color: #f5c6c6;
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.10);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   SEARCH RESULTS AREA
   ══════════════════════════════════════════════════════════════ */

.tbx-search-results {
    margin-bottom: 36px;
}

.tbx-search-results__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf8f4;
}

.tbx-search-results__title {
    font-family: var(--tbx-font);
    font-size: 1rem;
    font-weight: 700;
    color: #0a3326;
    margin: 0;
}

.tbx-search-results__count {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--tbx-accent);
    padding: 3px 11px;
    border-radius: 100px;
    letter-spacing: 0.2px;
}

.tbx-search-no-results {
    text-align: center;
    padding: 64px 24px;
    color: #8bbfb0;
    font-family: var(--tbx-font);
    font-size: 14px;
}

/* Spinner */
@keyframes tbx-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.fa-spin { animation: tbx-spin .7s linear infinite; }

/* No-image placeholder */
.tbx-tour-card__no-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 32px;
}




/* --- SỬA LỖI RESPONSIVE MOBILE CHO DANH MỤC TOUR --- */
@media screen and (max-width: 767px) {
    /* Đưa hệ thống lưới 3 cột về 1 cột */
    .tbx-tour-grid {
        display: grid !important;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 24px !important; /* Tạo khoảng cách dọc thoáng hơn giữa các tour */
        padding: 0 10px !important; /* Giữ khoảng cách lề hai bên màn hình */
    }

    /* Đảm bảo mỗi card tour chiếm trọn chiều ngang */
    .tbx-tour-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}