/* CSS kết quả VMB dùng chung (box/vmb_assets.php, prefix .vmb-/.sf-).
   Tách từ 1 khối style inline (luật CLAUDE.md: không viết CSS trong PHP).
   KHÔNG bọc theo class trang: trang này phục vụ nhiều slug khác nhau; phạm vi
   dựa vào prefix selector sẵn có của chính nó. */
/* ── Design tokens (fallback nếu tokens.css chưa nạp) ───────────────────── */
.vmb-search{
  --vmb-pink:#ed007f; --vmb-pink-dk:#b51d76; --vmb-pink-soft:#fdeef7;
  --vmb-blue:#1a7adb; --vmb-ink:#1f2937; --vmb-muted:#6b7280;
  --vmb-border:#e6e8ec; --vmb-bg:#fff; --vmb-radius:16px;
  font-family:inherit; color:var(--vmb-ink); position:relative; z-index:5;
}
*,.vmb-search *{ box-sizing:border-box; }

/* ── Card khung ─────────────────────────────────────────────────────────── */
.vmb-card{
  background:var(--vmb-bg); border-radius:var(--vmb-radius);
  box-shadow:0 12px 40px rgba(17,24,39,.14); padding:16px 14px;
  display:flex; flex-direction:column; gap:12px; max-width:920px; margin:0 auto;
}

/* ── Trip type pills ────────────────────────────────────────────────────── */
.vmb-trip{ display:inline-flex; gap:6px; background:#f1f3f6; padding:4px; border-radius:999px; align-self:flex-start; }
.vmb-trip-pill{
  border:0; background:transparent; padding:8px 18px; border-radius:999px;
  font-size:14px; font-weight:700; color:var(--vmb-muted); cursor:pointer; transition:.15s;
}
.vmb-trip-pill.is-active{ background:var(--vmb-pink); color:#fff; box-shadow:0 2px 8px rgba(214,36,140,.3); }

/* ── Route (Từ ⇄ Đến) 1 hàng ────────────────────────────────────────────── */
.vmb-route{ display:flex; align-items:stretch; gap:0; border:1px solid var(--vmb-border); border-radius:12px; position:relative; }
.vmb-od{
  flex:1 1 0; min-width:0; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:12px 14px; display:flex; flex-direction:column; gap:2px;
}
/* Cột "Đến" canh phải (đối xứng qua nút swap) khi ở trạng thái nghỉ;
   lúc đang gõ trả về canh trái cho dễ nhập. */
.vmb-od-to{ align-items:stretch; text-align:right; }
.vmb-od-to .vmb-od-display{ align-items:flex-end; }
.vmb-od-to.is-editing{ text-align:left; }
.vmb-od-lbl{ font-size:12px; color:var(--vmb-muted); }
.vmb-od-code{ font-size:24px; font-weight:800; line-height:1.05; color:var(--vmb-ink); }
.vmb-od-city{ font-size:12.5px; color:var(--vmb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.vmb-od:focus-visible{ outline:2px solid var(--vmb-pink); border-radius:10px; }
/* Trạng thái NGHỈ: mã sân bay lớn + tên thành phố (kiểu Mytour).
   Ô nhập nằm phủ trong suốt lên trên để chạm vào là focus được ngay; khi focus,
   JS gắn .is-editing -> đổi vai trò: hiện ô nhập, ẩn khối mã/thành phố. */
.vmb-od{ position:relative; }
.vmb-od-display{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.vmb-od.is-editing .vmb-od-display{ display:none; }
.vmb-od:not(.is-editing) .vmb-od-input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer;
}
/* Ô nhập inline (gõ trực tiếp tìm sân bay) - thay 2 nút mở bottom-sheet trước đây */
.vmb-od-input{ border:0; background:transparent; font:inherit; font-size:16px; font-weight:700; color:var(--vmb-ink); width:100%; min-width:0; padding:0; margin-top:1px; }
.vmb-od-input:focus{ outline:none; }
.vmb-od-input::placeholder{ color:var(--vmb-muted); font-weight:600; font-size:14px; }
/* Chừa chỗ cho nút swap ở giữa để chữ đang gõ không chui xuống dưới nút */
#vmbFromField{ padding-right:28px; }
#vmbToField{ padding-left:28px; }
/* Dropdown gợi ý sân bay - hiện ngay dưới hàng Từ/Đến (inline, không còn popup toàn màn hình) */
.vmb-od-dd{
  position:absolute; left:-1px; right:-1px; top:calc(100% + 6px); z-index:40;
  background:#fff; border:1px solid var(--vmb-border); border-radius:12px;
  box-shadow:0 12px 32px rgba(17,24,39,.18); max-height:300px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.vmb-od-dd[hidden]{ display:none; }
.vmb-od-dd .vmb-ap-list{ padding:6px 8px; }
.vmb-swap{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--vmb-border);
  background:#fff; color:var(--vmb-pink); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.1); transition:transform .25s; z-index:2;
}
.vmb-swap:hover{ box-shadow:0 4px 14px rgba(0,0,0,.16); }
.vmb-swap.is-spin{ transform:translate(-50%,-50%) rotate(180deg); }

/* ── Field (ngày, pax) ──────────────────────────────────────────────────── */
.vmb-dates{ display:grid; grid-template-columns:1fr; gap:12px; }
.vmb-dates.is-roundtrip{ grid-template-columns:1fr 1fr; }
.vmb-field{
  display:flex; flex-direction:column; gap:3px; border:1px solid var(--vmb-border);
  border-radius:12px; padding:10px 14px; cursor:pointer; background:#fff; text-align:left; width:100%;
}
.vmb-field-lbl{ font-size:12px; color:var(--vmb-muted); }
.vmb-field-val{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--vmb-ink); }
.vmb-field-val .fa{ color:var(--vmb-pink); font-size:15px; }
.vmb-date-disp{ border:0; background:transparent; font:inherit; font-weight:700; color:var(--vmb-ink); width:100%; padding:0; cursor:pointer; }
.vmb-date-disp:focus{ outline:none; }
/* ── Month-picker tùy biến trong lịch flatpickr (thay <select> native, neo đúng mọi thiết bị) ── */
.flatpickr-current-month .cur-month{ cursor:pointer; border-radius:6px; padding:2px 6px; transition:background .12s; }
.flatpickr-current-month .cur-month:hover{ background:rgba(214,36,140,.10); }
.flatpickr-current-month .cur-month::after{ content:'\25BE'; font-size:10px; margin-left:5px; color:var(--vmb-pink); }
/* ── MOBILE-only: lịch flatpickr dạng BOTTOM-SHEET (đẩy từ dưới) - đồng bộ pattern bottom-sheet khác ── */
@media (max-width:767px){
  .vmb-fp-backdrop{ position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:100070; }
  .vmb-fp-backdrop[hidden]{ display:none; }
  /* Khi sheet (lịch / số khách / hạng ghế) đang mở: ẩn nút nổi Zalo + header mobile (.mainHead tạo
     stacking-context riêng z-index:100 nên đè lên đỉnh sheet) để bộ chọn hiện hẳn LÊN TRÊN, không bị che. */
  body.vmb-sheet-open #vnt-zalo-fab, body.vmb-sheet-open .box-search-group, body.vmb-sheet-open .mainHead{ display:none !important; }
  /* ── Lịch CUSTOM cuộn nhiều tháng ── */
  .vmb-cal-bd{ position:fixed; inset:0; background:rgba(17,24,39,.5); z-index:100080; }
  .vmb-cal-bd[hidden]{ display:none; }
  .vmb-cal{ position:fixed; left:0; right:0; bottom:0; bottom:var(--vmb-vv-bottom,0px); z-index:100085; background:#fff; border-radius:20px 20px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.2); display:flex; flex-direction:column; height:86vh; height:86dvh; max-height:86dvh; }
  .vmb-cal[hidden]{ display:none; }
  .vmb-cal-grip{ width:40px; height:4px; border-radius:2px; background:#e0e0e0; margin:10px auto 4px; flex:0 0 auto; }
  .vmb-cal-hd{ text-align:center; padding:2px 16px 8px; flex:0 0 auto; }
  .vmb-cal-hd b{ font-size:16px; color:#1a1a1a; display:block; }
  .vmb-cal-sub{ font-size:12.5px; color:#ed007f; font-weight:600; }
  .vmb-cal-wk{ display:grid; grid-template-columns:repeat(7,1fr); padding:6px 12px; border-bottom:1px solid #f0f0f0; flex:0 0 auto; }
  .vmb-cal-wk span{ text-align:center; font-size:12px; color:#888; font-weight:600; }
  .vmb-cal-wk .sun{ color:#e53935; }
  .vmb-cal-body{ flex:1 1 0; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 12px 4px; }
  .vmb-cal-mo-lbl{ font-size:15px; font-weight:800; color:#1a1a1a; padding:12px 4px 6px; }
  .vmb-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
  .vmb-cal-d{ position:relative; z-index:0; height:46px; border:0; background:transparent; font:inherit; font-size:14.5px; color:#1f2937; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
  .vmb-cal-d.empty{ visibility:hidden; }
  .vmb-cal-d.past{ color:#d2d2d2; cursor:default; }
  .vmb-cal-d.today{ font-weight:800; }
  /* dải nối range (light pink) - full cell + connector từ đầu/cuối */
  .vmb-cal-d.inrange{ background:#fdeef7; }
  .vmb-cal-d.start::before, .vmb-cal-d.end::before{ content:''; position:absolute; top:50%; transform:translateY(-50%); width:50%; height:40px; background:#fdeef7; z-index:-2; }
  .vmb-cal-d.start::before{ right:0; }
  .vmb-cal-d.end::before{ left:0; }
  .vmb-cal-d.start.end::before{ display:none; }
  /* nút TRÒN cố định 40px (ngày chọn / đầu-cuối range / hôm nay) */
  .vmb-cal-d.sel::after, .vmb-cal-d.start::after, .vmb-cal-d.end::after, .vmb-cal-d.today::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; z-index:-1; }
  .vmb-cal-d.sel::after, .vmb-cal-d.start::after, .vmb-cal-d.end::after{ background:#ed007f; }
  .vmb-cal-d.today::after{ box-shadow:inset 0 0 0 1.6px #ed007f; }
  .vmb-cal-d.sel, .vmb-cal-d.start, .vmb-cal-d.end{ color:#fff; font-weight:700; }
  .vmb-cal-ft{ display:flex; gap:10px; padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid #f0f0f0; flex:0 0 auto; }
  .vmb-cal-clear{ flex:0 0 auto; padding:13px 20px; border:1px solid #e0e0e0; background:#fff; border-radius:12px; font-weight:600; color:#666; font:inherit; cursor:pointer; }
  .vmb-cal-ok{ flex:1; padding:13px; border:0; background:#ed007f; color:#fff; border-radius:12px; font-weight:700; font-size:15px; cursor:pointer; }
  .flatpickr-calendar.vmb-fp-sheet{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; bottom:var(--vmb-vv-bottom,0px) !important; top:auto !important;
    width:100% !important; max-width:100% !important; margin:0 !important;
    border-radius:20px 20px 0 0 !important; box-shadow:0 -8px 30px rgba(0,0,0,.2) !important;
    z-index:100075 !important; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateY(100%); transition:transform .26s ease;
  }
  .flatpickr-calendar.vmb-fp-sheet.open{ transform:translateY(0); }
  /* bỏ mũi nhọn dropdown của flatpickr */
  .flatpickr-calendar.vmb-fp-sheet::before, .flatpickr-calendar.vmb-fp-sheet::after{ display:none !important; }
  .vmb-fp-hdr{ display:flex; flex-direction:column; align-items:center; padding:11px 0 4px; }
  .vmb-fp-grip{ width:40px; height:4px; border-radius:2px; background:#e0e0e0; margin-bottom:9px; }
  .vmb-fp-ttl{ font-size:16px; font-weight:700; color:#1a1a1a; }
  /* grid căn giữa + cell to dễ bấm */
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-innerContainer{ justify-content:center; padding:0 0 6px; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-rContainer{ width:auto; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-days{ width:auto !important; }
  .flatpickr-calendar.vmb-fp-sheet .dayContainer{ width:322px !important; min-width:322px !important; max-width:322px !important; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day{ height:44px; line-height:44px; max-width:46px; font-size:15px; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-months{ padding:4px 14px 2px; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-weekday{ font-size:12px; }
  /* Màu chủ đạo HỒNG (brand) thay xanh mặc định flatpickr.
     DÙNG HEX literal (KHÔNG var) vì calendar append vào <body> - ngoài scope .vmb-search nơi --vmb-pink định nghĩa. */
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.selected,
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.startRange,
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.endRange,
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.selected:hover,
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.startRange:hover,
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.endRange:hover,
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.selected:focus{
    background:#ed007f !important; border-color:#ed007f !important; color:#fff !important; box-shadow:none !important;
  }
  /* nối liền start↔end (cells liền kề) bằng box-shadow hồng để ra dải liền mạch */
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.startRange{ box-shadow:5px 0 0 #ed007f !important; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.endRange{ box-shadow:-5px 0 0 #ed007f !important; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.today{ border-color:#ed007f !important; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.today:hover,
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day:hover{ background:#fdeef7 !important; color:#1f2937 !important; }
  .flatpickr-calendar.vmb-fp-sheet .flatpickr-day.inRange{ background:#fdeef7 !important; border-color:#fdeef7 !important; box-shadow:-5px 0 0 #fdeef7,5px 0 0 #fdeef7 !important; }
}
.vmb-mp{ position:absolute; inset:0; background:#fff; z-index:30; border-radius:inherit; display:flex; flex-direction:column; padding:12px 14px 16px; }
.vmb-mp[hidden]{ display:none; }
.vmb-mp-yr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.vmb-mp-yr span{ font-weight:800; font-size:15px; color:var(--vmb-ink); }
.vmb-mp-yr button{ width:32px; height:32px; border:1px solid #e6e8ec; background:#fff; border-radius:9px; cursor:pointer; font-size:16px; color:#374151; line-height:1; }
.vmb-mp-yr button:hover{ border-color:var(--vmb-pink); color:var(--vmb-pink); }
.vmb-mp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:1; }
.vmb-mp-grid button{ border:1px solid #eef0f3; background:#fff; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; color:#374151; padding:9px 4px; transition:all .12s; }
.vmb-mp-grid button:hover:not(:disabled){ border-color:var(--vmb-pink); color:var(--vmb-pink); background:#fdf0f7; }
.vmb-mp-grid button.is-cur{ background:linear-gradient(135deg,#ec4899,#ed007f); color:#fff; border-color:transparent; }
.vmb-mp-grid button:disabled{ opacity:.35; cursor:not-allowed; }
.vmb-field-return{ display:none; }
.vmb-dates.is-roundtrip .vmb-field-return{ display:flex; }
/* FIX overflow khứ hồi: grid/flex item phải co được dưới min-content
   (native date input min-content ~191px khiến cột 1fr 1fr thổi quá container 330px) */
.vmb-dates .vmb-field{ min-width:0; }
.vmb-dates .vmb-field-val{ min-width:0; }
.vmb-dates .vmb-field-val input{ min-width:0; flex:1 1 auto; width:100%; }
.vmb-dates.is-roundtrip .vmb-field{ padding-left:12px; padding-right:12px; }
.vmb-caret{ margin-left:auto; color:var(--vmb-muted); }

/* ── Pax popover ────────────────────────────────────────────────────────── */
.vmb-pax-wrap{ position:relative; }
.vmb-pax-trigger{ width:100%; }
.vmb-pax-pop{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30;
  background:#fff; border:1px solid var(--vmb-border); border-radius:14px;
  box-shadow:0 12px 32px rgba(17,24,39,.18); padding:14px; display:flex; flex-direction:column; gap:6px;
}
.vmb-pax-pop[hidden]{ display:none; }
.vmb-pax-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px; }
.vmb-pax-info b{ font-size:14.5px; font-weight:700; display:block; }
.vmb-pax-info small{ font-size:12px; color:var(--vmb-muted); }
.vmb-stepper{ display:flex; align-items:center; gap:14px; }
.vmb-step{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--vmb-border); background:#fff; font-size:20px; line-height:1; color:var(--vmb-pink); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vmb-step:disabled{ opacity:.4; cursor:not-allowed; color:var(--vmb-muted); }
.vmb-step-val{ min-width:18px; text-align:center; font-weight:700; font-size:15px; }
.vmb-cabin{ border-top:1px solid var(--vmb-border); padding-top:12px; margin-top:4px; }
.vmb-cabin-lbl{ font-size:13px; color:var(--vmb-muted); display:block; margin-bottom:8px; }
.vmb-cabin-opts{ display:flex; gap:8px; }
.vmb-cabin-opt{ flex:1; border:1.5px solid var(--vmb-border); background:#fff; border-radius:10px; padding:9px; font-size:13.5px; font-weight:700; color:var(--vmb-muted); cursor:pointer; }
.vmb-cabin-opt.is-active{ border-color:var(--vmb-pink); color:var(--vmb-pink); background:var(--vmb-pink-soft); }
.vmb-pax-done{ margin-top:10px; background:var(--vmb-pink); color:#fff; border:0; border-radius:10px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; }

/* ── Số khách | Hạng ghế: 2 field cạnh nhau ─────────────────────────────── */
.vmb-pc-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vmb-cabin-wrap{ position:relative; }
/* Hạng ghế text dài ("Phổ thông đặc biệt") → ellipsis 1 dòng, KHÔNG xuống dòng kéo dãn card */
.vmb-pc-row > *{ min-width:0; }
.vmb-cabin-trigger .vmb-field-val{ min-width:0; flex-wrap:nowrap; }
.vmb-cabin-trigger .vmb-field-val > .fa, .vmb-cabin-trigger .vmb-field-val > .vmb-caret{ flex:0 0 auto; }
#vmbCabinSummary{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vmb-cabin-trigger{ width:100%; }
.vmb-cabin-pop{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30;
  background:#fff; border:1px solid var(--vmb-border); border-radius:14px;
  box-shadow:0 12px 32px rgba(17,24,39,.18); padding:8px; display:flex; flex-direction:column; gap:6px;
}
.vmb-cabin-pop[hidden]{ display:none; }
.vmb-cabin-card{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  border:1.5px solid var(--vmb-border); background:#fff; border-radius:10px; padding:11px 12px; cursor:pointer;
}
.vmb-cabin-card .fa{ font-size:18px; color:var(--vmb-muted); width:22px; text-align:center; }
.vmb-cabin-card b{ font-size:14.5px; font-weight:700; display:block; }
.vmb-cabin-card small{ font-size:11.5px; color:var(--vmb-muted); }
.vmb-cabin-card .vmb-cabin-tick{ margin-left:auto; color:var(--vmb-pink); font-weight:800; opacity:0; }
.vmb-cabin-card.is-active{ border-color:var(--vmb-pink); background:var(--vmb-pink-soft); }
.vmb-cabin-card.is-active .fa{ color:var(--vmb-pink); }
.vmb-cabin-card.is-active .vmb-cabin-tick{ opacity:1; }
@media (min-width:768px){ .vmb-cabin-pop{ width:300px; left:auto; right:0; } }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.vmb-submit{
  background:linear-gradient(135deg,#ec4899,var(--vmb-pink)); color:#fff; border:0;
  border-radius:12px; padding:15px; font-size:16px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 6px 18px rgba(214,36,140,.32); transition:.15s;
}
.vmb-submit:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.vmb-submit:active{ transform:translateY(0); }

/* ── Bottom-sheet chọn sân bay ──────────────────────────────────────────── */
.vmb-ap-sheet{ position:fixed; inset:0; z-index:1000; }
.vmb-ap-sheet[hidden]{ display:none; }
.vmb-ap-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.5); }
.vmb-ap-panel{
  position:absolute; left:0; right:0; bottom:0; bottom:var(--vmb-vv-bottom,0px); max-height:88vh; background:#fff;
  border-radius:18px 18px 0 0; display:flex; flex-direction:column; animation:vmbSheetUp .22s ease;
}
@keyframes vmbSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.vmb-ap-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.vmb-ap-title{ font-size:16px; font-weight:800; }
.vmb-ap-x{ border:0; background:transparent; font-size:26px; line-height:1; color:var(--vmb-muted); cursor:pointer; }
.vmb-ap-search{ display:flex; align-items:center; gap:10px; margin:4px 16px 8px; padding:11px 14px; border:1.5px solid var(--vmb-border); border-radius:12px; }
.vmb-ap-search .fa{ color:var(--vmb-muted); }
.vmb-ap-search input{ border:0; outline:0; font:inherit; font-size:15px; width:100%; }
.vmb-ap-list{ list-style:none; margin:0; padding:0 8px 16px; overflow-y:auto; flex:1; }
.vmb-ap-item{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:10px; cursor:pointer; }
.vmb-ap-item:hover,.vmb-ap-item.is-on{ background:var(--vmb-pink-soft); }
.vmb-ap-item .vmb-ap-code{ font-size:14px; font-weight:800; color:var(--vmb-pink); width:42px; flex:0 0 42px; }
.vmb-ap-item .vmb-ap-city{ font-size:14.5px; font-weight:600; color:var(--vmb-ink); }
.vmb-ap-item .vmb-ap-name{ font-size:12px; color:var(--vmb-muted); }
.vmb-ap-group{ font-size:12px; font-weight:700; color:var(--vmb-muted); text-transform:uppercase; padding:10px 12px 4px; }

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width:768px){
  .vmb-card{ padding:20px; gap:16px; }
  .vmb-row-grid{ display:grid; grid-template-columns:2fr 1.4fr 1.2fr auto; gap:14px; align-items:stretch; }
  .vmb-od-code{ font-size:26px; }
  /* Sheet → modal căn giữa trên desktop */
  .vmb-ap-panel{ left:50%; bottom:auto; top:50%; transform:translate(-50%,-50%); width:520px; max-width:92vw; max-height:80vh; border-radius:16px; animation:vmbModalIn .2s ease; }
  @keyframes vmbModalIn{ from{ opacity:0; transform:translate(-50%,-46%); } to{ opacity:1; transform:translate(-50%,-50%); } }
  .vmb-pax-pop{ left:auto; right:0; width:340px; }
}

/* ── Departure Date Calendar Dropdown/Modal Sizing ── */
.vexe-cal-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    left: auto !important;
    width: 275px !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 99999 !important;
    display: none;
    box-sizing: border-box !important;

    @media (max-width: 767px) {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

.vexe-cal-dropdown.open {
    display: block !important;
}

.vexe-cal-dropdown .cal-box {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.vexe-cal-dropdown .cal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    padding: 0 2px !important;
}

.vexe-cal-dropdown .cal-month-label {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    text-transform: capitalize !important;
}

.vexe-cal-dropdown .cal-nav {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    transition: all 0.15s ease !important;
}

.vexe-cal-dropdown .cal-nav:hover {
    background: var(--c-primary, #ed007f) !important;
    color: #ffffff !important;
    border-color: var(--c-primary, #ed007f) !important;
}

.vexe-cal-dropdown .cal-dow-row {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    justify-items: center !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vexe-cal-dropdown .cal-dow-row div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    width: 32px !important;
    min-width: 0 !important;
}

.vexe-cal-dropdown .cal-days-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vexe-cal-dropdown .cal-day {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    outline: none !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s !important;
}

.vexe-cal-dropdown .cal-day span {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    pointer-events: none !important;
}

.vexe-cal-dropdown .cal-day:hover:not(:disabled):not(.cal-day--empty):not(.cal-day--selected) {
    background: #f1f5f9 !important;
    border-radius: 50% !important;
}

.vexe-cal-dropdown .cal-day:hover:not(:disabled):not(.cal-day--empty):not(.cal-day--selected) span {
    color: var(--c-primary, #ed007f) !important;
}

.vexe-cal-dropdown .cal-day--empty {
    visibility: hidden !important;
    pointer-events: none !important;
    border: none !important;
    background: transparent !important;
}

/* Today state (ONLY when NOT selected) */
.vexe-cal-dropdown .cal-day--today:not(.cal-day--selected) {
    border: none !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px var(--c-primary, #ed007f) !important;
    border-radius: 50% !important;
}

.vexe-cal-dropdown .cal-day--today:not(.cal-day--selected) span {
    color: var(--c-primary, #ed007f) !important;
    font-weight: 700 !important;
}

/* Selected state (ALWAYS white text on pink background) */
.vexe-cal-dropdown .cal-day.cal-day--selected,
.vexe-cal-dropdown .cal-day.cal-day--selected:hover,
.vexe-cal-dropdown .cal-day.cal-day--today.cal-day--selected,
.vexe-cal-dropdown .cal-day.cal-day--today.cal-day--selected:hover {
    background: var(--c-primary, #ed007f) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 8px rgba(237, 0, 127, 0.35) !important;
}

.vexe-cal-dropdown .cal-day.cal-day--selected span,
.vexe-cal-dropdown .cal-day.cal-day--selected:hover span,
.vexe-cal-dropdown .cal-day.cal-day--today.cal-day--selected span,
.vexe-cal-dropdown .cal-day.cal-day--today.cal-day--selected:hover span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.vexe-cal-dropdown .cal-day--past {
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
}

.vexe-cal-dropdown .cal-day--past span {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* ── Mobile vmb-route styling alignment (Flight search form match) ── */
.vexe-search-mobile .vmb-route {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    border: 1px solid var(--vmb-border, #e6e8ec) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    position: relative !important;
}

.vexe-search-mobile .vmb-od {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: left !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: relative !important;
}

.vexe-search-mobile .vmb-od .vmb-od-lbl {
    font-size: 12px !important;
    color: var(--vmb-muted, #6b7280) !important;
    line-height: 1.2 !important;
}

.vexe-search-mobile .vmb-od .vmb-od-input,
.vexe-search-mobile .vmb-od:not(.is-editing) .vmb-od-input {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 2px 0 0 0 !important;
    cursor: text !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--vmb-ink, #1f2937) !important;
    line-height: 1.3 !important;
}

.vexe-search-mobile #vexeMobOriginField {
    padding-right: 26px !important;
}

.vexe-search-mobile #vexeMobOriginField .vmb-od-dd {
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    max-width: calc(100vw - 32px) !important;
}

.vexe-search-mobile #vexeMobDesField {
    padding-left: 26px !important;
}

.vexe-search-mobile #vexeMobDesField .vmb-od-dd {
    right: 0 !important;
    left: auto !important;
    width: 280px !important;
    max-width: calc(100vw - 32px) !important;
}

.vexe-search-mobile .vmb-od-to {
    align-items: flex-end !important;
    text-align: right !important;
}

.vexe-search-mobile .vmb-od-to .vmb-od-input {
    text-align: right !important;
}

.vexe-search-mobile .vmb-od-to .vmb-od-dd {
    text-align: left !important;
}

/* ── BUS SEARCH PAGE MOBILE RESPONSIVE CLEANUP ── */
@media (max-width: 767px) {
  .sf-header {
    display: none !important;
  }
  .sf-edit-panel {
    display: none !important;
  }
  .sf-summary-bar {
    display: none !important;
  }
  .vexe-mobile-sticky-bar {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 990 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  }
  .sf-mobile-actions {
    display: flex !important;
    position: sticky !important;
    top: 49px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 980 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  }
  .sf-results-wrap {
    margin-top: 8px !important;
    padding: 0 10px 24px !important;
  }
  .vexe-card-box {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
  }
  .vexe-card-box .card-header-bar {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .vexe-card-box .card-header-bar .operator-meta {
    gap: 6px !important;
    align-items: center !important;
  }
  .vexe-card-box .card-header-bar .operator-meta .operator-avatar {
    display: none !important;
  }
  .vexe-card-box .card-header-bar .operator-meta .operator-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .vexe-card-box .card-header-bar .operator-meta .operator-info .operator-name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }
  .vexe-card-box .card-header-bar .operator-meta .operator-info .operator-subtags {
    gap: 4px !important;
    margin-top: 0 !important;
  }
  .vexe-card-box .card-header-bar .operator-meta .operator-info .operator-subtags .badge-car-type {
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 4px !important;
  }
  .vexe-card-box .card-header-bar .operator-meta .operator-info .operator-subtags .badge-verified {
    display: none !important;
  }
  .vexe-card-box .card-header-bar .seats-status-wrap .badge-seats {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
  }
  .vexe-card-box .card-body-grid {
    gap: 8px !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline .timeline-point {
    min-width: 75px !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline .timeline-point .station-label {
    display: none !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline .timeline-point .point-time {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline .timeline-point .point-station .station-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    max-width: 95px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline .timeline-track-wrap {
    min-width: 50px !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline .timeline-track-wrap .track-distance {
    display: none !important;
  }
  .vexe-card-box .card-body-grid .journey-col .journey-timeline .timeline-track-wrap .track-duration-pill {
    font-size: 0.68rem !important;
    padding: 1px 5px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }
  .vexe-card-box .card-body-grid .pricing-col {
    padding-top: 8px !important;
    margin-top: 4px !important;
    border-top: 1px dashed #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .vexe-card-box .card-body-grid .pricing-col .price-wrap .price-val-block .price-amount {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--c-primary, #ed007f) !important;
  }
  .vexe-card-box .card-body-grid .pricing-col .price-wrap .price-val-block .price-sub {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
  }
  .vexe-card-box .card-body-grid .pricing-col .btn-select-trip {
    padding: 7px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 18px !important;
    background: var(--c-primary, #ed007f) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(237, 0, 127, 0.25) !important;
  }
  .vexe-card-box .card-notice-row {
    display: none !important;
  }
  .vexe-card-box .card-footer-bar {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
  }
  .vexe-card-box .card-footer-bar .footer-perks {
    display: none !important;
  }
  .vexe-card-box .card-footer-bar .footer-links {
    gap: 6px !important;
    justify-content: space-between !important;
  }
  .vexe-card-box .card-footer-bar .footer-links .btn-quick-action {
    flex: 1 !important;
    justify-content: center !important;
    padding: 5px 2px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
  }
  .vexe-card-box .card-footer-bar .footer-links .btn-quick-action i {
    font-size: 0.75rem !important;
  }
}

/* ── BUS SEARCH LOADER EQUAL WIDTH ALIGNMENT ── */
.vxsl-route {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
}

.vxsl-port {
  min-width: 0 !important;
  flex: 1 1 0 !important;
  width: 50% !important;
}

.vxsl-port-to {
  text-align: right !important;
}

.vxsl-code {
  display: block !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.vxsl-arc {
  position: relative !important;
  flex: 0 0 80px !important;
  width: 80px !important;
  height: 40px !important;
  margin-top: -13px !important;
}

/* ── VE-XE CHECKOUT PAGE RESPONSIVE CLEANUP ── */
@media (max-width: 767px) {
  .vnt-main-top {
    display: none !important;
  }
  .vexe-checkout-stepper {
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 12px !important;
    justify-content: space-between !important;
  }
  .vexe-checkout-stepper .stepper-item {
    gap: 6px !important;
  }
  .vexe-checkout-stepper .stepper-item .stepper-circle {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
  }
  .vexe-checkout-stepper .stepper-item .stepper-text .stepper-step {
    font-size: 0.68rem !important;
  }
  .vexe-checkout-stepper .stepper-line {
    margin: 0 4px !important;
  }
  .vexe-trip-summary-card {
    padding: 14px !important;
    margin-bottom: 14px !important;
    border-radius: 14px !important;
  }
  .vexe-trip-summary-card .card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 12px;
    gap: 8px;
  }
  .vexe-trip-summary-card .card-top-row .tag-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }
  .vexe-trip-summary-card .card-top-row .tag-group .badge-operator {
    font-size: 0.76rem;
    padding: 4px 10px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vexe-trip-summary-card .card-top-row .tag-group .badge-vehicle,
  .vexe-trip-summary-card .card-top-row .tag-group .badge-date {
    font-size: 0.75rem;
    padding: 4px 8px;
    white-space: nowrap;
  }
  .vexe-trip-summary-card .card-top-row .btn-change-trip {
    padding: 4px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0;
  }
  .vexe-trip-summary-card .card-top-row .btn-change-trip .desktop-only-text {
    display: none;
  }
  .vexe-trip-summary-card .card-main-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col .journey-station {
    min-width: 70px !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col .journey-station .station-time {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col .journey-station .station-label {
    display: none !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col .journey-station .station-name {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    max-width: 95px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col .journey-track {
    min-width: 60px !important;
    margin: 0 4px !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col .journey-track .track-duration {
    font-size: 0.72rem !important;
    padding: 1px 6px !important;
  }
  .vexe-trip-summary-card .card-main-row .journey-col .journey-track .track-type {
    display: none !important;
  }
  .vexe-trip-summary-card .card-main-row .price-col {
    width: 100% !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
  }
  .vexe-trip-summary-card .card-main-row .price-col .price-label {
    display: none !important;
  }
  .vexe-trip-summary-card .card-main-row .price-col .price-amount {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    color: var(--c-primary, #ed007f) !important;
  }
  .vexe-trip-summary-card .card-main-row .price-col .seats-left-pill {
    font-size: 0.75rem !important;
    padding: 2px 8px !important;
  }
  .sidebar-summary-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .sidebar-summary-card .price-breakdown {
    padding: 12px !important;
  }
  .sidebar-summary-card .price-breakdown .breakdown-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    font-size: 0.82rem !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
  }
  .sidebar-summary-card .price-breakdown .breakdown-row span {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .sidebar-summary-card .price-breakdown .breakdown-row span small.fee-hint {
    display: block !important;
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
  }
  .sidebar-summary-card .price-breakdown .breakdown-row strong {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .vexe-hold-timer-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  .vexe-hold-timer-card .timer-card-left {
    gap: 8px !important;
  }
  .vexe-hold-timer-card .timer-card-left .timer-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
  .vexe-hold-timer-card .timer-card-left .timer-card-text .timer-title {
    font-size: 0.72rem !important;
  }
  .vexe-hold-timer-card .timer-card-left .timer-card-text .timer-digits {
    font-size: 1.1rem !important;
  }
  .vexe-hold-timer-card .btn-cancel-hold-top {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
  .vexe-form-section {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .vexe-form-section .section-title {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
  }
  .vexe-form-section .section-title .title-main {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }
  .vexe-form-section .section-title .title-sub {
    display: none !important;
  }
  .vexe-form-section .form-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .boarding-points-timeline .point-item {
    gap: 8px !important;
  }
  .boarding-points-timeline .point-item .point-time-col {
    min-width: 48px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
  }
  .boarding-points-timeline .point-item .point-details .point-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .boarding-points-timeline .point-item .point-details .point-title strong {
    font-size: 0.84rem !important;
  }
  .boarding-points-timeline .point-item .point-details .point-title .point-type-badge {
    font-size: 0.68rem !important;
    padding: 1px 5px !important;
  }
  .boarding-points-timeline .point-item .point-details .point-address {
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.3 !important;
  }
}