/* ============================================================
   VOYAGE FRONTEND — TOÀN BỘ giao diện của module.

   NGUYÊN TẮC: module TỰ SỞ HỮU giao diện, GIỐNG HỆT NHAU trên mọi theme, CHỈ KHÁC MÀU
   (màu đọc từ `var(--primary-color)` của theme, có giá trị dự phòng).

   ⚠️ KHÔNG mượn class của theme nữa. Trước đây file này chỉ style phần riêng và trông chờ theme
   cấp .bg_white/.entry-title/.hotel-room/.button_style/.banner-header-body/.g-field-search…
   Hậu quả: 6 theme ra 6 giao diện khác nhau và đều lỗi ở đâu đó — ô tìm kiếm co bằng bề ngang
   chữ (Dhome ép width:auto), hộp lồng hộp (Euphoria style thẳng vào input), nút Tìm teo 10%
   (VNE/Euphoria), điểm đánh giá chỗ có badge chỗ chỉ là chữ, thẻ kết quả cao thấp so le,
   breadcrumb chữ trắng trên nền trắng.

   Vì markup chỉ còn class `vy-*` nên gần như không cần `!important` — chỗ nào buộc phải dùng
   đều có chú thích nêu rõ rule nào của theme đang tranh.
   ============================================================ */

/* ============================================================
   THANH TÌM KIẾM Ở BANNER (trang danh sách du thuyền)

   THIẾT KẾ THUỘC VỀ MODULE — GIỐNG HỆT NHAU Ở MỌI THEME, CHỈ KHÁC MÀU.
   Màu lấy từ --primary-color của theme qua biến --vy-accent, không hardcode.

   ⚠️ VÌ SAO KHÔNG DÙNG CLASS CỦA THEME (.banner-header-body, .vne_form, .g-field-search,
   .g-button-submit, .btn-primary): mỗi theme style chúng một kiểu và nhiều rule có !important
   ⇒ cùng một module ra 6 giao diện khác nhau, chỗ thì hộp-lồng-hộp (Euphoria style thẳng vào
   input), chỗ thì ô co bằng bề ngang chữ (Dhome ép width:auto), chỗ nút teo 10% (VNE/Euphoria).
   Blade nay chỉ dùng class `vy-*` nên KHÔNG rule nào của theme chạm tới, không cần !important.
   Ngoại lệ duy nhất còn giữ là `.form-control` (partial dùng chung + JS bám vào) — đã ghi đè
   bằng `.vy-search-panel .form-control`, thắng `.form-control` trần của Bootstrap.
   ============================================================ */
.vy-search-panel {
    --vy-accent: var(--primary-color, #0e7c93);
    background: #fff;
    border-radius: 16px;
    padding: 8px;                       /* + 4px padding của mỗi ô = viền đều 12px tứ phía */
    box-shadow: 0 20px 45px -24px rgba(12, 32, 44, .55);
}
.vy-search-form { display: block; width: 100%; margin: 0; }
.vy-search-row { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; margin: 0; }
.vy-search-col { flex: 0 0 auto; width: 100%; padding: 4px; min-width: 0; }

@media (min-width: 768px) {
    /* Bề rộng do blade in ra theo cỡ admin khai; dưới 768px mỗi ô một dòng. */
    .vy-search-col { width: var(--vy-col, auto); }
}

/* ---- Ô nhập ---- */
.vy-search-col .form-group { margin: 0; height: 100%; }
.vy-search-col .form-content {
    height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: 7px 14px; border: 1px solid #e3eaf0; border-radius: 12px; background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vy-search-col .form-content:hover { border-color: #c8d5df; }
.vy-search-col .form-content:focus-within {
    border-color: var(--vy-accent);
    box-shadow: 0 0 0 3px rgba(14, 124, 147, .14);                       /* dự phòng cho trình duyệt cũ */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vy-accent) 16%, transparent);
}
.vy-search-col .form-content > label {
    display: block; margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.35;
    color: #7a8b96; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vy-search-col .input-search { position: relative; }

.vy-search-panel .form-control {
    width: 100%; height: 24px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    font-size: 15px; font-weight: 600; line-height: 24px; color: #17262e;
}
.vy-search-panel .form-control:focus { outline: 0; box-shadow: none; background: transparent; }
.vy-search-panel .form-control::placeholder { color: #a3b2bc; font-weight: 400; }
.vy-search-panel .vg-combo-input { cursor: pointer; padding-right: 20px !important; }
.vy-search-panel .vg-combo-caret { right: 0; color: #8b9aa4; }
.vy-search-panel .vg-suggest-spin { right: 2px; }

/* ---- Nút Tìm ---- */
.vy-search-submit { display: flex; }
.vy-btn-search {
    width: 100%; min-height: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--vy-accent); color: #fff;
    font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .2px;
    transition: filter .15s ease, transform .08s ease;
}
.vy-btn-search:hover { filter: brightness(1.08); color: #fff; }
.vy-btn-search:active { transform: translateY(1px); }
.vy-btn-search:focus-visible {
    outline: 3px solid rgba(14, 124, 147, .45);
    outline: 3px solid color-mix(in srgb, var(--vy-accent) 45%, transparent);
    outline-offset: 2px;
}
.vy-btn-search svg { width: 17px; height: 17px; flex: none; }

@media (max-width: 767.98px) {
    .vy-search-panel { border-radius: 14px; padding: 6px; }
    .vy-btn-search { padding: 13px 16px; }
}

/* ============================================================
   HEADER TRANG CHI TIẾT (tên tàu · đánh giá · vị trí · giá · nút xem gói)
   Cùng nguyên tắc với thanh tìm kiếm: giao diện thuộc về MODULE, giống hệt nhau ở mọi theme,
   chỉ khác màu (--vy-accent đọc từ --primary-color của theme).
   ⚠️ Trước đây khối này mượn #header-single/.hotel-review/.star/.button_style của theme nên
   theme nào thiếu rule là vỡ: sao đánh giá rớt 2 dòng, chữ "Rất tốt" gãy đôi, nút lệch nhịp.
   ============================================================ */
.vy-detail-head {
    --vy-accent: var(--primary-color, #0e7c93);
    background: #fff; border-radius: 16px; padding: 22px 24px;
    box-shadow: 0 10px 30px -22px rgba(12, 32, 44, .5);
}
.vy-dh-main {
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.vy-dh-left { flex: 1 1 380px; min-width: 0; }
.vy-dh-title {
    margin: 0 0 10px; font-size: 26px; font-weight: 800; line-height: 1.28; color: #17262e;
}

/* Hàng đánh giá: mọi thứ trên MỘT dòng, không cho sao hay chữ gãy giữa chừng. */
.vy-dh-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 8px; }
.vy-dh-stars { display: inline-flex; align-items: center; gap: 2px; flex: none; white-space: nowrap; color: #f6b01e; }
.vy-dh-stars svg { width: 15px; height: 15px; display: block; }
.vy-dh-score {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 38px; height: 24px; padding: 0 7px; border-radius: 7px;
    background: var(--vy-accent); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1;
}
.vy-dh-score-text { font-size: 14px; font-weight: 700; color: #17262e; white-space: nowrap; }
.vy-dh-reviews { font-size: 13.5px; color: #7a8b96; white-space: nowrap; }

.vy-dh-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; }
.vy-dh-meta-item {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: #5f7683; min-width: 0;
}
.vy-dh-meta-item svg { width: 15px; height: 15px; flex: none; color: var(--vy-accent); }

/* Cột phải: giá + nút. flex:none để không bị bóp khi tên tàu dài. */
.vy-dh-right { display: flex; align-items: center; gap: 20px; flex: none; flex-wrap: wrap; }
.vy-dh-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.25; }
.vy-dh-price-label { font-size: 13px; color: #7a8b96; }
.vy-dh-price-now { display: inline-flex; align-items: baseline; gap: 7px; }
.vy-dh-price-now ins { text-decoration: none; font-size: 23px; font-weight: 800; color: #e5372c; }
.vy-dh-price-old { font-size: 14px; color: #98a5ae; }
.vy-dh-price-unit { font-size: 12.5px; color: #7a8b96; }
.vy-dh-price-contact { font-size: 20px; font-weight: 800; color: var(--vy-accent); }

.vy-dh-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
    padding: 13px 22px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--vy-accent); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
    transition: filter .15s ease, transform .08s ease;
}
.vy-dh-cta:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.vy-dh-cta:active { transform: translateY(1px); }
.vy-dh-cta svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 767.98px) {
    .vy-detail-head { padding: 18px 16px; border-radius: 14px; }
    .vy-dh-title { font-size: 21px; }
    .vy-dh-main { gap: 18px; }
    .vy-dh-right { width: 100%; justify-content: space-between; gap: 14px; }
    .vy-dh-price { align-items: flex-start; }
    .vy-dh-cta { flex: 1 1 auto; }
}

/* ============================================================
   BỘ KHUNG TRANG CHI TIẾT — THẺ, TIÊU ĐỀ, LƯỚI, NÚT
   Thay cho bộ class của theme (.bg_white, .entry-title, .home-title, .cruise-single-content,
   .category-entry, .mb-25/.pd-5/.row-5, .button_style, .content-collapsible…). Mỗi theme khai
   những class đó một kiểu (khác padding, bo góc, cỡ chữ, số cột) nên trang chi tiết trước đây
   mỗi theme một dáng. Nay module tự khai ⇒ giống hệt nhau, chỉ khác màu.
   ============================================================ */
.vy-page { width: 100%; }
.vy-breadcrumb-bar { padding: 16px 0 2px; }

/* Breadcrumb: theme ép chữ TRẮNG (`.breadcrumb ul li a{color:#fff!important}`) vì của theme nằm
   đè lên ảnh banner tối — ở đây nền sáng nên phải tự khai, không thì chữ tàng hình. */
.vy-breadcrumb ol {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 0; padding: 0; list-style: none;
}
.vy-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.vy-breadcrumb a { color: #5f7683; font-size: 13.5px; text-decoration: none; }
.vy-breadcrumb a:hover { color: var(--primary-color, #0e7c93); text-decoration: underline; }
.vy-breadcrumb li.is-current span {
    color: #17262e; font-size: 13.5px; font-weight: 700;
    display: inline-block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vy-breadcrumb-sep { width: 13px; height: 13px; flex: none; color: #a3b2bc; }

.vy-card {
    --vy-accent: var(--primary-color, #0e7c93);
    background: #fff; border-radius: 16px; padding: 20px 22px;
    box-shadow: 0 10px 30px -22px rgba(12, 32, 44, .5);
}
.vy-card-title {
    margin: 0 0 14px; font-size: 18px; font-weight: 800; line-height: 1.35; color: #17262e;
}
.vy-section-title { margin: 0 0 14px; }
.vy-section-title h2 { margin: 0; font-size: 22px; font-weight: 800; color: #17262e; }

/* Khoảng cách — thay .mb-25/.pd-5/.row-5 của theme (theme nào thiếu là dính bết vào nhau). */
.vy-mb25 { margin-bottom: 22px; }
.vy-row5 { margin-left: -6px; margin-right: -6px; }
.vy-row5 > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
.vy-pd5 { padding: 6px; }

/* Nội dung soạn thảo (giới thiệu, giá bao gồm, chính sách) */
.vy-rich { font-size: 15px; line-height: 1.75; color: #3d5058; }
.vy-rich :where(h1, h2, h3, h4, h5) { font-weight: 700; color: #17262e; margin: 18px 0 8px; line-height: 1.4; }
.vy-rich h2 { font-size: 19px; } .vy-rich h3 { font-size: 17px; } .vy-rich h4 { font-size: 16px; }
.vy-rich p { margin: 0 0 10px; }
.vy-rich ul, .vy-rich ol { margin: 0 0 12px; padding-left: 20px; }
.vy-rich li { margin: 0 0 5px; }
.vy-rich img { max-width: 100%; height: auto; border-radius: 10px; }
.vy-rich table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.vy-rich table td, .vy-rich table th { border: 1px solid #e3eaf0; padding: 8px 10px; }
.vy-rich a { color: var(--primary-color, #0e7c93); }

/* Thu gọn nội dung dài + nút "Xem thêm".
   Trạng thái do JS module gắn lên #voyageContentWrapper: `has-overflow` (nội dung dài hơn 300px)
   và `expanded` (đang mở). Trước đây phần clamp này do CSS theme cấp qua .content-collapsible —
   đổi tên class thì phải tự khai, không thì nội dung dài không bao giờ bị thu gọn. */
.vy-collapse-wrap { position: relative; }
.vy-collapsible { position: relative; }
.vy-collapse-wrap.has-overflow .vy-collapsible { max-height: 300px; overflow: hidden; }
.vy-collapse-wrap.has-overflow .vy-collapsible::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
}
.vy-collapse-wrap.expanded .vy-collapsible { max-height: none; overflow: visible; }
.vy-collapse-wrap.expanded .vy-collapsible::after { display: none; }
.vy-readmore {
    display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0;
    padding: 9px 18px; border: 1px solid #d7e1e8; border-radius: 10px; background: #fff;
    color: var(--primary-color, #0e7c93); font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.vy-readmore:hover { border-color: var(--primary-color, #0e7c93); }
.vy-collapse-wrap { text-align: center; }
.vy-collapse-wrap .vy-rich { text-align: left; }

/* Nút chính của module (trước dùng .button_style của theme — 6 theme 6 kiểu) */
.vy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--primary-color, #0e7c93); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 700; line-height: 1.2;
    transition: filter .15s ease, transform .08s ease;
}
.vy-btn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.vy-btn:active { transform: translateY(1px); }

/* Icon tick mặc định khi term không khai icon riêng (trước dùng icofont — không theme nào cũng nạp) */
.vy-ico-check { display: inline-block; width: 1em; text-align: center; font-style: normal; color: var(--primary-color, #0e7c93); }
.vy-ico-check::before { content: "✓"; font-weight: 700; }

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

/* ---------- Lưới tiện nghi (thay .hotel-ulitis.grid-3 của theme) ---------- */
.vy-amenities ul {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px; margin: 0; padding: 0; list-style: none;
}
.vy-amenities li {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    font-size: 14.5px; line-height: 1.45; color: #3d5058;
}
.vy-amenities li > i, .vy-amenities li > svg { flex: none; width: 18px; text-align: center; color: var(--primary-color, #0e7c93); }
.vy-amenities li > img { flex: none; width: 20px; height: 20px; object-fit: contain; }
@media (max-width: 991.98px) { .vy-amenities ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .vy-amenities ul { grid-template-columns: 1fr; } }

.vy-attr-block + .vy-attr-block, .voyage-attr-block + .voyage-attr-block { margin-top: 18px; }
.vy-attr-gallery { margin-top: 14px; }
.vy-attr-gal-item { position: relative; border-radius: 12px; overflow: hidden; }
.vy-attr-gal-item img { width: 100%; height: 220px; object-fit: cover; display: block; }
.vy-attr-gal-title {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; color: #fff;
    font-size: 14.5px; font-weight: 700;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
}

/* ---------- Cột phải: điểm đánh giá + bản đồ ---------- */
.vy-detail-grid { width: 100%; }
.vy-side-review { margin: 0 0 14px; }
.vy-side-review-box { display: flex; align-items: center; gap: 10px; }
.vy-side-score {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 40px; height: 26px; padding: 0 8px; border-radius: 8px;
    background: var(--primary-color, #0e7c93); color: #fff; font-size: 14px; font-weight: 700;
}
.vy-side-review-text { font-size: 14px; color: #5f7683; min-width: 0; }
.vy-side-review-text strong { display: block; color: #17262e; font-weight: 700; }
.vy-map { border-radius: 12px; overflow: hidden; }
.vy-map iframe { display: block; width: 100%; border: 0; }

/* ---------- Thư viện ảnh ---------- */
.vy-gallery { margin: 0; }
.vy-gal-main a, .vy-gal-item a { display: block; height: 100%; }
.vy-gal-main img { width: 100%; height: 420px; object-fit: cover; border-radius: 12px; display: block; }
.vy-gal-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: 420px; }
.vy-gal-item { position: relative; border-radius: 12px; overflow: hidden; }
.vy-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vy-gal-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(12, 32, 44, .55);
}
/* Thẻ <a> phải tự trải hết ô VÀ tự căn giữa nội dung: .vy-gal-item a đặt height:100%
   nên nếu để display:block thì chữ "+02" dính mép trên, align-items của lớp phủ vô tác dụng. */
.vy-gal-more a {
    color: #fff; font-size: 22px; font-weight: 800; text-decoration: none; line-height: 1;
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.vy-gal-mobile img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; display: block; }

/* ---------- Thẻ cabin ----------
   Lưới riêng của module (ảnh | mô tả | giá). Không dùng .row/.col-* của theme. */
.vy-cabin {
    background: #fff; border: 1px solid #e4ecf1; border-radius: 16px; padding: 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.vy-cabin + .vy-cabin { margin-top: 14px; }
.vy-cabin:hover { border-color: #cfdde5; box-shadow: 0 10px 26px -18px rgba(12, 32, 44, .55); }
/* Đã chọn ≥1 cabin → viền theo màu theme + nền nhạt, nhìn là biết đang đặt loại nào */
.vy-cabin.is-picked { border-color: var(--primary-color, #0e7c93); box-shadow: 0 0 0 3px rgba(14, 124, 147, .1); }

.vy-cabin-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr) 236px; gap: 20px; align-items: start; }
.vy-cabin-media { min-width: 0; }
.vy-cabin-info { min-width: 0; }
.vy-cabin-side { min-width: 0; }

/* Khung ảnh: tỉ lệ cố định để mọi thẻ cao bằng nhau dù ảnh gốc khác cỡ */
.vy-cabin-frame { position: relative; border-radius: 12px; overflow: hidden; background: #eef3f6; }
.vy-cabin-thumbs img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.vy-cabin-noimg {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; color: #b6c6cf;
}
.vy-cabin-noimg svg { width: 44px; height: 44px; }
/* Số lượng ảnh, góc dưới-phải khung */
.vy-cabin-count {
    position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 20px; background: rgba(9, 27, 36, .62); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1.5; pointer-events: none;
}
.vy-cabin-count svg { width: 13px; height: 13px; }

/* Thông số vật lý dạng nhãn nhỏ */
.vy-cabin-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.vy-cabin-facts li {
    display: inline-flex; align-items: flex-start; gap: 5px; max-width: 100%;
    padding: 4px 9px; border-radius: 8px; background: #f1f6f8; color: #4c6675;
    font-size: 12.5px; line-height: 1.5;
}
/* Tên giường có thể dài, xuống 2 dòng → icon bám dòng đầu chứ không trôi ra giữa */
.vy-cabin-facts svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--primary-color, #0e7c93); }

.vy-cabin-title { margin: 0; font-size: 17px; font-weight: 800; color: #17262e; line-height: 1.35; }
.vy-cabin-title a { font-size: inherit; font-weight: inherit; color: inherit; text-decoration: none; }
.vy-cabin-desc { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.65; color: #5f7683; }
.vy-cabin-desc p:last-child { margin-bottom: 0; }

/* Cột giá: nền nhạt để tách hẳn khỏi phần mô tả — đây là vùng thao tác */
.vy-cabin-price-box {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px; border-radius: 12px; background: #f7fafb; border: 1px solid #eaf1f4;
}
.vy-cabin-capacity { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #17262e; }
.vy-cabin-capacity svg { width: 16px; height: 16px; flex: none; color: var(--primary-color, #0e7c93); }
.vy-cabin-qty { display: block; margin: 0; font-size: 12.5px; color: #7a8b96; }
.vy-cabin-price-wrap { margin-top: 6px; }
.vy-cabin-price { font-size: 20px; font-weight: 800; color: #e5372c; line-height: 1.3; }
.vy-cabin-price del { display: block; font-size: 13px; font-weight: 400; color: #98a5ae; margin: 0 0 1px; }

@media (max-width: 1199.98px) {
    .vy-cabin-grid { grid-template-columns: 220px minmax(0, 1fr) 210px; gap: 16px; }
}
@media (max-width: 991.98px) {
    /* Hết chỗ cho 3 cột: ảnh + mô tả một hàng, khối giá xuống dưới chiếm hết bề ngang */
    .vy-cabin-grid { grid-template-columns: 210px minmax(0, 1fr); }
    .vy-cabin-side { grid-column: 1 / -1; }
    .vy-cabin-price-box { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
    .vy-cabin-price-wrap { margin-top: 0; margin-right: auto; }
    .vy-cabin-price del { display: inline; margin-right: 6px; }
    .voyage-cabin-pick { margin-top: 0; }
}
@media (max-width: 575px) {
    .vy-cabin { padding: 12px; }
    .vy-cabin-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    /* Ảnh chiếm hết bề ngang: tỉ lệ 4/3 sẽ cao gần 400px, đẩy nội dung xuống quá sâu */
    .vy-cabin-thumbs img, .vy-cabin-noimg { aspect-ratio: 16 / 10; }
    .vy-cabin-price-box { flex-direction: column; align-items: stretch; }
    .vy-cabin-price-wrap { margin-right: 0; }
}

/* ---------- Slider "Du thuyền tương tự" + chuẩn hoá nav/dots của owl ----------
   Nav/dots do CSS theme tô (mỗi theme một màu/kích thước) → ép lại cho đồng nhất. */
.vy-related-row .vy-slide, .vy-cabin-thumbs .vy-slide { padding: 0 5px; }

/* ⚠️ Vị trí nút prev/next trước đây do CSS theme cấp qua .room-thumbnail/.product_slide.
   Đổi tên class thì mất luôn → nút rơi ra ngoài thẻ, đè lên chữ. Module tự khai lại,
   đặt chồng lên ảnh và chỉ hiện khi rê chuột vào slider. */
.vy-related-row, .vy-cabin-thumbs, .vy-attr-gallery, #sliderImages { position: relative; }
.vy-related-row .owl-nav, .vy-cabin-thumbs .owl-nav,
.vy-attr-gallery .owl-nav, #sliderImages .owl-nav {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 !important; padding: 0 8px; pointer-events: none;
    opacity: 0; transition: opacity .18s ease;
}
.vy-related-row:hover .owl-nav, .vy-cabin-thumbs:hover .owl-nav,
.vy-attr-gallery:hover .owl-nav, #sliderImages:hover .owl-nav { opacity: 1; }
.vy-related-row .owl-nav button, .vy-cabin-thumbs .owl-nav button,
.vy-attr-gallery .owl-nav button, #sliderImages .owl-nav button {
    pointer-events: auto; margin: 0 !important;
    /* ⚠️ Theme đặt `position:absolute; left:-54px` cho .owl-prev/.owl-next → nút thoát khỏi
       hàng flex ở trên và văng RA NGOÀI thẻ (thấy rõ ở thẻ cabin). Ép về luồng flex. */
    position: static !important; left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important; transform: none !important;
    width: 32px !important; height: 32px !important; border-radius: 50% !important;
    background: #fff !important; color: #17262e !important; border: 0 !important;
    box-shadow: 0 4px 14px -4px rgba(12, 32, 44, .5) !important;
    display: inline-flex !important; align-items: center; justify-content: center; font-size: 12px !important;
}
.vy-related-row .owl-nav button:hover, .vy-cabin-thumbs .owl-nav button:hover,
.vy-attr-gallery .owl-nav button:hover, #sliderImages .owl-nav button:hover {
    background: var(--primary-color, #0e7c93) !important; color: #fff !important;
}
/* Chấm tròn: đặt đè lên đáy ảnh cho gọn, không đẩy chiều cao thẻ. */
.vy-cabin-thumbs .owl-dots, .vy-attr-gallery .owl-dots, #sliderImages .owl-dots {
    position: absolute; left: 0; right: 0; bottom: 8px; margin: 0 !important; text-align: center;
}
.vy-related-row .owl-dots { margin-top: 10px !important; text-align: center; }
.vy-related-row .owl-dots .owl-dot span, .vy-cabin-thumbs .owl-dots .owl-dot span,
.vy-attr-gallery .owl-dots .owl-dot span, #sliderImages .owl-dots .owl-dot span {
    width: 7px !important; height: 7px !important; margin: 0 3px !important;
    background: rgba(255, 255, 255, .75) !important; border-radius: 50% !important;
}
.vy-related-row .owl-dots .owl-dot span { background: #cfdae2 !important; }
.vy-related-row .owl-dots .owl-dot.active span, .vy-cabin-thumbs .owl-dots .owl-dot.active span,
.vy-attr-gallery .owl-dots .owl-dot.active span, #sliderImages .owl-dots .owl-dot.active span {
    background: var(--primary-color, #0e7c93) !important;
}

@media (max-width: 767.98px) {
    .vy-card { padding: 16px; border-radius: 14px; }
    .vy-card-title { font-size: 16.5px; }
    .vy-gal-main img, .vy-gal-side { height: auto; }
    .vy-gal-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   THẺ DU THUYỀN (lưới kết quả + slider "Du thuyền tương tự")
   Thay bộ .hotel_item/.hotel-review/.review-point/.price_footer/.button_style của theme.
   Thẻ luôn CAO BẰNG NHAU trong một hàng: body là flex-column, phần giá đẩy xuống đáy.
   ============================================================ */
.vy-item {
    --vy-accent: var(--primary-color, #0e7c93);
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid #e9eff4; border-radius: 14px; overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.vy-item:hover { box-shadow: 0 16px 34px -22px rgba(12, 32, 44, .55); transform: translateY(-2px); }

/* flex:none — không có nó thì trong flex-column ảnh bị kéo giãn theo chiều cao thẻ,
   mỗi thẻ một cỡ ảnh dù cùng aspect-ratio. */
.vy-item-thumb { position: relative; display: block; flex: 0 0 auto; aspect-ratio: 4 / 3; background: #eef3f6; }
/* Ảnh đặt tuyệt đối phủ kín khung: theme gắn class lazyload `bc-fadein` kèm rule ép
   `height:auto` nên `height:100%` không ăn → ảnh giữ tỉ lệ gốc, thẻ nào ảnh vuông là cao
   vống lên, hàng thẻ so le. Dùng inset:0 thì chiều cao do top/bottom quyết, không phụ thuộc
   thuộc tính height nữa. */
.vy-item-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.vy-item-sale {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 5px 11px; border-radius: 99px; background: #e5372c; color: #fff;
    font-size: 12.5px; font-weight: 700; line-height: 1.2;
}

.vy-item-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 14px 15px 15px; }
.vy-item-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.vy-item-title a {
    color: #17262e; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vy-item-title a:hover { color: var(--vy-accent); }

.vy-item-review { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.vy-item-score {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 36px; height: 23px; padding: 0 7px; border-radius: 7px;
    background: var(--vy-accent); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.vy-item-score-text { font-size: 13.5px; font-weight: 700; color: #17262e; }
.vy-item-reviews { font-size: 13px; color: #7a8b96; }

.vy-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vy-item-loc { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 13.5px; color: #5f7683; }
.vy-item-loc svg { width: 14px; height: 14px; flex: none; color: var(--vy-accent); }
.vy-item-stars { display: inline-flex; align-items: center; gap: 2px; flex: none; color: #f6b01e; }
.vy-item-stars svg { width: 13px; height: 13px; display: block; }

/* margin-top:auto ⇒ hàng giá luôn dính đáy thẻ, mọi thẻ trong hàng bằng nhau. */
.vy-item-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 10px; border-top: 1px solid #f0f4f7;
}
.vy-item-price { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vy-item-price del { font-size: 13px; color: #98a5ae; }
.vy-item-price ins { text-decoration: none; font-size: 17px; font-weight: 800; color: #e5372c; }
.vy-item-price-contact { font-size: 15.5px !important; color: var(--vy-accent) !important; }
.vy-item-btn {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 9px 14px; border-radius: 10px; background: var(--vy-accent); color: #fff;
    font-size: 13.5px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: filter .15s ease;
}
.vy-item-btn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.vy-item-btn svg { width: 13px; height: 13px; flex: none; }

/* Thẻ nằm trong cột Bootstrap ở trang danh sách → chừa khoảng cách dưới. */
[class*="col-"] > .vy-item { margin-bottom: 22px; }

/* ---------- Dịch vụ đi kèm (bán rời) ---------- */
.vy-addons-note { margin: -6px 0 14px; font-size: 13.5px; color: #7a8b96; }
.vy-addon-list { margin: 0; padding: 0; list-style: none; }
.vy-addon {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 14px 0; border-top: 1px solid #eef3f6;
}
.vy-addon:first-child { border-top: 0; padding-top: 0; }
.vy-addon-main { min-width: 0; }
.vy-addon-name { display: block; font-size: 15.5px; font-weight: 700; color: #17262e; line-height: 1.4; }
.vy-addon-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 7px; }
.vy-addon-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 99px; background: #f2f6f8;
    font-size: 12.5px; color: #5f7683; white-space: nowrap;
}
.vy-addon-chip svg { width: 13px; height: 13px; flex: none; color: var(--primary-color, #0e7c93); }
.vy-addon-desc { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: #5f7683; }
.vy-addon-desc p { margin: 0; }
.vy-addon-price { flex: none; text-align: right; line-height: 1.3; }
.vy-addon-amount { display: block; font-size: 16.5px; font-weight: 800; color: #e5372c; }
.vy-addon-unit { display: block; font-size: 12.5px; color: #7a8b96; }
.vy-addon-free { font-size: 15px; font-weight: 700; color: var(--primary-color, #0e7c93); }

@media (max-width: 575.98px) {
    .vy-addon { flex-direction: column; gap: 8px; }
    .vy-addon-price { text-align: left; }
}

/* ---------- Banner hotline cạnh bộ lọc ----------
   Ảnh gốc 1216x434. Chỉ theme MustGo có rule ép width:100%; theme khác ảnh giữ nguyên
   kích thước thật, TRÀN khỏi cột 3/12 và đè lên danh sách kết quả bên phải.
   Module tự khai để chạy đúng trên mọi theme. */
.vy-sidebar-hotline { margin: 0 0 25px 0; }
.vy-sidebar-hotline a { display: block; }
.vy-sidebar-hotline img {
    display: block; width: 100%; max-width: 100%; height: auto; border-radius: 10px;
}

/* ---------- Chặn tràn cho cột bộ lọc & cột kết quả ----------
   Cột trái hay bị ảnh/khối rộng đẩy tràn sang cột phải. Chốt chặn chung một lần. */
.vne_filter img,
.vy-sidebar-hotline img { max-width: 100%; }

/* ---------- Nhóm bộ lọc dài: cuộn trong nhóm ----------
   "Dịch vụ kèm theo"/"Tiện nghi" có thể vài chục mục, để xổ hết thì bộ lọc dài hơn cả trang
   kết quả. Chỉ gắn class khi nhóm đủ dài (xem filter-search.blade.php) nên nhóm ngắn không
   mọc thanh cuộn vô duyên. `overscroll-behavior:contain` để cuộn hết danh sách không kéo theo
   cả trang. Thanh cuộn tự khai (mảnh, màu trung tính) — mặc định của Windows quá dày. */
.vy-filter-scroll {
    max-height: 258px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
}
/* ⚠️ `scrollbar-width`/`scrollbar-color` (chuẩn mới) LÀM CHROME BỎ QUA toàn bộ ::-webkit-scrollbar
   và quay về thanh cuộn mảnh gốc của Windows — thanh đó CÓ 2 nút mũi tên ở hai đầu, trông bẩn.
   Đã kiểm chứng: bỏ 2 thuộc tính này là hết mũi tên. Nên chỉ cấp cho trình duyệt không có
   ::-webkit-scrollbar (Firefox), còn Chrome/Safari đi theo nhánh webkit bên dưới. */
@supports not selector(::-webkit-scrollbar) {
    .vy-filter-scroll { scrollbar-width: thin; scrollbar-color: #c8d6de transparent; }
}
.vy-filter-scroll::-webkit-scrollbar { width: 6px; }
.vy-filter-scroll::-webkit-scrollbar-track { background: transparent; }
.vy-filter-scroll::-webkit-scrollbar-thumb { background: #c8d6de; border-radius: 6px; }
.vy-filter-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary-color, #0e7c93); }
/* Số mục đang chọn của nhóm — mục đã tick có thể nằm ngoài vùng nhìn thấy sau khi cuộn */
.vy-filter-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    margin-left: 7px; padding: 0 6px; border-radius: 20px;
    background: var(--primary-color, #0e7c93); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1;
}

/* ---------- Nhóm tiện nghi: tách các card cho thoáng ----------
   Voyage ép MỌI nhóm tiện nghi về position 1 → nhiều .bg_white xếp liền nhau thành một dải
   trắng dính chặt. Chèn khoảng cách giữa các card liên tiếp để mỗi nhóm ra dáng "thẻ" riêng. */
.voyage-attr-block + .voyage-attr-block { margin-top: 20px; }

/* ---------- Tab gói dịch vụ ---------- */
.voyage-packages { margin-bottom: 25px; }
.voyage-pkg-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.voyage-pkg-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
    border: 1px solid #d4dee4; border-radius: 12px; background: #fff;
    color: #33454f; font-size: 15px; font-weight: 700; cursor: pointer; transition: .15s;
}
.voyage-pkg-tab i { font-size: 15px; color: var(--primary-color, #0e7c93); }
.voyage-pkg-tab:hover { border-color: var(--primary-color, #0e7c93); color: #17262e; }
.voyage-pkg-tab.is-on {
    background: var(--primary-color, #0e7c93);
    border-color: var(--primary-color, #0e7c93); color: #fff;
    box-shadow: 0 6px 16px -8px var(--primary-color, #0e7c93);
}
.voyage-pkg-tab.is-on i { color: #fff; }
.voyage-pkg-tab small { font-size: 11.5px; font-weight: 500; opacity: .85; }
@media (max-width: 575px) { .voyage-pkg-tab { flex: 1 1 auto; justify-content: center; padding: 11px 12px; font-size: 13.5px; } }
.voyage-pkg-panel { display: none; }
.voyage-pkg-panel.is-on { display: block; animation: vyFade .25s ease; }
@keyframes vyFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.voyage-pkg-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.voyage-pkg-facts .fact {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
    border-radius: 20px; background: #f2f6f8; color: #5f7683; font-size: 12.5px; font-weight: 600;
}

/* ---------- Bảng giá (per_pax / per_vessel) ---------- */
.voyage-price-table { width: 100%; }
.voyage-price-table th {
    text-align: left; padding: 10px 14px; font-size: 12.5px; text-transform: uppercase;
    letter-spacing: .03em; color: #5f7683; border-bottom: 2px solid #e6edf1;
}
.voyage-price-table td { padding: 12px 14px; border-bottom: 1px solid #eef3f6; }
.voyage-price-table ins { text-decoration: none; font-weight: 800; color: #e0413a; }
.voyage-price-table del { color: #98a5ae; margin-right: 6px; }

/* ---------- Lịch trình ---------- */
.voyage-itinerary { margin-top: 6px; }
.voyage-itin-heading { font-size: 16px; font-weight: 700; color: #17262e; margin: 4px 0 12px; }
/* Lịch trình soạn tự do (HTML từ editor) */
.voyage-itin-content { font-size: 14px; line-height: 1.7; color: #33454f; }
.voyage-itin-content h2, .voyage-itin-content h3, .voyage-itin-content h4 {
    font-size: 15.5px; font-weight: 700; color: #17262e; margin: 18px 0 8px;
    padding-left: 12px; border-left: 3px solid var(--primary-color, #0e7c93); }
.voyage-itin-content > :first-child { margin-top: 0; }
.voyage-itin-content p { margin: 0 0 10px; }
.voyage-itin-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0 12px; }
.voyage-itin-content ul, .voyage-itin-content ol { margin: 0 0 12px; padding-left: 20px; }
.voyage-itin-content li { margin-bottom: 4px; }
.voyage-itin-content table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.voyage-itin-content td, .voyage-itin-content th { border: 1px solid #e6edf1; padding: 8px 10px; }
.voyage-itin-day {
    display: grid; grid-template-columns: 150px 1fr; gap: 16px;
    padding: 16px; border: 1px solid #e6edf1; border-radius: 10px; background: #fff; margin-bottom: 12px;
}
.voyage-itin-day.no-img { grid-template-columns: 1fr; }
@media (max-width: 600px) { .voyage-itin-day { grid-template-columns: 1fr; } }
.voyage-itin-day .itin-img img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.voyage-itin-day .itin-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.voyage-itin-day .itin-desc { font-size: 13px; color: #5f7683; margin-bottom: 8px; }
.voyage-itin-day .itin-content { font-size: 13.5px; line-height: 1.65; }
.voyage-itin-day .itin-content p { margin: 0 0 5px; }

/* ---------- Tiện nghi cabin: 2 cột + toggle xem thêm ---------- */
.voyage-room-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-top: 8px; }
/* Vạch ngăn mảnh giữa mô tả và danh sách tiện nghi — hai nhóm nội dung khác nhau */
.vy-cabin-info .voyage-room-terms { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f4f6; }
@media (max-width: 575px) { .voyage-room-terms { grid-template-columns: 1fr; } }
.voyage-room-terms p { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; }
.voyage-room-terms p i { color: var(--primary-color, #0e7c93); margin-top: 3px; flex: none; }
.voyage-room-terms p.term-hidden { display: none; }
.voyage-room-terms.is-open p.term-hidden { display: flex; }
.voyage-term-toggle {
    grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    margin-top: 4px; padding: 6px 0; border: 0; background: none;
    color: var(--primary-color, #0e7c93); font-size: 13px; font-weight: 700; cursor: pointer;
}
.voyage-term-toggle i { transition: transform .2s; }
.voyage-room-terms.is-open .voyage-term-toggle i { transform: rotate(180deg); }

/* ==========================================================================
   YÊU CẦU BÁO GIÁ — 3 form (nghỉ đêm / trong ngày / thuê tàu)
   ========================================================================== */
.voyage-mode { margin-bottom: 30px; }
.voyage-mode > .vy-card-title i { color: var(--primary-color, #0e7c93); margin-right: 6px; }

/* Form dùng chung — NỔI BẬT: viền + nền + bóng đổ bám --primary-color của theme,
   thêm dải màu 4px trên đỉnh làm điểm nhấn (fallback màu tĩnh cho trình duyệt cũ). */
.voyage-quote-form { position: relative; padding: 24px; border-radius: 16px; margin-bottom: 18px;
    border: 1.5px solid #cfe4ea;
    border-color: color-mix(in srgb, var(--primary-color, #0e7c93) 30%, #fff);
    border-top: 4px solid var(--primary-color, #0e7c93);
    background: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color, #0e7c93) 6%, #fff), #fff 52%);
    box-shadow: 0 2px 10px rgba(16,44,56,.05), 0 22px 48px -24px rgba(14,124,147,.5);
    box-shadow: 0 2px 10px rgba(16,44,56,.05), 0 22px 48px -24px color-mix(in srgb, var(--primary-color, #0e7c93) 55%, transparent); }
.voyage-quote-overnight { position: sticky; top: 12px; z-index: 5; }
/* Lưới cố định 4 cột (2 cột trên tablet, 2 cột mobile) → hàng luôn lấp đầy đều,
   KHÔNG dùng auto-fit (auto-fit làm 1 ô lẻ giãn full hàng, 2 ô lệch tỉ lệ). */
.vq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
@media (min-width: 768px) { .vq-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vq-grid + .vq-contact, .vq-grid + .voyage-estimate { margin-top: 16px; }
.vq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vq-field.vq-col-2 { grid-column: span 2; }
.vq-field.vq-col-full { grid-column: 1 / -1; }
@media (max-width: 767px) {
    .vq-field.vq-col-2, .vq-field.vq-col-full { grid-column: 1 / -1; }
}
.vq-field > label { font-size: 12.5px; font-weight: 700; color: #17262e; }
.vq-field .opt { font-weight: 400; color: #93a5b0; }
.vq-field .req { color: #e0413a; }
.vq-input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #d4dee4; border-radius: 9px;
    background: #fff; font-size: 14px; color: #17262e; }
.vq-input:focus { outline: none; border-color: var(--primary-color, #0e7c93); box-shadow: 0 0 0 3px rgba(14,124,147,.14); }
textarea.vq-input { min-height: 60px; resize: vertical; }
select.vq-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    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='%235f7683' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
/* Ô select "Khu vực" ở banner tìm kiếm: KHỚP KIỂU với ô text bên cạnh — theme cho input
   border:0 / box-shadow:none / height:30 / padding:0 / nền trắng blend vào thẻ .form-content.
   Trước đây select giữ viền Bootstrap nên trông như hộp lồng hộp. Thêm cả mũi tên xổ. */
.banner-header-body .form-content select.form-control,
.form-search-simple select.form-control {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
    background-color: #fff; color: #767575;
    height: 30px !important; padding: 0 26px 0 0 !important;
    font-size: 16px !important; font-weight: normal !important;
    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='%235f7683' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; background-size: 16px;
}
.banner-header-body .form-content select.form-control:focus { box-shadow: none !important; outline: none; }

/* ===== Banner search: dropdown "Khu vực" (custom) + gợi ý tên du thuyền (AJAX) ===== */
.input-search.vg-combo, .input-search.vg-suggest { position: relative; }
.vg-combo .vg-combo-input { cursor: pointer; }
.vg-combo-item > i.fa-check { font-size: 11px; }
.form-content input.vg-combo-input { padding-right: 22px !important; }
.vg-combo-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    color: #5f7683; font-size: 12px; pointer-events: none; transition: transform .2s; z-index: 2; }
.vg-combo.is-open .vg-combo-caret { transform: translateY(-50%) rotate(180deg); }

.vg-combo-list {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid #e6edf1; border-radius: 12px;
    box-shadow: 0 18px 44px -14px rgba(16, 44, 56, .32); max-height: 340px; overflow-y: auto;
}
.vg-combo-list[hidden] { display: none; }
.vg-combo-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
    font-size: 14.5px; color: #17262e; cursor: pointer; transition: background .12s, color .12s; line-height: 1.35;
}
.vg-combo-item > i { color: var(--primary-color, #0e7c93); font-size: 13px; flex: none; width: 15px; text-align: center; }
.vg-combo-item:hover { background: #f2f6f8; }
.vg-combo-item.is-on { background: color-mix(in srgb, var(--primary-color, #0e7c93) 12%, #fff); color: var(--primary-color, #0e7c93); font-weight: 700; }
.vg-combo-empty { padding: 14px 12px; text-align: center; color: #93a5b0; font-size: 13.5px; }

/* ===== Thanh đầu trang kết quả: tiêu đề bên trái, cụm bố cục + sắp xếp bên PHẢI CÙNG DÒNG =====
   Tự khai hết (không mượn .topbar-search/.page-title/.category-total của theme) nên bố cục
   giống nhau ở mọi theme; màu bám biến theme, có fallback cho theme không khai --primary-color-2. */
.vy-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 20px;
    flex-wrap: wrap; margin: 0 0 6px; }
.vy-topbar-main { min-width: 0; }
.vy-topbar-title { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; font-weight: 700;
    color: var(--primary-color-2, var(--primary-color, #17262e)); }
.vy-topbar-count { margin-top: 6px; font-size: 15px; line-height: 22px; color: #5f7683; }
.vy-topbar-tools { display: flex; align-items: center; gap: 10px; flex: none; flex-wrap: nowrap; }
.vy-orderby { margin: 0; padding: 0; }
@media (max-width: 575px) {
    /* Hết chỗ trên một dòng → cụm công cụ xuống dòng và trải hết bề ngang, ô sắp xếp giãn theo */
    .vy-topbar-tools { flex: 1 1 100%; }
    .vy-orderby, .vy-orderby-form, .vy-orderby-combo { flex: 1; min-width: 0; }
}

/* ===== Sắp xếp (topbar kết quả tìm kiếm) — nút dropdown đẹp; list dùng chung .vg-combo-list ở trên ===== */
.vy-orderby-combo { position: relative; min-width: 178px; }
.vy-orderby-combo .vg-combo-input {
    height: 40px !important; width: 100%;
    border: 1px solid #d9e2e8 !important; border-radius: 10px !important; background: #fff !important;
    box-shadow: none !important; color: #33454f; font-size: 14px; font-weight: 600;
    padding: 0 34px 0 34px !important; cursor: pointer;
}
.vy-orderby-combo .vg-combo-input:focus { outline: none; border-color: var(--primary-color, #0e7c93) !important; }
.vy-orderby-combo.is-open .vg-combo-input { border-color: var(--primary-color, #0e7c93) !important; }
.vy-orderby-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--primary-color, #0e7c93); font-size: 13px; pointer-events: none; z-index: 2; }
.vy-orderby-combo .vg-combo-caret { right: 13px; }
.vy-layout-toggle { height: 40px; }
.vy-layout-btn { height: 40px; }
/* Gợi ý du thuyền: tên đậm + khu vực nhỏ bên dưới */
.vg-suggest-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vg-suggest-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-suggest-loc { font-size: 12px; color: #93a5b0; }
/* Loading khi đang gọi AJAX gợi ý du thuyền (chỉ hiện khi .vg-suggest.is-loading) */
.vg-suggest-spin { position: absolute; right: 10px; top: 50%; margin-top: -8px; width: 16px; height: 16px;
    border: 2px solid color-mix(in srgb, var(--primary-color, #0e7c93) 25%, #e6edf1);
    border-top-color: var(--primary-color, #0e7c93); border-radius: 50%;
    display: none; z-index: 3; pointer-events: none; animation: vgSpin .6s linear infinite; }
.vg-suggest.is-loading .vg-suggest-spin { display: block; }
.form-content input.vg-suggest-input { padding-right: 30px !important; }
/* Dòng "Đang tìm…" trong danh sách gợi ý */
.vg-combo-loading { display: flex; align-items: center; gap: 9px; padding: 12px; color: #5f7683; font-size: 13.5px; }
.vg-combo-loading::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid #e6edf1; border-top-color: var(--primary-color, #0e7c93); animation: vgSpin .6s linear infinite; }
@keyframes vgSpin { to { transform: rotate(360deg); } }
.vq-pax label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vq-pax-price ins { text-decoration: none; font-weight: 700; color: #e0413a; font-size: 12.5px; }
.vq-pax-price del { color: #98a5ae; font-size: 11.5px; margin-right: 4px; }

/* Chân form: nút mở modal ĐẶT GIỮA */
.vq-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.vq-foot .vq-msg { flex: 1; min-width: 180px; font-size: 13.5px; }
.vq-open-foot { flex-direction: column; align-items: center; gap: 10px; }
.vq-open-foot .vq-msg { flex: none; min-width: 0; text-align: center; }
.vq-msg.ok { color: #1a8a5f; font-weight: 600; }
.vq-msg.err { color: #e0413a; font-weight: 600; }
.vq-quote-open { min-width: 220px; white-space: nowrap; }
.vq-quote-open i { margin-left: 6px; }

/* Lịch daterangepicker ĐƠN (theme ép width 490px cho lịch đôi → trả về 278px như mặc định) */
.daterangepicker.vq-single-drp { width: 278px !important; }
.daterangepicker.vq-single-drp .drp-calendar { max-width: 270px; }

/* ==========================================================================
   MODAL YÊU CẦU BÁO GIÁ (chỉ hiện khi bấm nút) — tự chứa, không cần Bootstrap JS
   ========================================================================== */
.vq-modal-overlay {
    position: fixed; inset: 0; z-index: 1050; display: none;
    align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
    background: rgba(16, 44, 56, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.vq-modal-overlay.is-open { display: flex; }
body.vq-modal-lock { overflow: hidden; }
.vq-modal {
    width: 100%; max-width: 520px; background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(16, 44, 56, .35); animation: vqModalIn .2s ease;
}
@keyframes vqModalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vq-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--primary-color, #0e7c93); }
.vq-modal-head h5 { margin: 0; font-size: 16px; font-weight: 800; color: #fff; }
.vq-modal-head h5 i { margin-right: 6px; }
.vq-modal-close {
    background: rgba(255, 255, 255, .2); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%;
    font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.vq-modal-close:hover { background: rgba(255, 255, 255, .32); }
.vq-modal-body { padding: 20px; }
.vq-modal-summary { background: #f2f6f8; border: 1px solid #e6edf1; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
/* Ghi chú "đã điền theo tài khoản" khi đăng nhập */
.vq-account-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 12px;
    border-radius: 10px; font-size: 13px; background: #e4f7ee; color: #1a8a5f; border: 1px solid #bfe8d5; }
.vq-account-hint i { flex: none; }
.vq-sum-title { font-size: 15px; font-weight: 800; color: #17262e; }
.vq-sum-line { margin-top: 4px; font-size: 13px; color: #5f7683; }
.vq-sum-est { margin-top: 8px; font-size: 14px; color: #7a4a1e; }
.vq-sum-est strong { color: #e0670e; font-size: 17px; }
.vq-sum-est span { font-size: 12px; color: #b08a63; }

/* --- Chọn DỊCH VỤ ĐI KÈM trong modal gửi yêu cầu --- */
.vq-addons { margin-bottom: 16px; padding: 12px 14px; border: 1px solid #e6edf1; border-radius: 12px; }
.vq-addons-head { font-size: 12.5px; font-weight: 800; color: #17262e; margin-bottom: 8px; }
.vq-addons-head .opt { font-weight: 400; color: #93a5b0; }
.vq-addon-picks { margin: 0; padding: 0; list-style: none; }
.vq-addon-pick { display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-top: 1px solid #f0f4f6; }
.vq-addon-pick:first-child { border-top: 0; padding-top: 2px; }
.vq-addon-lbl { display: flex; align-items: flex-start; gap: 9px; flex: 1 1 auto; min-width: 0;
    margin: 0; font-weight: 400; cursor: pointer; }
/* Tự vẽ ô tick: mỗi theme style `input[type=checkbox]` (0-1-1) một kiểu, tick rồi vẫn trông
   như chưa tick. Bám .vq-addons để đủ đặc hiệu (0-2-0) mà không cần !important. */
.vq-addons .vq-addon-tick {
    -webkit-appearance: none; appearance: none; flex: none; position: relative;
    width: 18px; height: 18px; margin: 1px 0 0; padding: 0; border: 1.5px solid #c2cfd6;
    border-radius: 5px; background: #fff; cursor: pointer; transition: background .15s, border-color .15s;
}
.vq-addons .vq-addon-tick:checked { background: var(--primary-color, #0e7c93); border-color: var(--primary-color, #0e7c93); }
.vq-addons .vq-addon-tick:checked::after {
    content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.vq-addons .vq-addon-tick:focus-visible { outline: 2px solid var(--primary-color, #0e7c93); outline-offset: 2px; }
.vq-addon-txt { min-width: 0; }
.vq-addon-t { display: block; font-size: 14px; font-weight: 700; color: #17262e; line-height: 1.4; }
.vq-addon-p { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: #e5372c; }
.vq-addon-p em { font-style: normal; font-weight: 400; font-size: 12px; color: #7a8b96; margin-left: 3px; }
/* Ô số suất chỉ hiện khi đã tick — chưa tick mà bày sẵn ô xám thì rối mắt.
   Vẫn nằm trong DOM (disabled) nên không lọt vào request. */
.vq-addon-qtywrap { display: none; align-items: center; gap: 7px; flex: none; margin-left: auto; }
.vq-addon-pick.is-on .vq-addon-qtywrap { display: flex; }
.vq-addon-qtywrap > label { font-size: 12px; color: #7a8b96; margin: 0; white-space: nowrap; }
.vq-addon-qty { width: 62px; min-height: 34px; padding: 5px 6px; text-align: center; }
.vq-addon-sum { min-width: 92px; text-align: right; font-size: 13px; font-weight: 700; color: #e0670e; }
/* Tính theo ĐƠN → không có gì để nhập, nhưng ô vẫn phải nằm trong DOM để được gửi lên */
.vq-addon-pick[data-unit="per_booking"] > .vq-addon-qtywrap > label,
.vq-addon-pick[data-unit="per_booking"] > .vq-addon-qtywrap > .vq-addon-qty { display: none; }
.vq-addon-total { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #dbe4e9;
    text-align: right; font-size: 13px; color: #7a4a1e; }
.vq-addon-total strong { color: #e0670e; font-size: 15px; margin-left: 4px; }
@media (max-width: 575px) {
    .vq-addon-pick { flex-wrap: wrap; }
    /* flex-basis 100% + cho phép co lại: dùng width:100% kèm margin-left sẽ đội ra 26px
       và kéo giãn cả modal (tràn ngang trên điện thoại). */
    .vq-addon-qtywrap { flex: 1 1 100%; width: auto; margin-left: 26px; }
    .vq-addon-sum { flex: 1; text-align: left; }
}

.vq-modal .vq-modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vq-modal-msg { margin-top: 12px; font-size: 13.5px; }
.vq-modal-foot { display: flex; gap: 12px; padding: 14px 20px; border-top: 1px solid #eef3f6; }
.vq-modal-cancel { padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 700; background: #f1f5f7; border: 1px solid #e2e8ec; color: #5f7683; cursor: pointer; }
.vq-modal-cancel:hover { background: #e6edf1; }
.vq-modal-submit { flex: 1; min-width: 0; white-space: nowrap; }
@media (max-width: 575px) {
    .vq-modal-overlay { padding: 0; align-items: stretch; }
    .vq-modal { max-width: none; border-radius: 0; min-height: 100%; }
}

/* Ước tính (charter / trong ngày / nghỉ đêm) */
.voyage-estimate { padding: 12px 16px; border-radius: 10px; background: #fff6ee; font-size: 14px; color: #7a4a1e; }
.voyage-estimate strong { color: #e0670e; font-size: 18px; margin: 0 4px; }
.voyage-estimate-note { font-size: 12px; color: #b08a63; }

/* Nghỉ đêm: gợi ý chọn cabin + ước tính trong form sticky */
.voyage-ov-hint { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; color: #5f7683; }
.voyage-ov-hint i { color: var(--primary-color, #0e7c93); flex: none; }
.voyage-ov-estimate { margin-top: 10px; }
.voyage-ov-count { font-weight: 700; color: #7a4a1e; }
/* Trạng thái "chưa chọn cabin nào" */
.voyage-ov-estimate .voyage-ov-empty { display: none; }
.voyage-ov-estimate.is-empty { background: #f2f6f8; color: #5f7683; }
.voyage-ov-estimate.is-empty .voyage-ov-empty { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.voyage-ov-estimate.is-empty .voyage-ov-empty i { color: #93a5b0; }
.voyage-ov-estimate.is-empty .voyage-ov-filled { display: none; }

/* Ô chọn số lượng trên thẻ cabin */
.voyage-cabin-pick { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #dfe9ee; }
.voyage-cabin-pick label { display: block; font-size: 12.5px; font-weight: 700; color: #17262e; margin-bottom: 5px; }
.voyage-cabin-pick .vq-input { width: 100%; background-color: #fff; }
@media (min-width: 992px) { .voyage-cabin-pick .vq-input { max-width: none; } }
@media (max-width: 991.98px) {
    .voyage-cabin-pick { border-top: 0; padding-top: 0; }
    .voyage-cabin-pick .vq-input { max-width: 150px; }
}
/* Đang cập nhật giá theo ngày (AJAX) — làm mờ nhẹ giá + ước tính cho biết đang tải */
.voyage-quote-form.vq-pricing .voyage-estimate,
.voyage-quote-form.vq-pricing ~ .voyage-ov-block .price-utilities-regular { opacity: .55; transition: opacity .15s; }
/* Ngày đóng bán loại này → khoá ô số lượng */
.voyage-cabin-num.is-unavailable,
.vq-estimate-num.is-unavailable { opacity: .5; cursor: not-allowed; background: #f2f6f8; }

/* Nghỉ đêm: Gói dịch vụ + Ngày + Số khách trên 1 DÒNG */
.vq-ov-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .vq-ov-grid { grid-template-columns: 1.7fr 1fr 1.2fr; } }
.vq-datepick { cursor: pointer; }

/* Số khách kiểu dropdown (giống hotel) */
.vq-guests-picker { position: relative; }
.vq-guests-toggle { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.vq-guests-ico { color: var(--primary-color, #0e7c93); flex: none; }
.vq-guests-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-guests-caret { color: #5f7683; font-size: 12px; flex: none; transition: transform .2s; }
.vq-guests-picker.is-open .vq-guests-caret { transform: rotate(180deg); }
.vq-guests-pop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    background: #fff; border: 1px solid #e6edf1; border-radius: 12px;
    box-shadow: 0 14px 34px -10px rgba(16, 44, 56, .28); padding: 6px; display: none;
}
.vq-guests-picker.is-open .vq-guests-pop { display: block; }
.vq-guest-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px; }
.vq-guest-row + .vq-guest-row { border-top: 1px solid #f2f6f8; }
.vq-guest-name { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; color: #17262e; }
.vq-guest-price { font-size: 12.5px; font-weight: 700; }
.vq-guest-price ins { text-decoration: none; color: #e0413a; }
.vq-guest-price del { color: #98a5ae; font-size: 11.5px; margin-right: 4px; font-weight: 400; }
.vq-stepper { display: inline-flex; align-items: center; gap: 12px; }
.vq-step {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d4dee4; background: #fff; color: #17262e;
    font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s;
}
.vq-step:hover { border-color: var(--primary-color, #0e7c93); color: var(--primary-color, #0e7c93); }
.vq-step-val { min-width: 20px; text-align: center; font-size: 15px; font-weight: 700; color: #17262e; }

/* Khối overnight: cabin (chỉ xem) + lịch trình */
.voyage-cabin-label { font-size: 14px; font-weight: 700; color: #17262e; margin: 6px 0 12px; }
.voyage-cabin-note { margin-top: 8px; font-size: 12px; color: #93a5b0; font-style: italic; }
.voyage-cabin-view .vy-cabin-capacity { font-weight: 700; margin-bottom: 4px; }
.voyage-pkg-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.voyage-pkg-facts .fact { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px;
    background: #f2f6f8; color: #5f7683; font-size: 12.5px; font-weight: 600; }

/* Tour ngày / charter: MỖI GÓI = 1 form NỔI BẬT (khung + dải màu + bóng như nghỉ đêm)
   TÁCH khỏi 1 thẻ trắng riêng chứa lịch trình bên dưới. */
.voyage-pkg-item { margin-bottom: 26px; }
.voyage-pkg-item:last-child { margin-bottom: 0; }
/* Đầu form: tên gói + giờ/giá — nằm TRONG khung form, có gạch phân cách nhẹ với lưới nhập */
.voyage-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #0e7c93) 16%, #eef3f6); }
.voyage-card-head .voyage-pkg-facts { margin: 8px 0 0; }
/* Thẻ nội dung (lịch trình) tách hẳn khỏi form phía trên */
.voyage-pkg-content .voyage-itinerary { margin-top: 0; }
.voyage-pkg-content > :first-child { margin-top: 0; }
.voyage-card-title { font-size: 17px; font-weight: 700; color: #17262e; }
.voyage-charter-prices { display: flex; gap: 8px; flex-wrap: wrap; }
.voyage-charter-prices .vq-pill { padding: 5px 12px; border-radius: 20px; background: #eef4f6; font-size: 13px; font-weight: 600; }
.voyage-charter-prices ins { text-decoration: none; color: #e0413a; font-weight: 700; }
.voyage-charter-prices del { color: #98a5ae; font-size: 12px; margin-right: 4px; }

/* ---------- Vá vài chỗ cho khối gói khớp look Cruise ---------- */
.voyage-packages .vy-cabin-list .vy-cabin { margin-bottom: 16px; }
.voyage-packages .vy-cabin-price-box ins { text-decoration: none; }

/* ---------- #8 Bộ lọc AJAX: toggle bố cục, chế độ danh sách, loading, load-more ---------- */
.vy-layout-toggle { display: inline-flex; border: 1px solid #e1e7ec; border-radius: 8px; overflow: hidden; }
/* inline-flex + line-height:1: icon <i> là inline nên vốn ngồi trên baseline,
   chừa một khoảng trắng thừa phía DƯỚI trong ô nền xanh. */
.vy-layout-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
    border: 0; background: #fff; color: #8a97a0; width: 38px; height: 36px; cursor: pointer; }
.vy-layout-btn > i { display: block; line-height: 1; font-size: 15px; }
.vy-layout-btn + .vy-layout-btn { border-left: 1px solid #e1e7ec; }
.vy-layout-btn.is-on { background: var(--primary-color, #0d6efd); color: #fff; }
.ajax-search-result.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* Chế độ danh sách: card full-width, ảnh trái - nội dung phải */
.vy-result-grid.vy-layout-list > .vy-result-col { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .vy-layout-list .vy-item { flex-direction: row; align-items: stretch; }
    .vy-layout-list .vy-item-thumb { flex: 0 0 300px; max-width: 300px; aspect-ratio: auto; }
    .vy-layout-list .vy-item-body { flex: 1; }
}
.vy-load-more { min-width: 220px; }
.vy-load-more[disabled] { opacity: .7; cursor: default; }

/* ---------- Bộ lọc trên mobile: mặc định gập, mở bằng nút ----------
   Nút chỉ hiện khi JS đã chạy (.is-ready) — không JS thì bộ lọc hiện đầy đủ như cũ.
   Từ 992px (cột trái tách ra) trở lên: luôn hiện, nút biến mất. */
/* Nút chỉ tồn tại ở dải mobile/tablet — từ lg cột lọc đứng riêng bên trái, luôn mở. */
.vy-filter-toggle {
    display: none; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px;
    padding: 12px 14px; border: 1px solid #e1e7ec; border-radius: 12px; background: #fff;
    color: #17262e; font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 44, 56, .05);
}
.vy-filter-toggle:hover { border-color: var(--primary-color, #0e7c93); }
.vy-filter-toggle > svg { width: 19px; height: 19px; flex: none; color: var(--primary-color, #0e7c93); }
.vy-filter-toggle > span[data-vy-filter-label] { flex: 1; text-align: left; }
.vy-filter-toggle-count {
    flex: none; min-width: 22px; padding: 1px 7px; border-radius: 20px;
    background: var(--primary-color, #0e7c93); color: #fff; font-size: 12px; font-weight: 700; text-align: center;
}
.vy-filter-toggle-count[hidden] { display: none; }
.vy-filter-toggle-caret { flex: none; display: inline-flex; color: #8a97a0; transition: transform .2s; }
.vy-filter-toggle-caret svg { width: 16px; height: 16px; }
.vy-filter-wrap.is-open .vy-filter-toggle-caret { transform: rotate(180deg); }
@media (max-width: 991px) {
    .vy-filter-wrap.is-ready .vy-filter-toggle { display: flex; }
    .vy-filter-wrap.is-ready .vy-filter-panel { display: none; }
    .vy-filter-wrap.is-ready.is-open .vy-filter-panel { display: block; }
}

/* Khoảng cách giữa các card kết quả — mobile chỉ 1 cột nên hai card sát nhau nhìn dính
   thành một khối; nới hơn desktop một chút. Đặt sau rule [class*="col-"] > .vy-item ở trên. */
.vy-result-grid > .vy-result-col > .vy-item { margin-bottom: 26px; }
@media (max-width: 767px) {
    .vy-result-grid > .vy-result-col > .vy-item { margin-bottom: 24px; }
    .vy-result-grid { row-gap: 6px; }
}

/* ---------- Trang chi tiết trên mobile: form gói/đặt chỗ lên ngay dưới ảnh ----------
   .row là flex nên chỉ cần đổi order, không phải đụng thứ tự HTML (desktop giữ nguyên).
   Đặt order mặc định cho MỌI cột con trước, nếu không các khối chưa khai order (order:0)
   sẽ nhảy hết lên đầu. */
@media (max-width: 991px) {
    .vy-page .row > * { order: 3; }
    .vy-page .row > .vy-col-head { order: 1; }
    .vy-page .row > .vy-col-packages { order: 2; margin-bottom: 25px; }
}

/* #12 Nút chuyển sang bản đồ trên topbar danh sách */
.vy-map-link { border: 1px solid #e1e7ec; background: #fff; color: #5f7683; padding: 7px 12px;
    border-radius: 8px; text-decoration: none; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.vy-map-link:hover { border-color: var(--primary-color, #0d6efd); color: var(--primary-color, #0d6efd); }