/* ===================================================================
   VIET TRAVEL JAPAN - Style chính
   Phong cách web du lịch Nhật: mật độ thông tin dày, chữ nhỏ,
   bố cục 2 cột (sidebar tìm kiếm 250px + nội dung 990px)
   Thứ tự: 1.Biến & base  2.Thành phần chung  3.Header  4.Bố cục
           5.Trang chủ  6.Trang con  7.Footer  8.Responsive
   =================================================================== */

/* ============ 1. BIẾN & BASE ============ */
:root {
    /* Bảng màu thương hiệu */
    --navy: #0066B3;          /* Xanh biển đậm - chữ đậm, nền footer */
    --sky: #00BFEA;           /* Xanh cyan tươi sáng - điểm nhấn, dải gradient */
    --teal: #0878D1;          /* Xanh dương chủ đạo - nút, link, icon */
    --ocean: #0066B3;         /* Xanh biển đậm - thanh menu, trạng thái hover */
    --gold: #E3BC55;          /* Vàng gold (sáng) - dùng cho nền nút, nhãn */
    --gold-dark: #C8A64B;     /* Vàng gốc - trạng thái hover */
    --gold-text: #A8821F;     /* Vàng đậm - dùng khi là CHỮ trên nền sáng */

    --primary: var(--teal);        /* #0878D1 - nút, link, icon */
    --primary-dark: var(--ocean);  /* #0066B3 - trạng thái hover */
    --primary-light: #E6F1FB;      /* nền nhạt pha từ #0878D1 */
    --primary-pale: #F2F8FD;
    --accent: var(--gold);
    --accent-dark: var(--gold-dark);
    --on-accent: #003A66;     /* Chữ sẫm trên nền sáng: gold, cyan */

    --text: #333;
    --muted: #767676;
    --border: #D8DEE3;
    --border-light: #E8ECEF;
    --gray: #F3F6F8;
    --cream: #FBEDD6;      /* nền kem cho khối gợi ý điểm tham quan */
    --white: #fff;

    --radius: 4px;
    --shadow: 0 1px 4px rgba(0, 58, 102, .12);
    --shadow-hover: 0 2px 10px rgba(0, 58, 102, .14);
    --transition: all .25s ease;

    /* Khoảng cách chuẩn giữa các khối (lấy theo khối "tìm theo khu vực") */
    --gap: 10px;          /* khoảng cách chuẩn giữa mọi item: khu vực, thẻ tour,
                             lý do chọn, đánh giá, liên hệ, số liệu */
    --pad-label: 8px 11px;   /* nhãn tên nằm dưới ảnh */
    --pad-box: 12px;         /* ruột các ô nội dung */

    /* Bố cục */
    --container: 1260px;
    --sidebar: 250px;
    /* Chừa chỗ cho .gnav khi nó neo lên đầu: thanh menu cao đúng 39px
       (padding 9px x2 + dòng chữ 12.5px/1.7), cộng ~11px cho thoáng.
       Đặt 100px như trước thì cột phải neo thấp hơn menu 61px -> hổng một mảng. */
    --sticky-top: 50px;
}

html {
    /* Bấm link neo trong trang thì chừa đúng chiều cao phần đang dính trên cùng,
       nếu không tiêu đề bị menu che (đặt dư thì tụt xuống thấp hơn chỗ cần đến).
       >=992px: .gnav neo, cao 39px. */
    scroll-padding-top: 50px;
}

body,
html {
    /* Mặc định (bản tiếng Việt): ưu tiên font Latin có đủ dấu, font Nhật chỉ để dự phòng
       - font Nhật không có sẵn dấu tiếng Việt nên chữ bị rời dấu (vd "chỗ", "Huế") */
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Yu Gothic Medium", Meiryo, sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    background: var(--white);
}

/* Bản tiếng Nhật: ưu tiên font Nhật */
html[lang="ja"],
html[lang="ja"] body {
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
        Meiryo, "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
}

body {
    overflow-x: hidden;
    /* clip không tạo scroll container nên .vuta-header sticky mới ăn trên mobile */
    overflow-x: clip;
}

body.ovh {
    overflow: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

a:hover {
    color: var(--primary);
}

ul,
ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--text);
    font-weight: 700;
    line-height: 1.45;
    font-size: inherit;
}

/* ============ 2. THÀNH PHẦN CHUNG ============ */
/* Tiêu đề khối: thanh ngang xanh, kiểu web Nhật */
.sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 7px 12px;
    background: var(--primary-light);
    border-left: 5px solid var(--primary);
}

.sec-head__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
}

.sec-head__title small {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

.sec-head__link {
    flex: none;
    font-size: 12px;
    color: var(--primary);
}

.sec-head__link:hover {
    text-decoration: underline;
}

/* Tiêu đề phụ: gạch chân */
.sub-head {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--primary);
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.sec {
    margin-bottom: 30px;
}

/* Nút */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: var(--transition);
}

.btn--accent {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
}

.btn--accent:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--on-accent);
}

.btn--primary {
    background: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}

.btn--primary:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn--outline {
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn--outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

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

.btn--lg {
    min-height: 44px;
    font-size: 15px;
    padding: 8px 26px;
}

.btn--sm {
    min-height: 28px;
    padding: 3px 12px;
    font-size: 12px;
}

/* Nhãn */
.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

.tag--primary {
    background: var(--primary);
    color: var(--white);
}

.tag--navy {
    background: var(--navy);
    color: var(--white);
}

.tag--gold {
    background: var(--accent);
    color: var(--on-accent);
}

.tag--outline {
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--white);
}

/* Sao đánh giá */
.stars {
    display: inline-flex;
    gap: 1px;
    color: var(--accent);
    font-size: 11px;
}

.rate {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
}

.rate__score {
    font-weight: 700;
    color: var(--gold-text);
}

/* Giá */
.price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.price del {
    font-size: 11px;
    color: var(--muted);
}

.price strong {
    font-size: 21px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
}

.price span {
    font-size: 11px;
    color: var(--muted);
}

/* Input */
.vuta-input {
    height: 32px;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

.vuta-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(8, 120, 209, .15);
}

select.vuta-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 26px;
}

textarea.vuta-input {
    height: auto;
    min-height: 110px;
}

/* ============ 3. HEADER ============ */
.topbar {
    border-bottom: 1px solid var(--border-light);
    background: var(--white);
    font-size: 11px;
    color: var(--muted);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 28px;
}

.topbar__desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.topbar__right a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.lang-switch {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.lang-switch a {
    padding: 1px 8px;
    font-weight: 700;
    color: var(--muted);
    background: var(--white);
}

.lang-switch a.active {
    background: var(--primary);
    color: var(--white);
}

.vuta-header {
    background: var(--white);
    border-bottom: 3px solid var(--primary);
    width: 100%;
    z-index: 100;
}

/* Không neo cả header - phần neo nằm ở .gnav.fixed-top bên dưới. */

.header__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    color: var(--navy);
}

.logo i {
    font-size: 26px;
    color: var(--accent);
}

.logo__img {
    display: block;
    width: 80px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    flex: none;
}

.logo__text {
    line-height: 1.15;
}

.logo__text strong {
    display: block;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.logo__text span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .02em;
}

.header__search {
    display: flex;
    flex: 1;
    max-width: 420px;
}

.header__search input {
    flex: 1;
    height: 34px;
    padding: 4px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}

.header__search input:focus {
    outline: 0;
    border-color: var(--primary);
}

.header__search button {
    width: 42px;
    height: 34px;
    background: var(--primary);
    color: var(--white);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.header__search button:hover {
    background: var(--navy);
}

.header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: none;
}

.header__tel {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.2;
}

.header__tel > i {
    font-size: 25px;
    color: var(--primary);
}

.header__tel-text {
    text-align: right;
}

.header__tel strong a:hover {
    color: var(--primary);
}

.header__tel span {
    display: block;
    font-size: 10px;
    color: var(--muted);
}

.header__tel strong {
    font-size: 19px;
    font-weight: 800;
    color: var(--navy);
}

/* Menu ngang */
.gnav {
    background: var(--ocean);
}

.gnav.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 58, 102, .15);
}

/* Hàng menu: danh sách bên trái, hai nút tìm kiếm dồn về phải */
.gnav__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
}

.gnav__list {
    display: flex;
    flex: 1;
    min-width: 0;
}

.gnav__btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 0;
}

.gnav__btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 29px;
    padding: 0 11px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ocean);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.gnav__btn i {
    font-size: 13px;
}

.gnav__btn:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.gnav__btn--gold {
    background: var(--gold);
    color: var(--on-accent);
}

.gnav__btn--gold:hover {
    background: var(--gold-dark);
    color: var(--on-accent);
}

.gnav__list > li {
    position: relative;
}

.gnav__list > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--white);
    border-right: 1px solid rgba(255, 255, 255, .14);
}

.gnav__list > li:first-child > a {
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.gnav__list > li > a i {
    font-size: 10px;
}

.gnav__list > li:hover > a,
.gnav__list > li.active > a {
    background: var(--sky);
    color: var(--white);
}

.gnav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 215px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: var(--transition);
}

.gnav__list > li:hover .gnav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gnav__sub li a {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-light);
}

.gnav__sub li:last-child a {
    border-bottom: 0;
}

.gnav__sub li a:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.header__burger {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 17px;
    color: var(--navy);
}

/* Menu mobile - khung do vuta.libs lo */
.menu-mobile .wraper-menu-mobile {
    padding: 0 0 20px;
    display: flex;
    flex-direction: column;
}

/* lib ghi ở mức #menu-mobile .close-mobile-menu (top 5px, right 25px, padding 10px,
   font-size 20px) nên phải ghi đè cùng mức đặc hiệu, bỏ padding thì dấu X mới nằm giữa */
#menu-mobile .close-mobile-menu {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray);
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
}

.menu-mobile__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.menu-mobile__list {
    flex: 1;
}

.menu-mobile__list > li {
    position: relative;
    border-bottom: 1px solid var(--border-light);
}

.menu-mobile__list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
}

.menu-mobile__list > li > a > i {
    width: 32px;
    height: 32px;
    margin-right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: var(--transition);
}

.dropdown__list {
    display: none;
    background: var(--gray);
}

.dropdown.open .dropdown__list {
    display: block;
}

.dropdown.open > a > i {
    transform: rotate(180deg);
}

.dropdown__list li a {
    display: block;
    padding: 9px 28px;
    font-size: 13px;
    color: var(--muted);
    border-bottom: 1px solid var(--border-light);
}

.menu-mobile__foot {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-mobile__tel {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 38, 66, .55);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============ 4. BỐ CỤC 2 CỘT ============ */
.layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0 40px;
}

.layout__side {
    width: var(--sidebar);
    flex: none;
    /* Neo lại khi cuộn; nếu nội dung dài hơn màn hình thì tự cuộn bên trong */
    position: sticky;
    top: var(--sticky-top);
    align-self: flex-start;
    max-height: calc(100vh - var(--sticky-top) - 10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.layout__side::-webkit-scrollbar {
    width: 6px;
}

.layout__side::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.layout__side::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.layout__main {
    flex: 1;
    min-width: 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 0;
    font-size: 11px;
    color: var(--muted);
    border-bottom: 1px solid var(--border-light);
}

.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin-left: 6px;
    color: var(--border);
}

.breadcrumb a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Sidebar tìm kiếm */
.side-box {
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
}

.side-box__head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    background: var(--primary);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
}

.side-box__head--gold {
    background: var(--accent);
    color: var(--on-accent);
}

.side-box__body {
    padding: 10px;
}

.side-field {
    margin-bottom: 10px;
}

.side-field > label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
}

.side-field .vuta-input {
    width: 100%;
}

/* Nhóm checkbox có thể đóng mở */
.side-group {
    border-top: 1px solid var(--border-light);
}

.side-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
}

.side-group__head i {
    color: var(--muted);
    font-size: 11px;
    transition: var(--transition);
}

.side-group.open .side-group__head i {
    transform: rotate(180deg);
}

.side-group__list {
    display: none;
    padding-bottom: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.side-group.open .side-group__list {
    display: block;
}

.side-group__list label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    cursor: pointer;
}

.side-group__list label:hover {
    color: var(--primary);
}

.side-group__list input {
    margin-top: 3px;
    accent-color: var(--primary);
    flex: none;
}

.side-group__list .count {
    margin-left: auto;
    color: var(--muted);
    font-size: 11px;
}

/* Khối phụ trong sidebar */
.side-rank li {
    display: flex;
    gap: 8px;
    padding: 9px 2px;
    border-bottom: 1px dotted var(--border);
}

.side-rank li:last-child {
    border-bottom: 0;
}

.side-rank__no {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: var(--navy);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
}

.side-rank li:nth-child(1) .side-rank__no {
    background: var(--accent);
    color: var(--on-accent);
}

.side-rank__thumb {
    display: block;
    width: 56px;
    flex: none;
}

.side-rank__thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
}

.side-rank__text {
    display: block;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.45;
    overflow: hidden;
}

.side-rank__text > a {
    display: block;
    max-height: 2.9em;
    overflow: hidden;
}

.side-rank__text strong {
    display: block;
    color: var(--navy);
    font-size: 12px;
    margin-top: 2px;
}

.side-banner {
    display: block;
    margin-bottom: 12px;
}

.side-help {
    padding: 12px 10px;
    text-align: center;
    background: var(--primary-pale);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.side-help__tel {
    font-size: 21px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

.side-help small {
    display: block;
    font-size: 11px;
    color: var(--muted);
}

/* ============ 5. TRANG CHỦ ============ */
/* Banner lớn */
.hero {
    position: relative;
    margin-bottom: 12px;
}

.hero__slide {
    position: relative;
}

.hero__slide img {
    width: 100%;
    aspect-ratio: 1920 / 640;
    /* banner tràn ngang: chặn chiều cao để màn rộng không bị banner quá khổ */
    max-height: 560px;
    object-fit: cover;
}

.hero__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 46px 0 20px;
    background: linear-gradient(180deg, transparent, rgba(0, 58, 102, .88));
    color: var(--white);
}

.hero__badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 12px;
    border-radius: 2px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
}

.hero__title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.hero__sub {
    margin-top: 5px;
    font-size: 14px;
    color: rgba(255, 255, 255, .92);
}

/* Dải nút nhanh dưới banner */
.quick-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 18px;
}

.quick-bar__item {
    position: relative;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.quick-bar__item img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.quick-bar__item > span {
    /* span mặc định là inline - phải cho block thì height/padding mới ăn.
       Cắt gọn 3 dòng bằng height = 3 x line-height, không dùng line-clamp
       vì một số trình duyệt bỏ qua thuộc tính này */
    display: block;
    height: 4.05em;
    overflow: hidden;
    padding: var(--pad-label);
    box-sizing: content-box;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy);
}

.quick-bar__item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.quick-bar__item:hover span {
    color: var(--primary);
}

/* Banner khuyến mãi ngang */
.promo-band {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 14px 20px;
    border-radius: var(--radius);
    background: linear-gradient(100deg, var(--ocean), var(--primary));
    color: var(--white);
}

.promo-band__icon {
    font-size: 30px;
    color: var(--accent);
    flex: none;
}

.promo-band__text strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--white);
}

.promo-band__text span {
    font-size: 12px;
    color: rgba(255, 255, 255, .88);
}

.promo-band__code {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-band__code b {
    padding: 5px 12px;
    border: 1px dashed rgba(255, 255, 255, .7);
    border-radius: var(--radius);
    font-size: 14px;
    letter-spacing: .04em;
}

/* ---------- THẺ TOUR ---------- */
.tour-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

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

.tour-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.tour-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.tour-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.tour-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tour-card:hover .tour-card__thumb img {
    transform: scale(1.05);
}

.tour-card__area {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 9px;
    background: var(--ocean);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
}

.tour-card__rank {
    position: absolute;
    right: 0;
    top: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 14px;
    font-weight: 800;
}

.tour-card__rank--2 {
    background: #AFB7BC;
    color: var(--white);
}

.tour-card__rank--3 {
    background: #B98A5A;
    color: var(--white);
}

.tour-card__rank--4,
.tour-card__rank--5 {
    background: var(--primary);
    color: var(--white);
}

.tour-card__sale {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 9px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
}

.tour-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--pad-box);
}

.tour-card__name {
    /* 3 dòng cố định cho các thẻ bằng nhau */
    height: 4.5em;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 5px;
}

.tour-card__name a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.tour-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin-bottom: 5px;
    font-size: 11px;
    color: var(--muted);
}

.tour-card__meta i {
    margin-right: 3px;
    color: var(--primary);
}

.tour-card__foot {
    margin-top: auto;
    padding-top: 7px;
    border-top: 1px dotted var(--border);
}

.tour-card__foot .price {
    justify-content: flex-end;
    margin-bottom: 7px;
}

.tour-card .btn {
    width: 100%;
}

/* Thẻ tour dạng hàng ngang (trang danh sách) */
.tour-row {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.tour-row:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.tour-row__thumb {
    position: relative;
    width: 230px;
    flex: none;
    align-self: flex-start;
}

.tour-row__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 2px;
}

.tour-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tour-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 5px;
}

.tour-row__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 5px;
    max-height: 3em;
    overflow: hidden;
}

.tour-row__name a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.tour-row__desc {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 7px;
}

.tour-row__info {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: var(--muted);
}

.tour-row__info i {
    margin-right: 4px;
    color: var(--primary);
}

.tour-row__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dotted var(--border);
}

/* Khối tìm theo khu vực */
.area-box {
    padding: 14px;
    background: var(--primary-pale);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.area-item {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.area-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.area-item__name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-label);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
}

.area-item__name i {
    color: var(--primary);
    font-size: 11px;
}

.area-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.area-item:hover .area-item__name {
    color: var(--primary);
}

/* Khối danh mục dạng cột link */
.cat-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cat-col {
    background: var(--white);
    padding: 10px 12px;
}

.cat-col__head {
    padding-bottom: 6px;
    margin-bottom: 7px;
    border-bottom: 2px solid var(--primary);
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}

.cat-col__head small {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--muted);
}

.cat-col li a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px dotted var(--border-light);
}

.cat-col li a::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--primary);
}

.cat-col li a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Tab vùng miền */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--primary);
}

.tab-nav li a {
    display: block;
    padding: 7px 18px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--gray);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
}

.tab-nav li.active a,
.tab-nav li a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.tab-content .tab-item {
    display: none;
}

.tab-content .tab-item.active {
    display: block;
}

/* Lý do chọn */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.feature-item {
    padding: 16px var(--pad-box);
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.feature-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.feature-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 19px;
}

.feature-item strong {
    display: block;
    font-size: 13.5px;
    color: var(--navy);
    margin-bottom: 4px;
}

.feature-item p {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
}

/* Đánh giá khách */
.voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.voice-item {
    padding: var(--pad-box);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.voice-item:hover {
    border-color: var(--primary);
}

.voice-item__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dotted var(--border);
}

.voice-item__head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.voice-item__head strong {
    display: block;
    font-size: 12.5px;
}

.voice-item__head span {
    font-size: 11px;
    color: var(--muted);
}

.voice-item p {
    font-size: 12px;
    line-height: 1.75;
    color: var(--text);
}

/* Tin tức / cẩm nang dạng danh sách */
.news-list li {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--border);
}

.news-list img {
    width: 120px;
    flex: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 2px;
}

.news-list__date {
    display: block;
    font-size: 11px;
    color: var(--muted);
}

.news-list__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    margin: 2px 0 3px;
    max-height: 3.1em;
    overflow: hidden;
}

.news-list__title a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.news-list__desc {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
}

/* Logo đối tác */
.partner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.partner-row img {
    filter: grayscale(1);
    opacity: .65;
}

.partner-row img:hover {
    filter: none;
    opacity: 1;
}

/* ============ 6. TRANG CON ============ */
.page-head {
    padding: 12px 16px;
    margin-bottom: 14px;
    background: linear-gradient(100deg, var(--ocean), var(--teal));
    color: var(--white);
    border-radius: var(--radius);
}

.page-head h1 {
    font-size: 21px;
    color: var(--white);
}

.page-head p {
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}

/* Thanh công cụ danh sách */
.listbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--gray);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}

.listbar strong {
    color: var(--primary);
    font-size: 15px;
}

.listbar__right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.listbar__right .vuta-input {
    height: 30px;
    font-size: 12px;
}

.filter-toggle {
    display: none;
    margin-bottom: 10px;
}

/* Phân trang */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.pagination li a,
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 12px;
    font-weight: 700;
}

.pagination li.active a,
.pagination li a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.pagination li.disabled span {
    color: var(--border);
}

/* ---------- CHI TIẾT TOUR ---------- */
.detail-head {
    margin-bottom: 12px;
}

.detail-head__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

.detail-head h1 {
    font-size: 23px;
    line-height: 1.45;
    color: var(--navy);
    margin-bottom: 6px;
}

.detail-head__rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--muted);
}

.detail-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 125px;
    gap: 5px;
    margin-bottom: 14px;
}

.detail-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.detail-gallery__item:first-child {
    grid-row: span 2;
}

.detail-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 45, 79, .68);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
}

/* Bảng thông tin tour */
.info-table {
    width: 100%;
    margin-bottom: 16px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.info-table th,
.info-table td {
    padding: 7px 10px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.info-table th {
    width: 110px;
    background: var(--primary-pale);
    color: var(--navy);
    font-weight: 700;
    white-space: nowrap;
}

/* Nội dung chi tiết */
.detail-body h2 {
    font-size: 17px;
    margin: 18px 0 9px;
    padding: 5px 10px;
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    color: var(--navy);
}

.detail-body h3 {
    font-size: 14px;
    margin: 14px 0 7px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
}

.detail-body p {
    margin-bottom: 10px;
    font-size: 13px;
}

/* Danh sách có dấu tick trong phần nội dung chi tiết */
.detail-body ul {
    margin-bottom: 12px;
}

.detail-body ul > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
    font-size: 12.5px;
}

.detail-body ul > li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 11px;
    color: var(--primary);
}

.detail-body ul.list-x > li::before {
    content: "\f00d";
    color: #C0564B;
}

/* Thanh nhảy mục - thay cho tab, web Nhật hay dùng ページ内リンク */
.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0 4px;
    padding: 8px;
    background: var(--gray);
    border-radius: var(--radius);
}

.jump-nav a {
    display: block;
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
}

.jump-nav a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.detail-head__lead {
    margin-top: 8px;
    padding: 7px 10px;
    background: var(--primary-pale);
    border-left: 3px solid var(--primary);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
}

/* Lịch trình dạng timeline - luôn mở, không giấu trong accordion.
   Dùng grid 3 cột (giờ | chấm+đường kẻ | nội dung) để không phải canh bằng offset âm. */
.sched {
    margin-bottom: 14px;
    padding-left: 0;
}

.sched__item {
    display: grid;
    grid-template-columns: 44px 15px 1fr;
    column-gap: 10px;
    margin: 0;
}

/* Đường kẻ dọc: để grid tự kéo cao hết ô (align-self mặc định là stretch)
   nên nối liền sang mục kế tiếp mà không cần tính chiều cao */
.sched__item::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 2px;
    background: var(--border);
}

/* Chấm tròn vẽ sau nên nằm đè lên đường kẻ */
.sched__item::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    margin-top: 4px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: var(--white);
}

/* Mục cuối: đường kẻ chỉ chạy tới chấm rồi dừng */
.sched__item:last-child::before {
    align-self: start;
    height: 10px;
}

.sched__time {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--primary);
}

.sched__body {
    grid-column: 3;
    grid-row: 1;
    padding-bottom: 12px;
}

.sched__item:not(:last-child) .sched__body {
    border-bottom: 1px dotted var(--border);
}

.sched__body strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--navy);
}

/* Cho icon bề ngang cố định để tên mục nào cũng thẳng hàng */
.sched__body strong > i {
    display: inline-block;
    width: 17px;
    margin-right: 6px;
    text-align: center;
    color: var(--primary);
}

.sched__body p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* Lưới địa điểm sẽ ghé và lưới ảnh thực tế của tour */
.place-grid,
.photo-grid {
    display: grid;
    gap: var(--gap);
    margin-bottom: 14px;
}

.place-grid {
    grid-template-columns: repeat(3, 1fr);
}

.photo-grid {
    grid-template-columns: repeat(4, 1fr);
}

.place-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.place-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.place-item__body {
    padding: 8px 10px;
}

.place-item__body strong {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: var(--navy);
}

.place-item__body p {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.photo-item img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius);
}

.photo-item figcaption {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* Khối "ここがおすすめ" - icon + tiêu đề + đoạn mô tả */
.point-list {
    margin-bottom: 14px;
}

.point-item {
    display: flex;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--border);
}

.point-item > i {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    font-size: 15px;
    color: var(--primary);
}

.point-item strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13.5px;
    color: var(--navy);
}

.point-item p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* Băng CTA đặt tour chèn giữa nội dung */
.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0;
    padding: 13px 16px;
    border-radius: var(--radius);
    background: var(--primary-pale);
    border: 1px solid var(--primary-light);
}

.cta-band strong {
    font-size: 13.5px;
    color: var(--navy);
}

.campaign-box {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px dashed var(--accent-dark);
    border-radius: var(--radius);
    background: var(--cream);
}

.campaign-box strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    color: var(--on-accent);
}

.campaign-box p {
    margin: 0;
    font-size: 12.5px;
}

.review-count {
    font-size: 12px;
    color: var(--muted);
}

.note-small {
    font-size: 12px;
    color: var(--muted);
}

.is-link {
    font-weight: 700;
    color: var(--primary);
}

.is-link:hover {
    text-decoration: underline;
}

/* Hai cột link chuẩn bị du lịch */
.prep {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    margin-top: 22px;
}

.prep__col {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--gray);
}

.prep__col h3 {
    margin-bottom: 7px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--navy);
}

.prep__col li {
    margin-bottom: 4px;
    font-size: 12.5px;
}

.prep__col a::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
    color: var(--primary);
}

.prep__col a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Khối hỗ trợ LINE */
.line-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #06C755;
    border-radius: var(--radius);
    background: #F2FBF5;
}

.line-box > i {
    flex: none;
    font-size: 30px;
    color: #06C755;
}

.line-box strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    color: var(--navy);
}

.line-box p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* Box đặt tour */
.booking {
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    background: var(--white);
}

.booking__head {
    padding: 6px 10px;
    background: var(--primary);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.booking__body {
    padding: 10px;
}

.booking__price {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dotted var(--border);
    text-align: right;
}

.booking__price .price strong {
    font-size: 27px;
}

.booking__field {
    margin-bottom: 8px;
}

.booking__field > label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
}

.booking__field .vuta-input {
    width: 100%;
}

.booking__field.qty-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    margin-bottom: 0;
    border-bottom: 1px dotted var(--border);
}

.booking__qty-label {
    min-width: 0;
    flex: 1 1 auto;
}

.booking__qty-label strong {
    display: block;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking__qty-label span {
    font-size: 11px;
    color: var(--muted);
}

.buttons_added {
    display: flex;
    flex-shrink: 0;
}

.booking .is-form {
    width: 28px;
    height: 28px;
    /* lib đặt padding 0 10px + line-height 32px, phải bỏ thì dấu -/+ mới nằm giữa ô 28px */
    padding: 0;
    line-height: 1;
    border: 1px solid var(--border);
    background: var(--gray);
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
}

.booking .is-form:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.booking .vuta-qty {
    height: 28px;
    width: 38px;
    text-align: center;
    border: 1px solid var(--border);
    border-left: 0;
    border-right: 0;
    font-size: 13px;
}

.booking .vuta-qty::-webkit-outer-spin-button,
.booking .vuta-qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.booking__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    padding: 8px 10px;
    background: var(--primary-pale);
    border-radius: var(--radius);
    font-size: 12.5px;
    font-weight: 700;
}

.booking__total strong {
    font-size: 19px;
    color: var(--navy);
}

.booking__note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

.booking__tel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.booking__tel strong {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--navy);
}

.booking__tel small {
    font-size: 11px;
    color: var(--muted);
}

/* ---------- BÀI VIẾT ---------- */
.post-box {
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.post-box__head {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.post-box__head h1 {
    font-size: 22px;
    line-height: 1.5;
    color: var(--navy);
    margin-bottom: 6px;
}

.post-box__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    font-size: 11.5px;
    color: var(--muted);
}

.post-box article h2 {
    font-size: 17px;
    margin: 18px 0 9px;
    padding: 5px 10px;
    background: var(--primary-light);
    border-left: 4px solid var(--primary);
    color: var(--navy);
}

.post-box article h3 {
    font-size: 14px;
    margin: 14px 0 7px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border);
    color: var(--navy);
}

.post-box article p {
    margin-bottom: 11px;
    font-size: 13px;
    line-height: 1.85;
}

.post-box article img {
    margin: 12px 0;
    border-radius: 2px;
}

.post-box article ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 5px;
    font-size: 12.5px;
}

.post-box article ul li::before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--primary);
}

.post-box blockquote {
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--gray);
    border-left: 4px solid var(--accent);
    font-size: 12.5px;
}

/* Mục lục - dùng #toc của vuta.libs */
.toc-wrap {
    margin: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--primary-pale);
}

.toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
}

.toc-title::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    transition: var(--transition);
}

.toc-title.active::after {
    transform: rotate(180deg);
}

#toc {
    display: none;
    padding: 0 14px 10px;
}

#toc.active {
    display: block;
}

#toc li {
    font-size: 12px;
    padding: 2px 0;
}

#toc .toc-h3 {
    padding-left: 16px;
}

#toc a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.share-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

.share-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    background: var(--gray);
    color: var(--navy);
}

.share-row a:hover {
    background: var(--primary);
    color: var(--white);
}

/* ---------- FAQ ---------- */
.faq-list > li {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-list .link {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    background: var(--white);
}

.faq-list > li.active .link {
    background: var(--primary-light);
}

.faq-list .link::before {
    content: "Q";
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: var(--primary);
    color: var(--white);
    font-size: 11px;
}

.faq-list .link > i {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: var(--transition);
}

.faq-list > li.active .link > i {
    transform: rotate(180deg);
}

.faq-list .hidden-content {
    display: none;
    padding: 10px 12px 12px 41px;
    font-size: 12.5px;
    border-top: 1px solid var(--border-light);
}

/* ---------- GIỚI THIỆU / LIÊN HỆ ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 18px;
}

.about-grid img {
    width: 100%;
    border-radius: var(--radius);
}

.about-grid p {
    font-size: 13px;
    margin-bottom: 10px;
}

.num-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.num-item {
    padding: var(--pad-box);
    text-align: center;
    background: var(--primary-pale);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.num-item strong {
    display: block;
    font-size: 25px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

.num-item span {
    font-size: 11.5px;
    color: var(--muted);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-bottom: 16px;
}

.contact-item {
    padding: 16px var(--pad-box);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.contact-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 7px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 17px;
}

.contact-item strong {
    display: block;
    font-size: 13.5px;
    color: var(--navy);
    margin-bottom: 3px;
}

.contact-item p {
    font-size: 12px;
    color: var(--muted);
}

.form-box {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.form-group {
    flex: 1;
    min-width: 0;
}

.form-group label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
}

.form-group .req {
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 2px;
    background: #C0564B;
    color: var(--white);
    font-size: 10px;
}

.form-group .vuta-input {
    width: 100%;
}

.map-box {
    height: 280px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============ 7. FOOTER ============ */
.foot-cta {
    padding: 18px 0;
    background: var(--primary-pale);
    border-top: 1px solid var(--border);
}

.foot-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.foot-cta__text strong {
    display: block;
    font-size: 17px;
    color: var(--navy);
}

.foot-cta__text span {
    font-size: 12px;
    color: var(--muted);
}

.foot-cta__box {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.foot-cta__tel strong {
    display: block;
    font-size: 25px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.2;
}

.foot-cta__tel small {
    font-size: 11px;
    color: var(--muted);
}

.vuta-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}

.footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
    padding: 26px 0 20px;
}

.footer__logo {
    color: var(--white);
    margin-bottom: 10px;
}

.footer__logo .logo__text strong {
    color: var(--white);
}

.footer__logo .logo__text span {
    color: rgba(255, 255, 255, .6);
}

.footer__desc {
    font-size: 11.5px;
    line-height: 1.8;
    margin-bottom: 10px;
}

.footer__info li {
    display: flex;
    gap: 7px;
    margin-bottom: 5px;
    font-size: 11.5px;
}

.footer__info i {
    margin-top: 4px;
    color: var(--accent);
}

.footer__title {
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font-size: 13px;
    color: var(--white);
}

.footer__list li a {
    display: block;
    padding: 3px 0;
    font-size: 11.5px;
    transition: color .2s ease;
}

.footer__list li a::before {
    content: "・";
    color: var(--accent);
}

/* Hover đổi sang gold cho ăn với dấu ・ phía trước và với .footer__tags,
   .footer__social (hai khối đó cũng lấy --accent làm màu hover). */
.footer__list li a:hover {
    color: var(--accent);
}

.footer__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.footer__tags a {
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 2px;
    font-size: 11px;
}

.footer__tags a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.footer__social {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .12);
    color: var(--white);
}

.footer__social a:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.footer__bottom {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 11px;
}

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.footer__pay {
    display: flex;
    gap: 10px;
    font-size: 19px;
    color: rgba(255, 255, 255, .55);
}

/* Tiện ích nổi */
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--white);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--primary);
    color: var(--white);
}

/* Thanh liên hệ cố định ở đáy - chỉ hiện trên mobile */
.fixed-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0, 58, 102, .12);
}

.fixed-bar__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.fixed-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px;
    font-size: 10px;
    color: var(--navy);
    border-right: 1px solid var(--border-light);
}

.fixed-bar a i {
    font-size: 16px;
    color: var(--primary);
}

.fixed-bar a:last-child {
    border-right: 0;
}

.fixed-bar a.is-cta {
    background: var(--accent);
    color: var(--on-accent);
}

.fixed-bar a.is-cta i {
    color: var(--on-accent);
}

/* ============ 8. SLICK + TIỆN ÍCH ============ */
/* vuta.libs.css viết lồng kiểu SCSS (&.slick-prev) nên trình duyệt hiểu thành
   .slick-arrow.slick-prev - phải viết cùng mức mới ghi đè được */
.slick-arrow.slick-prev,
.slick-arrow.slick-next {
    position: absolute;
    top: 50%;
    left: auto;
    z-index: 5;
    width: 30px;
    height: 46px;
    margin-top: -23px;
    border: 0;
    border-radius: 2px;
    background: rgba(0, 58, 102, .72);
    color: var(--white);
    font-size: 0;
    opacity: 1;
    transform: none;
}

.slick-arrow.slick-prev::before,
.slick-arrow.slick-next::before {
    position: static;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 15px;
    color: var(--white);
    opacity: 1;
}

.slick-arrow.slick-prev {
    left: -6px;
}

.slick-arrow.slick-prev::before {
    content: "\f104";
}

.slick-arrow.slick-next {
    right: -6px;
}

.slick-arrow.slick-next::before {
    content: "\f105";
}

.slick-arrow.slick-prev:hover,
.slick-arrow.slick-next:hover,
.slick-arrow.slick-prev:focus,
.slick-arrow.slick-next:focus {
    background: var(--primary);
    color: var(--white);
}

/* Slick biến chính thẻ bọc thành .slick-slide, nên padding phải đặt ở đây
   (đặt vào ".slick-slide > div" sẽ rơi vào trong viền thẻ tour) */
.tour-slider .slick-slide,
.voice-slider .slick-slide {
    padding: 0 5px;
}

.tour-slider .slick-list,
.voice-slider .slick-list {
    margin: 0 -5px;
}

/* Các thẻ đánh giá trong slider cao bằng nhau */
.voice-slider .slick-track {
    display: flex;
}

.voice-slider .slick-slide {
    height: auto;
}

.voice-slider .slick-slide > div,
.voice-slider .voice-item {
    height: 100%;
}

.voice-item .stars {
    margin-bottom: 6px;
}

.hero .slick-dots {
    bottom: 8px;
}

/* Thu hẹp khoảng cách giữa các chấm (mặc định của slick là 20px + margin 5px) */
.hero .slick-dots li {
    width: 14px;
    height: 14px;
    margin: 0 2px;
}

.hero .slick-dots li button {
    width: 14px;
    height: 14px;
    padding: 0;
}

.hero .slick-dots li button::before {
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
    color: var(--white);
    opacity: .6;
}

.hero .slick-dots li.slick-active button::before {
    color: var(--accent);
    opacity: 1;
}

/* Lớp tiện ích: vuta.libs chỉ có class "hiện ở mobile" */
@media (max-width: 767px) {
    .hide-md {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .hide-lg {
        display: none !important;
    }
}

/* ============ 9. RESPONSIVE ============ */
@media (max-width: 1260px) {
    :root {
        --sidebar: 220px;
    }

    .quick-bar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .gnav,
    .header__search,
    .header__tel {
        display: none;
    }

    .header__burger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    html {
        scroll-padding-top: 62px;
    }

    /* Neo hàng logo lên đầu màn hình và thu gọn cho đỡ chiếm chỗ */
    .vuta-header {
        position: sticky;
        top: 0;
        border-bottom-width: 2px;
    }

    .header__inner {
        gap: 10px;
        padding: 6px 0;
    }

    .logo {
        gap: 7px;
    }

    .logo__img {
        width: 42px;
    }

    .logo__text strong {
        font-size: 16px;
    }

    .logo__text span {
        font-size: 9px;
    }

    .header__burger {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .layout {
        display: block;
        padding-bottom: 70px;
    }

    .layout__side {
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
        margin-bottom: 16px;
    }

    .layout__side .side-search {
        display: none;
    }

    .layout__side .side-search.active {
        display: block;
    }

    .filter-toggle {
        display: flex;
    }

    .tour-grid,
    .area-grid,
    .feature-grid,
    .num-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cat-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .voice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .booking {
        position: static;
        margin-top: 14px;
    }

    .footer__top {
        grid-template-columns: repeat(2, 1fr);
    }

    .fixed-bar {
        display: block;
    }

    .back-to-top {
        bottom: 62px;
    }

    .hero__title {
        font-size: 21px;
    }

    .hero__caption {
        padding: 30px 0 14px;
    }
}

@media (max-width: 767px) {
    .topbar__desc {
        display: none;
    }

    .tour-grid,
    .tour-grid--3,
    .area-grid,
    .feature-grid,
    .voice-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .num-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tour-row {
        flex-direction: column;
    }

    .tour-row__thumb {
        width: 100%;
    }

    .detail-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 100px;
    }

    .place-grid,
    .prep {
        grid-template-columns: 1fr;
    }

    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .photo-item img {
        height: 120px;
    }

    .cta-band {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .detail-gallery__item:first-child {
        grid-column: span 2;
    }

    .detail-gallery__item:nth-child(4),
    .detail-gallery__item:nth-child(5) {
        display: none;
    }

    .promo-band {
        flex-wrap: wrap;
        gap: 10px;
    }

    .promo-band__code {
        margin-left: 0;
        width: 100%;
    }

    .foot-cta__inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .info-table th {
        width: 90px;
    }

    .detail-head h1 {
        font-size: 18px;
    }

    .post-box__head h1 {
        font-size: 18px;
    }

    .news-list img {
        width: 92px;
    }

    /* Banner trang chủ: chiều cao cố định trên mobile */
    .hero__slide img {
        aspect-ratio: auto;
        height: 200px;
        max-height: 200px;
    }
}

@media (max-width: 575px) {
    .quick-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .cat-cols {
        grid-template-columns: 1fr;
    }

    /* Giữ 2 thẻ tour mỗi hàng, thu gọn ruột thẻ cho vừa bề ngang ~150px */
    .tour-grid,
    .tour-grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .tour-card__body {
        padding: 8px;
    }

    .tour-card__name {
        font-size: 12px;
    }

    .tour-card__meta {
        gap: 2px 7px;
        font-size: 10px;
    }

    .tour-card__area,
    .tour-card__sale {
        padding: 2px 6px;
        font-size: 10px;
    }

    .tour-card__foot .price strong {
        font-size: 18px;
    }

    .tour-card .btn {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .voice-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer__top {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ============ 10. DATEPICKER (dd/mm/yyyy) ============ */
.date-field {
    position: relative;
}

.date-field > i {
    /* Khối còn có <label> phía trên nên không dùng top:50% (sẽ bị lệch lên),
       mà neo theo đáy và căn giữa đúng chiều cao ô nhập */
    position: absolute;
    right: 10px;
    bottom: 0;
    height: 32px;
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: 13px;
    pointer-events: none;
}

.date-input {
    cursor: pointer;
    padding-right: 28px;
}

.datepicker {
    position: fixed;
    z-index: 1200;
    width: 248px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 58, 102, .18);
    display: none;
}

.datepicker.active {
    display: block;
}

.datepicker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.datepicker__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}

.datepicker__prev,
.datepicker__next {
    width: 26px;
    height: 26px;
    border-radius: var(--radius);
    background: var(--gray);
    color: var(--navy);
    font-size: 12px;
}

.datepicker__prev:hover,
.datepicker__next:hover {
    background: var(--primary);
    color: var(--white);
}

.datepicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.datepicker__dow {
    padding: 3px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.datepicker__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.datepicker__day:hover:not(.is-disabled):not(.is-empty) {
    background: var(--primary-light);
    color: var(--primary);
}

.datepicker__day.is-empty {
    cursor: default;
}

.datepicker__day.is-disabled {
    color: #C6CDD2;
    cursor: not-allowed;
}

.datepicker__day.is-sun {
    color: #C0564B;
}

.datepicker__day.is-sat {
    color: var(--primary);
}

.datepicker__dow.is-sun {
    color: #C0564B;
}

.datepicker__dow.is-sat {
    color: var(--primary);
}

.datepicker__day.is-today {
    border: 1px solid var(--accent);
}

.datepicker__day.is-selected,
.datepicker__day.is-selected.is-sun,
.datepicker__day.is-selected.is-sat {
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
}

.datepicker__foot {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--border-light);
}

.datepicker__today,
.datepicker__clear {
    flex: 1;
    padding: 5px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--navy);
    background: var(--white);
}

.datepicker__today:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.datepicker__clear:hover {
    background: var(--gray);
}

/* Thông báo khi lọc không ra kết quả */
.no-result {
    padding: 26px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    background: var(--gray);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.js-clear-filter {
    cursor: pointer;
}

/* ============ 11. GỢI Ý ĐIỂM THAM QUAN & THÔNG TIN HỮU ÍCH ============ */
.spot-sec,
.info-sec {
    padding: 26px 20px 30px;
    background: var(--cream);
}

.spot-sec {
    margin-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}

.info-sec {
    padding-top: 10px;
    border-radius: 0 0 var(--radius) var(--radius);
}

.spot-sec__head {
    margin-bottom: 20px;
    text-align: center;
}

.spot-sec__sub {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.spot-sec__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

.spot-sec__desc {
    max-width: 620px;
    margin: 8px auto 0;
    font-size: 12.5px;
    color: #6B5B45;
}

/* Lưới ảnh tròn */
.spot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px var(--gap);
}

.spot-item {
    display: block;
    text-align: center;
}

.spot-item__thumb {
    position: relative;
    display: block;
    width: 100%;
    max-width: 210px;
    margin: 0 auto 10px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 58, 102, .18);
}

.spot-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.spot-item:hover .spot-item__thumb img {
    transform: scale(1.07);
}

/* Tên thành phố nằm giữa ảnh, kẹp giữa hai vạch ĐÔI như mẫu.
   Đo từ mẫu (vòng tròn 226px): vạch = 2px + khe 1px + 2px -> border 5px double;
   bề ngang vạch đúng bằng bề ngang chữ nên không đặt width lẫn padding ngang,
   khối absolute + white-space: nowrap tự co vừa chữ.
   Cỡ chữ mẫu 20px/226px, quy về vòng tròn 210px của mình là 18px. */
.spot-item__name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 88%;
    padding: 8px 0;
    border-top: 5px double var(--white);
    border-bottom: 5px double var(--white);
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .5);
    white-space: nowrap;
}

.spot-item__caption {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #5C4A33;
}

.spot-item:hover .spot-item__caption {
    color: var(--primary);
}

/* Lưới thông tin hữu ích */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.info-item {
    display: block;
    padding: 6px 6px 0;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(0, 58, 102, .1);
    transition: var(--transition);
}

.info-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.info-item__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 2px;
}

.info-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-item__name {
    display: block;
    padding: 8px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
}

.info-item:hover .info-item__name {
    color: var(--primary);
}

@media (max-width: 767px) {
    .spot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px var(--gap);
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .spot-sec__title {
        font-size: 18px;
    }

    /* vòng tròn nhỏ lại (~160px) nên hạ cỡ chữ theo đúng tỉ lệ của mẫu */
    .spot-item__name {
        padding: 6px 0;
        font-size: 14px;
    }
}

/* ============ 12. MỐC THÀNH LẬP & BÁO CHÍ ============ */
.milestone {
    padding: 6px 0 20px;
    text-align: center;
}

.milestone__years {
    font-size: 26px;
    font-weight: 800;
    color: var(--gold-text);
    line-height: 1.4;
}

.milestone__title {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.4;
}

.milestone__desc {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.media-box {
    padding: 18px 18px 20px;
    background: var(--gray);
    border-radius: var(--radius);
}

.media-box__title {
    margin-bottom: 16px;
    text-align: center;
    font-size: 17px;
    color: var(--primary);
}

.media-item {
    margin-bottom: 18px;
}

.media-item:last-child {
    margin-bottom: 0;
}

.media-item h4 {
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 2px;
}

.media-item p {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 8px;
}

.media-item__imgs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.media-item__imgs--4 {
    grid-template-columns: repeat(4, 1fr);
}

.media-item__imgs img {
    width: 100%;
    border-radius: 2px;
    border: 1px solid var(--border);
}

@media (max-width: 767px) {
    .milestone__years,
    .milestone__title {
        font-size: 19px;
    }

    .media-item__imgs--4 {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* Icon điện thoại đứng trước số hotline (CTA cuối trang, sidebar, box đặt tour) */
.foot-cta__tel strong i,
.side-help__tel i,
.booking__tel strong i {
    margin-right: 7px;
    color: var(--primary);
    font-size: .78em;
    vertical-align: 1px;
}

/* Màn hẹp: nhường chỗ cho menu */
@media (max-width: 1200px) {
    .gnav__list > li > a {
        padding: 9px 10px;
    }

    .gnav__btn span,
    .gnav__btn--gold {
        display: none;
    }
}

/* ===== Logo (nagomi nhatrang): ảnh đã chứa sẵn tên thương hiệu nên bỏ chữ bên cạnh ===== */
.logo__img {
    width: auto;
    height: 62px;
}

.footer__logo .logo__img,
.menu-mobile__head .logo__img {
    height: 64px;
}

.footer__logo {
    background: #fff;
    border-radius: 10px;
    padding: 6px 12px;
    display: inline-flex;
}

@media (max-width: 992px) {
    .logo__img {
        width: auto;
        height: 44px;
    }
}