/* KHAI BÁO BIẾN HỆ THỐNG Z-INDEX */
:root {
  --z-map: 1;
  --z-route-card: 105;
  --z-menu: 110;
  --z-center-pin: 800;
  --z-floating-controls: 1005;
  --z-top-float: 1100;
  --z-popup: 9000;
  --z-overlay: 10000;
  --z-confirm-btn: 10000;
  --z-focus-suggestions: 100000;
  --z-focus-mode: 99999;
  --z-alert: 1000000;
  --z-nav-sheet: 9980;   /* Bảng trượt nằm dưới */
  --z-bottom-nav: 9990;  /* Thanh 4 nút luôn nổi trên cùng, bấm được mọi lúc */

  /* KÍCH THƯỚC CHUẨN CỦA VÙNG AN TOÀN DƯỚI ĐÁY MÀN HÌNH (SAFE AREA BOTTOM NAV) */
  --nav-h: 58px;                                    /* Chiều cao phần bấm được */
  /* Khoảng chừa dưới 4 nút. Apple chuẩn là 34px nhưng nhìn rỗng,
     lấy 60% vừa sát mép vừa không đụng thanh gạt Home.
     Muốn sát hơn nữa: đổi 0.6 thành 0.35. Muốn chuẩn Apple: env(safe-area-inset-bottom, 0px) */
  --nav-safe: max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.6));
  --nav-total: calc(var(--nav-h) + var(--nav-safe));/* Tổng chiều cao thực tế chiếm chỗ */
  --stack-bottom: calc(var(--nav-total) + 8px);     /* Mốc đáy của mọi khối nổi phía trên nav */
  --nav-green: var(--color-primary);
  --bar-h: 52px;                                    /* UI v2: chiều cao hàng "tài xế gần nhất" + chọn xe */
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body { 
  font-family: var(--font-sans); 
  max-width: 480px; 
  margin: auto; 
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  position: relative;
}

input, button, select, textarea {
  font-family: var(--font-sans);
}

/* ============================================================================
   VÙNG AN TOÀN DƯỚI ĐÁY MÀN HÌNH - THANH ĐIỀU HƯỚNG 4 NÚT (SAFE AREA BOTTOM NAV)
   4 NÚT: ĐẶT XE  •  TÀI XẾ  •  GẦN ĐÂY  •  TIỆN ÍCH
   ============================================================================ */
.app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: var(--nav-total);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  /* Nền phủ kín xuống tận mép dưới, KHÔNG để hở khe trắng ở vùng tai thỏ */
  padding: 0 0 var(--nav-safe) 0;
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -6px 22px rgba(15, 23, 42, 0.10);
  z-index: var(--z-bottom-nav);
  box-sizing: border-box;
  pointer-events: auto !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-bottom-nav .nav-item {
  position: relative;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.22s ease, transform 0.14s ease;
}

/* VẠCH CHỈ BÁO NHỎ TRÊN ĐẦU NÚT ĐANG CHỌN */
.app-bottom-nav .nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--nav-green);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-bottom-nav .nav-item.active::before {
  transform: translateX(-50%) scaleX(1);
}

.app-bottom-nav .nav-icon {
  width: 36px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-bottom-nav .nav-icon svg {
  width: 21px;
  height: 21px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-bottom-nav .nav-item.active {
  color: var(--nav-green);
}

.app-bottom-nav .nav-item.active .nav-icon {
  background: rgba(0, 177, 79, 0.12);
  transform: translateY(-1px);
}

.app-bottom-nav .nav-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.app-bottom-nav .nav-item:active {
  transform: scale(0.9);
}

/* CHẤM ĐẾM SỐ TÀI XẾ ĐANG Ở GẦN, GẮN TRÊN NÚT TÀI XẾ */
.app-bottom-nav .nav-badge {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--color-danger);
  border: 2px solid var(--color-surface);
  color: var(--color-on-danger);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  box-sizing: content-box;
  display: none;
  animation: navBadgePop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-bottom-nav .nav-badge.show {
  display: block;
}

@keyframes navBadgePop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ẨN THANH ĐIỀU HƯỚNG KHI BÀN PHÍM ẢO ĐANG BẬT ĐỂ KHÔNG CHE Ô NHẬP */
body.focus-pickup .app-bottom-nav,
body.focus-dest .app-bottom-nav {
  transform: translateY(110%);
  pointer-events: none !important;
}

/* DARK MODE CHO THANH ĐIỀU HƯỚNG */












/* ============================================================================
   BẢNG TRƯỢT LÊN TỪ VÙNG AN TOÀN (BOTTOM SHEET) DÙNG CHO NÚT GẦN ĐÂY & TIỆN ÍCH
   ============================================================================ */
.nav-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: var(--z-nav-sheet);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.nav-sheet-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-sheet {
  position: fixed;
  bottom: var(--nav-total);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.25);
  z-index: calc(var(--z-nav-sheet) + 1);
  padding: 8px 14px 14px 14px;
  box-sizing: border-box;
  transform: translateY(102%);
  /* PHÒNG HỜ "HỞ MÉP" Ở ĐÁY MÀN HÌNH: translateY(102%) tính theo chính CHIỀU CAO của khung
     này - nếu lúc chưa mở nội dung bên trong còn rỗng/thấp (chỉ có tay cầm + khoảng đệm),
     102% của một chiều cao rất nhỏ chỉ lệch vài chục px, có thể để lộ mép cong phía trên ở
     đáy màn hình dù đang ở trạng thái "đóng". Thêm visibility:hidden làm lớp bảo hiểm thứ 2,
     tách biệt hoàn toàn với transform - chỉ chuyển sang visible SAU KHI hoạt ảnh mở đã bắt
     đầu, và ẩn lại NGAY khi đóng (không cần chờ hoạt ảnh trượt xuống chạy xong).
     max-height dùng thêm dvh để khớp đúng vùng nhìn thấy thật trên iOS khi bàn phím ảo/thanh
     địa chỉ ẩn hiện làm 66vh (tính theo viewport lớn nhất, không đổi theo bàn phím) sai lệch. */
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
  max-height: 66vh;
  max-height: 66dvh;
  display: flex;
  flex-direction: column;
}

.nav-sheet.active {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

.nav-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 4px;
  background: var(--color-border-strong);
  margin: 2px auto 10px auto;
  flex-shrink: 0;
}

.nav-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 10px 4px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.nav-sheet-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--color-text);
}

.nav-sheet-close {
  background: var(--color-surface-2);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1;
}

.nav-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 8px 0;
}

.nav-sheet-group-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 4px 4px 4px;
}

.nav-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}

.nav-sheet-item:active {
  transform: scale(0.98);
  background: var(--color-surface-2);
}

.nav-sheet-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.nav-sheet-item-text {
  flex: 1;
  min-width: 0;
}

.nav-sheet-item-main {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-sheet-item-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-sheet-item-arrow {
  font-size: 15px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.nav-sheet-empty {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 26px 12px;
  line-height: 1.5;
}












/* THÊM (Đợt 10): FAQ dạng accordion trong Trung tâm hỗ trợ - dùng thẻ <details>/<summary> gốc của
   trình duyệt, không cần JS riêng để xử lý mở/đóng. */
.support-faq-item {
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 4px;
}

.support-faq-item summary {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.support-faq-item summary::-webkit-details-marker { display: none; }

.support-faq-item summary::after {
  content: '+';
  float: right;
  color: var(--color-text-muted);
  font-weight: 800;
}

.support-faq-item[open] summary::after { content: '−'; }

.support-faq-answer {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 8px;
}




/* THANH CẢNH BÁO MẤT MẠNG KHI SÓNG YẾU/OFFLINE */
.network-offline-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-danger);
  color: var(--color-on-danger);
  text-align: center;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 700;
  z-index: var(--z-alert);
  /* SỬA (2026-09-23): KHÔNG đặt box-shadow ở đây nữa - dù bị translateY(-100%) đẩy hẳn lên trên
     màn hình (thanh vẫn "tồn tại", chỉ dịch chuyển vị trí chứ không display:none), box-shadow của
     nó vẫn được trình duyệt vẽ tràn xuống dưới mép thanh (blur 12px + offset 2px), tạo ra 1 dải
     màu đỏ/xanh mờ ngay đỉnh màn hình dù thanh "vô hình" - đây chính là dải màu lạ nằm giữa mép
     trên màn hình và ô nhập điểm đón mà không tài liệu/code nào khác giải thích được. Chỉ bật
     box-shadow khi thanh thật sự đang hiện (.show, xem bên dưới).
  */
  box-shadow: none;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.35s ease;
  pointer-events: none;
  box-sizing: border-box;
}

.network-offline-bar.show {
  transform: translateY(0);
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.4);
}

.network-offline-bar.online-back {
  background: var(--color-success);
}

.network-offline-bar.show.online-back {
  box-shadow: 0 2px 12px rgba(21, 128, 61, 0.4);
}

/* KHÓA BODY CỐ ĐỊNH KHI FOCUS TRÁNH BÀN PHÍM ẢO ĐẨY TRÔI KHUNG NHẬP */
body.focus-pickup,
body.focus-dest {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* BẢN ĐỒ CỐ ĐỊNH NỀN */
#map {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  touch-action: none;
  /* Màu nền khi mảnh bản đồ chưa tải kịp: Leaflet mặc định để màu XÁM đậm (#ddd) nên mỗi mảnh
     chậm mạng đều lộ ra thành mảng xám rất rõ, trông như lỗi. Đổi sang đúng tông nền be nhạt
     của bản đồ Mapbox Streets để chỗ chưa tải xong lẫn vào bản đồ, gần như không nhận ra. */
  background: var(--map-land);
}

/* KHUNG PC CHUẨN TỐI ĐA 480PX KHI XEM TRÊN MÁY TÍNH */
@media (min-width: 481px) {
  html {
    background-color: var(--color-border-strong);
  }

  #map {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 480px !important;
    height: 100% !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
  }

  /* ĐÃ GỠ BỎ (2026-09-22) - SỬA LỖI "CÁC KHUNG KHÔNG NẰM THẲNG VỚI PHẦN HIỂN THỊ CHÍNH KHI XEM
     TRÊN MÁY TÍNH": trước đây ở đây có 3 khối ép .bottom-section / .bottom-main-bar / .price-card /
     .collapsible-drivers-panel căn giữa lại bằng "left:50% + transform:translateX(-50%)". Chính 3
     khối đó là nguyên nhân làm các khung bị ĐẨY LỆCH HẲN SANG PHẢI so với cột bản đồ.
     LÝ DO (luật CSS 10.3.7 cho phần tử position:fixed): các khung này ở quy tắc gốc đã có sẵn
     left:0 (hoặc 10px) + right:0 (hoặc 10px) + width + max-width + "margin: 0 auto". Khi cả left,
     right và width đều có giá trị (không phải auto) mà 2 lề trái/phải là auto, trình duyệt sẽ CHIA
     ĐỀU phần dư cho 2 lề - tức là TỰ CĂN GIỮA khung trong màn hình, hoàn toàn đúng ý muốn, không
     cần giúp gì thêm. Nhưng khi ghi đè "left:50%" mà QUÊN đặt lại "right", phần dư được tính lại từ
     mốc 50% màn hình trở đi rồi mới chia đôi, nên khung bị đẩy sang phải khoảng 1/4 màn hình;
     translateX(-50%) chỉ kéo ngược lại được một nửa bề rộng khung nên vẫn lệch rất xa.
     Bằng chứng rõ nhất: thanh 4 nút .app-bottom-nav dùng đúng cách gốc (left:0 + right:0 +
     margin:0 auto) và KHÔNG hề bị ghi đè ở đây - nó nằm thẳng hàng hoàn hảo với bản đồ, trong khi
     mọi khung có mặt trong khối media này đều bị lệch.
     Vì vậy: chỉ cần XOÁ các dòng ghi đè thừa, quy tắc gốc tự căn giữa chuẩn. (#map và .top-float-bar
     bên trên vẫn phải giữ vì quy tắc gốc của chúng dùng "margin: 0", không có lề auto để tự căn.) */

  .fixed-center-pin {
    left: 50% !important;
  }

  
}

/* CỤM NÚT NỔI GÓC TRÊN MÀN HÌNH */

/* CỤM TOP CONTAINER CHỨA CÁC KHỐI ĐỊA CHỈ NẰM PHÍA TRÊN */
.bottom-section {
  position: fixed;
  top: 0 !important;
  bottom: auto !important;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  z-index: 1000;
  background: transparent !important;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px 10px;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
  max-height: 70dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.bottom-section::after {
  display: none !important;
}

/* DÒNG THÔNG BÁO HƯỚNG DẪN KHI CHỌN VỊ TRÍ TRÊN BẢN ĐỒ */
.map-select-notice {
  order: 1;
  display: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 14px;
  padding: 11px 14px;
  margin-bottom: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  pointer-events: auto !important;
}

/* KHỐI 1: THẺ NHẬP ĐỊA CHỈ (THẺ NỔI ĐỘC LẬP NẰM TRÊN CÙNG) */
.route-card {
  order: 2;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  pointer-events: auto !important;
  z-index: var(--z-route-card);
  overflow: visible !important;
  box-sizing: border-box;
  margin-bottom: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* CHIỀU CAO DÒNG NHẬP VÀ ĐỘ THOÁNG KHUNG VỊ TRÍ */
.route-input-item {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 42px;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
}

.pickup-group {
  z-index: 20;
}

.dest-group {
  z-index: 10;
}

/* NÚT TRỜ VỀ KHI VÀO CHẾ ĐỘ FOCUS */
.btn-back-focus {
  display: none;
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text);
  cursor: pointer;
  padding: 0 8px 0 0;
  margin-right: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}



/* KHÓA VÀ ẨN HOÀN TOÀN ĐƯỜNG TRẮNG CÙNG KHUNG ĐÁY KHI DÙNG Ô NHẬP LIỆU */
body.focus-pickup .bottom-section,
body.focus-dest .bottom-section {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  pointer-events: none !important;
  /* ======================================================================
     ĐÂY MỚI LÀ NGUYÊN NHÂN THẬT của lỗi "bấm vào ô nhập điểm đón/đến chỉ
     thấy con trỏ nhấp nháy, không thấy khung/chữ/gợi ý" trên điện thoại:
     .bottom-section (khối cha chứa 2 ô nhập) vốn là 1 KHUNG CUỘN RIÊNG
     (max-height: 70dvh + overflow-y: auto + -webkit-overflow-scrolling:
     touch). Trên nhân WebKit (Safari iOS và mọi trình duyệt nội bộ trong
     app như Zalo/Messenger/Facebook - đều dùng chung nhân này), khung cuộn
     kiểu đó được tăng tốc phần cứng bằng 1 lớp cuộn riêng, và phần tử con
     đặt position:fixed (chính là .pickup-group/.dest-group khi vào chế độ
     focus) bị lớp cuộn đó CẮT MẤT (clip) - phần tử vẫn tồn tại, vẫn nhận
     được chạm và vẫn nhận bàn phím (nên con trỏ vẫn nhấp nháy, chạm vào
     đúng chỗ gợi ý vẫn ra kết quả đúng) nhưng KHÔNG được vẽ lên màn hình.
     Chrome/Android không có lỗi này -> test trên máy tính hoặc trình duyệt
     nhân Chrome luôn thấy bình thường, chỉ điện thoại iPhone/Zalo mới lỗi.
     CÁCH SỬA: khi vào chế độ focus thì bỏ hẳn tính chất "khung cuộn" của
     .bottom-section (chế độ này chỉ hiện đúng 1 ô nhập nên không cần cuộn),
     để .pickup-group/.dest-group được định vị và vẽ thẳng theo màn hình.
     ====================================================================== */
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
  max-height: none !important;
}

body.focus-pickup .bottom-section::after,
body.focus-dest .bottom-section::after {
  display: none !important;
}

body.focus-pickup .route-card,
body.focus-dest .route-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* CHẾ ĐỘ FOCUS ĐẨY NGUYÊN DÒNG ĐIỂM ĐÓN / ĐIỂM ĐẾN LÊN ĐẦU MÀN HÌNH */
/* GHI CHÚ 2026-09-22: trước đây từng nghi lỗi "ô nhập vô hình trên điện thoại" là do WebView
   không chịu vẽ lại (repaint) nên có thêm translateZ(0)/will-change ở đây để ép tạo layer GPU -
   NHƯNG đó KHÔNG phải nguyên nhân (vá xong vẫn lỗi y nguyên). Nguyên nhân thật là khối cha
   .bottom-section là 1 khung cuộn (overflow-y:auto) cắt mất phần tử position:fixed trên nhân
   WebKit - xem phần sửa ở body.focus-pickup .bottom-section phía trên. Đã GỠ các hint layer GPU
   vì tự chúng cũng có thể gây lỗi "layer trắng" trên WebKit đời cũ, không nên giữ lại vô ích. */
body.focus-pickup .pickup-group,
body.focus-dest .dest-group {
  position: fixed !important;
  top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  left: 14px !important;
  right: 14px !important;
  width: calc(100% - 28px) !important;
  max-width: 452px !important;
  margin: 0 auto !important;
  z-index: var(--z-focus-mode) !important;
  background: var(--color-surface) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 14px !important;
  padding: 6px 12px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18) !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* ẨN NÚT CHI TIẾT VÀ NÚT CHỌN BẢN ĐỒ KHI Ở CHẾ ĐỘ FOCUS */
body.focus-pickup .pickup-group #btnPickupDetail,
body.focus-dest .dest-group .btn-swap-route,
body.focus-dest .dest-group .btn-reset-icon {
  display: none !important;
}

@media (min-width: 481px) {
  body.focus-pickup .pickup-group,
  body.focus-dest .dest-group {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 452px !important;
  }
}

body.focus-pickup .pickup-group .btn-back-focus,
body.focus-dest .dest-group .btn-back-focus {
  display: flex !important;
}

body.focus-pickup .pickup-group .pickup-icon,
body.focus-dest .dest-group .dest-icon {
  display: none !important;
}

body.focus-pickup .pickup-group .action-buttons-right,
body.focus-dest .dest-group .action-buttons-right {
  display: flex !important;
}

/* KHỐI 3: DANH SÁCH 7 ĐIỂM ĐẾN GẦN ĐÂY THẺ NỔI ĐỘC LẬP NẰM PHÍA TRÊN */
.recent-dests-block {
  order: 3;
  margin-top: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: none;
  pointer-events: auto !important;
}

/* BẢNG GỢI Ý KHI GÕ TÌM KIẾM AUTOCOMPLETE */
.suggestions-list { 
  position: absolute; 
  top: 100% !important; 
  bottom: auto !important;
  left: 0; 
  right: 0; 
  background: var(--color-surface); 
  border: 1px solid var(--color-border-strong); 
  border-radius: 14px; 
  max-height: 220px; 
  overflow-y: auto; 
  z-index: 9999 !important; 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18); 
  display: none; 
  margin-top: 4px !important; 
  -webkit-overflow-scrolling: touch;
}

body.focus-pickup .pickup-group .suggestions-list,
body.focus-dest .dest-group .suggestions-list {
  top: 100% !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 6px !important;
  max-height: 50dvh !important;
  z-index: var(--z-focus-suggestions) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  border-radius: 14px !important;
  -webkit-overflow-scrolling: touch;
}

/* ICON ĐẦU DÒNG */
.route-icon {
  font-size: 15px;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-icon svg {
  width: 20px;
  height: 20px;
}

/* Ô NHẬP VĂN BẢN */
/* CỠ CHỮ 16px LÀ BẮT BUỘC, KHÔNG ĐƯỢC HẠ XUỐNG: iPhone/iPad TỰ ĐỘNG PHÓNG TO cả trang mỗi khi
   khách chạm vào 1 ô nhập có cỡ chữ NHỎ HƠN 16px (quy định cố định của iOS, không tắt được bằng
   CSS). Trước đây trang có "maximum-scale=1.0, user-scalable=no" trong thẻ viewport nên iOS bị
   chặn, không phóng to được - nhưng chính 2 thuộc tính đó lại là thứ làm BÀN PHÍM ẢO KHÔNG HIỆN
   trong nhiều WebView nên đã phải gỡ (xem index.html). Gỡ xong thì lộ ra hậu quả: ô nhập 14.5px
   khiến iOS phóng to trang ngay khi chạm vào, và mức phóng đó GIỮ NGUYÊN sau khi đóng bàn phím -
   đúng hiện tượng "xem trên web ở điện thoại bị khuất, không vừa màn hình". Để 16px thì iOS không
   còn lý do phóng to, trang luôn vừa khít màn hình mà bàn phím vẫn hiện bình thường. */
.route-input-item input {
  flex: 1;
  min-width: 0;
  width: auto;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  outline: none;
  padding: 8px 0;
  box-sizing: border-box;
}

.pickup-group input,
.dest-group input {
  padding-right: 0 !important;
}

.action-buttons-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: 4px;
  z-index: 30;
}

/* NÚT XÓA CHỮ (NÚT X) - ĐÃ ẨN HOÀN TOÀN */
.btn-clear-input {
  display: none !important;
  background: var(--color-surface-3);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.route-divider {
  position: relative;
  height: 1px;
  background: var(--color-surface-3);
  margin: 0 4px 0 32px;
}

/* NÚT HOÁN ĐỔI */
.btn-swap-route {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-primary-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, border-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.btn-swap-route:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.btn-swap-route:active {
  background: var(--color-primary-soft-2);
}

/* NÚT ĐẶT LẠI ĐIỂM ĐÓN/ĐẾN TRONG DÒNG ĐIỂM ĐẾN */
.btn-reset-icon { 
  background: var(--color-surface); 
  border: 1px solid var(--color-border-strong); 
  color: var(--color-danger-text); 
  border-radius: 8px; 
  width: 32px; 
  height: 32px; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  flex-shrink: 0; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); 
  transition: all 0.2s ease;
  padding: 0; 
}

.btn-reset-icon svg {
  width: 16px;
  height: 16px;
}

.btn-reset-icon:hover { 
  background: var(--color-danger-soft); 
  border-color: var(--color-danger);
}

.btn-reset-icon:active { 
  transform: scale(0.95); 
}







.suggestion-loading {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}



/* NÚT CHI TIẾT */
.btn-pickup-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  height: 32px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  white-space: nowrap;
}

.btn-pickup-detail:hover {
  background: var(--color-surface-2);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

.btn-pickup-detail.has-note {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* NÚT SỬA GHIM TÂM NGẮM */

/* NÚT CHỌN ĐIỂM ĐÓN */

/* NÚT CHỌN ĐIỂM ĐẾN */





/* NÚT XÁC NHẬN CHỌN VỊ TRÍ */
.btn-confirm-select {
  position: fixed;
  bottom: calc(var(--stack-bottom) + 2px);
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  max-width: 460px;
  margin: 0 auto;
  z-index: var(--z-confirm-btn);
  display: none;
  padding: 15px 20px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 129, 58,0.35);
  letter-spacing: 0.3px;
  pointer-events: auto !important;
  box-sizing: border-box;
}

/* KHI ĐANG GHIM VỊ TRÍ TRÊN BẢN ĐỒ: ẨN HẲN THẺ CHỨA 2 Ô NHẬP .route-card */
body.selecting-pickup .route-card,
body.selecting-dest .route-card,
body.selecting-pickup .bottom-main-bar,
body.selecting-pickup .collapsible-drivers-panel,
body.selecting-pickup .recent-dests-block,
body.selecting-pickup #priceCard,
body.selecting-dest .bottom-main-bar,
body.selecting-dest .collapsible-drivers-panel,
body.selecting-dest .recent-dests-block,
body.selecting-dest #priceCard {
  display: none !important;
}

body.selecting-pickup .btn-confirm-select,
body.selecting-dest .btn-confirm-select,
body.selecting-pickup .map-select-notice,
body.selecting-dest .map-select-notice {
  display: block !important;
}

/* CỤM NÚT NỔI GPS GÓC DƯỚI PHẢI - DI CHUYỂN DỰA TRÊN ĐƯỜNG CONG TƯƠNG ĐỒNG BẢNG 3 TÀI XẾ */
.floating-controls-stack {
  position: fixed;
  bottom: calc(var(--stack-bottom) + 60px);
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: var(--z-floating-controls);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(calc(-1 * var(--panel-offset, 0px)));
}

.btn-gps-float {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--glass-bg-solid);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.btn-gps-float svg {
  width: 24px;
  height: 24px;
}

.btn-gps-float:hover {
  background: var(--color-surface);
  color: var(--color-primary-text);
  transform: translateY(-2px);
}

.btn-gps-float:active {
  transform: translateY(0) scale(0.95);
}

/* THÊM (Đợt 14): nút SOS nổi - đỏ, chữ trắng đậm để dễ nhận ra trong tình huống khẩn cấp. Khi đang chia
   sẻ (class .sharing) nhấp nháy nhẹ; tôn trọng prefers-reduced-motion. */
.btn-sos-float {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-danger);
  color: var(--color-on-danger);
  border: 1px solid var(--color-border);
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.45);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  padding: 0;
}

.btn-sos-float:active { transform: scale(0.95); }

.btn-sos-float.sharing {
  animation: sosPulse 1.4s ease-in-out infinite;
  outline: 3px solid rgba(220, 38, 38, 0.35);
}

@keyframes sosPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-sos-float.sharing { animation: none; }
}

/* MÀN THEO DÕI KHẨN CẤP CÔNG KHAI (?sos=ID) - phủ kín, nằm trên mọi thứ khác của app. */
.sos-viewer {
  position: fixed;
  inset: 0;
  /* Phải cao hơn thanh 4 nút dưới (--z-bottom-nav: 9990) và chế độ nhập (--z-focus-suggestions: 100000)
     để phủ kín hoàn toàn; vẫn thấp hơn --z-alert (1000000) để hộp thoại thông báo nếu có vẫn hiện. */
  z-index: 200000;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.sos-viewer-header {
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px 16px;
  background: var(--color-danger);
  color: var(--color-on-danger);
}

.sos-viewer-title { font-size: 16px; font-weight: 800; }
.sos-viewer-status { font-size: 12.5px; margin-top: 4px; opacity: 0.95; line-height: 1.4; }
.sos-viewer-map { flex: 1; min-height: 0; }

.sos-viewer-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px) 16px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.sos-viewer-btn {
  flex: 1;
  text-align: center;
  padding: 12px 10px;
  border-radius: 12px;
  background: var(--color-toast-bg);
  color: var(--color-toast-text);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.sos-viewer-btn-call { background: var(--color-danger); }

/* KHỐI 2: CỐ ĐỊNH PHÍA TRÊN VÙNG AN TOÀN */
.bottom-main-bar {
  position: fixed;
  bottom: var(--stack-bottom);
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 18px;
  padding: 8px 10px;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  pointer-events: auto !important;
  box-sizing: border-box;
  transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.right-vehicle-price-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CẤU TRÚC DÃY 4 ICON CHỌN XE 1-CHẠM TRỰC TIẾP */
.quick-vehicle-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--color-surface-2);
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
}

.btn-vehicle-tab {
  background: transparent;
  border: none;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-vehicle-tab:active {
  transform: scale(0.9);
}

.btn-vehicle-tab.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 6px rgba(0, 129, 58, 0.35);
}

/* KHỐI GIÁ TIỀN & SỐ KM DƯỚI CÙNG - SỬA (2026-09-23): bỏ dòng nhãn "Cước phí dự kiến:" bên trái,
   chỉ còn số tiền + km, căn giữa tuyệt đối, bo tròn nhiều hơn (24px, gần dạng viên thuốc) cho gọn
   và nổi bật hơn theo đúng yêu cầu "chỉ cần hiển thị số tiền và km, ở chính giữa, bo tròn". */
.price-card {
  position: fixed;
  bottom: var(--stack-bottom);
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: 24px;
  padding: 10px 20px;
  box-shadow: 0 -4px 18px rgba(0, 129, 58, 0.2);
  z-index: 1000;
  pointer-events: auto !important;
  box-sizing: border-box;
}

.price-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.price-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary-text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.price-sub {
  font-size: 11.5px;
  color: var(--color-primary-text);
  font-weight: 700;
  margin-top: 2px;
}

.price-peak-note {
  font-size: 10.5px;
  color: var(--color-warning-text);
  font-weight: 700;
  margin-top: 3px;
}

/* THÊM (Đợt 9): dòng mã khuyến mãi - mặc định mời nhập, đổi màu/nội dung khi đã áp mã thành công.
   Cố tình không đặt input cố định trong price-card (đã tối giản triệt để ở Đợt 2) - bấm dòng này
   mới mở modal nhập mã, giữ price-card gọn như thiết kế ban đầu. */
.price-promo-note {
  font-size: 10.5px;
  color: var(--color-accent-text);
  font-weight: 700;
  margin-top: 3px;
  cursor: pointer;
}

/* THÊM (Đợt 13): dòng "Đặt cho giờ khác" - cùng kiểu dòng mã khuyến mãi, khác màu để phân biệt. */
.price-schedule-note {
  font-size: 10.5px;
  color: var(--color-info-text);
  font-weight: 700;
  margin-top: 3px;
  cursor: pointer;
}

/* Banner nhắc lịch đặt trước - hiện ngay dưới ô nhập điểm đón/đến khi mở app gần giờ đã hẹn. */
.scheduled-reminder-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 10px;
  right: 10px;
  max-width: 460px;
  margin: 0 auto;
  background: var(--color-info);
  color: var(--color-on-info);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(29, 78, 216, 0.4);
  z-index: 3000;
  display: none;
  font-size: 13px;
  line-height: 1.4;
}

.scheduled-reminder-banner.show { display: block; }

.scheduled-reminder-banner .reminder-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.scheduled-reminder-banner button {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.scheduled-reminder-banner .reminder-btn-open { background: var(--color-surface); color: var(--color-info-text); }
.scheduled-reminder-banner .reminder-btn-dismiss { background: rgba(255,255,255,0.2); color: #ffffff; }

/* TỰ ĐỘNG ĐẨY TẦNG CÁC THẺ KHI CÓ KHỐI CƯỚC PHÍ NẰM DƯỚI CÙNG */
/* SỬA (Đợt 13): trước đây dùng độ cao cố định 64/124px (tính cho thẻ giá ~54px, chỉ 2-3 dòng) nên khi
   thẻ giá cao hơn (thêm dòng phụ thu giờ cao điểm + mã khuyến mãi + đặt lịch) thì đè lên thanh
   "3 Tài Xế Gần Nhất". Nay đọc độ cao THẬT của thẻ giá qua biến --price-card-h (do syncPriceCardHeight()
   trong tai-xe.js đo và gán); 54px là giá trị dự phòng đúng bằng độ cao cũ. */
body.has-price-card .bottom-main-bar {
  bottom: calc(var(--stack-bottom) + var(--price-card-h, 54px) + 10px) !important;
}

body.has-price-card .collapsible-drivers-panel {
  bottom: calc(var(--stack-bottom) + var(--price-card-h, 54px) + 70px) !important;
}

body.has-price-card .floating-controls-stack {
  bottom: calc(var(--stack-bottom) + var(--price-card-h, 54px) + 70px) !important;
}

.btn-drivers-toggle {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 8px rgba(0, 129, 58, 0.3);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-surface);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  animation: pulse-live 1.8s infinite;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.btn-drivers-toggle:active {
  transform: scale(0.96);
}

.btn-drivers-toggle.active {
  background: var(--color-toast-bg);
  color: var(--color-toast-text);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.3);
}

.btn-drivers-toggle.active .live-dot {
  background-color: var(--color-success);
  box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.8);
}

.arrow-icon {
  font-size: 12px;
  transition: transform 0.25s ease;
}

/* KHUNG 3 TÀI XẾ SỔ LÊN TRÊN KHI BẤM NÚT TÀI XẾ */
.collapsible-drivers-panel {
  position: fixed;
  bottom: calc(var(--stack-bottom) + 60px);
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  max-width: 460px;
  margin: 0 auto;
  z-index: 999;
  pointer-events: auto !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--color-surface);
  border-radius: 16px;
  /* QUAN TRỌNG: thiếu box-sizing:border-box khiến padding+border của trạng thái .show
     (12px*2 + 1px*2 = 26px) bị CỘNG THÊM vào width thay vì nằm TRONG width đã tính, làm
     khung rộng hơn dự kiến ~26px và tràn ra ngoài mép phải màn hình trên điện thoại hẹp
     (đã tái hiện và đo trực tiếp: panel rộng 380.67px trong viewport 375px). Mọi khung nổi
     khác trong file này (.bottom-main-bar, .price-card, .nav-sheet, ...) đều đã có dòng
     này, riêng khung này bị sót. */
  box-sizing: border-box;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.35s ease, bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.collapsible-drivers-panel.show {
  max-height: 55dvh !important;
  overflow-y: auto !important;
  opacity: 1;
  padding: 12px 12px 30px 12px;
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
}

.panel-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.radius-badge {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: normal;
}

/* NÚT ĐÓNG BẢNG 3 TÀI XẾ Ở MÉP TRÊN PANEL - SỬA (2026-09-23) */
.btn-close-drivers-panel {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 999px;
  border: none;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-drivers-panel:active {
  background: var(--color-surface-3);
}

/* LỚP NỀN MỜ PHÍA SAU BẢNG 3 TÀI XẾ - SỬA (2026-09-23): mờ dần bản đồ/giao diện phía sau khi bảng
   mở, bấm vào vùng trống này sẽ đóng bảng lại (xem toggleTop3Drivers() trong giao-dien.js). z-index
   thấp hơn panel (999) 1 bậc để nằm ĐÚNG PHÍA SAU panel nhưng vẫn PHỦ LÊN bản đồ/nút nổi/ô cước phí. */
.drivers-panel-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drivers-panel-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* GHIM CỐ ĐỊNH CHÍNH GIỮA MÀN HÌNH */
.fixed-center-pin {
  position: fixed;
  top: 50vh;
  top: 50dvh;
  left: 50vw;
  transform: translate(-50%, -100%);
  z-index: var(--z-center-pin);
  pointer-events: none;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fixed-center-pin .pin-svg {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  transition: transform 0.2s ease, fill 0.3s ease;
}

.fixed-center-pin .pin-shadow {
  width: 14px;
  height: 5px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  margin-top: -2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.map-moving .fixed-center-pin {
  transform: translate(-50%, -125%);
}
body.map-moving .fixed-center-pin .pin-shadow {
  transform: scale(0.4);
  opacity: 0.15;
}

.suggestion-item { 
  padding: 12px 14px; 
  font-size: 14px; 
  border-bottom: 1px solid var(--color-border); 
  cursor: pointer; 
  color: var(--color-text-secondary); 
  transition: background-color 0.15s ease;
}

.suggestion-item:last-child { 
  border-bottom: none; 
}

.suggestion-item:hover,
.suggestion-item.highlighted { 
  background: var(--color-primary-soft); 
  color: var(--color-primary-text); 
}



.btn-action-zalo {
  background: #0068ff;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 104, 255, 0.2);
}

.btn-action-zalo:active {
  transform: scale(0.95);
}

.btn-action-phone {
  background: var(--color-success);
  color: var(--color-on-success);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(21, 128, 61, 0.2);
}

.btn-action-phone:active {
  transform: scale(0.95);
}

.btn-action-rating {
  background: var(--color-warning);
  color: var(--color-on-warning);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.btn-action-rating:active {
  transform: scale(0.95);
}

/* THÊM (Đợt 15): nút "Theo dõi" trong popup tài xế + thẻ theo dõi nổi phía trên thanh dưới. */
.btn-action-track {
  background: var(--color-info);
  color: var(--color-on-info);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.btn-action-track:active { transform: scale(0.95); }

.tracking-card {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 10px;
  right: 10px;
  max-width: 460px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1.5px solid var(--color-info);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
  z-index: 2500;
  display: none;
  align-items: center;
  gap: 10px;
}

.tracking-card.show { display: flex; }
.tracking-card-info { flex: 1; min-width: 0; }
.tracking-card-title { font-size: 13px; font-weight: 800; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-card-sub { font-size: 12px; color: var(--color-info-text); font-weight: 700; margin-top: 2px; }
.tracking-card-time { font-size: 10.5px; color: var(--color-text-muted); margin-top: 1px; }

.tracking-card-stop {
  flex-shrink: 0;
  border: none;
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Khi khách đang nhập điểm đón/đến (chế độ tập trung nhập liệu) thì ẩn thẻ theo dõi để khỏi che ô nhập. */
body.focus-pickup .tracking-card,
body.focus-dest .tracking-card { display: none !important; }





.driver-avatar-img { 
  width: 42px; 
  height: 42px; 
  border-radius: 50%; 
  object-fit: cover; 
  border: 2px solid var(--color-primary); 
  flex-shrink: 0; 
  background: var(--color-surface-3); 
}

.top3-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible !important;
}

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

.top3-item.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 2px 8px rgba(0, 129, 58, 0.15);
}

/* POPUP MENU CHỌN KÊNH NHẮN TIN TỰ ĐỘNG THOÁT KHUÔN CẮT (POSITION FIXED) */

.contact-popover-menu {
  position: fixed;
  z-index: 999999;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
  box-sizing: border-box;
}

/* LEAFLET POPUP KHUNG TRÊN BẢN ĐỒ */
.leaflet-pane.leaflet-popup-pane {
  z-index: var(--z-popup) !important;
}

.leaflet-popup {
  z-index: var(--z-popup) !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-content {
  overflow: visible !important;
}

.contact-menu-item {
  padding: 7px 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.contact-menu-item .contact-icon {
  font-size: 13px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-menu-item:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}

/* CHẾ ĐỘ TỐI (DARK MODE) */


































































.custom-alert-overlay {
  position: fixed;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-alert-overlay.active {
  opacity: 1;
  visibility: visible;
}

.custom-alert-box {
  background: var(--glass-bg-solid);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  padding: 24px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.05);
  transform: scale(0.88) translateY(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-alert-overlay.active .custom-alert-box {
  transform: scale(1) translateY(0);
}

.custom-alert-icon {
  font-size: 42px;
  margin-bottom: 12px;
  line-height: 1;
  display: inline-block;
}

.custom-alert-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.custom-alert-msg {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
  white-space: pre-line;
  font-weight: 500;
}

.custom-alert-btn {
  background: var(--grad-primary);
  color: var(--color-on-primary);
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 129, 58, 0.35);
  transition: all 0.2s ease;
}

.custom-alert-btn:active {
  transform: scale(0.97);
}

/* HỘP THOẠI DÙNG CHUNG (2026-09-23) - form bên trong openGenericModal() */
.generic-modal-box {
  max-width: 360px;
  max-height: 85dvh;
  overflow-y: auto;
}

.generic-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.generic-modal-sub {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.generic-modal-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin: 12px 0 6px 0;
  display: block;
}

.generic-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 12px;
  font-size: 13.5px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
  background: var(--color-surface);
  color: var(--color-text);
}

.generic-modal-input:focus {
  border-color: var(--color-primary);
}

.generic-modal-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.generic-modal-pill {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 10px 8px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: var(--color-surface);
  transition: 0.15s;
}

.generic-modal-pill.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.generic-modal-star-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-size: 32px;
  margin: 8px 0 16px 0;
  cursor: pointer;
}

.generic-modal-star {
  color: var(--color-border-strong);
  transition: transform 0.1s, color 0.15s;
}

.generic-modal-star.filled {
  color: var(--color-warning);
}

.generic-modal-star:active {
  transform: scale(1.15);
}

.generic-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.generic-modal-actions .custom-alert-btn {
  flex: 1;
  margin: 0;
  font-size: 13px;
  padding: 11px 14px;
}

.generic-modal-btn-secondary {
  background: var(--color-surface-3) !important;
  color: var(--color-text-secondary) !important;
}

.generic-modal-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.generic-modal-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.generic-modal-checkbox-row a {
  color: var(--color-primary-text);
  font-weight: 600;
}







/* THÊM (Đợt 12): chat trong app - khung tin nhắn + bong bóng chat 2 chiều. */
.chat-message-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 45vh;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 10px;
}

.chat-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.chat-bubble-customer {
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-right-radius: 4px;
}

.chat-bubble-driver {
  align-self: flex-start;
  background: var(--color-surface-2);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}

.chat-bubble-time {
  font-size: 9.5px;
  opacity: 0.7;
  margin-top: 3px;
  display: block;
}

.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-input-row .generic-modal-input {
  flex: 1;
  min-width: 0;
  margin: 0;
}



/* RENDER BẢN ĐỒ */
/* SỬA LỖI "VÙNG XÁM QUÁ NHIỀU" TRÊN BẢN ĐỒ: quy tắc này (có !important) đang ĐÈ LÊN màu nền be
   #e8e6e1 đã cố tình chọn ở #map bên trên (dòng ghi chú "đổi sang đúng tông be nhạt... để chỗ chưa
   tải xong lẫn vào bản đồ") - vì .leaflet-container là phần tử Leaflet tạo THÊM bên trong #map và
   phủ kín 100% nó, nên màu #f1f5f9 (xám nhạt) ở đây mới thực sự là màu người dùng nhìn thấy ở mọi
   chỗ mảnh bản đồ chưa kịp tải, mạng chậm, hoặc mảnh bị lỗi - không phải màu be như ý định ban đầu.
   Đổi lại đúng 1 màu be #e8e6e1 để đồng bộ với #map, chỗ chưa tải xong lẫn vào nền thay vì lộ mảng
   xám rõ rệt (đặc biệt dễ thấy khi mở trên trình duyệt web, chưa có sẵn cache mảnh bản đồ từ trước
   như lúc mở app đã cài, nên phải chờ tải nhiều mảnh cùng lúc). */
.leaflet-container {
  background-color: var(--map-land) !important;
}



.leaflet-map-pane {
  will-change: transform;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.leaflet-tile-container {
  will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  will-change: transform;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

body.focus-pickup .btn-confirm-select,
body.focus-dest .btn-confirm-select,
body.selecting-pickup.focus-pickup .btn-confirm-select,
body.selecting-dest.focus-pickup .btn-confirm-select,
body.selecting-pickup.focus-dest .btn-confirm-select,
body.selecting-dest.focus-dest .btn-confirm-select,
body.focus-pickup .floating-controls-stack,
body.focus-dest .floating-controls-stack,
body.focus-pickup .bottom-main-bar,
body.focus-dest .bottom-main-bar,
body.focus-pickup .collapsible-drivers-panel,
body.focus-dest .collapsible-drivers-panel,
body.focus-pickup .recent-dests-block,
body.focus-dest .recent-dests-block,
body.focus-pickup .price-card,
body.focus-dest .price-card,
body.focus-pickup .route-divider,
body.focus-dest .route-divider,
body.focus-pickup .dest-group,
body.focus-dest .pickup-group {
  display: none !important;
}

.top-menu-option {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-menu-option:hover {
  background: var(--color-surface-2);
  color: var(--color-primary-text);
}







body.selecting-pickup .btn-confirm-select {
  background: var(--color-danger) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

body.selecting-dest .btn-confirm-select {
  background: var(--color-info) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* ============================================================================
   LỚP PHỦ "ĐANG TÌM TÀI XẾ..." - NÚT 1 "TÌM TÀI XẾ" TRÊN THANH ĐIỀU HƯỚNG
   ============================================================================ */









/* ============================================================================
   DÒNG LIÊN HỆ TRONG TRANG "LIÊN HỆ GẦN ĐÂY" (nav-sheet-item mở rộng thêm avatar + 2 nút nhanh)
   ============================================================================ */
.contact-item {
  cursor: default;
}

.contact-item-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.contact-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.contact-item-actions .btn-action-phone,
.contact-item-actions .btn-action-zalo {
  padding: 7px 9px;
  font-size: 13px;
}

/* ============================================================================
   "DANH BẠ TÀI XẾ" MỞ RỘNG BÊN TRONG BẢNG NỔI (7 tài xế/loại xe, ngoài 3 tài xế gần nhất)
   ============================================================================ */

.directory-item {
  cursor: default;
}







/* ============================================================================
   BANNER "TRỞ THÀNH TÀI XẾ AVYO" - MỤC ĐẦU TIÊN TRONG TRANG TIỆN ÍCH
   ============================================================================ */
.driver-cta-banner {
  position: relative;
  overflow: hidden;
  margin: 4px 4px 16px 4px;
  padding: 18px 16px;
  border-radius: 18px;
  background: var(--grad-brand);
  box-shadow: 0 8px 22px rgba(0, 129, 58, 0.32);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.driver-cta-banner:active {
  transform: scale(0.98);
  box-shadow: 0 4px 14px rgba(0, 129, 58, 0.28);
}

.driver-cta-decor {
  position: absolute;
  font-size: 64px;
  opacity: 0.16;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.driver-cta-decor-1 {
  right: -6px;
  bottom: -14px;
  transform: rotate(-8deg);
}

.driver-cta-decor-2 {
  right: 58px;
  top: -18px;
  font-size: 46px;
  transform: rotate(10deg);
}

.driver-cta-content {
  position: relative;
  z-index: 1;
  max-width: 78%;
}

.driver-cta-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.driver-cta-title {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.25;
}

.driver-cta-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.45;
  margin-bottom: 12px;
}

.driver-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  color: var(--color-primary-text);
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.driver-cta-btn span {
  transition: transform 0.2s ease;
}

.driver-cta-banner:active .driver-cta-btn span {
  transform: translateX(3px);
}



/* THẺ "247 VAY QUA ĐĂNG KÝ Ô TÔ, XE MÁY" (2026-09-23) - SỬA LẦN 2: đổi hẳn từ banner gradient to
   (dễ nhầm với banner "Trở thành Tài xế Avyo") sang thẻ nhỏ gọn, nghiêm túc kiểu dịch vụ tài
   chính/ngân hàng - nền trắng + viền trái vàng đồng, khác biệt cả về HÌNH DẠNG chứ không chỉ màu. */
.loan-finance-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-warning);
  border-radius: 14px;
  padding: 14px 14px 14px 12px;
  margin: 4px 4px 16px 4px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.loan-finance-card:active {
  transform: scale(0.98);
  background: var(--color-warning-soft);
}

.loan-finance-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-warning-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.loan-finance-text {
  flex: 1;
  min-width: 0;
}

.loan-finance-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.loan-finance-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.loan-finance-arrow {
  font-size: 20px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}









/* ============================================================================
   CỠ CHỮ TỐI THIỂU 16px CHO MỌI Ô NHẬP TRÊN THIẾT BỊ CẢM ỨNG (BẮT BUỘC)
   ============================================================================
   iPhone/iPad TỰ ĐỘNG PHÓNG TO cả trang mỗi khi khách chạm vào 1 ô nhập có cỡ chữ NHỎ HƠN 16px.
   Đây là hành vi cố định của iOS, KHÔNG tắt được bằng CSS, và mức phóng to đó GIỮ NGUYÊN cả sau
   khi đã đóng bàn phím - trang bị "trôi" ra ngoài khung màn hình, phần bên phải bị khuất mất.
   Trước đây iOS bị chặn nhờ "maximum-scale=1.0, user-scalable=no" trong thẻ viewport, nhưng chính
   2 thuộc tính đó lại là thứ làm BÀN PHÍM ẢO KHÔNG HIỆN trong nhiều WebView nên đã buộc phải gỡ.
   Cách xử lý đúng (và thực tế là cách duy nhất) là để mọi ô nhập từ 16px trở lên: iOS không còn lý
   do phóng to, trang luôn vừa khít màn hình, mà bàn phím vẫn hiện bình thường.
   Chỉ áp dụng cho thiết bị cảm ứng (pointer: coarse) nên giao diện trên máy tính không bị to ra. */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================================================
   UI V2 (ĐỢT 3) - HÌNH THỨC MỚI CHO KHUNG CHÍNH CỦA APP KHÁCH
   Chỉ đổi HÌNH THỨC (màu qua token, bo góc, bóng, kính mờ, icon SVG, chuyển động). BỐ CỤC/ĐỊNH VỊ và
   mọi bản vá bàn phím ảo / safe-area / WebView ở trên được GIỮ NGUYÊN. Mỗi khối dưới đây THAY THẾ phần
   hình thức của các luật cùng tên phía trên (sẽ dọn các luật bị thay thế ở Đợt 7).
   LƯU Ý QUAN TRỌNG: KHÔNG đặt backdrop-filter/filter/transform lên .route-card hay .bottom-section -
   khi vào chế độ focus, .pickup-group/.dest-group là position:fixed BÊN TRONG .route-card; tổ tiên có
   backdrop-filter sẽ biến thành "khung tham chiếu" của phần tử fixed và phá vỡ bản vá đã có. Vì vậy
   kính mờ của .route-card được vẽ bằng ::before (anh em, không phải tổ tiên).
   ============================================================================ */

/* ---------- Nền & bản đồ ---------- */
#map, .leaflet-container { background-color: var(--map-land) !important; }
@media (min-width: 481px) {
  html { background-color: var(--color-surface-3); }
  #map { box-shadow: var(--shadow-3); }
}

/* ---------- Thanh mất mạng ---------- */
.network-offline-bar { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); }

/* ---------- Thanh điều hướng dưới: kính mờ + chỉ báo trượt ---------- */
.app-bottom-nav {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-top: 1px solid var(--glass-border);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-4);
  --i: 0;
}
/* viên thuốc chỉ báo: trượt ngang theo --i (do js/ui/indicator.js cập nhật theo nút .active) */
.app-bottom-nav::before {
  content: '';
  position: absolute;
  top: 8px;
  left: calc(12.5% - 30px + 25% * var(--i, 0));
  width: 60px;
  height: 32px;
  border-radius: 16px;
  background: var(--color-primary-soft-2);
  transition: left .42s var(--ease-spring);
  pointer-events: none;
}
.app-bottom-nav .nav-item { color: var(--color-text-muted); gap: 4px; z-index: 1; }
.app-bottom-nav .nav-item::before { display: none; }              /* bỏ vạch chỉ báo đầu nút kiểu cũ */
.app-bottom-nav .nav-item.active { color: var(--color-primary-text); }
.app-bottom-nav .nav-icon { width: 60px; height: 32px; border-radius: 16px; }
.app-bottom-nav .nav-item.active .nav-icon { background: transparent; transform: none; }
.app-bottom-nav .nav-item.active .nav-icon > * { animation: av-pop .45s var(--ease-overshoot); }
.app-bottom-nav .nav-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.app-bottom-nav .nav-label { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.app-bottom-nav .nav-item:focus-visible { outline: none; }
.app-bottom-nav .nav-item:focus-visible .nav-icon { box-shadow: 0 0 0 3px var(--color-focus); }
.app-bottom-nav .nav-badge {
  top: 6px; left: calc(50% + 8px); margin-left: 0;
  min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; font-weight: 800;
  background: var(--color-danger); color: var(--color-on-danger); border: 2px solid var(--color-surface);
}

/* ---------- Thẻ nhập điểm đón / điểm đến ---------- */
.route-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 22px;
  padding: 6px 10px 6px 12px;
  isolation: isolate;
}
.route-card::before {                                              /* lớp kính mờ (KHÔNG đặt trên chính .route-card) */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 22px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-3);
  pointer-events: none;
}
.route-card::after {                                               /* đường chấm nối điểm đón -> điểm đến */
  content: '';
  position: absolute;
  left: 21px;
  top: 44px;
  height: 26px;
  border-left: 2px dotted var(--color-border-strong);
  pointer-events: none;
}
body.focus-pickup .route-card::before, body.focus-dest .route-card::before,
body.focus-pickup .route-card::after, body.focus-dest .route-card::after { display: none !important; }

.route-input-item { min-height: 52px; }
.route-icon { width: 20px; height: 20px; margin-right: 10px; }
.route-icon svg { width: 20px; height: 20px; }
.dest-icon { color: var(--color-dest); }
.route-divider { margin: 0 4px 0 34px; background: var(--color-border); }
.route-input-item input { font-weight: 600; color: var(--color-text); text-overflow: ellipsis; padding: 10px 0; }
.route-input-item input::placeholder { color: var(--color-text-muted); font-weight: 500; opacity: 1; }
.btn-back-focus { color: var(--color-text); }

.btn-pickup-detail {
  position: relative;
  height: 32px;
  padding: 0 10px;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
}
.btn-pickup-detail::after { content: ''; position: absolute; inset: -7px -3px; }   /* vùng chạm ≥44px */
.btn-pickup-detail:hover { background: var(--color-surface-3); color: var(--color-text); border: 0; }
.btn-pickup-detail.has-note { background: var(--color-primary-soft); color: var(--color-primary-text); border: 0; }
.btn-swap-route, .btn-reset-icon {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; color: var(--color-text-secondary);
}
.btn-swap-route:hover, .btn-reset-icon:hover { background: var(--color-surface-2); border: 0; color: var(--color-text); }
.btn-swap-route:active, .btn-reset-icon:active { background: var(--color-surface-3); }
.btn-swap-route svg, .btn-reset-icon svg { width: 20px; height: 20px; }

/* chế độ focus (chỉ đổi hình thức, KHÔNG đổi định vị) */
body.focus-pickup .pickup-group, body.focus-dest .dest-group {
  border-radius: 18px !important;
  box-shadow: var(--shadow-3) !important;
  min-height: 52px !important;
}

/* danh sách gợi ý địa chỉ */
.suggestions-list, .recent-dests-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-3);
  padding: 6px;
}
.suggestions-list { overflow-y: auto; }
.recent-dests-block { overflow: hidden; }
.suggestion-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 10px;
  border-radius: 14px; border-bottom: 0;
  font-size: 15px; line-height: 1.3; color: var(--color-text);
}
.suggestion-item:hover, .suggestion-item.highlighted { background: var(--color-primary-soft); color: var(--color-text); }
.suggest-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-text); }
.suggest-ic--muted { background: var(--color-surface-2); color: var(--color-text-secondary); }
.suggest-tx { display: grid; min-width: 0; }
.suggest-tx b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-tx small { font-size: 13px; color: var(--color-text-muted); }
.suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.suggest-head small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.suggestion-loading { display: flex; align-items: center; gap: 8px; }

/* ---------- Ghim giữa màn hình ---------- */
.fixed-center-pin { color: var(--color-pickup); }
.fixed-center-pin.is-dest { color: var(--color-dest); }
.fixed-center-pin .pin-svg { fill: currentColor; filter: drop-shadow(0 6px 6px rgba(16, 40, 28, .28)); }
.fixed-center-pin .pin-shadow { background: rgba(16, 40, 28, .3); }

/* ---------- Nút xác nhận chọn vị trí trên bản đồ + dòng hướng dẫn ---------- */
.btn-confirm-select {
  height: 52px; padding: 0 24px; border-radius: 16px;
  background: var(--grad-primary); color: var(--color-on-primary);
  font-size: 17px; font-weight: 700; letter-spacing: 0;
  box-shadow: var(--shadow-inset-hi), var(--shadow-primary);
}
body.selecting-pickup .btn-confirm-select { background: var(--grad-primary) !important; color: var(--color-on-primary) !important; box-shadow: var(--shadow-inset-hi), var(--shadow-primary) !important; }
body.selecting-dest .btn-confirm-select { background: var(--grad-accent) !important; color: var(--color-on-accent) !important; box-shadow: var(--shadow-inset-hi), var(--shadow-accent) !important; }
.map-select-notice { border: 1px solid var(--glass-border); border-radius: 18px; padding: 12px 16px; font-size: 15px; font-weight: 600; box-shadow: var(--shadow-3); }

/* ---------- Nút nổi GPS / SOS ---------- */
.floating-controls-stack { gap: 12px; }
.btn-gps-float, .btn-sos-float { width: 52px; height: 52px; border-radius: 50%; }
.btn-gps-float {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-3);
  color: var(--color-text);
}
.btn-gps-float:hover { background: var(--glass-bg-solid); color: var(--color-primary-text); transform: none; }
.btn-gps-float:active { transform: scale(.92); }
.btn-sos-float {
  background: var(--color-danger); color: var(--color-on-danger);
  border: 0; font-size: 14px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 10px 22px -8px var(--color-danger), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- Hàng dưới: "tài xế gần nhất" + chọn loại xe ---------- */
.bottom-main-bar {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 8px;
  height: var(--bar-h);
  pointer-events: none !important;                                 /* vùng trống không chặn kéo bản đồ */
}
.bottom-main-bar > *, .right-vehicle-price-container, .quick-vehicle-bar, .btn-drivers-toggle { pointer-events: auto; }
body.has-price-card .bottom-main-bar { bottom: var(--stack-bottom) !important; }   /* thẻ giá nay nằm PHÍA TRÊN hàng này */
.btn-drivers-toggle {
  flex: 1 1 auto; min-width: 0; height: var(--bar-h);
  padding: 0 14px; justify-content: center; gap: 8px;
  border-radius: 16px;
  background: var(--grad-primary); color: var(--color-on-primary);
  font-size: 15px; font-weight: 700;
  box-shadow: var(--shadow-inset-hi), var(--shadow-primary);
  -webkit-tap-highlight-color: transparent;
}
.btn-drivers-toggle { position: relative; padding: 0 14px; text-align: left; }
.btn-drivers-toggle > span:not(.live-dot):not(.arrow-icon) { white-space: normal; line-height: 1.15; font-size: 14px; }
.btn-drivers-toggle .live-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; }
@media (max-width: 340px) { .btn-drivers-toggle > .av-i { display: none; } }   /* màn hình rất hẹp: bỏ icon để đủ chỗ */
.btn-drivers-toggle:active { transform: scale(.97); }
.btn-drivers-toggle.active { background: var(--color-toast-bg); color: var(--color-toast-text); box-shadow: var(--shadow-2); }
.btn-drivers-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-focus); }
.btn-drivers-toggle .av-icon { flex: none; }
.right-vehicle-price-container { flex: none; }
.quick-vehicle-bar {
  position: relative;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-3);
  --i: 0;
}
.quick-vehicle-bar::before {                                        /* thumb trượt (theo --i do indicator.js cập nhật) */
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 44px; height: 44px;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
  transform: translateX(calc(var(--i, 0) * 44px));
  transition: transform .38s var(--ease-spring);
}
.btn-vehicle-tab {
  position: relative; z-index: 1;
  width: 44px; height: 44px; padding: 0;
  border-radius: 16px;
  color: var(--color-text-muted);
  -webkit-tap-highlight-color: transparent;
}
.btn-vehicle-tab.active { background: transparent; color: var(--color-primary-text); box-shadow: none; }
.btn-vehicle-tab.active .av-icon { animation: av-pop .4s var(--ease-overshoot); }
.btn-vehicle-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.live-dot { background-color: currentColor; }

/* ---------- Thẻ giá cước (nằm trên hàng "tài xế gần nhất") ---------- */
.price-card {
  bottom: calc(var(--stack-bottom) + var(--bar-h) + 10px);
  max-width: 360px; width: calc(100% - 24px);
  padding: 14px 16px 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  box-shadow: var(--shadow-3);
}
.price-info { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; width: 100%; }
.price-card { padding: 12px 12px; }
.price-amount {
  flex: 0 0 auto; text-align: center;
  font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.price-peak-note { order: 5; }                                      /* dòng phụ thu dài -> xuống hàng cuối để các chip khác xếp gọn */
.price-amount small { font-size: 18px; font-weight: 700; margin-left: 2px; letter-spacing: 0; color: var(--color-accent-text); }
.price-sub, .price-peak-note, .price-promo-note, .price-schedule-note {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; margin: 0; padding: 0 9px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1;
  background: var(--color-surface-2); color: var(--color-text-secondary);
}
.price-sub:empty { display: none; }
.price-peak-note { background: var(--color-warning-soft); color: var(--color-warning-text); }
.price-promo-note { position: relative; background: var(--color-accent-soft); color: var(--color-accent-text); cursor: pointer; }
.price-schedule-note { position: relative; cursor: pointer; }
.price-promo-note::after, .price-schedule-note::after { content: ''; position: absolute; inset: -7px -3px; }
.price-sub::before {                                                /* icon "quãng đường" bằng mask - không cần đổi JS */
  content: ''; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='18' r='2.2'/><circle cx='18' cy='6' r='2.2'/><path d='M8.2 18h5.3a3 3 0 0 0 0-6h-3a3 3 0 0 1 0-6h5.3'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='18' r='2.2'/><circle cx='18' cy='6' r='2.2'/><path d='M8.2 18h5.3a3 3 0 0 0 0-6h-3a3 3 0 0 1 0-6h5.3'/></svg>") center / contain no-repeat;
}

/* ---------- Bảng "tài xế gần nhất" + nút nổi: xếp trên thẻ giá ---------- */
.collapsible-drivers-panel { bottom: calc(var(--stack-bottom) + var(--bar-h) + 10px); }
body.has-price-card .collapsible-drivers-panel { bottom: calc(var(--stack-bottom) + var(--bar-h) + var(--price-card-h, 54px) + 20px) !important; }
.floating-controls-stack { bottom: calc(var(--stack-bottom) + var(--bar-h) + 10px); }
body.has-price-card .floating-controls-stack { bottom: calc(var(--stack-bottom) + var(--bar-h) + var(--price-card-h, 54px) + 20px) !important; }
.collapsible-drivers-panel {
  background: var(--color-surface);
  border-radius: 24px;
}
.collapsible-drivers-panel.show {
  padding: 14px 14px 30px 14px;                                     /* tổng 44px: khớp hằng +44 trong updateGpsButtonPosition() */
  border: 0;
  box-shadow: var(--shadow-4);
  /* không cao quá khoảng trống từ đáy bảng lên tới thẻ nhập điểm đón/đến (chừa ~150px phía trên).
     Cùng công thức với updateGpsButtonPosition() trong giao-dien.js để nút GPS/SOS luôn nằm ngay trên bảng. */
  max-height: min(55dvh, calc(100dvh - (var(--stack-bottom) + var(--bar-h) + 10px) - 150px)) !important;
}
body.has-price-card .collapsible-drivers-panel.show {
  max-height: min(55dvh, calc(100dvh - (var(--stack-bottom) + var(--bar-h) + var(--price-card-h, 54px) + 20px) - 150px)) !important;
}
body.nav-sheet-open .app-bottom-nav { border-radius: 0; }          /* bảng trượt đang mở: nav "dính" liền với bảng, không lộ góc bo */
.panel-header { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
.radius-badge {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--color-primary-soft); color: var(--color-primary-text); font-size: 12px; font-weight: 600;
}
.btn-close-drivers-panel { position: relative; width: 36px; height: 36px; min-width: 36px; background: var(--color-surface-2); color: var(--color-text-secondary); }
.btn-close-drivers-panel::after { content: ''; position: absolute; inset: -4px; }   /* vùng chạm 44px */
.btn-close-drivers-panel:active { background: var(--color-surface-3); }

/* thẻ tài xế trong bảng */
.top3-item {
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--color-border); border-radius: 18px;
  background: var(--color-surface); box-shadow: var(--shadow-1);
}
.top3-item.selected { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 2px var(--color-primary-soft-2); }
.driver-avatar-img { width: 44px; height: 44px; border: 2px solid var(--color-primary-soft-2); background: var(--color-surface-3); }
.t3-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; cursor: pointer; }
.t3-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.t3-info { min-width: 0; }
.t3-name { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t3-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--color-text-muted); }
.t3-meta b { color: var(--color-text-secondary); font-weight: 600; }
.t3-rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--color-text); }
.t3-rating .av-icon { color: var(--color-warning); }
.t3-eta { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--color-primary-soft); color: var(--color-primary-text); }
.t3-go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-text); }
.t3-empty { display: grid; justify-items: center; gap: 4px; padding: 6px 10px 2px; text-align: center; }
.t3-empty .av-art { width: 132px; }
.t3-empty b { font-size: 15px; color: var(--color-text); }
.t3-empty small { font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }

/* ---------- Popup tài xế trên bản đồ ---------- */
.leaflet-popup-content-wrapper { background: var(--color-surface); color: var(--color-text); border-radius: 20px; box-shadow: var(--shadow-3); }
.leaflet-popup-tip { background: var(--color-surface); box-shadow: none; }
.leaflet-container a.leaflet-popup-close-button { color: var(--color-text-muted); }
.btn-action-zalo, .btn-action-phone, .btn-action-rating, .btn-action-track { border-radius: 12px; box-shadow: none; font-weight: 600; }

/* ---------- Marker bản đồ (icon SVG, xem js/ui/icons.js markerHtml) ---------- */
.leaflet-marker-icon.av-marker-wrap { background: transparent; border: 0; }
.av-lead-head {
  width: 14px; height: 14px; box-sizing: border-box;
  background: #ffffff; border: 3px solid var(--color-brand); border-radius: 50%;
  box-shadow: 0 0 10px var(--color-brand), 0 0 18px var(--color-brand-bright);
  transform: translate(-50%, -50%);
}

/* ---------- Máy yếu: bỏ kính mờ (nền đặc) ---------- */
:root[data-perf="low"] .app-bottom-nav,
:root[data-perf="low"] .route-card::before,
:root[data-perf="low"] .btn-gps-float,
:root[data-perf="low"] .quick-vehicle-bar,
:root[data-perf="low"] .price-card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ============================================================================
   UI V2 (ĐỢT 4) - bảng trượt, hộp thoại, SOS, theo dõi, banner nhắc lịch, trạng thái trống,
   splash + onboarding. Đặt CUỐI FILE nên ghi đè các luật cũ cùng tên (luật cũ dọn ở Đợt 7).
   Chỉ dùng token (tokens.css) - không hex; ngoại lệ duy nhất: màu thương hiệu bên thứ ba (Zalo, Facebook...).
   ============================================================================ */
:root { --toast-bottom: calc(var(--nav-total) + 14px); }

/* Khung đo (border-box) cho toàn bộ phần Đợt 4 - tránh phần tử width:100% + padding tràn ra ngoài */
.nav-sheet, .nav-sheet *, .custom-alert-box, .custom-alert-box *, .av-onb, .av-onb *, .tracking-card, .tracking-card *,
.scheduled-reminder-banner, .scheduled-reminder-banner *, .contact-popover-menu, .contact-popover-menu *, .sos-viewer, .sos-viewer * { box-sizing: border-box; }
.av-empty__title, .av-onb__title, .custom-alert-title, .custom-alert-msg, .av-onb__text, .nav-sheet-radar p { text-wrap: balance; }

/* ---------- Chip icon theo sắc thái (dùng chung cho ô icon trong bảng, hộp thoại, tiêu đề) ---------- */
.tone-brand   { background: var(--color-primary-soft); color: var(--color-primary-text); }
.tone-accent  { background: var(--color-accent-soft); color: var(--color-accent-text); }
.tone-danger  { background: var(--color-danger-soft); color: var(--color-danger-text); }
.tone-info    { background: var(--color-info-soft); color: var(--color-info-text); }
.tone-success { background: var(--color-success-soft); color: var(--color-success-text); }
.tone-warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.tone-muted   { background: var(--color-surface-3); color: var(--color-text-secondary); }

/* ---------- Bảng trượt (nav sheet) ---------- */
.nav-sheet-overlay { background: var(--color-overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nav-sheet {
  max-width: 480px;   /* khớp bề rộng thanh nav dưới trên màn rộng */
  padding: 6px 16px 10px;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--glass-bg-solid);
  border: 1px solid var(--glass-border);
  border-bottom: 0;
  box-shadow: var(--shadow-4);
  max-height: min(78dvh, calc(100dvh - var(--nav-total) - 16px));
  outline: 0;
  transition: transform .5s var(--ease-spring), visibility 0s linear .5s;
}
.nav-sheet.active { transition: transform .5s var(--ease-spring), visibility 0s linear 0s; }
.nav-sheet-handle { width: 40px; height: 5px; margin: 4px auto 8px; border-radius: 3px; background: var(--color-border-strong); }
.nav-sheet-header { padding: 2px 2px 10px; border-bottom: 0; gap: 12px; }
.nav-sheet-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.nav-sheet-title .av-icon { flex: none; color: var(--color-primary-text); }
.nav-sheet-close {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-text-secondary);
}
.nav-sheet-close::after { content: ''; position: absolute; inset: -4px; }
.nav-sheet-close:active { background: var(--color-surface-3); transform: scale(.94); }
.nav-sheet-close:focus-visible, .gm-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.nav-sheet-body { padding: 2px 0 8px; overscroll-behavior: contain; }
.nav-sheet-group-title { padding: 16px 6px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--color-text-muted); }
.nav-sheet-body > .nav-sheet-group-title:first-child { padding-top: 6px; }

.nav-sheet-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: 22px;
  background: var(--color-surface); box-shadow: var(--shadow-1);
}
.nav-sheet-card > .nav-sheet-item { border-radius: 0; }
.nav-sheet-card > .nav-sheet-item + .nav-sheet-item::before,
.nav-sheet-card > .nav-sheet-skeleton .nav-sheet-skel + .nav-sheet-skel::before {
  content: ''; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--color-border);
}

.nav-sheet-item {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 14px;
  border: 0; border-radius: 18px; background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.nav-sheet-item:active { background: var(--color-primary-soft); transform: scale(.985); }
.nav-sheet-item:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-focus); }
.nav-sheet-item-icon {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 0;
  background: var(--color-primary-soft); color: var(--color-primary-text);
}
.nav-sheet-item-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nav-sheet-item-main {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  white-space: normal; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--color-text);
}
.nav-sheet-item-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  white-space: normal; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--color-text-muted);
}
.nav-sheet-item-arrow { flex: none; display: grid; place-items: center; font-size: 0; color: var(--color-text-muted); }
.nav-sheet-item.is-past { opacity: .6; }
.nav-sheet-item--center { justify-content: center; }
.nav-sheet-item--danger {
  justify-content: center; gap: 10px; min-height: 52px; margin-top: 12px; border-radius: 16px;
  background: var(--color-danger-soft); color: var(--color-danger-text); font-size: 15px; font-weight: 700;
}
.nav-sheet-item--danger:active { background: var(--color-danger-soft); filter: brightness(.96); }
.nav-sheet-item--add .nav-sheet-item-main { color: var(--color-primary-text); }
.nav-sheet-item--provider { border-radius: 0; }
.ns-icon-btn {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px;
  display: grid; place-items: center; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 0;
}
.ns-icon-btn:hover, .ns-icon-btn:active { background: var(--color-danger-soft); color: var(--color-danger-text); }
.ns-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.ns-inline-ic { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.ns-star { color: var(--color-warning); }

/* Ô bento (tiện ích nhanh) */
.nav-sheet-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 2px; }
.nav-sheet-item--tile {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; min-height: 0; padding: 14px;
  border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); box-shadow: var(--shadow-1);
}
.nav-sheet-item--tile .nav-sheet-item-main { font-size: 15px; line-height: 1.25; }
.nav-sheet-item--tile .nav-sheet-item-sub { -webkit-line-clamp: 3; font-size: 12.5px; }
.nav-sheet-item--tile .nav-sheet-item-icon { width: 44px; height: 44px; }

/* Công tắc hình trong dòng cài đặt */
.nsw { position: relative; flex: none; width: 52px; height: 32px; border-radius: 16px; background: var(--color-input-border); transition: background var(--dur-base) var(--ease-standard); }
.nsw i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-2); transition: transform .3s var(--ease-overshoot); }
.nsw.is-on { background: var(--color-primary); }
.nsw.is-on i { transform: translateX(20px); }

.nav-sheet-version { padding: 18px 0 6px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--color-text-muted); }

/* Trạng thái trống / ghi chú / khung chờ / radar */
.nav-sheet-empty { padding: 12px 8px; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }
.nav-sheet-empty.av-empty { gap: 4px; padding: 16px 8px; }
.nav-sheet-empty .av-empty__art { width: 150px; }
.nav-sheet-empty .av-empty__title { font-size: 17px; line-height: 1.35; }
.nav-sheet-empty .av-empty__text { max-width: 32ch; font-size: 15px; margin: 0; }
.nav-sheet-note { padding: 14px 16px; text-align: center; font-size: 14px; line-height: 1.45; color: var(--color-text-muted); }
.nav-sheet-info { margin: 2px 0 12px; }
.nav-sheet-skeleton { position: relative; border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); overflow: hidden; }
.nav-sheet-skel { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; }
.nav-sheet-skel .av-skeleton--circle { flex: none; width: 44px; height: 44px; }
.nav-sheet-skel__lines { flex: 1; display: grid; gap: 9px; }
.nav-sheet-radar { display: grid; justify-items: center; gap: 12px; padding: 14px 0 8px; }
.nav-sheet-radar p { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text-secondary); text-align: center; }

/* Danh sách tài xế / liên hệ trong bảng */
.nav-sheet-item .driver-avatar-img, .contact-item-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.contact-item { cursor: default; }
.contact-item-actions { display: flex; gap: 8px; flex: none; }
.contact-item-actions .btn-action-phone, .contact-item-actions .btn-action-zalo {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; display: grid; place-items: center; font-size: 0; cursor: pointer;
  box-shadow: none; -webkit-tap-highlight-color: transparent;
}
.contact-item-actions .btn-action-phone { background: var(--color-success-soft); color: var(--color-success-text); }
.contact-item-actions .btn-action-zalo  { background: var(--color-primary-soft); color: var(--color-primary-text); }
.contact-item-actions button:active { transform: scale(.92); }
.contact-item-actions button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }

/* FAQ hỗ trợ */
.support-faq-item { margin: 0 0 8px; padding: 0; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); overflow: hidden; }
.support-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; font-size: 16px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.support-faq-item summary::after { float: none; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-text); font-size: 18px; line-height: 1; }
.support-faq-item summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-focus); }
.support-faq-answer { margin: 0; padding: 0 16px 16px; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }

/* Banner "Trở thành tài xế" - nền teal đậm cố định ở cả sáng/tối để chữ trắng luôn đạt AA */
.driver-cta-banner {
  margin: 0 0 6px; padding: 18px 18px 18px 18px; border-radius: 24px;
  background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-900) 100%); color: #fff;
  box-shadow: 0 14px 30px -14px var(--teal-800);
}
.driver-cta-banner:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.driver-cta-decor { color: #fff; opacity: .16; font-size: 0; line-height: 0; filter: none; }
.driver-cta-decor-1 { right: -8px; bottom: -12px; transform: rotate(-8deg); }
.driver-cta-decor-2 { right: 64px; top: -14px; transform: rotate(10deg); }
.driver-cta-content { max-width: 82%; }
.driver-cta-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #fff; }
.driver-cta-title { margin-bottom: 4px; font-size: 20px; line-height: 1.25; color: #fff; }
.driver-cta-sub { margin-bottom: 14px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.94); }
.driver-cta-btn { min-height: 44px; padding: 0 16px 0 18px; gap: 4px; border-radius: 999px; background: #fff; color: var(--teal-800); font-size: 15px; font-weight: 700; box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); }
.driver-cta-banner:active .driver-cta-btn .av-icon { transform: translateX(3px); }
.driver-cta-btn .av-icon { transition: transform .2s var(--ease-standard); }

/* Thẻ vay 247 - thẻ nhỏ, nghiêm túc, viền trái vàng đồng (khác hẳn banner tuyển tài xế) */
.loan-finance-card { margin: 16px 0 4px; padding: 14px 12px 14px 14px; border-radius: 20px; border-left-width: 5px; box-shadow: var(--shadow-1); }
.loan-finance-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.loan-finance-icon { width: 44px; height: 44px; font-size: 0; color: var(--color-warning-text); }
.loan-finance-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.loan-finance-sub { font-size: 13.5px; }
.loan-finance-arrow { font-size: 0; display: grid; place-items: center; }

/* ---------- Hộp thoại (alert / confirm / hộp thoại dùng chung) ---------- */
.custom-alert-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.custom-alert-box {
  position: relative; max-width: 380px; padding: 24px 20px 20px; border: 1px solid var(--glass-border); border-radius: 28px;
  background: var(--glass-bg-solid); box-shadow: var(--shadow-4); transform: translateY(16px) scale(.94);
  transition: transform .45s var(--ease-spring), opacity .25s var(--ease-standard);
}
.custom-alert-overlay.active .custom-alert-box { transform: none; }
.custom-alert-icon { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; font-size: 0; line-height: 0; }
.custom-alert-title { margin-bottom: 8px; font-size: 20px; font-weight: 700; line-height: 1.25; }
.custom-alert-msg { margin-bottom: 20px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--color-text-secondary); }
.custom-alert-msg.is-left { display: block; margin-bottom: 12px; text-align: left; font-size: 14.5px; }
.custom-alert-btn {
  display: block; min-height: 48px; padding: 0 20px; border: 0; border-radius: 16px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  background: var(--grad-primary); color: var(--color-on-primary); box-shadow: var(--shadow-inset-hi), var(--shadow-primary);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.custom-alert-btn:active { transform: scale(.97); }
.custom-alert-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-focus); }
.custom-alert-btn--danger { background: var(--color-danger); color: var(--color-on-danger); box-shadow: var(--shadow-inset-hi), 0 8px 20px -8px var(--color-danger); }
.custom-alert-btn--neutral { background: var(--color-toast-bg); color: var(--color-toast-text); box-shadow: none; }
.custom-alert-btn--link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; box-sizing: border-box; text-decoration: none; }
.generic-modal-btn-secondary { background: var(--color-surface-3) !important; color: var(--color-text-secondary) !important; box-shadow: none !important; }

.generic-modal-box { max-width: 400px; max-height: 88dvh; padding: 22px 20px 20px; text-align: left; }
.pickup-detail-box { max-width: 380px; text-align: center; }
.gm-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-text-secondary); cursor: pointer;
}
.gm-close::after { content: ''; position: absolute; inset: -4px; }
.gm-close:active { background: var(--color-surface-3); transform: scale(.94); }
.generic-modal-title { min-height: 40px; margin: 0 40px 8px 0; font-size: 19px; font-weight: 700; line-height: 1.3; gap: 12px; }
.generic-modal-title.is-centered { margin: 0 40px 8px; justify-content: center; text-align: center; }
.gm-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; }
.generic-modal-sub { margin-bottom: 16px; font-size: 14.5px; line-height: 1.5; color: var(--color-text-secondary); }
.generic-modal-sub.is-centered { text-align: center; }
.gm-oneline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.generic-modal-label { margin: 14px 0 6px; font-size: 14px; font-weight: 600; color: var(--color-text); }
.generic-modal-input {
  min-height: 48px; padding: 0 14px; border: 1.5px solid var(--color-input-border); border-radius: 14px; font-family: inherit; font-size: 16px;
  background: var(--color-surface); color: var(--color-text); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea.generic-modal-input { min-height: 104px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.generic-modal-input::placeholder { color: var(--color-text-muted); }
.generic-modal-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft-2); }
#promoCodeInput { text-transform: uppercase; }
.generic-modal-pill-row { gap: 10px; }
.generic-modal-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 96px; min-height: 48px; padding: 8px 12px;
  border: 1.5px solid var(--color-input-border); border-radius: 14px; font-size: 15px; font-weight: 600; background: var(--color-surface);
  -webkit-tap-highlight-color: transparent;
}
.generic-modal-pill:active { transform: scale(.97); }
.generic-modal-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.generic-modal-pill.active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-text); box-shadow: inset 0 0 0 1px var(--color-primary); }
.generic-modal-pill.active::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.generic-modal-star-row { gap: 2px; margin: 8px 0 14px; font-size: 0; }
.generic-modal-star { width: 52px; height: 52px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--color-border-strong); cursor: pointer; }
.generic-modal-star:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); border-radius: 14px; }
.generic-modal-star.filled { color: var(--color-warning); }
.generic-modal-actions { gap: 10px; margin-top: 20px; }
.generic-modal-actions .custom-alert-btn { flex: 1; margin: 0; padding: 0 14px; font-size: 15px; }
.generic-modal-checkbox-row { gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.5; }
.generic-modal-checkbox-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; }
.gm-list { max-height: 52dvh; overflow-y: auto; margin: 0 -6px; overscroll-behavior: contain; }
.gm-trip { display: grid; gap: 8px; margin: 0 0 6px; padding: 12px 14px; border-radius: 16px; background: var(--color-surface-2); }
.gm-trip__line { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; color: var(--color-text); }
.gm-trip__line > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.gm-trip__ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }
.gm-trip__type { padding-left: 40px; font-size: 14px; color: var(--color-text-muted); }
.gm-contacts { display: grid; gap: 8px; margin-bottom: 12px; }
.gm-contact { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--color-danger-soft); color: var(--color-danger-text); font-size: 15px; font-weight: 600; }
.gm-url { margin: 8px 0 4px; font-size: 13px; line-height: 1.4; color: var(--color-text-muted); text-align: center; word-break: break-all; }
.gm-ref { margin-bottom: 8px; text-align: center; font-size: 14px; color: var(--color-text-secondary); }
.gm-ref b { font-size: 18px; letter-spacing: .1em; color: var(--color-text); }
.gm-qr { display: flex; justify-content: center; margin: 10px 0 14px; }
#shareQrCanvas { padding: 12px; border: 1px solid var(--color-border); border-radius: 20px; background: #fff; box-shadow: var(--shadow-1); }   /* nền trắng bắt buộc để máy quét đọc được */
.gm-alt-link { margin-top: 12px; text-align: center; }
.gm-alt-link a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; color: var(--color-primary-text); text-decoration: underline; cursor: pointer; }
.chat-message-list { max-height: 46dvh; padding: 4px 2px; margin-bottom: 12px; }
.chat-bubble { padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.chat-bubble-time { font-size: 11.5px; }
.chat-empty { margin: 8px 0; text-align: center; font-size: 14px; color: var(--color-text-muted); }
.chat-input-row { align-items: stretch; gap: 8px; }
.chat-send { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 16px; }

/* Nhà cung cấp đăng nhập */
.prov { font-size: 20px; font-weight: 800; line-height: 1; }
.prov--google { background: #fff; color: #d93025; box-shadow: inset 0 0 0 1.5px var(--color-border); }
.prov--facebook { background: #1877f2; color: #fff; }
.prov--telegram { background: #0b73a6; color: #fff; }
.prov--zalo { background: #0068ff; color: #fff; }
.prov--tiktok { background: #111; color: #fff; }
.prov--whatsapp { background: #0f7a6e; color: #fff; }
#genericModalBox .nav-sheet-item--provider { margin-bottom: 8px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }

/* Menu chọn kênh nhắn tin (Zalo/SMS/...) */
.contact-popover-menu { min-width: 184px; padding: 6px; gap: 2px; border: 1px solid var(--glass-border); border-radius: 20px; background: var(--glass-bg-solid); box-shadow: var(--shadow-4); }
.contact-menu-item { min-height: 46px; padding: 6px 12px 6px 8px; gap: 12px; border-radius: 14px; font-size: 15px; font-weight: 600; color: var(--color-text); }
.contact-menu-item:hover, .contact-menu-item:active { background: var(--color-primary-soft); color: var(--color-primary-text); }
.contact-menu-item:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-focus); }
.contact-menu-item .contact-icon { width: 30px; height: 30px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary-text); font-size: 15px; font-weight: 800; }
.contact-icon--zalo { background: #0068ff !important; color: #fff !important; }
.contact-icon--tg { background: #0b73a6 !important; color: #fff !important; }
.contact-icon--ms { background: #5b3fe0 !important; color: #fff !important; }

/* ---------- SOS: màn theo dõi công khai (?sos=ID) ---------- */
.sos-viewer-header { padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 14px; background: var(--color-danger); color: var(--color-on-danger); }
.sos-viewer-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.sos-viewer-status { margin-top: 6px; font-size: 14.5px; line-height: 1.45; opacity: 1; }
.sos-viewer-footer { gap: 12px; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.sos-viewer-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border-radius: 16px; font-size: 15px; font-weight: 700; }
.sos-viewer-btn-call { background: var(--color-danger); color: var(--color-on-danger); }
.av-marker--sos .av-marker__dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; background: var(--color-danger); border: 4px solid #fff; box-shadow: 0 4px 12px -2px rgba(0,0,0,.5); }
.av-marker--sos .av-marker__pulse { background: var(--color-danger); }

/* ---------- Thẻ theo dõi tài xế + banner nhắc lịch (kính nổi ở đầu màn hình) ---------- */
.tracking-card, .scheduled-reminder-banner {
  left: 12px; right: 12px; max-width: 480px; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 22px;
  background: var(--glass-bg-solid); color: var(--color-text); box-shadow: var(--shadow-3);
}
.tracking-card { gap: 12px; border-left: 5px solid var(--color-info); }
.tracking-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--color-text); }
.tracking-card-title .av-icon { flex: none; color: var(--color-info-text); }
.tracking-card-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tracking-card-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--color-info-text); }
.tracking-card-time { margin-top: 2px; font-size: 12.5px; color: var(--color-text-muted); }
.tracking-card-stop { min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: 14px; font-weight: 700; background: var(--color-danger-soft); color: var(--color-danger-text); }
.tracking-card-stop:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.scheduled-reminder-banner { border-left: 5px solid var(--color-accent); font-size: 14.5px; line-height: 1.45; }
.reminder-title { display: flex; align-items: center; gap: 8px; font-size: 15.5px; color: var(--color-text); }
.reminder-title .av-icon { flex: none; color: var(--color-accent-text); }
.reminder-route { margin-top: 3px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.scheduled-reminder-banner .reminder-actions { gap: 10px; margin-top: 12px; }
.scheduled-reminder-banner button { min-height: 44px; border-radius: 14px; font-family: inherit; font-size: 14.5px; font-weight: 700; }
.scheduled-reminder-banner .reminder-btn-open { background: var(--color-primary); color: var(--color-on-primary); }
.scheduled-reminder-banner .reminder-btn-dismiss { background: var(--color-surface-3); color: var(--color-text-secondary); }

/* ---------- Splash (tĩnh trong index.html, tự ẩn bằng boot) + onboarding ---------- */
.no-splash #avSplash { display: none; }
#avSplash { animation: av-splash-failsafe .01s linear 6s forwards; }   /* an toàn: nếu JS lỗi vẫn tự biến mất sau 6s */
@keyframes av-splash-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
.av-splash__word { font-size: 44px; font-weight: 800; letter-spacing: -.02em; color: #fff; animation: av-fade-up .7s var(--ease-spring) .35s both; }

.av-onb { position: fixed; inset: 0; z-index: 1900000; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); opacity: 0; transition: opacity .3s var(--ease-standard); }
.av-onb.is-open { opacity: 1; }
.av-onb.is-leaving { opacity: 0; }
.av-onb__skip { align-self: flex-end; margin: calc(env(safe-area-inset-top, 0px) + 12px) 12px 0 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-secondary); font: 600 15px/1 var(--font-sans); cursor: pointer; }
.av-onb__skip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }
.av-onb__viewport { flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.av-onb__track { display: flex; height: 100%; transition: transform .5s var(--ease-spring); will-change: transform; }
.av-onb__slide { box-sizing: border-box; flex: 0 0 100%; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 8px 32px; text-align: center; }
.av-onb__art { width: min(74vw, 300px); height: auto; }
.av-onb__title { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.av-onb__text { margin: 0; max-width: 32ch; font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); }
.av-onb__foot { display: grid; gap: 0; justify-items: center; padding: 0 24px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.av-onb__dots { display: flex; }
/* Nút là vùng chạm 44×44 THẬT (axe/Lighthouse đo theo hộp của nút, không tính ::after); chấm nhìn thấy vẽ ở ::before */
.av-onb__dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.av-onb__dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 5px; background: var(--color-border-strong); transform: translate(-50%, -50%); transition: width .3s var(--ease-spring), background .3s; }
.av-onb__dot.is-active::before { width: 28px; background: var(--color-primary); }
.av-onb__dot:focus-visible { outline: none; }
.av-onb__dot:focus-visible::before { box-shadow: 0 0 0 3px var(--color-focus); }
.av-onb__next { width: min(100%, 360px); }

:root[data-perf="low"] .nav-sheet-overlay,
:root[data-perf="low"] .custom-alert-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
  .av-onb__track, .nav-sheet, .custom-alert-box, .nsw i { transition-duration: .01ms !important; }
}
/* Splash: nền teal-700 phẳng (khớp ảnh chờ iOS + theme_color) ở cả sáng/tối; logo trong ô kính mờ */
#avSplash { background: var(--teal-700); }
.av-splash__mark { padding: 8px; border-radius: 30px; background: rgba(255, 255, 255, .16); animation: av-pop .7s var(--ease-overshoot) both; }
.av-splash__mark svg { display: block; }
/* Máy yếu: bỏ hiệu ứng nhấp nháy vô hạn của chấm "đang trực tiếp" và nút SOS đang chia sẻ (giữ nguyên hình tĩnh) */
:root[data-perf="low"] .live-dot, :root[data-perf="low"] .btn-sos-float.sharing { animation: none; }

/* ============================================================================
   ĐẶT XE (feature/dat-chuyen): mục "Đặt Xe" trong menu liên hệ, hộp thoại đặt xe / chờ / kết quả.
   Chỉ dùng token (xanh Grab: --color-primary, --grad-primary), không mã hex; không thêm backdrop-filter/animation mới.
   ============================================================================ */
.contact-menu-item--book { font-weight: 700; color: var(--color-primary-text); }
.gm-trip__price { padding-left: 40px; font-size: 17px; font-weight: 700; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.ride-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
.ride-countdown { min-height: 24px; margin: 0 0 18px; text-align: center; font-size: 16px; font-weight: 700; color: var(--color-primary-text); font-variant-numeric: tabular-nums; }
.ride-phone { margin: -6px 0 16px; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .02em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ride-actions { display: grid; gap: 10px; }
.ride-actions .custom-alert-btn { width: 100%; margin-top: 0; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }

/* Đặt Xe tự động (Đợt B): nút chính ở cuối thẻ giá + dòng nhắc khi chờ lâu */
.price-book-btn {
  order: 10; flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin-top: 6px; padding: 0 16px; border: 0; border-radius: 16px;
  background: var(--grad-primary); color: var(--color-on-primary); font: 700 17px/1 var(--font-sans);
  box-shadow: var(--shadow-inset-hi), var(--shadow-primary); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.price-book-btn:active { transform: scale(.98); }
.price-book-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-focus); }
.ride-wait-note { min-height: 22px; margin: 0 0 14px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--color-primary-text); }

/* Tài khoản khách (Đợt C1): dòng "Đặt cho", bước nhập mã email, hồ sơ. Chỉ token, không hex. */
.ride-whofor { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 12px; border-radius: 16px; background: var(--color-surface-2); }
.ride-whofor__ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; }
.ride-whofor__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ride-whofor__text small { font-size: 12.5px; color: var(--color-text-muted); }
.ride-whofor__text b { font-size: 15px; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.ride-whofor__phone { font-size: 14px; color: var(--color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }.ride-whofor__edit {
  position: relative; flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--color-border-strong); border-radius: 999px;
  background: var(--color-surface); color: var(--color-primary-text); font: 700 14px/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ride-whofor__edit::after { content: ''; position: absolute; inset: -4px; }   /* vùng chạm 44px */
.ride-whofor__edit:focus-visible, .acct-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-focus); }
.generic-modal-input.acct-code { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .4em; text-indent: .4em; font-variant-numeric: tabular-nums; }
.acct-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 10px 0 0; }
.acct-link {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
  color: var(--color-primary-text); font: 600 14.5px/1 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.acct-link:disabled { color: var(--color-text-muted); text-decoration: none; cursor: default; }
.acct-link--danger { color: var(--color-danger-text); }
.acct-hero { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; padding-right: 44px; }
.acct-avatar {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary-text); font-size: 22px; font-weight: 700;
}
.acct-hero__text { min-width: 0; }
.acct-hero__name { margin: 0; }
.acct-hero__name span { overflow-wrap: anywhere; }
.acct-hero__mail { margin-top: 2px; font-size: 14px; color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* Lịch sử của khách (Đợt C2): 3 tab trang Liên hệ, danh sách chuyến/tin nhắn/đánh giá. Chỉ token. */
.hist-tabs { margin: 0 0 12px; }
.hist-tabs .av-seg__item { min-height: 44px; font-size: 14px; }
.hist-item { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); }
.hist-item__head { display: flex; align-items: center; gap: 10px; }
.hist-item__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--color-surface-2); }
.hist-item__ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; }
.hist-item__title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hist-item__title b { font-size: 15px; color: var(--color-text); overflow-wrap: anywhere; }
.hist-item__time { flex: none; align-self: flex-start; font-size: 12.5px; color: var(--color-text-muted); }
.hist-item__route { margin: 8px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--color-text); overflow-wrap: anywhere; }
.hist-item__meta { margin: 4px 0 0; font-size: 13.5px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.hist-item__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.hist-item__actions .av-btn { position: relative; }
.hist-item__actions .av-btn::after { content: ''; position: absolute; inset: -4px; }   /* vùng chạm 44px */
.hist-stars { margin: 8px 0 0; }
.hist-note { text-align: center; }
.hist-retry { display: flex; justify-content: center; margin-top: 8px; }
.hist-chat { width: 100%; text-align: left; }

/* Lời nhắc đăng nhập / cài app (Đợt C3): dải nhỏ + thẻ, luôn có nút X, không chặn thao tác. Chỉ token. */
.nudge {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; padding: 10px 40px 10px 12px;
  border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-primary-soft); color: var(--color-text);
}
.nudge__ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; }
.nudge__text { flex: 1 1 160px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--color-text); }
.nudge__actions { flex: none; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.nudge__btn {
  position: relative; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--color-primary); color: var(--color-on-primary); font: 700 14px/1 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nudge__btn::after { content: ''; position: absolute; inset: -4px; }   /* vùng chạm 44px */
.nudge__btn--ghost { background: transparent; color: var(--color-primary-text); box-shadow: inset 0 0 0 1.5px var(--color-primary-text); }
.nudge__x {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.nudge__x::after { content: ''; position: absolute; inset: -6px; }     /* vùng chạm 44px */
.nudge__btn:focus-visible, .nudge__x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-focus); }
.nudge--card { margin: 0 0 12px; padding: 14px 44px 14px 14px; border-radius: 20px; align-items: flex-start; }
.nudge--card .nudge__ic { width: 40px; height: 40px; border-radius: 14px; }
.nudge__body { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.nudge__body b { font-size: 15.5px; color: var(--color-text); }
.nudge--card .nudge__actions { flex-basis: 100%; }

/* ============================================================================
   THẺ TÀI XẾ (Đợt A) - bottom-sheet ở đáy màn hình, thay popup Leaflet. Xem js/index/the-tai-xe.js.
   Chỉ dùng token (xanh Grab), không hex; chỉ animate transform/opacity; KHÔNG dùng backdrop-filter/transform trên
   .route-card/.bottom-section (thẻ này là phần tử fixed độc lập nên an toàn với bản vá bàn phím).
   ============================================================================ */
:root { --z-driver-card: 1010; }
.driver-card {
  position: fixed; left: 10px; right: 10px; bottom: var(--stack-bottom);
  width: calc(100% - 20px); max-width: 460px; margin: 0 auto; box-sizing: border-box;
  padding: 8px 16px 16px; z-index: var(--z-driver-card);
  border: 1px solid var(--color-border); border-radius: 24px;
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-4);
  display: none; opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  pointer-events: auto; outline: none;
}
.driver-card.show { display: block; }
.driver-card.is-open { opacity: 1; transform: none; }
.driver-card__grip { width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: var(--color-border-strong); }
.driver-card__close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--color-surface-2); color: var(--color-text-secondary); cursor: pointer;
}
.driver-card__close::after { content: ''; position: absolute; inset: -4px; }   /* vùng chạm 44px */
.driver-card__close:active { background: var(--color-surface-3); }
.driver-card__head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.driver-card__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--color-surface-3); border: 2px solid var(--color-primary-soft-2); }
.driver-card__info { min-width: 0; display: grid; gap: 2px; }
.driver-card__name { font-size: 18px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-card__rating { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--color-text-secondary); }
.driver-card__rating b { color: var(--color-text); font-weight: 700; }
.driver-card__star { display: inline-flex; color: var(--color-warning); }
.driver-card__vehicle { font-size: 13.5px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-card__eta {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 12px; padding: 0 2px;
  color: var(--color-primary-text); font-size: 14px; font-weight: 600; line-height: 1.3;
}
.driver-card__eta .av-icon { flex: none; }
.driver-card__eta b { font-variant-numeric: tabular-nums; }
.driver-card__actions { display: grid; gap: 8px; }
.driver-card__book[hidden], .driver-card__note[hidden] { display: none; }
.driver-card__note { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--color-surface-2); font-size: 14px; line-height: 1.4; color: var(--color-text-secondary); }
.driver-card__book {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 0; border-radius: 16px;
  background: var(--grad-primary); color: var(--color-on-primary); font: 700 17px/1 var(--font-sans);
  box-shadow: var(--shadow-inset-hi), var(--shadow-primary); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.driver-card__book:active { transform: scale(.98); }
.driver-card__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.driver-card__btn {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 48px; padding: 0 6px; border: 0; border-radius: 14px;
  background: var(--color-surface-2); color: var(--color-text); font: 600 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.driver-card__btn:active { background: var(--color-surface-3); }
.driver-card__btn .av-icon { color: var(--color-primary-text); }
.driver-card__close:focus-visible, .driver-card__book:focus-visible, .driver-card__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-focus); }
#driverMoreMenu .contact-menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus); }

/* Thẻ tài xế mở: thay thế tạm thẻ giá + thanh "3 tài xế / loại xe" + bảng 3 tài xế (mỗi lúc chỉ 1 thẻ ở đáy); nút GPS/SOS đẩy lên trên thẻ. */
body.has-driver-card .bottom-main-bar,
body.has-driver-card .price-card,
body.has-driver-card .collapsible-drivers-panel,
body.has-driver-card #top3Overlay { display: none !important; }
body.has-driver-card .floating-controls-stack { bottom: calc(var(--stack-bottom) + var(--driver-card-h, 200px) + 12px) !important; }
/* Không hiện ở các chế độ đang ghim/nhập địa chỉ */
body.selecting-pickup .driver-card, body.selecting-dest .driver-card,
body.focus-pickup .driver-card, body.focus-dest .driver-card { display: none !important; }
@media (prefers-reduced-motion: reduce) { .driver-card { transition: none; } }