/* ==========================================================================
   Component cho trang chi tiết tour
   ========================================================================== */

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h); background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: var(--s4); height: 100%; }
.logo { display: flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: 19px; color: var(--primary); white-space: nowrap; flex: none; }
.logo .mark {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
}
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: nowrap; }
.nav a {
  padding: var(--s2) 10px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--secondary);
  display: inline-flex; align-items: center; min-height: 44px;
  white-space: nowrap;   /* không bao giờ gãy dòng trong header */
}
@media (max-width: 1240px) { .nav a { font-size: 14.5px; padding: var(--s2) 8px; } }
.nav a:hover { background: var(--primary-wash); text-decoration: none; }
.nav a.season { color: var(--cta); }
.nav a.season::after {
  content: "2/9"; margin-left: 6px; background: var(--cta); color: #fff;
  font-size: 11px; font-weight: 800; padding: 1px 5px; border-radius: 3px;
}
.head-tel {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 800; color: var(--secondary); white-space: nowrap; min-height: 44px;
}
.nav-toggle { display: none; }
@media (max-width: 1080px) {
  :root { --header-h: var(--header-h-mb); }
  .nav { display: none; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    /* flex: none là bắt buộc, không phải cho gọn: header chật thì flex-shrink
       mặc định bóp nút xuống 36px — đo được — dù đã ghi width 44px. */
    flex: none; box-sizing: border-box;
    width: 44px; height: 44px; min-width: 44px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; cursor: pointer;
  }
  .head-tel span { display: none; }
}

/* ---------- breadcrumb: 5 tầng, cuộn ngang trên mobile ---------- */
.crumbs {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) 0; font-size: var(--fs-sm); color: var(--ink-2);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.crumbs::-webkit-scrollbar { display: none; }
/* Vùng bấm: breadcrumb là chỗ dễ vi phạm sàn 44px nhất vì chữ nhỏ và xếp dày.
   Giải bằng padding dọc + margin âm để không làm hàng cao thêm.            */
.crumbs a, .crumbs span { white-space: nowrap; }
.crumbs a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px; margin: -11px 0;
}
.crumbs .sep { color: var(--ink-muted); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- đầu trang tour ---------- */
.tour-head { padding-bottom: var(--s4); }
.tour-head h1 { margin: var(--s2) 0 var(--s3); max-width: 30ch; }
.head-facts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center; }
.rating { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.stars { color: var(--star); letter-spacing: 1px; }

/* ---------- bố cục 2 cột ---------- */
.tour-grid {
  display: grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--s12);
}
@media (min-width: 1000px) {
  .tour-grid { grid-template-columns: minmax(0,1fr) 372px; gap: var(--s8); align-items: start; }
}
/* .col-main được dùng ở cả ba trang bán mà chưa hề được khai — phép kiểm quét
   động bắt được 23/08/2026. Nó cần đúng một luật, và là luật thật chứ không
   phải đặt cho có: ô lưới mặc định lấy min-width auto, nên một bảng hay một
   khối chữ dài bên trong có thể phình ra đẩy cả cột. min-width 0 chặn việc đó. */
.col-main { min-width: 0; }

/* ---------- gallery ---------- */
.gallery { position: relative; }
.gallery .shot {
  aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(135deg, #cfe3d0, #9fc7a6 55%, #7fae8c);
  display: grid; place-items: center; color: #24422e;
  font-size: var(--fs-sm); font-weight: 700; text-align: center; padding: var(--s4);
}
/* THÊM khi chuyển sang theme: bản mẫu để .shot rỗng làm ô giữ chỗ có nền dốc
   màu, còn theme in ảnh thật vào trong. Hai luật dưới cho ảnh phủ kín ô mà vẫn
   giữ đúng tỉ lệ 16/10 — không có chúng thì ảnh nằm giữa ô và hở nền hai bên.
   Không đặt tên lớp mới: luật neo vào chính .shot và .thumbs đã có. */
.gallery .shot img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s2); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs div {
  aspect-ratio: 16 / 11; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(135deg, #d8e6da, #a8cbb0);
  border: 2px solid transparent; cursor: pointer;
}
.gallery .thumbs div:first-child { border-color: var(--primary); }
.gallery .badge-real {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 2;
  background: rgba(6,32,43,.82); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--r-pill);
}

/* ---------- hộp đặt tour ---------- */
.booking { position: sticky; top: calc(var(--header-h) + var(--s4)); }
.booking .box { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.booking .price-band { background: var(--cta); color: #fff; padding: var(--s4); }
.booking .price-band .lbl { font-size: var(--fs-sm); opacity: .95; }
.booking .price-band .now { font-size: 30px; font-weight: 800; line-height: 1.15; }
.booking .price-band .was { text-decoration: line-through; opacity: .8; font-size: var(--fs-sm); }
.booking .price-band .per { font-size: var(--fs-sm); font-weight: 600; }
.booking .body { padding: var(--s4); display: grid; gap: var(--s3); }
.booking .row { display: flex; align-items: flex-start; gap: var(--s2); font-size: 15px; }
.booking .row svg { flex: none; margin-top: 3px; color: var(--primary); }
.booking .row b { font-weight: 700; }

/* ---------- trang ca_hai: dải giá kép trong hộp đặt tour ----------
   Chỉ trang ca_hai mới cần: một trang bán CẢ HAI cách đi, nên không thể chỉ
   hiện MỘT số "giá từ" như hai trang kia — số đó sẽ ngầm nói với nửa khách
   còn lại rằng cách của họ không có ở đây. Hiện cả hai số cạnh nhau, TRƯỚC khi
   khách phải bấm dải chọn .seg để lộ ra biểu mẫu tương ứng. */
/* .price-band.price-band-dual (0,2,0 tại chỗ khai này) phải thắng .booking
   .price-band (0,2,0 nhưng khai TRƯỚC) cho luật `padding` — hai luật hoà độ
   đặc hiệu thì luật khai SAU thắng, nhưng phòng khi ai đó dời khối này lên
   trên, khai cả `.booking .price-band.price-band-dual` (0,3,0) cho chắc. */
.price-band.price-band-dual,
.booking .price-band.price-band-dual { display: grid; grid-template-columns: 1fr 1fr; padding: 0; gap: 0; }
.price-band-dual .pb-half { padding: var(--s4); }
.price-band-dual .pb-alt { background: var(--secondary); border-left: 1px solid rgba(255,255,255,.25); }

/* ---------- trang ca_hai: ẩn khối theo luồng đã chọn (ghép lẻ / đoàn riêng) ----------
   Dùng thuộc tính [hidden] có sẵn của HTML thay vì thêm một class riêng — đỡ
   phải khai lại luật hiển thị của từng khối con (.dates, .dep-wrap, .seg...).
   Nhưng PHẢI !important: nhiều khối trong hai trạng thái này đã tự đặt display
   riêng (ví dụ .dates{display:flex}), và vì cùng độ đặc hiệu (0,1,0) với luật
   mặc định [hidden] của trình duyệt, luật khai SAU trong stylesheet thắng —
   tức là .dates sẽ thắng và ĐÈ MẤT trạng thái ẩn nếu không có !important này. */
[data-mode][hidden] { display: none !important; }

/* chip ngày khởi hành — ĐỔI: Figma dùng dropdown 1 ngày, chip hiện hết lựa chọn */
.dates { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-date {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 10px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; font: inherit; font-size: var(--fs-sm); line-height: 1.25;
}
.chip-date b { font-weight: 700; }
.chip-date small { font-size: 11px; color: var(--ink-muted); }
.chip-date[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-wash); }
.chip-date.low { border-color: #E3C07A; }
.chip-date.low small { color: var(--warning); font-weight: 700; }
.chip-date.full { opacity: .5; cursor: not-allowed; }
.booking .cta-stack { display: grid; gap: var(--s2); }
.booking .trust {
  border-top: 1px solid var(--line); padding: var(--s3) var(--s4);
  font-size: 13px; color: var(--ink-2); background: var(--surface-soft);
}
.booking .trust b { color: var(--ink); }

/* ---------- tab ---------- */
.tabs {
  position: sticky; top: var(--header-h); z-index: 50;
  display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none;
  background: #fff; border-bottom: 1px solid var(--line); margin-bottom: var(--s6);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--ink-2); padding: var(--s3) var(--s4); cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }

.sect { padding: var(--s6) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 60px); }
.sect:last-of-type { border-bottom: 0; }
.sect > h2 { margin-bottom: var(--s4); }

/* ---------- lịch trình: accordion ---------- */
.day { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--s2); overflow: hidden; }
.day > summary {
  display: flex; align-items: center; gap: var(--s3); cursor: pointer;
  padding: var(--s3) var(--s4); font-weight: 700; color: var(--secondary);
  background: var(--surface-soft); list-style: none;
}
.day > summary::-webkit-details-marker { display: none; }
.day > summary::before {
  content: "+"; flex: none; width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; display: grid; place-items: center;
  font-size: 17px; font-weight: 700; line-height: 1;
}
.day[open] > summary::before { content: "–"; }
.day .day-body { padding: var(--s4); }
.day .day-body ul { margin: 0; padding-left: var(--s6); }
.day .day-body li { margin-bottom: var(--s2); }

/* ---------- bảng lịch khởi hành ---------- */
.months { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.months button {
  appearance: none; font: inherit; font-weight: 700; cursor: pointer;
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2);
}
.months button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.dep-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table.dep { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 720px; }
table.dep th, table.dep td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
table.dep thead th {
  background: var(--surface); font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-2); white-space: nowrap;
}
table.dep tbody tr:last-child td { border-bottom: 0; }
table.dep tbody tr:hover { background: var(--surface-soft); }
table.dep .d { font-weight: 700; white-space: nowrap; }
table.dep .p { font-weight: 700; color: var(--cta); white-space: nowrap; }
table.dep .pc { white-space: nowrap; }
table.dep tr.gone { color: var(--ink-muted); }
table.dep tr.gone .p { color: var(--ink-muted); }
.dep-note { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- khối cam kết khởi hành ---------- */
.guarantee {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--success-wash); border: 1px solid #BFE0CE;
  border-radius: var(--r); padding: var(--s4); margin-top: var(--s4);
}
.guarantee svg { flex: none; color: var(--success); margin-top: 2px; }
.guarantee p { margin: 0; font-size: 15px; }
.guarantee b { color: var(--success); }

/* ---------- khuyến mãi 4 tầng ---------- */
.promos { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .promos { grid-template-columns: 1fr 1fr; } }
.promo { border: 1px solid var(--line); border-left: 4px solid var(--cta); border-radius: var(--r); padding: var(--s4); }
.promo h4 { color: var(--secondary); margin-bottom: var(--s2); }
.promo ul { margin: 0; padding-left: var(--s6); font-size: 15px; }
.promo li { margin-bottom: 5px; }
.promo b { color: var(--cta); }
.promo-foot { margin-top: var(--s3); font-size: 13px; color: var(--ink-2); }

/* ---------- bao gồm / không bao gồm ---------- */
.incl { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .incl { grid-template-columns: 1fr 1fr; } }
.incl h4 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.incl .yes h4 { color: var(--success); }
.incl .no  h4 { color: var(--error); }
.incl ul { margin: 0; padding-left: var(--s6); font-size: 15px; }
.incl li { margin-bottom: var(--s2); }

/* ---------- chính sách đặt cọc ---------- */
.deposit { border: 1px solid var(--primary-line); background: var(--primary-wash); border-radius: var(--r); padding: var(--s6); }
.deposit h3 { color: var(--secondary-dark); margin-bottom: var(--s3); }
.deposit .steps-3 { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 720px) { .deposit .steps-3 { grid-template-columns: repeat(3,1fr); } }
.deposit .st { background: #fff; border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-size: 15px; }
.deposit .st span {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; margin-right: var(--s2);
}
.bank { background: #fff; border: 1px solid var(--primary-line); border-radius: var(--r-sm); padding: var(--s4); font-size: 15px; }
.bank dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; }
.bank dt { color: var(--ink-2); }
.bank dd { margin: 0; font-weight: 700; }
.warn-line {
  display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s3);
  background: var(--error-wash); border-radius: var(--r-sm); padding: var(--s3);
  font-size: var(--fs-sm); color: #7E1B16;
}
.warn-line svg { flex: none; margin-top: 2px; }

/* ---------- công cụ tính ngân sách ---------- */
.calc { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s6); background: var(--surface-soft); }
.calc .fields { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
@media (min-width: 720px) { .calc .fields { grid-template-columns: repeat(3, 1fr); } }
.calc label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }
.calc input, .calc select {
  width: 100%; padding: var(--s3); font: inherit;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff; color: var(--ink);
}
.calc-out { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s4); }
.calc-out table { width: 100%; border-collapse: collapse; font-size: 15px; }
.calc-out td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
/* nowrap chỉ dành cho CỘT TIỀN. Phải loại trừ ô colspan, vì dòng ghi chú
   "Các mục thường bị quên" chỉ có một ô nên nó cũng là :last-child. Đo ở khổ
   375px: cả câu bị ép một dòng rộng 344px trong hộp 259px, đẩy cột tiền ra mốc
   402px — số "3.960.000đ" bị cắt khỏi màn hình. Trên trang bán, khách không đọc
   được tổng tiền là mất lead. */
.calc-out td:last-child:not([colspan]) { text-align: right; font-weight: 700; white-space: nowrap; }
.calc-out td[colspan] { text-align: left; font-weight: 600; white-space: normal; }
.calc-out tr:last-child td { border-bottom: 0; padding-top: var(--s3); font-size: 18px; }
.calc-out tr:last-child td:last-child { color: var(--cta); font-size: 21px; }
.calc-out .opt td { color: var(--ink-2); }

/* ---------- hỏi đáp ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  cursor: pointer; padding: var(--s4) 0; font-weight: 700; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary); font-size: 20px; font-weight: 700; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 var(--s4); color: var(--ink-2); }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- đánh giá ---------- */
.revs { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .revs { grid-template-columns: 1fr 1fr; } }
.rev { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.rev .who { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.rev .av {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
  background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
}
.rev .who small { display: block; color: var(--ink-muted); font-size: 13px; }

/* ---------- tour liên quan ---------- */
.rel { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .rel { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .rel { grid-template-columns: repeat(3,1fr); } }
.rcard { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.rcard .im { aspect-ratio: 16/10; background: linear-gradient(135deg,#d8e6da,#a8cbb0); }
/* THÊM khi chuyển sang theme: ô .im trong bản mẫu chỉ là nền dốc màu giữ chỗ,
   theme in ảnh thật vào. Nền dốc màu vẫn giữ để thẻ chưa có ảnh không bị trống. */
.rcard .im img { width: 100%; height: 100%; object-fit: cover; }
.rcard .bd { padding: var(--s3) var(--s4) var(--s4); }
.rcard h4 { font-size: 15px; margin-bottom: var(--s2); }
.rcard .facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 13px; color: var(--ink-2); margin-bottom: var(--s2); }
.rcard .pr { font-weight: 800; color: var(--cta); }

/* ---------- footer ---------- */
.site-foot { background: var(--surface-soft); border-top: 1px solid var(--line); margin-top: var(--s12); }
.foot-top { display: grid; gap: var(--s6); padding: var(--s8) 0; }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot h4 { margin-bottom: var(--s3); color: var(--secondary); }
.site-foot ul { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.site-foot li { margin-bottom: var(--s2); }
.licence { font-size: var(--fs-sm); color: var(--ink-2); }
.licence b { color: var(--ink); }
.foot-bot { border-top: 1px solid var(--line); padding: var(--s4) 0; font-size: 13px; color: var(--ink-muted); }

/* ---------- thanh dính đáy trên mobile ----------
   Không có trong Figma (Figma chưa có bản mobile). Đo được ở Phần 2:
   pystravel để giá NẰM TRONG nút nên khách không mất dấu giá.              */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: var(--s2); align-items: center;
  padding: var(--s2) var(--s3); background: #fff;
  border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(6,32,43,.10);
}
.bottombar .b-tel {
  flex: none; width: 52px; height: 52px; border-radius: var(--r);
  border: 1.5px solid var(--line-2); display: grid; place-items: center; color: var(--primary);
}
.bottombar .b-cta {
  flex: 1; min-height: 52px; border-radius: var(--r); background: var(--cta); color: #fff;
  display: grid; place-items: center; line-height: 1.2; text-align: center; font-weight: 800;
}
.bottombar .b-cta small { display: block; font-size: 12px; font-weight: 600; opacity: .95; }
@media (max-width: 999px) {
  .bottombar { display: flex; }
  body { padding-bottom: calc(var(--bottombar-h) + var(--s4)); }
  .booking { position: static; }
}

/* ---------- MỘT widget liên hệ duy nhất ----------
   Đo được ở Phần 2: website hiện tại có 6 widget chat trên màn hình đầu
   mobile và không hiện giá; widget chat che đúng hộp đặt tour.             */
/* Chỉ hiện trên mobile. Trên desktop hộp đặt tour đã có sẵn nút Zalo và nút
   gọi luôn nhìn thấy, nên thêm một nút nổi vừa trùng lặp vừa va chạm với hộp. */
.contact-fab { display: none; }
@media (max-width: 999px) {
  .contact-fab {
    position: fixed; right: var(--s4); bottom: calc(var(--bottombar-h) + var(--s3)); z-index: 65;
    width: 56px; height: 56px; border-radius: var(--r-pill);
    background: var(--primary); color: #fff; display: grid; place-items: center;
    box-shadow: var(--sh-2); border: 0; cursor: pointer;
  }
}
.logo { min-height: 44px; }

/* Dòng giấy phép trong hộp đặt tour — nhấn nhẹ vì đây là tín hiệu tin cậy
   duy nhất nằm cạnh giá. Đo được: khối giấy phép ở cuối hộp rơi ra ngoài
   màn hình đầu (973px > 900px), nên phải nhắc gọn ở trên. */
.booking .licence-row, .mb-quick .licence-row {
  background: var(--success-wash);
  border: 1px solid #BFE0CE;
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
}
.booking .licence-row svg, .mb-quick .licence-row svg { color: var(--success); }

/* ==========================================================================
   KHỐI CHỐT NHANH CHO MOBILE — chỉ hiện dưới 1000px.
   Đo được 12/08: trên khổ hẹp, hộp đặt tour nằm cách màn hình đầu 9,2 màn
   hình vì layout một cột đẩy aside xuống cuối trang. Form giữ chỗ chỉ có
   MỘT trường bắt buộc, nên cả đơn vị chuyển đổi (giá + giấy phép + chip
   ngày + SĐT + CTA) đủ gọn để đứng ngay sau H1.
   Trên WordPress đây là một partial dùng chung dữ liệu với hộp đặt tour —
   không phải nội dung chép ở hai nơi.
   ========================================================================== */
.mb-quick { display: none; }
@media (max-width: 999px) {
  .mb-quick {
    display: grid; gap: var(--s3);
    border: 1px solid var(--line); border-radius: var(--r);
    padding: var(--s4); margin-bottom: var(--s6); background: #fff;
    box-shadow: var(--sh-1);
  }
  .mb-quick .mbq-price { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
  .mb-quick .mbq-price b { font-size: 26px; color: var(--cta); font-variant-numeric: tabular-nums; }
  .mb-quick .mbq-price span { color: var(--ink-2); font-size: var(--fs-sm); }
  /* trang ca_hai: hai mức giá cạnh nhau thay vì một — xem lý do ở .price-band-dual
     trong page.css. Cỡ chữ nhỏ hơn .mbq-price thường vì phải chứa hai số. */
  .mb-quick .mbq-price-dual { align-items: center; gap: var(--s3); }
  .mb-quick .mbq-price-dual b { font-size: 20px; }
  .mb-quick .mbq-price-dual .mbq-price-div { width: 1px; align-self: stretch; background: var(--line); }
  .mb-quick .row { display: flex; align-items: flex-start; gap: var(--s2); font-size: 15px; }
  .mb-quick .row svg { flex: none; margin-top: 3px; color: var(--primary); }
  .mb-quick label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }
  .mb-quick input[type="tel"] {
    width: 100%; padding: 12px; font: inherit; color: var(--ink);
    border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  }
  .mb-quick .mbq-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .mb-quick .mbq-cta .btn { padding-left: var(--s3); padding-right: var(--s3); }

  /* Hai link chữ nằm giữa câu: "tra cứu" và "xem cả 14 ngày". Đo ở 375px:
     cao 21px và 19px, dưới sàn 44px. Không thể cho chúng thành khối vì sẽ ngắt
     câu. Padding cộng với lề âm cùng số nới vùng bấm lên 45px mà không xô một
     pixel nào của layout. */
  .mb-quick .licence-row a,
  .mb-quick .dates-head a { padding: 14px 6px; margin: -14px -6px; }
}

/* Khổ hẹp tới 389px: gồm 360px (Android phổ thông) và 375px (iPhone SE, 8, X).
   Đo được ở 360px: dòng giá xuống hai dòng, đẩy nút Zalo tới 837px trong màn
   hình cao 800px — rơi khỏi màn hình đầu 37px. Ở 375px chỉ dư 5px, quá mỏng.
   Siết khoảng cách và hạ cỡ chữ dòng giá để cả đơn vị chuyển đổi nằm trọn màn
   hình đầu. Không cắt nội dung nào — mọi lối đi giữ nguyên. */
@media (max-width: 389px) {
  /* H1 28px ở khổ 360px làm tiêu đề dài xuống 4 dòng thay vì 3 — tốn 37px, đủ
     để đẩy nút Zalo của trang đoàn riêng ra khỏi màn hình đầu. 25px giữ lại 3
     dòng mà vẫn là chữ lớn nhất trang. */
  h1 { font-size: 25px; }

  /* Khoảng trắng phía trên khối chốt nhanh. Đo ở 360px trên trang ca_hai: hàng
     dữ kiện đầu trang cao 182px vì 5 mục xếp thành 5 dòng, cộng breadcrumb 46px
     và lề quanh H1 — tổng cộng đẩy khối chốt nhanh xuống mốc 413px trước khi nó
     kịp bắt đầu. Siết ba chỗ này lấy lại 52px mà không bỏ một mục nào. Áp cho
     mọi trang vì trang nào ở khổ hẹp cũng lãng phí đúng chỗ đó. */
  .head-facts { gap: 6px 14px; font-size: 13px; }
  .tour-head { padding-bottom: 8px; }
  .tour-head h1 { margin: 4px 0 8px; }
  .crumbs { padding: 6px 0; }

  .mb-quick { gap: var(--s2); padding: var(--s3); }
  .mb-quick .mbq-price b { font-size: 23px; }
  .mb-quick .mbq-price span { font-size: 13px; }
  .mb-quick .mbq-price { gap: 6px; }
  /* trang ca_hai: hai số phải nhỏ hơn một số, không thì tràn dòng ở khổ 360px */
  .mb-quick .mbq-price-dual b { font-size: 18px; }
  .mb-quick .mbq-price-dual span { font-size: 11px; }
}

/* Khổ hẹp, RIÊNG trang ca_hai. Khoanh bằng [data-tour-type] để hai trang bán kia
   không bị siết theo — chúng đang đạt với biên 74px, không có lý do đụng vào.

   Vì sao riêng trang này chật: khối chốt nhanh của nó chở thêm hai thứ mà hai
   trang kia không có — dải giá kép và dải chọn luồng. Đo ở 360×800: khối cao
   609px so với 456px của trang ghép lẻ, đẩy nút Zalo xuống 903px trong màn hình
   cao 800px, tức rơi khỏi màn hình đầu 103px.

   Không cắt nội dung nào: cả hai mức giá, dải chọn, chip ngày, ô số khách đều
   giữ nguyên. Chỉ siết khoảng cách, sửa một chỗ gãy dòng, và ẩn hai nhãn khỏi
   mắt — hai control đó đã có aria-label nên trình đọc màn hình vẫn đọc đủ. */
@media (max-width: 430px) {
  /* Ngưỡng 430px chứ không phải 389px như luật chung. Đo được ở 390×844: luật
     chung ngừng áp mà màn hình chỉ cao thêm 32px, nên nút Zalo bật ra ngoài
     85px — vấp đúng bậc thang breakpoint. 430px phủ hết iPhone 14/15 (390, 393),
     Pixel (412) và iPhone Plus (428). Chỉ trang ca_hai cần, nên khoanh riêng. */
  [data-tour-type="ca_hai"] .head-facts { gap: 6px 14px; font-size: 13px; }
  [data-tour-type="ca_hai"] .tour-head { padding-bottom: 8px; }
  [data-tour-type="ca_hai"] .tour-head h1 { margin: 4px 0 8px; }
  [data-tour-type="ca_hai"] .crumbs { padding: 6px 0; }

  [data-tour-type="ca_hai"] .mb-quick { gap: 6px; padding: 10px; }

  /* Dải giá kép trước đây xếp theo flex và gãy xuống hai hàng ở 360px, tốn thêm
     36px. Lưới hai cột giữ hai giá cạnh nhau; bỏ vạch ngăn để mỗi cột đủ rộng
     cho dòng chú thích nằm gọn. Cột dựng theo chiều dọc để số và chú thích mỗi
     thứ một dòng, thay vì chảy inline rồi tự gãy chỗ khác nhau. */
  [data-tour-type="ca_hai"] .mb-quick .mbq-price-dual {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; align-items: center;
  }
  [data-tour-type="ca_hai"] .mb-quick .mbq-price-dual > div {
    min-width: 0; display: flex; flex-direction: column;
  }
  [data-tour-type="ca_hai"] .mb-quick .mbq-price-div { display: none; }

  [data-tour-type="ca_hai"] .mb-quick .seg { gap: 4px; }
  [data-tour-type="ca_hai"] .mb-quick .seg button {
    padding: 6px 8px; min-height: 44px; line-height: 1.2; font-size: 13px;
  }
  [data-tour-type="ca_hai"] .mb-quick .licence-row { padding: 6px 10px; font-size: 13px; }
  [data-tour-type="ca_hai"] .mb-quick .dates-head { margin-bottom: 4px; }
  [data-tour-type="ca_hai"] .mb-quick > p.small.muted { font-size: 12px; line-height: 1.35; }

  /* Ẩn khỏi mắt, KHÔNG ẩn khỏi trình đọc màn hình. Ô số điện thoại và ô số khách
     đều đã mang aria-label trùng nội dung nhãn, nên tên đọc được giữ nguyên.
     Trang ghép lẻ vốn đã dùng cách này từ đầu — đây là làm hai trang giống nhau,
     không phải bịa ra cách mới. */
  [data-tour-type="ca_hai"] .mb-quick > div > label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Menu mobile mở từ nút hamburger. Trước đây nút không có hành vi nào —
   tức là điều hướng trên mobile là một ngõ cụt. */
@media (max-width: 1080px) {
  .site-head { position: sticky; }
  .site-head .wrap { position: relative; }
  .site-head.nav-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: var(--s2) 0 var(--s3);
    box-shadow: var(--sh-2);
  }
  .site-head.nav-open .nav a {
    min-height: 48px; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .site-head.nav-open .nav a:last-child { border-bottom: 0; }
}

/* Vị trí nút chat nổi phụ thuộc trang có thanh dính đáy hay không. Trước đây
   luôn trừ --bottombar-h nên trên trang chủ nó lửng lơ giữa màn hình và che
   tiêu đề mục. Trên hub thì thanh lọc đã chiếm đáy — hiện thêm nút nổi vừa
   đụng nhau vừa cho khách hai hành động chính cạnh nhau, không rõ bấm cái nào. */
@media (max-width: 999px) {
  body:not(:has(.bottombar)) .contact-fab { bottom: var(--s4); }
  body:has(.filter-bar) .contact-fab { display: none; }
}