:root{
  --navy:#0B1F3A; --blue:#0057B8; --blue-600:#00449A; --blue-tint:#E8F1FC;
  --orange:#D24300; --orange-600:#A83600;
  --it:#0057B8; --pc:#6D3BEB; --dien:#F59E0B; --nuoc:#0EA5B7;
  --print:#DB2777; --infra:#0E8A5F;
  --bg:#FFFFFF; --bg-alt:#F5F7FA; --border:#E3E8EF;
  --text:#1F2937; --muted:#5A6B7F; --green:#0E8A5F; --red:#DC2626;
  --r:12px; --r-lg:18px;
  --shadow:0 1px 3px rgba(11,31,58,.08);
  --shadow-lg:0 12px 28px rgba(11,31,58,.12);
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip chứ KHÔNG dùng hidden — hidden biến body thành vùng cuộn
   riêng và làm hỏng position:sticky của header. Đây là lỗi menu không dính. */
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;color:var(--text);
  background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.28;color:var(--navy);font-weight:700}
h1{font-size:48px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
h2{font-size:33px;letter-spacing:-.01em}
h3{font-size:21px}
h4{font-size:17px}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
/* Khung hẹp cho trang nhiều chữ (chính sách bảo mật, điều khoản dịch vụ):
   dòng chữ dài quá 90 ký tự thì mắt khó bắt đầu dòng mới. */
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
section.tight{padding:48px 0}
.alt{background:var(--bg-alt)}
.center{text-align:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.lead{color:var(--muted);font-size:18px;max-width:700px}
.center .lead{margin-left:auto;margin-right:auto}
.sec-head{margin-bottom:40px}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:40px}
.muted{color:var(--muted)}.small{font-size:14.5px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;
  border-radius:10px;font-weight:600;font-size:16px;border:1.5px solid transparent;cursor:pointer;
  transition:.2s ease-out;font-family:inherit;text-align:center}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-600);transform:translateY(-2px);box-shadow:0 8px 20px rgba(210,67,0,.3)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-600);transform:translateY(-2px)}
.btn-navy{border-color:var(--navy);color:var(--navy)}
.btn-navy:hover{background:var(--navy);color:#fff}
.btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:10px 20px;font-size:15px}
.btn-full{width:100%}

/* image frames */
.ph{position:relative;overflow:hidden;border-radius:var(--r);display:block;
  background:#fff;}
.ph::after{content:attr(data-label);position:absolute;inset:0;z-index:0;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:18px;color:#8FB6E4;
  font-size:13.5px;font-weight:600;line-height:1.5}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.ph.is-broken img{display:none}
/* Ảnh thiết bị chụp trên nền trong suốt: hiện trọn vật thể, không cắt mép.
   Nền sáng đồng bộ với --bg-alt nên không lộ viền trắng lạ. */
.ph.fit{background:var(--bg)}
.ph.fit img{object-fit:contain;padding:14px}
.r-16x9{aspect-ratio:16/9}.r-4x3{aspect-ratio:4/3}.r-3x2{aspect-ratio:3/2}
.r-1x1{aspect-ratio:1/1}.r-21x9{aspect-ratio:21/9}.r-tall{aspect-ratio:3/4}

/* THANH TRÊN CÙNG — nằm NGOÀI vùng sticky nên nó cuộn đi tự nhiên,
   không cần animate max-height (thứ gây giật và cắt chữ giữa chừng). */
#site-topbar{position:relative;z-index:1}
.util{background:var(--navy);color:#C6D2E2;font-size:14px}
/* Dồn cả hàng về bên phải: câu "Hỗ trợ 24/7" và hai số điện thoại đứng
   liền nhau thành một cụm, thay vì kéo giãn ra hai đầu màn hình rộng. */
.util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:28px;min-height:42px;flex-wrap:wrap}
.util a{color:#fff;font-weight:600}
.util .grp{display:flex;gap:20px;align-items:center;flex-wrap:wrap}

/* THANH MENU — phần tử sticky phải là con trực tiếp của body, và chỉ chứa
   đúng thanh menu. Không animate height/font-size/padding: những thuộc tính
   đó buộc trình duyệt tính lại layout mỗi khung hình khi cuộn → giật.
   Chỉ animate box-shadow, thứ chạy trên compositor nên luôn mượt. */
#site-header{position:sticky;top:0;z-index:60;
  will-change:box-shadow;transition:box-shadow .2s ease}
#site-header.scrolled{box-shadow:0 4px 18px rgba(11,31,58,.12)}
header.site{position:relative;background:#fff;border-bottom:1px solid var(--border)}
#site-header.scrolled header.site{border-bottom-color:transparent}
header.site .wrap{position:relative;display:flex;align-items:center;gap:24px;height:72px}

/* language switcher */
.lang-sw{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;
  background:var(--bg-alt);flex:none}
.lang-sw button{border:0;background:none;font-family:inherit;font-weight:700;font-size:14px;
  padding:8px 13px;cursor:pointer;color:var(--muted);transition:.15s;letter-spacing:.03em}
.lang-sw button:hover{color:var(--navy)}
.lang-sw button.on{background:var(--navy);color:#fff}
.lang-note{background:#FFF7ED;border:1px solid #FED7AA;color:#9A3412;border-radius:10px;
  padding:12px 18px;font-size:14.5px;margin:0 auto 26px;max-width:var(--max)}
.logo{display:flex;align-items:center;flex:none;line-height:0}
.logo .wm{width:auto;display:block}
#site-header.scrolled .logo .wm{height:27px;transition:height .2s ease}
nav.main{display:flex;gap:22px;margin-left:auto;align-items:center}
nav.main .lnk{color:var(--navy);font-weight:600;font-size:15.5px;padding:26px 0;
  border-bottom:2px solid transparent;transition:.15s;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
nav.main .lnk:hover,nav.main .lnk.active{color:var(--blue);border-bottom-color:var(--blue)}
.head-cta{display:flex;align-items:center;gap:14px;flex:none}
.phone-head{display:flex;flex-direction:column;line-height:1.2}
.phone-head span{font-size:12px;color:var(--muted);font-weight:500}
.phone-head strong{font-size:18px;color:var(--orange-600)}
.burger{display:none;background:none;border:0;font-size:26px;color:var(--navy);cursor:pointer;
  margin-left:auto;line-height:1;min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0}

/* mega menu anchored to container */
.has-mega{position:static}
.mega{position:absolute;top:100%;left:24px;right:24px;background:#fff;border:1px solid var(--border);
  border-top:0;border-radius:0 0 16px 16px;box-shadow:var(--shadow-lg);padding:26px 28px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:22px 26px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.18s;pointer-events:none;max-height:78vh;overflow-y:auto}
.has-mega:hover .mega,.mega.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mega h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;
  padding-bottom:8px;border-bottom:2px solid var(--c,var(--border));display:flex;align-items:center;gap:7px}
.mega h4 a{color:var(--navy)}
.mega ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.mega ul a{color:var(--muted);font-size:14.5px;cursor:pointer;display:flex;gap:7px;line-height:1.4}
.mega ul a::before{content:"›";color:var(--c,var(--blue));font-weight:800;flex:none}
.mega ul a:hover{color:var(--blue)}
/* chỉ còn đúng một nút nên căn phải thay vì dàn hai đầu */
.mega .allsvc{grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px;display:flex;
  justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap}

/* heroes */
.hero{background:linear-gradient(150deg,var(--navy) 0%,#093163 55%,var(--blue) 100%);color:#fff;
  padding:74px 0 82px;position:relative;overflow:hidden}
.hero::after,.phero::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px;pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:#7FB2F0}
.hero .sub{font-size:19.5px;color:#C9DAF0;margin:20px 0 28px;max-width:580px}
.hero .sub strong{color:#fff}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.chips{display:flex;gap:11px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);padding:9px 15px;border-radius:9px;font-size:14.5px;
  color:#E4EEF9;font-weight:500}
.chip b{color:#fff}
.hero-media{position:relative}
.hero-media .ph{border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.phero{background:linear-gradient(140deg,var(--navy) 0%,#0A3A75 60%,var(--blue) 130%);color:#fff;
  padding:50px 0 56px;position:relative;overflow:hidden}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff;font-size:40px;max-width:830px}
.phero p{color:#C9DAF0;font-size:18.5px;max-width:730px;margin-top:16px}
.crumb{font-size:14px;color:#93B4D8;margin-bottom:16px}
.crumb a{color:#C9DAF0;cursor:pointer}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb .sep{margin:0 9px;opacity:.45}
.crumb .cur{color:#E4EEF9;font-weight:600}

/* metrics */
/* Khối lưu ý — chỉ còn dùng cho điều khoản thật sự cần nói với khách
   (điều kiện áp dụng giá, cách kích hoạt bảo hành, miễn trừ bài hướng dẫn),
   không dùng cho ghi chú kỹ thuật nội bộ nữa. */
.caveat{margin-top:26px;padding:16px 20px;background:var(--blue-tint);border-left:4px solid var(--blue);
  border-radius:0 10px 10px 0;font-size:15px;color:#1E3A5F;line-height:1.6}
.caveat strong{color:var(--navy)}

.metrics{background:var(--navy);padding:0}
.metrics .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}
.metric{background:var(--navy);padding:32px 20px;text-align:center}
.metric b{display:block;font-size:37px;font-weight:800;color:#fff;line-height:1.1}
.metric span{font-size:14.5px;color:#9DB2CC}

.mottos {
  background: var(--navy);
  padding: 0;
  width: 100%;
}

.mottos .wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  
  /* ĐỘ RỘNG VỪA PHẢI: Giảm từ 1000px xuống 850px */
  max-width: 1200px !important; 
  margin: 0 auto;
}

.motto {
  background: var(--navy);
  
  /* CHIỀU CAO VỪA PHẢI: Giảm từ 45px xuống 24px */
  padding: 20px 16px !important; 
  
  text-align: center;
  border-radius: 0 !important;
}

.motto span {
  display: block;
  font-size: 13px !important;
  color: #9DB2CC;
  margin-bottom: 6px;
}

.motto b {
  display: block;
  font-size: 19px !important; /* Hạ cỡ chữ xuống 19px cho gọn */
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

@media (max-width: 700px) {
  .mottos .wrap {
    grid-template-columns: 1fr;
  }
}
/* grids + cards */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-5{display:grid;  grid-template-columns:repeat(2,275px);gap:50px; justify-content:center;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split-side{display:grid;grid-template-columns:270px 1fr;gap:40px;align-items:start}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;transition:.2s ease-out;display:flex;flex-direction:column}
a.card{color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .body{padding:22px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15.5px}
.card .more{margin-top:auto;padding-top:16px;font-weight:600;font-size:15px;color:var(--navy)}
.card .more:hover{color:var(--blue)}
.svc{border-top:4px solid var(--c,var(--blue))}
.svc .ico{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:14px;background:color-mix(in srgb,var(--c,var(--blue)) 13%,#fff)}
.svc .from{color:var(--orange-600);font-weight:700;font-size:14.5px;margin:2px 0 12px}
.svc ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.svc ul a{color:var(--muted);font-size:15px;display:flex;gap:8px;cursor:pointer}
.svc ul a:hover{color:var(--blue)}
.svc ul a::before{content:"→";color:var(--c,var(--blue));font-weight:700;flex:none}
/* Thẻ đặc điểm không dùng icon: thay ô emoji bằng một vạch màu mảnh phía trên.
   Tiêu đề được đặt chiều cao tối thiểu bằng hai dòng để đoạn mô tả của cả bốn
   thẻ bắt đầu cùng một mức, kể cả khi tên thẻ dài ngắn khác nhau. */
.grid-4 > .card[style*="--c"], .grid-3 > .card[style*="--c"]{border-top:3px solid var(--c,var(--blue))}
.grid-4 > .card[style*="--c"], .grid-5 > .card[style*="--c"]{border-top:3px solid var(--c,var(--blue))}
.grid-4 > .card[style*="--c"] h3{min-height:2.56em}
@media(max-width:1024px){.grid-4 > .card[style*="--c"] h3{min-height:0}}

/* segment card — thẻ trắng, viền màu phía trên, cùng ngôn ngữ thiết kế với
   .card[style*="--c"] (thẻ "Chúng tôi đảm bảo") để đồng bộ toàn site. */
.seg{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--border);border-top:3px solid var(--c1,var(--blue));
  box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-start;
  padding:22px;transition:.2s ease-out;cursor:pointer}
.seg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.seg .segimg{display:none}
.seg .inner{position:relative;z-index:1}
.seg .big{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:11px;font-size:22px;line-height:1;margin-bottom:14px;
  opacity:1;background:color-mix(in srgb,var(--c1,var(--blue)) 13%,#fff)}
.seg h3{color:var(--navy);font-size:20px;margin-bottom:6px}
.seg p{font-size:14.5px;color:var(--muted);margin-bottom:12px}
.seg .go{font-size:14.5px;font-weight:700;color:var(--navy)}
.seg:hover .go{color:var(--blue)}

/* compare */
.compare{display:grid;grid-template-columns:1.1fr 1fr 1fr;border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.compare>div{padding:17px 20px;border-bottom:1px solid var(--border);font-size:15.5px}
.compare .hd{background:var(--bg-alt);font-weight:700;color:var(--navy);font-size:15px}
.compare .hd.win{background:var(--blue);color:#fff}
.compare .lbl{font-weight:600;color:var(--navy)}
.compare .bad{color:var(--muted)}
.compare .good{color:var(--navy);font-weight:600;background:#F4F9FF}
/* nhãn cột lặp lại cho bản điện thoại — trên máy tính đã có hàng tiêu đề nên ẩn đi */
.compare .mlbl{display:none}
@media(min-width:1025px){.compare>div:nth-last-child(-n+3){border-bottom:0}}

/* plans + tables */
.plan{background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px 26px;
  box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column}
.plan.hi{border:2px solid var(--blue);box-shadow:0 16px 40px rgba(0,87,184,.16)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);
  color:#fff;font-size:12.5px;font-weight:700;padding:5px 16px;border-radius:100px;letter-spacing:.04em;white-space:nowrap}
.plan h3{font-size:19px;letter-spacing:.04em;text-transform:uppercase}
.plan .size{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.plan .price{font-size:31px;font-weight:800;color:var(--navy);line-height:1.15}
.plan .price small{font-size:15px;font-weight:500;color:var(--muted)}
.plan .price .pre{display:block;font-size:13px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.plan ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.plan ul li{font-size:15px;display:flex;gap:10px}
.plan ul li::before{content:"✓";color:var(--green);font-weight:800;flex:none}
.ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;font-size:15.5px}
.ptable caption{caption-side:top;text-align:left;font-weight:700;color:var(--navy);font-size:19px;padding:0 0 14px}
.ptable th,.ptable td{padding:14px 18px;border-bottom:1px solid var(--border);text-align:left}
.ptable thead th{background:var(--navy);color:#fff;font-size:14px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:nth-child(even){background:#FAFCFF}
.ptable .price-col{font-weight:700;color:var(--orange-600);white-space:nowrap}
.ptable .note-col{color:var(--muted);font-size:14.5px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* Ô của lưới mặc định không nhỏ hơn nội dung (min-width:auto) — một bảng giá dài
   sẽ kéo giãn cả lưới và làm tràn ngang trên máy hẹp. min-width:0 cho phép ô co lại
   và để chính .table-scroll cuộn ngang. */
.split > *,.split-side > *,.grid-2 > *,.grid-3 > *,.grid-5 > *,.grid-4 > *,.hero .wrap > *{min-width:0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding-top:6px}
.step .n{width:50px;height:50px;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;
  font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;
  box-shadow:0 6px 16px rgba(0,87,184,.28)}
.step h3{font-size:18px;margin-bottom:7px}
.step p{color:var(--muted);font-size:15px}
.step:not(:last-child)::after{content:"";position:absolute;top:25px;left:62px;right:-24px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--border))}

/* job log */
/* Thẻ dự án: ảnh nằm TRÊN, chữ nằm DƯỚI. Ảnh chiếm khoảng 45% chiều cao thẻ. */
.card.job{display:flex;flex-direction:column;overflow:hidden}
.card.job > .ph{border-radius:0;aspect-ratio:16/10;flex:none}
.card.job .body{padding:20px 22px}
.cap{position:absolute;z-index:2;left:8px;bottom:8px;background:rgba(11,31,58,.78);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:5px}
.cap.after{background:rgba(14,138,95,.88)}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.tg{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--blue-tint);color:var(--blue-600)}
.tg.dien{background:#FEF3DC;color:#8A5B00}
.tg.nuoc{background:#DFF5F8;color:#0A6C7A}
.tg.pc{background:#EEE8FD;color:#4B21B5}
.tg.print{background:#FCE7F3;color:#9D174D}
.tg.infra{background:#DCFCE7;color:#166534}
.job-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;
  color:var(--muted);border-top:1px solid var(--border);padding-top:12px;margin-top:auto;flex-wrap:wrap}
.job-meta b{color:var(--navy);font-size:15px}
.card.job .job-meta{justify-content:flex-start}

/* Bản đồ nhúng — lớp dự phòng nằm dưới, iframe che lên khi tải được.
   KHÔNG dùng aspect-ratio kèm max-height: khi chiều cao bị chặn, trình duyệt
   giữ tỷ lệ bằng cách BÓP CHIỀU RỘNG lại, khiến bản đồ hụt bên phải và lệch
   sang trái. Đặt thẳng chiều cao bằng clamp() thì chiều rộng luôn đủ 100%. */
.mapbox{position:relative;width:100%;height:clamp(300px,40vw,520px);
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);background:var(--bg-alt)}
.mapbox iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block}
.mapfall{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:22px;color:var(--muted);font-size:14.5px}
.mapfall strong{color:var(--navy);font-size:16.5px}
@media(max-width:640px){.mapbox{height:330px}}

/* pills, logos, accordion, lists */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.pill{padding:9px 18px;border-radius:100px;border:1px solid var(--border);background:#fff;font-size:15px;
  font-weight:600;color:var(--navy);cursor:pointer;font-family:inherit;transition:.15s}
.pill:hover{border-color:var(--blue);color:var(--blue)}
.pill.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* dải logo chạy tự động, một hàng duy nhất */
.marquee{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;align-items:center;gap:72px;width:max-content;
  animation:marquee 46s linear infinite}
/* dải khách hàng chạy ngược chiều để hai dải không trông như một khối */
.marquee-track.rev{animation-direction:reverse;animation-duration:52s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand{flex:none;height:70px;display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease}
.brand:hover{transform:scale(1.12)}
.brand img{height:100%;width:auto;max-width:250px;object-fit:contain}
.brand .wordmark{display:none;font-weight:800;font-size:24px;letter-spacing:.06em;
  color:#7C8DA3;white-space:nowrap}
.brand.is-broken img{display:none}
.brand.is-broken .wordmark{display:block}
/* Logo khách hàng: dấu hình học + tên, vẽ hoàn toàn bằng SVG.
   ⚠ Đây là logo TẠM để xem bố cục — thay bằng logo thật của khách
   (và chỉ đăng khi khách đã đồng ý bằng văn bản). */
.brand.client{gap:10px;height:auto;filter:none}
.brand.client svg{width:38px;height:40px;flex:none}
.brand.client .cname{font-weight:800;font-size:22px;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:1024px){
  .brand.client svg{width:30px;height:32px}
  .brand.client .cname{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center}}
.acc{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#fff;max-width:880px;margin:0 auto}
.acc details{border-bottom:1px solid var(--border)}
.acc details:last-child{border-bottom:0}
.acc summary{padding:18px 22px;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;font-size:16.5px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--blue);font-weight:800;font-size:22px;line-height:1;flex:none}
.acc details[open] summary::after{content:"–"}
.acc details[open] summary{background:var(--blue-tint)}
.acc .ans{padding:4px 22px 20px;color:var(--muted);font-size:15.5px}
.check{list-style:none;display:flex;flex-direction:column;gap:12px}
.check li{display:flex;gap:12px;font-size:16px}
.check li::before{content:"✓";color:var(--green);font-weight:800;flex:none}
.cross li::before{content:"✕";color:var(--red)}

/* Danh sách nhóm dịch vụ: tên nhóm và nội dung nằm hai cột riêng, mỗi dòng
   một đường kẻ mảnh. Không dùng dấu ✓ vì đây là liệt kê phạm vi, không phải
   danh sách ưu điểm — và dấu tick làm chữ thụt vào so le trông rất rối. */
.deflist{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:0 26px}
.deflist dt{font-weight:700;color:var(--navy);font-size:16px;line-height:1.5;
  padding:13px 0;border-top:1px solid var(--border)}
.deflist dd{font-size:16px;line-height:1.5;color:var(--text);
  padding:13px 0;border-top:1px solid var(--border)}
.deflist dt:first-of-type,.deflist dd:first-of-type{border-top:0;padding-top:0}
@media(max-width:640px){
  .deflist{grid-template-columns:1fr;gap:0}
  .deflist dt{padding:14px 0 2px;border-top:1px solid var(--border)}
  .deflist dd{padding:0 0 14px;border-top:0;color:var(--muted)}
  .deflist dt:first-of-type{border-top:0;padding-top:0}
}

/* bảng liên hệ thay cho form */

/* band + form */
.form{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:24px;display:flex;flex-direction:column;gap:12px}
.form.light{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border-radius:9px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:#fff;
  font-family:inherit;font-size:15px}
.form.light input,.form.light select,.form.light textarea{border-color:var(--border);background:#fff;color:var(--text)}
.form input::placeholder,.form textarea::placeholder{color:#9BB4D2}
.form.light input::placeholder,.form.light textarea::placeholder{color:#93A3B6}
.form select option{color:#1F2937}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .note{font-size:13px;color:#9BB4D2;text-align:center}
.form.light .note{color:var(--muted)}

/* prose + posts + team */
.prose{font-size:17.5px;max-width:820px}
.prose h2{margin:36px 0 14px;font-size:26px}
.prose h3{margin:26px 0 10px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.prose blockquote{border-left:4px solid var(--blue);background:var(--blue-tint);padding:16px 20px;
  border-radius:0 8px 8px 0;margin:22px 0;color:#284B72}
.post .cat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);
  margin-bottom:8px;display:block}
.post h3{font-size:18.5px;line-height:1.4}
.post .date{color:var(--muted);font-size:13.5px;margin-top:10px}
.person{text-align:center}
.person .ph{border-radius:14px;margin-bottom:14px}
.person h4{font-size:16.5px}
.person span{color:var(--muted);font-size:14.5px}
/* bằng cấp & chứng chỉ quốc tế của từng kỹ thuật viên */
/* Phương châm & cam kết chất lượng — hai khối chữ lớn, không phải thẻ dịch vụ */
.motto{border-radius:var(--r-lg);padding:30px 32px;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;justify-content:center;min-height:150px}
.motto.alt2{background:linear-gradient(135deg,var(--orange-600),var(--orange))}
.motto .lbl{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:12px}
.motto strong{font-size:24px;font-weight:800;line-height:1.35;letter-spacing:.01em}
@media(max-width:640px){.motto{padding:24px;min-height:0}.motto strong{font-size:20px}}

.certs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:9px}
.cert{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:5px;
  background:var(--blue-tint);color:#1E3A5F;line-height:1.4}

/* footer + mobile bar */
footer.site{background:var(--navy);color:#A9BCD4;padding:46px 0 0;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:30px}
footer.site h4{color:#fff;font-size:13.5px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:13px}
/* cột mạng xã hội — biểu tượng bắt màu thương hiệu khi rê chuột */
.social{display:flex;flex-direction:column;gap:9px}
.social a{display:flex;align-items:center;gap:11px;color:#C6D2E2;font-size:15px;
  padding:6px 10px 6px 6px;border-radius:9px;transition:background .18s ease,color .18s ease}
.social a .ico-svg{width:32px;height:32px;flex:none;padding:6px;border-radius:8px;
  background:rgba(255,255,255,.1);transition:background .18s ease,color .18s ease}
.social a:hover{background:rgba(255,255,255,.07);color:#fff}
.social a:hover .ico-svg{background:var(--sc);color:#fff}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:7px}
footer.site a{color:#A9BCD4;cursor:pointer}
footer.site a:hover{color:#fff}
footer.site p{margin-bottom:7px;line-height:1.55}
.flogo{display:flex;align-items:center;margin-bottom:13px;line-height:0}
.flogo .wm{width:auto;display:block}
.legal{border-top:1px solid rgba(255,255,255,.12);padding:16px 0 92px;font-size:13px;color:#7C93B1;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:none;grid-template-columns:1.35fr 1fr;
  background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(11,31,58,.1)}
.mbar a{padding:14px 8px;text-align:center;font-weight:700;font-size:14.5px;
  display:flex;align-items:center;justify-content:center;gap:6px}
.mbar a.call{background:var(--orange);color:#fff}
.mbar a.zalo{color:#0068FF;border-left:1px solid var(--border)}

/* Biểu tượng SVG: thừa hưởng màu chữ của nút chứa nó, nên không bao giờ
   chỏi màu nền như emoji do hệ điều hành tô. */
.ico-svg{width:1em;height:1em;flex:none;display:block}
.btn .ico-svg{width:18px;height:18px}
.mbar a .ico-svg{width:19px;height:19px}
.fab a .ic .ico-svg{width:24px;height:24px}

/* ------------------------------------------------------------
   CỘT NÚT LIÊN HỆ NỔI — theo mẫu vietnamnetwork.com.vn:
   một thẻ trắng bo tròn xếp dọc các nút tròn, kèm nút ✕ màu cam
   bên dưới để thu gọn. Ẩn trên điện thoại vì đáy màn hình đã có
   thanh Gọi / Zalo, để hai thứ chồng nhau sẽ che mất nội dung.
   ------------------------------------------------------------ */
.fab{position:fixed;right:18px;bottom:22px;z-index:65;display:flex;flex-direction:column;
  align-items:center;gap:10px}
.fab-panel{display:flex;flex-direction:column;align-items:center;gap:10px;
  background:#fff;border-radius:16px;padding:11px 10px;
  box-shadow:0 6px 26px rgba(11,31,58,.16), 0 0 0 3px rgba(210,67,0,.13);
  transform-origin:bottom center;transition:opacity .22s ease,transform .22s ease}
.fab.closed .fab-panel{opacity:0;transform:scale(.85) translateY(12px);pointer-events:none}
.fab-panel a{position:relative;width:46px;height:46px;border-radius:50%;display:grid;
  place-items:center;color:#fff;text-decoration:none;transition:transform .18s ease}
.fab-panel a:hover,.fab-panel a:focus-visible{transform:scale(1.1)}
.fab-panel a .ico-svg{width:23px;height:23px}
.fab-panel a.zalo{background:#fff;border:2px solid #0068FF;color:#0068FF;
  font-weight:800;font-size:12.5px;letter-spacing:-.02em}
.fab-panel a.call{background:#22A45D}
.fab-panel a.mail{background:#F59E0B}
.fab-panel a.map{background:#0057B8}
/* nhãn hiện bên trái khi rê chuột */
.fab-panel a::after{content:attr(data-lbl);position:absolute;right:calc(100% + 12px);
  white-space:nowrap;background:var(--navy);color:#fff;font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:8px;opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;box-shadow:0 6px 16px rgba(11,31,58,.22)}
.fab-panel a:hover::after,.fab-panel a:focus-visible::after{opacity:1;transform:none}
/* nút bật / tắt */
.fab-tog{width:46px;height:46px;border:0;border-radius:50%;background:var(--orange);color:#fff;
  cursor:pointer;display:grid;place-items:center;font-family:inherit;
  box-shadow:0 6px 20px rgba(210,67,0,.4);transition:transform .2s ease,background .2s ease}
.fab-tog:hover{background:var(--orange-600);transform:scale(1.08)}
.fab-tog .x,.fab-tog .c{grid-area:1/1;transition:opacity .18s ease,transform .18s ease}
.fab-tog .x{font-size:20px;line-height:1}
.fab-tog .c .ico-svg{width:22px;height:22px}
.fab:not(.closed) .fab-tog .c,.fab.closed .fab-tog .x{opacity:0;transform:rotate(-90deg)}
.fab.closed .fab-tog{animation:fabring 2.6s ease-out infinite}
@keyframes fabring{0%{box-shadow:0 6px 20px rgba(210,67,0,.4),0 0 0 0 rgba(210,67,0,.5)}
  70%,100%{box-shadow:0 6px 20px rgba(210,67,0,.4),0 0 0 16px rgba(210,67,0,0)}}
@media (prefers-reduced-motion:reduce){
  .fab.closed .fab-tog{animation:none}
  .fab-panel,.fab-panel a,.fab-tog,.fab-panel a::after{transition:none}}
@media(max-width:1024px){.fab{display:none}}

/* ---- Dải báo giá đầu trang Bảng giá: ảnh nhân viên tư vấn nền navy,
   ghép liền với nền của dải nên không lộ mép ảnh. ---- */
.quote-band{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  background:var(--navy);border-radius:var(--r-lg);overflow:hidden;color:#fff;
  box-shadow:var(--shadow-lg);position:relative}
.quote-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--orange);z-index:2}
.quote-band .qb-text{padding:36px 40px 34px}
.quote-band h2{color:#fff;font-size:27px;line-height:1.3}
.quote-band p{color:#C9DAF0;font-size:16.5px;margin:12px 0 22px;max-width:44ch}
/* Ảnh nhân viên tư vấn đã được ghép sẵn trên nền navy trùng với nền dải,
   nên dùng contain: người hiện trọn vẹn, phần thừa hoà vào nền, không lộ mép. */
.quote-band .qb-img{position:relative;min-height:300px;background:var(--navy)}
.quote-band .qb-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;display:block}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

@media(max-width:1024px){
  h1{font-size:35px}h2{font-size:27px}.phero h1{font-size:31px}
  section{padding:54px 0}
  .hero .wrap,.split{grid-template-columns:1fr;gap:34px}
  .grid-4,.grid-3,.steps,.logos{grid-template-columns:repeat(2,1fr)}
  .grid-4,.grid-5,.steps,.logos{grid-template-columns:repeat(2,1fr)}
  .metrics .wrap{grid-template-columns:repeat(2,1fr)}
  .split-side{grid-template-columns:1fr}
  .step::after{display:none}
  nav.main{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);max-height:78vh;overflow-y:auto}
  nav.main.open{display:flex}
  nav.main .lnk{padding:14px 0;border-bottom:1px solid var(--border);justify-content:space-between}
  .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none;
    box-shadow:none;border:0;padding:8px 0 14px;grid-template-columns:1fr;gap:18px}
  .mega.open{display:grid}
  .has-mega:hover .mega{display:none}
  .has-mega:hover .mega.open{display:grid}
  .phone-head{display:none}.burger{display:inline-flex}
  .phero{padding:34px 0 38px}
  .chips{gap:8px}.chip{font-size:13.5px;padding:8px 12px}
  .metrics .wrap{grid-template-columns:repeat(2,1fr)}
  .quote-band{grid-template-columns:1fr}
  .quote-band .qb-text{padding:28px 24px 26px}
  .quote-band h2{font-size:23px}
  .quote-band .qb-img{min-height:0;aspect-ratio:16/9;order:-1}
  .metric{padding:22px 12px}.metric b{font-size:29px}.metric span{font-size:13px}
  .plan{padding:24px 20px}.plan .price{font-size:27px}
  .prose{font-size:16.5px}.prose h2{font-size:22px}.prose h3{font-size:18.5px}
  .acc summary{padding:15px 16px;font-size:15.5px}.acc .ans{padding:2px 16px 17px;font-size:15px}
  .ptable th,.ptable td{padding:11px 13px;font-size:14.5px}
  .seg{padding:18px}.seg .big{width:40px;height:40px;font-size:20px}
  .card .body{padding:18px}
  .brand{height:48px}
  /* vùng chạm tối thiểu 44px theo hướng dẫn của Apple và Google */
  .btn{min-height:46px;padding:13px 22px}
  .btn-sm{min-height:42px}
  nav.main .lnk{min-height:48px}
  .pill{min-height:42px;padding:9px 16px}
  .mbar a{min-height:52px;display:flex;align-items:center;justify-content:center}
  .form input,.form select,.form textarea{font-size:16px;min-height:46px} /* 16px để iOS không tự phóng to */
  .lang-sw button{min-height:40px;padding:8px 12px}
  .crumb{font-size:13px}.crumb .sep{margin:0 6px}
  /* thanh Gọi / Nhắn Zalo cố định dưới đáy, thay cho cụm nút nổi bên phải */
  .mbar{display:grid}
  .legal{padding-bottom:88px}
}

/* ------------------------------------------------------------
   ĐIỆN THOẠI DỌC — mọi lưới về một cột, lề hẹp lại, chữ nhỏ hơn.
   ------------------------------------------------------------ */
@media(max-width:640px){
  .wrap,.wrap-narrow{padding:0 16px}
  section{padding:44px 0}
  section.tight{padding:32px 0}
  .sec-head{margin-bottom:26px}
  .grid-4,.grid-3,.grid-5,.grid-2,.steps,.compare,.fgrid,.split,.split-side{grid-template-columns:1fr}
  .split,.split-side{gap:26px}
  .logos{grid-template-columns:repeat(3,1fr)}
  .hero{padding:40px 0 46px}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn{width:100%}
  .phero{padding:34px 0 38px}
  .phero h1{font-size:25px}
  .lead{font-size:16.5px}
  .motto{padding:24px}
  .util{font-size:13px}
  .util .grp .hide-m{display:none}
  .util .wrap{justify-content:center;gap:12px;min-height:38px}
  .util .grp{gap:14px}
  .fgrid{gap:26px}
  .legal{flex-direction:column;gap:10px;text-align:center}
  /* Bảng so sánh đổ về một cột: bỏ ba ô tiêu đề (không còn cột để gắn vào)
     và bật nhãn nhỏ trong từng ô để người đọc biết đang đọc phương án nào. */
  .compare{border-radius:var(--r)}
  .compare .hd{display:none}
  .compare > div{padding:14px 16px}
  .compare .lbl{background:var(--navy);color:#fff;font-size:14px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;padding:11px 16px}
  .compare .bad{border-left:4px solid var(--border)}
  .compare .good{border-left:4px solid var(--blue)}
  .compare .mlbl{display:block;font-style:normal;font-size:11.5px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;color:var(--muted)}
  .compare .good .mlbl{color:var(--blue)}
}
@media(max-width:340px){.metrics .wrap{grid-template-columns:1fr}}
@media(max-width:400px){
  h1{font-size:24px}.phero h1{font-size:22px}h2{font-size:20px}
  .logos{grid-template-columns:repeat(2,1fr)}
  .ba{grid-template-columns:1fr}
  .mbar{grid-template-columns:1fr 1fr}
  .mbar a.quote{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.25)}
  .legal{padding-bottom:120px}
  .head-cta .btn{display:none}   /* nút báo giá đã có ở thanh dưới cùng */
}