/* ==========================================================================
   style.css — Xe Ghép Sài Gòn – Thomo (Bootstrap 5.3)
   Nạp SAU bootstrap.min.css. Override qua CSS variables, giữ FLAT DESIGN.
   ========================================================================== */

/* ------------------------------------------------------- 1. TOKENS ---- */
:root {
  /* Thương hiệu */
  --bs-primary: #0c4da2;
  --bs-primary-rgb: 12, 77, 162;
  --accent-hover: #093b7d;
  --ink: #0a1f3d;
  --ink-2: #123058;
  --ink-border: #22456f;
  --highlight: #c2410c;
  --highlight-soft: #fff2ea;

  /* Bootstrap globals */
  --bs-body-color: #101828;
  --bs-body-bg: #ffffff;
  --bs-body-font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-border-color: #dfe4ea;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: var(--accent-hover);
  --bs-emphasis-color: var(--ink);
}

/* ----------------------------------------- 2. TẮT HIỆU ỨNG (FLAT) ---- */
/* Bản CDN bật sẵn gradient/shadow ở vài chỗ — vô hiệu hoá để giữ phẳng */
.bg-gradient { background-image: none !important; }
.btn { --bs-btn-box-shadow: none; background-image: none; }
.card { --bs-card-box-shadow: none; }
/* Chỉ lớp phủ mới được có shadow (tín hiệu chức năng) */
.dropdown-menu { box-shadow: 0 8px 24px rgb(16 24 40 / .14); }

/* ------------------------------------------------------- 3. BASE ------ */
body {
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.015em; }
h1, .h1 { letter-spacing: -.025em; }
section { scroll-margin-top: 7rem; }
img { max-width: 100%; height: auto; }

/* !important: đè utility .text-muted của Bootstrap (utility Bootstrap vốn có !important) */
.text-muted { color: #5a6675 !important; }
.section-pad { padding-block: clamp(3rem, 8vw, 6rem); }
.bg-alt { background: #f4f6f9; }

.section-ink { background: var(--ink); color: #fff; }
.section-ink h2, .section-ink h3 { color: #fff; }
.section-ink .text-muted { color: #b9c6d8 !important; }

.eyebrow {
  font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bs-primary); margin-bottom: .5rem;
}
.section-ink .eyebrow { color: #b9c6d8; }
.lead-2 { font-size: 1.25rem; color: #5a6675; }
.section-ink .lead-2 { color: #b9c6d8; }

/* ------------------------------------------------------- 4. BUTTONS --- */
.btn { font-weight: 600; --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.25rem; }
.btn-lg { --bs-btn-padding-y: .85rem; --bs-btn-padding-x: 1.75rem; --bs-btn-font-size: 1.0625rem; }
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #e8eef6; --bs-btn-hover-border-color: #e8eef6; }
.btn-outline-light { --bs-btn-border-color: var(--ink-border); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--ink-2); --bs-btn-hover-border-color: var(--ink-2); }

/* ------------------------------------------------------- 5. HEADER ---- */
.topbar { background: var(--ink); color: #fff; font-size: .8125rem; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

.navbar { border-bottom: 1px solid var(--bs-border-color); background: #fff; }
.navbar .navbar-brand { display: flex; align-items: center; }
/* Logo lockup ngang (SÀI GÒN THOMO + dáng xe) — cao cố định, rộng tự co */
.brand-logo-full { height: 2.75rem; width: auto; display: block; }
@media (min-width: 36em) { .brand-logo-full { height: 3rem; } }
.brand-mark {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--bs-primary); color: #fff; border-radius: .5rem; flex-shrink: 0;
}
.brand-name { font-weight: 700; font-size: 1.0625rem; line-height: 1.1; color: var(--ink); }
.brand-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5a6675; }
.navbar .nav-link { font-weight: 500; color: var(--ink); }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--bs-primary); }

/* ------------------------------------------------------- 6. HERO ------ */
/* FLAT: không dùng gradient. Ảnh được làm mờ trên nền màu đặc (ink) để
   chữ trắng đạt tương phản đọc được — đây là scrim chức năng, không trang trí. */
.hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/hero-highway.jpg") center / cover no-repeat;
  opacity: .30;
}
.hero > .container { position: relative; z-index: 1; }
.hero__route {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 1rem; border: 1px solid var(--ink-border); border-radius: 999px;
  font-size: .875rem; font-weight: 600; letter-spacing: .04em;
}
.hero__lead { color: #dbe4f0; font-size: 1.2rem; max-width: 42ch; }
.fact { border-top: 2px solid var(--ink-border); padding-top: .5rem; }
.fact__value { font-weight: 700; font-size: 1.35rem; display: block; }
.fact__label { font-size: .85rem; color: #b9c6d8; }

/* ------------------------------------------------------ 7. BOOKING ---- */
.booking-card { background: #fff; color: var(--bs-body-color); border-radius: .75rem; }
.booking-card .form-label { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.form-control, .form-select { border-color: var(--bs-border-color); padding: .6rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }

.btn-check + .btn-pill {
  border-radius: 999px; border: 1px solid var(--bs-border-color);
  color: var(--ink); background: #fff; font-weight: 600; font-size: .9rem;
  --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .9rem;
}
.btn-check:checked + .btn-pill { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

/* ------------------------------------------------------ 8. BẢNG GIÁ --- */
.price-table th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: #5a6675; font-weight: 700; white-space: nowrap;
}
.price-table td, .price-table th { padding: .85rem 1rem; vertical-align: middle; }
.price-table td:first-child { font-weight: 600; }
.price-table tbody tr:hover { background: #f4f6f9; }
.price { font-weight: 700; color: var(--highlight); white-space: nowrap; }

/* ------------------------------------------------------ 9. LOẠI XE ---- */
.filter-btn {
  border-radius: 999px; border: 1px solid var(--bs-border-color); background: #fff;
  color: var(--ink); font-weight: 600; font-size: .9rem; padding: .45rem 1.1rem;
}
.filter-btn.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }

.car-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; overflow: hidden; height: 100%; }
.car-card__img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.badge-soft { background: #eef2f7; color: #5a6675; font-weight: 700; }
.badge-ev { background: var(--highlight-soft); color: var(--highlight); font-weight: 700; }
.spec-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: #5a6675; }
.spec-list li { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .35rem; }
.spec-list svg { flex-shrink: 0; margin-top: .2em; color: var(--bs-primary); }

/* ----------------------------------------------------- 10. QUY TRÌNH -- */
.step { border-top: 2px solid var(--bs-border-color); padding-top: 1rem; height: 100%; }
.step__num { font-weight: 700; font-size: 2rem; line-height: 1; color: var(--bs-primary); }

/* ----------------------------------------------------- 11. TIỆN ÍCH --- */
.amenity-icon {
  flex-shrink: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: var(--ink-2); border-radius: .5rem; color: #fff;
}

/* -------------------------------------------------------- 12. WHY ----- */
.why-card { border-left: 3px solid var(--bs-primary); padding-left: 1rem; height: 100%; }

/* ----------------------------------------------------- 13. ĐÁNH GIÁ --- */
.review-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; height: 100%; }
.stars { color: var(--highlight); letter-spacing: .1em; }
.avatar {
  width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: grid; place-items: center;
  background: #eef2f7; border-radius: 999px; font-weight: 700; font-size: .85rem; color: #5a6675;
}

/* -------------------------------- Helper thay cho inline style -------- */
.measure-60 { max-width: 60ch; }
.container-tight { max-width: 44rem; }
.review-meta { font-size: .72rem; }
.card-ink { background: var(--ink-2); }
.card-ink h3 { color: #fff; }
.card-ink .post-meta { color: #b9c6d8; }

/* ----------------------------------------------------- 14. FANPAGE ---- */
.fb-embed { border: 1px solid var(--ink-border); border-radius: .75rem; overflow: hidden; background: #fff; }
.fb-embed iframe { display: block; width: 100%; height: 560px; border: 0; }

/* Danh sách lợi ích trong panel fanpage */
.fb-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.fb-benefits li { display: flex; gap: .7rem; align-items: flex-start; color: #dbe4f0; }
.fb-benefits svg { flex-shrink: 0; margin-top: .15em; color: #fff; }

/* -------------------------------------------------------- 15. BLOG ---- */
.post-card { border: 1px solid var(--bs-border-color); border-radius: .75rem; overflow: hidden; height: 100%; }
.post-card__img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-meta { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5a6675; }
.post-card h3 { font-size: 1.15rem; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { color: var(--bs-primary); }

/* -------------------------------------------------------- 16. FAQ ----- */
.accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { background: #eef3fa; color: var(--bs-primary); box-shadow: none; }
.accordion-button:focus { border-color: var(--bs-primary); }

/* -------------------------------------------------------- 17. CTA ----- */
.cta-band { background: var(--bs-primary); color: #fff; }
.cta-band h2 { color: #fff; }

/* ----------------------------------------------------- 18. FOOTER ----- */
.site-footer { background: var(--ink); color: #fff; }
.site-footer h3 { font-size: 1rem; color: #fff; }
.site-footer a { color: #b9c6d8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.site-footer .footer-list li { margin-bottom: .5rem; }
.footer-bottom { border-top: 1px solid var(--ink-border); font-size: .875rem; color: #b9c6d8; }

/* ----------------------------------- 19. HỖ TRỢ TRỰC TUYẾN (DESKTOP) - */
/* Cụm nút nổi bên phải, hiện từ md trở lên. Màu đặc theo từng kênh,
   phân biệt bằng màu + nhãn — flat, không shadow trang trí. */
.support-fab {
  position: fixed; right: 1rem; bottom: 1.25rem; z-index: 1040;
  display: none; flex-direction: column; gap: .6rem;
}
.support-fab a {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 3rem; padding: 0 .9rem 0 .8rem;
  border-radius: 999px; color: #fff; text-decoration: none;
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  max-width: 3rem; overflow: hidden;
  transition: max-width var(--bs-transition, .2s) ease, background-color .15s ease;
}
.support-fab a:hover, .support-fab a:focus-visible { max-width: 16rem; color: #fff; }
.support-fab svg { flex-shrink: 0; }
.support-fab .fab-call { background: #16a34a; }
.support-fab .fab-call:hover { background: #128a3f; }
.support-fab .fab-fb { background: #1877f2; }
.support-fab .fab-fb:hover { background: #1465d8; }
.support-fab .fab-zalo { background: #0068ff; }
.support-fab .fab-zalo:hover { background: #0056d6; }

/* ----------------------------------------- 20. THANH DƯỚI (MOBILE) --- */
.quick-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1040;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-top: 1px solid var(--bs-border-color);
}
.quick-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: .5rem; min-height: 3.5rem; font-size: .72rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.quick-bar a + a { border-left: 1px solid var(--bs-border-color); }
.quick-bar a:hover { background: #f4f6f9; }
body { padding-bottom: 3.5rem; }
@media (min-width: 992px) {
  .quick-bar { display: none; }
  .support-fab { display: flex; }
  body { padding-bottom: 0; }
}

/* --------------------------------------- 21. Tôn trọng reduced-motion - */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}