/* style.css */
    /* ========== Tokens (light) ========== */
    :root{
      --bg:#ffffff;           /* nền trắng */
      --ink:#0b1220;          /* chữ chính */
      --muted:#5b6876;        /* chữ phụ */
      --line:#e9eef3;         /* đường kẻ */
      --brand:#0077ff;        /* xanh dương chủ đạo */
      --brand-2:#3dbbff;      /* xanh dương nhạt phối */
      --accent:#1e90ff;       /* điểm nhấn */
      --max:1200px;
      --r:16px;
      --shadow:0 14px 36px rgba(2,8,20,.08);
      --t:.25s ease;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    .wrap{width:92%;max-width:var(--max);margin:auto}

    /* ========== Header (khác layout) ========== */
    .header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
    .header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
    .brand{display:flex;align-items:center;gap:.6rem;font-weight:900}
    .brand img{height:40px;width:40px;border-radius:10px}
    .nav ul{display:flex;align-items:center;gap:.25rem;list-style:none}
    .nav a{display:block;padding:.55rem .85rem;border-radius:10px}
    .nav a:hover{background:#f3faf7}
    .btn{display:inline-block;padding:.85rem 1.1rem;border-radius:999px;font-weight:800;letter-spacing:.2px;transition:var(--t)}
    .btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 10px 26px rgba(0,119,255,.28)}
    .btn--outline{border:2px solid var(--ink)}

    .burger{display:none;flex-direction:column;gap:5px;border:0;background:transparent}
    .burger span{width:28px;height:2px;background:var(--ink)}
    @media(max-width:980px){.burger{display:flex}.nav ul{position:absolute;left:0;right:0;top:68px;background:#fff;padding:10px;border-bottom:1px solid var(--line);display:none;flex-direction:column}.nav ul.open{display:flex}}

    /* ========== Hero (full-cover video + overlay text) ========== */
.hero{position:relative;border-bottom:1px solid var(--line)}
.hero--cover{position:relative;min-height:58vh}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__video{width:100%;height:100%;object-fit:cover;display:block}
.hero__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.25) 40%,rgba(255,255,255,0) 70%)}
.hero__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#fff;padding:56px 0}
.hero__inner h1{font-size:clamp(30px,4.6vw,56px);line-height:1.08;margin-bottom:8px}
.hero__inner p{opacity:.95;max-width:760px}
.hero__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:12px}
@media(max-width:980px){.hero--cover{min-height:48vh}}

/* (legacy split styles kept minimal for safety) */
.himg,.hcopy{display:none}

/* ========== Highlights */ (khác hình thức) ========== */
    .high{margin-top:6px}
    .grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
    .stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;text-align:center;box-shadow:var(--shadow)}
    .stat strong{display:block;color:var(--brand);font-size:22px}

    /* ========== Services (khác: list + icon trái) ========== */
    .section{padding:72px 0}
    .svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
    .svc-item{display:grid;grid-template-columns:44px 1fr;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
    .i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#f3faf7;color:#0c3326;font-weight:900}
    .svc-item h3{margin:2px 0 6px}
    .ticks{display:grid;gap:.35rem;color:#4b5563}
    .ticks li{list-style:'✔  ';margin-left:8px}

    /* ========== Pricing (khác: bảng 2 cột) ========== */
    .pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
    .price{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;position:relative}
    .price .tag{position:absolute;top:-10px;right:14px;background:var(--brand);color:#fff;border-radius:999px;padding:.25rem .6rem;font-weight:800}

    /* ========== Process (khác: dải ngang có số) ========== */
    .timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;counter-reset:st}
    .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;position:relative}
    .step:before{counter-increment:st;content:counter(st);position:absolute;top:-12px;left:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#062314;font-weight:900}
    .step h4{margin-left:42px}
    .step p{margin-left:42px;color:#4b5563}

    /* ========== Coverage (khác: card danh sách + map dưới) ========== */
    .chips{display:flex;flex-wrap:wrap;gap:8px}
    .chips span{background:#f3f6f9;border:1px solid #e6eef5;border-radius:999px;padding:.4rem .7rem}
    .mapbox{margin-top:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}

    /* ========== Blog (khác: 3 cột đều) ========== */
    .posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
    .post{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
    .post img{height:160px;object-fit:cover}
    .post .p{padding:12px}
    .post h3{font-size:18px;line-height:1.35;margin:4px 0}
    .meta{color:#6b7280;font-size:.9rem}

    /* ========== Contact & Footer (khác: sidebar thông tin bên phải) ========== */
    .contact{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:820px){.contact{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.fld{display:grid;gap:6px;margin-bottom:10px}
.fld input,.fld textarea{border:1px solid #dfe6ee;border-radius:12px;padding:14px;outline:none}
.footer{margin-top:40px;border-top:1px solid var(--line);padding:28px 0;color:#6b7280}
    .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
    .fld{display:grid;gap:6px;margin-bottom:10px}
    .fld input,.fld textarea{border:1px solid #dfe6ee;border-radius:12px;padding:14px;outline:none}
    .footer{margin-top:40px;border-top:1px solid var(--line);padding:28px 0;color:#6b7280}

    /* ========== Mobile call bar (ẩn vì dùng FAB) ========== */
.callbar{display:none !important}

/* ========== Floating Action Buttons (Call + Zalo) ========== */
.fabs{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:12px;z-index:90}
.fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--brand);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.fab--primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));border:none;color:#fff}
.fab img{width:24px;height:24px;display:block}
.fab span{font-size:22px;line-height:1}
@media(min-width:1024px){.fabs{right:24px;bottom:24px}}}
    @media(max-width:720px){.callbar{display:block}}
    /* === Extra sections === */
  .reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .rcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
  .rcard h3{margin-bottom:6px}
  .testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
  .tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
  .tcard .name{font-weight:800}
  .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
  .faq details+details{margin-top:10px}
  .cta-strip{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#062314}
  .cta-strip .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:18px 0}
  .cta-strip b{font-size:clamp(18px,2.4vw,24px)}