/* ============================================================
   Tầng token của storefront. Giá trị đo từ Figma OneLink `21:3063`.
   Tiền tố --k-site-* để không đụng --k-* của admin (kadmin.css).
   ============================================================ */

/* Cắt theo unicode-range để trang tiếng Việt chỉ tải latin + vietnamese */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Variable-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Variable-vietnamese.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Variable-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Italic-Variable-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Italic-Variable-vietnamese.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Italic-Variable-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --k-site-primary: #0aa3ed;
    --k-site-primary-soft: rgb(10 163 237 / 5%);
    --k-site-primary-border: rgb(10 163 237 / 25%);
    --k-site-brand-navy: #0c2340;
    --k-site-brand-navy-muted: #8fa3bc;
    --k-site-brand-gradient: linear-gradient(90deg, #1f4892, #32a6de);

    --k-site-ink: #111827;
    --k-site-ink-alt: #1b1c1f;
    --k-site-ink-strong: #000;
    --k-site-heading: #01071a;
    --k-site-heading-section: #010347;
    --k-site-body: #374151;
    --k-site-note: #5d606d;
    --k-site-muted: #6b7280;
    --k-site-sub-text: #607898;
    --k-site-muted-2: #737373;
    --k-site-muted-3: #6e6f73;
    --k-site-muted-soft: #9ca3af;
    --k-site-muted-4: #8b8d92;
    --k-site-ink-form: #1e1e1e;

    --k-site-star: #fda618;
    --k-site-success: #31d36c;
    --k-site-success-ink: #22ae55;
    --k-site-warning-ink: #d97706;
    --k-site-danger: #e5484d;

    --k-site-surface: #fff;
    --k-site-surface-footer: #f7f8fb;
    --k-site-surface-elevated: #f2f2f7;
    --k-site-surface-input: #f2f3f7;
    --k-site-surface-search: #f2fafe;
    --k-site-surface-panel: #f4f5f8;
    --k-site-track: #eff0f3;

    --k-site-border: #e5e7eb;
    --k-site-border-control: #b1b3bb;
    --k-site-border-card: #e4e6e8;
    --k-site-border-divider: #dadbdf;
    --k-site-border-header: rgb(0 0 0 / 5%);
    --k-site-border-overlay: rgb(27 28 31 / 50%);
    --k-site-scrim: rgb(0 0 0 / 85%);

    --k-site-radius-sm: 6px;
    --k-site-radius-md: 10px;
    --k-site-radius-lg: 12px;
    --k-site-radius-xl: 16px;
    --k-site-radius-full: 9999px;

    --k-site-shadow-panel: 0 10px 50px rgb(0 26 109 / 10%);
    --k-site-shadow-sm: 0 0 8px rgb(0 0 0 / 5%);
    --k-site-shadow-filter: 0 10px 25px rgb(0 26 109 / 10%);

    --k-site-container: 1240px;
    --k-site-gutter: 16px;
    /* Thanh tab đáy chỉ có ở mobile; các thanh dính khác vẫn cộng biến này nên nó phải có giá trị. */
    --k-site-tabbar-h: 0px;
    /* 1920 - 1652 = 268: đúng 1652 ở khổ thiết kế, màn hẹp hơn thì co lại mà vẫn ló hai bên. */
    --k-site-slide-width: min(1652px, calc(100vw - 268px));
    --k-site-slide-gap: 31px;
    --k-site-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --k-site-tracking: -0.03em;
}

/* Khổ mobile Figma 402: slide 346 ló 28 mỗi bên, gap 12; thanh tab 67 = 12 + 43 + 12. */
@media (max-width: 767.98px) {
    :root {
        --k-site-slide-width: calc(100vw - 56px);
        --k-site-slide-gap: 12px;
        --k-site-tabbar-h: calc(67px + env(safe-area-inset-bottom));
    }
}

/* ----- Reset ----- */

/* Đặt trên html vì đó mới là khối cuộn; ksite.css chỉ nạp ở storefront nên không đụng admin. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

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

.ksite {
    margin: 0;
    font-family: var(--k-site-font);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: var(--k-site-tracking);
    color: var(--k-site-ink);
    background: var(--k-site-surface);
    -webkit-font-smoothing: antialiased;
}

/* :where() để reset có specificity 0 — nếu không `.ksite button` sẽ thắng mọi rule một class
   và ăn mất nền của nút tìm kiếm, tab, nút điều khiển carousel. */
.ksite :where(img) {
    display: block;
    max-width: 100%;
}

.ksite :where(a) {
    color: inherit;
    text-decoration: none;
}

.ksite :where(button) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
}

.ksite :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Bỏ margin mặc định: trong lưới flex/grid margin của <p> cộng thêm vào chiều cao thẻ. */
.ksite :where(h1, h2, h3, p) {
    margin: 0;
}

.ksite :where(h1, h2, h3) {
    font-weight: 800;
}

.ksite :focus-visible {
    outline: 2px solid var(--k-site-primary);
    outline-offset: 2px;
}


/* Trừ dải dịch vụ: thiết kế để cả chín icon đủ màu, khác biệt nằm ở chỗ không bấm được. */
.ksite .ksite-service-rail__item[aria-disabled="true"] {
    opacity: 1;
}

/* max-width chứ không phải width: khổ thiết kế 1240 giữ nguyên ở màn rộng, màn hẹp thì co lại. */
.ksite-container {
    width: 100%;
    max-width: calc(var(--k-site-container) + 2 * var(--k-site-gutter));
    padding-inline: var(--k-site-gutter);
    margin-inline: auto;
}

.ksite-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ----- Header 1920×152 ----- */

.ksite-header {
    background: var(--k-site-surface);
    border-bottom: 1px solid var(--k-site-border-header);
}

.ksite-header__primary {
    display: flex;
    gap: 50px;
    align-items: center;
    height: 84px;
    padding-block: 12px;
}

.ksite-header__brand {
    flex-shrink: 0;
}

.ksite-header__brand img {
    width: 187px;
    height: 60px;
    object-fit: contain;
}

.ksite-header__search {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 410px;
    height: 48px;
    padding: 0 8px 0 20px;
    background: var(--k-site-surface-input);
    border-radius: var(--k-site-radius-full);
}

.ksite-header__search input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 14px;
    letter-spacing: inherit;
    color: var(--k-site-ink);
    background: none;
    border: 0;
}

.ksite-header__search input::placeholder {
    color: var(--k-site-muted);
}

.ksite-header__search button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--k-site-ink-alt);
    border-radius: var(--k-site-radius-full);
}

.ksite-header__account {
    display: flex;
    margin-left: auto;
}

/* Figma: icon nằm cạnh chữ theo hàng ngang (Link 95×52 [H gap=4]), không xếp chồng. */
.ksite-header__pill {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--k-site-ink-alt);
    border-radius: var(--k-site-radius-xl);
    cursor: pointer;
}

.ksite-header__pill:hover {
    color: var(--k-site-primary);
}

.ksite-header__pill-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
}

.ksite-header__badge {
    position: absolute;
    top: -6px;
    left: 10px;
    min-width: 16px;
    padding-inline: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    text-align: center;
    background: var(--k-site-primary);
    border-radius: var(--k-site-radius-full);
}

.ksite-header__secondary {
    display: flex;
    gap: 24px;
    align-items: center;
    height: 68px;
    padding-block: 6px;
}

.ksite-header__menu-button {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 56px;
    padding-inline: 16px;
    font-size: 16px;
    font-weight: 600;
    background: var(--k-site-surface-elevated);
    border-radius: var(--k-site-radius-lg);
}

.ksite-header__nav {
    display: flex;
    align-items: center;
    height: 56px;
}

.ksite-header__nav-divider {
    width: 1px;
    height: 20px;
    background: var(--k-site-border-divider);
}

.ksite-header__nav-link {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 56px;
    padding-inline: 20px;
    font-size: 16px;
    font-weight: 600;
}

.ksite-header__nav-link[aria-current="page"] {
    color: var(--k-site-primary);
    box-shadow: inset 0 -2px 0 var(--k-site-primary);
}

/* Header mobile 402×69: chỉ còn logo + ô tìm kiếm; hàng nav và mega menu nhường chỗ cho dải dịch
   vụ và thanh tab đáy. */
@media (max-width: 767.98px) {
    .ksite-header__primary {
        gap: 16px;
        height: 69px;
        padding-inline: 12px;
    }

    .ksite-header__brand img {
        width: 125px;
        height: 40px;
    }

    .ksite-header__search {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 45px;
        padding-inline: 12px;
    }

    .ksite-header__account,
    .ksite-header__secondary {
        display: none;
    }
}

/* ----- Mega menu danh mục ----- */

.ksite-megamenu {
    position: relative;
}

.ksite-megamenu__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: none;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 24px;
    padding: 24px;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-lg);
    box-shadow: var(--k-site-shadow-panel);
}

.ksite-megamenu[data-open="true"] .ksite-megamenu__panel {
    display: grid;
}

.ksite-megamenu__title {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--k-site-ink);
    text-decoration: none;
}

.ksite-megamenu__sub {
    display: block;
    padding-block: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--k-site-muted);
}

.ksite-megamenu__sub:hover {
    color: var(--k-site-primary);
}

/* ----- Tiêu đề section + nút xem tất cả ----- */

.ksite-section-heading {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding-block: 16px;
}

.ksite-section-heading__title {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 32px;
    font-weight: 800;
    line-height: 38.4px;
    color: var(--k-site-ink-strong);
}

.ksite-section-heading__link {
    display: flex;
    gap: 2px;
    align-items: center;
    padding-block: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--k-site-ink-alt);
}

/* Mobile: hàng tiêu đề 22px theo frame. "Xem tất cả" giữ ở đây thay vì nút dưới lưới — xem plan. */
@media (max-width: 767.98px) {
    .ksite-section-heading {
        height: auto;
        padding-block: 16px 12px;
    }

    .ksite-section-heading__title {
        gap: 6px;
        font-size: 18px;
        line-height: 22px;
    }

    .ksite-section-heading__link {
        flex-shrink: 0;
        padding-block: 4px;
        font-size: 14px;
        line-height: 20px;
    }
}

/* ----- Thẻ tour 297×362 ----- */

.ksite-tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 297px;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border-card);
    border-radius: var(--k-site-radius-xl);
}


.ksite-tour-card__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 88%);
    color: var(--k-site-ink-alt);
    cursor: pointer;
}

.ksite-tour-card__wishlist:hover {
    background: var(--k-site-surface);
}

.ksite-tour-card__wishlist[aria-pressed="true"] {
    color: var(--k-site-danger);
}

.ksite-tour-card__wishlist[aria-pressed="true"] svg {
    fill: currentcolor;
}

.ksite-tour-card__media {
    position: relative;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
}

.ksite-tour-card__media img {
    width: 100%;
    height: 183px;
    object-fit: cover;
}

.ksite-tour-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
    color: #fff;
    background: var(--k-site-success);
    border-radius: var(--k-site-radius-sm);
}

.ksite-tour-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.ksite-tour-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Không khoá chiều cao: 48px của Figma là do tiêu đề mẫu dài 2 dòng, tiêu đề thật 1 dòng thì
   khoá lại sẽ hở một dòng trống. Chỉ giữ giới hạn 2 dòng. */
.ksite-tour-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--k-site-ink);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ksite-tour-card__location {
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--k-site-muted);
}

.ksite-tour-card__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    line-height: 21px;
}

.ksite-tour-card__duration {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 600;
    color: var(--k-site-muted);
}

.ksite-tour-card__rating {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 700;
    color: var(--k-site-ink);
}

.ksite-tour-card__rating svg {
    color: var(--k-site-star);
}

.ksite-tour-card__price {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-top: auto;
}

.ksite-tour-card__price-amount {
    font-size: 18px;
    font-weight: 800;
    line-height: 27px;
    color: var(--k-site-ink);
}

.ksite-tour-card__price-original {
    font-size: 14px;
    font-weight: 500;
    color: var(--k-site-muted-2);
    text-decoration: line-through;
}

.ksite-tour-card__price-unit {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: var(--k-site-muted-2);
}

/* Mobile: cột của lưới quyết định bề rộng; cỡ chữ và ảnh theo thẻ 179×277 của frame. */
@media (max-width: 767.98px) {
    .ksite-tour-card {
        width: 100%;
    }

    .ksite-tour-card__media img {
        height: auto;
        aspect-ratio: 177 / 114;
    }

    .ksite-tour-card__body {
        gap: 10px;
        padding: 12px;
    }

    .ksite-tour-card__text {
        gap: 6px;
    }

    .ksite-tour-card__title {
        font-size: 14px;
        line-height: 21px;
        -webkit-line-clamp: 3;
    }

    .ksite-tour-card__location {
        font-size: 12px;
        line-height: 14px;
    }

    .ksite-tour-card__meta {
        gap: 6px;
        font-size: 12px;
        line-height: 18px;
    }

    /* Cột hẹp: đơn vị giá xuống dòng thay vì đẩy thẻ tràn ra. */
    .ksite-tour-card__price {
        flex-wrap: wrap;
        gap: 0 6px;
    }

    .ksite-tour-card__price-amount {
        font-size: 16px;
        line-height: 24px;
    }

    .ksite-tour-card__price-original,
    .ksite-tour-card__price-unit {
        font-size: 12px;
        line-height: 18px;
    }
}

/* ----- Khung section ----- */

.ksite-section {
    padding-block: 12px 24px;
}

@media (max-width: 767.98px) {
    .ksite-section {
        padding-block: 0 16px;
    }
}

.ksite-empty {
    padding-block: 48px;
    color: var(--k-site-muted);
    text-align: center;
}

/* ----- Hero 1920×577 ----- */

/* Figma: hero 577 = ảnh 537 + 40 phần widget thò xuống dưới banner. */
.ksite-hero {
    position: relative;
    padding: 20px 0;
}

.ksite-hero__carousel {
    position: relative;
    overflow: hidden;
}

.ksite-hero__carousel--empty {
    display: grid;
    place-items: center;
    aspect-ratio: 1652 / 537;
    color: var(--k-site-muted);
    background: var(--k-site-surface-elevated);
}

/* Figma: slide 1652 trên canvas 1920, gap 31 — slide kề hai bên ló ra, không tràn viền.
   translateX do JS đặt bằng px: biến CSS custom không nội suy được nên nếu tính transform từ nó thì
   slide nhảy không animation và `transitionend` không bao giờ chạy. */
.ksite-hero__track {
    display: flex;
    gap: var(--k-site-slide-gap);
    transition: transform 0.45s ease;
}

.ksite-hero__slide {
    flex: 0 0 var(--k-site-slide-width);
    overflow: hidden;
    border-radius: var(--k-site-radius-lg);
    opacity: 0.45;
    transition: opacity 0.45s ease;
}

.ksite-hero__slide.is-current {
    opacity: 1;
}

.ksite-hero__slide img {
    width: 100%;
    aspect-ratio: 1652 / 537;
    height: auto;
    object-fit: cover;
}

/* Figma: nút tròn 63 cách mép slide 21, căn giữa dọc theo ảnh 537. */
.ksite-hero__arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 63px;
    height: 63px;
    color: var(--k-site-ink);
    background: rgb(255 255 255 / 88%);
    border-radius: var(--k-site-radius-full);
    box-shadow: var(--k-site-shadow-sm);
    transform: translateY(-50%);
}

.ksite-hero__arrow:hover {
    background: #fff;
}

/* max(): màn hình hẹp hơn slide thì nút bám mép màn hình thay vì trôi ra ngoài. */
.ksite-hero__arrow--prev {
    left: max(21px, calc(50vw - var(--k-site-slide-width) / 2 + 21px));
}

.ksite-hero__arrow--next {
    right: max(21px, calc(50vw - var(--k-site-slide-width) / 2 + 21px));
}

/* Cụm 159×42 ở góc dưới phải slide, cách mép 31. */
.ksite-hero__status {
    position: absolute;
    right: max(31px, calc(50vw - var(--k-site-slide-width) / 2 + 31px));
    bottom: 71px;
    display: flex;
    gap: 7px;
    align-items: center;
    height: 42px;
}

.ksite-hero__toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: rgb(0 0 0 / 35%);
    border-radius: var(--k-site-radius-full);
}

.ksite-hero__counter {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 109px;
    height: 42px;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #fff;
    background: rgb(0 0 0 / 35%);
    border-radius: var(--k-site-radius-full);
}

/* Hero mobile 402×204: ảnh 346×180. Frame không vẽ nút điều hướng nhưng carousel chưa vuốt được
   nên giữ lại, thu nhỏ. */
@media (max-width: 767.98px) {
    .ksite-hero {
        padding: 12px 0;
    }

    .ksite-hero__slide img,
    .ksite-hero__carousel--empty {
        aspect-ratio: 346 / 180;
    }

    .ksite-hero__arrow {
        width: 40px;
        height: 40px;
    }

    .ksite-hero__status {
        bottom: 12px;
        height: 32px;
    }

    .ksite-hero__toggle {
        width: 32px;
        height: 32px;
    }

    .ksite-hero__counter {
        width: 84px;
        height: 32px;
        font-size: 12px;
    }
}

/* ----- Widget tìm kiếm 1200×116 ----- */

.ksite-search-widget {
    position: absolute;
    bottom: -38px;
    left: 50%;
    display: flex;
    gap: 15px;
    /* Giữ tỉ lệ 1200/1652 của Figma nên widget co đúng nhịp với slide, không tự hẹp lại. */
    width: calc(var(--k-site-slide-width) * 0.7264);
    /* 14 chứ không 15: Figma đo 116 gồm cả viền 1px hai bên. */
    padding: 14px;
    background: var(--k-site-surface-search);
    border: 1px solid var(--k-site-primary-border);
    border-radius: var(--k-site-radius-md);
    transform: translateX(-50%);
}

.ksite-search-widget__field {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
}

.ksite-search-widget__label {
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    color: var(--k-site-brand-navy);
}

.ksite-search-widget__control {
    display: flex;
    gap: 9px;
    align-items: center;
    height: 60px;
    padding: 11px 15px;
    background: var(--k-site-surface);
    border: 1px solid #f1f3f5;
    border-radius: var(--k-site-radius-md);
}

.ksite-search-widget__control > svg {
    flex-shrink: 0;
    color: var(--k-site-brand-navy-muted);
}

.ksite-search-widget__control select,
.ksite-search-widget__control input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: inherit;
    color: var(--k-site-brand-navy);
    background: none;
    border: 0;
}

.ksite-search-widget__control select:focus,
.ksite-search-widget__control input:focus {
    outline: none;
}

.ksite-search-widget__hint {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--k-site-brand-navy-muted);
}

.ksite-search-widget__submit {
    display: flex;
    flex: 1;
    gap: 14px;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    background: var(--k-site-primary);
    border-radius: var(--k-site-radius-md);
}

.ksite-search-widget__submit:hover {
    filter: brightness(0.95);
}

/* Trang danh sách: cùng widget nhưng nằm trong luồng, rộng bằng container thay vì bám đáy hero. */
.ksite-search-widget--page {
    position: static;
    width: 100%;
    transform: none;
}

/* Cả hai frame mobile đều không có widget tìm kiếm: trang chủ để ô tìm kiếm trên header gánh, trang
   danh sách đi thẳng từ dải dịch vụ xuống hàng "Bộ Lọc / Sắp Xếp". */
@media (max-width: 767.98px) {
    .ksite-search-widget {
        display: none;
    }
}

/* ----- Dải dịch vụ 1920×204 ----- */

.ksite-service-rail {
    padding-top: 60px;
    padding-bottom: 16px;
}

/* Figma trang danh sách: dải cao 144 thay vì 204 vì không có hero đè lên trên. */
.ksite-service-rail--compact {
    padding-top: 16px;
    padding-bottom: 0;
}

.ksite-service-rail__list {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
}

.ksite-service-rail__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 129px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--k-site-ink-alt);
    text-align: center;
}

.ksite-service-rail__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    color: var(--k-site-primary);
    background: var(--k-site-surface-footer);
    border: 1px solid var(--k-site-surface-input);
    border-radius: 24px;
}

.ksite-service-rail__icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Vertical đang mở (Tour) viền xanh, theo trạng thái active của Figma. */
a.ksite-service-rail__item .ksite-service-rail__icon {
    border-color: #0593fc;
}

.ksite-service-rail__item--active {
    font-weight: 700;
    color: var(--k-site-primary);
}

.ksite-service-rail__divider {
    width: 1px;
    height: 72px;
    margin-inline: 8px;
    background: var(--k-site-border-divider);
}

/* Dải rút gọn của trang danh sách chỉ tồn tại ở mobile. */
.ksite-service-rail__peek {
    display: none;
}

/* Mobile: lưới 5 cột × nhiều hàng theo frame, icon 60, không có vạch ngăn. */
@media (max-width: 767.98px) {
    .ksite-service-rail__peek {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px 6px;
    }

    .ksite-service-rail__peek-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        min-width: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        color: var(--k-site-ink-alt);
        text-align: center;
    }

    .ksite-service-rail__peek-item--active {
        font-weight: 700;
        color: var(--k-site-primary);
    }

    .ksite-service-rail__peek-icon {
        display: grid;
        place-items: center;
        width: 60px;
        height: 60px;
        color: var(--k-site-primary);
        background: var(--k-site-surface-footer);
        border: 1px solid var(--k-site-surface-input);
        border-radius: 20px;
    }

    .ksite-service-rail__peek-icon img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    /* Bảng dịch vụ đầy đủ: lưới cuộn trong tấm trượt, chừa lề đáy cho thanh tab. */
    .ksite-js .ksite-sheet .ksite-service-rail__list {
        padding-block: 8px 24px;
    }

    .ksite-service-rail {
        padding-block: 12px;
    }

    .ksite-service-rail--compact {
        padding-block: 12px 0;
    }

    .ksite-service-rail__list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px 6px;
    }

    .ksite-service-rail__item {
        gap: 6px;
        width: auto;
        font-size: 12px;
        line-height: 18px;
    }

    .ksite-service-rail__icon {
        width: 60px;
        height: 60px;
        border-radius: 20px;
    }

    .ksite-service-rail__icon img {
        width: 40px;
        height: 40px;
    }

    .ksite-service-rail__divider {
        display: none;
    }
}

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

/* Figma: widget cách dải dịch vụ 16, cách phần kết quả 24. */
.ksite-tour-index {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block: 16px 40px;
}

/* 300 + 16 + 924 = 1240, đúng container của Figma. */
.ksite-tour-index__body {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Dưới khổ desktop: một cột, sidebar bộ lọc chuyển vào popup. */
@media (max-width: 1239.98px) {
    .ksite-tour-index__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Đang nạp kết quả bằng AJAX: mờ nội dung và quay vòng chờ. Mờ từng khối con chứ không mờ cả form,
   nếu không vòng quay vẽ bằng ::after cũng nhạt theo. */
.ksite-tour-index__body[aria-busy="true"] > * {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* Vẽ trên chính form nên không bị mất khi thay nội dung; fixed để luôn thấy dù đang cuộn ở đâu. */
.ksite-tour-index__body[aria-busy="true"]::after {
    position: fixed;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    z-index: 20;
    width: 48px;
    height: 48px;
    content: "";
    background: var(--k-site-surface);
    border: 3px solid var(--k-site-border);
    border-top-color: var(--k-site-primary);
    border-radius: var(--k-site-radius-full);
    box-shadow: var(--k-site-shadow-filter);
    animation: ksite-spin 0.7s linear infinite;
}

@keyframes ksite-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ksite-tour-index__body[aria-busy="true"]::after {
        animation-duration: 2s;
    }
}

.ksite-tour-index__results {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ----- Sidebar bộ lọc 300px ----- */

.ksite-filters {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-lg);
    box-shadow: var(--k-site-shadow-filter);
}

.ksite-filters__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ksite-filters__head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.ksite-filters__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--k-site-ink-strong);
}

.ksite-filters__clear {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--k-site-primary);
    text-decoration: underline;
}

.ksite-filters__note {
    font-size: 12px;
    line-height: 1.4;
    color: var(--k-site-muted-soft);
}

.ksite-filters__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Figma kẻ 1px giữa hai nhóm, cách đều 24 hai bên. */
.ksite-filters__group + .ksite-filters__group {
    padding-top: 24px;
    border-top: 1px solid var(--k-site-border);
}

.ksite-filters__legend {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--k-site-ink-strong);
}

.ksite-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ksite-filters__apply {
    height: 40px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--k-site-primary);
    border-radius: var(--k-site-radius-md);
}

/* Nút đóng chỉ có nghĩa khi bộ lọc là popup. */
.ksite-filters__close {
    display: none;
}

/* Mobile: bộ lọc thành popup — panel cuộn riêng, nút "Áp dụng" dính đáy panel. */
@media (max-width: 1239.98px) {
    .ksite-filters {
        gap: 20px;
        padding: 16px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .ksite-filters__head-row {
        align-items: center;
        gap: 12px;
    }

    .ksite-js .ksite-filters__close {
        display: grid;
        flex-shrink: 0;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: -12px -12px -12px -14px;
        color: var(--k-site-ink-strong);
    }

    .ksite-filters__title {
        flex: 1;
        text-align: center;
    }

    .ksite-filters__apply {
        position: sticky;
        bottom: 0;
        height: 48px;
        margin-top: 4px;
    }
}

.ksite-filter-check {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 20px;
    cursor: pointer;
}

.ksite-filter-check__box {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 16px;
    height: 16px;
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--k-site-border-control);
    border-radius: 4px;
}

.ksite-filter-check__box:checked {
    background: var(--k-site-primary);
    border-color: var(--k-site-primary);
}

/* Dấu tick vẽ bằng hai cạnh viền xoay 45°, không cần asset. */
.ksite-filter-check__box:checked::after {
    width: 4px;
    height: 8px;
    content: "";
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

.ksite-filter-check__box:focus-visible {
    outline: 2px solid var(--k-site-primary);
    outline-offset: 2px;
}

.ksite-filter-check__label {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: var(--k-site-ink-form);
}

.ksite-filter-check__count {
    width: 40px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--k-site-muted-soft);
    text-align: right;
}

.ksite-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--k-site-ink-form);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-filter-chip--active {
    color: var(--k-site-primary);
    background: var(--k-site-primary-soft);
    border-color: var(--k-site-primary);
}

/* ----- Khoảng giá: hai thanh trượt chồng lên một ray ----- */

.ksite-price-range {
    position: relative;
    display: flex;
    align-items: center;
    height: 18px;
}

.ksite-price-range::before {
    position: absolute;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: var(--k-site-surface-input);
    border-radius: 2px;
}

.ksite-price-range__fill {
    position: absolute;
    height: 2px;
    background: var(--k-site-primary);
    border-radius: 2px;
}

/* Ray chung nằm ở khối cha; input chỉ còn nhiệm vụ mang chốt. */
.ksite-price-range input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    pointer-events: none;
    background: none;
    appearance: none;
}

.ksite-price-range input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    appearance: none;
    pointer-events: auto;
    cursor: pointer;
    background: var(--k-site-primary);
    border: 2px solid #fff;
    border-radius: var(--k-site-radius-full);
    box-shadow: var(--k-site-shadow-sm);
}

.ksite-price-range input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    pointer-events: auto;
    cursor: pointer;
    background: var(--k-site-primary);
    border: 2px solid #fff;
    border-radius: var(--k-site-radius-full);
}

.ksite-price-inputs {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.ksite-price-inputs__field {
    width: 104px;
    padding: 4px 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--k-site-brand-navy);
    text-align: center;
    appearance: textfield;
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-price-inputs__field::-webkit-outer-spin-button,
.ksite-price-inputs__field::-webkit-inner-spin-button {
    appearance: none;
}

/* ----- Thanh kết quả và sắp xếp ----- */

.ksite-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

@media (max-width: 767.98px) {
    .ksite-results-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.ksite-results-toolbar__count {
    font-size: 16px;
    line-height: 1.2;
    color: var(--k-site-ink-form);
}

.ksite-results-toolbar__count strong {
    font-weight: 700;
    color: var(--k-site-primary);
}

.ksite-results-toolbar__sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 190px;
    height: 40px;
    padding: 0 12px;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-md);
}

.ksite-results-toolbar__sort select {
    width: 100%;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--k-site-ink-form);
    cursor: pointer;
    background: none;
    border: 0;
    appearance: none;
}

.ksite-results-toolbar__sort > svg {
    position: absolute;
    right: 12px;
    pointer-events: none;
    color: var(--k-site-ink-form);
}

/* Desktop đã có sidebar lọc nên nút mở popup không có việc gì. */
.ksite-results-toolbar__filter {
    display: none;
}

/* Mobile: hàng "Bộ Lọc" + "Sắp Xếp" theo frame 10466:3932, số kết quả xuống dòng trên. */
/* Nút mở popup lọc theo cùng ngưỡng với sidebar: hễ sidebar rời khỏi trang thì nút phải có mặt. */
@media (max-width: 1239.98px) {
    .ksite-js .ksite-results-toolbar__filter {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        height: 40px;
        padding-inline: 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--k-site-ink-form);
        background: var(--k-site-surface);
        border: 1px solid var(--k-site-border);
        border-radius: var(--k-site-radius-md);
    }
}

@media (max-width: 767.98px) {
    .ksite-results-toolbar__count {
        flex-basis: 100%;
        font-size: 14px;
    }

    .ksite-results-toolbar__sort {
        width: auto;
        max-width: 60%;
        padding-right: 30px;
    }
}

/* ----- Lưới kết quả và phân trang ----- */

.ksite-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
}

.ksite-results-grid__empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    grid-column: 1 / -1;
    padding-block: 48px;
}

.ksite-results-grid__hint {
    font-size: 14px;
    color: var(--k-site-muted);
}

.ksite-results-grid__reset {
    font-size: 14px;
    font-weight: 600;
    color: var(--k-site-primary);
    text-decoration: underline;
}

/* ----- Trang tour đã xem ----- */

.ksite-recently-viewed {
    padding-block: 32px 56px;
}

.ksite-recently-viewed__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--k-site-ink);
}

.ksite-recently-viewed__subtitle {
    margin-top: 4px;
    font-size: 14px;
    color: var(--k-site-muted);
}

/* Thẻ tour rộng cố định 297px nên lưới đếm cột theo chiều ngang thật của khung. */
.ksite-recently-viewed .ksite-results-grid {
    margin-top: 24px;
    grid-template-columns: repeat(auto-fill, 297px);
}

.ksite-recently-viewed__empty {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding-block: 48px;
}

.ksite-recently-viewed__empty[hidden] {
    display: none;
}

.ksite-recently-viewed__cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--k-site-primary);
    text-decoration: underline;
}

.ksite-recently-viewed__error {
    padding-block: 16px;
    color: var(--k-site-danger);
}

@media (max-width: 767.98px) {
    .ksite-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Cột 297px cứng tràn ngang ở màn hẹp; mobile theo cùng lưới 2 cột như các trang tour khác. */
@media (max-width: 767.98px) {
    .ksite-recently-viewed .ksite-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ----- Phân trang ----- */

.ksite-pagination {
    display: flex;
    gap: 12px;
}

.ksite-pagination__item {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    color: var(--k-site-ink-form);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-pagination__item--current {
    color: #fff;
    background: var(--k-site-primary);
    border-color: var(--k-site-primary);
}

.ksite-pagination__item--disabled {
    color: var(--k-site-muted-soft);
}

@media (max-width: 767.98px) {
    .ksite-pagination {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ----- Lưới thẻ tour ----- */

.ksite-tour-grid {
    display: grid;
    grid-template-columns: repeat(4, 297px);
    gap: 16px;
    justify-content: space-between;
}

@media (max-width: 767.98px) {
    .ksite-tour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* ----- Tour Đặc Biệt: 5 thẻ 232×505 ----- */

.ksite-rank-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    justify-content: space-between;
    padding:0;
}

.ksite-rank-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ksite-rank-card__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--k-site-radius-xl);
    border-bottom-left-radius: 0;
}

/* Bắt bằng class chứ không bằng tag: hình nền rank cũng là <img> trong khối này. */
.ksite-rank-card__photo {
    width: 232px;
    height: 309px;
    object-fit: cover;
}

/* Hình nền rank01.svg khoét góc dưới trái, số nằm trong đó. */
.ksite-rank-card__rank {
    position: absolute;
    bottom: 0;
    left: 0;
}

.ksite-rank-card__shape {
    display: block;
    width: 179px;
    height: 126px;
}

.ksite-rank-card__number {
    position: absolute;
    bottom: 6px;
    left: 16px;
    font-size: 95px;
    font-weight: 800;
    line-height: 1;
    color: var(--k-site-ink-strong);
    text-shadow: 0 0 10px rgb(255 255 255 / 55%);
    font-style:italic;
}

/* Figma đo 180/96 vì tiêu đề mẫu dài 4 dòng; tiêu đề thật ngắn hơn nên để nội dung tự quyết.
   Khối giá + nút vẫn ghim đáy để các thẻ trong hàng thẳng nút với nhau. */
.ksite-rank-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

.ksite-rank-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: var(--k-site-ink-strong);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.ksite-rank-card__price {
    display: flex;
    gap: 6px;
    align-items: baseline;
    min-height: 32px;
    margin-top: auto;
}

.ksite-rank-card__price-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--k-site-ink);
}

.ksite-rank-card__price-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--k-site-muted-2);
}

.ksite-rank-card__cta {
    display: grid;
    place-items: center;
    height: 40px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--k-site-ink-alt);
    background: #f2f4f6;
    border: 1px solid var(--k-site-border-card);
    border-radius: 50px;
}

.ksite-rank-card__cta:hover {
    border-color: var(--k-site-primary);
}

/* Mobile: mỗi hàng 90px — số thứ tự trái, nội dung giữa, ảnh phải (frame 10466:3683). */
@media (max-width: 767.98px) {
    .ksite-rank-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ksite-rank-card {
        display: grid;
        grid-template-areas: "rank body photo";
        grid-template-columns: 30px minmax(0, 1fr) 90px;
        gap: 12px;
        align-items: center;
    }

    /* Bỏ hộp của media để ảnh và số thành ô riêng của hàng — đổi vai trò bằng vùng, không bằng order. */
    .ksite-rank-card__media {
        display: contents;
    }

    .ksite-rank-card__photo {
        grid-area: photo;
        width: 90px;
        height: 90px;
        border-radius: var(--k-site-radius-lg);
    }

    .ksite-rank-card__rank {
        position: static;
        grid-area: rank;
        text-align: center;
    }

    .ksite-rank-card__shape {
        display: none;
    }

    .ksite-rank-card__number {
        position: static;
        font-size: 36px;
        line-height: 36px;
        text-shadow: none;
    }

    .ksite-rank-card__body {
        grid-area: body;
        gap: 6px;
    }

    .ksite-rank-card__title {
        font-size: 14px;
        line-height: 21px;
        -webkit-line-clamp: 2;
    }

    .ksite-rank-card__price {
        min-height: 0;
        margin-top: 0;
    }

    .ksite-rank-card__price-amount {
        font-size: 15px;
    }

    .ksite-rank-card__price-unit {
        font-size: 12px;
    }

    /* Frame không có nút trong hàng 90px; tiêu đề vẫn là liên kết tới tour. */
    .ksite-rank-card__cta {
        display: none;
    }
}

/* ----- Điểm đến yêu thích: 2 tab, 4 ô 302×339 ----- */

.ksite-spots {
    padding-block: 40px;
}

/* Figma: tiêu đề và tab xếp dọc (Paragraph 284×95 [V gap=12]), không nằm cạnh nhau. */
.ksite-spots__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.ksite-spots__tabs {
    display: flex;
    gap: 12px;
}

.ksite-spots__tab {
    height: 45px;
    padding-inline: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--k-site-ink-strong);
    background: var(--k-site-surface-footer);
    border: 1px solid var(--k-site-surface-footer);
    border-radius: 50px;
}

.ksite-spots__tab[aria-selected="true"] {
    color: #fff;
    background: #333;
    border-color: #333;
}

.ksite-spots__panel {
    display: grid;
    grid-template-columns: repeat(4, 302px);
    gap: 10px;
    justify-content: space-between;
}

.ksite-spots__panel[hidden] {
    display: none;
}

.ksite-spot-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #E4E6E8;
    background: #FFF;
    padding: 12px;
}

.ksite-spot-card img {
    width: 302px;
    height: 339px;
     border-radius: 12px;
    object-fit: cover;
}

.ksite-spot-card__body {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: rgb(255 255 255 / 92%);
    border-radius: var(--k-site-radius-lg);
}

.ksite-spot-card__name {
    font-size: 18px;
    font-weight: 800;
    line-height: 28px;
    color: var(--k-site-ink);
}

.ksite-spot-card__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--k-site-muted);
}

.ksite-spot-card:hover .ksite-spot-card__meta {
    color: var(--k-site-primary);
}

/* Mobile: dải cuộn ngang có điểm dừng; thẻ hẹp hơn khung nhìn để lộ thẻ kế tiếp. */
@media (max-width: 767.98px) {
    .ksite-spots {
        padding-block: 0 16px;
    }

    .ksite-spots__tab {
        padding-inline: 12px;
    }

    .ksite-spots__panel {
        grid-auto-flow: column;
        grid-auto-columns: min(302px, 78vw);
        grid-template-columns: none;
        gap: 12px;
        justify-content: start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .ksite-spots__panel::-webkit-scrollbar {
        display: none;
    }

    .ksite-spot-card {
        scroll-snap-align: start;
    }

    .ksite-spot-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 278.5 / 315.67;
    }

    .ksite-spot-card__body {
        right: 16px;
        bottom: 16px;
        left: 16px;
        gap: 6px;
    }

    .ksite-spot-card__name {
        font-size: 16px;
        line-height: 24px;
    }
}

/* ----- Breadcrumb dùng chung ----- */

.ksite-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ksite-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ksite-breadcrumb a,
.ksite-breadcrumb span[aria-current] {
    font-size: 14px;
    font-weight: 500;
    line-height: 25.6px;
    letter-spacing: var(--k-site-tracking);
    color: var(--k-site-muted-2);
    text-decoration: none;
}

.ksite-breadcrumb a:hover,
.ksite-breadcrumb span[aria-current] {
    color: var(--k-site-primary);
}

/* Mobile: giữ đúng một dòng. Các cấp trên không co, mục đang xem nuốt phần thừa bằng dấu ba chấm. */
@media (max-width: 767.98px) {
    .ksite-breadcrumb ol {
        flex-wrap: nowrap;
        gap: 6px;
        overflow: hidden;
    }

    .ksite-breadcrumb li {
        flex-shrink: 0;
        gap: 6px;
        min-width: 0;
    }

    .ksite-breadcrumb li:last-child {
        flex-shrink: 1;
    }

    .ksite-breadcrumb a,
    .ksite-breadcrumb span[aria-current] {
        overflow: hidden;
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ksite-breadcrumb__sep {
        flex-shrink: 0;
    }
}

.ksite-breadcrumb__sep {
    flex-shrink: 0;
    color: var(--k-site-muted-soft);
}

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

.ksite-tour-detail {
    padding-block: 24px 40px;
}

/* 874 + 16 + 350 = 1240, đúng container của Figma. */
.ksite-tour-detail__body {
    display: grid;
    grid-template-columns: 874px 350px;
    gap: 16px;
    margin-top: 12px;
}

.ksite-tour-detail__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* align-self: start để cột phải không bị kéo dài bằng cột trái, nếu không sticky mất tác dụng. */
.ksite-tour-detail__aside {
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 16px;
    position: sticky;
    top: 16px;
}

/* Mobile: một cột và bỏ dính — khối cao hơn khung nhìn thì sticky ghim sai. */
@media (max-width: 1239.98px) {
    .ksite-tour-detail__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .ksite-tour-detail__aside {
        position: static;
    }
}

/* ----- Gallery 874×334 ----- */

.ksite-tour-detail__gallery {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 161px);
    gap: 12px;
    border-radius: var(--k-site-radius-lg);
    overflow: hidden;
}

.ksite-tour-detail__gallery-tile {
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
    cursor: pointer;
}

.ksite-tour-detail__gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ksite-tour-detail__gallery-tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Dưới 5 ảnh thì lưới co lại cho kín khung thay vì chừa ô trống. */
.ksite-tour-detail__gallery--1 {
    grid-template-columns: 1fr;
}

.ksite-tour-detail__gallery--2,
.ksite-tour-detail__gallery--3 {
    grid-template-columns: repeat(2, 1fr);
}

.ksite-tour-detail__gallery--1 .ksite-tour-detail__gallery-tile:first-child,
.ksite-tour-detail__gallery--2 .ksite-tour-detail__gallery-tile:first-child,
.ksite-tour-detail__gallery--3 .ksite-tour-detail__gallery-tile:first-child {
    grid-column: span 1;
}

.ksite-tour-detail__gallery--2 .ksite-tour-detail__gallery-tile {
    grid-row: span 2;
}

/* Ô thứ tư trải hết hàng dưới bên phải; nút "Xem tất cả" nằm ngoài dòng nên không tính vào lưới. */
.ksite-tour-detail__gallery--4 .ksite-tour-detail__gallery-tile:nth-child(4) {
    grid-column: span 2;
}

.ksite-tour-detail__gallery-all {
    position: absolute;
    right: 10px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 10px 17px;
    border: 1px solid var(--k-site-border-overlay);
    border-radius: var(--k-site-radius-full);
    background: var(--k-site-surface);
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--k-site-tracking);
    color: var(--k-site-ink-strong);
    cursor: pointer;
}

/* Mobile: một ảnh lớn, các ô còn lại nhường chỗ cho nút "xem tất cả". Số ô trong HTML giữ nguyên. */
@media (max-width: 767.98px) {
    .ksite-tour-detail__gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .ksite-tour-detail__gallery-tile:first-child {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 370 / 240;
    }

    .ksite-tour-detail__gallery-tile:not(:first-child) {
        display: none;
    }

    .ksite-tour-detail__gallery-all {
        right: 8px;
        bottom: 8px;
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ----- Tiêu đề, meta và hai nút hành động ----- */

.ksite-tour-detail__headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ksite-tour-detail__headline-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ksite-tour-detail__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--k-site-heading);
}

.ksite-tour-detail__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 767.98px) {
    .ksite-tour-detail__meta {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
}

.ksite-tour-detail__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: var(--k-site-tracking);
    color: var(--k-site-ink);
}

/* Chấm chỉ mọc giữa hai mảnh liền nhau, nên mảnh thiếu dữ liệu không để lại chấm mồ côi. */
.ksite-tour-detail__meta-item + .ksite-tour-detail__meta-item::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-inline-end: 6px;
    border-radius: var(--k-site-radius-full);
    background: var(--k-site-muted-soft);
}

.ksite-tour-detail__meta-star {
    color: var(--k-site-star);
}

.ksite-tour-detail__meta-muted {
    font-weight: 400;
    color: var(--k-site-muted);
}

.ksite-tour-detail__meta-code {
    font-weight: 500;
}

.ksite-tour-detail__actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 8px;
}

.ksite-tour-detail__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 12px;
    border: 0;
    border-radius: var(--k-site-radius-xl);
    background: none;
    color: var(--k-site-ink-alt);
    cursor: pointer;
}

.ksite-tour-detail__action:hover {
    background: var(--k-site-surface-elevated);
}

.ksite-tour-detail__action[aria-pressed="true"] {
    color: var(--k-site-danger);
}

.ksite-tour-detail__action[aria-pressed="true"] svg {
    fill: currentcolor;
}

.ksite-tour-detail__action-status {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 2;
    width: max-content;
    max-width: 280px;
    padding: 8px 12px;
    border-radius: var(--k-site-radius-md);
    background: var(--k-site-ink-alt);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--k-site-surface);
}

.ksite-tour-detail__action-status:empty {
    display: none;
}

/* ----- Tab neo 874×44 ----- */

.ksite-tour-detail__tabs {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 12px 12px 0 0;
}

.ksite-tour-detail__tab {
    position: relative;
    padding-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.28px;
    color: var(--k-site-heading);
    text-decoration: none;
}

.ksite-tour-detail__tab[aria-current="true"] {
    color: var(--k-site-primary);
}

.ksite-tour-detail__tab[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    border-radius: var(--k-site-radius-full);
    background: var(--k-site-primary);
}

/* Mobile: hàng tab dính dưới đỉnh khung nhìn (header không dính) và cuộn ngang khi tràn. */
@media (max-width: 767.98px) {
    .ksite-tour-detail__tabs {
        position: sticky;
        top: 0;
        z-index: 5;
        gap: 20px;
        padding: 12px 0 0;
        overflow-x: auto;
        background: var(--k-site-surface);
        scrollbar-width: none;
    }

    .ksite-tour-detail__tabs::-webkit-scrollbar {
        display: none;
    }

    .ksite-tour-detail__tab {
        flex-shrink: 0;
    }
}

/* ----- Khối nội dung cột trái ----- */

.ksite-tour-detail__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-block: 12px;
    scroll-margin-top: 24px;
}

.ksite-tour-detail__section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.54px;
    color: var(--k-site-heading-section);
}

.ksite-tour-detail__section-subtitle {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--k-site-heading-section);
}

.ksite-tour-detail__note {
    margin: 0;
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--k-site-note);
}

.ksite-tour-detail__note--strong {
    font-style: normal;
    font-weight: 700;
    color: var(--k-site-body);
}

/* HTML biên tập: khóa mọi thứ trong cột, ảnh và bảng của tour đối tác không được đẩy rộng khung. */
.ksite-prose {
    max-width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: var(--k-site-body);
    overflow-wrap: anywhere;
}

.ksite-prose--sm {
    font-size: 14px;
    letter-spacing: -0.42px;
}

.ksite-prose > :first-child {
    margin-top: 0;
}

.ksite-prose > :last-child {
    margin-bottom: 0;
}

.ksite-prose p,
.ksite-prose ul,
.ksite-prose ol {
    margin-block: 0 8px;
}

.ksite-prose ul,
.ksite-prose ol {
    padding-inline-start: 20px;
}

.ksite-prose li {
    margin-bottom: 4px;
}

.ksite-prose strong,
.ksite-prose b {
    font-weight: 700;
}

.ksite-prose a {
    color: var(--k-site-primary);
}

.ksite-prose img {
    max-width: 100%;
    height: auto;
}

.ksite-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.ksite-prose td,
.ksite-prose th {
    padding: 6px 10px;
    border: 1px solid var(--k-site-border);
}

/* ----- Lịch trình 508 + box điều kiện 350 ----- */

.ksite-tour-detail__itinerary-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Hộp điều kiện 350px không co được: dưới khổ desktop nó và lịch trình phải xếp dọc. */
@media (max-width: 1239.98px) {
    .ksite-tour-detail__itinerary-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.ksite-tour-detail__itinerary {
    flex: 1 1 0;
    min-width: 0;
}

/* Đường dọc nằm trên container để nó dừng đúng ở mốc cuối, không kéo dài xuống dòng lưu ý. */
.ksite-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 10px 0 0;
    list-style: none;
}

.ksite-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: 1px;
    background: var(--k-site-border-divider);
}

.ksite-timeline__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-inline-start: 31px;
}

.ksite-timeline__step::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 16px;
    height: 16px;
    border: 3px solid var(--k-site-surface);
    border-radius: var(--k-site-radius-full);
    background: var(--k-site-primary);
}

.ksite-timeline__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: -0.48px;
    color: var(--k-site-ink-alt);
}

.ksite-conditions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    width: 350px;
    padding: 24px;
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-lg);
    background: var(--k-site-surface-panel);
}

@media (max-width: 767.98px) {
    .ksite-conditions {
        width: auto;
    }
}

.ksite-conditions__block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ksite-conditions__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.48px;
    color: var(--k-site-heading-section);
}

.ksite-conditions__divider {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--k-site-border);
}

.ksite-conditions .ksite-prose {
    padding-block: 8px;
    font-weight: 500;
}

/* Icon vẽ bằng CSS để không phải chèn thẻ vào HTML biên tập. */
.ksite-prose--include ul,
.ksite-prose--include ol,
.ksite-prose--exclude ul,
.ksite-prose--exclude ol {
    padding-inline-start: 0;
    list-style: none;
}

.ksite-prose--include li,
.ksite-prose--exclude li {
    position: relative;
    min-height: 20px;
    margin-bottom: 12px;
    padding-inline-start: 29px;
}

.ksite-prose--include li:last-child,
.ksite-prose--exclude li:last-child {
    margin-bottom: 0;
}

.ksite-prose--include li::before,
.ksite-prose--exclude li::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 19px;
    height: 19px;
    background-repeat: no-repeat;
    background-size: contain;
}

.ksite-prose--include li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2331d36c'/%3E%3Cpath d='m7 12.4 3.3 3.3L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ksite-prose--exclude li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%239ca3af'/%3E%3Cpath d='m8.5 8.5 7 7m0-7-7 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ----- Đánh giá 874×228 ----- */

.ksite-stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    color: var(--k-site-border-divider);
}

.ksite-stars__row {
    display: flex;
    gap: 3px;
}

.ksite-stars__row--fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--k-site-star);
}

.ksite-reviews {
    display: flex;
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 767.98px) {
    .ksite-reviews {
        flex-direction: column;
        gap: 16px;
    }
}

.ksite-reviews__score {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    padding-inline-end: 32px;
    border-inline-end: 1px solid var(--k-site-border);
}

.ksite-reviews__average {
    margin: 0;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1.44px;
    color: var(--k-site-ink-strong);
}

.ksite-reviews__scale {
    font-size: 16px;
    letter-spacing: -0.48px;
    color: var(--k-site-muted-4);
}

.ksite-reviews__count {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--k-site-muted);
}

.ksite-reviews__histogram {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    margin: 0;
    padding: 0 32px 0 0;
    border-inline-end: 1px solid var(--k-site-border);
    list-style: none;
}

.ksite-reviews__row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ksite-reviews__row-star {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--k-site-muted);
}

.ksite-reviews__row-star svg {
    color: var(--k-site-star);
}

.ksite-reviews__bar {
    width: 238px;
    height: 7px;
    border-radius: var(--k-site-radius-full);
    background: var(--k-site-track);
}

@media (max-width: 767.98px) {
    .ksite-reviews__bar {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}

.ksite-reviews__bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--k-site-radius-full);
    background: var(--k-site-primary);
}

.ksite-reviews__row-count {
    min-width: 28px;
    font-size: 16px;
    font-weight: 600;
    color: var(--k-site-muted);
}

.ksite-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
}

.ksite-reviews__list[data-collapsed="true"] [data-ksite-review-extra] {
    display: none;
}

.ksite-reviews__more {
    align-self: flex-end;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.24px;
    color: var(--k-site-primary);
    cursor: pointer;
}

.ksite-review {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.ksite-review__avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--k-site-radius-full);
    object-fit: cover;
}

.ksite-review__avatar--initial {
    display: grid;
    place-items: center;
    background: var(--k-site-surface-elevated);
    font-size: 18px;
    font-weight: 700;
    color: var(--k-site-brand-navy);
}

.ksite-review__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

.ksite-review__head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.ksite-review__author {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.48px;
    color: var(--k-site-brand-navy);
}

.ksite-review__rating {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--k-site-muted);
}

.ksite-review__rating svg {
    color: var(--k-site-star);
}

.ksite-review__travelled,
.ksite-review__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.24px;
}

.ksite-review__travelled {
    font-weight: 500;
    color: var(--k-site-muted);
}

.ksite-review__text {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 600;
    color: var(--k-site-body);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ----- Tour liên quan 1236×415 ----- */

.ksite-tour-detail__related {
    padding-block: 16px 24px;
}

/* ----- Hộp đặt tour 350×657 ----- */

.ksite-booking,
.ksite-support {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-lg);
    box-shadow: var(--k-site-shadow-filter);
}

.ksite-booking {
    gap: 16px;
}

.ksite-booking__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ksite-booking__from {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--k-site-muted-2);
}

.ksite-booking__price {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin: 0;
}

.ksite-booking__price-amount {
    font-size: 23px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--k-site-primary);
}

.ksite-booking__price-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--k-site-muted-2);
}

.ksite-booking__rating {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    font-size: 12px;
}

.ksite-booking__rating-star {
    color: var(--k-site-star);
}

.ksite-booking__rating strong {
    font-weight: 700;
    color: var(--k-site-ink);
}

.ksite-booking__rating span {
    color: var(--k-site-muted);
}

.ksite-booking__divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--k-site-border);
}

.ksite-booking__empty {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-site-note);
}

.ksite-booking__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ksite-booking__step-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--k-site-ink-strong);
}

.ksite-booking__date {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--k-site-ink-form);
    cursor: pointer;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
    text-transform: capitalize;
}

.ksite-booking__date-value {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ksite-booking__calendar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-booking__calendar[hidden] {
    display: none;
}

.ksite-booking__calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
}

.ksite-booking__calendar-nav {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--k-site-ink-form);
    cursor: pointer;
    background: none;
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-booking__calendar-nav[disabled] {
    color: var(--k-site-muted-soft);
    cursor: not-allowed;
}

.ksite-booking__calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.ksite-booking__calendar-weekday {
    font-size: 10px;
    font-weight: 600;
    color: var(--k-site-muted);
    text-align: center;
}

.ksite-booking__calendar-day {
    padding: 6px 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--k-site-ink-form);
    cursor: pointer;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-booking__calendar-day[disabled] {
    color: var(--k-site-muted-soft);
    cursor: not-allowed;
    background: var(--k-site-track);
    border-color: transparent;
}

.ksite-booking__calendar-day[aria-pressed="true"] {
    color: var(--k-site-primary);
    background: var(--k-site-primary-soft);
    border-color: var(--k-site-primary-border);
}

.ksite-booking__calendar-day--empty {
    border: 0;
}

.ksite-booking__fallback {
    display: flex;
    gap: 8px;
}

.ksite-booking__fallback-submit {
    padding-inline: 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--k-site-primary);
    cursor: pointer;
    background: var(--k-site-primary-soft);
    border: 1px solid var(--k-site-primary-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-booking__times {
    display: flex;
    gap: 12px;
}

.ksite-booking__time {
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    min-width: 0;
    padding: 12px 8px;
    font-family: inherit;
    cursor: pointer;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-booking__time.is-selected {
    color: var(--k-site-primary);
    background: var(--k-site-primary-soft);
    border-color: var(--k-site-primary-border);
}

.ksite-booking__time-hour {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.ksite-booking__time-seats {
    font-size: 12px;
    line-height: 1.4;
    color: var(--k-site-muted);
}

.ksite-booking__time.is-selected .ksite-booking__time-seats {
    color: inherit;
}

.ksite-booking__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Cụm tổng + hai nút: cùng nhịp giãn cách với form nên desktop không đổi. */
.ksite-booking__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ksite-booking__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ksite-booking__field[hidden] {
    display: none;
}

.ksite-booking__field-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--k-site-ink-strong);
}

.ksite-booking__select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding-inline: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--k-site-ink-form);
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-booking__tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ksite-booking__tier {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

.ksite-booking__tier-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ksite-booking__tier-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--k-site-ink-form);
}

.ksite-booking__tier-range {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--k-site-muted);
}

.ksite-booking__tier-range:empty {
    display: none;
}

.ksite-booking__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.ksite-booking__total-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--k-site-ink-strong);
}

.ksite-booking__total-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--k-site-primary);
}

.ksite-booking__message {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--k-site-danger);
}

.ksite-booking__message--success {
    color: var(--k-site-success);
}

.ksite-booking__message[hidden] {
    display: none;
}

.ksite-booking__submit {
    padding: 10px 26px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--k-site-surface);
    text-align: center;
    cursor: pointer;
    background: var(--k-site-primary);
    border: 0;
    border-radius: var(--k-site-radius-sm);
}

.ksite-booking__submit--ghost {
    color: var(--k-site-primary);
    background: var(--k-site-surface-panel);
}

.ksite-booking__submit[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.ksite-booking[aria-busy="true"] {
    opacity: 0.7;
}

/* Có JS thì lịch tháng thay ô chọn ngày thô, không thì ngược lại. */
.ksite-js .ksite-booking__date {
    display: flex;
}

.ksite-js .ksite-booking__fallback {
    display: none;
}

/* Trong tấm trượt: giá và đánh giá đã nằm trên thanh đáy nên bỏ đầu hộp, cụm tổng + hai nút dính đáy
   để tấm trượt cao hơn khung nhìn vẫn bấm được nút chính (frame 10466:6324). */
@media (max-width: 1239.98px) {
    .ksite-js .ksite-sheet .ksite-booking {
        padding: 16px;
    }

    .ksite-js .ksite-sheet .ksite-booking__head,
    .ksite-js .ksite-sheet .ksite-booking__head + .ksite-booking__divider {
        display: none;
    }

    .ksite-js .ksite-sheet .ksite-booking__actions {
        position: sticky;
        bottom: 0;
        padding-bottom: 4px;
        background: var(--k-site-surface);
    }
}

/* ----- Thanh đáy đặt tour (mobile) ----- */

.ksite-booking-bar {
    display: none;
}

@media (max-width: 1239.98px) {
    .ksite-booking-bar {
        position: fixed;
        right: 12px;
        bottom: calc(var(--k-site-tabbar-h) + 8px);
        left: 12px;
        z-index: 61;
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        padding: 12px 12px 12px 16px;
        background: var(--k-site-surface);
        border-radius: var(--k-site-radius-lg);
        box-shadow: var(--k-site-shadow-panel);
    }

    .ksite-booking-bar__price {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .ksite-booking-bar__from {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--k-site-note);
    }

    .ksite-booking-bar__amount {
        font-size: 18px;
        font-weight: 800;
        color: var(--k-site-primary);
    }

    .ksite-booking-bar__unit {
        font-size: 13px;
        font-weight: 500;
        color: var(--k-site-muted-2);
    }

    .ksite-booking-bar__rating {
        display: flex;
        gap: 4px;
        align-items: center;
        font-size: 13px;
        color: var(--k-site-ink);
    }

    .ksite-booking-bar__rating svg {
        color: var(--k-site-star);
    }

    .ksite-booking-bar__rating span {
        color: var(--k-site-muted-2);
    }

    .ksite-booking-bar__cta {
        flex-shrink: 0;
        min-height: 44px;
        padding-inline: 24px;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        background: var(--k-site-primary);
        border-radius: var(--k-site-radius-md);
    }

    /* Chừa chỗ cho thanh đáy: trang này có hai lớp dính chồng lên nhau. */
    .ksite:has(.ksite-booking-bar) {
        padding-bottom: calc(var(--k-site-tabbar-h) + 108px);
    }
}

/* ----- Ô tăng/giảm số khách 102×36 ----- */

.ksite-stepper {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding-inline: 8px;
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-sm);
}

.ksite-stepper__button {
    display: grid;
    place-items: center;
    padding: 4px 8px;
    color: var(--k-site-ink-form);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: var(--k-site-radius-sm);
}

.ksite-stepper__button[disabled] {
    color: var(--k-site-muted-soft);
    cursor: not-allowed;
}

.ksite-stepper__input {
    width: 28px;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--k-site-ink-form);
    text-align: center;
    background: none;
    border: 0;
    -moz-appearance: textfield;
}

.ksite-stepper__input::-webkit-outer-spin-button,
.ksite-stepper__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* ----- Hộp hỗ trợ 350×154 ----- */

.ksite-support {
    gap: 12px;
}

.ksite-support__head {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ksite-support__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--k-site-radius-full);
    object-fit: cover;
}

.ksite-support__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ksite-support__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--k-site-brand-navy);
}

.ksite-support__subtitle {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--k-site-muted);
}

.ksite-support__actions {
    display: flex;
    gap: 8px;
}

.ksite-support__action {
    display: flex;
    flex: 1 0 0;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--k-site-primary);
    text-align: center;
    background: var(--k-site-primary-soft);
    border: 1px solid var(--k-site-primary-border);
    border-radius: var(--k-site-radius-sm);
}

/* Hotline thật dài hơn "1900 60 69" của mockup: cho chữ xuống dòng thay vì tràn khỏi hộp. */
.ksite-support__action svg {
    flex: none;
    width:16px;
    height:16px
}

/* ----- Trang thanh toán 1240 = 874 + 16 + 350 ----- */

.ksite-checkout {
    padding-block: 24px 40px;
}

.ksite-checkout__alert {
    margin-top: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--k-site-danger);
    background: var(--k-site-surface-elevated);
    border: 1px solid var(--k-site-danger);
    border-radius: var(--k-site-radius-md);
}

.ksite-checkout__body {
    display: grid;
    grid-template-columns: 874px 350px;
    gap: 16px;
    margin-top: 12px;
}

/* Mobile: một cột và bỏ dính. Thanh tổng dính đáy do phase checkout dựng. */
@media (max-width: 1239.98px) {
    .ksite-checkout__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .ksite-checkout__aside {
        position: static;
    }
}

.ksite-checkout__main,
.ksite-checkout__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ksite-checkout__aside {
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.ksite-checkout__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border-card);
    border-radius: var(--k-site-radius-xl);
}

.ksite-checkout__card-eyebrow {
    font-size: 13px;
    color: var(--k-site-muted);
}

.ksite-checkout__card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--k-site-heading);
}

.ksite-checkout__card-eyebrow + .ksite-checkout__card-title {
    margin-top: -12px;
}

.ksite-checkout__card-title--ruled {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--k-site-border-divider);
}

/* ----- Card dòng giỏ 826×122 ----- */

.ksite-checkout__lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ksite-checkout-line {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 1px;
    border: 1px solid var(--k-site-border-card);
    border-radius: var(--k-site-radius-lg);
}

.ksite-checkout-line--blocked {
    border-color: var(--k-site-danger);
}

.ksite-checkout-line__image {
    width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--k-site-radius-lg) 0 0 var(--k-site-radius-lg);
}

.ksite-checkout-line__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ksite-checkout-line__head {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.ksite-checkout-line__badge {
    align-self: flex-start;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--k-site-primary);
    background: var(--k-site-primary-soft);
    border-radius: var(--k-site-radius-sm);
}

.ksite-checkout-line__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--k-site-heading);
}

.ksite-checkout-line__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--k-site-note);
}

.ksite-checkout-line__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Chấm phân cách vẽ bằng ::before nên đoạn thiếu (giờ khởi hành trống) không để lại dấu thừa. */
.ksite-checkout-line__meta-item + .ksite-checkout-line__meta-item::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 6px;
    background: var(--k-site-muted-soft);
    border-radius: var(--k-site-radius-full);
}

.ksite-checkout-line__blocked {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-site-danger);
}

.ksite-checkout-line__side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    padding-right: 16px;
    text-align: right;
}

.ksite-checkout-line__price {
    font-size: 18px;
    font-weight: 800;
    color: var(--k-site-heading);
}

.ksite-checkout-line__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--k-site-primary);
}

/* Bản nằm ở hàng badge chỉ dùng ở mobile; khai sau `__edit` để thắng luật hiển thị của nó. */
.ksite-checkout-line__edit--head {
    display: none;
}

.ksite-checkout-line__remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--k-site-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.ksite-checkout-line__remove:hover,
.ksite-checkout-line__remove:focus-visible {
    color: var(--k-site-danger);
}

/* Mobile theo frame 10466:4787: ảnh vuông bên trái, nội dung bên phải, giá ở góc dưới phải. */
@media (max-width: 767.98px) {
    .ksite-checkout-line {
        grid-template-areas:
            "image body"
            "image side";
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 6px 12px;
        align-items: start;
        padding: 12px;
    }

    .ksite-checkout-line__image {
        grid-area: image;
        width: 90px;
        height: 90px;
        border-radius: var(--k-site-radius-md);
    }

    .ksite-checkout-line__body {
        grid-area: body;
    }

    .ksite-checkout-line__title {
        font-size: 15px;
    }

    .ksite-checkout-line__meta {
        gap: 4px 10px;
        font-size: 12px;
    }

    .ksite-checkout-line__edit--head {
        display: inline-flex;
        flex-shrink: 0;
    }

    /* Cột hẹp không đủ cho nút xóa và giá cùng một hàng; xếp dọc, căn phải như frame. */
    .ksite-checkout-line__side {
        grid-area: side;
        gap: 4px;
        padding-right: 0;
    }

    /* "Thay đổi" đã lên hàng badge, bản ở cột phải nhường chỗ. */
    .ksite-checkout-line__side .ksite-checkout-line__edit {
        display: none;
    }

    .ksite-checkout-line__price {
        font-size: 16px;
    }
}

/* ----- Ô nhập của trang thanh toán ----- */

.ksite-checkout__fields {
    display: grid;
    grid-template-columns: repeat(3, 259px);
    gap: 16px;
}

@media (max-width: 767.98px) {
    .ksite-checkout__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

.ksite-checkout__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ksite-checkout__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-site-body);
}

.ksite-checkout__input {
    height: 45px;
    padding-inline: 14px;
    font: inherit;
    font-size: 14px;
    letter-spacing: inherit;
    color: var(--k-site-ink-form);
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border-control);
    border-radius: var(--k-site-radius-md);
}

.ksite-checkout__input:focus {
    border-color: var(--k-site-primary);
    outline: none;
}

.ksite-checkout__input[aria-invalid="true"] {
    border-color: var(--k-site-danger);
}

.ksite-checkout__hint {
    font-size: 12px;
    color: var(--k-site-muted);
}

.ksite-checkout__error {
    font-size: 12px;
    font-weight: 600;
    color: var(--k-site-danger);
}

.ksite-checkout__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--k-site-body);
    cursor: pointer;
}

/* ----- Khối hành khách ----- */

.ksite-checkout__passenger-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-margin-top: 24px;
}

.ksite-checkout__passenger-tour {
    font-size: 15px;
    font-weight: 700;
    color: var(--k-site-heading-section);
}

/* 3 cột: dòng nội bộ (tên/email/điện thoại) vừa đúng một hàng, dòng đối tác xuống thành hai. */
.ksite-checkout__passenger {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-lg);
}

@media (max-width: 767.98px) {
    .ksite-checkout__passenger {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ksite-checkout__passenger-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--k-site-muted);
}

.ksite-checkout__passenger-legend {
    padding-inline: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--k-site-primary);
}

/* ----- Phương thức thanh toán 4×50 ----- */

.ksite-checkout__methods {
    border: 1px solid var(--k-site-border-card);
    border-radius: var(--k-site-radius-lg);
}

.ksite-checkout__method {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding-inline: 16px;
    font-size: 14px;
    color: var(--k-site-body);
}

.ksite-checkout__method + .ksite-checkout__method {
    border-top: 1px solid var(--k-site-border-divider);
}

/* Nhãn dài xuống dòng thay vì tràn; chừa lề dưới để lỗi validate không nấp sau thanh tổng. */
@media (max-width: 1239.98px) {
    .ksite-checkout__method {
        height: auto;
        min-height: 50px;
        padding-block: 8px;
    }

    .ksite-checkout__card,
    .ksite-checkout__field {
        scroll-margin-bottom: calc(var(--k-site-tabbar-h) + 168px);
    }
}

.ksite-checkout__method:has(.ksite-checkout__method-radio:checked) {
    font-weight: 700;
    color: var(--k-site-primary);
    background: var(--k-site-primary-soft);
}

/* Nhãn trải hết dòng để bấm chỗ nào trong hàng cũng chọn được. */
.ksite-checkout__method-choice {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    height: 100%;
    cursor: pointer;
}

.ksite-checkout__method-radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--k-site-primary);
}

.ksite-checkout__method-mark {
    flex-shrink: 0;
    color: var(--k-site-success);
}

.ksite-checkout__method-icon {
    flex-shrink: 0;
    color: var(--k-site-primary);
}

.ksite-checkout__method-label {
    flex: 1;
}

.ksite-checkout__methods-note {
    font-size: 12px;
    color: var(--k-site-muted);
}

/* ----- Hộp tổng thanh toán 350 ----- */

.ksite-checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-lg);
    box-shadow: var(--k-site-shadow-filter);
}

.ksite-checkout-summary__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--k-site-heading);
}

.ksite-checkout-summary__services,
.ksite-checkout-summary__figures {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--k-site-border-divider);
}

.ksite-checkout-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--k-site-body);
}

.ksite-checkout-summary__service {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ksite-checkout-summary__row--saving span:last-child {
    color: var(--k-site-success);
}

.ksite-checkout-summary__total {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ksite-checkout-summary__amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--k-site-primary);
}

.ksite-checkout-summary__vat {
    font-size: 12px;
    color: var(--k-site-muted);
    text-align: right;
}

.ksite-checkout-summary__pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 302px;
    max-width: 100%;
    height: 45px;
    margin-inline: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--k-site-surface);
    background: var(--k-site-primary);
    border-radius: var(--k-site-radius-md);
}

.ksite-checkout-summary__pay[disabled] {
    cursor: not-allowed;
    background: var(--k-site-muted-soft);
}

.ksite-checkout-summary__blocked {
    font-size: 12px;
    font-weight: 600;
    color: var(--k-site-danger);
    text-align: center;
}

.ksite-checkout-summary__guarantee {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    font-size: 12px;
    color: var(--k-site-body);
    background: var(--k-site-primary-soft);
    border-radius: var(--k-site-radius-lg);
}

.ksite-checkout-summary__guarantee svg {
    flex-shrink: 0;
    color: var(--k-site-primary);
}

.ksite-checkout-summary__guarantee strong {
    display: block;
    color: var(--k-site-primary);
}

/* Bản trong luồng chỉ dùng ở mobile; desktop giữ bản nằm trong thẻ tổng thanh toán. */
.ksite-checkout-summary__guarantee--flow {
    display: none;
}

/* Nút bung và vạch kéo chỉ có nghĩa khi khối tổng là thanh dính đáy. */
.ksite-checkout-summary__toggle,
.ksite-checkout-summary__handle {
    display: none;
}

/* Desktop: hai lớp bọc tan biến, ba khối bên trong vẫn là con trực tiếp của thẻ tổng. */
.ksite-checkout-summary__details,
.ksite-checkout-summary__details-inner {
    display: contents;
}

/* Mobile: thanh tổng dính đáy hai trạng thái (frame 10466:5089 thu gọn, 10466:5048 mở rộng). */
@media (max-width: 1239.98px) {
    .ksite-js .ksite-checkout-summary {
        position: fixed;
        right: 0;
        bottom: var(--k-site-tabbar-h);
        left: 0;
        z-index: 62;
        gap: 12px;
        max-height: 76vh;
        overflow-y: auto;
        padding: 12px 16px 16px;
        border: 0;
        border-radius: var(--k-site-radius-xl) var(--k-site-radius-xl) 0 0;
        box-shadow: 0 -8px 24px rgb(0 26 109 / 12%);
    }

    /* Vạch kéo nằm trên cùng, trên cả ô voucher. */
    .ksite-js .ksite-checkout-summary__handle {
        display: block;
        order: -2;
        width: 44px;
        height: 20px;
        margin-inline: auto;
        background: linear-gradient(var(--k-site-border-divider) 0 0) center / 36px 4px no-repeat;
        border-radius: var(--k-site-radius-full);
    }

    /* Ô voucher lên đầu cả hai trạng thái theo frame; DOM giữ nguyên để desktop không đổi. */
    .ksite-js .ksite-checkout-summary .ksite-checkout-voucher {
        order: -1;
    }

    /* Bung/thu bằng grid-template-rows: đây là cách duy nhất cho chiều cao `auto` chuyển động được. */
    .ksite-js .ksite-checkout-summary__details {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.25s ease;
    }

    .ksite-js .ksite-checkout-summary[data-expanded="true"] .ksite-checkout-summary__details {
        grid-template-rows: 1fr;
    }

    .ksite-js .ksite-checkout-summary__details-inner {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        overflow: hidden;
    }

    .ksite-js .ksite-checkout-summary__toggle svg {
        transition: transform 0.25s ease;
    }

    /* Box đảm bảo chuyển xuống luồng nội dung, ngay sau phương thức thanh toán. */
    .ksite-checkout-summary .ksite-checkout-summary__guarantee {
        display: none;
    }

    .ksite-checkout-summary__guarantee--flow {
        display: flex;
    }

    .ksite-js .ksite-checkout-summary__toggle {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: -12px -12px -12px 0;
        color: var(--k-site-primary);
    }

    .ksite-js .ksite-checkout-summary[data-expanded="true"] .ksite-checkout-summary__toggle svg {
        transform: rotate(180deg);
    }

    .ksite-js .ksite-checkout-summary__pay {
        width: 100%;
        height: 48px;
    }

    /* Bàn phím ảo đẩy thanh lên che ô đang nhập — giấu hẳn trong lúc gõ. */
    .ksite-js .ksite-checkout-summary.is-typing {
        display: none;
    }

    /* Chừa chỗ cho thanh tổng ở trạng thái thu gọn, cộng thêm thanh tab đáy. */
    .ksite:has(.ksite-checkout-summary) {
        padding-bottom: calc(var(--k-site-tabbar-h) + 168px);
    }
}

/* ----- Ô mã giảm giá 185 + 101 ----- */

.ksite-checkout-voucher__form {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ksite-checkout-voucher__input {
    width: 185px;
    height: 45px;
    padding-inline: 14px;
    font: inherit;
    font-size: 14px;
    letter-spacing: inherit;
    border: 1px solid var(--k-site-border-control);
    border-radius: var(--k-site-radius-md);
}

@media (max-width: 1239.98px) {
    .ksite-checkout-voucher__input {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}

.ksite-checkout-voucher__input:focus {
    border-color: var(--k-site-primary);
    outline: none;
}

.ksite-checkout-voucher__code {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--k-site-primary);
}

.ksite-checkout-voucher__button {
    width: 101px;
    height: 45px;
    font-size: 14px;
    font-weight: 700;
    color: var(--k-site-primary);
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-primary);
    border-radius: var(--k-site-radius-md);
}

.ksite-checkout-voucher__error {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--k-site-danger);
}

.ksite-checkout-voucher--invalid .ksite-checkout-voucher__input {
    border-color: var(--k-site-danger);
}

/* ----- Giỏ rỗng ----- */

.ksite-checkout-empty {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding-block: 80px;
    color: var(--k-site-muted);
    text-align: center;
}

.ksite-checkout-empty__title {
    font-size: 22px;
    color: var(--k-site-heading);
}

.ksite-checkout-empty__action {
    height: 45px;
    padding-inline: 24px;
    font-weight: 700;
    line-height: 45px;
    color: var(--k-site-surface);
    background: var(--k-site-primary);
    border-radius: var(--k-site-radius-md);
}

/* ----- Tra cứu đơn cho khách vãng lai ----- */

.ksite-lookup {
    display: flex;
    justify-content: center;
    padding-block: 64px;
}

.ksite-lookup__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 460px;
    padding: 36px 32px;
    color: var(--k-site-muted);
    text-align: center;
    background: var(--k-site-surface);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-md);
}

.ksite-lookup__badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--k-site-primary);
    background: var(--k-site-primary-soft);
    border-radius: 50%;
}

.ksite-lookup__title {
    font-size: 22px;
    color: var(--k-site-heading);
}

.ksite-lookup__note {
    margin: 0;
    line-height: 1.6;
}

.ksite-lookup__code {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 10px 18px;
    background: var(--k-site-surface-elevated);
    border-radius: var(--k-site-radius-md);
}

.ksite-lookup__code strong {
    color: var(--k-site-heading);
    letter-spacing: 0.04em;
}

.ksite-lookup__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    text-align: left;
}

.ksite-lookup__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--k-site-heading);
}

.ksite-lookup__input {
    height: 45px;
    padding-inline: 14px;
    background: var(--k-site-surface-input);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-md);
}

.ksite-lookup__input:focus-visible {
    border-color: var(--k-site-primary);
    outline: none;
}

.ksite-lookup__submit {
    height: 45px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--k-site-surface);
    background: var(--k-site-primary);
    border: 0;
    border-radius: var(--k-site-radius-md);
    cursor: pointer;
}

.ksite-lookup__hint {
    margin: 0;
    font-size: 13px;
}

/* ----- Chi tiết đơn tra cứu (khung ngoài; ruột dùng chung với khu tài khoản) ----- */

.ksite-lookup-detail {
    padding-block: 24px 64px;
}

.ksite-lookup-detail__pay {
    margin-block: 4px 20px;
}

.ksite-lookup-detail__pay-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    height: 48px;
    padding-inline: 28px;
    font-weight: 700;
    color: var(--k-site-surface);
    background: var(--k-site-primary);
    border: 0;
    border-radius: var(--k-site-radius-md);
    cursor: pointer;
}

/* ----- Trang kết quả thanh toán ----- */

.ksite-pay-result {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    max-width: 560px;
    padding-block: 72px;
    color: var(--k-site-muted);
    text-align: center;
}

.ksite-pay-result__badge {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
}

.ksite-pay-result__badge--ok {
    color: var(--k-site-success-ink);
    background: rgb(49 211 108 / 12%);
}

.ksite-pay-result__badge--warn {
    color: var(--k-site-warning-ink);
    background: rgb(217 119 6 / 12%);
}

.ksite-pay-result__badge--danger {
    color: var(--k-site-danger);
    background: rgb(229 72 77 / 12%);
}

.ksite-pay-result__badge--neutral {
    color: var(--k-site-muted);
    background: var(--k-site-surface-elevated);
}

.ksite-pay-result__title {
    font-size: 24px;
    color: var(--k-site-heading);
}

.ksite-pay-result__note {
    margin: 0;
    line-height: 1.6;
}

.ksite-pay-result__code {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 10px 18px;
    background: var(--k-site-surface-elevated);
    border-radius: var(--k-site-radius-md);
}

.ksite-pay-result__code strong {
    color: var(--k-site-heading);
    letter-spacing: 0.04em;
}

.ksite-pay-result__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.ksite-pay-result__action {
    height: 45px;
    padding-inline: 24px;
    font-weight: 700;
    line-height: 43px;
    color: var(--k-site-heading);
    border: 1px solid var(--k-site-border);
    border-radius: var(--k-site-radius-md);
}

.ksite-pay-result__action--primary {
    color: var(--k-site-surface);
    background: var(--k-site-primary);
    border-color: var(--k-site-primary);
}

/* Mobile: khối kết quả co lại, ba nút xếp dọc full-width cho dễ chạm. */
@media (max-width: 767.98px) {
    .ksite-pay-result {
        gap: 12px;
        padding-block: 40px 32px;
    }

    .ksite-pay-result__badge {
        width: 64px;
        height: 64px;
    }

    .ksite-pay-result__title {
        font-size: 20px;
    }

    .ksite-pay-result__note {
        font-size: 14px;
    }

    .ksite-pay-result__code {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }

    .ksite-pay-result__code strong {
        overflow-wrap: anywhere;
    }

    .ksite-pay-result__actions {
        flex-direction: column;
        align-self: stretch;
    }

    .ksite-pay-result__action {
        text-align: center;
    }
}

/* ----- Bước đệm sang cổng thanh toán ----- */

.ksite-checkout-redirect {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding-block: 80px;
    text-align: center;
}

.ksite-checkout-redirect__title {
    font-size: 22px;
}

.ksite-checkout-redirect__note {
    font-size: 14px;
    color: var(--k-site-muted);
}

.ksite-checkout-redirect__button {
    height: 45px;
    padding-inline: 24px;
    font-weight: 700;
    color: var(--k-site-surface);
    background: var(--k-site-primary);
    border-radius: var(--k-site-radius-md);
}

.ksite-checkout-redirect__fallback {
    font-size: 13px;
    color: var(--k-site-muted-2);
    text-decoration: underline;
}

/* ----- Thanh tab đáy (mobile) ----- */

/* Tầng thấp nhất trong ba lớp dính: thanh hành động của trang chi tiết và checkout nằm trên nó và
   tự cộng offset bằng --k-site-tabbar-h. */
.ksite-tabbar {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    align-items: stretch;
    height: var(--k-site-tabbar-h);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--k-site-surface);
    border-top: 1px solid var(--k-site-border);
}

.ksite-tabbar__item {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    color: var(--k-site-ink-alt);
    text-align: center;
}

.ksite-tabbar__item.is-active {
    font-weight: 700;
    color: var(--k-site-primary);
}

.ksite-tabbar__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
}

.ksite-tabbar__badge {
    position: absolute;
    top: -6px;
    left: 11px;
    min-width: 16px;
    padding-inline: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    text-align: center;
    background: var(--k-site-primary);
    border-radius: var(--k-site-radius-full);
}

@media (max-width: 767.98px) {
    .ksite-tabbar {
        display: flex;
    }

    /* Chừa chỗ trên body chứ không trên <main>: footer nằm ngoài main nên cũng phải thoát khỏi thanh. */
    .ksite {
        padding-bottom: var(--k-site-tabbar-h);
    }
}

/* ----- Tấm trượt dùng chung ----- */

/* Desktop: lớp bọc tan biến, nội dung nằm nguyên trong luồng. Vai trò tấm trượt chỉ có ở mobile. */
.ksite-sheet,
.ksite-sheet__panel {
    display: contents;
}

.ksite-sheet__backdrop,
.ksite-sheet__handle,
.ksite-sheet__title {
    display: none;
}

/* Chỉ thành lớp phủ khi có JS mở được nó; không có JS thì nội dung nằm thẳng trong luồng như desktop. */
@media (max-width: 1239.98px) {
    /* visibility thay vì hidden: nhờ transition-delay mà tấm trượt còn kịp chạy hoạt cảnh lúc đóng. */
    .ksite-js .ksite-sheet {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: flex;
        align-items: flex-end;
        visibility: hidden;
        transition: visibility 0s linear 0.25s;
    }

    .ksite-js .ksite-sheet[data-open="true"] {
        visibility: visible;
        transition-delay: 0s;
    }

    .ksite-js .ksite-sheet__backdrop {
        position: absolute;
        inset: 0;
        display: block;
        background: rgb(0 0 0 / 45%);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .ksite-js .ksite-sheet[data-open="true"] .ksite-sheet__backdrop {
        opacity: 1;
    }

    .ksite-js .ksite-sheet__panel {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        background: var(--k-site-surface);
        border-radius: var(--k-site-radius-xl) var(--k-site-radius-xl) 0 0;
        transform: translateY(100%);
        transition: transform 0.25s ease;
    }

    .ksite-js .ksite-sheet[data-open="true"] .ksite-sheet__panel {
        transform: translateY(0);
    }

    .ksite-js .ksite-sheet__panel:focus {
        outline: none;
    }

    /* Tay nắm kiêm nút đóng: frame chỉ vẽ vạch kéo, nhưng vẫn cần một đích bấm và đích focus. */
    .ksite-js .ksite-sheet__handle {
        display: block;
        flex-shrink: 0;
        width: 44px;
        height: 24px;
        margin: 8px auto 0;
        background: linear-gradient(var(--k-site-border-divider) 0 0) center / 36px 4px no-repeat;
        border-radius: var(--k-site-radius-full);
    }

    .ksite-js .ksite-sheet__title {
        display: block;
        padding: 8px 16px 0;
        font-size: 18px;
        font-weight: 800;
        color: var(--k-site-heading);
    }

    /* Popup giữa màn hình thay vì bám đáy (frame 10466:6387). */
    .ksite-js .ksite-sheet--center {
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    .ksite-js .ksite-sheet--center .ksite-sheet__panel {
        max-width: 370px;
        border-radius: var(--k-site-radius-xl);
        transform: translateY(16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ksite-sheet,
    .ksite-sheet__backdrop,
    .ksite-sheet__panel,
    .ksite-checkout-summary__details,
    .ksite-checkout-summary__toggle svg {
        transition: none;
    }
}

/* ----- Xem ảnh phóng to ----- */

/* Đặt trên cả html lẫn body: html mới là khối cuộn, body chỉ lan lên viewport khi html còn visible. */
.ksite-noscroll {
    overflow: hidden;
}

.ksite-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ksite-lightbox[hidden] {
    display: none;
}

.ksite-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: var(--k-site-scrim);
}

.ksite-lightbox__dialog {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: min(1240px, 90vw);
}

.ksite-lightbox__image {
    display: block;
    max-width: min(1080px, 76vw);
    max-height: 82vh;
    border-radius: var(--k-site-radius-lg);
    object-fit: contain;
}

.ksite-lightbox__nav,
.ksite-lightbox__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--k-site-radius-full);
    background: var(--k-site-surface);
    color: var(--k-site-ink-alt);
    cursor: pointer;
}

.ksite-lightbox__close {
    position: absolute;
    top: -60px;
    right: 0;
}

.ksite-lightbox__counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--k-site-surface);
}

/* ----- Footer 1920×500 ----- */

.ksite-footer {
    padding-bottom: 56px;
    background: var(--k-site-surface-footer);
    border-top: 1px solid rgb(27 28 31 / 5%);
}

.ksite-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(1320px, 100%);
    margin-inline: auto;
    padding: 16px 40px;
}

.ksite-footer__brand {
    padding-block: 5px;
}

.ksite-footer__brand img {
    width: 187px;
    height: 60px;
    object-fit: contain;
}

.ksite-footer__legal,
.ksite-footer__office {
    font-size: 14px;
      line-height:2;
    color: var(--k-site-ink-alt);
}

.ksite-footer__badge img {
    width: 120px;
    height: 46px;
}

.ksite-footer__hotline {
    color: var(--k-site-primary);
}

.ksite-footer__links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ksite-footer__links a {
    font-size: 12px;
    line-height: 12px;
    color: var(--k-site-muted-3);
}

.ksite-footer__links a:hover {
    color: var(--k-site-primary);
}

.ksite-footer__links-sep {
    width: 1px;
    height: 12px;
    background: var(--k-site-border-divider);
}

.ksite-footer__social {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ksite-footer__social {
    min-height: 25px;
}

.ksite-footer__social img {
    width: 24px;
    height: 24px;    filter: grayscale(100%);
}

.ksite-footer__social a {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #8b8d92;
}

.ksite-footer__social a:hover {
    color: var(--k-site-primary);
}

.ksite-footer__contact {
    display: flex;
    gap: 24px;
    padding-bottom: 4px;
    font-size: 12px;
    line-height: 18px;
    color: var(--k-site-ink-alt);
}

.ksite-footer__separator {
    height: 1px;
    background: var(--k-site-border);
}

.ksite-footer__copyright {
    padding-top: 24px;
    font-size: 12px;
    line-height: 14px;
    color: var(--k-site-muted-3);
}

/* Mobile: lề 16 theo frame, hàng liên kết và hàng liên hệ xuống dòng thay vì tràn ngang. */
@media (max-width: 767.98px) {
    .ksite-footer__inner {
        padding: 24px 16px;
    }

    .ksite-footer__links,
    .ksite-footer__contact {
        flex-wrap: wrap;
        gap: 8px 16px;
    }
}

/* ============================================================
   Tablet và laptop hẹp (768–1239).
   Không có frame Figma cho khổ này: lớp base là khổ desktop 1240, mọi bề rộng cứng đo từ đó nên
   dải giữa tràn ngang. Chặn dưới 768px giữ cho lớp mobile ở trên không bị đụng tới.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1239.98px) {
    /* 268 là phần ló của khổ 1920 (14%); giữ nguyên ở đây thì ló chiếm tới 35% màn 768. */
    :root {
        --k-site-slide-width: calc(100vw - 120px);
        --k-site-slide-gap: 20px;
    }

    .ksite-header__primary {
        gap: 20px;
    }

    .ksite-header__brand img {
        width: 150px;
        height: 48px;
    }

    /* 410px cứng cộng với logo và dải tài khoản thì vượt khung; để ô tìm kiếm co theo chỗ còn lại. */
    .ksite-header__search {
        flex: 1;
        width: auto;
        min-width: 0;
        max-width: 410px;
    }

    .ksite-header__secondary {
        gap: 12px;
    }

    /* Widget rộng theo tỉ lệ slide nên ở khổ này chỉ còn ~360px cho bốn ô; đưa xuống luồng và cho
       xuống dòng thay vì đè lên hero. */
    .ksite-hero .ksite-search-widget {
        position: static;
        width: auto;
        margin: 20px var(--k-site-gutter) 0;
        transform: none;
    }

    .ksite-search-widget {
        flex-wrap: wrap;
    }

    /* flex: 1 để mặc thì min-width mặc định là auto, ô ngày không co được và đẩy widget tràn. */
    .ksite-search-widget__field,
    .ksite-search-widget__submit {
        flex: 1 1 180px;
        min-width: 0;
    }

    .ksite-service-rail__list {
        gap: 16px 8px;
    }

    /* Thẻ tour rộng cố định 297px: trả về co giãn rồi mới đếm lại số cột. */
    .ksite-tour-card {
        width: 100%;
    }

    .ksite-tour-grid,
    .ksite-recently-viewed .ksite-results-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .ksite-rank-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .ksite-rank-card__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 232 / 309;
    }

    .ksite-spots__panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ksite-spot-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 302 / 339;
    }

    /* Cột phải đã xuống dưới nội dung nên hộp điều kiện không còn lý do giữ bề ngang của cột. */
    .ksite-conditions {
        width: auto;
    }

    .ksite-checkout__fields,
    .ksite-checkout__passenger {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}