/* =========================================================
   Hàn Kính Ô Tô Đà Nẵng — landing page
   Không phụ thuộc thư viện ngoài, chạy được offline.

   Bảng màu: xanh lá sáng là màu chủ đạo.
   - --brand      : XANH LÁ SÁNG — màu chính. Nền nút, icon, chip.
                    Vì nền sáng nên chữ trên nút phải là --on-brand (xanh gần đen),
                    chữ trắng đặt trên màu này sẽ khó đọc.
   - --brand-2    : xanh lá sáng đậm hơn một bậc, dùng cho hover / gradient
   - --brand-dark : xanh lá đậm — dùng khi CHỮ nằm trên nền trắng (giá, link, tag)
   - --ink        : xanh rừng gần đen, dùng cho header / hero / footer
   - --mint       : xanh lá nhạt, dùng để nhấn chữ trên nền tối
   - --zalo       : #0068FF — màu thương hiệu Zalo là XANH DƯƠNG, không phải xanh lá
                    (#25d366 là màu của WhatsApp)
   - --star       : vàng, CHỈ dùng cho ngôi sao đánh giá
   ========================================================= */

:root {
  --ink: #06271b;
  --ink-2: #0a3826;
  --ink-3: #0e4630;

  --brand: #25d366;
  --brand-2: #1cbb59;
  --brand-dark: #12703f;
  --brand-soft: #eaf8f0;
  --brand-line: #cceddb;
  --mint: #7ee2b0;
  --on-brand: #06301c;

  --zalo: #0068ff;
  --zalo-dark: #0055d4;
  --star: #f2b632;
  --red: #cf4a3f;
  --amber-soft: #fdf6e6;
  --amber-line: #f2e0b4;

  --text: #17251f;
  --muted: #5b6b63;
  --bg: #f5f8f6;
  --line: #e4ece8;
  --white: #fff;

  --radius: 18px;
  --shadow: 0 4px 18px rgba(6, 39, 27, .06);
  --shadow-md: 0 10px 28px rgba(6, 39, 27, .09);
  --shadow-lg: 0 18px 44px rgba(6, 39, 27, .14);
  --header-h: 72px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--mint); color: var(--ink); padding: 10px 18px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ===== LAYOUT ===== */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 820px; }

.section { padding: 84px 0; }
.section.alt { background: var(--white); }

.section-tag {
  display: inline-block; color: var(--brand-dark); background: var(--brand-soft);
  font-weight: 600; font-size: 13.5px; letter-spacing: .02em;
  padding: 6px 15px; border-radius: 100px; margin-bottom: 14px;
}
.section-title {
  font-size: clamp(25px, 4vw, 37px); font-weight: 800; color: var(--ink);
  line-height: 1.25; margin-bottom: 12px; letter-spacing: -.015em;
}
.section-sub { color: var(--muted); font-size: 17px; max-width: 660px; }
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }
.muted-light { color: #a9c4b7 !important; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; font-size: 16px; padding: 14px 28px;
  border: none; border-radius: 100px; cursor: pointer; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-block { width: 100%; }

/* CTA chính — gọi điện. Xanh lá sáng, chữ xanh gần đen cho dễ đọc.
   Đổ bóng dùng màu trung tính chứ không dùng quầng sáng xanh: quầng neon
   dưới nút là thứ làm trang trông rẻ nhanh nhất. */
.btn-primary {
  background: var(--brand); color: var(--on-brand);
  box-shadow: 0 6px 18px rgba(6, 39, 27, .14);
}
.btn-primary:hover { background: #2bdd6f; box-shadow: 0 10px 24px rgba(6, 39, 27, .2); }

/* Nút hành động trên nền trắng (gửi form, gọi ở phần liên hệ).
   Vẫn là xanh lá sáng + chữ xanh gần đen: chữ trắng trên xanh sáng chỉ đạt
   2,5:1 nên không đọc nổi ngoài nắng — chữ tối đạt 7,3:1. */
.btn-call { background: var(--brand); color: var(--on-brand); box-shadow: 0 6px 18px rgba(6, 39, 27, .14); }
.btn-call:hover { background: #2bdd6f; box-shadow: 0 10px 24px rgba(6, 39, 27, .2); }

/* Zalo — XANH DƯƠNG #0068FF là màu thương hiệu thật của Zalo */
.btn-zalo { background: var(--zalo); color: #fff; box-shadow: 0 6px 18px rgba(0, 60, 150, .18); }
.btn-zalo:hover { background: var(--zalo-dark); box-shadow: 0 10px 24px rgba(0, 60, 150, .26); }

/* ===== HEADER =====
   Nền sáng mờ thay cho dải xanh đậm đặc kín. Dải màu đặc chạy hết chiều ngang
   là thứ làm menu trông thô; ở đây chỉ còn một đường kẻ 1px phân tách. */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(10, 43, 30, .07);
  transition: box-shadow .25s ease, border-color .25s ease;
}
header.scrolled {
  box-shadow: 0 6px 24px rgba(6, 39, 27, .07);
  border-bottom-color: rgba(10, 43, 30, .11);
}

.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 14px; }
.logo { display: flex; align-items: center; gap: 11px; color: var(--ink); }
/* Logo thật (ảnh vuông) — bo góc mềm, viền mảnh cho khớp nền sáng */
.logo-badge {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--brand-line);
}
.logo-text {
  font-weight: 800; font-size: 16.5px; line-height: 1.1; letter-spacing: -.005em;
  display: flex; flex-direction: column;
}
.logo-text b { color: var(--brand-dark); font-size: 10px; letter-spacing: .13em; font-weight: 700; }

.nav-links { display: flex; gap: 27px; }
.nav-links a {
  position: relative; padding: 5px 0; color: #4b5c53;
  font-weight: 500; font-size: 15px; transition: color .18s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Nút gọi ở menu — xanh lá sáng, chữ trắng theo yêu cầu */
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  color: #fff; font-weight: 700; font-size: 15px;
  background: var(--brand); padding: 10px 19px; border-radius: 100px;
  box-shadow: 0 4px 14px rgba(6, 39, 27, .12);
  transition: background .18s, box-shadow .18s;
}
.nav-phone:hover { background: #2bdd6f; box-shadow: 0 6px 18px rgba(6, 39, 27, .18); }
.nav-toggle {
  display: none; background: none; border: none; color: var(--ink);
  font-size: 25px; cursor: pointer; line-height: 1;
}

/* ===== HERO =====
   Nền là video nên chữ phải sáng, và phải có lớp phủ tối (scrim) đè lên video —
   chữ đặt trực tiếp trên video luôn có đoạn bị nhoè khi khung hình sáng lên. */
.hero {
  position: relative; color: #fff; overflow: hidden; background: var(--ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-video { background: var(--ink); }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(3, 22, 14, .95) 0%, rgba(5, 32, 21, .88) 40%, rgba(5, 32, 21, .58) 100%),
    linear-gradient(0deg, rgba(3, 22, 14, .5), transparent 45%);
}
.hero-inner {
  position: relative; z-index: 1;
  padding: 104px 20px 116px;
  display: grid; grid-template-columns: 1fr;
}
.hero-copy { max-width: 730px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
  color: #eafaf1; backdrop-filter: blur(6px);
  padding: 8px 17px; border-radius: 100px; font-size: 14px; font-weight: 600;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 49px); font-weight: 800; line-height: 1.14;
  margin-bottom: 18px; letter-spacing: -.025em; color: #fff;
}
.hero h1 span {
  display: block; margin-top: 10px; color: var(--mint);
  font-size: clamp(19px, 2.5vw, 26px); font-weight: 700; letter-spacing: -.01em;
}
.hero-copy > p { font-size: 17.5px; color: #d2e6dc; margin-bottom: 28px; max-width: 540px; }
.hero-copy > p b { color: #fff; font-weight: 700; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-cta.center-cta { justify-content: center; }
.hero-hint { margin-top: 16px; font-size: 14px; color: #a8c4b7; }

.hero-stats {
  display: flex; gap: 36px; margin-top: 42px; padding-top: 30px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats .num { font-size: 30px; font-weight: 800; color: var(--mint); line-height: 1.15; }
.hero-stats .lbl { font-size: 14px; color: #a8c4b7; }

/* Form báo giá */
/* ===== TRUST STRIP ===== */
.trust { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 26px 20px; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item .ico {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px; background: var(--brand-soft);
}
.trust-item b { color: var(--ink); display: block; font-size: 15px; line-height: 1.35; }
.trust-item small { color: var(--muted); font-size: 13px; }

/* ===== CARDS ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.section.alt .card { background: #fbfdfc; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.card-ico {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  font-size: 26px; margin-bottom: 16px; background: var(--brand-soft);
}
.card h3 { color: var(--ink); font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }
.card .price { color: var(--brand-dark); font-weight: 700; font-size: 15px; margin-top: 14px; }
.card .price span { color: var(--muted); font-weight: 400; font-size: 13px; }
.pain-grid .card-ico { background: #fdeeec; }

/* Callout */
.callout {
  margin-top: 34px; display: flex; gap: 16px; align-items: flex-start;
  background: var(--amber-soft); border: 1px solid var(--amber-line); border-left: 4px solid #e0ac36;
  border-radius: 16px; padding: 20px 24px;
}
.callout-ico { font-size: 23px; line-height: 1.3; }
.callout p { font-size: 15.5px; color: #4d4021; }
.callout-info { background: var(--brand-soft); border-color: var(--brand-line); border-left-color: var(--brand); }
.callout-info p { color: #1f4536; }
.callout-info a { color: var(--brand-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ===== 6 LÝ DO NÊN HÀN (hàn hay thay) ===== */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }
.reason {
  position: relative; overflow: hidden;
  background: #fbfdfc; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.reason:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.reason-num {
  position: absolute; right: 20px; top: 6px;
  font-size: 66px; font-weight: 800; line-height: 1;
  color: rgba(18, 112, 63, .08); pointer-events: none;
}
.reason .card-ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 25px; margin-bottom: 14px; background: var(--brand-soft);
}
.reason h3 { color: var(--ink); font-size: 18.5px; margin-bottom: 8px; }
.reason p { color: var(--muted); font-size: 15px; }
.reason p b { color: var(--text); font-weight: 600; }

/* ===== SPLIT (hàn được / nên thay) ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 46px; }
.split-col {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow);
}
.split-col h3 { font-size: 20px; color: var(--ink); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.split-col ul { display: flex; flex-direction: column; gap: 12px; }
.split-col li { position: relative; padding-left: 27px; font-size: 15.5px; color: #35443d; }
.split-col li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.split-col.ok { border-top: 3px solid var(--brand); }
.split-col.ok li::before { content: "✓"; color: var(--brand-dark); }
.split-col.no { border-top: 3px solid var(--red); }
.split-col.no li::before { content: "✕"; color: var(--red); }
.split-note { margin-top: 18px; font-size: 14px; color: var(--muted); font-style: italic; }

/* ===== BEFORE / AFTER SLIDER ===== */
/* Ảnh khách gửi là ảnh dọc chụp bằng điện thoại nên khung để 3/4, không phải
   16/9 — để 16/9 thì cắt mất phần lớn vết nứt ở giữa ảnh. */
.ba {
  position: relative; margin: 46px auto 0; max-width: 520px;
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 3 / 4; background: #1d3550;
  user-select: none; touch-action: pan-y;
}
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-before { clip-path: inset(0 50% 0 0); }
.ba-tag {
  position: absolute; bottom: 16px; padding: 7px 15px; border-radius: 100px;
  font-size: 13px; font-weight: 700; color: #fff; backdrop-filter: blur(4px);
}
.ba-tag-before { left: 16px; background: rgba(207, 74, 63, .9); }
.ba-tag-after { right: 16px; background: rgba(18, 112, 63, .92); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; transform: translateX(-1.5px); pointer-events: none;
  box-shadow: 0 0 12px rgba(0, 0, 0, .35);
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--brand-dark);
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; cursor: ew-resize; }
.ba-range::-moz-range-thumb { width: 46px; height: 999px; border: 0; background: transparent; cursor: ew-resize; }

/* Dải ảnh nhỏ để đổi giữa các ca đã làm */
.ba-thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.ba-thumb {
  width: 64px; height: 64px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: 13px; background: none;
  transition: border-color .18s, transform .18s;
}
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-thumb:hover { transform: translateY(-2px); }
.ba-thumb.is-active { border-color: var(--brand); }
.ba-note { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 14px; }

/* ===== PRICE TABLE ===== */
.price-table {
  margin-top: 42px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto;
}
.price-table table { width: 100%; min-width: 560px; border-collapse: collapse; }
.price-table th {
  background: var(--ink); color: #fff; text-align: left;
  padding: 17px 22px; font-size: 15px; font-weight: 600;
}
.price-table td { padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 15px; }
.price-table tr:last-child td { border-bottom: none; }
.price-table td:first-child { font-weight: 600; color: var(--ink); }
.price-table td:last-child { font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.price-table tbody tr:hover td { background: #f5faf7; }
.price-note { color: var(--muted); font-size: 13.5px; margin-top: 16px; text-align: center; }

/* ===== WHY US =====
   Một dải tối duy nhất giữa trang. Chỗ tương phản mạnh này mới là thứ tạo cảm
   giác chắc tay, và nó làm nút xanh sáng nổi hơn bất kỳ nền xanh nào. */
.why {
  color: #fff;
  background:
    radial-gradient(720px 380px at 88% 4%, rgba(37, 211, 102, .16), transparent 62%),
    linear-gradient(160deg, #051f15 0%, var(--ink) 55%, #0b3826 100%);
}
.why .section-title { color: #fff; }
.why .section-tag { background: rgba(126, 226, 176, .13); color: var(--mint); }
.why .muted-light { color: #a3bfb2 !important; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; }
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-item .ico {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  font-size: 23px; background: rgba(126, 226, 176, .1); border: 1px solid rgba(126, 226, 176, .16);
}
.why-item h3 { font-size: 17px; margin-bottom: 5px; color: #fff; }
.why-item p { color: #a3bfb2; font-size: 14.5px; }

/* ===== PROCESS ===== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 46px; }
.step { text-align: center; }
.step-num {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: var(--on-brand);
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
  box-shadow: 0 8px 18px rgba(37, 211, 102, .32);
}
.step h3 { color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 14.5px; }

/* ===== REVIEWS =====
   Ảnh chụp màn hình đánh giá Google, chiều cao mỗi ảnh khác nhau nên xếp kiểu
   masonry bằng CSS columns — dùng grid sẽ để lại khoảng trống dưới ảnh thấp. */
.reviews-shots {
  margin-top: 46px;
  columns: 2; column-gap: 22px;
}
.review-shot {
  break-inside: avoid; margin: 0 0 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow);
}
.review-shot img { width: 100%; height: auto; display: block; }

.reviews-cta { text-align: center; margin-top: 10px; }

/* Nút phụ: viền xanh, nền trắng — để không tranh chú ý với nút gọi */
.btn-outline {
  background: #fff; color: var(--brand-dark);
  border: 1.5px solid var(--brand-line); box-shadow: var(--shadow);
}
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ===== AREAS ===== */
.areas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 42px; }
.areas li {
  background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 100px;
  padding: 10px 20px; font-weight: 600; font-size: 15px; color: var(--brand-dark);
}
.areas li::before { content: "📍 "; }
.areas-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }

/* ===== FAQ ===== */
.faq { margin-top: 42px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s;
}
.faq-item[open] { border-color: var(--brand-line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 19px 54px 19px 22px; position: relative;
  font-weight: 700; font-size: 16.5px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 700; color: var(--brand-dark);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { color: var(--brand-dark); }
.faq-body { padding: 0 22px 22px; }
.faq-body p { color: var(--muted); font-size: 15.5px; }
.faq-body b { color: var(--text); font-weight: 600; }

/* ===== CTA BANNER ===== */
.cta-banner {
  background:
    radial-gradient(600px 320px at 80% 0%, rgba(37, 211, 102, .2), transparent 66%),
    linear-gradient(135deg, #0c3a26 0%, var(--ink) 68%);
  color: #fff; border-radius: 26px; padding: 56px 40px; text-align: center; box-shadow: var(--shadow-lg);
}
.cta-banner h2 {
  font-size: clamp(23px, 3.5vw, 33px); font-weight: 800; margin-bottom: 12px;
  letter-spacing: -.015em; color: #fff;
}
.cta-banner p { color: #b7d2c5; font-size: 17px; margin-bottom: 30px; max-width: 620px; margin-inline: auto; }

/* ===== CONTACT ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; margin-top: 46px; }
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-row .ico {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  font-size: 21px; background: var(--brand-soft);
}
.contact-row b { color: var(--ink); font-size: 16px; display: block; }
.contact-row span, .contact-row a { color: var(--muted); font-size: 15px; }
.contact-row a:hover { color: var(--brand-dark); }
.map-wrap {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); min-height: 340px; background: #eaf0ed;
}
.map-wrap iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }

/* ===== FOOTER ===== */
footer { background: var(--ink); color: #a9c4b7; padding: 52px 0 92px; }
/* Logo giờ mặc định màu tối cho header sáng — trong footer tối phải đảo lại */
footer .logo { color: #fff; }
footer .logo-badge { border-color: rgba(126, 226, 176, .25); }
footer .logo-text b { color: var(--mint); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 36px; margin-bottom: 32px; }
.footer-grid > div > p { font-size: 14.5px; margin-top: 15px; }
.footer-col h3 { color: #fff; font-size: 16px; margin-bottom: 15px; }
.footer-col a, .footer-col p { color: #9bb8ab; font-size: 14.5px; display: block; margin-bottom: 9px; }
.footer-col a:hover { color: var(--mint); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 22px;
  text-align: center; font-size: 13.5px; color: #7f9a8d;
}

/* ===== FLOATING BUTTONS ===== */
.floating { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 12px; }
/* Viền trắng để nút nổi không bị lẫn vào hero xanh sáng khi cuộn ngang qua */
.fab {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 24px; box-shadow: var(--shadow-lg); animation: pulse-brand 3s infinite;
  border: 2px solid rgba(255, 255, 255, .92);
}
.fab-call { background: var(--brand); color: var(--on-brand); }
.fab-zalo { background: var(--zalo); color: #fff; font-size: 15px; font-weight: 800; animation-name: pulse-zalo; }
@keyframes pulse-brand {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .4); }
  70% { box-shadow: 0 0 0 13px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes pulse-zalo {
  0% { box-shadow: 0 0 0 0 rgba(0, 104, 255, .4); }
  70% { box-shadow: 0 0 0 13px rgba(0, 104, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0); }
}

/* Thanh CTA cố định dưới màn hình — chỉ mobile */
.mobile-bar { display: none; }
.mb-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 8px; font-weight: 700; font-size: 15.5px;
}
.mb-call { background: var(--brand); color: var(--on-brand); }
.mb-zalo { background: var(--zalo); color: #fff; }

/* ===== SCROLL REVEAL =====
   Chỉ ẩn khi JS chạy được (script.js gắn class .js vào <html>).
   Nếu JS lỗi hoặc bị chặn thì nội dung vẫn hiện bình thường. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff;   /* đục hẳn — để trong suốt thì chữ hero lọt qua, đọc rất mệt */
    padding: 12px 20px 18px; border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(6, 39, 27, .1);
  }
  .nav-links.open a { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-links.open a:last-child { border-bottom: none; }
  .nav-links.open a::after { display: none; }
  .hero-inner { padding-top: 72px; padding-bottom: 80px; }
  .hero-copy > p { max-width: none; }
  .grid-3, .reasons { grid-template-columns: repeat(2, 1fr); }
  .split, .why-grid, .contact-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-inner { justify-content: flex-start; }
  .trust-item { width: calc(50% - 10px); }
}

@media (max-width: 640px) {
  .section { padding: 58px 0; }
  .nav-phone { display: none; }
  .logo-text { font-size: 15.5px; }
  .grid-3, .reasons, .steps, .footer-grid { grid-template-columns: 1fr; }
  .reviews-shots { columns: 1; }
  .trust-item { width: 100%; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-stats { gap: 24px; }
  .hero-stats .num { font-size: 25px; }
  .cta-banner { padding: 38px 22px; }
  .callout { flex-direction: column; gap: 10px; }
  .floating { display: none; }
  .mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    box-shadow: 0 -6px 20px rgba(6, 39, 27, .2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  footer { padding-bottom: 86px; }
}