/* ============================================================================
   Phần bổ sung cho đợt renovate. Chỉ chứa thành phần MỚI (bubble liên hệ,
   khối tin tưởng). Các chỉnh sửa giá trị — sức nặng chữ, bo góc — đã sửa
   thẳng trong route-booking.css và site-header.css, không nằm ở đây.

   Dùng lại đúng token sẵn có của theme (--hvr-yellow, --hvr-ink…) để không
   đẻ thêm một bảng màu thứ hai.
   ========================================================================== */

/* --- Bubble liên hệ, góc phải dưới ------------------------------------------
   Thay thanh dính chiếm hết chiều ngang. Ba kênh xếp dọc, kênh quan trọng
   nhất nằm dưới cùng vì đó là chỗ ngón cái với tới dễ nhất. */
.hvr-bubbles{
  position:fixed;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.hvr-bubble{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:48px;
  max-width:calc(100vw - 24px);
  padding:0 18px 0 10px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  border:1px solid rgba(46,47,49,.12);
  border-radius:999px;
  background:#fff;
  color:#2e2f31;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(46,47,49,.10), 0 8px 20px rgba(46,47,49,.10);
  transition:transform 130ms cubic-bezier(.22,.7,.3,1), box-shadow 200ms cubic-bezier(.22,.7,.3,1);
}
.hvr-bubble:active{transform:scale(.94)}
.hvr-bubble:hover{box-shadow:0 2px 6px rgba(46,47,49,.14), 0 10px 26px rgba(46,47,49,.16)}
.hvr-bubble:focus-visible{outline:2px solid #2e2f31;outline-offset:2px}

/* Nhãn chữ hiện ra theo yêu cầu nhà xe: khách hiểu ngay mỗi nút đặt vé bằng
   kênh nào. Dạng viên thuốc có chữ sẽ đè lên thẻ chuyến ở mép phải, nên cụm
   bubble vẫn tự ẩn khi khách cuộn xuống và khi sơ đồ ghế đang mở. */
.hvr-bubble__label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:480px){
  .hvr-bubble{height:44px;gap:8px;padding:0 14px 0 8px;font-size:13px}
}

.hvr-bubble__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:999px;
  color:#fff;
}
.hvr-bubble--zalo .hvr-bubble__icon{background:#0068ff}
.hvr-bubble--facebook .hvr-bubble__icon{background:#0866ff}
.hvr-bubble--call .hvr-bubble__icon{background:#2e2f31}
.hvr-bubble--call{background:var(--hvr-yellow,#ffc20e);border-color:transparent}

/* Điện thoại, máy tính bảng: viên nhỏ, biểu tượng + chữ ngắn cỡ nhỏ ("Zalo
   đặt vé", "Messenger", "Gọi đặt vé"). Chữ dài đè lên nút ở cuối màn xác nhận;
   chỉ biểu tượng thì khách ít bấm gọi/nhắn (23–25/09 gọi giảm từ 8,1% còn 4,3%). */
.hvr-bubble__short{display:none}
@media (max-width:768px){
  .hvr-bubble{height:44px;gap:6px;padding:0 12px 0 8px;font-size:12px}
  .hvr-bubble__icon{width:28px;height:28px}
  .hvr-bubble__label{display:none}
  .hvr-bubble__short{display:inline;white-space:nowrap}
}

/* Ẩn cụm bubble khi sơ đồ ghế đang mở, để nó không đè lên chính chỗ khách
   đang chọn ghế. */
.hvr-bubbles.is-an-soDo,
.hvr-bubbles.is-an-form,
.hvr-bubbles.is-an-cuon{opacity:0;pointer-events:none;transform:translateX(12px)}
.hvr-bubbles{transition:opacity 200ms cubic-bezier(.22,.7,.3,1), transform 200ms cubic-bezier(.22,.7,.3,1)}

/* --- Khối tin tưởng ---------------------------------------------------------
   Đặt ngay dưới khối tìm kiếm. Hai dữ kiện đều kiểm chứng được: khung giờ mở
   bến và quyết định cấp phép của Bộ GTVT. */
.hvr-trust{
  display:grid;
  gap:12px;
  margin-top:16px;
  padding:16px;
  border:1px solid rgba(46,47,49,.12);
  border-radius:12px;
  background:#fff;
}
.hvr-trust__item{display:flex;gap:12px;align-items:flex-start}
.hvr-trust__item svg{flex:0 0 auto;margin-top:2px;color:#2e2f31}
/* Khối nằm trong hero chữ trắng: phải đặt màu tiêu đề, không để kế thừa trắng trên nền trắng. */
.hvr-trust__item b{display:block;font-size:14px;font-weight:700;margin-bottom:2px;color:#2e2f31}
.hvr-trust__item span{display:block;font-size:13px;line-height:1.55;color:#58595b}
.hvr-trust__item em{font-style:normal;white-space:nowrap}

@media (min-width:768px){
  .hvr-trust{grid-template-columns:1fr 1fr;gap:16px 24px}
}


/* --- Lọc khung giờ ----------------------------------------------------------
   Nằm ngay trên danh sách chuyến. Trượt ngang trên điện thoại vì sáu khung
   không thể xếp vừa một hàng ở 375px mà vẫn giữ vùng chạm 44px. */
.hvr-slots{
  display:flex;
  gap:8px;
  margin:12px 0 8px;
  padding-bottom:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.hvr-slots::-webkit-scrollbar{display:none}

.hvr-slot{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 16px;
  border:1px solid rgba(46,47,49,.16);
  border-radius:999px;
  background:#fff;
  color:#2e2f31;
  font-size:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background 200ms cubic-bezier(.22,.7,.3,1), border-color 200ms cubic-bezier(.22,.7,.3,1), color 200ms cubic-bezier(.22,.7,.3,1);
}
.hvr-slot b{font-size:12px;font-weight:500;color:#58595b}
.hvr-slot:hover{border-color:rgba(46,47,49,.36)}
.hvr-slot[aria-pressed="true"]{background:#2e2f31;border-color:#2e2f31;color:#fff}
.hvr-slot[aria-pressed="true"] b{color:var(--hvr-yellow,#ffc20e)}
.hvr-slot:disabled{opacity:.4;cursor:not-allowed}
.hvr-slot:focus-visible{outline:2px solid #2e2f31;outline-offset:2px}

.hvr-slot-count{margin:0 0 8px;font-size:13px;color:#58595b}
.hvr-slot-empty{
  margin:8px 0 16px;
  padding:16px;
  border:1px dashed rgba(46,47,49,.24);
  border-radius:12px;
  font-size:14px;
  color:#58595b;
  text-align:center;
}


/* --- Các mục dịch vụ mới (sân bay, khung giờ, bệnh viện, trung chuyển) ------ */
.hvr-service-body{display:grid;gap:12px;max-width:68ch}
.hvr-service-body p{margin:0;font-size:15px;line-height:1.65;color:#3f4144}
.hvr-service-note{
  padding:12px 16px;
  border-left:3px solid var(--hvr-yellow,#ffc20e);
  background:#fffdf4;
  border-radius:0 8px 8px 0;
  font-size:14px;
}
.hvr-service-alt{background:#fafafa}

/* --- Dải tin tưởng dưới ô tìm kiếm ----------------------------------------- */
.hvr-trustbar{
  display:grid;
  gap:12px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
}
.hvr-trustbar li{
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.06);
}
.hvr-trustbar strong{
  display:block;
  margin-bottom:2px;
  font-size:14px;
  font-weight:700;
  color:var(--hvr-yellow,#ffc20e);
}
.hvr-trustbar span{display:block;font-size:13px;line-height:1.55;color:rgba(255,255,255,.82)}

@media (min-width:768px){
  .hvr-trustbar{grid-template-columns:repeat(2,1fr);gap:12px 16px}
}
@media (min-width:1024px){
  .hvr-trustbar{grid-template-columns:repeat(4,1fr)}
}

/* Hàng lọc thứ hai: hạng xe + sắp xếp */
.hvr-slot small{display:block;font-size:11px;font-weight:500;color:#58595b;line-height:1.1}
.hvr-slot[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.hvr-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.hvr-vehicle-chips{display:flex;flex-wrap:wrap;gap:8px}
.hvr-sort{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#58595b}
.hvr-sort select{min-height:44px;padding:0 12px;border:1px solid rgba(46,47,49,.18);border-radius:999px;background:#fff;color:#2e2f31;font:inherit;font-size:14px;font-weight:600}
.hvr-sort select:focus-visible{outline:2px solid #2e2f31;outline-offset:2px}

/* Nhắc đặt trực tuyến trước khi khách gọi / nhắn tin. */
.hvr-nhac{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(17,17,17,.55)}
body.hvr-nhac-mo{overflow:hidden}
.hvr-nhac__hop{position:relative;width:100%;max-width:380px;background:#fff;border-radius:16px;padding:24px 20px 20px;box-shadow:0 18px 50px rgba(0,0,0,.25);text-align:center}
.hvr-nhac__dong{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;font-size:26px;line-height:1;color:#8a8f98;cursor:pointer}
.hvr-nhac__tieude{margin:0 0 10px;font-size:19px;font-weight:800;color:#15171a}
.hvr-nhac__than{margin:0 0 12px;font-size:15px;line-height:1.5;color:#3d4148}
.hvr-nhac__luuy{margin:0 0 18px;padding:10px 12px;border-radius:10px;background:#fff7d6;font-size:14px;line-height:1.45;color:#5a4a12}
.hvr-nhac__chinh,.hvr-nhac__phu{display:block;width:100%;min-height:48px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer}
.hvr-nhac__chinh{border:0;background:#ffc107;color:#1a1a1a;margin-bottom:10px}
.hvr-nhac__phu{border:1px solid #d7dae0;background:#fff;color:#3d4148;font-weight:600}
@media (prefers-reduced-motion:no-preference){.hvr-nhac__hop{animation:hvr-nhac-len 180ms cubic-bezier(.22,.7,.3,1)}}
@keyframes hvr-nhac-len{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Chuyến chạy qua 0h đêm: nhãn nhỏ "khuya" cạnh giờ, để khách không tưởng là sáng sớm. */
.hvr-trip-card[data-qua-dem] .hvr-trip-time strong::after,
.hvrt-trip[data-qua-dem] .hvrt-trip-time strong::after{
  content:"khuya";display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:#2e2f31;color:#ffc20e;font-size:11px;font-weight:800;line-height:1.5;vertical-align:middle;letter-spacing:.2px;
}
html[lang^="en"] .hvr-trip-card[data-qua-dem] .hvr-trip-time strong::after,
html[lang^="en"] .hvrt-trip[data-qua-dem] .hvrt-trip-time strong::after{content:"late night"}