/* ==========================================================================
   Component cho các trang còn lại: trang chủ, hub, lịch khởi hành,
   landing B2B, chi tiết cẩm nang.
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: var(--s3) var(--s4);
  border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }
.nav a.on { background: var(--primary-wash); color: var(--primary-dark); }
.todo { background: #FFF3CD; color: #6B4E00; padding: 0 5px; border-radius: 3px; font-size: .93em; }

.page-head { padding: var(--s6) 0 var(--s4); }
.page-head h1 { max-width: 34ch; margin-bottom: var(--s3); }
.page-head .lede { font-size: 18px; color: var(--ink-2); max-width: 68ch; }

/* ---------- HERO trang chủ ---------- */
.hero {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(120deg, var(--secondary-variant), var(--primary) 55%, var(--primary-light));
  color: #fff; padding: clamp(28px,5vw,56px); margin: var(--s6) 0 var(--s8);
}
.hero h1 { color: #fff; max-width: 26ch; margin-bottom: var(--s3); }
.hero p { color: rgba(255,255,255,.92); max-width: 54ch; font-size: 17px; }
.hero .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.searchbar {
  display: flex; gap: var(--s2); background: #fff; border-radius: var(--r);
  padding: var(--s2); margin-top: var(--s6); max-width: 620px; flex-wrap: wrap;
}
.searchbar input, .searchbar select {
  flex: 1 1 150px; min-width: 0; border: 0; padding: var(--s3); font: inherit;
  color: var(--ink); background: var(--surface-soft); border-radius: var(--r-sm);
}

/* ---------- dải tin cậy ---------- */
.trustbar {
  display: grid; gap: var(--s4); padding: var(--s6); margin-bottom: var(--s8);
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.trustbar .ti { display: flex; gap: var(--s3); align-items: flex-start; }
.trustbar .ti svg { flex: none; color: var(--primary); margin-top: 2px; }
.trustbar .ti b { display: block; }
.trustbar .ti span { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- khối section trang chủ ---------- */
.home-sect { margin-bottom: var(--s10); }
.sect-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.sect-head p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-sm); }
.sect-head a { font-weight: 700; white-space: nowrap; }

/* ---------- card tour dạng lưới ---------- */
.tgrid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.tcard { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.tcard .im { aspect-ratio: 16/10; background: linear-gradient(135deg,#d5e6d8,#a6c9ae); position: relative; }
/* THÊM khi chuyển sang theme: ô .im trong bản mẫu là nền dốc màu giữ chỗ, theme
   in ảnh thật vào trong. Giữ nền dốc màu cho thẻ chưa có ảnh. */
.tcard .im img { width: 100%; height: 100%; object-fit: cover; }
.tcard .im .flag { position: absolute; left: var(--s2); top: var(--s2); }
.tcard .bd { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.tcard h3 { font-size: 16px; line-height: 1.4; }
.tcard h3 a { color: var(--ink); }
.tcard .rt { font-size: 13px; color: var(--ink-2); }
.tcard .rt .stars { color: var(--star); }
/* .fx và .deps dùng chung cho card lưới (.tcard) và card hàng ngang (.trow) */
.fx { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 13px; color: var(--ink-2); }
.deps { display: flex; flex-wrap: wrap; gap: 5px; }
.deps .d {
  font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--primary-line); color: var(--primary-dark); background: var(--primary-wash);
  white-space: nowrap;
}
.deps .d.low { border-color: #E3C07A; background: var(--warning-wash); color: var(--warning); }
.deps .more { font-size: 12px; color: var(--ink-muted); align-self: center; }
.tcard .pricerow { margin-top: auto; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.tcard .pricerow .now { font-size: 19px; font-weight: 800; color: var(--cta); }

/* ---------- hub: 2 cột lọc + kết quả ---------- */
.hub { display: grid; gap: var(--s6); }
@media (min-width: 1000px) { .hub { grid-template-columns: 268px minmax(0,1fr); gap: var(--s8); align-items: start; } }
.filters { display: grid; gap: var(--s4); }
@media (min-width: 1000px) { .filters { position: sticky; top: calc(var(--header-h) + var(--s4)); } }
.fgroup { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fgroup > h3 { font-size: 15px; padding: var(--s3) var(--s4); background: var(--surface); margin: 0; }
.fgroup .fbody { padding: var(--s3) var(--s4); display: grid; gap: var(--s1); }
.fgroup label {
  display: flex; align-items: center; gap: var(--s3); min-height: 44px;
  font-size: 15px; cursor: pointer;
}
.fgroup input { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--primary); }
.fgroup label .n { margin-left: auto; font-size: 13px; color: var(--ink-muted); }
.results-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.results-top .count { font-size: var(--fs-sm); color: var(--ink-2); }
.results-top select { padding: var(--s2) var(--s3); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font: inherit; background: #fff; }

/* card tour dạng hàng ngang (dùng ở hub) */
.trow { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; margin-bottom: var(--s4); }
@media (min-width: 620px) { .trow { grid-template-columns: 270px minmax(0,1fr); } }
.trow .im { background: linear-gradient(135deg,#d5e6d8,#a6c9ae); min-height: 176px; position: relative; }
.trow .im img { width: 100%; height: 100%; min-height: 176px; object-fit: cover; }
.trow .bd { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.trow h3 { font-size: 17px; }
.trow h3 a { color: var(--ink); }
.trow .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-top: auto; flex-wrap: wrap; }
.trow .pr .now { font-size: 21px; font-weight: 800; color: var(--cta); }

/* ---------- phân trang ---------- */
.pager { display: flex; gap: var(--s2); align-items: center; justify-content: center; margin: var(--s8) 0 0; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font-weight: 700; color: var(--ink-2);
}
.pager a:hover { background: var(--primary-wash); border-color: var(--primary-line); text-decoration: none; }
.pager [aria-current] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager .dots { border: 0; min-width: 24px; }

/* ---------- vùng nội dung dài ở hub ---------- */
.longform { margin-top: var(--s12); padding-top: var(--s8); border-top: 2px solid var(--line); }
.longform h2 { margin: var(--s8) 0 var(--s4); }
.longform h2:first-child { margin-top: 0; }
.longform h3 { margin: var(--s6) 0 var(--s3); font-size: 18px; }
.longform p, .longform li { max-width: 74ch; }
.longform ul, .longform ol { padding-left: var(--s6); }
.longform li { margin-bottom: var(--s2); }
.spots { display: grid; gap: var(--s4); margin: var(--s4) 0; }
@media (min-width: 720px) { .spots { grid-template-columns: 1fr 1fr; } }
.spot { display: flex; gap: var(--s3); }
.spot .num {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--primary-wash); color: var(--primary-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.spot b { display: block; }
.spot span { font-size: var(--fs-sm); color: var(--ink-2); }
.season-table td:first-child { font-weight: 700; white-space: nowrap; }

/* ---------- bảng đơn giản ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin: var(--s4) 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
table.tbl th, table.tbl td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
table.tbl thead th { background: var(--surface); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-soft); }

/* ---------- lịch khởi hành: nhóm theo tháng ---------- */
.month-block { margin-bottom: var(--s8); }
.month-block > h2 {
  position: sticky; top: var(--header-h); background: #fff; z-index: 20;
  padding: var(--s3) 0; border-bottom: 2px solid var(--primary); margin-bottom: var(--s4);
}
.filterbar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--s6); padding: var(--s4); background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r); }
.filterbar label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.filterbar select { padding: var(--s3); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font: inherit; background: #fff; min-width: 168px; }

/* ---------- landing B2B ---------- */
.b2b-hero { background: var(--secondary-variant); color: #fff; border-radius: var(--r-lg); padding: clamp(28px,5vw,56px); margin: var(--s6) 0 var(--s8); }
.b2b-hero h1 { color: #fff; max-width: 28ch; }
.b2b-hero p { color: rgba(255,255,255,.9); max-width: 58ch; font-size: 17px; }
.b2b-stats { display: grid; gap: var(--s4); margin-top: var(--s6); grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.b2b-stats div { background: rgba(255,255,255,.12); border-radius: var(--r); padding: var(--s4); }
.b2b-stats b { display: block; font-size: 27px; line-height: 1.1; }
.b2b-stats span { font-size: var(--fs-sm); color: rgba(255,255,255,.86); }
.flow { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.flow .fs { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.flow .fs b { display: block; margin-bottom: 5px; }
.flow .fs .k {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; margin-bottom: var(--s2);
}
.flow .fs span { font-size: var(--fs-sm); color: var(--ink-2); }
.cases { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill,minmax(258px,1fr)); }
.case { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.case .im { aspect-ratio: 16/10; background: linear-gradient(135deg,#cdd9e8,#9db4ce); }
.case .im img { width: 100%; height: 100%; object-fit: cover; }
.case .bd { padding: var(--s3) var(--s4) var(--s4); }
.case .bd b { display: block; font-size: 15px; }
.case .bd span { font-size: 13px; color: var(--ink-2); }

/* form báo giá đoàn — nhiều trường là hợp lý với B2B */
.quote { border: 1px solid var(--primary-line); background: var(--primary-wash); border-radius: var(--r); padding: var(--s6); }
.quote .qgrid { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .quote .qgrid { grid-template-columns: 1fr 1fr; } }
.quote label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }
.quote input, .quote select, .quote textarea {
  width: 100%; padding: var(--s3); font: inherit; color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: #fff;
}
.quote textarea { min-height: 96px; resize: vertical; }
.quote .full { grid-column: 1 / -1; }

/* ---------- bài cẩm nang ---------- */
.article { display: grid; gap: var(--s8); }
@media (min-width: 1000px) { .article { grid-template-columns: minmax(0,1fr) 272px; } }
.article .body > * { max-width: 74ch; }
.article .body h2 { margin: var(--s8) 0 var(--s3); }
.article .body h3 { margin: var(--s6) 0 var(--s2); font-size: 18px; }
.article .body ul, .article .body ol { padding-left: var(--s6); }
.article .body li { margin-bottom: var(--s2); }
.byline { display: flex; gap: var(--s3); align-items: center; padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--s6); flex-wrap: wrap; }
.byline .av { width: 44px; height: 44px; border-radius: var(--r-pill); background: linear-gradient(135deg,var(--primary-light),var(--secondary-light)); display: grid; place-items: center; color: #fff; font-weight: 800; }
.byline b { display: block; }
.byline span { font-size: var(--fs-sm); color: var(--ink-2); }
.toc { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); background: var(--surface-soft); }
@media (min-width: 1000px) { .toc-wrap { position: sticky; top: calc(var(--header-h) + var(--s4)); display: grid; gap: var(--s4); } }
.toc h4 { margin-bottom: var(--s3); }
.toc ol { margin: 0; padding-left: var(--s6); font-size: 15px; }
.toc li { margin-bottom: 6px; }
.aside-tours { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); }
.aside-tours h4 { margin-bottom: var(--s3); }
.aside-tours a { display: block; padding: var(--s2) 0; border-bottom: 1px dashed var(--line); font-size: 15px; font-weight: 600; }
.aside-tours a:last-of-type { border-bottom: 0; }
.aside-tours .p { color: var(--cta); font-weight: 800; font-size: 14px; }

/* ---------- khối Zalo OA (thay khối đăng ký email) ---------- */
.oa {
  display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--secondary), var(--primary));
  color: #fff; border-radius: var(--r-lg); padding: clamp(24px,4vw,40px); margin: var(--s10) 0;
}
.oa h2 { color: #fff; max-width: 22ch; }
.oa p { color: rgba(255,255,255,.9); max-width: 46ch; margin: var(--s2) 0 0; }
.oa .btn { background: #fff; color: var(--primary-dark); border-color: #fff; }
.oa .btn:hover { background: rgba(255,255,255,.9); }

/* ==========================================================================
   Khối .variant và .demo-label đã bỏ khi chuyển sang theme: CSS gốc ghi rõ
   "khối minh hoạ, không dùng trên trang thật" — chúng chỉ phục vụ trang đặc tả
   loai-tour.html của bản mẫu. Giữ lại là để CSS chết trong theme.
   ========================================================================== */

/* bảng giá theo quy mô đoàn — thay cho bảng lịch khởi hành ở loại 3 */
table.tiers { width: 100%; border-collapse: collapse; font-size: 15px; }
table.tiers th, table.tiers td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
table.tiers thead th { background: var(--surface); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
table.tiers tbody tr:last-child td { border-bottom: 0; }
table.tiers .q { font-weight: 700; white-space: nowrap; }
table.tiers .p { font-weight: 800; color: var(--cta); white-space: nowrap; }
table.tiers tr.best { background: var(--success-wash); }

/* toggle chọn hình thức đi (loại 4) */
.seg { display: flex; gap: 0; border: 1.5px solid var(--line-2); border-radius: var(--r); overflow: hidden; margin-bottom: var(--s4); }
.seg button {
  flex: 1; appearance: none; border: 0; background: #fff; font: inherit; font-weight: 700;
  padding: var(--s3) var(--s2); cursor: pointer; color: var(--ink-2); min-height: 48px; font-size: 14.5px;
}
.seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.seg button + button { border-left: 1.5px solid var(--line-2); }
/* Luật .pane[hidden] của bản mẫu đã bỏ: theme ẩn hiện hai luồng bằng
   [data-mode][hidden] khai trong page.css, không dùng lớp .pane nữa. */

/* dòng "ngày khác" — cửa ra không bao giờ đóng, để không mất lead */
table.dep tr.open-row td { background: var(--primary-wash); border-top: 2px dashed var(--primary-line); }
table.dep tr.open-row:hover td { background: var(--primary-wash); }
.chip-date.other { border-style: dashed; border-color: var(--primary); color: var(--primary-dark); }
.chip-date.other small { color: var(--primary); }

/* Khối .flowmap đã bỏ khi chuyển sang theme: nó vẽ sơ đồ luồng dữ liệu ERP ↔
   website cho trang đặc tả loai-tour.html, không phải một khối của site bán. */

/* dòng "ngày khác" cũng dùng trong bảng .tbl ở trang lịch khởi hành */
table.tbl tr.open-row td { background: var(--primary-wash); border-top: 2px dashed var(--primary-line); }
table.tbl tr.open-row:hover td { background: var(--primary-wash); }

/* Trạng thái 0 kết quả ở hub — không có khối này thì khách lọc xong
   thấy trang trống rồi thoát. Bản mẫu hiện sẵn để lập trình viên thấy state. */
.empty-state {
  border: 2px dashed var(--primary-line);
  background: var(--primary-wash);
  border-radius: var(--r);
  padding: var(--s6);
  margin-bottom: var(--s4);
}
.empty-state h3 { color: var(--secondary-dark); margin-bottom: var(--s2); }
.empty-state p { margin: 0; max-width: 62ch; }

/* Dòng "ngoài bảng" ở bảng bậc giá đoàn riêng */
table.tiers tr.open-row td { background: var(--primary-wash); border-top: 2px dashed var(--primary-line); }

/* Đường liên hệ cuối bài cẩm nang. Bài viết là nơi khách tin nhất — trước đây
   trang này có 0 đường liên hệ, người đọc hết bài phải thoát ra Google tìm lại. */
.art-ask {
  /* SỬA LỖI 23/08: hai token --s7 và --s5 KHÔNG có trong base.css (thang chỉ có
     s1 s2 s3 s4 s6 s8 s10 s12 s14 s16 s18 s20 s24). Một var() không tồn tại làm
     cả khai báo hỏng, trình duyệt bỏ luôn thuộc tính đó — nên khối này đang chạy
     với padding 0, chữ chạm viền. Đổi sang token có thật. */
  margin-top: var(--s8); padding: var(--s6);
  border: 1px solid var(--line); border-left: 3px solid var(--primary);
  border-radius: var(--r); background: var(--primary-wash);
  display: grid; gap: var(--s4);
}
.art-ask h3 { margin: 0 0 var(--s2); font-size: var(--fs-lg); }
.art-ask p { margin: 0; }
.art-ask-cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
@media (min-width: 720px) {
  .art-ask { grid-template-columns: 1fr auto; align-items: center; }
  .art-ask-cta { flex-direction: column; }
}

/* CTA trong trạng thái 0 kết quả */
.empty-state .es-cta { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin: var(--s4) 0 var(--s3); }

/* ==========================================================================
   BẢN MOBILE CHO HUB VÀ TRANG CHỦ
   Dựng theo số đo ở khổ 375×812, không theo cảm giác:
     · hub    — bộ lọc cao 1.534px, tour đầu ở 2.114px = 2,6 màn hình
     · trang chủ — hero 669px + thanh tin cậy 354px, tour đầu ở 1,6 màn, tổng 12 màn
   Nguyên tắc phân biệt: trang chủ là bề mặt ĐIỀU HƯỚNG nên cho trượt ngang để
   thấy được độ sâu của kho tour; hub là bề mặt SO SÁNH nên giữ danh sách dọc.
   ========================================================================== */

/* ---------- Dải chip lọc nhanh (hub) ---------- */
.chipbar { display: none; }
@media (max-width: 999px) {
  .chipbar {
    display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x proximity;
    /* Âm lề để dải chip chạm mép màn hình — nhìn ra là còn cuộn được nữa */
    margin: 0 calc(var(--gut) * -1) var(--s4); padding: 0 var(--gut) var(--s2);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .chipbar::-webkit-scrollbar { display: none; }
  .fchip {
    flex: none; scroll-snap-align: start; min-height: 44px;
    padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-pill);
    background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-sm);
    font-weight: 600; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .fchip .n { color: var(--ink-3); font-weight: 400; }
  .fchip.on {
    background: var(--primary); border-color: var(--primary); color: #fff;
  }
  .fchip.on .n { color: rgba(255,255,255,.75); }
}

/* ---------- Bộ lọc thành tấm trượt từ đáy (hub) ---------- */
.sheet-head, .sheet-foot, .filter-bar { display: none; }
.sheet-backdrop { display: none; }
@media (max-width: 999px) {
  .hub { display: block; }              /* bỏ layout hai cột */

  .filters {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0;
    max-height: 85vh; overflow-y: auto;
    background: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(6,32,43,.22);
    transform: translateY(100%); transition: transform .22s ease;
    padding: 0 var(--gut) calc(72px + env(safe-area-inset-bottom, 0px));
  }
  body.sheet-on .filters { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .filters { transition: none; } }

  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2; background: #fff;
    padding: var(--s4) 0; border-bottom: 1px solid var(--line);
    margin-bottom: var(--s3);
  }
  .sheet-head b { font-size: var(--fs-lg); }
  .sheet-x {
    min-width: 44px; min-height: 44px; border: 0; background: transparent;
    font-size: 20px; color: var(--ink-2); cursor: pointer; border-radius: var(--r-sm);
  }
  .sheet-foot {
    display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
    position: sticky; bottom: 0; background: #fff;
    padding: var(--s3) 0 var(--s4); border-top: 1px solid var(--line);
    margin-top: var(--s4);
  }
  .sheet-backdrop { display: none; position: fixed; inset: 0; z-index: 79; background: rgba(6,32,43,.4); }
  body.sheet-on .sheet-backdrop { display: block; }

  /* Vùng bấm của từng dòng lọc phải đạt 44px — trên desktop chúng chỉ ~26px,
     đủ cho chuột nhưng không đủ cho ngón tay. */
  .filters .fbody label { min-height: 44px; align-items: center; }
  .filters .fgroup h3 { font-size: var(--fs-base); }

  /* Thanh dính đáy: nút lọc + sắp xếp */
  .filter-bar {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3);
    align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--line);
    padding: var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(6,32,43,.08);
  }
  body.sheet-on .filter-bar { display: none; }
  .filter-bar .fcount {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px;
    margin-left: 6px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.28); font-size: 13px; font-weight: 700;
  }
  .filter-bar .sort-mb { font-size: var(--fs-sm); color: var(--ink-2); text-align: right; }
  .filter-bar select { min-height: 44px; }
  /* Chừa chỗ cho thanh dính đáy */
  body:has(.filter-bar) { padding-bottom: 76px; }
}

/* ---------- Trang chủ ---------- */
@media (max-width: 999px) {
  /* Hero: cắt bớt phần nói về mình. Đo được 669px — hơn 4/5 màn hình đầu chưa
     có sản phẩm nào. Giữ H1, một dòng dẫn, ô tìm kiếm; hai nút phụ xuống dưới. */
  /* SỬA LỖI 23/08: --s5 không có trong base.css nên cả khai báo padding bị bỏ,
     hero mobile đang chạy padding 0 và chữ trắng chạm mép dải gradient. Viết lại
     bằng token có thật. Giữ padding NGANG bằng 0 có chủ ý: thêm 16px mỗi bên làm
     H1 25px xuống thêm một dòng ở khổ 360px, tốn nhiều hơn phần thẩm mỹ thu được. */
  .hero { padding: var(--s4) 0; }
  .hero h1 { font-size: 25px; }
  .hero p { font-size: var(--fs-base); }
  /* .searchbar là flex-wrap, KHÔNG phải grid — grid-template-columns ở đây vô
     tác dụng. Con có flex-basis 150px nên ô nhập và ô chọn tháng nằm cạnh nhau
     ở 160px, làm nhãn "Tháng nào cũng được" bị cắt còn "Tháng nào cũng đ".
     SỬA 23/08: xếp một cột thì ô tìm kiếm cao 229px và nằm đúng giữa khối lối
     vào và tour đầu tiên — đo được ở 375px. Bỏ ô chọn tháng trên mobile, còn
     hai thành phần nằm một hàng: ô nhập điểm đến và nút Tìm tour. Không mất
     đường nào — lọc theo tháng nằm ở dải chip và tấm trượt của trang danh sách,
     nơi mỗi tháng còn ghi kèm số tour, thứ ô select này không nói được. */
  .searchbar { flex-wrap: nowrap; gap: var(--s2); }
  .searchbar select[name="thang"] { display: none; }
  .searchbar input { flex: 1 1 auto; min-width: 0; min-height: 48px; }
  .searchbar .btn { flex: none; min-height: 48px; padding-left: var(--s4); padding-right: var(--s4); }
  /* Hai nút phụ "Xem lịch khởi hành" và "Báo giá tour đoàn" trỏ đúng hai đích mà
     khối .mb-entry ngay phía trên đã có, dưới dạng dòng lớn hơn và có mô tả. Lặp
     lại cùng một đích cách nhau 200px chỉ tốn 48px chiều dọc và bắt khách đọc hai
     lần cùng một thứ. Trên desktop KHÔNG có .mb-entry nên hai nút giữ nguyên. */
  .hero .hero-cta { display: none; }

  /* Thanh tin cậy: xếp dọc mất 354px. Trượt ngang một dòng còn ~96px.
     Bốn lời cam kết chưa ai hỏi thì không đáng một màn hình. */
  .trustbar {
    display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x proximity;
    /* SỬA LỖI 23/08: lề dưới dùng --s5 (không tồn tại) làm hỏng cả khai báo
       margin, nên hai lề âm hai bên cũng mất theo — dải tin cậy đang KHÔNG chạm
       mép màn hình, tức khách không nhìn ra là còn cuộn ngang được. */
    margin: 0 calc(var(--gut) * -1) var(--s6); padding: 0 var(--gut);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .trustbar::-webkit-scrollbar { display: none; }
  .trustbar .ti {
    flex: none; width: 74vw; max-width: 280px; scroll-snap-align: start;
    border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4);
    background: #fff;
  }

  /* Danh sách tour theo mục: trượt ngang. Bốn thẻ xếp dọc là 1.520px mỗi mục,
     bốn mục thành 12 màn hình. Trượt ngang còn ~400px mỗi mục — và cái nhìn
     thấy một phần thẻ thứ ba nói cho khách biết kho tour còn sâu, điều mà
     danh sách dọc bốn thẻ không nói được. */
  .home-sect .tgrid {
    display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) var(--s3);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .home-sect .tgrid::-webkit-scrollbar { display: none; }
  .home-sect .tgrid .tcard {
    flex: none; width: 78vw; max-width: 320px; scroll-snap-align: start;
  }
  .sect-head { flex-wrap: wrap; gap: var(--s2); }
  .sect-head h2 { font-size: var(--fs-lg); }
  .sect-head > a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Link "Xem tất cả N tour" xuống DƯỚI dải tour. Trên desktop nó nằm cùng hàng
     với tiêu đề mục nên không tốn gì; gập một cột là nó thành một dòng 44px
     chen giữa tiêu đề và tour đầu tiên — đo được ở 375px: đẩy thẻ tour đầu
     xuống thêm 56px, mỗi mục một lần, bốn mục là 224px. Và sau khi vuốt hết
     dải ngang thì đây mới đúng là lúc khách muốn xem cả danh sách.
     `display: contents` để hai con của .sect-head thành con trực tiếp của
     .home-sect, nhờ đó xếp order được cùng dải .tgrid.
     Giới hạn trong trang chủ: landing B2B cũng dùng .home-sect nhưng ruột là
     .cases, .flow, .quote — không có `order` nên chúng sẽ nhảy lên trước tiêu
     đề mục nếu luật này áp cả trang đó. */
  main[data-page="home"] .home-sect { display: flex; flex-direction: column; }
  main[data-page="home"] .home-sect > .sect-head { display: contents; }
  main[data-page="home"] .home-sect > .sect-head > div { order: 1; margin-bottom: var(--s3); }
  main[data-page="home"] .home-sect > .tgrid { order: 2; }
  main[data-page="home"] .home-sect > .sect-head > a {
    order: 3; align-self: flex-start; margin-top: var(--s2);
    padding: 0 var(--s4); border: 1.5px solid var(--line-2); border-radius: var(--r);
  }
}

/* ==========================================================================
   THỨ TỰ KHỐI TRÊN MOBILE — TRANG CHỦ VÀ HUB
   Thêm 23/08/2026.

   Phần mobile ở trên mới chỉ NÉN các khối lại (hero thấp hơn, thanh tin cậy và
   danh sách tour trượt ngang, bộ lọc vào tấm trượt). Thứ tự thì vẫn y hệt
   desktop. Hai trang bán đã giải bằng khối .mb-quick đặt ngay sau H1; trang chủ
   và hub chưa có thứ tương đương, nên màn hình đầu của chúng vẫn là phần nói về
   mình chứ chưa trả lời câu khách hỏi.

   Cách làm: cho .wrap của hai trang thành cột flex rồi đảo bằng `order`.
   DOM KHÔNG đổi — DOM là thứ Google và LLM đọc (H1 → đoạn dẫn → nội dung).
   Chỉ thứ tự NHÌN THẤY trên máy hẹp là đổi.

   Đo lại 23/08 bằng Chrome headless, đặt khổ bằng Emulation.setDeviceMetrics
   (không dùng iframe) và chờ document.fonts.ready. Số dưới đây là khổ 375×812,
   đã ẩn khối ghi chú của bản mẫu vì khối đó không lên site thật:

     trang chủ  H1 96 · khối lối vào 294 · giấy phép 307 · Zalo+Gọi 656
                ô tìm kiếm 745 · thẻ tour đầu 953 · tổng 4.479px
     hub        H1 126 · khối tóm tắt 203 · giấy phép 269 · nút Hỏi Vạn An 344
                dải chip 425 · tour đầu 554 · tổng 11.814px

   Bốn khổ 360×800, 375×812, 390×844, 412×915 đều: tràn ngang 0px, không vùng
   bấm nào dưới 44px, và mọi mốc kể trên nằm trong màn hình đầu — trừ thẻ tour
   đầu của trang chủ, xem ghi chú ở luật .searchbar phía trên.
   ========================================================================== */

/* Đoạn dẫn của hub tách khỏi .page-head để đẩy xuống được. Nó từng ăn luật
   `.page-head .lede`, nên khai lại đúng ba thuộc tính đó, không thêm gì.
   Lề dưới 24px thay cho 12px lề đoạn văn cộng 16px padding của .page-head cũ —
   giữ nguyên khoảng cách desktop, phần này không phải chỗ cần đổi. */
.hub-lede { font-size: 18px; color: var(--ink-2); max-width: 68ch; margin: 0 0 var(--s6); }
/* .page-head của hub giờ chỉ còn H1. Bỏ padding dưới để khoảng cách H1 → đoạn
   dẫn vẫn là 12px như khi đoạn dẫn còn nằm bên trong. */
main[data-page="hub"] > .wrap > .page-head { padding-bottom: 0; }

@media (max-width: 999px) {

  /* ---------- Trang chủ ---------- */
  main[data-page="home"] > .wrap { display: flex; flex-direction: column; }
  main[data-page="home"] > .wrap > * { order: 5; }
  main[data-page="home"] > .wrap > .hero        { order: 1; }
  /* Mục tour theo dịp lên TRƯỚC thanh tin cậy. Bốn lời cam kết đứng trước khi
     khách thấy tour nào là bốn câu trả lời cho câu chưa ai hỏi; giấy phép —
     bằng chứng duy nhất kẻ lừa đảo không giả được — đã nằm trong .mb-entry ở
     màn hình đầu rồi. Đổi chỗ hai khối này kéo tour đầu tiên lên khoảng một
     phần sáu màn hình (thanh tin cậy đo được 105px + lề 24px). */
  main[data-page="home"] > .wrap > .sect-first  { order: 2; }
  main[data-page="home"] > .wrap > .trustbar    { order: 3; }
  /* Cột flex không gộp lề như block: lề dưới 40px của mục cuối cộng thẳng với
     lề trên 40px của khối Zalo OA thành 80px. Cắt một trong hai. */
  main[data-page="home"] > .wrap > .oa { margin-top: 0; }

  /* Khối lối vào, đặt ngay sau H1 và đoạn dẫn, trong lòng hero.
     Dùng lại đúng vỏ .mb-quick của hai trang bán: cùng nền trắng, cùng viền,
     cùng luật ẩn trên desktop, và cùng cách nới vùng bấm cho link "tra cứu"
     nằm giữa câu (page.css). Viết vỏ riêng là chép luật ra hai chỗ rồi lệch. */
  .mb-entry .mbe-row {
    display: flex; align-items: center; gap: var(--s3);
    min-height: 56px; padding: var(--s2) var(--s3);
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    color: var(--ink); background: #fff;
  }
  .mb-entry .mbe-row:hover { background: var(--primary-wash); border-color: var(--primary-line); text-decoration: none; }
  .mb-entry .mbe-row .t { flex: 1; display: block; }
  .mb-entry .mbe-row b { display: block; font-size: 15px; line-height: 1.35; }
  .mb-entry .mbe-row small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
  .mb-entry .mbe-row svg { flex: none; color: var(--primary); }
  /* Câu này là cửa ra: khách không thấy tuyến mình cần thì đây là chỗ họ còn
     hỏi được, thay vì hiểu là "không có" rồi thoát. */
  .mb-entry .mbe-ask { margin: 0; color: var(--ink-2); }

  /* ---------- Hub ---------- */
  main[data-page="hub"] > .wrap { display: flex; flex-direction: column; }
  main[data-page="hub"] > .wrap > * { order: 5; }
  main[data-page="hub"] > .wrap > .crumbs     { order: 1; }
  main[data-page="hub"] > .wrap > .page-head  { order: 2; }
  main[data-page="hub"] > .wrap > .mb-facts   { order: 3; }
  main[data-page="hub"] > .wrap > .chipbar    { order: 4; }
  main[data-page="hub"] > .wrap > .hub        { order: 5; }
  /* Đoạn dẫn ba dòng xuống dưới danh sách. Nó là câu trả lời cho khách đang cân
     nhắc giữa các tuyến, không phải cho khách vừa mở trang — mà ở khổ 375px nó
     ăn khoảng 95px ngay trên tour đầu tiên. Xuống đây nó thành lời dẫn vào vùng
     nội dung dài, và trả lại chỗ đó cho khối .mb-facts. */
  main[data-page="hub"] > .wrap > .hub-lede   { order: 6; margin: var(--s6) 0 0; }
  main[data-page="hub"] > .wrap > .longform   { order: 7; }

  /* Khối tóm tắt hub. Ba câu khác với trang bán: danh sách này gồm gì · giá từ
     bao nhiêu · có tin được không. Cố tình KHÔNG có ô số điện thoại và không có
     nút CTA lớn — khách ở hub đang chọn, chưa chọn xong; ép để lại số ở đây thu
     về lead không biết hỏi về tour nào. */
  .mb-facts .mbf-line { margin: 0; font-size: 15px; line-height: 1.5; }
  .mb-facts .mbf-line b { font-variant-numeric: tabular-nums; }
  .mb-facts .mbf-ask { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
  .mb-facts .mbf-ask span { flex: 1 1 150px; color: var(--ink-2); }
  /* Nút Zalo là đường liên hệ DUY NHẤT thấy được ở đầu hub trên mobile: nút chat
     nổi đã bị ẩn ở trang này vì thanh lọc chiếm đáy (luật trong page.css). */
  .mb-facts .mbf-ask .btn { flex: none; }

  /* Cửa ra ở cuối dải chip lọc nhanh. Cùng hình dáng chip để đọc liền mạch,
     nhưng viền nét đứt để không bị nhầm là một điều kiện lọc. */
  .chip-ask {
    flex: none; scroll-snap-align: start; min-height: 44px;
    padding: 0 var(--s4); border: 1px dashed var(--primary); border-radius: var(--r-pill);
    background: #fff; color: var(--primary-dark); font-size: var(--fs-sm); font-weight: 700;
    white-space: nowrap; display: inline-flex; align-items: center;
  }
  .chip-ask:hover { background: var(--primary-wash); text-decoration: none; }

  /* Ô "Sắp xếp" ở đầu danh sách trùng chức năng với ô trong thanh dính đáy.
     Hai ô giống hệt nhau, một cái cuộn mất, một cái luôn hiện — khách chỉnh ô
     trên rồi thấy ô dưới ghi giá trị khác thì không tin cả hai. Giữ ô dính đáy
     vì nó luôn trong tầm ngón tay; dòng đếm kết quả thì giữ nguyên, đó là thứ
     nói cho khách biết danh sách đang bị lọc chứ không phải "hết tour". */
  .results-top label[for="sort"], .results-top #sort { display: none; }
}

/* Thông báo sau khi gửi biểu mẫu lead (đường admin-post, không cần JS).
   Không tái dùng .guarantee hay .empty-state — hai lớp đó mang nghĩa khác
   (cam kết chính sách, và 0 kết quả lọc). Trộn nghĩa màu là lỗi luật thị giác
   ghi trong docs/thiet-ke-giao-dien.md mục 2. */
.lead-thong-bao {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--s3);
}
.lead-thong-bao--ok {
  background: var(--success-wash);
  border: 1px solid var(--success);
  color: var(--success);
}
.lead-thong-bao--loi {
  background: var(--error-wash);
  border: 1px solid var(--error);
  color: var(--error);
}