/* ==========================================================================
   Xe VIP Nội Bài — clone stylesheet
   ========================================================================== */

:root {
  --color-primary: #f7941d;
  --color-primary-dark: #f47521;
  --color-dark: #1c1c1c;
  --color-text: #333333;
  --color-heading: #555555;
  --color-border: #e7e7e7;
  --color-bg-alt: #f5f5f5;
  --color-success: #7a9c59;
  --color-alert: #b20000;
  --font-body: "Open Sans", sans-serif;
  --font-heading: "Fira Sans Condensed", sans-serif;
  --container-width: 1170px;
  --header-height: 85px;
  --header-height-stuck: 70px;
  --radius-pill: 50px;
}

* {
  box-sizing: border-box;
}

/* overflow-x: clip (KHÔNG phải hidden) là điểm khác biệt quyết định so với
   xevipsanbay.com — họ dùng clip nên không bị lỗi này, ta dùng hidden nên bị:
   - `hidden` biến phần tử thành scroll container: KHÔNG có thanh cuộn và ngón
     tay không kéo lại được, NHƯNG trình duyệt vẫn cuộn nó được bằng code. Trên
     Android, khi chọn 1 gợi ý địa chỉ dài, con trỏ nhảy tới cuối đoạn text nên
     Chrome tự cuộn ngang các ancestor để "lộ" con trỏ ra → body bị cuộn lệch và
     người dùng KHÔNG THỂ kéo về, phải tải lại trang (đúng hiện tượng đang gặp).
   - `clip` chỉ cắt, không tạo scroll container → không cuộn được kể cả bằng
     code, nên không thể bị kẹt.
   Ngoài ra `overflow-x: hidden` + `overflow-y: visible` bị spec ép overflow-y
   thành `auto`, tức body thành scroll container cả 2 chiều; với `clip` thì
   overflow-y giữ nguyên `visible`.
   Giữ dòng `hidden` phía trước làm fallback cho trình duyệt cũ chưa hiểu clip. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.6;
  background: #fff;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.3;
  margin: 0 0 15px;
}

p {
  margin: 0 0 15px;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.text-center { text-align: center; }

.btn,
.button {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3px;
  padding: 13px 32px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn-outline-light {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--color-dark);
}

.section {
  padding: 70px 0;
  position: relative;
}

.section-tag {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
}

.section-title {
  font-size: 36px;
  margin-bottom: 40px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Header trải rộng hơn phần thân trang: nới max-width và giảm padding ngang so
   với .container mặc định (1170px / 0 20px) để logo và nút hotline nằm gần 2
   mép màn hình hơn. Hai rule cùng độ ưu tiên nhưng .header-inner đứng sau
   .container trong file nên ghi đè được. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  transition: height 0.25s ease;
  max-width: 1600px;
  padding: 0 16px;
}

.site-header.is-stuck .header-inner {
  height: var(--header-height-stuck);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-icon {
  height: 44px;
  width: auto;
  translate: -100vw 0;
  rotate: 0deg;
  transform-origin: 85% 95%;
  opacity: 0;
  transition: height 0.25s ease, translate 0.8s cubic-bezier(0.16, 1, 0.3, 1), rotate 0.2s ease-out, opacity 0.3s ease;
}
.logo-icon.in {
  translate: 0 0;
  opacity: 1;
}
.logo-icon.brake {
  rotate: 5deg;
}
.site-header.is-stuck .logo-icon {
  height: 36px;
}
@media (prefers-reduced-motion: reduce) {
  .logo-icon {
    transition: none;
    translate: none;
    rotate: none;
    opacity: 1;
  }
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.logo-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  color: var(--color-primary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.logo-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-heading);
  letter-spacing: 0.2px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-nav > li {
  position: relative;
}

.main-nav > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: #000;
  letter-spacing: 0.2px;
}

.main-nav > li > a svg {
  width: 11px;
  height: 11px;
}

.main-nav > li > a:hover,
.main-nav > li.active > a {
  color: var(--color-primary-dark);
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 4px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 50;
}

.main-nav > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  color: #444;
}
.sub-menu a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

.hotline-btn {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 24px;
  text-align: center;
  font-family: var(--font-heading);
  line-height: 1.3;
  white-space: nowrap;
}
.hotline-btn .label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.hotline-btn .number {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
  z-index: 1001;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-dark);
  transition: transform 0.3s ease, opacity 0.2s ease, background 0.3s ease;
}
.nav-toggle.is-active .nav-toggle-bar {
  background: var(--color-dark);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav-drawer {
  position: fixed;
  inset: 0;
  height: 100%;
  background: #fff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 110px 24px 60px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  overflow-y: auto;
}
.mobile-nav-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-nav-drawer > a {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 14px 0;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav-drawer > a:last-child {
  border-bottom: none;
}
.drawer-item {
  width: 100%;
  max-width: 320px;
  border-bottom: 1px solid var(--color-border);
}
.drawer-parent-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: inherit;
  cursor: pointer;
}
.drawer-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.drawer-item.open .drawer-chevron {
  transform: rotate(180deg);
}
.drawer-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.drawer-item.open .drawer-submenu {
  grid-template-rows: 1fr;
}
.drawer-submenu-inner {
  overflow: hidden;
}
.mobile-nav-drawer .sub-link {
  display: block;
  padding: 10px 0;
  font-weight: 400;
  font-size: 16px;
  color: #666;
  text-align: center;
}
.drawer-submenu .sub-link:last-child {
  padding-bottom: 14px;
}
body.nav-open {
  overflow: hidden;
}
body.nav-open .site-header {
  z-index: 1000;
}

/* ==========================================================================
   Hero / Booking widget
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  min-height: 620px;
  display: flex;
  align-items: center;
}

.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-bg-1920x823.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active {
  opacity: 1;
}
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.34);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.hero-text {
  max-width: 560px;
  color: #fff;
  padding: 60px 0;
}
.hero-text h1 {
  color: #fff;
  font-size: 42px;
  text-transform: uppercase;
  line-height: 1.25;
  margin-bottom: 18px;
}
.hero-text p {
  font-size: 17px;
  color: #f1f1f1;
  margin-bottom: 26px;
}


.booking-widget {
  width: 440px;
  max-width: 100%;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  padding: 26px 26px 22px;
}

.booking-widget .hotline-line {
  text-align: center;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 28px;
  margin-bottom: 16px;
}
.booking-widget .hotline-line a { color: inherit; }

.booking-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.booking-tabs button {
  flex: 1;
  border: 1px solid var(--color-border);
  background: #f0f0f0;
  border-radius: 8px;
  padding: 10px 8px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #000;
  transition: all 0.2s ease;
}
.booking-tabs button.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Nhãn ("Điểm Đi *"/"Điểm Đến *") nằm CÙNG HÀNG với ô nhập.
   Layout ngang này từng bị đổi sang xếp dọc (commit 279c77d) vì nghi là nguyên
   nhân tràn viền trên Android; nguyên nhân thật sau đó đã tìm ra và xử lý ở chỗ
   khác (overflow-x: clip cho html/body + đưa con trỏ về đầu ô sau khi chọn gợi
   ý), nên trả lại được. Vẫn giữ đủ chốt chống tràn: min-width: 0 ở cả hàng và
   .input-wrap là BẮT BUỘC, vì flex item mặc định có min-width: auto nên không
   co nhỏ hơn nội dung — đúng cái bẫy gây tràn ngang khi địa chỉ dài. */
.booking-form .form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.booking-form .form-row[hidden] {
  display: none;
}
.booking-form label {
  font-size: 16px;
  font-weight: 600;
}
/* Chỉ nhắm nhãn của hàng Điểm Đi/Điểm Đến — không đụng nhãn Ngày Đi/Giờ Đi
   trong .date-time-row hay nhãn checkbox "Chuyến 2 chiều". Bề rộng cố định để
   ô nhập của 2 hàng thẳng nhau. */
.booking-form .form-row > label {
  flex: 0 0 96px;
  white-space: nowrap;
}
/* flex: 1 1 0 (basis 0) để ô nhập lấy đúng phần còn lại sau nhãn, không bị nội
   dung bên trong đẩy rộng ra. */
.booking-form .input-wrap {
  flex: 1 1 0;
  max-width: 100%;
  min-width: 0;
  position: relative;
}
.booking-form input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--font-body);
  background: #fafafa;
}
.booking-form input[disabled] {
  background: #f0f0f0;
  color: #333;
}
.booking-form select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--font-body);
  background: #fafafa;
  cursor: pointer;
}
.address-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}
.address-suggestions[hidden] { display: none; }
.address-suggestion-item {
  padding: 9px 10px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  color: #333;
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}
.address-suggestion-item strong { color: #000; }
.address-suggestion-item:hover,
.address-suggestion-item.active {
  background: #f0f4ff;
  color: var(--color-primary);
}
.address-suggestion-item:hover strong,
.address-suggestion-item.active strong {
  color: var(--color-primary);
}
.airport-select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.airport-select-native[hidden] { display: none; }
.airport-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  overflow-x: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.airport-suggestions[hidden] { display: none; }
.booking-checks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0;
}
.booking-checks .check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  white-space: nowrap;
}
.booking-checks input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.swap-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.swap-btn:hover { background: var(--color-primary-dark); }
.swap-btn[hidden] { display: none; }

.booking-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.booking-row-2 input,
.booking-row-2 select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--font-body);
  background: #fff;
  color: #333;
}
.booking-row-2 select {
  cursor: pointer;
}
.booking-row-2--single {
  grid-template-columns: 1fr;
}
.date-time-row {
  align-items: start;
}
.date-time-row .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.date-time-row input[type="date"],
.date-time-row .ant-time-picker-trigger {
  height: 42px;
  box-sizing: border-box;
}
.date-time-row .form-group label {
  flex: none;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* Time picker kiểu Ant Design (cuộn chọn giờ/phút) — port từ
   xevipsanbay/html/index.html để đồng bộ cách chọn, bố trí và responsive. */
.ant-time-picker {
  position: relative;
  width: 100%;
}
.ant-time-picker-trigger {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--font-body);
  background: #fff;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s;
}
.ant-time-picker-trigger:active,
.ant-time-picker-trigger.open {
  border-color: var(--color-primary);
  outline: none;
}
.ant-time-picker-value { color: #999; }
.ant-time-picker-value.has-value { color: #333; }
.ant-time-picker-suffix { color: #999; font-size: 12px; line-height: 1; }
.ant-time-picker-dropdown {
  display: none;
  position: fixed;
  z-index: 200;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.ant-time-picker-dropdown.open { display: flex; }
.ant-time-picker-highlight {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  background: rgba(60, 60, 67, 0.08);
  border-top: 1.5px solid rgba(60, 60, 67, 0.3);
  border-bottom: 1.5px solid rgba(60, 60, 67, 0.3);
  border-radius: 6px;
}
.ant-time-picker-column {
  flex: 1;
  overflow-y: auto;
  max-height: 120px;
  scroll-behavior: auto;
  padding-top: 42px;
  padding-bottom: 42px;
  scroll-snap-type: y proximity;
}
.ant-time-picker-column:first-child { border-right: 1px solid var(--color-border); }
.ant-time-picker-column::-webkit-scrollbar { display: none; }
.ant-time-picker-item {
  padding: 6px 8px;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
  color: #333;
  cursor: pointer;
  transition: background 0.12s;
  scroll-snap-align: center;
}
.ant-time-picker-item:hover { background: #f5f5f5; }
.ant-time-picker-item.selected {
  background: rgba(60, 60, 67, 0.06);
  color: #1a1a1a;
  font-weight: 700;
}

.booking-note {
  color: var(--color-alert);
  font-size: 15px;
  font-weight: 700;
  display: block;
  margin-bottom: 14px;
}

.booking-submit {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.booking-submit:hover { background: var(--color-primary-dark); }

/* Price-check modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff;
  border-radius: 10px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  position: relative;
  text-align: left;
}
.modal-close {
  font-size: 22px;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.confirm-title {
  color: var(--color-primary);
  font-size: 24px;
  margin: 0;
}
.confirm-summary {
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.confirm-summary p {
  font-size: 16px;
  color: var(--color-text);
  margin: 0 0 12px;
}
.confirm-summary p:last-child { margin-bottom: 0; }
.confirm-summary strong { color: #000; }
.confirm-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(to right, #fff6f0, #ffe9dc);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
/* Bắt buộc, cùng lý do như .price-notice[hidden]: `display: flex` ở trên là
   style của tác giả nên nó đè lên `[hidden] { display: none }` của trình duyệt,
   khiến JS set .hidden = true mà ô vẫn hiện. */
.confirm-price-box[hidden] { display: none; }
.confirm-price-cartype {
  font-size: 18px;
  font-weight: 700;
  color: #000;
}
.confirm-price-amount {
  font-size: 23px;
  font-weight: 700;
  color: var(--color-primary);
}
.price-unavailable-note {
  font-size: 16px;
  color: var(--color-alert);
  font-weight: 600;
  background: #fff4f4;
  border: 1px solid #ffd7d7;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 16px;
}
.price-notice {
  display: block;
  background: #fff8ec;
  border: 1px solid #fde2b3;
  border-left: 4px solid #f59e0b;
  color: #78350f;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
/* Bắt buộc phải có: `display: block` ở trên là style của tác giả nên nó ĐÈ LÊN
   rule `[hidden] { display: none }` của trình duyệt (author style thắng UA
   style). Hậu quả: JS đã set notice.hidden = true khi tìm được giá, nhưng khối
   này vẫn hiện, làm khách thấy "Chưa có bảng giá cho khu vực này" ngay cả với
   địa điểm CÓ giá. Selector class + attribute có độ ưu tiên cao hơn nên thắng.
   Cùng cách xử lý đã dùng cho .address-suggestions[hidden] bên trên. */
.price-notice[hidden] { display: none; }
.price-notice-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 6px;
  font-size: 15px;
}
.price-notice-title svg { flex-shrink: 0; color: #d97706; }
.price-notice-title-text a {
  color: #b45309;
  text-decoration: underline;
  font-weight: 700;
}
.price-notice-body {
  color: #92400e;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
.confirm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.confirm-field { margin-bottom: 14px; }
.confirm-form-grid .confirm-field { margin-bottom: 0; }
.confirm-field label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  margin-bottom: 6px;
}
.confirm-field input,
.confirm-field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  /* KHÔNG hạ xuống dưới 16px: iOS Safari tự zoom cả trang khi focus vào input
     có cỡ chữ nhỏ hơn 16px, gây giật/lệch layout đúng kiểu đã phải xử lý ở form
     chính. Form chính cũng dùng 16px vì lý do này. */
  font-size: 16px;
  font-family: var(--font-body);
  resize: vertical;
}
.confirm-submit-btn {
  width: 100%;
  background: var(--color-dark);
  color: #f5c542;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.confirm-submit-btn:hover { background: #000; }

.modal-box--success { text-align: center; }
.modal-box--success .confirm-header { justify-content: flex-end; margin-bottom: 6px; }
.booking-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  font-size: 26px;
  line-height: 56px;
}
.booking-success-message {
  font-size: 16px;
  color: var(--color-text);
  margin: 0 0 20px;
}

/* ==========================================================================
   Services icons row
   ========================================================================== */

.services-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.service-item {
  padding: 24px 30px;
  border-right: 1px dashed var(--color-border);
  text-align: left;
}
.service-item:last-child { border-right: none; }
.service-item img {
  height: 46px;
  width: auto;
  margin-bottom: 16px;
}
.service-item h3 {
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.service-item p {
  font-size: 15px;
  color: #666;
  margin: 0;
}

.intro-heading {
  text-align: center;
  margin-bottom: 30px;
}
.intro-heading .section-tag { font-size: 15px; }
.intro-heading h2 { font-size: 30px; }

/* ==========================================================================
   Fare tabs
   ========================================================================== */

.fare-section {
  background: var(--color-bg-alt);
}
.fare-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  background: var(--color-primary);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 40px;
}
.fare-tabs button {
  border: 2px solid transparent;
  background: transparent;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  padding: 12px 30px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.fare-tabs button.active {
  background: var(--color-dark);
  border-color: var(--color-dark);
}
.fare-tabs button:not(.active) {
  border-color: rgba(255,255,255,0.6);
}

.fare-grid {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.fare-grid.active { display: grid; }

.fare-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.fare-card .fare-img {
  aspect-ratio: 449/300;
  overflow: hidden;
}
.fare-card .fare-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.fare-card:hover .fare-img img {
  transform: scale(1.08);
}
.fare-card .fare-body {
  padding: 18px;
  text-align: center;
}
.fare-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.fare-card p {
  font-size: 16px;
  color: #777;
  margin-bottom: 10px;
  min-height: 40px;
}
.fare-card h4 {
  color: var(--color-primary-dark);
  font-size: 20px;
  margin: 0;
}

/* ==========================================================================
   Airport pricing table
   ========================================================================== */

.pricing-table-wrapper {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 8px;
}
.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.pricing-table th,
.pricing-table td {
  padding: 14px 20px;
  font-size: 15px;
  text-align: center;
}
.pricing-table thead th {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
}
.pricing-table thead th:first-child { border-radius: 8px 0 0 0; }
.pricing-table thead th:last-child { border-radius: 0 8px 0 0; }
.pricing-table tbody td.destination {
  text-align: left;
  font-weight: 600;
  color: var(--color-heading);
}
.pricing-table tbody tr:nth-child(even) { background: #fff; }
.route-arrow {
  color: var(--color-primary-dark);
  font-weight: 700;
  margin: 0 4px;
}
.pricing-cards { display: none; }

.pricing-section {
  padding: 70px 0;
  position: relative;
}
.pricing-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}
.pricing-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 30px;
}
.pricing-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}
.pricing-tabs button {
  border: 1px solid var(--color-border);
  background: #f0f0f0;
  color: #000;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pricing-tabs button:hover { background: #e6e6e6; }
.pricing-tabs button.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pricing-route-point { color: var(--color-heading); }
.pricing-route-arrow {
  color: var(--color-primary-dark);
  font-weight: 700;
  margin: 0 4px;
}
.pricing-table tbody td.price { font-weight: 700; color: var(--color-primary-dark); }
.pricing-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text);
  font-size: 16px;
}
.pricing-card-group { margin-bottom: 18px; }
.pricing-card-group:last-child { margin-bottom: 0; }
.pricing-card-group-title {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 16px;
  margin: 0;
  border-radius: 8px 8px 0 0;
}
.pricing-mini-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.pricing-mini-table td {
  padding: 12px 16px;
  font-size: 15px;
}
.pricing-mini-table td.destination {
  text-align: left;
  font-weight: 600;
  color: var(--color-heading);
}
.pricing-mini-table td.price {
  text-align: right;
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.pricing-mini-table tr:nth-child(odd) { background: var(--color-bg-alt); }
.pricing-mini-table tr:nth-child(even) { background: #fff; }
.pricing-mini-table tr:last-child td:first-child { border-radius: 0 0 0 8px; }
.pricing-mini-table tr:last-child td:last-child { border-radius: 0 0 8px 0; }
.pricing-note {
  margin: 18px 4px 0;
  font-size: 16px;
  color: #888;
  font-style: italic;
}

/* ==========================================================================
   Why-us dark section
   ========================================================================== */

.why-us {
  background: #fff;
  color: var(--color-text);
}
.why-us .section-lead {
  text-align: center;
  font-size: 21px;
  color: var(--color-text);
  max-width: 720px;
  margin: 0 auto 50px;
}
.why-us-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 20px;
}
.why-us-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.why-us-col.right { text-align: right; }
.why-us-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.why-us-col.right .why-us-item {
  flex-direction: row-reverse;
}
.why-us-item svg {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: var(--color-primary);
  fill: var(--color-primary);
}
.why-us-item h3 {
  color: var(--color-primary);
  font-size: 17px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.why-us-item p {
  color: var(--color-text);
  font-size: 15px;
  margin: 0;
}
.why-us-center img {
  max-width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   Video showcase
   ========================================================================== */

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.video-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-dark), #3a3a3a);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-card video,
.video-card .video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card .video-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.video-card:has(.video-poster)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: 1;
  pointer-events: none;
}
.video-play-btn { position: relative; z-index: 2; }
.video-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.video-play-btn svg { width: 26px; height: 26px; margin-left: 3px; }
.video-play-btn:hover {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.08);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.divider-checkers {
  height: 14px;
  background-image:
    linear-gradient(45deg, var(--color-primary) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-primary) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-primary) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-primary) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}


/* ==========================================================================
   Banner strip
   ========================================================================== */

.banner-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f5f5f5;
}
.banner-strip a { display: block; overflow: hidden; }
.banner-strip img {
  width: 100%;
  transition: transform 0.4s ease;
}
.banner-strip a:hover img { transform: scale(1.03); }

/* ==========================================================================
   Partner/client logo carousel
   ========================================================================== */

.clients-band {
  background: var(--color-primary);
  padding: 30px 0;
}
.clients-inner {
  display: flex;
  align-items: center;
  gap: 30px;
}
.clients-heading {
  flex-shrink: 0;
  color: #fff;
}
.clients-heading h2 {
  color: #fff;
  font-size: 22px;
  margin: 0;
  line-height: 1.3;
}
.clients-slider {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.clients-track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease;
}
.clients-track > div {
  flex: 0 0 160px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  padding: 14px;
}
.clients-track img {
  max-width: 100%;
  max-height: 100%;
}
.clients-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clients-arrow:hover { background: rgba(255,255,255,0.5); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}
.footer-branches {
  padding-top: 50px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.footer-branches-title {
  color: var(--color-primary-dark);
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}
.branch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.branch-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.branch-tag {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.branch-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  font-weight: 700;
  margin-bottom: 16px;
}
.branch-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}
.branch-contact p {
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  font-weight: 700;
  margin: 0;
}
.branch-contact strong {
  color: var(--color-primary-dark);
  font-weight: 700;
}
.branch-map-wrap {
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  border: 1px solid var(--color-border);
}
.branch-map {
  display: block;
}
.footer-main {
  padding-top: 60px;
  padding-bottom: 30px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 30px;
}
.footer-main h3 {
  color: var(--color-primary-dark);
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-main p { color: #666; font-size: 15px; }
.footer-links li {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--color-border);
  font-size: 15px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links li svg {
  color: var(--color-primary);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.footer-contact p {
  margin-bottom: 12px;
  font-size: 15px;
  color: #000;
  font-weight: 700;
}
.footer-contact a:hover {
  color: var(--color-primary-dark);
}
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #888;
}
.footer-bottom img { height: 40px; }

/* Scroll-to-top */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 400;
}
.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Floating hotline / Zalo buttons */
.floating-phone-list {
  position: fixed;
  right: 20px;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 400;
}
.floating-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-phone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.floating-zalo-btn {
  background: linear-gradient(135deg, #0b7cff, #00a4ff);
  padding: 6px 18px 6px 6px;
}
.floating-zalo-btn img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
}
.phone-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: phonePulse 1.4s ease-in-out infinite;
}
.phone-icon svg {
  width: 14px;
  height: 14px;
}
.phone-text {
  font-weight: 800;
}
@keyframes phonePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

@media (max-width: 768px) {
  .floating-phone-list {
    left: 12px;
    right: 12px;
    bottom: 0;
    padding: calc(env(safe-area-inset-bottom, 0px) + 8px) 12px 12px;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    z-index: 1300;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  body.nav-open .floating-phone-list {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
  .floating-phone-btn {
    flex: 1 1 50%;
    min-width: 0;
    height: 56px;
    padding: 8px 14px;
    justify-content: center;
  }
  .floating-zalo-btn img,
  .phone-icon {
    width: 22px;
    height: 22px;
  }
  .phone-icon svg {
    width: 16px;
    height: 16px;
  }
  .phone-text {
    font-size: 18px;
  }
  .scroll-top-btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    right: 16px;
  }
}

/* ==========================================================================
   Page-title banner (subpages)
   ========================================================================== */

.page-title-banner {
  background: linear-gradient(rgba(20,20,20,0.75), rgba(20,20,20,0.75)),
    repeating-linear-gradient(135deg, #333 0 2px, #2b2b2b 2px 40px);
  padding: 60px 20px;
  text-align: center;
}
.page-title-banner h1 {
  color: #fff;
  font-size: 40px;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 1px;
}

/* ==========================================================================
   Content + sidebar layout (about / service / blog post pages)
   ========================================================================== */

.content-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 50px;
  padding-top: 60px;
  padding-bottom: 60px;
}
.main-col article h2 {
  font-size: 24px;
  margin-top: 30px;
}
.main-col article img {
  border-radius: 8px;
  margin: 20px 0;
}
.main-col article p { color: #444; }
.main-col article strong { color: var(--color-primary-dark); }

.sidebar-box {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.sidebar-box .promo-img { width: 100%; }
.sidebar-box h3 {
  padding: 16px 20px;
  margin: 0;
  font-size: 17px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-box ul { padding: 10px 20px 16px; }
.sidebar-box ul li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 15px;
}
.sidebar-box ul li:last-child { border-bottom: none; }
.sidebar-box ul li a:hover { color: var(--color-primary-dark); }

/* ==========================================================================
   About page
   ========================================================================== */

.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.about-intro img { border-radius: 8px; }
.about-intro-images {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}

.core-values {
  background: var(--color-bg-alt);
}
.core-values h2 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 40px;
}
.core-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.core-value-card {
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.core-value-card img {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
}
.core-value-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.core-value-card p {
  font-size: 15px;
  color: #666;
  margin: 0;
}

.about-cta {
  text-align: center;
}
.about-cta h2 { font-size: 26px; margin-bottom: 24px; }
.about-cta .btn-group {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact-info h1 { font-size: 30px; }
.contact-detail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 16px;
}
.contact-detail-row svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.contact-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.contact-social img {
  width: 40px;
  height: 40px;
}
.contact-form h2 { font-size: 22px; margin-bottom: 20px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: var(--font-body);
  /* Không hạ dưới 16px — xem ghi chú ở .confirm-field input (iOS tự zoom). */
  font-size: 16px;
  margin-bottom: 16px;
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form .form-status {
  font-size: 15px;
  color: var(--color-success);
  display: none;
  margin-top: 10px;
}
.contact-form .form-status.show { display: block; }

/* ==========================================================================
   Blog listing page
   ========================================================================== */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.blog-card {
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.blog-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.08); }
.blog-card .thumb {
  flex: 0 0 150px;
  overflow: hidden;
}
.blog-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card .body {
  padding: 14px 16px 14px 0;
}
.blog-card h3 {
  font-size: 15px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.blog-card p {
  font-size: 16px;
  color: #777;
  margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .main-nav,
  .hotline-btn { display: none; }
  .nav-toggle { display: flex; }

  /* Kéo tiêu đề lên: khoảng trống phía trên nó còn 1/2 (40px -> 20px).
     Kéo form lên: gap giữa tiêu đề và form còn 2/3 (40px -> 26px) — gap này
     kế thừa từ .hero-inner gốc, ở mobile chỉ đổi hướng thành cột nên nó trở
     thành khoảng cách dọc giữa 2 khối. */
  .hero-inner { flex-direction: column; gap: 26px; }
  .hero-text { padding: 20px 0 0; text-align: center; }
  .hero-text h1 { font-size: 30px; }
  .booking-widget { width: 100%; margin-bottom: 30px; }
  .hero-slide { background-image: url('../images/hero-bg-1024x439.jpg'); }

  .services-row,
  .fare-grid,
  .why-us-grid,
  .core-values-grid,
  .about-intro,
  .contact-layout,
  .footer-main,
  .branch-grid,
  .blog-grid,
  .content-layout {
    grid-template-columns: 1fr;
  }
  .content-layout { gap: 30px; }
  .why-us-grid { text-align: center; }
  .why-us-col.right .why-us-item,
  .why-us-item { flex-direction: row; text-align: left; }
  .why-us-col.right { text-align: left; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .hero-slide { background-image: url('../images/hero-bg-640x274.jpg'); }
  /* Trên điện thoại form vốn bị thụt vào tới 46px mỗi bên: 20px padding của
     .container (mà .hero-inner đang dùng) + 26px padding của chính form. Giảm
     cả hai, giữ 8px ở .hero-inner làm khoảng cách ra lề (cũng đủ chỗ cho
     box-shadow của form không bị cắt cụt ở rìa màn hình). */
  .hero-inner { padding: 0 8px; }
  .booking-widget { margin-bottom: 14px; padding: 12px 8px 10px; }
  .booking-row-2 { grid-template-columns: 1fr; }
  .booking-row-2.date-time-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .date-time-row .form-group label { font-size: 16px; }
  .ant-time-picker-trigger { padding: 8px 8px; font-size: 16px; }

  /* Popup báo giá (#priceModal) — trước đây không có override nào cho mobile nên
     vẫn dùng nguyên số của desktop: lề 2 bên là TỔNG 20px (.modal-overlay) +
     30px (.modal-box) = 50px mỗi bên, rất chật trên điện thoại. Giảm cả 2 lớp
     và bóp padding/margin của từng khối con bên trong. */
  .modal-overlay { padding: 16px; }
  .modal-box { padding: 16px 12px; border-radius: 8px; }
  .confirm-header { margin-bottom: 12px; }
  .confirm-title { font-size: 20px; }
  .confirm-summary { padding: 12px; margin-bottom: 10px; }
  .confirm-summary p { margin-bottom: 8px; }
  .confirm-price-box { padding: 10px 12px; margin-bottom: 10px; }
  .price-notice { padding: 10px 12px; margin-bottom: 10px; }
  .confirm-form-grid { gap: 10px; margin-bottom: 10px; }
  .confirm-field { margin-bottom: 10px; }
  .confirm-field label { margin-bottom: 4px; }
  .confirm-field input,
  .confirm-field textarea { padding: 9px 10px; }
  .confirm-submit-btn { padding: 12px; }

  .services-row { grid-template-columns: 1fr 1fr; }
  .service-item { border-right: none; border-bottom: 1px dashed var(--color-border); }
  .fare-grid { grid-template-columns: 1fr 1fr; }
  .core-values-grid { grid-template-columns: 1fr 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .blog-card { flex-direction: column; }
  .blog-card .thumb { flex: none; height: 180px; }
  .clients-inner { flex-direction: column; align-items: flex-start; }
  .section-title { font-size: 26px; }
  .section { padding: 44px 0; }
  .pricing-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pricing-tabs button { width: 100%; }
  .pricing-table { display: none; }
  .pricing-cards { display: block; }
}