/* ── CSS Reset & Variables ── */
:root {
  --bg-app: #f4f5f9;
  --surface: #ffffff;
  
  --text-main: #1f2937;
  --text-muted: #6b7280;
  --navy-900: #172033;
  --navy-950: #0f172a;
  
  --primary: #6E82B2;
  --primary-hover: #5d6e99;
  --primary-dark: #536894;
  --primary-soft: #eef2fb;
  
  --amber: #E88C30;
  --amber-hover: #d17d29;
  
  --line: #e5e7eb;
  --line-light: #f3f4f6;
  
  --status-new: #ef4444;
  --status-contacted: #f59e0b;
  --status-confirmed: #10b981;
  --status-completed: #3b82f6;
  --status-cancelled: #6b7280;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-float: 0 12px 24px -8px rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.text-amber { color: var(--amber); }
.text-primary { color: var(--primary); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

/* Content sections used by the expanded informational pages */
.soft-chip { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#eef2f7; color:var(--navy-900); font-size:.88rem; font-weight:700; }
.vehicle-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:24px; }
.vehicle-card { background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.vehicle-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.vehicle-card img { width:100%; height:150px; object-fit:cover; display:block; }
.vehicle-card > div { padding:18px; }
.vehicle-card h3 { color:var(--navy-900); margin:5px 0 7px; font-size:1.12rem; }
.vehicle-card p, .feature-card p { color:var(--text-muted); line-height:1.65; font-size:.92rem; }
.vehicle-kicker { color:var(--amber); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:24px; }
.feature-card, .info-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); }
.feature-card h3 { color:var(--navy-900); margin:10px 0 5px; }
.feature-icon { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#eef2f7; font-size:1.35rem; }
.btn-white { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:12px; background:#fff; color:var(--primary); font-weight:800; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:24px; align-items:start; }
.contact-panel { overflow:hidden; border:1px solid var(--line); background:#fff; border-radius:24px; box-shadow:var(--shadow-md); }
.contact-panel-top { height:220px; background:var(--bg-app); }
.contact-panel-top img { width:100%; height:100%; object-fit:cover; }
.contact-action { display:flex; gap:12px; align-items:center; border-radius:16px; padding:14px; border:1px solid var(--line); }
.contact-action > span { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eef2f7; font-size:1.3rem; }
.contact-action strong { display:block; color:var(--navy-900); }
.contact-action small { display:block; color:var(--text-muted); margin-top:3px; }
.contact-action.phone { border-color:#dbe6f9; }.contact-action.zalo { border-color:#cfe8ff; }
.info-card h3 { color:var(--navy-900); margin-bottom:12px; }
.check-list { list-style:none; display:grid; gap:10px; color:var(--text-muted); line-height:1.55; }
.check-list li::before { content:''; display:inline-block; width:7px; height:12px; margin:0 11px 2px 2px; border-right:2px solid var(--primary); border-bottom:2px solid var(--primary); transform:rotate(45deg); }
.price-intro { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:center; margin-bottom:24px; }
.price-intro h2 { color:var(--navy-900); font-size:1.7rem; margin:7px 0 10px; }.price-intro p { color:var(--text-muted); line-height:1.65; }
.price-intro img { width:100%; height:180px; object-fit:cover; border-radius:20px; }
.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.price-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm); }
.price-card-head { display:flex; justify-content:space-between; color:var(--amber); font-size:.83rem; font-weight:800; text-transform:uppercase; }
.price-card h3 { margin:12px 0 8px; color:var(--navy-900); font-size:1.05rem; }.price-value { font-size:1.18rem; color:var(--primary); font-weight:800; }.price-note { min-height:44px; color:var(--text-muted); font-size:.88rem; margin:8px 0 15px; }
.service-tags { display:flex; flex-wrap:wrap; gap:9px; }.service-tags span { padding:8px 11px; border-radius:999px; background:var(--bg-app); color:var(--text-main); font-size:.88rem; }
.booking-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); }
.mb-24 { margin-bottom:24px; }
@media (max-width:767px) { .contact-layout, .price-intro { grid-template-columns:1fr; }.price-intro img { height:200px; }.contact-panel-top { height:190px; } }

/* Responsive typography, spacing and image rules for informational pages */
img { max-width: 100%; }
.content-section { padding: 48px 0; }
.section-white { background: #fff; }
.section-muted { background: var(--bg-app); }
.content-narrow { max-width: 1000px; }
.page-lead { max-width: 680px; margin: 10px auto 0; color: var(--text-muted); line-height: 1.7; }
.eyebrow { display: inline-block; color: var(--amber); font-size: .78rem; font-weight: 800; letter-spacing: .55px; line-height: 1.45; }
.split-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 32px; align-items: center; }
.split-copy h2 { color: var(--navy-900); font-size: clamp(1.55rem, 3.8vw, 2.25rem); line-height: 1.22; margin: 10px 0 14px; }
.split-copy p, .contact-panel-body p, .info-card p, .price-intro p { color: var(--text-muted); line-height: 1.75; overflow-wrap: anywhere; }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip-mark { display:inline-block; width:6px; height:10px; margin:0 8px 2px 1px; border-right:2px solid var(--primary); border-bottom:2px solid var(--primary); transform:rotate(45deg); }
.feature-photo { margin: 0; height: 290px; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-icon { color: var(--primary); }
.fleet-icon { width: 44px; height: 44px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.fleet-icon svg { width: 34px; height: 34px; display: block; }
.commitment-icon { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; color: var(--primary); }
.commitment-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.airport-commitment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.airport-commitment-item { min-width: 0; padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #1b315b, #294b82); box-shadow: 0 8px 18px rgba(21, 47, 91, .16); }
.airport-commitment-item:nth-child(2) { background: linear-gradient(145deg, #23477f, #3564a9); }
.airport-commitment-item:nth-child(3) { background: linear-gradient(145deg, #243c68, #31558d); }
.airport-commitment-item:nth-child(4) { background: linear-gradient(145deg, #1e3b6a, #2c5c9b); }
.airport-commitment-icon { display: grid; width: 42px; height: 42px; margin-bottom: 16px; place-items: center; border-radius: 12px; color: #fff; background: rgba(255,255,255,.16); }
.airport-commitment-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.airport-commitment-item h3 { margin: 0 0 7px; color: #fff; font-size: 1.02rem; line-height: 1.35; }
.airport-commitment-item p { margin: 0; color: rgba(255,255,255,.83); font-size: .86rem; line-height: 1.58; }
.airport-commitment-heading { margin-bottom: 22px; }
.airport-process-section { margin-top: 42px; }
.confirm-icon svg, .action-icon svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.action-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); vertical-align: middle; margin-right: 6px; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin: 0 7px 1px 0; border-radius: 50%; background: currentColor; }
.airport-fixed .clean-select:disabled, .airport-fixed .clean-input:disabled { color: var(--navy-900); background: #f8fafc; opacity: 1; border-color: #d7deea; }
.feature-icon svg, .contact-action-icon svg, .card-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.about-cta { margin-top: 32px; padding: 30px 22px; color: #fff; background: linear-gradient(135deg, var(--primary), #8799c3); border-radius: 24px; text-align: center; }
.about-cta h3 { font-size: 1.35rem; margin-bottom: 8px; }.about-cta p { opacity: .9; margin-bottom: 20px; }

/* ── About page ── */
.about-hero { overflow: hidden; padding: 58px 0 46px; background: linear-gradient(135deg, #f4f7fc 0%, #fff 58%, #fff5e7 100%); }
.about-hero-grid, .about-split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(300px, .98fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.about-hero-copy h1 { max-width: 720px; margin: 9px 0 15px; color: var(--navy-950); font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.1; letter-spacing: -.035em; }
.about-hero-copy > p, .about-intro-copy > p, .about-commitment-copy > p { max-width: 640px; margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.75; }
.about-hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 21px 0; }
.about-hero-points span { padding: 7px 10px; border: 1px solid #d5dfef; border-radius: 999px; color: var(--primary-dark); background: rgba(255,255,255,.78); font-size: .79rem; font-weight: 800; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.about-hero-actions .btn-amber { align-items: center; min-height: 48px; }
.about-hero-call { display: inline-flex; align-items: center; min-height: 48px; padding: 0 15px; border: 1px solid #cbd7eb; border-radius: 12px; color: var(--primary-dark); background: #fff; font-size: .9rem; font-weight: 800; }
.about-hero-photo { min-height: 300px; margin: 0; overflow: hidden; border: 1px solid #d8e1ef; border-radius: 28px; background: #fff; box-shadow: 0 18px 42px rgba(25, 53, 100, .14); }
.about-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-intro-section, .about-commitment-section { padding: 72px 0; background: var(--surface); }
.about-intro-photo { height: 330px; margin: 0; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-md); }
.about-intro-photo img, .about-commitment-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-intro-photo img { object-position: center 55%; }
.about-intro-copy h2, .about-commitment-copy h2 { margin: 8px 0 12px; color: var(--navy-950); font-size: clamp(1.65rem, 3.4vw, 2.35rem); line-height: 1.2; letter-spacing: -.025em; }
.about-check-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.about-check-list li { position: relative; padding-left: 27px; color: var(--text-main); font-size: .94rem; line-height: 1.58; }
.about-check-list li::before { position: absolute; top: .38rem; left: 4px; width: 7px; height: 12px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); content: ""; transform: rotate(45deg); }
.about-services-section { padding: 70px 0; background: var(--bg-app); }
.about-heading-centered { margin-right: auto; margin-left: auto; text-align: center; }.about-heading-centered p { margin-right: auto; margin-left: auto; }
.about-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.about-service-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.about-service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.about-service-card > img { display: block; width: 100%; height: 190px; object-fit: cover; }.about-service-card:nth-child(2) > img { object-position: center; }.about-service-card:nth-child(3) > img { object-position: center 58%; }
.about-service-card > div { padding: 20px; }.about-service-card span { color: var(--amber); font-size: .72rem; font-weight: 800; letter-spacing: .06em; }.about-service-card h3 { margin: 7px 0 7px; color: var(--navy-950); font-size: 1.13rem; }.about-service-card p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.about-strength-section { padding: 74px 0; background: var(--surface); border-top: 1px solid var(--line); }
.about-heading-light h2 { color: var(--navy-950); }.about-heading-light p { color: var(--text-muted); }.about-heading-light .eyebrow { color: var(--amber); }
.about-strength-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-strength-grid article { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-app); }.about-strength-icon { display: grid; width: 48px; height: 48px; margin-bottom: 17px; place-items: center; border-radius: 13px; color: #fff; background: var(--primary); }.about-strength-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.about-strength-grid h3 { margin: 0 0 7px; color: var(--navy-950); font-size: 1.05rem; }.about-strength-grid p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.62; }
.about-commitment-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, .78fr); }.about-commitment-photo { height: 390px; margin: 0; overflow: hidden; border-radius: 24px; box-shadow: var(--shadow-md); }.about-commitment-photo img { object-position: center 62%; }
.about-commitment-list { display: grid; gap: 11px; margin-top: 24px; }.about-commitment-list div { padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-app); }.about-commitment-list strong, .about-commitment-list span { display: block; }.about-commitment-list strong { color: var(--navy-950); font-size: .92rem; }.about-commitment-list span { margin-top: 3px; color: var(--text-muted); font-size: .84rem; line-height: 1.55; }
.about-process-section { margin-top: 0; }.about-platform-section { padding: 70px 0; background: var(--bg-app); }.about-platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.about-platform-card { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; color: var(--navy-950); background: #fff; box-shadow: 0 4px 12px rgba(24, 42, 75, .05); transition: transform .2s, box-shadow .2s; }.about-platform-card:hover { color: var(--navy-950); transform: translateY(-2px); box-shadow: var(--shadow-sm); }.about-platform-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--primary); background: #e8eefb; }.about-platform-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.about-platform-icon img { width: 25px; height: 25px; object-fit: contain; }.about-platform-zalo { background: #e8f3ff; }.about-platform-facebook .about-platform-icon { color: #fff; background: #1877f2; }.about-platform-card > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }.about-platform-card strong { font-size: .9rem; }.about-platform-card small { color: var(--text-muted); font-size: .74rem; line-height: 1.35; }
.about-final-contact { padding: 44px 0 68px; background: var(--surface); }.about-final-contact .homepage-direct-contact { margin-top: 0; }.homepage-direct-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .about-hero-grid, .about-split { grid-template-columns: 1fr; gap: 30px; }.about-hero-photo { max-width: 700px; width: 100%; min-height: 0; height: 340px; }.about-hero-photo img { object-position: center; }.about-intro-photo { order: 2; max-width: 700px; width: 100%; }.about-commitment-photo { max-width: 560px; width: 100%; }.about-strength-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.about-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .about-hero { padding: 38px 0 34px; }.about-hero-copy h1 { font-size: 2.05rem; }.about-hero-copy > p { font-size: .94rem; line-height: 1.66; }.about-hero-photo { height: auto; aspect-ratio: 16 / 10; border-radius: 20px; }.about-hero-points { gap: 7px; margin: 17px 0; }.about-hero-points span { font-size: .72rem; }.about-hero-actions { display: grid; grid-template-columns: 1fr; }.about-hero-actions a { justify-content: center; }.about-intro-section, .about-commitment-section, .about-services-section, .about-strength-section, .about-platform-section { padding: 46px 0; }.about-intro-photo { height: auto; aspect-ratio: 16 / 10; border-radius: 19px; }.about-intro-copy h2, .about-commitment-copy h2 { font-size: 1.62rem; }.about-service-grid, .about-strength-grid, .about-platform-grid { grid-template-columns: 1fr; gap: 12px; }.about-service-card > img { height: 185px; }.about-strength-grid article { padding: 19px; }.about-commitment-photo { height: auto; aspect-ratio: 4 / 5; border-radius: 20px; }.about-process-section { margin-top: 0; }.about-final-contact { padding: 32px 0 48px; } }
.contact-layout { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
.contact-panel-top { height: 230px; }
.contact-panel-body { padding: 24px; }
.contact-panel-body h2 { color: var(--navy-900); margin: 8px 0 10px; line-height: 1.25; }
.contact-actions { display: grid; gap: 12px; margin-top: 20px; }
.contact-action { min-width: 0; }
.contact-action-icon { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #eef2f7; color: var(--primary); }
.contact-action > span:last-child { width:auto; height:auto; min-width:0; flex:1 1 auto; display:block; padding:0; background:transparent; border-radius:0; font-size:inherit; }.contact-action strong, .contact-action small { overflow-wrap:anywhere; }
.contact-info-stack { display: grid; gap: 16px; align-content: start; }
.number-list { padding-left: 22px; color: var(--text-muted); line-height: 1.8; }.number-list li { padding-left: 3px; }
.info-card-highlight { background: #fff8ed; border-color: #f8d9ad; }.info-card-highlight p { margin-bottom: 16px; }
.price-intro { grid-template-columns: minmax(0, 1fr) 320px; }.price-intro h2 { color: var(--navy-900); font-size: clamp(1.45rem, 3.5vw, 1.8rem); line-height: 1.25; margin: 8px 0 10px; }
.price-intro img { height: 210px; object-fit: cover; border-radius: 20px; display: block; }
.price-notice { margin-bottom: 24px; padding: 18px 20px; border: 1px solid #f1d29f; border-radius: 16px; background: #fff9ef; color: var(--navy-950); line-height: 1.65; overflow-wrap: anywhere; }
.price-card { min-width: 0; }.price-card h3 { overflow-wrap: anywhere; line-height: 1.35; }.card-arrow { display: inline-flex; color: var(--primary); }.card-arrow svg { width: 18px; height: 18px; }
.price-note { overflow-wrap: anywhere; line-height: 1.5; }.service-box { margin-top: 28px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }.service-box h3 { color: var(--navy-900); margin-bottom: 12px; }.service-tags span { line-height: 1.35; }
.price-list { display: grid; gap: 10px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.price-row-main { min-width: 0; }
.price-row-type { display: inline-block; color: var(--amber); font-size: .76rem; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.price-row h3 { margin: 4px 0 3px; color: var(--navy-900); font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.price-row p { color: var(--text-muted); font-size: .86rem; line-height: 1.45; }
.price-row-value { flex: 0 0 auto; max-width: 38%; color: var(--primary); font-size: 1rem; font-weight: 800; text-align: right; }
.secondary-cta { margin-left: 8px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .content-section { padding: 32px 0; }
  .page-hero { padding: 30px 0 18px; }
  .page-hero h1 { font-size: 1.55rem; line-height: 1.25; overflow-wrap: anywhere; }
  .page-lead { font-size: .95rem; }
  .split-feature, .contact-layout, .price-intro { grid-template-columns: 1fr; gap: 22px; }
  .feature-photo { height: 190px; border-radius: 18px; }
  .vehicle-grid { grid-template-columns: 1fr; gap: 14px; }
  .vehicle-card img { height: 175px; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feature-card { padding: 16px; }
  .feature-card h3 { font-size: 1rem; }
  .feature-card p { font-size: .88rem; }
  .contact-panel-top { height: 180px; }
  .contact-panel-body { padding: 20px 16px; }
  .price-intro img { height: 180px; }
  .price-card { padding: 16px; }
  .price-row { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px 16px; }
  .price-row-value { max-width: none; text-align: left; }
  .secondary-cta { margin: 10px 0 0; }
}
@media (max-width: 380px) {
  .feature-grid { grid-template-columns: 1fr; }
  .soft-chip { width: 100%; justify-content: center; }
}

/* Final mobile guardrails for the informational pages. These rules intentionally
   mirror the home page's full-width mobile rhythm and prevent intrinsic SVG/image
   sizes from creating horizontal overflow on older mobile browsers. */
html, body { width: 100%; min-width: 0; overflow-x: hidden; }
.wrap, .content-section .wrap, .page-hero .wrap { width: 100%; min-width: 0; }
.content-narrow { width: 100%; min-width: 0; }
.feature-icon, .contact-action-icon, .card-arrow { flex: 0 0 auto; }
.feature-icon svg, .contact-action-icon svg, .card-arrow svg { display: block; max-width: none; }

@media (max-width: 767px) {
  .wrap { max-width: none; padding-left: 16px; padding-right: 16px; }
  .page-hero .wrap, .content-section .wrap { width: 100%; }
  .split-feature, .contact-layout, .price-intro { display: flex; flex-direction: column; width: 100%; min-width: 0; }
  .split-copy, .feature-photo, .contact-panel, .contact-info-stack, .price-intro > div, .price-intro > img { width: 100%; max-width: none; min-width: 0; }
  .feature-photo { height: 190px; }
  .feature-photo img, .vehicle-card img, .contact-panel-top img, .price-intro img { width: 100%; max-width: none; object-fit: cover; }
  .vehicle-card, .feature-card, .info-card, .price-card, .service-box { width: 100%; min-width: 0; }
  .feature-grid { display: grid; grid-template-columns: 1fr; width: 100%; }
  .feature-icon { width: 42px; height: 42px; }
  .feature-icon svg { width: 22px !important; height: 22px !important; }
  .contact-action-icon { width: 42px; height: 42px; }
  .contact-action-icon svg { width: 22px !important; height: 22px !important; }
  .card-arrow svg { width: 18px !important; height: 18px !important; }
}

/* ── Desktop/Mobile Utils ── */
.desktop-only { display: none; }
.mobile-only { display: block; }
@media (min-width: 768px) {
  .desktop-only { display: flex; }
  .mobile-only { display: none !important; }
  body { padding-bottom: 0; }
}

@media (max-width: 767px) {
  .brand-logo { width: 190px; max-width: calc(100vw - 72px); max-height: 54px; }
  .drawer-brand-logo { width: 210px; max-width: calc(100vw - 86px); }
  .brand { font-size: 1rem; }
  .app-greeting { padding-top: 12px; }
}

header.site {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.header-row {
  display: flex; justify-content: space-between; align-items: center;
  height: 64px;
}
.brand { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-main); }
.brand-logo {
  width: 160px; height: auto; max-height: 46px;
  object-fit: contain; object-position: center;
  display: block; flex-shrink: 0;
}
.drawer-brand-logo { width: 160px; max-width: calc(100vw - 86px); max-height: 42px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 1.1rem; font-weight: 800; color: var(--primary); letter-spacing: -0.3px; }
.brand-route { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.2px; }
.main-nav { display: flex; gap: 24px; }
.main-nav a { font-weight: 500; color: var(--text-muted); transition: 0.2s; }
.main-nav a:hover, .main-nav a.active { color: var(--primary); }
.header-phone { font-weight: 600; color: var(--primary); display: flex; align-items: center; }

/* ── Mobile Greeting ── */
.app-greeting {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 16px;
  background: var(--surface);
}
.app-greeting .avatar {
  width: 48px; height: 48px;
  background: #eef0f6; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  color: var(--primary);
}
.greeting-text h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.greeting-text p { font-size: 0.95rem; color: var(--amber); font-weight: 600; margin-top: 4px; }
@media (min-width: 768px) { .app-greeting { display: none; } }

/* ── Hero Banner ── */
.hero-banner {
  width: 100%; max-height: 220px; overflow: hidden;
  position: relative;
}
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 768px) { .hero-banner { max-height: 400px; border-radius: 0 0 24px 24px; } }

/* ── Booking Card ── */
.booking-section {
  position: relative;
  margin-top: -30px;
  z-index: 10;
}
@media (min-width: 768px) { .booking-section { margin-top: -80px; } }

.app-booking-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 24px 16px;
  box-shadow: var(--shadow-float);
  border: 1px solid rgba(0,0,0,0.03);
}
.booking-contact-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #fff7ed, #fff); border: 1px solid #f3d5ae; }
.booking-contact-title { display: flex; flex-direction: column; gap: 2px; color: var(--navy-900); white-space: nowrap; }
.booking-contact-title strong { font-size: 1.12rem; font-weight: 800; }.booking-contact-title span { color: var(--primary); font-size: .94rem; font-weight: 800; }
.booking-contact-actions { display: flex; align-items: center; gap: 8px; }
.booking-contact-link { min-height: 45px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 11px; color: #fff; font-size: .78rem; line-height: 1.15; }
.booking-contact-link:hover { color: #fff; transform: translateY(-1px); }
.booking-contact-link svg { width: 20px; height: 20px; flex: 0 0 auto; }.booking-contact-link img { width: 23px; height: 23px; flex: 0 0 auto; }
.booking-contact-link span { display: block; }.booking-contact-link b { font-size: .83rem; }.booking-contact-call { background: #d92b24; }.booking-contact-zalo { background: #087ff5; }
.booking-direct-contact { margin: 16px 0 8px; padding: 18px; border: 1px solid #cdd9ef; border-radius: 20px; background: linear-gradient(135deg, #f5f8ff 0%, #fff 58%, #fff7e8 100%); box-shadow: 0 10px 24px rgba(31, 55, 101, .08); }
.booking-direct-contact > p { margin: 0 0 12px; color: var(--text-muted); font-size: .9rem; font-weight: 700; text-align: center; }
.booking-direct-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.booking-direct-action { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 68px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--navy-900); box-shadow: 0 4px 12px rgba(31, 55, 101, .07); transition: transform .2s, box-shadow .2s, border-color .2s; }
.booking-direct-action:hover { color: var(--navy-900); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 55, 101, .13); border-color: #aebfdf; }
.booking-direct-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--primary); background: #e8eefb; }
.booking-direct-icon svg { width: 20px; height: 20px; }.booking-direct-icon img { width: 25px; height: 25px; object-fit: contain; }
.booking-direct-action > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; line-height: 1.2; }
.booking-direct-action strong { font-size: .92rem; font-weight: 800; }.booking-direct-action small { color: var(--text-muted); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.booking-direct-call .booking-direct-icon, .booking-direct-zalo .booking-direct-icon { color: var(--primary); background: #e8f3ff; }

/* Route Toggle */
.app-route-toggle {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 24px;
}
.toggle-label { font-weight: 700; font-size: 1rem; }
.toggle-options {
  display: flex; background: var(--bg-app); border-radius: 12px; padding: 4px; gap: 4px;
}
.toggle-options button {
  flex: 1;
  background: transparent; border: none;
  padding: 12px 0; border-radius: 10px;
  font-size: 0.95rem; font-weight: 600; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
  min-height: 48px; /* Mobile touch target */
  line-height: 1.25;
}
.toggle-options button svg { width: 20px; height: 20px; }
.toggle-options button.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 12px rgba(110,130,178,.34);
  font-weight: 800;
}
.route-label { display: inline-block; text-align: center; white-space: nowrap; }
.route-arrow { display: inline-block; margin: 0 2px; font-weight: 800; }
.route-option-icon { flex: 0 0 auto; }

/* Modern Location Input Grid */
.app-location-group {
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}

.location-box {
  background: var(--surface);
  border: 1.5px solid var(--line-light);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.location-box:focus-within {
  border-color: var(--primary);
}

.location-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  font-weight: 700; font-size: 1.05rem;
}
.location-header svg { width: 20px; height: 20px; }

.address-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}

.clean-input, .clean-select {
  width: 100%; border: 1px solid var(--line); background: var(--bg-app);
  border-radius: 12px;
  font-size: 16px; /* Prevents iOS zoom */
  font-weight: 500; color: var(--text-main);
  outline: none; padding: 0 16px;
  height: 48px; /* Mobile touch target */
  -webkit-appearance: none;
}
.clean-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}
.clean-input:focus, .clean-select:focus {
  border-color: var(--primary); background: var(--surface);
}
.clean-select:valid:not(:disabled) { border-color: #9aabd0; background-color: #eef3ff; color: var(--navy-900); font-weight: 700; }
.clean-input::placeholder { color: #9ca3af; font-weight: 400; }
.full-width { grid-column: span 2; }

/* Date & Phone Grid */
.app-row-2col {
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 600px) {
  .app-row-2col { display: grid; grid-template-columns: 1fr 1fr; }
}

.app-input-box {
  background: var(--surface); border: 1.5px solid var(--line-light);
  border-radius: 16px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.app-input-box:focus-within { border-color: var(--primary); }
.input-content { flex: 1; display: flex; flex-direction: column; }
.input-content label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.input-content .clean-input, .input-content .clean-select {
  border: none; background: transparent; padding: 0; height: auto; min-height: 24px;
}

/* Time Toggle & Native Pickers */
.time-type-toggle {
  display: flex; background: var(--bg-app); border-radius: 12px; padding: 4px; gap: 4px;
}
.time-type-toggle button {
  flex: 1; background: transparent; border: none; padding: 10px 0; border-radius: 10px;
  font-size: 0.95rem; font-weight: 600; color: var(--text-muted); transition: 0.2s;
}
.time-type-toggle button.active {
  background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(110,130,178,.28); font-weight: 800;
}
.datetime-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;
}
.datetime-grid input[type="date"], .datetime-grid input[type="time"] {
  width: 100%; border: 1px solid var(--line); background: var(--bg-app);
  border-radius: 10px; font-size: 16px; color: var(--text-main); font-weight: 500;
  height: 44px; padding: 0 10px; outline: none;
}
.datetime-grid input[type="date"]:focus, .datetime-grid input[type="time"]:focus {
  border-color: var(--primary); background: var(--surface);
}

/* Submit Button */
.app-btn-primary {
  width: 100%; background: var(--amber); color: #fff;
  border: none; border-radius: 16px; height: 56px;
  font-size: 1.1rem; font-weight: 700;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  box-shadow: 0 6px 16px rgba(232, 140, 48, 0.35);
  transition: 0.2s; position: relative; cursor: pointer;
}
.app-btn-primary:hover { background: var(--amber-hover); box-shadow: 0 8px 20px rgba(232, 140, 48, 0.45); }
.app-btn-primary:active { transform: scale(0.98); }
.app-btn-primary:disabled {
  background: #b0b8c9; color: rgba(255,255,255,0.7);
  box-shadow: none; cursor: not-allowed; transform: none;
}
.app-btn-primary svg { width: 24px; height: 24px; }
.app-btn-primary.loading .btn-text, .app-btn-primary.loading svg { opacity: 0; }
.app-btn-primary .spinner {
  display: none; width: 24px; height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.app-btn-primary.loading .spinner { display: block; }

/* ── Easy Booking Callout ── */
.easy-booking-card {
  background: var(--surface); border-radius: 20px;
  padding: 20px; display: flex; justify-content: space-between; align-items: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.eb-content { display: flex; align-items: center; gap: 16px; }
.eb-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(232, 140, 48, 0.1); color: var(--amber);
  display: flex; justify-content: center; align-items: center;
}
.eb-icon svg { width: 28px; height: 28px; }
.eb-content h3 { font-size: 1.1rem; font-weight: 700; }
.eb-content p { font-size: 0.9rem; color: var(--text-muted); max-width: 250px; margin-top: 4px; }
.eb-call-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-light);
  display: flex; justify-content: center; align-items: center; color: var(--primary);
  box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.eb-call-btn svg { width: 26px; height: 26px; }

/* ── Strengths ── */
.bg-dim { background-color: var(--surface); }
.section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
.section-head p { color: var(--text-muted); line-height: 1.65; }
.modern-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .modern-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.modern-card { background: var(--bg-app); border-radius: 20px; padding: 24px; }
.modern-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--primary); color: #fff;
  display: flex; justify-content: center; align-items: center; margin-bottom: 16px;
}
.modern-icon svg { width: 24px; height: 24px; }
.modern-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.modern-card p { font-size: 0.95rem; color: var(--text-muted); }

/* ── Homepage booking journey and reasons to choose us ── */
.homepage-process-section { margin-top: 48px; padding: 64px 0; background: var(--surface); border-top: 1px solid var(--line-light); }
.homepage-section-heading { max-width: 700px; margin-bottom: 30px; }
.homepage-section-heading h2 { margin: 8px 0 10px; color: var(--navy-950); font-size: clamp(1.55rem, 3.5vw, 2.15rem); line-height: 1.2; letter-spacing: -.02em; }
.homepage-section-heading p { max-width: 660px; color: var(--text-muted); font-size: .98rem; line-height: 1.7; }
.homepage-section-heading-centered { margin-right: auto; margin-left: auto; text-align: center; }
.homepage-section-heading-centered p { margin-right: auto; margin-left: auto; }
.homepage-section-photo { width: 100%; max-width: 780px; height: clamp(210px, 31vw, 340px); margin: 0 0 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-app); box-shadow: var(--shadow-sm); }
.homepage-section-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.homepage-process-photo { margin-left: auto; }
.homepage-process-photo img { object-position: center 58%; }
.homepage-why-photo { margin-right: auto; margin-left: auto; }
.homepage-why-photo img { object-position: center 52%; }
.homepage-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.homepage-process-step { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-app); }
.homepage-step-number { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 10px; background: var(--primary); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .04em; }
.homepage-process-step h3 { margin: 0 0 8px; color: var(--navy-950); font-size: 1.03rem; line-height: 1.35; }
.homepage-process-step p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.62; }
.homepage-direct-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 22px 24px; border: 1px solid #dbe4f4; border-radius: 18px; background: var(--primary-soft); }
.homepage-direct-contact .eyebrow { color: var(--primary-dark); }
.homepage-direct-contact h3 { margin: 5px 0 5px; color: var(--navy-950); font-size: 1.08rem; }
.homepage-direct-contact p { max-width: 650px; margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.55; }
.homepage-direct-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.homepage-direct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 102px; padding: 11px 15px; border-radius: 12px; font-size: .88rem; font-weight: 800; transition: transform .2s, box-shadow .2s; }
.homepage-direct-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.homepage-direct-btn svg { width: 20px; height: 20px; }
.homepage-direct-btn img { width: 22px; height: 22px; object-fit: contain; }
.homepage-direct-btn-call, .homepage-direct-btn-zalo { color: var(--primary); background: var(--surface); border: 1px solid var(--line); }
.homepage-direct-btn-call:hover, .homepage-direct-btn-zalo:hover { background: var(--primary-soft); border-color: #cbd8ef; }
.homepage-why-section { padding: 64px 0 70px; background: var(--surface); border-top: 1px solid var(--line); }
.homepage-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.homepage-why-item { min-width: 0; padding: 26px 24px 24px; border: 1px solid transparent; border-radius: 22px; background: var(--bg-app); box-shadow: none; }
.homepage-why-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px; border-radius: 15px; color: #fff; background: var(--primary); }
.homepage-why-icon svg { width: 28px; height: 28px; }
.homepage-why-item h3 { margin: 0 0 8px; color: var(--navy-950); font-size: 1.13rem; line-height: 1.35; }
.homepage-why-item p { margin: 0; color: var(--text-muted); font-size: .94rem; line-height: 1.62; }
.homepage-why-section + .main-footer { margin-top: 0; }
@media (max-width: 767px) {
  .homepage-process-section { margin-top: 32px; padding: 42px 0; }
  .homepage-section-heading { margin-bottom: 22px; }
  .homepage-section-heading h2 { font-size: 1.55rem; }
  .homepage-section-heading p { font-size: .92rem; line-height: 1.62; }
  .homepage-section-photo { height: auto; aspect-ratio: 16 / 10; margin-bottom: 22px; border-radius: 18px; }
  .homepage-process-grid, .homepage-why-grid { grid-template-columns: 1fr; gap: 12px; }
  .homepage-process-step { padding: 18px; }
  .homepage-step-number { margin-bottom: 13px; }
  .homepage-direct-contact { align-items: stretch; flex-direction: column; gap: 16px; margin-top: 14px; padding: 18px; }
  .homepage-direct-actions { width: 100%; }
  .homepage-direct-btn { flex: 1; }
  .homepage-why-section { padding: 44px 0 50px; }
  .homepage-why-item { padding: 22px 20px 21px; border-radius: 20px; }
  .homepage-why-icon { margin-bottom: 18px; }
}

/* ── Global Footer ── */
/* ── Footer ── */
.main-footer {
  background: linear-gradient(145deg, #125fc6 0%, #176ed6 100%);
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.footer-top { padding: 46px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1.2fr; gap: 48px; }
}
.footer-heading {
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.3;
  color: #ffd33f;
  margin-bottom: 18px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links a {
  color: rgba(255,255,255,.94);
  font-size: 0.93rem;
  transition: color 0.2s, padding-left 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-links a::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  display: none;
}
.footer-links a:hover { color: #fff; padding-left: 6px; }
.footer-links a:hover::before { display: none; }
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.94);
  font-size: 0.92rem;
}
.footer-contact-list a { color: rgba(255,255,255,.94); overflow-wrap: anywhere; }
.footer-contact-list a:hover { color: #fff; }
.footer-contact-mark { display: inline-flex; flex: 0 0 34px; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.16); }
.footer-contact-mark svg { width: 19px; height: 19px; }
.footer-contact-mark img { width: 25px; height: 25px; object-fit: contain; border-radius: 8px; }
.footer-zalo-mark { background: #fff; }
.footer-description { max-width: 36ch; margin: 14px 0 18px; color: rgba(255,255,255,.9); font-size: .93rem; line-height: 1.7; }
.footer-socials { display: flex; align-items: center; gap: 12px; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #1765ce; background: #fff; box-shadow: 0 6px 16px rgba(6,42,104,.2); transition: transform .2s, box-shadow .2s; }
.footer-socials a:hover { color: #1765ce; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6,42,104,.28); }
.footer-socials img { width: 32px; height: 32px; object-fit: contain; }
.footer-socials svg { width: 23px; height: 23px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 16px 0;
  color: rgba(255,255,255,.86);
  background: rgba(5,46,112,.16);
  font-size: 0.82rem;
}
.footer-bottom a { color: #fff; font-weight: 700; }
.footer-bottom a:hover { color: #ffd33f; }
.footer-logo { width: 225px; max-width: 100%; height: auto; display: block; filter: brightness(0) invert(1); }
.footer-tagline { color: rgba(255,255,255,.82); font-size: 0.8rem; margin-top: 6px; letter-spacing: 0.7px; }
.footer-brand { order: 1; }.footer-contact-column { order: 2; }.footer-links-column { order: 3; }
.footer-contact-actions { display: grid; gap: 12px; }
.footer-contact-card { min-height: 64px; display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 14px; color: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.footer-contact-card:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.footer-contact-card svg { width: 28px; height: 28px; flex: 0 0 auto; }
.footer-contact-card img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.zalo-contact-logo { background: #fff; border-radius: 10px; padding: 3px; box-sizing: border-box; box-shadow: 0 2px 7px rgba(0,0,0,.14); }
.footer-contact-call { background: #d92b24; }.footer-contact-zalo { background: #087ff5; }

/* ── Toast ── */
.toast {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: 16px 24px; border-radius: 12px;
  font-weight: 600; box-shadow: var(--shadow-lg); transition: top 0.3s;
  z-index: 9999; font-size: 0.95rem;
}
.toast.show { top: 20px; }
.toast.error { background: var(--status-new); }
.toast.success { background: var(--status-confirmed); }

/* Customer review step before a booking is written to the database. */
.booking-review-modal[hidden] { display: none; }
.booking-review-modal { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 18px; }
.booking-review-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(3px); }
.booking-review-dialog { position: relative; width: min(100%, 520px); max-height: min(90vh, 720px); overflow: auto; padding: 24px; border-radius: 22px; background: var(--surface); box-shadow: 0 24px 70px rgba(15,23,42,.26); }
.booking-review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.booking-review-header h2 { margin-top: 5px; color: var(--navy-950); font-size: 1.35rem; }
.booking-review-close { border: 0; background: transparent; color: var(--text-muted); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.booking-review-lead { margin: 12px 0 18px; color: var(--text-muted); line-height: 1.55; }
.booking-review-list { display: grid; gap: 10px; }
.booking-review-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 12px; border-radius: 12px; background: var(--bg-app); }
.booking-review-label { color: var(--text-muted); font-size: .84rem; font-weight: 700; }
.booking-review-value { color: var(--navy-950); font-weight: 700; overflow-wrap: anywhere; }
.booking-review-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.booking-review-actions button { min-height: 46px; }
body.modal-open { overflow: hidden; }
.lookup-phone-form { display: flex; gap: 10px; align-items: stretch; margin-top: 16px; }
.lookup-phone-form .clean-input { flex: 1; min-width: 0; }
.lookup-phone-form button { white-space: nowrap; }
.lookup-message { min-height: 22px; margin-top: 10px; color: var(--status-new); font-size: .9rem; }
.lookup-results { display: grid; gap: 14px; margin-top: 20px; }
.lookup-result-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-app); }
.lookup-result-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.lookup-result-card .detail-row { padding: 6px 0; }

/* Customer transaction pages: confirmation and order lookup share the home page rhythm. */
.transaction-page { padding: 34px 0 56px; }
.transaction-hero { text-align: center; max-width: 760px; }
.transaction-success-mark { width: 68px; height: 68px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: #e9f8f1; color: var(--status-confirmed); }
.transaction-success-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.transaction-hero h1 { margin-top: 8px; color: var(--navy-950); font-size: clamp(1.7rem, 4vw, 2.35rem); line-height: 1.2; }
.transaction-lead { max-width: 650px; margin: 12px auto 0; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.transaction-lead strong { color: var(--navy-900); }
.transaction-content, .lookup-content { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 20px; align-items: start; margin-top: 28px; }
.transaction-main-card, .transaction-help-card, .lookup-search-card, .lookup-results-shell { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); }
.transaction-main-card { padding: 24px; }
.transaction-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.transaction-card-heading h2, .transaction-help-card h2, .lookup-search-card h2, .lookup-empty-state h2 { color: var(--navy-950); font-size: 1.25rem; line-height: 1.3; margin-top: 5px; }
.transaction-live-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: #087443; background: #eaf8f0; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.transaction-live-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--status-confirmed); }
.transaction-details { border: 1px solid var(--line); border-radius: 16px; padding: 5px 16px; }
.confirm-details .detail-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line-light); }
.confirm-details .detail-row:last-child { border-bottom: 0; }
.detail-label { color: var(--text-muted); font-size: .86rem; font-weight: 700; flex: 0 0 112px; }
.detail-value { color: var(--navy-950); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.transaction-address { max-width: 70%; }
.transaction-code { color: var(--primary); font-size: 1.04rem; }
.transaction-loading, .transaction-error { padding: 20px 0; color: var(--text-muted); text-align: center; }
.transaction-error { color: var(--status-new); }
.transaction-next-step { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px; border-radius: 14px; background: #fff8ed; border: 1px solid #f5ddb9; }
.transaction-step-mark { width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--amber); color: #fff; font-size: .8rem; font-weight: 800; }
.transaction-next-step strong { color: var(--navy-950); font-size: .95rem; }.transaction-next-step p { margin-top: 3px; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }
.transaction-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }.transaction-actions a { flex: 1 1 210px; justify-content: center; text-align: center; }
.transaction-help-card { padding: 22px; }.transaction-help-card > p { margin-top: 9px; color: var(--text-muted); line-height: 1.65; font-size: .92rem; }
.transaction-contact-actions { display: grid; gap: 10px; margin-top: 18px; }.transaction-contact { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; transition: transform .2s, box-shadow .2s; }.transaction-contact:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }.transaction-contact .action-icon { width: 38px; height: 38px; flex: 0 0 38px; margin: 0; border-radius: 11px; }.transaction-contact-call .action-icon { color: #c92c26; background: #fff0ef; }.transaction-contact-zalo .action-icon { color: #087ff5; background: #edf6ff; }.transaction-contact small, .transaction-contact strong { display: block; }.transaction-contact small { color: var(--text-muted); font-size: .75rem; }.transaction-contact strong { color: var(--navy-950); margin-top: 2px; }
.lookup-page .transaction-hero { max-width: 700px; }.lookup-content { display: block; max-width: 760px; }.lookup-search-card { padding: 22px; }.lookup-search-heading { display: flex; align-items: flex-start; gap: 12px; }.lookup-search-icon { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #eef2f7; color: var(--primary); }.lookup-search-icon svg, .lookup-empty-mark svg, .lookup-reassurance-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.lookup-search-heading p { margin-top: 3px; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }.lookup-phone-form { display: block; margin-top: 18px; }.lookup-phone-form > label { display: block; margin-bottom: 7px; color: var(--navy-900); font-size: .84rem; font-weight: 700; }.lookup-phone-row { display: flex; gap: 10px; }.lookup-phone-row .clean-input { min-width: 0; flex: 1; }.lookup-phone-row button { white-space: nowrap; }.lookup-results-shell { margin-top: 16px; padding: 18px; }.lookup-empty-state { padding: 24px 16px; text-align: center; }.lookup-empty-mark { width: 48px; height: 48px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 15px; color: var(--primary); background: #eef2f7; }.lookup-empty-state p { max-width: 460px; margin: 7px auto 0; color: var(--text-muted); line-height: 1.6; font-size: .9rem; }.lookup-results { display: grid; gap: 14px; }.lookup-result-card { padding: 17px; background: var(--bg-app); }.lookup-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }.lookup-result-head h3 { margin-top: 3px; color: var(--navy-950); font-size: 1.13rem; }.lookup-result-head .status-badge { flex: 0 0 auto; }.lookup-detail-list { margin-top: 12px; padding: 3px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }.lookup-detail-list .detail-row { padding: 10px 0; }.lookup-address { max-width: 68%; }.lookup-result-foot { margin-top: 11px; color: var(--text-muted); font-size: .77rem; line-height: 1.45; }.lookup-reassurance { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 15px; border: 1px solid #dbe6f9; border-radius: 16px; background: #f7faff; }.lookup-reassurance-mark { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; color: var(--primary); border-radius: 10px; background: #e8effb; }.lookup-reassurance strong { color: var(--navy-950); font-size: .9rem; }.lookup-reassurance p { margin-top: 3px; color: var(--text-muted); font-size: .86rem; line-height: 1.55; }.lookup-support-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; color: var(--text-muted); font-size: .88rem; }.lookup-support-row a { color: var(--primary); font-weight: 800; }
@media (max-width: 520px) {
  .booking-review-dialog { padding: 20px 16px; border-radius: 18px; }
  .booking-review-row { grid-template-columns: 1fr; gap: 3px; }
  .booking-review-actions { flex-direction: column-reverse; }
  .booking-review-actions button { width: 100%; justify-content: center; }
  .lookup-phone-form { flex-direction: column; }
  .lookup-phone-form button { width: 100%; justify-content: center; }
  .transaction-page { padding-top: 26px; }
  .transaction-main-card, .transaction-help-card, .lookup-search-card, .lookup-results-shell { border-radius: 18px; }
  .transaction-main-card, .transaction-help-card, .lookup-search-card { padding: 18px 16px; }
  .transaction-card-heading { flex-direction: column; }
  .transaction-live-status { align-self: flex-start; }
  .confirm-details .detail-row { gap: 10px; }
  .detail-label { flex-basis: 92px; }
  .transaction-address, .lookup-address { max-width: 62%; }
  .lookup-phone-row { flex-direction: column; }
  .lookup-phone-row button { width: 100%; justify-content: center; }
  .lookup-results-shell { padding: 10px; }
  .lookup-result-card { padding: 14px 12px; }
  .lookup-result-head { flex-direction: column; gap: 8px; }
}

/* Make phone lookup unmistakable on customer-facing pages. */
.lookup-phone-row .clean-input {
  min-height: 56px;
  padding: 0 16px;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
  color: var(--navy-950);
  font-size: 1.05rem;
  font-weight: 600;
}
.lookup-phone-row .clean-input::placeholder { color: #94a3b8; font-weight: 500; }
.lookup-phone-row .clean-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(110,130,178,.14); outline: none; }
.lookup-phone-row .btn-amber { min-height: 56px; padding-inline: 22px; font-size: 1.08rem; font-weight: 800; letter-spacing: .1px; }
.passenger-box { grid-column: 1 / -1; }
.passenger-select { width: 100%; min-height: 48px; }
.app-input-box .input-content .clean-input { height: 48px; min-height: 48px; padding: 0 14px; border: 1.5px solid #cbd5e1; border-radius: 12px; background: #fff; color: var(--navy-950); }
.app-input-box .input-content .clean-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(110,130,178,.12); }
.app-input-box .input-content .passenger-select { height: 48px; min-height: 48px; padding: 0 38px 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background-color: var(--bg-app); }
.address-grid .clean-select { height: 48px; min-height: 48px; max-height: 48px; overflow-y: auto; overscroll-behavior: contain; }
.address-grid .clean-select option { min-height: 38px; padding: 8px 10px; line-height: 1.35; }
.compact-select { position: relative; width: 100%; min-width: 0; }
.compact-native-select { display: none !important; }
.compact-select-toggle { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; height: 52px; min-height: 52px; padding: 0 40px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-app); color: var(--text-main); font: inherit; font-size: 16px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-select-toggle::after { content: ''; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; border-right: 1.7px solid #6b7280; border-bottom: 1.7px solid #6b7280; transform: translateY(-65%) rotate(45deg); }
.compact-select-toggle:focus-visible { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(110,130,178,.12); }
.compact-select-toggle:disabled { cursor: not-allowed; opacity: .68; }
.compact-select.is-open .compact-select-toggle { border-color: var(--primary); background: var(--surface); }
.compact-select-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: min(240px, 42vh); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 28px rgba(15,23,42,.16); overscroll-behavior: contain; }
.compact-select-option { display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text-main); font: inherit; font-size: .95rem; line-height: 1.35; text-align: left; }
.compact-select-option:hover, .compact-select-option:focus-visible, .compact-select-option[aria-selected="true"] { background: #eef3ff; color: var(--navy-900); outline: none; }
.lookup-support-row { display: grid; gap: 9px; margin-top: 18px; color: var(--text-muted); font-size: .88rem; text-align: center; }
.lookup-support-copy { display: block; }
.lookup-support-actions { display: flex; justify-content: center; gap: 12px; }
.lookup-support-actions a { min-width: 110px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--primary); font-weight: 800; }
.passenger-label { display: block; margin-top: 14px; color: var(--text-main); font-size: .95rem; }
.passenger-select { width: 100%; margin-top: 8px; min-height: 48px; }
.lookup-status-list { display: grid; gap: 8px; margin: 9px 0 0; padding-left: 18px; color: var(--text-muted); font-size: .86rem; line-height: 1.55; }
.lookup-status-list li { padding-left: 2px; }
.lookup-status-list li strong { color: var(--navy-950); }
.lookup-result-head .status-badge { max-width: 100%; line-height: 1.3; text-align: right; }
@media (max-width: 520px) {
  .lookup-phone-row .clean-input, .lookup-phone-row .btn-amber { min-height: 58px; }
  .lookup-result-head .status-badge { text-align: left; }
}

/* ── Customer account ── */
.account-hero { padding-bottom: 28px; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 20px; align-items: start; }
.account-card, .account-side-card { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.account-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-card-heading h2, .account-side-card h2 { margin-top: 7px; color: var(--navy-950); font-size: 1.35rem; line-height: 1.25; }
.account-badge { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #eef3ff; color: var(--primary); font-size: .74rem; font-weight: 800; }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 22px; padding: 5px; border-radius: 13px; background: var(--bg-app); }
.account-tab { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font-weight: 800; }
.account-tab.active { background: var(--surface); color: var(--navy-950); box-shadow: var(--shadow-sm); }
.account-message { min-height: 22px; margin-top: 13px; color: var(--text-muted); font-size: .88rem; line-height: 1.45; }
.account-message.error { color: #b42318; }
.account-form { display: grid; gap: 9px; margin-top: 4px; }
.account-form label { color: var(--navy-900); font-size: .86rem; font-weight: 800; }
.account-form input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy-950); font: inherit; font-size: 16px; outline: none; }
.account-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(110,130,178,.12); }
.account-submit { width: 100%; min-height: 50px; margin-top: 7px; justify-content: center; }
.account-form-note, .account-signed-in { margin-top: 16px; color: var(--text-muted); font-size: .84rem; line-height: 1.6; }
.account-side-card { background: linear-gradient(145deg, #fff9ef, #fff); border-color: #f4d6ad; }
.account-side-card p { margin: 10px 0 18px; color: var(--text-muted); line-height: 1.65; }
.account-dashboard { grid-column: 1 / -1; }
.account-logout { min-height: 40px; padding: 8px 13px; }
.account-orders { display: grid; gap: 12px; margin-top: 18px; }
.account-order { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--bg-app); }
.account-order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-order-head strong, .account-order-route { color: var(--navy-950); }
.account-order-route { margin-top: 10px; font-weight: 800; }
.account-order-meta, .account-order p { margin-top: 5px; color: var(--text-muted); font-size: .87rem; line-height: 1.5; }
.account-order a { display: inline-block; margin-top: 9px; color: var(--primary); font-size: .86rem; font-weight: 800; }
.account-empty, .account-loading { padding: 22px 8px; color: var(--text-muted); text-align: center; }
.account-empty strong { display: block; color: var(--navy-950); }
.account-empty p { margin: 6px 0 16px; }
.account-empty .btn-amber { display: inline-flex; }
.driver-access-note { display: block; margin-top: 12px; color: var(--text-muted); line-height: 1.5; }
.driver-login-modal[hidden] { display: none; }
.driver-login-modal { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; padding: 18px; }
.driver-login-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.62); backdrop-filter: blur(4px); }
.driver-login-dialog { position: relative; width: min(100%, 480px); padding: 25px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: var(--surface); box-shadow: 0 24px 70px rgba(15,23,42,.3); }
.driver-login-dialog h2 { margin-top: 5px; color: var(--navy-950); font-size: 1.35rem; }
.driver-login-form { display: grid; gap: 9px; }
.driver-login-form label { color: var(--navy-900); font-size: .86rem; font-weight: 800; }
.driver-login-form input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy-950); font: inherit; font-size: 16px; outline: none; }
.driver-login-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(110,130,178,.12); }
.driver-login-submit { width: 100%; min-height: 50px; margin-top: 8px; justify-content: center; }
.driver-login-message { min-height: 22px; margin: 2px 0 10px; color: var(--text-muted); font-size: .88rem; line-height: 1.45; }
.driver-login-message.error { color: #b42318; }
@media (max-width: 767px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-card, .account-side-card { padding: 19px 16px; border-radius: 18px; }
  .account-dashboard { grid-column: auto; }
  .account-card-heading h2, .account-side-card h2 { font-size: 1.2rem; }
  .driver-login-dialog { padding: 20px 16px; border-radius: 18px; }
}

/* ── Animations ── */
.reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Mobile Drawer ── */
.menu-toggle {
  background: transparent; border: none; color: var(--text-main);
  display: flex; align-items: center; justify-content: center;
  padding: 4px; margin-right: -4px;
}
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 1000; opacity: 0; pointer-events: none; transition: 0.3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-drawer {
  position: fixed; top: 0; bottom: 0; right: -300px; width: 280px;
  background: var(--surface); z-index: 1001; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; box-shadow: -4px 0 15px rgba(0,0,0,0.1);
}
.mobile-drawer.open { right: 0; }
.drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.drawer-close { background: none; border: none; font-size: 1.2rem; color: var(--text-muted); }
.drawer-content { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.drawer-content a {
  display: flex; align-items: center; gap: 14px;
  font-size: 1.05rem; font-weight: 600; color: var(--text-main);
  padding: 12px 16px; border-radius: 12px; background: var(--bg-app);
}
.drawer-content a.active { background: rgba(110, 130, 178, 0.1); color: var(--primary); }
.drawer-footer { padding: 20px; border-top: 1px solid var(--line); }

/* ── Floating Action Button (FAB) ── */
.fab-wrap {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  display: flex; flex-direction: column; align-items: flex-end;
}
.fab-main {
  background: var(--amber); color: #fff; border: none; border-radius: 50%;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 15px rgba(232, 140, 48, 0.4);
  cursor: pointer; transition: 0.3s;
  animation: fab-pulse 2s infinite;
}
@keyframes fab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 140, 48, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(232, 140, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 140, 48, 0); }
}
.fab-main:active { transform: scale(0.95); }
.fab-icon-box { display: flex; align-items: center; justify-content: center; position: relative; width: 26px; height: 26px; }
.fab-icon-box svg { position: absolute; transition: 0.3s; width: 26px; height: 26px; }
.fab-close { opacity: 0; transform: scale(0) rotate(-90deg); }
.fab-wrap.open .fab-main { animation: none; background: var(--text-main); box-shadow: var(--shadow-lg); }
.fab-wrap.open .fab-icon-box svg:not(.fab-close) { opacity: 0; transform: scale(0) rotate(90deg); }
.fab-wrap.open .fab-close { opacity: 1; transform: scale(1) rotate(0deg); }

.fab-option {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; opacity: 0; pointer-events: none;
  transform: translateY(15px); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab-wrap.open .fab-option { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fab-wrap.open .fab-option:nth-child(1) { transition-delay: 0.05s; }
.fab-wrap.open .fab-option:nth-child(2) { transition-delay: 0.1s; }
.fab-label {
  background: var(--surface); color: var(--text-main); font-weight: 600; font-size: 0.9rem;
  padding: 6px 12px; border-radius: 8px; box-shadow: var(--shadow-md);
}
.fab-btn {
  width: 52px; height: 52px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
  box-shadow: var(--shadow-md); color: #fff;
}
.fab-btn.zalo { background: #0068FF; }
.fab-btn.call { background: #10b981; }

/* ── Utility components for other pages ── */
.page-hero { padding: 40px 0 20px; }
.page-hero h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; }
.btn-amber { display: inline-flex; background: var(--amber); color: #fff; padding: 14px 24px; border-radius: 12px; font-weight: 700; }
.btn-outline { display: inline-flex; border: 2px solid var(--line); padding: 14px 24px; border-radius: 12px; font-weight: 700; }
.price-sheet { width: 100%; overflow: hidden; border: 1px solid #d9dee8; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.price-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--surface); }
.price-group + .price-group { margin-top: 24px; }
.price-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.price-group-heading h2 { margin: 0; color: var(--navy-950); font-size: 1.2rem; }
.price-group-heading span { color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.price-col-route { width: 40%; }.price-col-service { width: 31%; }.price-col-value { width: 29%; }
.price-table th, .price-table td { padding: 17px 16px; text-align: left; border-right: 1px solid #d9dee8; border-bottom: 1px solid #d9dee8; vertical-align: middle; overflow-wrap: anywhere; }
.price-table th:last-child, .price-table td:last-child { border-right: 0; }
.price-table th { background: #d92b24; color: #fff; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.price-table tbody tr:nth-child(even) { background: #f7f8fb; }
.price-table tbody td { color: var(--navy-900); font-size: 1rem; line-height: 1.45; }
.price-table-value { color: #b42318 !important; font-weight: 800; }
.price-table tfoot td { border-bottom: 0; background: #fff8f6; color: var(--navy-950); font-size: 1rem; font-weight: 700; text-align: center; }
.price-table tfoot a { color: #d92b24; font-size: 1.08rem; font-weight: 900; }
/* ── Instant booking price estimate ── */
.booking-price-preview { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: none; }
.booking-price-preview[hidden] { display: none; }
.booking-price-preview-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--primary); background: var(--bg-app); }
.booking-price-preview-icon svg { width: 22px; height: 22px; }
.booking-price-preview-copy { min-width: 0; }
.booking-price-preview-label { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .07em; }
.booking-price-preview-copy strong { display: block; color: var(--navy-950); font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.booking-price-preview-copy p { margin: 2px 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.price-contact-block { margin-top: 24px; }
.price-contact-block > p { margin: 0 0 11px; color: var(--navy-900); font-size: 1.02rem; font-weight: 800; text-align: center; }
.price-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.price-contact-btn { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-radius: 14px; color: #fff; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.price-contact-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.price-contact-btn svg { width: 27px; height: 27px; flex: 0 0 auto; }
.price-contact-btn img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.price-contact-btn span, .footer-contact-card span { display: flex; flex-direction: column; gap: 2px; }
.price-contact-btn small, .footer-contact-card small { font-size: .76rem; opacity: .86; }
.price-contact-btn strong, .footer-contact-card strong { font-size: 1.04rem; }
.price-contact-call { background: #d92b24; }.price-contact-zalo { background: #087ff5; }
.price { font-weight: 700; color: var(--amber); }

/* ── Admin Dashboard Styles ── */
.admin-layout { min-height: 100vh; background: var(--bg-app); padding-bottom: 0; }
.admin-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.admin-header-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; max-width: 1100px; margin: 0 auto; }
.admin-brand { font-weight: 700; font-size: 1.1rem; }
.admin-nav { display: flex; gap: 16px; align-items: center; }
.alert-toggle { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--primary); padding: 8px 11px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.alert-toggle.enabled { background: var(--status-confirmed); color: #fff; border-color: var(--status-confirmed); }
.admin-nav button { background: none; border: none; font-size: 1.2rem; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--surface); padding: 16px; border-radius: 16px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line-light); }
.stat-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 1.75rem; font-weight: 700; margin-top: 4px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.filter-bar select, .filter-bar input { padding: 12px; border-radius: 12px; border: 1px solid var(--line); font-family: inherit; font-size: 1rem; outline: none; }
.filter-search { flex: 1; min-width: 200px; position: relative; }
.filter-search input { width: 100%; padding-left: 40px; }
.filter-search .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1rem; }
.booking-item { background: var(--surface); border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); border-left: 6px solid transparent; border-top: 1px solid var(--line-light); border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.booking-item.highlight { border-left-color: var(--status-new); animation: pulse 2s infinite; }
.booking-item-header { display: flex; justify-content: space-between; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.booking-code { font-weight: 700; font-family: monospace; font-size: 1.2rem; }
.booking-item-body div { margin-bottom: 8px; font-size: 1rem; }
.bi-label { color: var(--text-muted); display: inline-block; width: 90px; font-weight: 500; }
.booking-item-actions { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.status-select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); font-weight: 600; outline: none; font-size: 0.95rem; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pagination button { padding: 10px 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; font-weight: 600; font-size: 1rem; }
.pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.new-order-banner { position: fixed; bottom: -100px; left: 16px; right: 16px; background: var(--status-new); color: #fff; padding: 20px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-lg); transition: bottom 0.3s; z-index: 1000; }
.new-order-banner.show { bottom: 24px; }
.banner-text { font-weight: 700; font-size: 1.05rem; }
.banner-btn { background: #fff; color: var(--status-new); border: none; padding: 8px 16px; border-radius: 8px; font-weight: 700; margin-right: 16px; }
.banner-close { background: none; border: none; color: #fff; font-size: 1.5rem; }

/* ── Login Form ── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg-app); }
.login-card { background: var(--surface); padding: 40px 24px; border-radius: 24px; box-shadow: var(--shadow-md); width: 100%; max-width: 400px; text-align: center; }
.login-icon { font-size: 3.5rem; margin-bottom: 20px; }
.login-desc { color: var(--text-muted); margin-bottom: 32px; font-size: 1.05rem; }
.field { margin-bottom: 20px; text-align: left; }
.field label { display: block; font-size: 0.95rem; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.field input { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 1.05rem; outline: none; }
.field input:focus { border-color: var(--primary); }
.cta-book { width: 100%; background: var(--primary); color: #fff; padding: 16px; border: none; border-radius: 16px; font-weight: 700; font-size: 1.1rem; position: relative; }

@media (max-width: 767px) {
  .airport-commitment-grid { grid-template-columns: 1fr; gap: 10px; }
  .airport-commitment-item { padding: 18px; border-radius: 16px; }
  .booking-contact-strip { align-items: stretch; flex-direction: column; gap: 10px; }
  .booking-contact-actions { width: 100%; }.booking-contact-link { flex: 1 1 0; justify-content: center; }
  .booking-direct-contact { margin-top: 14px; padding: 15px; border-radius: 18px; }
  .booking-direct-contact > p { font-size: .86rem; }
  .booking-direct-actions { gap: 8px; }
  .booking-direct-action { min-height: 64px; padding: 9px; gap: 8px; }
  .booking-direct-icon { width: 35px; height: 35px; }
  .booking-direct-action strong { font-size: .85rem; }
  .booking-direct-action small { font-size: .7rem; }
  .toggle-options button { font-size: .78rem; padding: 10px 4px; gap: 4px; }
  .toggle-options button svg { width: 17px; height: 17px; }
  .price-group-heading h2 { font-size: 1.05rem; }
  .price-table th, .price-table td { padding: 14px 9px; font-size: .82rem; }
  .price-table th { font-size: .78rem; letter-spacing: .01em; }
  .price-table tfoot td { font-size: .86rem; }
  .price-table tfoot a { font-size: .98rem; }
  .price-contact-actions { grid-template-columns: 1fr; }
  .price-contact-btn { min-height: 62px; }
}

/* The wide wordmark keeps its proportions on narrow phones. */
@media (max-width: 767px) {
  header.site .brand-logo { width: 135px; max-width: calc(100vw - 72px); max-height: 42px; }
  .drawer-header .drawer-brand-logo { width: 160px; max-width: calc(100vw - 86px); max-height: 42px; }
}

/* ── Driver management workspace ── */
.management-shell { min-height: 100vh; background: var(--bg-app); color: var(--navy-950); }
.management-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.management-header-inner { max-width: 1160px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.management-brand h1 { margin: 3px 0 3px; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.02em; }
.management-brand p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.management-eyebrow { display: block; color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.management-toolbar { display: flex; align-items: center; gap: 9px; }
.management-alert-button, .management-logout-button, .management-icon-button { min-height: 42px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--navy-900); font: inherit; font-weight: 700; cursor: pointer; transition: .2s ease; }
.management-alert-button:disabled { cursor: not-allowed; opacity: .72; }
.management-alert-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; color: var(--primary); }
.management-alert-button svg, .management-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.management-icon-button { width: 42px; display: inline-grid; place-items: center; }
.management-logout-button { padding: 0 13px; color: var(--text-muted); }
.management-alert-button:hover, .management-icon-button:hover, .management-logout-button:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.management-password-button { color: var(--primary); }
.password-change-modal[hidden] { display: none; }
.password-change-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 18px; }
.password-change-backdrop { position: absolute; inset: 0; background: rgba(8, 22, 42, .56); backdrop-filter: blur(4px); }
.password-change-dialog { position: relative; width: min(100%, 470px); max-height: min(720px, calc(100vh - 36px)); overflow: auto; padding: 28px; border: 1px solid var(--line-light); border-radius: 22px; background: var(--surface); box-shadow: 0 24px 70px rgba(7, 20, 39, .28); }
.password-change-close { position: absolute; top: 12px; right: 15px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--text-muted); background: #eef2f7; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.password-change-dialog h2 { margin: 5px 42px 7px 0; color: var(--navy-950); font-size: 1.35rem; }
.password-change-note { margin: 0 0 16px; color: var(--text-muted); font-size: .86rem; line-height: 1.55; }
.password-change-message { min-height: 20px; margin: 0 0 10px; font-size: .84rem; line-height: 1.45; }
.password-change-message.success { color: #168154; }.password-change-message.error { color: #b24646; }
.password-change-form { display: grid; gap: 8px; }.password-change-form label { margin-top: 7px; color: var(--navy-900); font-size: .82rem; font-weight: 800; }.password-change-form label span { color: var(--text-muted); font-weight: 500; }
.password-change-form input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy-950); font: inherit; outline: none; }.password-change-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,94,164,.1); }
.password-change-actions { display: flex; gap: 10px; margin-top: 13px; }.password-change-actions button { flex: 1; justify-content: center; min-height: 44px; font: inherit; font-weight: 800; cursor: pointer; }.password-change-actions button:disabled { cursor: wait; opacity: .65; }
.management-alert-button.enabled { background: var(--status-confirmed); border-color: var(--status-confirmed); color: #fff; }
.management-notification-note, .management-channel-note { max-width: 1160px; margin: -8px auto 0; padding: 0 24px 10px; color: var(--text-muted); font-size: .74rem; line-height: 1.45; }
.management-notification-note.is-warning { color: #9a620f; }.management-notification-note.is-success { color: #168154; }.management-notification-note.is-muted { color: var(--text-muted); }
.management-channel-note { display: flex; align-items: center; gap: 8px; padding-bottom: 15px; }.management-channel-note strong { color: var(--navy-900); }.management-channel-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border: 2px solid #0875d1; border-radius: 50%; color: #0875d1; font-size: .68rem; font-weight: 900; }
.management-ios-guide { max-width: 1160px; margin: 0 auto; padding: 0 24px 16px; color: var(--text-muted); font-size: .76rem; }.management-ios-guide summary { display: inline-block; color: var(--primary); cursor: pointer; font-weight: 800; }.management-ios-guide ol { max-width: 620px; margin: 9px 0 0 19px; padding: 0; line-height: 1.55; }.management-ios-guide strong { color: var(--navy-900); }
.management-content { max-width: 1160px; margin: 0 auto; padding: 30px 24px 72px; }
.management-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.management-section-heading h2 { margin: 5px 0 0; font-size: 1.2rem; letter-spacing: -.015em; }
.management-live { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.management-live i { width: 7px; height: 7px; border-radius: 50%; background: #18a56b; box-shadow: 0 0 0 4px rgba(24,165,107,.12); }
.management-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; }
.management-stat-card { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--line-light); border-radius: 17px; box-shadow: 0 5px 18px rgba(18,34,58,.045); }
.management-stat-icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.management-stat-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-pending .management-stat-icon { background: #fff2df; color: #c67b09; }.stat-today .management-stat-icon { background: #e9f2ff; color: #326db8; }.stat-completed .management-stat-icon { background: #e6f6ed; color: #168154; }
.management-stat-card > div:last-child { min-width: 0; }.management-stat-label, .management-stat-card small { display: block; color: var(--text-muted); }.management-stat-label { font-size: .8rem; font-weight: 700; }.management-stat-card strong { display: block; margin: 1px 0; font-size: 1.65rem; line-height: 1.15; }.management-stat-card small { font-size: .74rem; }
.orders-heading { align-items: end; margin-bottom: 18px; }.orders-heading p { margin: 0; color: var(--text-muted); font-size: .84rem; text-align: right; }
.management-filters { display: grid; grid-template-columns: 200px 200px minmax(220px,1fr); gap: 12px; padding: 16px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line-light); border-radius: 16px; }
.management-filters label { display: block; min-width: 0; }.management-filters label > span { display: block; margin: 0 0 7px; color: var(--text-muted); font-size: .74rem; font-weight: 800; }.management-filters select, .management-filters input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy-950); font: inherit; font-size: .9rem; outline: none; }.management-filters select:focus, .management-filters input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,94,164,.1); }.management-search > div { position: relative; }.management-search svg { position: absolute; top: 50%; left: 13px; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; }.management-search input { padding-left: 40px; }
.management-order-list { display: grid; gap: 14px; }.management-order { padding: 20px; background: var(--surface); border: 1px solid var(--line-light); border-radius: 18px; box-shadow: 0 5px 18px rgba(18,34,58,.045); }.management-order.is-new { border-color: #f1cb91; box-shadow: 0 7px 22px rgba(196,126,16,.09); }.management-order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--line-light); }.management-order-code span { color: var(--text-muted); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }.management-order-code h3 { margin: 4px 0 1px; font-size: 1.08rem; letter-spacing: .02em; }.management-order-code p { margin: 0; color: var(--text-muted); font-size: .78rem; }.management-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }.management-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.management-status.status-new { color: #a86608; background: #fff2df; }.management-status.status-contacted { color: #326db8; background: #e9f2ff; }.management-status.status-confirmed { color: #168154; background: #e6f6ed; }.management-status.status-completed { color: #536476; background: #edf1f5; }.management-status.status-cancelled { color: #b24646; background: #fdeceb; }
.management-order-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr; gap: 18px 20px; padding: 17px 0; }.order-field { min-width: 0; }.order-field-wide { grid-column: 1 / -1; }.order-field-label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.order-field strong, .order-field p, .order-field a { display: block; margin: 0; font-size: .92rem; line-height: 1.55; }.order-field strong { color: var(--navy-950); }.order-field a { color: var(--primary); text-decoration: none; font-size: .84rem; }.order-field p { color: var(--navy-900); overflow-wrap: anywhere; }.order-field p b { color: var(--text-muted); font-weight: 700; }.order-field strong.is-asap { color: #b9700a; }
.management-order-actions { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-top: 15px; border-top: 1px solid var(--line-light); }.management-contact-actions { display: flex; gap: 9px; }.management-contact-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 13px; border-radius: 10px; text-decoration: none; font-size: .84rem; font-weight: 800; transition: .2s ease; }.management-contact-actions a:hover { transform: translateY(-1px); }.management-action-call { color: #fff; background: var(--primary); }.management-action-call:hover { color: #fff; background: var(--primary-dark); }.management-action-zalo { color: #0875d1; background: #eaf4ff; }.management-action-zalo:hover { color: #0875d1; background: #dceeff; }.management-contact-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.zalo-mark { display: inline-grid; place-items: center; width: 19px; height: 19px; border: 2px solid currentColor; border-radius: 50%; font-size: .67rem; font-weight: 900; }.management-status-control { display: block; width: 215px; }.management-status-control > span { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: .72rem; font-weight: 800; }.management-status-control select { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid #cfd8e5; border-radius: 10px; background: #fff; color: var(--navy-950); font: inherit; font-size: .84rem; font-weight: 700; outline: none; }.management-status-control select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,94,164,.1); }
.empty-icon-neutral { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; color: var(--text-muted); background: #edf1f5; border-radius: 12px; }.empty-icon-neutral svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.new-order-banner { top: auto; bottom: -120px; left: 50%; right: auto; width: min(650px, calc(100% - 32px)); transform: translateX(-50%); padding: 14px 16px; background: var(--navy-950); border: 1px solid rgba(255,255,255,.12); border-radius: 15px; display: flex; justify-content: space-between; align-items: center; gap: 14px; box-shadow: 0 16px 35px rgba(7,20,39,.25); transition: bottom .3s ease; }.new-order-banner.show { bottom: 22px; }.banner-text { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; }.banner-text svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.banner-actions { display: flex; align-items: center; gap: 10px; }.banner-btn { margin: 0; padding: 9px 13px; color: var(--navy-950); background: var(--amber); border-radius: 9px; font-size: .8rem; }.banner-close { padding: 2px 5px; font-size: 1.35rem; line-height: 1; cursor: pointer; }
@media (max-width: 760px) { .management-header-inner { align-items: flex-start; flex-direction: column; padding: 16px; gap: 13px; }.management-brand h1 { font-size: 1.3rem; }.management-toolbar { width: 100%; }.management-alert-button { flex: 1; justify-content: center; }.management-notification-note, .management-channel-note, .management-ios-guide { padding-left: 16px; padding-right: 16px; }.management-content { padding: 22px 14px 60px; }.management-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }.management-live { align-self: flex-start; }.management-stat-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }.management-stat-card { padding: 15px; }.orders-heading p { text-align: left; }.management-filters { grid-template-columns: 1fr; padding: 13px; }.management-order { padding: 16px; }.management-order-top { align-items: flex-start; flex-direction: column; gap: 10px; }.management-order-grid { grid-template-columns: 1fr 1fr; gap: 15px 12px; }.order-field-wide { grid-column: 1 / -1; }.management-order-actions { align-items: stretch; flex-direction: column; gap: 14px; }.management-contact-actions a { flex: 1; justify-content: center; }.management-status-control { width: 100%; }.new-order-banner { align-items: flex-start; flex-direction: column; }.banner-actions { width: 100%; justify-content: space-between; } }
@media (max-width: 430px) { .management-toolbar { gap: 6px; }.management-alert-button { font-size: .77rem; padding: 0 8px; }.management-logout-button { padding: 0 9px; font-size: .78rem; }.management-order-grid { grid-template-columns: 1fr; }.order-field-wide { grid-column: auto; }.management-contact-actions { flex-direction: column; } }

/* ── Public news ── */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.news-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.news-card-image { display: block; height: 176px; overflow: hidden; background: #eef2f7; }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.news-card:hover .news-card-image img { transform: scale(1.03); }
.news-card-body { padding: 18px; }
.news-card-date { margin: 0 0 7px; color: var(--amber); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.news-card h2 { margin: 0 0 8px; color: var(--navy-900); font-size: 1.08rem; line-height: 1.35; }
.news-card h2 a:hover { color: var(--primary); }
.news-card-body > p:not(.news-card-date) { min-height: 66px; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.news-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; color: var(--primary); font-size: .86rem; font-weight: 800; }
.news-card-link span { font-size: 1.05rem; transition: transform .2s ease; }
.news-card-link:hover span { transform: translateX(3px); }
.news-empty { grid-column: 1 / -1; padding: 34px; text-align: center; }
.news-empty h2 { color: var(--navy-900); margin-bottom: 8px; }
.news-empty p { max-width: 520px; margin: 0 auto 18px; color: var(--text-muted); }
.news-article-wrap { max-width: 820px; }
.news-back { display: inline-flex; margin-bottom: 26px; color: var(--primary); font-size: .88rem; font-weight: 800; }
.news-article h1 { max-width: 780px; color: var(--navy-900); font-size: clamp(1.7rem, 4vw, 2.55rem); line-height: 1.2; }
.news-article-lead { max-width: 720px; margin: 14px 0 24px; color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; }
.news-article-cover { width: 100%; max-height: 420px; margin: 4px 0 28px; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lg); }
.news-article-content { color: var(--navy-900); font-size: 1.02rem; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
.news-article-contact { display: grid; gap: 6px; margin-top: 34px; padding: 22px; border: 1px solid #f1d29f; border-radius: 18px; background: #fff9ef; }
.news-article-contact strong { color: var(--navy-900); font-size: 1.05rem; }
.news-article-contact span { color: var(--text-muted); }
.news-article-contact > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; gap: 14px; }.news-card-image { height: 190px; }.news-card-body > p:not(.news-card-date) { min-height: 0; }.news-article-cover { max-height: 250px; border-radius: 17px; }.news-article-content { font-size: .98rem; }.news-article-contact > div { flex-direction: column; }.news-article-contact a { width: 100%; justify-content: center; } }