.booking-card .field input,
.booking-card .field textarea,
.booking-card .field select {
  min-width: 0;
}

/* Kiểu chữ giao diện hệ thống: hỗ trợ dấu tiếng Việt rõ, đều và không phụ thuộc máy chủ ngoài. */
.booking-card {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.booking-card .booking-kicker {
  font-weight: 700;
  letter-spacing: .075em;
}

.booking-card .booking-title {
  font-weight: 800;
  letter-spacing: -.035em;
}

.booking-card .booking-note,
.booking-card .field input,
.booking-card .field textarea,
.booking-card .field select {
  font-weight: 500;
  letter-spacing: -.012em;
}

.exact-booking {
  display: grid;
  gap: 14px;
}

.exact-contact,
.exact-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.exact-address {
  position: relative;
}

.exact-address .field {
  padding-right: 48px;
}

.exact-map-button {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 8px;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  color: #082744;
  background: #fff4cf;
  font-size: 19px;
  cursor: pointer;
}

.exact-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 245px;
  border: 1px solid #dce3eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(6, 28, 51, .18);
}

.exact-suggestion {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  color: #102b49;
  background: #fff;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
}

.exact-suggestion:last-child { border-bottom: 0; }
.exact-suggestion:hover,
.exact-suggestion:focus { background: #fff8df; outline: 0; }

.exact-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.exact-option-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: #0a294a;
  font-weight: 700;
  letter-spacing: -.018em;
}

.exact-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.exact-choice {
  min-height: 52px;
  border: 1px solid #d4dce6;
  border-radius: 12px;
  color: #102b49;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.012em;
  cursor: pointer;
}

.exact-choice.is-active {
  border-color: #f0b51d;
  background: #fff5d8;
  box-shadow: inset 0 0 0 1px #f0b51d;
}

.exact-schedule {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.exact-schedule input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #d4dce6;
  border-radius: 10px;
  color: #102b49;
  background: #fff;
}

.exact-toggles {
  display: grid;
  gap: 9px;
}

.exact-toggle {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  color: #102b49;
  background: #fff;
  cursor: pointer;
}

.exact-toggle input {
  width: 22px;
  height: 22px;
  accent-color: #1687e8;
}

.exact-toggle strong { display: block; font-weight: 700; letter-spacing: -.016em; }
.exact-toggle small { color: #778396; font-weight: 450; line-height: 1.3; letter-spacing: -.008em; }

.exact-price {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid #edb423;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff8e1, #fff1c1);
}

.exact-price-icon { font-size: 27px; }
.exact-price-label { display: block; color: #24364c; font-weight: 700; letter-spacing: -.015em; }
.exact-price-value { display: block; color: #082744; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.exact-price-note { display: block; margin-top: 3px; color: #788496; font-weight: 450; letter-spacing: -.008em; }

.exact-submit-status {
  min-height: 20px;
  color: #5f6d7d;
  font-size: 13px;
  text-align: center;
}

.exact-submit-status.is-error { color: #b42318; }
.exact-submit-status.is-success { color: #067647; font-weight: 700; }

.exact-price-table-wrap {
  grid-column: 1 / -1;
  overflow-x: auto;
  border: 1px solid #d8e2ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.exact-price-table-title {
  padding: 13px 16px;
  color: #0f2f59;
  background: #e8f4ff;
  border-bottom: 1px solid #d8e2ec;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.exact-price-table {
  width: 100%;
  min-width: 690px;
  border-collapse: collapse;
  color: #0a294a;
  text-align: center;
}

.exact-price-table th,
.exact-price-table td {
  padding: 9px 12px;
  border-right: 1px solid #d8e2ec;
  border-bottom: 1px solid #d8e2ec;
}

.exact-price-table th:last-child,
.exact-price-table td:last-child { border-right: 0; }
.exact-price-table tbody tr:last-child td { border-bottom: 0; }
.exact-price-table thead th { color: #fff; background: #0a294a; font-size: 16px; }
.exact-price-table thead th:nth-child(2) { color: #7e4800; background: #ffe49a; }
.exact-price-table thead th:nth-child(3) { background: #155fa0; }
.exact-price-table thead th:nth-child(4) { background: #383186; }
.exact-price-table tbody td:first-child { color: #fff; background: #0d3157; font-weight: 800; }
.exact-price-table tbody td:nth-child(2) { background: #fffaf0; }
.exact-price-table tbody td:nth-child(3) { background: #f0f8ff; }
.exact-price-table tbody td:nth-child(4) { background: #f8f3ff; }
.exact-price-table tbody td:not(:first-child) { font-weight: 800; }

.exact-price-footnote {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: #536273;
  font-weight: 700;
}

@media (max-width: 720px) {
  .exact-contact,
  .exact-addresses,
  .exact-options { grid-template-columns: 1fr; }
  .exact-price-value { font-size: 27px; }

  .price-grid,
  .exact-price-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .exact-price-table-wrap {
    overflow: hidden;
    border-radius: 12px;
  }

  .exact-price-table-title {
    padding: 10px 8px;
    font-size: 14px;
  }

  .exact-price-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: clamp(9.5px, 2.75vw, 12px);
  }

  .exact-price-table th,
  .exact-price-table td {
    padding: 8px 2px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .exact-price-table thead th {
    font-size: clamp(9.5px, 2.75vw, 12px);
    white-space: nowrap;
  }

  .exact-price-table th:first-child,
  .exact-price-table td:first-child { width: 23%; }
}

@media (max-width: 360px) {
  .exact-price-table th,
  .exact-price-table td { padding-inline: 1px; }
}

/* Biểu trưng thương hiệu dạng ảnh nền trong suốt. */
.brand-mark.brand-logo-image {
  display: block;
  height: 46px;
  width: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
}

@media (max-width: 640px) {
  .brand-mark.brand-logo-image {
    height: 40px;
    width: 40px;
  }
}

/* Tin tức giao thông trên trang chủ. */
.topbar .nav { gap: 20px; }
.topbar .brand { min-width: 220px; }
.home-news { background: #f4f7fb; }
.home-news-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.home-news-kicker { margin-bottom: 8px; color: #9b6a00; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.home-news-head .section-sub { margin: 8px 0 0; text-align: left; }
.home-news-all { flex: none; color: #875d00; font-size: 14px; font-weight: 900; }
.home-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.home-news-card { overflow: hidden; border: 1px solid #dce4ed; border-radius: 17px; background: #fff; box-shadow: 0 12px 28px rgba(12,35,60,.08); }
.home-news-cover { display: flex; align-items: center; justify-content: center; height: 160px; background: radial-gradient(circle at 80% 20%, rgba(255,200,61,.65), transparent 24%), linear-gradient(145deg,#0a2b50,#061a33); background-position: center; background-size: cover; }
.home-news-cover span { color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.home-news-body { padding: 20px; }
.home-news-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #6b7b8e; font-size: 11px; font-weight: 800; }
.home-news-meta span:first-child { color: #936300; }
.home-news-card h3 { margin: 0; font-size: 20px; line-height: 1.28; }
.home-news-card h3 a:hover { color: #936300; }
.home-news-card p { margin: 10px 0 16px; color: #5e6d80; font-size: 13px; line-height: 1.55; }
.home-news-read { color: #875d00; font-size: 12px; font-weight: 900; }
.home-news-loading { grid-column: 1 / -1; margin: 0; padding: 34px; text-align: center; color: #63738a; border: 1px dashed #cbd5df; border-radius: 14px; }

@media (max-width: 1180px) and (min-width: 941px) {
  .topbar .call-pill { display: none; }
}

@media (max-width: 820px) {
  .home-news-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .home-news-head { align-items: flex-start; flex-direction: column; }
  .home-news-grid { grid-template-columns: 1fr; }
  .home-news-cover { height: 175px; }
}

/* Bảng màu xanh - trắng: rõ ràng, hiện đại và dễ thao tác khi đặt xe. */
:root {
  --navy: #0f172a !important;
  --navy-2: #13233d !important;
  --navy-3: #17385f !important;
  --gold: #0a84ff !important;
  --gold-2: #3ba0ff !important;
  --ink: #0f172a !important;
  --muted: #64748b !important;
  --line: #dce8f3 !important;
  --panel: #f4f9ff !important;
  --panel-2: #e8f4ff !important;
  --shadow: 0 14px 34px rgba(15, 23, 42, .09) !important;
  --shadow-soft: 0 9px 26px rgba(15, 23, 42, .07) !important;
}

::selection { background: rgba(10, 132, 255, .22) !important; }

.topbar {
  background: rgba(15, 23, 42, .98) !important;
  border-bottom-color: rgba(255, 255, 255, .10) !important;
}
.brand-copy strong { color: #fff !important; }
.nav a:hover,
.nav a:focus-visible { color: #69b6ff !important; }
.nav a.active:after { background: #0a84ff !important; }
.call-pill {
  color: #fff !important;
  background: linear-gradient(135deg, #0a84ff, #3ba0ff) !important;
  box-shadow: 0 10px 24px rgba(10, 132, 255, .28) !important;
}

.hero-title .gold,
.pricing .section-title .gold,
.process .section-title .gold,
.why .section-title .gold,
.reviews .section-title .gold,
.cta-copy h2 span { color: #48a6ff !important; }
.round-icon {
  color: #58adff !important;
  background: rgba(10, 132, 255, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(88, 173, 255, .16) !important;
}

.booking-card,
.hero-photo__form {
  border-color: rgba(10, 132, 255, .42) !important;
  box-shadow: 0 28px 72px rgba(3, 18, 36, .30), 0 0 0 5px rgba(10, 132, 255, .07) !important;
}
.booking-card:before {
  background: linear-gradient(90deg, #0a84ff, #65b7ff, #0a84ff) !important;
}
.booking-kicker { color: #0873d7 !important; }
.booking-kicker:before {
  background: #0a84ff !important;
  box-shadow: 0 0 0 5px rgba(10, 132, 255, .13) !important;
}
.booking-note { color: #64748b !important; }
.booking-card .field svg { color: #0f2f59 !important; }
.booking-card .field input,
.booking-card .field select,
.booking-card .field textarea,
.exact-schedule input {
  color: #0f172a !important;
  border-color: #d7e4f0 !important;
  background: #fff !important;
}
.booking-card .field input:hover,
.booking-card .field select:hover,
.booking-card .field textarea:hover { border-color: #a9cce9 !important; }
.booking-card .field input:focus,
.booking-card .field select:focus,
.booking-card .field textarea:focus,
.exact-schedule input:focus {
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .15) !important;
}
.exact-map-button,
.quick-gps-button {
  color: #0873d7 !important;
  background: #e8f4ff !important;
}
.exact-map-button:hover,
.quick-gps-button:hover { background: #d8ecff !important; }
.exact-option-title { color: #0f2f59 !important; }
.exact-choice {
  color: #0f2f59 !important;
  border-color: #d5e2ee !important;
  background: #fff !important;
}
.exact-choice:hover { border-color: #8fc5f2 !important; background: #f7fbff !important; }
.exact-choice.is-active {
  color: #076fcf !important;
  border-color: #0a84ff !important;
  background: #e8f4ff !important;
  box-shadow: inset 0 0 0 1px #0a84ff !important;
}
.exact-toggle {
  color: #0f2f59 !important;
  border-color: #d9e5ef !important;
  background: #fff !important;
}
.exact-toggle:hover { border-color: #9bc9ef !important; background: #f7fbff !important; }
.exact-toggle input { accent-color: #0a84ff !important; }
.exact-toggle small { color: #64748b !important; }
.exact-price {
  border-color: #b8daf5 !important;
  background: linear-gradient(135deg, #e8f4ff, #f5faff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}
.exact-price-label { color: #36506f !important; }
.exact-price-value { color: #0f2f59 !important; }
.exact-price-note { color: #64748b !important; }
.exact-price-icon { filter: hue-rotate(165deg) saturate(1.25) !important; }

.btn-primary,
#exactSubmit,
.mobile-action-book,
.route-map-search-btn,
.route-map-finish {
  color: #fff !important;
  background: linear-gradient(135deg, #0a84ff, #3ba0ff) !important;
  box-shadow: 0 11px 26px rgba(10, 132, 255, .28) !important;
}
.btn-primary:focus-visible,
#exactSubmit:focus-visible,
.mobile-action-book:focus-visible { outline-color: rgba(10, 132, 255, .36) !important; }
.btn-primary.cta-motion,
.mobile-action-book { animation-name: blueCtaPulse !important; }
.btn-primary.cta-motion:before,
.mobile-action-book:before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent) !important; }
@keyframes blueCtaPulse {
  0%,100% { box-shadow: 0 10px 24px rgba(10,132,255,.24), 0 0 0 0 rgba(10,132,255,0); }
  50% { box-shadow: 0 14px 32px rgba(10,132,255,.36), 0 0 0 7px rgba(10,132,255,.09); }
}
.btn-secondary,
.booking-card .quick-call,
.mobile-action-call {
  color: #075fab !important;
  border-color: #0a84ff !important;
  background: #fff !important;
}

.pricing { background: #fff !important; }
.pricing-kicker,
.home-news-kicker { color: #0873d7 !important; }
.pricing-kicker::before { background: #0a84ff !important; }
.pricing-note {
  color: #385470 !important;
  border-color: #d7e9f8 !important;
  background: #f5faff !important;
}
.exact-price-table-wrap {
  border-color: #d7e6f2 !important;
  box-shadow: 0 13px 32px rgba(15, 23, 42, .08) !important;
}
.exact-price-table { color: #0f2f59 !important; }
.exact-price-table th,
.exact-price-table td { border-color: #dce8f3 !important; }
.exact-price-table thead th { color: #fff !important; background: #0f2f59 !important; }
.exact-price-table thead th:nth-child(2) { color: #074e8c !important; background: #cfe9ff !important; }
.exact-price-table thead th:nth-child(3) { background: #0a84ff !important; }
.exact-price-table thead th:nth-child(4) { background: #0969c3 !important; }
.exact-price-table tbody td:first-child { color: #fff !important; background: #17385f !important; }
.exact-price-table tbody td:nth-child(2) { background: #fbfdff !important; }
.exact-price-table tbody td:nth-child(3) { background: #eef7ff !important; }
.exact-price-table tbody td:nth-child(4) { background: #e8f3ff !important; }
.exact-price-footnote { color: #52667d !important; }

.process { background: linear-gradient(135deg, #0f172a, #102b4b 58%, #12365d) !important; }
.step { border-color: rgba(112, 183, 255, .18) !important; background: rgba(10, 132, 255, .06) !important; }
.step-circle {
  color: #fff !important;
  border-color: #3ba0ff !important;
  background: #12385f !important;
  box-shadow: 0 0 0 6px rgba(10, 132, 255, .07) !important;
}
.step-no,
.step:not(:last-child):after { color: #55acff !important; }
.why { background: linear-gradient(180deg, #f6fbff, #eef7ff) !important; }
.feature,
.review-card,
.home-news-card { border-color: #dce8f3 !important; box-shadow: 0 10px 28px rgba(15, 23, 42, .07) !important; }
.feature-icon {
  color: #0a84ff !important;
  background: #e8f4ff !important;
  box-shadow: inset 0 0 0 1px #c4e1fa !important;
}
.avatar { color: #0873d7 !important; background: linear-gradient(135deg, #e8f4ff, #dceeff) !important; }
.stars { color: #0a84ff !important; }
.review-card:after { color: #e8f4ff !important; }

.home-news { background: #f4f9ff !important; }
.home-news-all,
.home-news-meta span:first-child,
.home-news-read,
.home-news-card h3 a:hover { color: #0873d7 !important; }
.home-news-cover {
  background: radial-gradient(circle at 80% 20%, rgba(87,174,255,.52), transparent 25%), linear-gradient(145deg,#0f2f59,#0a84ff) !important;
}
.home-news-loading { color: #64748b !important; border-color: #bcdcf5 !important; }

.cta {
  background: linear-gradient(135deg, #0f172a, #12385f) !important;
  border-color: rgba(10, 132, 255, .20) !important;
}
.cta:before { background: linear-gradient(90deg, transparent, #0a84ff 18%, #55acff 82%, transparent) !important; }
.cta-actions .btn-secondary { color: #fff !important; border-color: #55acff !important; background: transparent !important; }
.footer { background: #09111f !important; }
.footer .brand-copy strong { color: #fff !important; }
.footer a:hover { color: #58adff !important; }

.route-map-header { background: #0f172a !important; }
.route-map-tab.is-active {
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, .15) !important;
  background: #e8f4ff !important;
}
.route-map-search:focus { border-color: #0a84ff !important; box-shadow: 0 0 0 3px rgba(10, 132, 255, .14) !important; }
.route-map-result:hover,
.route-map-result:focus-visible { background: #eef7ff !important; }
.route-map-mode { color: #075fab !important; background: #e8f4ff !important; }

@media (max-width: 940px) {
  .nav { background: #0f172a !important; }
}

@media (max-width: 640px) {
  .hero-photo__form { box-shadow: 0 18px 42px rgba(15, 23, 42, .18), 0 0 0 3px rgba(10, 132, 255, .07) !important; }
  .mobile-action-bar { background: rgba(15, 23, 42, .95) !important; border-color: rgba(106, 183, 255, .18) !important; }
}

/* Biểu mẫu rút gọn: ưu tiên số điện thoại và thao tác một chạm. */
.exact-contact { grid-template-columns: 1fr !important; }

.exact-phone-primary {
  position: relative;
  display: block;
}

.booking-card .exact-phone-primary input {
  height: 66px !important;
  padding: 5px 14px 23px 48px !important;
  font-size: 16px !important;
  font-weight: 750 !important;
}

.exact-phone-primary > svg {
  top: 25px !important;
  transform: translateY(-50%) !important;
}

.exact-phone-primary > small {
  position: absolute;
  z-index: 2;
  left: 48px;
  bottom: 9px;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}

.exact-phone-primary.is-invalid > small {
  color: #d92d20 !important;
  font-weight: 750 !important;
}

.exact-price {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.exact-price-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #b8daf5;
  border-radius: 11px;
  color: #075fab;
  background: #fff;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.exact-price-link:hover,
.exact-price-link:focus-visible {
  border-color: #0a84ff;
  background: #f7fbff;
}

.exact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.exact-actions .btn {
  min-height: 54px;
}

.exact-actions .btn > span {
  display: grid;
  gap: 1px;
  text-align: center;
}

.exact-actions .btn strong {
  font-size: 15px;
  line-height: 1.1;
}

.exact-actions .btn small {
  font-size: 10px;
  font-weight: 550;
  line-height: 1.15;
  opacity: .78;
}

@media (max-width: 640px) {
  .exact-actions { display: none !important; }
  .exact-phone-primary > small { font-size: 11px; }
  .exact-price { grid-template-columns: auto minmax(0, 1fr) !important; }
  .exact-price-link {
    grid-column: 1 / -1;
    min-height: 36px;
  }
}

.benefit-mobile { display: none; }

/* Bố cục điện thoại bám sát mẫu sáng: phần đầu, biểu mẫu, nút và bốn cam kết liền nhau. */
@media (max-width: 640px) {
  body {
    padding-bottom: 0 !important;
    background: #fff !important;
  }

  .topbar {
    position: relative !important;
    height: 72px !important;
    border-bottom: 0 !important;
    background-color: #e8f4ff !important;
    background-image: url('/assets/hero-mobile-sang-v1.png') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: auto 310px !important;
    box-shadow: none !important;
  }

  .topbar .container {
    width: calc(100% - 28px) !important;
  }

  .topbar .brand {
    min-width: 0 !important;
    gap: 9px !important;
  }

  .topbar .brand-mark.brand-logo-image {
    width: 47px !important;
    height: 47px !important;
  }

  .topbar .brand-copy strong {
    color: #0f2f59 !important;
    font-size: 16px !important;
  }

  .topbar .brand-copy span {
    color: #36506f !important;
    font-size: 7px !important;
  }

  .topbar .menu-toggle {
    color: #0f2f59 !important;
  }

  .hero-photo {
    padding: 0 0 22px !important;
    color: #0f172a !important;
    background-color: #fff !important;
    background-image: url('/assets/hero-mobile-sang-v1.png') !important;
    background-repeat: no-repeat !important;
    background-position: 73% -72px !important;
    background-size: auto 310px !important;
  }

  .hero-photo__bg,
  .hero-photo__shade,
  .hero-photo__mobile-image,
  .hero-photo__copy .hero-title,
  .hero-photo__copy .hero-lead,
  .mobile-action-bar {
    display: none !important;
  }

  .hero-photo__overlay {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .hero-photo__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .hero-photo__form {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 43px 14px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-photo__form::before {
    display: none !important;
  }

  .hero-photo__form .booking-kicker {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(10, 132, 255, .13) !important;
    border-radius: 999px !important;
    color: #0f2f59 !important;
    background: rgba(255, 255, 255, .76) !important;
    box-shadow: 0 6px 18px rgba(15, 47, 89, .05) !important;
    font-size: 10px !important;
    letter-spacing: .045em !important;
    backdrop-filter: blur(7px) !important;
  }

  .hero-photo__form .booking-kicker::before {
    width: 7px !important;
    height: 7px !important;
    background: #0a84ff !important;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, .11) !important;
  }

  .hero-photo__form .booking-title {
    margin: 0 !important;
    color: #0f2f59 !important;
    font-size: clamp(29px, 8.8vw, 38px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
  }

  .hero-photo__form .booking-title span {
    color: #0a84ff !important;
  }

  .hero-photo__form .booking-note {
    margin: 8px 0 15px !important;
    color: #52667d !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  .hero-photo__form .exact-booking {
    gap: 8px !important;
  }

  .hero-photo__form .exact-contact,
  .hero-photo__form .exact-addresses {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .hero-photo__form .exact-phone-primary input {
    height: 62px !important;
    min-height: 62px !important;
    padding: 3px 47px 20px 46px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  .hero-photo__form .exact-phone-primary > svg {
    top: 23px !important;
    left: 14px !important;
    width: 21px !important;
    height: 21px !important;
  }

  .hero-photo__form .exact-phone-primary > small {
    left: 46px !important;
    bottom: 10px !important;
    color: #64748b !important;
    font-size: 10.5px !important;
  }

  .exact-field-tail {
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    right: 13px !important;
    display: grid !important;
    width: 28px !important;
    height: 28px !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    color: #0f2f59 !important;
    border: 1.5px solid #0f2f59 !important;
    border-radius: 4px !important;
    pointer-events: none !important;
  }

  .exact-field-tail svg {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    transform: none !important;
  }

  .hero-photo__form .exact-address {
    min-height: 57px !important;
  }

  .hero-photo__form .exact-address .field {
    padding-right: 58px !important;
  }

  .hero-photo__form .exact-address-field input {
    height: 57px !important;
    min-height: 57px !important;
    padding: 3px 12px 18px 44px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
  }

  .hero-photo__form .exact-address-field > svg {
    top: 21px !important;
    left: 14px !important;
    width: 20px !important;
    height: 20px !important;
    transform: translateY(-50%) !important;
  }

  .hero-photo__form .exact-address-field > small {
    position: absolute !important;
    z-index: 2 !important;
    left: 44px !important;
    bottom: 8px !important;
    color: #718096 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  .hero-photo__form .exact-map-button {
    right: 0 !important;
    width: 51px !important;
    height: 51px !important;
    border-radius: 11px !important;
    color: #0f2f59 !important;
    background: rgba(232, 244, 255, .93) !important;
    font-size: 21px !important;
  }

  .hero-photo__form .exact-map-button svg {
    width: 23px !important;
    height: 23px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .hero-photo__form .exact-map-destination {
    transform: translateY(-50%) !important;
  }

  .hero-photo__form .exact-options {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  .hero-photo__form .exact-option-title {
    min-height: 17px !important;
    margin: 0 0 4px !important;
    color: #0f2f59 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .hero-photo__form .exact-choice-row {
    gap: 5px !important;
  }

  .hero-photo__form .exact-choice {
    min-height: 43px !important;
    padding: 3px 2px !important;
    border-radius: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  .hero-photo__form .exact-schedule {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  .hero-photo__form .exact-schedule input {
    min-height: 41px !important;
    font-size: 11px !important;
  }

  .hero-photo__form .exact-toggles {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .hero-photo__form .exact-toggle {
    grid-template-columns: 22px 1fr !important;
    gap: 9px !important;
    min-height: 43px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
  }

  .hero-photo__form .exact-toggle input {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-photo__form .exact-toggle strong {
    color: #0f2f59 !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
  }

  .hero-photo__form .exact-toggle small {
    display: none !important;
  }

  .hero-photo__form .exact-price {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 75px !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: rgba(221, 240, 255, .94) !important;
  }

  .hero-photo__form .exact-price-icon {
    display: grid !important;
    width: 38px !important;
    height: 46px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #50b1ff, #087ee8) !important;
    filter: none !important;
    font-size: 23px !important;
  }

  .hero-photo__form .exact-price-icon svg {
    width: 25px !important;
    height: 25px !important;
    color: #fff !important;
  }

  .hero-photo__form .exact-price-label {
    color: #36506f !important;
    font-size: 10px !important;
  }

  .hero-photo__form .exact-price-value {
    color: #0f2f59 !important;
    font-size: clamp(22px, 6.5vw, 28px) !important;
    white-space: nowrap !important;
  }

  .hero-photo__form .exact-price-note {
    overflow: hidden !important;
    max-width: 190px !important;
    color: #64748b !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .hero-photo__form .exact-price-link {
    grid-column: auto !important;
    min-height: 40px !important;
    padding: 0 9px !important;
    border-color: #b8daf5 !important;
    border-radius: 9px !important;
    color: #0f2f59 !important;
    font-size: 10.5px !important;
  }

  .hero-photo__form .exact-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  .hero-photo__form .exact-actions .btn,
  .hero-photo__form #exactSubmit,
  .hero-photo__form .quick-call {
    display: flex !important;
    min-height: 59px !important;
    padding: 6px 7px !important;
    border-radius: 10px !important;
  }

  .hero-photo__form .exact-actions .btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  .hero-photo__form .exact-actions .btn strong {
    font-size: 13.5px !important;
  }

  .hero-photo__form .exact-actions .btn small {
    font-size: 8.5px !important;
  }

  .hero-photo__form .exact-submit-status {
    min-height: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .hero-photo__form .exact-submit-status:empty {
    display: none !important;
  }

  .hero-photo__copy {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 17px 12px 4px !important;
    color: #0f172a !important;
    background: #fff !important;
    text-shadow: none !important;
  }

  .hero-photo__benefits {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
  }

  .hero-photo__benefits .hero-benefit {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    align-items: center !important;
    color: #0f2f59 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .hero-photo__benefits .round-icon {
    width: 42px !important;
    height: 42px !important;
    color: #0a84ff !important;
    border: 1px solid #cfe8fb !important;
    background: #eef8ff !important;
    box-shadow: none !important;
  }

  .hero-photo__benefits .round-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  .benefit-desktop {
    display: none !important;
  }

  .benefit-mobile {
    display: grid !important;
    gap: 3px !important;
  }

  .benefit-mobile b {
    color: #0f2f59 !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .benefit-mobile small {
    color: #718096 !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 370px) {
  .hero-photo__form { padding-inline: 10px !important; }
  .hero-photo__form .booking-title { font-size: 28px !important; }
  .hero-photo__form .exact-price { grid-template-columns: 32px minmax(0, 1fr) auto !important; }
  .hero-photo__form .exact-price-icon { width: 32px !important; height: 40px !important; font-size: 19px !important; }
  .hero-photo__form .exact-price-value { font-size: 21px !important; }
  .hero-photo__form .exact-price-link { padding-inline: 7px !important; font-size: 9.5px !important; }
  .benefit-mobile b { font-size: 9.5px !important; }
}

/* Bản vá bố cục: tách hẳn máy tính và điện thoại để hai giao diện không ảnh hưởng nhau. */
@media (min-width: 941px) {
  .hero-photo__form,
  .hero-photo__form .exact-booking,
  .hero-photo__form .exact-contact,
  .hero-photo__form .exact-addresses,
  .hero-photo__form .exact-options,
  .hero-photo__form .exact-toggles,
  .hero-photo__form .exact-price,
  .hero-photo__form .exact-price > div {
    min-width: 0 !important;
  }

  .hero-photo__form .exact-phone-primary input {
    height: 46px !important;
    min-height: 46px !important;
    padding: 3px 45px 17px 43px !important;
    font-size: 14px !important;
  }

  .hero-photo__form .exact-phone-primary > svg {
    top: 18px !important;
    left: 13px !important;
    width: 19px !important;
    height: 19px !important;
  }

  .hero-photo__form .exact-phone-primary > small {
    left: 43px !important;
    bottom: 7px !important;
    font-size: 9px !important;
  }

  .hero-photo__form .exact-field-tail {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    display: grid !important;
    width: 25px !important;
    height: 25px !important;
    place-items: center !important;
    transform: translateY(-50%) !important;
    border: 1.5px solid #0f2f59 !important;
    border-radius: 4px !important;
    color: #0f2f59 !important;
    pointer-events: none !important;
  }

  .hero-photo__form .exact-field-tail svg {
    position: static !important;
    width: 19px !important;
    height: 19px !important;
    transform: none !important;
  }

  .hero-photo__form .exact-address-field > small {
    display: none !important;
  }

  .hero-photo__form .exact-price {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .hero-photo__form .exact-price-icon {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: linear-gradient(180deg, #50b1ff, #087ee8) !important;
    filter: none !important;
  }

  .hero-photo__form .exact-price-icon svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
  }

  .hero-photo__form .exact-price-value,
  .hero-photo__form .exact-price-note {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

/* Điện thoại: toàn bộ thao tác đặt xe, gồm hai nút cuối, nằm trong màn hình đầu. */
@media (max-width: 640px) {
  .topbar {
    height: 54px !important;
  }

  .topbar .container {
    width: calc(100% - 22px) !important;
  }

  .topbar .brand-mark.brand-logo-image {
    width: 38px !important;
    height: 38px !important;
  }

  .topbar .brand-copy strong {
    font-size: 14px !important;
  }

  .topbar .brand-copy span {
    font-size: 6px !important;
  }

  .topbar .menu-toggle {
    width: 38px !important;
    height: 38px !important;
  }

  .hero-photo {
    padding-bottom: 10px !important;
    background-position: 73% -54px !important;
    background-size: auto 235px !important;
  }

  .hero-photo__form {
    padding: 7px 12px 0 !important;
  }

  .hero-photo__form .booking-kicker {
    margin-bottom: 3px !important;
    padding: 4px 9px !important;
    font-size: 8px !important;
  }

  .hero-photo__form .booking-title {
    font-size: clamp(25px, 7.7vw, 30px) !important;
  }

  .hero-photo__form .booking-note {
    margin: 3px 0 7px !important;
    font-size: 10px !important;
  }

  .hero-photo__form .exact-booking {
    gap: 5px !important;
  }

  .hero-photo__form .exact-contact,
  .hero-photo__form .exact-addresses {
    gap: 5px !important;
  }

  .hero-photo__form .exact-phone-primary input {
    height: 45px !important;
    min-height: 45px !important;
    padding: 2px 42px 15px 40px !important;
    font-size: 13px !important;
  }

  .hero-photo__form .exact-phone-primary > svg {
    top: 17px !important;
    left: 12px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .hero-photo__form .exact-phone-primary > small {
    left: 40px !important;
    bottom: 6px !important;
    font-size: 8.5px !important;
  }

  .exact-field-tail {
    right: 10px !important;
    width: 24px !important;
    height: 24px !important;
  }

  .exact-field-tail svg {
    width: 18px !important;
    height: 18px !important;
  }

  .hero-photo__form .exact-address {
    min-height: 42px !important;
  }

  .hero-photo__form .exact-address .field {
    padding-right: 45px !important;
  }

  .hero-photo__form .exact-address-field input {
    height: 42px !important;
    min-height: 42px !important;
    padding: 1px 9px 13px 38px !important;
    font-size: 12px !important;
  }

  .hero-photo__form .exact-address-field > svg {
    top: 16px !important;
    left: 12px !important;
    width: 17px !important;
    height: 17px !important;
  }

  .hero-photo__form .exact-address-field > small {
    left: 38px !important;
    bottom: 5px !important;
    font-size: 8px !important;
  }

  .hero-photo__form .exact-map-button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
  }

  .hero-photo__form .exact-map-button svg {
    width: 19px !important;
    height: 19px !important;
  }

  .hero-photo__form .exact-options {
    gap: 5px !important;
  }

  .hero-photo__form .exact-option-title {
    min-height: 13px !important;
    margin-bottom: 2px !important;
    font-size: 9.5px !important;
  }

  .hero-photo__form .exact-choice-row {
    gap: 4px !important;
  }

  .hero-photo__form .exact-choice {
    min-height: 35px !important;
    padding: 2px 1px !important;
    font-size: 10.5px !important;
  }

  .hero-photo__form .exact-toggles {
    gap: 4px !important;
  }

  .hero-photo__form .exact-toggle {
    grid-template-columns: 18px 1fr !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
  }

  .hero-photo__form .exact-toggle input {
    width: 17px !important;
    height: 17px !important;
  }

  .hero-photo__form .exact-toggle strong {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .hero-photo__form .exact-price {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 53px !important;
    padding: 6px 8px !important;
  }

  .hero-photo__form .exact-price-icon {
    width: 34px !important;
    height: 40px !important;
  }

  .hero-photo__form .exact-price-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  .hero-photo__form .exact-price-label {
    font-size: 8.5px !important;
  }

  .hero-photo__form .exact-price-value {
    font-size: clamp(19px, 5.8vw, 24px) !important;
  }

  .hero-photo__form .exact-price-note {
    max-width: 170px !important;
    font-size: 7.5px !important;
  }

  .hero-photo__form .exact-price-link {
    min-height: 34px !important;
    padding-inline: 7px !important;
    font-size: 9px !important;
  }

  .hero-photo__form .exact-actions .btn,
  .hero-photo__form #exactSubmit,
  .hero-photo__form .quick-call {
    min-height: 48px !important;
    padding: 4px 5px !important;
  }

  .hero-photo__form .exact-actions .btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-photo__form .exact-actions .btn strong {
    font-size: 12px !important;
  }

  .hero-photo__form .exact-actions .btn small {
    font-size: 7.5px !important;
  }

  .hero-photo__copy {
    padding-top: 12px !important;
  }
}

/* Màn hình điện thoại thấp: ưu tiên tuyệt đối việc đặt xe, phần giới thiệu nằm bên dưới. */
@media (max-width: 640px) and (max-height: 780px) {
  .hero-photo__copy {
    display: none !important;
  }

  .hero-photo__form .booking-kicker {
    padding-block: 3px !important;
  }

  .hero-photo__form .exact-toggle {
    min-height: 31px !important;
  }

  .hero-photo__form .exact-actions .btn,
  .hero-photo__form #exactSubmit,
  .hero-photo__form .quick-call {
    min-height: 45px !important;
  }
}

/* Bốn cam kết được đặt ngay dưới hai nút thao tác trên mọi kích thước. */
.hero-photo__benefits {
  display: none !important;
}

.exact-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px 2px 0;
  border-top: 1px solid #dce8f3;
}

.exact-benefit {
  display: grid;
  grid-template-rows: 25px auto;
  gap: 3px;
  min-width: 0;
  place-items: center;
  color: #0f2f59;
  text-align: center;
}

.exact-benefit > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #cfe8fb;
  border-radius: 50%;
  color: #0a84ff;
  background: #eef8ff;
}

.exact-benefit svg {
  width: 14px;
  height: 14px;
}

.exact-benefit strong {
  font-size: 9px;
  line-height: 1.05;
}

@media (min-width: 941px) {
  .exact-benefits {
    padding-top: 6px;
  }

  .exact-benefit {
    grid-template-rows: 27px auto;
  }

  .exact-benefit > span {
    width: 27px;
    height: 27px;
  }

  .exact-benefit svg {
    width: 15px;
    height: 15px;
  }

  .exact-benefit strong {
    font-size: 9.5px;
  }
}

@media (max-width: 640px) {
  .exact-benefits {
    gap: 3px;
    padding-top: 4px;
  }

  .exact-benefit strong {
    font-size: 8.5px;
  }
}

/* Khung nhấn cho khu vực đặt xe và cỡ nhập liệu dễ nhìn hơn. */
.hero-photo__form {
  border: 2px solid rgba(10, 132, 255, .72) !important;
  box-shadow:
    0 0 0 5px rgba(232, 244, 255, .62),
    0 22px 52px rgba(3, 35, 66, .24) !important;
}

@media (max-width: 640px) {
  .hero-photo__form {
    width: calc(100% - 16px) !important;
    margin: 6px auto 0 !important;
    padding: 8px 10px 8px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .42) !important;
    box-shadow:
      0 0 0 4px rgba(232, 244, 255, .72),
      0 14px 34px rgba(15, 47, 89, .16) !important;
    backdrop-filter: blur(1px) !important;
  }

  .hero-photo__form .exact-phone-primary input {
    height: 50px !important;
    min-height: 50px !important;
    padding: 2px 42px 16px 42px !important;
    font-size: 14px !important;
  }

  .hero-photo__form .exact-phone-primary > svg {
    top: 19px !important;
    width: 19px !important;
    height: 19px !important;
  }

  .hero-photo__form .exact-phone-primary > small {
    left: 42px !important;
    bottom: 7px !important;
    font-size: 9px !important;
  }

  .hero-photo__form .exact-address {
    min-height: 47px !important;
  }

  .hero-photo__form .exact-address .field {
    padding-right: 50px !important;
  }

  .hero-photo__form .exact-address-field input {
    height: 47px !important;
    min-height: 47px !important;
    padding: 1px 9px 15px 40px !important;
    font-size: 13px !important;
  }

  .hero-photo__form .exact-address-field > svg {
    top: 18px !important;
    left: 12px !important;
    width: 18px !important;
    height: 18px !important;
  }

  .hero-photo__form .exact-address-field > small {
    left: 40px !important;
    bottom: 6px !important;
    font-size: 8.5px !important;
  }

  .hero-photo__form .exact-map-button {
    width: 43px !important;
    height: 43px !important;
  }

  .hero-photo__form .exact-choice {
    min-height: 40px !important;
    font-size: 11.5px !important;
  }

  .hero-photo__form .exact-toggle {
    min-height: 36px !important;
  }

  .hero-photo__form .exact-toggle strong {
    font-size: 10.5px !important;
  }
}

@media (max-width: 640px) and (max-height: 700px) {
  .hero-photo__form {
    margin-top: 4px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .hero-photo__form .booking-note {
    margin-bottom: 5px !important;
  }
}

/* Cửa sổ xác nhận đặt xe thành công. */
body.booking-success-open {
  overflow: hidden !important;
}

.booking-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 24, 38, .61);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.booking-success-overlay[hidden] {
  display: none !important;
}

.booking-success-dialog {
  overflow: hidden;
  width: min(100%, 440px);
  padding: 30px 20px 21px;
  border-radius: 30px;
  color: #0b1c38;
  background: #fff;
  box-shadow: 0 20px 70px rgba(8, 21, 37, .31);
  text-align: center;
  animation: bookingSuccessAppear .25s ease-out;
}

.booking-success-mark {
  position: relative;
  display: grid;
  width: 118px;
  height: 118px;
  margin: 0 auto 18px;
  place-items: center;
}

.booking-success-halo {
  display: grid;
  width: 105px;
  height: 105px;
  place-items: center;
  border-radius: 50%;
  background: #e7f9ed;
}

.booking-success-tick {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #25b852, #078a35);
  box-shadow: 0 6px 14px rgba(22, 155, 73, .19);
}

.booking-success-tick svg {
  width: 45px;
  height: 45px;
}

.booking-success-ray {
  position: absolute;
  width: 17px;
  height: 6px;
  border-radius: 9px;
  background: #4dce71;
}

.booking-success-ray.ray-1 { top: 27px; left: -7px; transform: rotate(35deg); }
.booking-success-ray.ray-2 { top: 27px; right: -7px; transform: rotate(-35deg); }
.booking-success-ray.ray-3 { top: 78px; left: -14px; transform: rotate(-35deg); }
.booking-success-ray.ray-4 { top: 78px; right: -14px; transform: rotate(35deg); }

.booking-success-dialog h2 {
  margin: 8px 0 13px;
  color: #0b1c38;
  font-size: clamp(23px, 5.8vw, 31px);
  line-height: 1.18;
  letter-spacing: -.8px;
}

.booking-success-dialog p {
  max-width: 360px;
  margin: 0 auto 12px;
  color: #68758a;
  font-size: clamp(15px, 3.7vw, 18px);
  line-height: 1.58;
}

.booking-success-art {
  display: block;
  width: calc(100% + 40px);
  max-width: none;
  margin: 4px -20px 10px;
  aspect-ratio: 900 / 250;
  object-fit: cover;
  object-position: center bottom;
}

.booking-success-close {
  width: 100%;
  padding: 17px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(110deg, #0c468d, #07326c);
  box-shadow: 0 5px 12px rgba(11, 57, 122, .15);
  font-size: 20px;
  font-weight: 750;
  cursor: pointer;
}

.booking-success-close:focus-visible {
  outline: 3px solid #5cafff;
  outline-offset: 3px;
}

@keyframes bookingSuccessAppear {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 380px) {
  .booking-success-dialog {
    padding-top: 22px;
    border-radius: 23px;
  }

  .booking-success-mark {
    margin-bottom: 5px;
    transform: scale(.87);
  }

  .booking-success-dialog p {
    font-size: 15px;
  }

  .booking-success-close {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-success-dialog { animation: none; }
}