/* =============================================================================
   Theme Travel 1.0.0 — hệ thống thiết kế
   =============================================================================

   Bản mẫu giao diện dùng CSS inline trên từng thẻ. Ở đây thì không: theme là thứ
   sống nhiều năm và được sửa bởi người không viết ra nó, nên màu sắc, khoảng cách
   và bo góc phải có MỘT chỗ để đổi. Inline style cũng không dùng được media query,
   nên một trang inline hoàn toàn thì không có phiên bản điện thoại.

   Bảng màu lấy từ bản mẫu, nhưng sắc độ SUY RA từ --primary bằng color-mix. Nhờ vậy
   khi khách chọn màu thương hiệu ở màn hình Cài đặt, cả bảng màu đi theo — thay vì
   một màu nút mới chỏi với năm sắc độ xanh còn lại. Trình duyệt không hiểu color-mix
   thì dòng đó bị bỏ và giá trị tĩnh khai trước nó vẫn đúng.
   ========================================================================== */

:root {
    /* Màu nền tảng — layout ghi đè --primary bằng màu khách chọn */
    --primary:      #1EAFD0;
    --accent:       #FFB020;
    --accent-600:   #E89A0E;

    --ink:      #14232B;
    --ink-2:    #4C5F67;
    --paper:    #FFFFFF;
    --paper-2:  #F6FAFB;
    --line:     #DCE8EA;

    --footer-bg:  #0E2A33;
    --footer-ink: #B9D4D9;

    --danger: #B3261E;

    /* Sắc độ tĩnh: bản dự phòng cho trình duyệt không có color-mix */
    --primary-600: #159AB8;
    --primary-800: #0E6E85;
    --primary-50:  #EAF8FB;

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-pill: 100px;

    --shadow:    0 8px 24px -12px rgba(14, 42, 51, .14);
    --shadow-lg: 0 24px 48px -12px rgba(14, 42, 51, .22);

    --gutter: clamp(1rem, 4vw, 3.5rem);
    --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --primary-600: color-mix(in srgb, var(--primary) 88%, #000);
        --primary-800: color-mix(in srgb, var(--primary) 62%, #000);
        --primary-50:  color-mix(in srgb, var(--primary) 9%, #fff);
    }
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--primary-800); text-decoration: none; }
a:hover { color: var(--primary); }

::selection { background: var(--primary); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; }

/* Bàn phím phải thấy được mình đang ở đâu. Bản mẫu không có trạng thái này vì nó
   là ảnh tĩnh; một website thật thì có người dùng chỉ bằng bàn phím. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Chỉ hiện cho bàn phím, nhưng phải tồn tại: thanh điều hướng của theme này dài,
   và không có nó thì mỗi trang là 12 lần Tab trước khi tới nội dung. */
.skip-link {
    position: absolute; left: -9999px;
    background: var(--ink); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--tint { background: var(--paper-2); }
.section--ink  { background: var(--primary-800); color: #fff; }
.section--ink h2 { color: #fff; }

.section-head {
    display: flex; flex-wrap: wrap; gap: .75rem 2rem;
    align-items: baseline; justify-content: space-between;
    margin-bottom: 1.75rem;
}
.section-head p { color: var(--ink-2); margin: .25rem 0 0; }
.section-more { font-weight: 700; font-size: .9rem; white-space: nowrap; }

/* ── Nút ─────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-body); font-weight: 700; font-size: .95rem;
    padding: .8rem 1.4rem; border-radius: var(--radius-sm);
    border: 1.5px solid transparent; cursor: pointer;
    text-align: center; line-height: 1.2;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-600); color: #fff; }
.btn--accent  { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-600); color: var(--ink); }
.btn--ghost   { background: transparent; color: var(--primary-800); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary-800); }
.btn--pill    { border-radius: var(--radius-pill); }
.btn--block   { width: 100%; }
.btn[disabled], .btn--off { opacity: .55; pointer-events: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    position: sticky; top: 0; z-index: 30;
}
.site-header__bar {
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 84px; padding: .75rem var(--gutter);
    max-width: 1320px; margin: 0 auto;
    flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .65rem; margin-right: auto; }
.brand__mark {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-800));
    display: grid; place-items: center; color: #fff;
    font-family: var(--font-display); font-weight: 800;
}
.brand__logo { max-height: 44px; width: auto; }
.brand__name {
    font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
    letter-spacing: -.2px; color: var(--ink);
}

.site-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
    font-size: .95rem; font-weight: 500;
}
.site-nav a { color: var(--ink); display: inline-flex; align-items: center; gap: .3rem; }
.site-nav a:hover { color: var(--primary-800); }
.site-nav li { position: relative; }
.site-nav .submenu {
    list-style: none; margin: .35rem 0 0; padding-left: .9rem;
    font-size: .9rem; font-weight: 400;
}

/* Mũi tên chỉ báo mục có menu con — không thì một mục cha trông y hệt một liên kết
   thường, và trên điện thoại (nơi menu con luôn mở sẵn) người dùng không biết vì sao
   có thêm một danh sách ngay dưới một số mục nhưng không phải mục nào. */
.nav-caret { font-size: .65em; color: var(--ink-2); transition: transform .15s; }
.site-nav li.has-children:hover > a .nav-caret,
.site-nav li.has-children:focus-within > a .nav-caret { transform: rotate(180deg); color: var(--primary-800); }

/* Menu con mở bằng hover trên máy tính, và LUÔN nhìn thấy trên điện thoại: một menu
   chỉ mở bằng hover là một menu không tồn tại với màn hình cảm ứng. */
@media (min-width: 900px) {
    .site-nav .submenu {
        position: absolute; top: 100%; left: -.75rem; padding: .5rem;
        margin: 0; min-width: 220px; display: none;
        background: var(--paper); border: 1px solid var(--line);
        border-radius: var(--radius-sm); box-shadow: var(--shadow);
        max-height: 70vh; overflow-y: auto;
    }
    .site-nav li:hover > .submenu,
    .site-nav li:focus-within > .submenu { display: block; }
    .site-nav .submenu a { display: block; padding: .45rem .6rem; }
    .site-nav .submenu .nav-caret { display: none; }
}

.header-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.header-phone {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; font-size: .9rem; color: var(--primary-800);
    border: 1px solid var(--line); padding: .5rem .9rem; border-radius: var(--radius-pill);
}
.header-chip {
    width: 36px; height: 36px; border-radius: 50%; background: var(--primary-50);
    display: grid; place-items: center;
    font-size: 1.05rem; color: var(--primary-800);
}
.cart-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; font-size: .9rem; color: var(--primary-800);
    border: 1px solid var(--line); padding: .5rem .9rem; border-radius: var(--radius-pill);
}
.cart-count {
    background: var(--accent); color: var(--ink);
    border-radius: var(--radius-pill); padding: 0 .45rem;
    font-size: .78rem; font-weight: 800;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; color: #fff; }
.hero__bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(120deg, var(--primary-800), var(--primary));
    background-size: cover; background-position: center;
}
.hero__veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(14, 42, 51, .78), rgba(14, 42, 51, .3));
}
.hero__inner {
    position: relative; z-index: 2;
    max-width: 1320px; margin: 0 auto;
    padding: clamp(3rem, 9vw, 7rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}
.hero__text { max-width: 42rem; }
.hero h1 { color: #fff; margin-bottom: .6rem; }
.hero p { color: #EAF4F6; font-size: clamp(1rem, 2vw, 1.1rem); margin: 0; }
.hero__badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font-size: .82rem; font-weight: 600;
    padding: .4rem .9rem; border-radius: var(--radius-pill); margin-bottom: 1.1rem;
}

/* Ô tìm tour. Bản mẫu đặt nó tràn ra ngoài đáy hero bằng position:absolute và bù
   lại bằng padding-top 120px ở khối dưới. Ở đây nó nằm trong luồng: cách kia vỡ
   ngay khi chiều cao thay đổi, mà chiều cao thay đổi ở mọi màn hình hẹp. */
.tour-search {
    position: relative; z-index: 3;
    max-width: 1320px; margin: -1.5rem auto 0;
    padding: 0 var(--gutter);
}
.tour-search__card {
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 1.5rem;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: end;
}
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field > label { font-size: .78rem; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea {
    font: inherit; color: inherit;
    padding: .65rem .75rem; border: 1.5px solid var(--line);
    border-radius: var(--radius-sm); background: #fff; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field__error { color: var(--danger); font-size: .82rem; font-weight: 600; }
.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--danger); }
.req { color: var(--danger); }

/* ── Lưới thẻ ────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.grid--tours  { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--dest   { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.grid--cards  { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.grid--posts  { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.grid--usp    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2rem; }

/* Thẻ tour */
.tour {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    display: flex; flex-direction: column;
}
.tour__media { position: relative; aspect-ratio: 16 / 10; background: var(--primary-50); }
.tour__media img { width: 100%; height: 100%; object-fit: cover; }
.tour__media--blank {
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary-50), var(--paper-2));
    color: var(--primary-800); font-family: var(--font-display); font-weight: 800;
}
.tour__flag {
    position: absolute; top: .7rem; left: .7rem;
    background: var(--accent); color: var(--ink);
    font-size: .75rem; font-weight: 800;
    padding: .25rem .7rem; border-radius: var(--radius-pill);
}
.tour__body { padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.tour__code { font-size: .75rem; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }
.tour__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0; }
.tour__name a { color: var(--ink); }
.tour__name a:hover { color: var(--primary-800); }
.tour__excerpt { color: var(--ink-2); font-size: .9rem; margin: 0; }
.tour__foot { margin-top: auto; display: grid; gap: .7rem; }
.tour__actions { display: flex; gap: .6rem; }
.tour__actions .btn { flex: 1; padding: .65rem .8rem; font-size: .88rem; }

.price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price__now {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.25rem; color: var(--primary-800);
}
.price__was { font-size: .85rem; color: var(--ink-2); text-decoration: line-through; }
.price__off {
    font-size: .75rem; font-weight: 800; color: var(--ink);
    background: var(--accent); padding: .1rem .45rem; border-radius: var(--radius-sm);
}

.tag {
    display: inline-block; font-size: .75rem; font-weight: 700;
    padding: .2rem .6rem; border-radius: var(--radius-pill);
}
.tag--low { background: #FFF4E0; color: #8A5A00; }
.tag--out { background: #FDECEA; color: var(--danger); }
.tag--ok  { background: var(--primary-50); color: var(--primary-800); }

/* Thẻ điểm đến / danh mục tour */
.dest {
    position: relative; border-radius: var(--radius); overflow: hidden;
    min-height: 150px; display: flex; align-items: flex-end;
    padding: 1rem; color: #fff;
    background: linear-gradient(160deg, var(--primary), var(--primary-800));
}
.dest:hover { color: #fff; }
.dest__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.dest__count { font-size: .82rem; opacity: .9; }

/* Thẻ nhận xét khách hàng (script 034/035) */
.grid--testi { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.testi {
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.testi__photo { aspect-ratio: 16 / 10; background: var(--paper-2); }
.testi__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testi__body { padding: 1.3rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.testi__stars { color: var(--accent); font-size: .95rem; letter-spacing: .05em; }
.testi__quote { color: var(--ink-2); font-size: .92rem; line-height: 1.6; margin: 0; flex: 1; }
.testi__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.testi__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.testi__avatar--mark {
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary-50);
    display: grid; place-items: center; color: var(--primary-800);
    font-family: var(--font-display); font-weight: 800; font-size: .95rem; flex: none;
}
.testi__name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.testi__role { font-size: .78rem; color: var(--ink-2); }

/* Thẻ dịch vụ (trang tĩnh) */
.svc {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.3rem 1.1rem; display: flex; flex-direction: column; gap: .6rem;
    background: #fff;
}
.svc__icon {
    width: 44px; height: 44px; border-radius: 12px; background: var(--primary-50);
    display: grid; place-items: center; color: var(--primary-800);
    font-family: var(--font-display); font-weight: 800;
}
.svc__name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.svc__more { font-size: .85rem; font-weight: 700; margin-top: auto; }

/* Khối cam kết */
.usp { display: flex; flex-direction: column; gap: .7rem; }
.usp__mark { font-size: 1.7rem; line-height: 1; color: var(--accent); }
.usp__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.usp p { color: var(--footer-ink); font-size: .9rem; margin: 0; }

/* Thẻ bài viết */
.post { display: flex; flex-direction: column; gap: .6rem; }
.post__media {
    aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden;
    background: linear-gradient(135deg, var(--primary-50), var(--paper-2));
}
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__cat { font-size: .74rem; font-weight: 800; color: var(--primary-800); text-transform: uppercase; }
.post__title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin: 0; }
.post__title a { color: var(--ink); }
.post__meta { font-size: .8rem; color: var(--ink-2); }

/* ── Dải kêu gọi ─────────────────────────────────────────────────────────── */

.cta {
    background: linear-gradient(120deg, var(--primary), var(--primary-800));
    color: #fff;
}
.cta__inner {
    display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
    align-items: center; justify-content: space-between;
    padding: clamp(2rem, 4vw, 3rem) 0;
}
.cta h2 { color: #fff; margin: 0 0 .35rem; font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
.cta p { margin: 0; color: #EAF8FB; }

/* ── Thông báo ───────────────────────────────────────────────────────────── */

.notice {
    padding: .85rem 1.1rem; border-radius: var(--radius-sm);
    background: var(--primary-50); border: 1px solid var(--line);
    font-weight: 600; margin-bottom: 1.5rem;
}
.notice--loi { background: #FDECEA; border-color: #F5C2BD; color: var(--danger); }
.alert {
    padding: .85rem 1.1rem; border-radius: var(--radius-sm);
    background: #FDECEA; border: 1px solid #F5C2BD; color: var(--danger);
    font-weight: 600; margin-bottom: 1.25rem;
}

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

.detail { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .detail { grid-template-columns: 1.5fr 1fr; } }

.detail__media { border-radius: var(--radius); overflow: hidden; background: var(--primary-50); }

/* Trình chiếu ảnh tour (script 023). Không JavaScript: khung ảnh là một vùng cuộn
   ngang có scroll-snap — trượt bằng ngón tay trên điện thoại, cuộn bằng bàn phím khi
   khung đang được focus — còn dải ảnh nhỏ là liên kết #neo, và trình duyệt tự cuộn
   khung chứa tới tấm ảnh tương ứng. */
/* Mosaic ảnh bìa — CHỈ trang trí, chỉ hiện ở màn hình rộng. Vùng cuộn ngang bên dưới
   (.gallery__frames) mới là nơi xem đủ mọi ảnh và luôn hoạt động không cần JavaScript,
   nên mosaic ẩn khỏi trình đọc màn hình (aria-hidden, tabindex="-1") thay vì lặp lại
   cùng nội dung hai lần cho người dùng bàn phím / trình đọc màn hình. */
.gallery__mosaic {
    display: none; gap: .5rem; height: 380px; margin-bottom: .6rem;
    grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
}
@media (min-width: 900px) { .gallery__mosaic { display: grid; } }
.gallery__tile {
    position: relative; display: block; overflow: hidden; border-radius: var(--radius);
    background: var(--primary-50);
}
.gallery__tile--main { grid-row: span 2; }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; }
.gallery__more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(14, 42, 51, .55); color: #fff; font-weight: 700; font-size: .95rem;
}

.gallery__frames {
    display: flex; overflow-x: auto; gap: .5rem;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    border-radius: var(--radius); background: var(--primary-50);
}
.gallery__frames img {
    flex: 0 0 100%; scroll-snap-align: center;
    aspect-ratio: 4 / 3; object-fit: cover;
}
.gallery__frames:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gallery__thumbs { display: flex; gap: .45rem; margin-top: .6rem; overflow-x: auto; }
.gallery__thumbs a {
    flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 2px; line-height: 0; background: #fff;
}
.gallery__thumbs a:hover { border-color: var(--primary); }
.gallery__thumbs img { width: 72px; height: 54px; object-fit: cover;
                       border-radius: calc(var(--radius-sm) - 2px); }
.detail__body :where(p, ul, ol, table) { margin: 0 0 1rem; }
.detail__body img { border-radius: var(--radius-sm); margin: 1rem 0; }
.detail__body table { border-collapse: collapse; width: 100%; }
.detail__body th, .detail__body td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
.detail__body h2, .detail__body h3 { margin-top: 1.75rem; }

/* Mô tả tour thường viết theo dạng "Ngày 1: …", "Ngày 2: …" trong một <ul> (nội dung
   HTML thật, đã lọc allow-list lúc lưu — bất biến 12). Đánh số bằng bộ đếm CSS cho nó
   dáng lịch trình mà không đòi hỏi markup đặc biệt nào từ người soạn bài. */
.detail__body ul {
    list-style: none; padding: 0; counter-reset: buoc;
}
.detail__body ul li {
    counter-increment: buoc;
    position: relative; padding: 0 0 1.1rem 2.6rem; margin: 0;
}
.detail__body ul li::before {
    content: counter(buoc);
    position: absolute; left: 0; top: 0;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
}
.detail__body ul li::after {
    content: ''; position: absolute; left: .95rem; top: 1.9rem; bottom: 0;
    width: 2px; background: var(--line);
}
.detail__body ul li:last-child::after { display: none; }
.detail__body ul li:last-child { padding-bottom: 0; }

.booking {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem; background: #fff; box-shadow: var(--shadow);
    display: grid; gap: 1rem;
    position: sticky; top: 104px;
}
.booking__meta { display: grid; gap: .35rem; font-size: .9rem; color: var(--ink-2); }
.crumbs { font-size: .85rem; color: var(--ink-2); margin-bottom: 1rem; }
.crumbs a { color: var(--ink-2); }

/* ── Bảng giỏ hàng ───────────────────────────────────────────────────────── */

/* Bảng đổi thành thẻ xếp dọc dưới 760px. Một bảng 5 cột trên điện thoại thì hoặc
   tràn ngang hoặc chữ nhỏ tới mức không đọc được — và giỏ hàng là trang mà phần
   lớn lượt truy cập đến từ điện thoại. */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th, .cart-table td {
    padding: .85rem .6rem; border-bottom: 1px solid var(--line);
    text-align: left; vertical-align: top;
}
.cart-table th { font-size: .8rem; text-transform: uppercase; color: var(--ink-2); }
.cart-table tfoot th { font-size: 1rem; text-transform: none; color: var(--ink); }
.cart-line { display: flex; gap: .8rem; align-items: flex-start; }
.cart-line__thumb {
    width: 72px; height: 56px; border-radius: var(--radius-sm); overflow: hidden;
    flex-shrink: 0; background: var(--primary-50);
}
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-weight: 700; }
.cart-qty { display: flex; gap: .35rem; align-items: center; }
.cart-qty input { width: 4.5rem; }
.cart-problem { color: var(--danger); font-size: .85rem; font-weight: 600; margin: .3rem 0 0; }

@media (max-width: 759px) {
    .cart-table thead { display: none; }
    .cart-table, .cart-table tbody, .cart-table tfoot,
    .cart-table tr, .cart-table th, .cart-table td { display: block; width: auto; }
    .cart-table tr {
        border: 1px solid var(--line); border-radius: var(--radius);
        padding: .9rem; margin-bottom: 1rem;
    }
    .cart-table td { border: 0; padding: .35rem 0; }
    .cart-table td[data-nhan]::before {
        content: attr(data-nhan) ": ";
        font-weight: 700; color: var(--ink-2); font-size: .82rem;
    }
}

.summary {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; background: var(--paper-2); display: grid; gap: .5rem;
}
.summary__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.summary__row--total {
    border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .2rem;
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
}

.two-col { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; } }

.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid--pair { grid-template-columns: 1fr 1fr; } }

.dl-meta { display: grid; gap: .5rem 1.5rem; margin: 0 0 1.25rem; }
@media (min-width: 560px) { .dl-meta { grid-template-columns: max-content 1fr; } }
.dl-meta dt { font-weight: 700; color: var(--ink-2); font-size: .88rem; }
.dl-meta dd { margin: 0; }

.lines { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.lines li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.lines__name { font-weight: 600; }
.lines__qty { color: var(--ink-2); font-size: .88rem; }

.done-mark {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.25rem;
    background: var(--primary-50); color: var(--primary-800);
    display: grid; place-items: center; font-size: 1.8rem;
}
.center { text-align: center; }
.code-box {
    display: inline-block; font-family: var(--font-display); font-weight: 800;
    font-size: 1.3rem; letter-spacing: .05em;
    background: var(--primary-50); color: var(--primary-800);
    padding: .5rem 1.1rem; border-radius: var(--radius-sm);
}

.empty { text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; color: var(--ink-2); }
.empty h2 { color: var(--ink); }

/* ── Trang danh sách tour: sidebar lọc + khu kết quả ─────────────────────── */

.store-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .store-layout { grid-template-columns: 260px 1fr; } }

.store-filters { display: flex; flex-direction: column; gap: 1.25rem; }
.filter-group {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; background: #fff;
}
.filter-group__title {
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    margin-bottom: .9rem;
}
.filter-group .field { margin-bottom: 0; }

.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.cat-list a {
    display: flex; justify-content: space-between; gap: .6rem;
    padding: .5rem .1rem; border-radius: var(--radius-sm);
    color: var(--ink); font-size: .92rem;
}
.cat-list a:hover { color: var(--primary-800); background: var(--paper-2); }
.cat-list a.is-active { color: var(--primary-800); font-weight: 700; background: var(--primary-50); }
.cat-list .count { color: var(--ink-2); font-size: .85rem; }
.cat-list a.is-active .count { color: inherit; opacity: .75; }

.results-toolbar {
    display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
    justify-content: space-between; margin-bottom: 1.5rem;
}
.results-toolbar__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.results-toolbar__sort { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.results-toolbar__sort label { font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.results-toolbar__sort select { padding: .55rem .7rem; }

/* ── Thanh lọc và phân trang ─────────────────────────────────────────────── */

.filter-bar {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: end;
    padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--paper-2); margin-bottom: 1.75rem;
}
.filter-bar .field { flex: 1 1 190px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .88rem; font-weight: 600; padding: .45rem 1rem;
    border-radius: var(--radius-pill); border: 1px solid var(--line);
    background: #fff; color: var(--ink-2);
}
.chip:hover { border-color: var(--primary); color: var(--primary-800); }
.chip--on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip--on:hover { color: #fff; }

/* Nhãn bộ lọc đang bật, có dấu ✕ để gỡ — dùng ở thanh công cụ trang danh sách. */
.chip--tag { background: var(--primary-50); border-color: var(--primary-50); color: var(--primary-800); }
.chip--tag span { opacity: .7; }
.chip--tag:hover { color: var(--primary-800); border-color: var(--primary); }

.pager {
    display: flex; gap: .5rem; align-items: center; justify-content: center;
    margin-top: 2.5rem; font-weight: 600; flex-wrap: wrap;
}
.pager span { color: var(--ink-2); font-weight: 400; }

/* Mục lục trang dạng số (1 2 … 8 9). Dùng chung khối vuông bo góc với các "." điểm
   dừng khác của theme, để không tạo thêm một kiểu nút mới. */
.pager__num, .pager__gap {
    min-width: 2.4rem; height: 2.4rem; padding: 0 .3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); font-size: .9rem;
}
.pager__num { border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.pager__num:hover { border-color: var(--primary); color: var(--primary-800); }
.pager__num--on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager__num--on:hover { color: #fff; }
.pager__gap { color: var(--ink-2); font-weight: 400; }
.pager__arrow { font-weight: 700; }

/* ── Danh sách bài viết: bài nổi bật + hai cột nội dung/liên quan ──────────── */

.post-featured {
    display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
    background: var(--paper-2); border-radius: var(--radius-lg); overflow: hidden;
    color: var(--ink); margin-bottom: 2.5rem;
}
.post-featured:hover { color: var(--ink); }
.post-featured__media {
    min-height: 260px;
    background: linear-gradient(135deg, var(--primary-50), var(--paper-2));
}
.post-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.post-featured__body { padding: 2rem 2.2rem 2rem 0; display: flex; flex-direction: column; justify-content: center; }
.post-featured__body .post__cat { margin-bottom: .7rem; }
.post-featured__body h2 { margin: 0 0 .8rem; }
.post-featured__body p { color: var(--ink-2); font-size: .98rem; line-height: 1.75; margin: 0 0 1rem; }
@media (max-width: 760px) {
    .post-featured { grid-template-columns: 1fr; }
    .post-featured__media { min-height: 200px; }
    .post-featured__body { padding: 1.4rem 1.5rem 1.75rem; }
}

/* ── Bài viết chi tiết: nội dung + sidebar "liên quan" ──────────────────────── */

.article-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .article-layout { grid-template-columns: 1fr 300px; } }
.article-layout .article { max-width: none; margin: 0; }

.related-list { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.related-list a { display: flex; gap: .8rem; color: var(--ink); }
.related-list a:hover { color: var(--primary-800); }
.related-list__thumb {
    width: 76px; height: 58px; border-radius: var(--radius-sm); overflow: hidden;
    flex-shrink: 0; background: var(--primary-50);
}
.related-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-list__title { font-size: .88rem; font-weight: 600; line-height: 1.4; }
.sidebar-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin-bottom: 1rem; }

/* ── Bài viết ────────────────────────────────────────────────────────────── */

.article { max-width: 46rem; margin: 0 auto; }
.article__hero { border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; }
.article__meta { color: var(--ink-2); font-size: .9rem; margin-bottom: 1.5rem; }
.article__body :where(p, ul, ol, blockquote) { margin: 0 0 1.1rem; }
.article__body img { border-radius: var(--radius-sm); margin: 1.25rem 0; }
.article__body blockquote {
    border-left: 3px solid var(--primary); padding-left: 1rem;
    color: var(--ink-2); font-style: italic;
}
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }

/* ── Trang Liên hệ ───────────────────────────────────────────────────────── */

.contact-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 3rem; }
.contact-card {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1rem;
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem;
    background: #fff;
}
.contact-card__icon {
    width: 48px; height: 48px; border-radius: 50%; background: var(--primary-50);
    display: grid; place-items: center; color: var(--primary-800);
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
}
.contact-card__label { font-weight: 700; font-size: .95rem; }
.contact-card__value { font-size: .88rem; color: var(--ink-2); }
.contact-card a.contact-card__value { color: var(--primary-800); font-weight: 600; }

.contact-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.1fr 1fr; } }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; height: 320px; background: var(--primary-50); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Chân trang ──────────────────────────────────────────────────────────── */

.site-footer { background: var(--footer-bg); color: var(--footer-ink); font-size: .9rem; }
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: #fff; }
.site-footer__cols {
    display: grid; gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
}
.site-footer__cols > div:first-child { grid-column: span 1; }
@media (min-width: 900px) { .site-footer__cols > div:first-child { grid-column: span 1; } }
.footer-title { color: #fff; font-weight: 700; font-size: .92rem; margin-bottom: .9rem; }
.footer-brand {
    font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
    color: #fff; margin-bottom: .8rem;
}
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-legal { display: grid; gap: .45rem; line-height: 1.7; }
.google-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255, 255, 255, .08); border-radius: var(--radius-pill);
    padding: .4rem .9rem; margin-bottom: 1rem; font-size: .85rem; font-weight: 700;
    color: #fff;
}
.google-badge__star { color: #fbbf24; }
.google-badge__count { font-weight: 500; color: rgba(255, 255, 255, .7); }
.footer-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.footer-social a {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); display: grid; place-items: center;
    font-size: 1rem; color: #fff;
}
.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 1.1rem 0 1.5rem; font-size: .82rem;
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}

/* ── Nút liên hệ nổi ─────────────────────────────────────────────────────── */

.floating { position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
            display: flex; flex-direction: column; gap: .6rem; }
.floating a {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center; box-shadow: var(--shadow-lg);
    font-size: 1.4rem; line-height: 1;
}
.floating a:hover { background: var(--primary-600); color: #fff; }

/* ── Trang lỗi ───────────────────────────────────────────────────────────── */

.error-page { text-align: center; padding: clamp(3rem, 10vw, 7rem) var(--gutter); }
.error-page__code {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--primary-50);
}
.error-page__trace { color: var(--ink-2); font-size: .82rem; margin-top: 1.5rem; }

/* Người dùng đã tắt hiệu ứng thì đừng bật lại. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
    .site-header, .site-footer, .floating, .tour__actions, .cart-qty { display: none; }
    body { color: #000; }
}

/* "Liên hệ báo giá" thay cho một con số — chế độ thu gọn (script 022). Nhỏ hơn giá
   thật vì nó là một lời mời, không phải một con số để so sánh. */
.price__ask { font-size: 1.05rem; font-weight: 600; color: var(--ink-2); }

/* ============================================================================
   Tìm kiếm toàn site (script 045)
   ========================================================================= */

/* Nhãn chỉ dành cho trình đọc màn hình. KHÔNG dùng display:none — thứ đó làm
   trình đọc màn hình bỏ qua luôn phần tử, tức mất đúng cái nhãn này. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.site-search { display: flex; align-items: center; gap: .35rem; }

.site-search__input {
    min-width: 0; width: 9.5rem; padding: .4rem .7rem;
    font: inherit; font-size: .9rem; color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line); border-radius: 999px;
    transition: width .18s ease, border-color .18s ease;
}
.site-search__input:focus {
    width: 13rem; outline: none; border-color: var(--primary);
}
.site-search__input::placeholder { color: var(--ink-2); }

.site-search__go {
    padding: .4rem .8rem; font: inherit; font-size: .85rem; font-weight: 600;
    color: var(--paper); background: var(--primary);
    border: 0; border-radius: 999px; cursor: pointer;
}
.site-search__go:hover { filter: brightness(1.08); }

/* Trang kết quả */
.search-form--page { display: flex; gap: .5rem; margin: 0 0 1.75rem; max-width: 34rem; }
.search-form--page input {
    flex: 1; padding: .6rem .9rem; font: inherit;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: 8px;
}
.search-form--page button {
    padding: .6rem 1.2rem; font: inherit; font-weight: 600;
    color: var(--paper); background: var(--primary);
    border: 0; border-radius: 8px; cursor: pointer;
}

.search-results { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.search-result {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.search-result__thumb img {
    width: 120px; height: 84px; object-fit: cover; border-radius: 8px; display: block;
}
.search-result__kind {
    display: inline-block; margin-bottom: .2rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--primary);
}
.search-result__title {
    display: block; font-size: 1.05rem; font-weight: 700;
    color: var(--ink); text-decoration: none;
}
.search-result__title:hover { color: var(--primary); }
.search-result__excerpt { margin: .35rem 0 0; color: var(--ink-2); font-size: .93rem; }

.search-count, .search-hint, .search-empty { color: var(--ink-2); }
.search-empty { font-size: 1.05rem; color: var(--ink); }

@media (max-width: 640px) {
    .site-search__input, .site-search__input:focus { width: 100%; }
    .site-search { width: 100%; }
    .search-result__thumb img { width: 84px; height: 60px; }
}


/* ── Thông số mở rộng (script 055) ─────────────────────────────────────────
   Hai cột: nhãn bên trái, giá trị bên phải. dl/dt/dd chứ không table — đây là
   danh sách cặp tên–giá trị, không phải dữ liệu hai chiều. */
.detail__specs { margin: 1.5rem 0; }
.detail__specs h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.detail__specs dl {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: .4rem 1rem;
    margin: 0;
}
.detail__specs dt { color: var(--ink-2); }
.detail__specs dd { margin: 0; font-weight: 600; }

/* Biểu tượng kênh liên hệ — shared/_social-icon của theme default.
   Cỡ do font-size của TỪNG ngữ cảnh quyết định, vì SVG khai width/height = 1em:
   nhờ vậy chỗ định cỡ vẫn là chỗ trước đây định cỡ cho hai ký tự, không thêm biến
   mới. `display: block` là bắt buộc — một SVG inline nằm trên đường baseline nên
   nó bị đẩy lệch xuống vài pixel trong ô đã canh giữa, và lệch đó nhìn ra được. */
.social-icon { display: block; }