/* ==========================================================================
   Travel — giao diện khách
   --------------------------------------------------------------------------
   Mọi thứ scope dưới tiền tố .travel- để không đụng CSS của theme.
   Màu, bo góc, đổ bóng khai báo bằng biến để theme ghi đè được mà không
   phải sửa file này.
   ========================================================================== */

.travel-scope {
    --tv-brand: #e31837;
    --tv-brand-dark: #b3122b;
    --tv-brand-soft: #fdecef;
    /* Sắc sáng của thương hiệu — chỉ dùng cho dải gradient hộp giá.
       AssetService::brandStyle() tính lại theo màu chủ đạo của site. */
    --tv-brand-2: #ff4d4d;
    --tv-accent: #f57c00;
    --tv-ink: #14181f;
    --tv-body: #4a5260;
    --tv-muted: #8b93a1;
    --tv-line: #e8eaef;
    --tv-bg: #f5f6f8;
    --tv-white: #fff;
    --tv-ok: #1b7f4d;
    --tv-radius: 14px;
    --tv-radius-sm: 8px;
    --tv-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --tv-shadow-lg: 0 4px 12px rgba(16, 24, 40, .08), 0 20px 48px rgba(16, 24, 40, .10);

    color: var(--tv-body);
    font-size: 15px;
    line-height: 1.6;
}

.travel-scope *,
.travel-scope *::before,
.travel-scope *::after {
    box-sizing: border-box;
}

.travel-scope h1,
.travel-scope h2,
.travel-scope h3,
.travel-scope h4 {
    color: var(--tv-ink);
    margin: 0 0 10px;
    line-height: 1.3;
}

.travel-scope a {
    color: inherit;
    text-decoration: none;
}

.travel-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* --------------------------------------------------------------------------
   Nút
   -------------------------------------------------------------------------- */

.travel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: var(--tv-white);
    color: var(--tv-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all .18s ease;
    font-family: inherit;
}

.travel-scope .travel-btn {
    color: var(--tv-ink);
}

.travel-scope .travel-btn:hover {
    border-color: var(--tv-brand);
    color: var(--tv-brand);
}

/* Chọn kèm .travel-scope: nút thường là thẻ <a>, mà quy tắc
   `.travel-scope a { color: inherit }` ở trên có độ ưu tiên cao hơn
   `.travel-btn--primary` nên chữ trắng sẽ bị nuốt mất. */
.travel-scope .travel-btn--primary {
    background: var(--tv-brand);
    border-color: var(--tv-brand);
    color: var(--tv-white);
    box-shadow: 0 6px 16px rgba(227, 24, 55, .28);
}

.travel-scope .travel-btn--primary:hover {
    background: var(--tv-brand-dark);
    border-color: var(--tv-brand-dark);
    color: var(--tv-white);
}

.travel-btn--block {
    width: 100%;
}

.travel-btn--lg {
    padding: 14px 24px;
    font-size: 16px;
}

.travel-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Field
   -------------------------------------------------------------------------- */

.travel-field {
    margin-bottom: 14px;
}

.travel-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-ink);
}

.travel-field input,
.travel-field select,
.travel-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    background: var(--tv-white);
    font-size: 14px;
    font-family: inherit;
    color: var(--tv-ink);
    transition: border-color .15s, box-shadow .15s;
}

.travel-field input:focus,
.travel-field select:focus,
.travel-field textarea:focus {
    outline: 0;
    border-color: var(--tv-brand);
    box-shadow: 0 0 0 3px var(--tv-brand-soft);
}

.travel-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
}

.travel-field-row > .travel-field {
    flex: 1 1 210px;
}

.travel-hint {
    font-size: 13px;
    color: var(--tv-muted);
}

.travel-alert {
    padding: 12px 16px;
    border-radius: var(--tv-radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
}

.travel-alert--error {
    background: var(--tv-brand-soft);
    color: var(--tv-brand-dark);
}

/* --------------------------------------------------------------------------
   Ảnh & ảnh giữ chỗ
   --------------------------------------------------------------------------
   Site chưa có ảnh thì vẫn phải trông có chủ đích: dùng nền gradient theo
   điểm đến thay vì để khung ảnh vỡ.
   -------------------------------------------------------------------------- */

.travel-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--tv-bg);
}

.travel-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.travel-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    text-align: center;
    padding: 12px;
}

.travel-ph__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

.travel-ph__sub {
    font-size: 12px;
    opacity: .85;
}

.travel-ph--0 { background: linear-gradient(135deg, #1e88e5, #26c6da); }
.travel-ph--1 { background: linear-gradient(135deg, #ef6c00, #f9a825); }
.travel-ph--2 { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.travel-ph--3 { background: linear-gradient(135deg, #6a1b9a, #ab47bc); }
.travel-ph--4 { background: linear-gradient(135deg, #c62828, #ef5350); }
.travel-ph--5 { background: linear-gradient(135deg, #00695c, #26a69a); }

/* --------------------------------------------------------------------------
   Hộp tìm kiếm
   -------------------------------------------------------------------------- */

.travel-hero {
    background: linear-gradient(135deg, #16233a 0%, #23364f 60%, #2b4a63 100%);
    padding: 34px 0 64px;
    color: #fff;
}

/* Bản không còn hộp tìm kiếm bên trong */
.travel-hero--slim {
    padding: 30px 0 32px;
    margin-bottom: 20px;
}

/* Chọn kèm .travel-scope để thắng quy tắc `.travel-scope h1` phía trên —
   nếu không tiêu đề sẽ ăn màu chữ tối và chìm vào nền hero. */
.travel-scope .travel-hero__title {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 4px;
}

.travel-scope .travel-hero__sub {
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
    margin: 0;
}

.travel-searchbox {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow-lg);
}

.travel-hero .travel-searchbox {
    margin-top: 22px;
    margin-bottom: -52px;
}

.travel-searchbox__field {
    flex: 1 1 190px;
    min-width: 0;
}

.travel-searchbox__field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--tv-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.travel-searchbox__field input,
.travel-searchbox__field select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--tv-ink);
    background: var(--tv-white);
}

.travel-searchbox__field input:focus,
.travel-searchbox__field select:focus {
    outline: 0;
    border-color: var(--tv-brand);
    box-shadow: 0 0 0 3px var(--tv-brand-soft);
}

.travel-searchbox button {
    flex: 0 0 auto;
    height: 43px;
}

/* --------------------------------------------------------------------------
   Trang danh sách
   -------------------------------------------------------------------------- */

.travel-listing {
    padding: 78px 0 48px;
    background: var(--tv-bg);
}

.travel-listing__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

.travel-listing__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.travel-listing__count {
    font-size: 14px;
    color: var(--tv-muted);
}

.travel-listing__count strong {
    color: var(--tv-brand);
}

.travel-listing__intro {
    margin: 6px 0 18px;
    color: var(--tv-body);
    max-width: 70ch;
}

.travel-listing__body {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 18px;
}

/* Bộ lọc */
.travel-filters {
    position: sticky;
    top: 16px;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    overflow: hidden;
}

.travel-filters__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--tv-line);
    font-weight: 700;
    color: var(--tv-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.travel-filters__reset {
    font-size: 13px;
    font-weight: 500;
    color: var(--tv-muted);
}

.travel-filters__reset:hover {
    color: var(--tv-brand);
}

.travel-filters__group {
    padding: 14px 18px;
    border-bottom: 1px solid var(--tv-line);
}

.travel-filters__group:last-of-type {
    border-bottom: 0;
}

.travel-filters__group h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--tv-muted);
    margin: 0 0 10px;
}

.travel-filters__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 14px;
    cursor: pointer;
    color: var(--tv-body);
}

.travel-filters__item:hover {
    color: var(--tv-brand);
}

.travel-filters__item input {
    width: 16px;
    height: 16px;
    accent-color: var(--tv-brand);
    flex: 0 0 auto;
}

.travel-filters__sheet-head {
    display: none;
}

.travel-filters__overlay {
    display: none;
}

@media (max-width: 767px) {
    .travel-filters__sheet-head {
        display: flex;
    }

    .travel-filters__overlay:not([hidden]) {
        display: block;
    }
}

.travel-filters__date {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    background: var(--tv-white);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--tv-ink);
}

.travel-filters__destinations + .travel-filters__destinations {
    margin-top: 0;
}

.travel-scope .travel-filters__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
}

.travel-scope .travel-filters__more:hover {
    text-decoration: underline;
}

@media (min-width: 768px) {
    /* Desktop tự lọc khi đổi điều kiện — nút chỉ dành cho mobile */
    .travel-filters__apply {
        display: none;
    }
}

.travel-filters__apply {
    padding: 14px 18px;
}

/* Thanh sắp xếp */
.travel-results__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.travel-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--tv-muted);
}

.travel-sort select {
    padding: 8px 12px;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: var(--tv-white);
    font-size: 14px;
    font-family: inherit;
    color: var(--tv-ink);
    cursor: pointer;
}

/* Thẻ tour */
.travel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 20px;
}

.travel-card {
    display: flex;
    flex-direction: column;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    overflow: hidden;
    box-shadow: var(--tv-shadow);
    border: 1px solid var(--tv-line);
    transition: transform .2s ease, box-shadow .2s ease;
}

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

.travel-card:hover .travel-thumb img {
    transform: scale(1.06);
}

.travel-card__thumb {
    aspect-ratio: 16 / 10;
}

/* Badge sự kiện / khuyến mãi — góc trái trên ảnh, tông cam kiểu saigontourist */
.travel-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px 12px;
    border-radius: 0 0 10px 0;
    background: #f97316;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Pill thời lượng nền trắng — góc phải dưới của ảnh */
.travel-card__duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--tv-ink);
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.travel-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 16px 0;
}

/* Chip điểm đến (xanh nhạt) + chip cảnh báo sắp hết chỗ (cam) */
.travel-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.travel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eaf2fe;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.travel-tag--hot {
    background: #fff1e5;
    color: #c2540a;
}

.travel-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.42;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 45px;
}

.travel-card__title a:hover {
    color: var(--tv-brand);
}

/* Hàng thông tin: khởi hành từ / phương tiện / ngày + sao */
.travel-card__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.travel-card__meta-row {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tv-body);
}

.travel-card__meta-row i {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 3px;
    color: var(--tv-muted);
    font-size: 12px;
}

.travel-card__meta-row strong {
    color: var(--tv-ink);
}

.travel-card__meta-row--transport,
.travel-card__meta-row--transport i {
    color: #2563eb;
}

.travel-card__meta-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.travel-date-chip {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--tv-line);
    border-radius: 6px;
    background: var(--tv-white);
    font-size: 11px;
    font-weight: 600;
    color: var(--tv-ink);
}

.travel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.travel-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--tv-bg);
    font-size: 12px;
    color: var(--tv-body);
    white-space: nowrap;
}

.travel-chip i {
    color: var(--tv-muted);
    font-size: 11px;
}

.travel-chip--warn {
    background: #fff4e5;
    color: #a35200;
}

.travel-chip--warn i {
    color: #d97706;
}

.travel-card__rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--tv-muted);
    margin-bottom: 8px;
}

.travel-card__rating b {
    color: var(--tv-ink);
}

.travel-card__rating .travel-stars {
    color: #f5a623;
}

/* Footer nền xám tách khỏi thân card — kiểu saigontourist */
.travel-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: auto -16px 0;
    padding: 12px 16px;
    background: var(--tv-bg);
    border-top: 1px solid var(--tv-line);
}

.travel-price__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--tv-muted);
}

.travel-price__old {
    display: inline-block;
    font-size: 12px;
    color: var(--tv-muted);
    text-decoration: line-through;
    margin-right: 6px;
}

.travel-price__now {
    display: inline-block;
    font-size: 19px;
    font-weight: 800;
    color: var(--tv-brand);
    line-height: 1.2;
}

.travel-price--contact {
    font-size: 14px;
    font-weight: 600;
    color: var(--tv-body);
}

.travel-card__cta {
    flex: 0 0 auto;
    padding: 9px 18px;
    font-size: 13px;
    border-radius: 999px;
}

@media (max-width: 640px) {
    .travel-card__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .travel-card__cta {
        text-align: center;
    }
}

.travel-empty {
    padding: 56px 20px;
    text-align: center;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
}

.travel-empty h3 {
    font-size: 18px;
}

.travel-empty p {
    color: var(--tv-muted);
    margin-bottom: 16px;
}

.travel-listing__seo {
    margin-top: 32px;
    padding: 22px 24px;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Trang chi tiết
   -------------------------------------------------------------------------- */

.travel-detail {
    background: var(--tv-bg);
    padding-bottom: 48px;
}

.travel-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0;
    font-size: 13px;
    color: var(--tv-muted);
}

.travel-breadcrumb a:hover {
    color: var(--tv-brand);
}

.travel-detail__hero {
    position: relative;
    aspect-ratio: 21 / 8;
    border-radius: var(--tv-radius);
    overflow: hidden;
    box-shadow: var(--tv-shadow);
    background: var(--tv-white);
}

.travel-detail__head {
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    padding: 20px 24px;
    margin-top: 18px;
}

.travel-detail__title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
}

.travel-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tv-line);
}

.travel-fact {
    display: flex;
    align-items: center;
    gap: 10px;
}

.travel-fact__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tv-brand-soft);
    color: var(--tv-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.travel-fact__label {
    display: block;
    font-size: 12px;
    color: var(--tv-muted);
}

.travel-fact__value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--tv-ink);
}

.travel-detail__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 348px;
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}

/* Tab dính */
.travel-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 0;
    margin-bottom: 4px;
    background: var(--tv-bg);
    scrollbar-width: none;
}

.travel-tabs::-webkit-scrollbar {
    display: none;
}

.travel-tabs a {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--tv-white);
    font-size: 14px;
    font-weight: 600;
    color: var(--tv-body);
    border: 1px solid var(--tv-line);
    transition: all .15s;
}

.travel-tabs a:hover {
    border-color: var(--tv-brand);
    color: var(--tv-brand);
}

.travel-tabs a.is-active {
    background: var(--tv-brand);
    border-color: var(--tv-brand);
    color: #fff;
}

.travel-panel {
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    padding: 22px 24px;
    margin-bottom: 18px;
    scroll-margin-top: 70px;
}

.travel-panel > h2 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tv-line);
}

.travel-panel h3 {
    font-size: 16px;
    margin-top: 18px;
}

.travel-prose p {
    margin: 0 0 12px;
}

.travel-prose ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.travel-prose li {
    margin-bottom: 6px;
}

/* Lịch trình */
.travel-timeline {
    position: relative;
    padding-left: 34px;
}

.travel-timeline::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--tv-line);
}

.travel-day {
    position: relative;
    padding: 0 0 18px;
}

.travel-day:last-child {
    padding-bottom: 0;
}

.travel-day summary > span:last-child {
    flex: 1;
}

.travel-day__dot {
    position: absolute;
    left: -34px;
    top: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tv-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--tv-white);
}

.travel-day summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--tv-ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.travel-day summary::-webkit-details-marker {
    display: none;
}

.travel-day summary::after {
    content: '⌄';
    flex: 0 0 auto;
    color: var(--tv-muted);
    font-size: 18px;
    line-height: 1;
    transition: transform .2s;
}

.travel-day[open] summary::after {
    transform: rotate(180deg);
}

.travel-day__content {
    padding-top: 8px;
    color: var(--tv-body);
}

.travel-day__meals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Bao gồm / không bao gồm */
.travel-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.travel-split__col h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin: 0 0 10px;
}

.travel-split__col--in h3 { color: var(--tv-ok); }
.travel-split__col--out h3 { color: var(--tv-brand); }

.travel-split__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.travel-split__col li {
    position: relative;
    padding: 5px 0 5px 24px;
    font-size: 14px;
}

.travel-split__col li::before {
    position: absolute;
    left: 0;
    top: 5px;
    font-weight: 700;
}

.travel-split__col--in li::before {
    content: '✓';
    color: var(--tv-ok);
}

.travel-split__col--out li::before {
    content: '✕';
    color: var(--tv-brand);
}

/* FAQ */
.travel-faq {
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.travel-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--tv-ink);
    list-style: none;
}

.travel-faq summary::-webkit-details-marker {
    display: none;
}

.travel-faq[open] summary {
    color: var(--tv-brand);
    margin-bottom: 8px;
}

/* Đánh giá */
.travel-stars {
    color: #f5a623;
    letter-spacing: 1px;
}

/* Dải sao theo tỷ lệ: lớp phủ màu cắt theo width, nền là sao xám */
.travel-starbar {
    position: relative;
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    color: #e2e5ea;
    letter-spacing: 2px;
    white-space: nowrap;
}

.travel-starbar > i {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: #f5a623;
    font-style: normal;
    letter-spacing: 2px;
}

.travel-starbar--sm {
    font-size: 13px;
    letter-spacing: 1px;
}

.travel-starbar--sm > i {
    letter-spacing: 1px;
}

/* Khối tổng quan: điểm lớn bên trái + thanh phân bố sao bên phải */
.travel-rv-summary {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px 22px;
    background: linear-gradient(135deg, var(--tv-bg) 0%, var(--tv-brand-soft) 130%);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius, 12px);
    margin-bottom: 20px;
}

.travel-rv-summary__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding-right: 20px;
    border-right: 1px solid var(--tv-line);
}

.travel-rv-summary__score strong {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: var(--tv-ink);
}

.travel-rv-summary__score em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--tv-muted);
    text-align: center;
}

.travel-rv-summary__bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.travel-rv-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.travel-rv-bar__label {
    width: 36px;
    color: var(--tv-muted);
    font-weight: 600;
    white-space: nowrap;
}

.travel-rv-bar__label i {
    color: #f5a623;
    font-style: normal;
}

.travel-rv-bar__track {
    flex: 1;
    height: 8px;
    background: var(--tv-white);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--tv-line);
}

.travel-rv-bar__track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #f7b733, #f5a623);
    border-radius: 999px;
}

.travel-rv-bar__count {
    width: 26px;
    text-align: right;
    color: var(--tv-muted);
    font-variant-numeric: tabular-nums;
}

/* Danh sách đánh giá */
.travel-rv {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--tv-line);
}

.travel-rv:last-child {
    border-bottom: 0;
}

.travel-rv__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
}

.travel-rv__avatar--0 { background: linear-gradient(135deg, #667eea, #764ba2); }
.travel-rv__avatar--1 { background: linear-gradient(135deg, #f0876d, #d64550); }
.travel-rv__avatar--2 { background: linear-gradient(135deg, #34b3a0, #0e7f6f); }
.travel-rv__avatar--3 { background: linear-gradient(135deg, #f2a65a, #cf7233); }
.travel-rv__avatar--4 { background: linear-gradient(135deg, #5b9df9, #2f6fd8); }
.travel-rv__avatar--5 { background: linear-gradient(135deg, #b06ce0, #7e3fb8); }

.travel-rv__body {
    flex: 1;
    min-width: 0;
}

.travel-rv__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.travel-rv__meta strong {
    font-size: 15px;
    color: var(--tv-ink);
}

.travel-rv__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #e7f6ed;
    color: var(--tv-ok);
    font-size: 11.5px;
    font-weight: 600;
}

.travel-rv__sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
}

.travel-rv__sub time {
    font-size: 12.5px;
    color: var(--tv-muted);
}

.travel-rv__body h4 {
    margin: 0 0 4px;
    font-size: 14.5px;
}

.travel-rv__body > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

.travel-rv__reply {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--tv-bg);
    border-left: 3px solid var(--tv-brand);
    border-radius: 0 var(--tv-radius-sm) var(--tv-radius-sm) 0;
    font-size: 13.5px;
}

.travel-rv__reply strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12.5px;
    color: var(--tv-brand);
}

.travel-rv__reply p {
    margin: 0;
}

.travel-rv-empty {
    text-align: center;
    padding: 30px 16px;
    border: 1px dashed var(--tv-line);
    border-radius: var(--tv-radius, 12px);
    color: var(--tv-muted);
}

.travel-rv-empty i {
    display: block;
    font-size: 30px;
    color: var(--tv-brand);
    margin-bottom: 10px;
}

.travel-rv-empty p {
    margin: 0;
}

@media (max-width: 640px) {
    .travel-rv-summary {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .travel-rv-summary__score {
        padding: 0 0 14px;
        border-right: 0;
        border-bottom: 1px solid var(--tv-line);
    }
}

/* --------------------------------------------------------------------------
   Hộp đặt tour
   -------------------------------------------------------------------------- */

.travel-booking {
    position: sticky;
    top: 16px;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow-lg);
    overflow: hidden;
}

.travel-booking__price {
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--tv-brand) 0%, var(--tv-brand-2) 100%);
    color: #fff;
}

.travel-booking__price span {
    display: block;
    font-size: 13px;
    opacity: .9;
}

.travel-booking__price del {
    font-size: 14px;
    opacity: .78;
}

.travel-booking__price strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

.travel-booking__body {
    padding: 18px 20px 20px;
}

.travel-booking__field {
    margin-bottom: 16px;
}

.travel-booking__field > label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tv-ink);
    margin-bottom: 8px;
}

/* Chọn ngày khởi hành dạng thẻ */
.travel-departures {
    display: grid;
    gap: 8px;
    max-height: 232px;
    overflow-y: auto;
    padding-right: 4px;
}

.travel-departures__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 10px 12px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    cursor: pointer;
    transition: all .15s;
}

.travel-departures__item:hover {
    border-color: var(--tv-brand);
}

.travel-departures__item input {
    display: none;
}

.travel-departures__item:has(input:checked) {
    border-color: var(--tv-brand);
    background: var(--tv-brand-soft);
}

.travel-departures__date {
    font-size: 14px;
    font-weight: 700;
    color: var(--tv-ink);
}

.travel-departures__price {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: var(--tv-brand);
}

.travel-departures__seat {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--tv-muted);
}

.travel-departures__item.is-low .travel-departures__seat {
    color: #d97706;
    font-weight: 600;
}

/* Bộ đếm số khách */
.travel-pax {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--tv-line);
}

.travel-pax:last-child {
    border-bottom: 0;
}

.travel-pax__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tv-ink);
}

.travel-pax__label small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--tv-muted);
}

.travel-pax__control {
    display: flex;
    align-items: center;
    gap: 4px;
}

.travel-pax__control button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--tv-line);
    border-radius: 50%;
    background: var(--tv-white);
    color: var(--tv-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: all .15s;
}

.travel-pax__control button:hover {
    border-color: var(--tv-brand);
    color: var(--tv-brand);
}

.travel-pax__control input {
    width: 40px;
    padding: 5px;
    border: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--tv-ink);
    background: transparent;
}

.travel-service {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: 14px;
    cursor: pointer;
}

.travel-service input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--tv-brand);
}

/* Nhãn phải chiếm hết khoảng trống thì giá mới bị đẩy sang phải */
.travel-service > span {
    flex: 1;
    min-width: 0;
}

.travel-service em {
    margin-left: auto;
    font-style: normal;
    font-weight: 600;
    color: var(--tv-body);
    white-space: nowrap;
}

.travel-booking__coupon {
    display: flex;
    gap: 8px;
}

.travel-booking__coupon input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px dashed var(--tv-line);
    border-radius: var(--tv-radius-sm);
    font-family: inherit;
    font-size: 14px;
}

/* Bảng bóc tách giá */
.travel-summary__lines {
    font-size: 14px;
}

.travel-summary__lines > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.travel-summary__lines .is-total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--tv-line);
    font-size: 16px;
}

.travel-summary__lines .is-total strong {
    color: var(--tv-brand);
    font-size: 20px;
    font-weight: 800;
}

.travel-summary__lines .is-discount strong {
    color: var(--tv-ok);
}

.travel-summary__lines .is-deposit {
    color: var(--tv-muted);
}

.travel-summary__lines .is-error {
    color: var(--tv-brand-dark);
    font-size: 13px;
    padding-top: 6px;
}

.travel-booking__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--tv-muted);
    text-align: center;
}

.travel-booking__empty {
    padding: 26px 20px;
    text-align: center;
    color: var(--tv-muted);
}

/* --------------------------------------------------------------------------
   Trang đặt tour
   -------------------------------------------------------------------------- */

.travel-checkout {
    background: var(--tv-bg);
    padding: 24px 0 48px;
}

.travel-steps {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    counter-reset: step;
}

.travel-steps li {
    position: relative;
    flex: 1;
    padding-top: 40px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-muted);
    counter-increment: step;
}

.travel-steps li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--tv-line);
    background: var(--tv-white);
    color: var(--tv-muted);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.travel-steps li::after {
    content: '';
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--tv-line);
    z-index: 1;
}

.travel-steps li:first-child::after {
    display: none;
}

.travel-steps li.is-active {
    color: var(--tv-brand);
}

.travel-steps li.is-active::before {
    border-color: var(--tv-brand);
    background: var(--tv-brand);
    color: #fff;
}

.travel-steps li.is-done {
    color: var(--tv-ok);
}

.travel-steps li.is-done::before {
    content: '✓';
    border-color: var(--tv-ok);
    background: var(--tv-ok);
    color: #fff;
}

.travel-steps li.is-done::after {
    background: var(--tv-ok);
}

.travel-checkout__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.travel-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    margin-bottom: 18px;
    border-radius: var(--tv-radius);
    background: #fff8e6;
    border: 1px solid #ffe2a8;
    color: #92620a;
    font-size: 14px;
}

.travel-countdown strong {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #92620a;
}

.travel-countdown.is-expired {
    background: var(--tv-brand-soft);
    border-color: #f6c9d0;
    color: var(--tv-brand-dark);
}

.travel-passenger {
    padding: 16px;
    margin-top: 14px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    background: #fcfcfd;
}

.travel-passenger h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin: 0 0 12px;
}

.travel-passenger__no {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tv-brand-soft);
    color: var(--tv-brand);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.travel-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tv-ink);
    cursor: pointer;
}

.travel-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--tv-brand);
}

/* Chọn hình thức thanh toán */
.travel-methods {
    display: grid;
    gap: 10px;
}

.travel-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    cursor: pointer;
    transition: all .15s;
}

.travel-method:hover {
    border-color: var(--tv-brand);
}

.travel-method input {
    width: 18px;
    height: 18px;
    accent-color: var(--tv-brand);
    flex: 0 0 auto;
}

.travel-method:has(input:checked) {
    border-color: var(--tv-brand);
    background: var(--tv-brand-soft);
}

.travel-method__name {
    font-weight: 600;
    color: var(--tv-ink);
}

/* QR bên trái, thông tin tài khoản bên phải. Trên điện thoại QR lên trên —
   phần lớn khách quét bằng chính máy đang xem thì không quét được, họ chụp
   màn hình hoặc cầm máy khác, nên QR phải to và ở vị trí dễ thấy nhất. */
.travel-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

/* Nhiều tài khoản: mỗi tài khoản là một khối, kẻ vạch ngăn để khách không đọc
   nhầm số tài khoản của khối này với ngân hàng của khối kia. */
.travel-bank + .travel-bank {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--tv-line);
}

.travel-bank__choose {
    margin: 12px 0 0;
    color: var(--tv-muted);
    font-size: 14px;
}

.travel-bank__qr {
    flex: 0 0 auto;
    width: 260px;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    background: var(--tv-white);
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    text-align: center;
}

.travel-bank__qr img {
    display: block;
    width: 100%;
    height: auto;
}

.travel-bank__qr figcaption {
    margin-top: 8px;
    color: var(--tv-muted);
    font-size: 13px;
    line-height: 1.5;
}

.travel-bank__detail {
    flex: 1 1 260px;
    min-width: 0;
}

.travel-bank__lines {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.travel-bank__lines:first-child {
    margin-top: 0;
}

.travel-bank__lines li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--tv-line);
}

.travel-bank__lines li > span {
    color: var(--tv-muted);
}

/* Số tài khoản và nội dung chuyển khoản là thứ khách bôi đen để copy —
   không cho ngắt dòng giữa chừng và cho chọn được cả cụm. */
.travel-bank__lines li > strong {
    text-align: right;
    word-break: break-word;
}

.travel-bank__info {
    padding: 12px 14px;
    background: var(--tv-bg);
    border-radius: var(--tv-radius-sm);
}

/* Tóm tắt bên phải */
.travel-summary {
    position: sticky;
    top: 16px;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    overflow: hidden;
}

.travel-summary__thumb {
    aspect-ratio: 16 / 9;
}

.travel-summary__body {
    padding: 16px 18px 18px;
}

.travel-summary__body h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.travel-summary__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    font-size: 14px;
}

.travel-summary__meta li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--tv-line);
    color: var(--tv-muted);
}

.travel-summary__meta li strong {
    color: var(--tv-ink);
    text-align: right;
}

/* --------------------------------------------------------------------------
   Trang hoàn tất & tra cứu
   -------------------------------------------------------------------------- */

.travel-success {
    background: var(--tv-bg);
    padding: 34px 0 56px;
}

.travel-success__card {
    max-width: 680px;
    margin: 0 auto 18px;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    padding: 34px 30px;
    text-align: center;
}

.travel-success__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #e7f6ed;
    color: var(--tv-ok);
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(27, 127, 77, .08);
}

.travel-success__card h1 {
    font-size: 24px;
    font-weight: 800;
}

.travel-success__card > p {
    color: var(--tv-muted);
    margin: 0 0 18px;
}

.travel-success__code {
    display: inline-block;
    padding: 12px 26px;
    border: 2px dashed var(--tv-line);
    border-radius: var(--tv-radius);
    background: var(--tv-bg);
}

.travel-success__code span {
    display: block;
    font-size: 12px;
    color: var(--tv-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.travel-success__code strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--tv-ink);
}

.travel-success__grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.travel-next {
    list-style: none;
    counter-reset: nx;
    padding: 0;
    margin: 0;
}

.travel-next li {
    position: relative;
    counter-increment: nx;
    padding: 0 0 16px 40px;
    font-size: 14px;
}

.travel-next li:last-child {
    padding-bottom: 0;
}

.travel-next li::before {
    content: counter(nx);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tv-brand-soft);
    color: var(--tv-brand);
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.travel-next li::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 2px;
    width: 1px;
    background: var(--tv-line);
}

.travel-next li:last-child::after {
    display: none;
}

.travel-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    justify-content: center;
}

.travel-track {
    background: var(--tv-bg);
    padding: 28px 0 48px;
}

.travel-track__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    align-items: flex-end;
    background: var(--tv-white);
    padding: 18px 20px;
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    margin-bottom: 20px;
}

.travel-track__form .travel-field {
    flex: 1 1 220px;
}

.travel-passenger-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.travel-passenger-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--tv-line);
    font-size: 14px;
}

.travel-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--tv-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--tv-body);
}

.travel-tag--ok { background: #e7f6ed; color: var(--tv-ok); }
.travel-tag--warn { background: #fff4e5; color: #a35200; }

/* Tài khoản */
.travel-account {
    background: var(--tv-bg);
    padding: 28px 0 48px;
}

.travel-account__item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 180px;
    gap: 18px;
    padding: 16px;
    margin-bottom: 14px;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
}

.travel-account__thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--tv-radius-sm);
}

.travel-account__side {
    text-align: right;
}

.travel-account__side strong {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--tv-brand);
}

.travel-account__side small {
    display: block;
    color: var(--tv-muted);
    font-size: 12px;
    margin-bottom: 10px;
}

/* Phân trang của CMS nằm trong vùng plugin */
.travel-scope .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
}

.travel-scope .pagination a,
.travel-scope .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius-sm);
    background: var(--tv-white);
    font-size: 14px;
    font-weight: 600;
}

.travel-scope .pagination .active a,
.travel-scope .pagination .active span {
    background: var(--tv-brand);
    border-color: var(--tv-brand);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .travel-listing__body,
    .travel-detail__body,
    .travel-checkout__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .travel-filters,
    .travel-booking,
    .travel-summary {
        position: static;
    }

    .travel-detail__hero {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {

    .travel-hero {
        padding: 24px 0 56px;
    }

    .travel-hero__title {
        font-size: 22px;
    }

    .travel-searchbox button {
        width: 100%;
    }

    .travel-listing {
        padding-top: 70px;
    }

    .travel-detail__title {
        font-size: 21px;
    }

    .travel-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .travel-card__title {
        font-size: 14px;
        min-height: 40px;
    }

    .travel-price__now {
        font-size: 16px;
    }

    /* Footer card đã xếp dọc nên đủ chỗ cho nút — chỉ thu nhỏ lại */
    .travel-card__cta {
        padding: 8px 12px;
        font-size: 12.5px;
    }

    .travel-account__item {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .travel-account__side {
        grid-column: 1 / -1;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .travel-account__side small {
        margin-bottom: 0;
    }

    /* Hộp đặt tour thành thanh dính đáy: nút đặt phải luôn trong tầm ngón tay */
    .travel-booking {
        border-radius: var(--tv-radius) var(--tv-radius) 0 0;
    }

    .travel-steps li {
        font-size: 11px;
    }

    .travel-panel {
        padding: 18px 16px;
    }
}

/* ------------------------------------------------------------------
   Trang trung gian chuyển sang cổng thanh toán
   ------------------------------------------------------------------ */
.travel-scope .travel-redirect {
    max-width: 520px;
    margin: 0 auto;
    padding: 72px 24px;
    text-align: center;
}

.travel-scope .travel-redirect__spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 24px;
    border: 4px solid var(--tv-line, #e6e8ec);
    border-top-color: var(--tv-primary, #e11d48);
    border-radius: 50%;
    animation: travelSpin .8s linear infinite;
}

@keyframes travelSpin {
    to { transform: rotate(360deg); }
}

.travel-scope .travel-redirect__title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.travel-scope .travel-redirect__note {
    margin: 0 0 24px;
    color: var(--tv-muted, #6b7280);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Form gửi đánh giá (trang chi tiết tour)
   -------------------------------------------------------------------------- */

.travel-review-form {
    margin-top: 26px;
    padding: 22px;
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius, 12px);
    background: var(--tv-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.travel-review-form h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.travel-review-form h3 i {
    color: var(--tv-brand);
}

.travel-review-form__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--tv-bg);
    border-radius: var(--tv-radius-sm, 8px);
}

.travel-review-form__rating > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-ink);
}

.travel-review-form__rating > b {
    font-size: 13px;
    color: #f5a623;
}

/* Chọn sao: xếp ngược (5 → 1) để selector "~" tô được các sao BÊN PHẢI
   khi hover/chọn — trick chuẩn của rate picker thuần CSS */
.travel-rate-picker {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 3px;
}

.travel-rate-picker input {
    display: none;
}

.travel-rate-picker label {
    font-size: 30px;
    line-height: 1;
    color: #dfe3e8;
    cursor: pointer;
    transition: color .15s, transform .15s;
}

.travel-rate-picker label:hover {
    transform: scale(1.15);
}

.travel-rate-picker input:checked ~ label,
.travel-rate-picker label:hover,
.travel-rate-picker label:hover ~ label {
    color: #f5a623;
}

.travel-review-form__verify {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px dashed var(--tv-line);
    border-radius: var(--tv-radius-sm, 8px);
    background: var(--tv-bg);
}

.travel-review-form__verify > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-brand);
    list-style: none;
}

.travel-review-form__verify > summary::-webkit-details-marker {
    display: none;
}

.travel-review-form__verify[open] > summary {
    margin-bottom: 8px;
}

.travel-review-form__verify .travel-hint {
    margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   Album ảnh tour (trang chi tiết)
   -------------------------------------------------------------------------- */

.travel-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.travel-gallery__thumb {
    width: 86px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--tv-radius-sm, 8px);
    overflow: hidden;
    cursor: pointer;
    background: var(--tv-bg);
    opacity: .75;
    transition: opacity .15s, border-color .15s;
}

.travel-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.travel-gallery__thumb:hover {
    opacity: 1;
}

.travel-gallery__thumb.is-active {
    opacity: 1;
    border-color: var(--tv-brand);
}

@media (max-width: 640px) {
    .travel-gallery__thumb {
        width: 64px;
        height: 46px;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

/* Lối tắt "Đặt tour" dưới khối thông tin — chỉ hiện trên mobile */
.travel-detail__cta-mobile {
    display: none;
}

@media (max-width: 767px) {
    .travel-detail__cta-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 14px;
        padding: 13px 16px;
        font-size: 15px;
    }

    /* Bộ lọc mobile: bấm thanh "Bộ lọc" mở bottom sheet từ dưới lên,
       nút lọc cố định dưới đáy sheet (khuôn plugin products-filters) */
    .travel-filters__head {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        margin-bottom: 0;
    }

    .travel-filters form {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10010;
        display: flex;
        flex-direction: column;
        max-height: 84vh;
        background: var(--tv-white);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, .18);
        transform: translateY(105%);
        transition: transform .3s ease;
        visibility: hidden;
    }

    .travel-filters.is-open form {
        transform: translateY(0);
        visibility: visible;
    }

    .travel-filters__sheet-head {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 0 0 auto;
        padding: 14px 16px;
        border-bottom: 1px solid var(--tv-line);
        font-weight: 700;
        color: var(--tv-ink);
    }

    .travel-filters__sheet-close {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: var(--tv-bg);
        color: var(--tv-ink);
        font-size: 15px;
        cursor: pointer;
    }

    .travel-filters__body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 4px 16px 10px;
        -webkit-overflow-scrolling: touch;
    }

    .travel-filters__apply {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--tv-line);
        background: var(--tv-white);
    }
}

/* --------------------------------------------------------------------------
   Khoảng cách giữa các cột builder của layout tour seed sẵn
   --------------------------------------------------------------------------
   Cột builder đặt cạnh nhau không có gutter; blade cố định thì tự có gap
   nên chỉ chèn đệm theo id cột của layout seed (không ảnh hưởng chế độ blade).
   Layout tự dựng lại trong builder thì chỉnh spacing ngay trong editor.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    #col_tour_index_filter {
        padding-right: 24px;
    }

    #col_tour_detail_tabs {
        padding-right: 28px;
    }
}

/* --------------------------------------------------------------------------
   Tour liên quan
   --------------------------------------------------------------------------
   Dùng lại nguyên .travel-card của lưới kết quả, chỉ thêm phần đầu dải và
   khoảng cách với khối phía trên. Bốn thẻ trên một hàng ở desktop — cùng số
   cột với lưới kết quả nên hai màn nhìn như một bộ.
   -------------------------------------------------------------------------- */

.travel-related {
    margin-top: 40px;
    padding-top: 34px;
    border-top: 1px solid var(--tv-line);
}

.travel-related__head {
    margin-bottom: 20px;
}

.travel-related__title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px;
}

.travel-related__sub {
    margin: 0;
    color: var(--tv-muted);
    font-size: 14px;
}

.travel-grid--related {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199px) {
    .travel-grid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .travel-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .travel-related      { margin-top: 28px; padding-top: 24px; }
    .travel-related__title { font-size: 20px; }
}