/* Chặn thanh cuộn ngang do vài khối trang trí tràn ra vài px */
html,body{overflow-x:hidden;max-width:100%}

/* ==============================================================
   BIẾN DÙNG CHUNG
   ============================================================== */
:root{
  --cz-blue:#24A1FF;        /* tone chủ đạo */
  --cz-ink:#5A6B85;         /* chữ mô tả trong card */
  --cz-text:#2C2C2A;        /* màu chữ chính — đen theo brand book */
  --cz-gold:#E3B721;        /* màu CTA thương hiệu */
  --cz-font:'Be Vietnam Pro','Inter','Segoe UI',Roboto,Arial,sans-serif;
}
body{font-family:var(--cz-font)}
button,input,select,textarea{font-family:inherit}

/* ==============================================================
   TIÊU ĐỀ KHỐI DÙNG CHUNG (H2 + mô tả)
   ============================================================== */
.cz-svc-head{text-align:center;max-width:1000px;margin:0 auto 34px}
.cz-svc-head h2,.cz-dc-head h2,.cz-pt2-h,.cz-cta h2{
  margin:0;font-size:clamp(23px,2.5vw,34px);font-weight:800;line-height:1.28;
  letter-spacing:-.2px;text-transform:uppercase;text-wrap:balance;
  -webkit-hyphens:none;hyphens:none;color:var(--cz-text);
}
.cz-svc-head h2::after,.cz-dc-head h2::after,.cz-pt2-h::after,.cz-cta h2::after{
  content:'';display:block;width:64px;height:4px;border-radius:99px;margin:16px auto 0;
  background:linear-gradient(90deg,#0B6FD0,var(--cz-blue),#7FE9FF);
}
.cz-dc-head h2::after,.cz-cta h2::after{background:linear-gradient(90deg,#FFE175,#7FE9FF)}
/* 2 khối này nền xanh đậm nên tiêu đề để trắng thay vì màu chữ đen mặc định */
.cz-cta h2{color:#fff;text-shadow:0 4px 26px rgba(0,20,60,.35)}
.cz-dc-head h2{margin-top:16px;color:#fff}
.cz-svc-head p,.cz-dc-head p,.cz-cta p,.cz-pt2-sub{font-size:15.5px;line-height:1.7}
.cz-svc-head .cz-pr-kicker{margin-bottom:14px}
.cz-svc-head .cz-pr-kicker+h2{margin-top:0}
.cz-tm-card p,.cz-why-b p,.cz-why-b li,.cz-eco-tx em,.cz-dcf>div>span,.cz-dcq span{font-size:14px;line-height:1.7}
.cz-eco-tx em,.cz-dcq span,.cz-dcf>div>span{font-size:13px;line-height:1.6}

/* Nhãn nhỏ dùng chung */
.cz-pr-kicker,.cz-dc-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.cz-pr-kicker{background:rgba(36,161,255,.10);color:#0B6FD0}
.cz-dc-kicker{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff}

/* ==============================================================
   HERO — Anti-DDoS
   ============================================================== */
/* Nền hero là gradient xanh thương hiệu (không dùng ảnh bìa nữa).
   Đầu trái đậm để chữ trắng đủ tương phản, sáng dần về bên phải cho
   khớp tông nền của ảnh minh hoạ đặt ở cột phải. */
.cz-hx{
  position:relative;overflow:hidden;isolation:isolate;
  padding:0;min-height:auto;color:#fff;font-family:var(--cz-font);
  background:
    linear-gradient(112deg,rgba(10,46,107,.68) 0%,rgba(12,63,140,.46) 42%,rgba(10,99,200,.40) 100%),
    url("img-14-hero-nen.webp") center/cover no-repeat,
    linear-gradient(112deg,#0A2E6B 0%,#0C3F8C 32%,#0B4FA8 62%,#0A63C8 100%);
}
/* Lưới 2 cột: chữ bên trái, ảnh minh hoạ bên phải. */
.cz-hx-wrap{
  position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:70px 44px 68px;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:34px;align-items:center;
}
.cz-hx-tx{max-width:640px}
/* Ảnh minh hoạ đã tách nền (WebP có kênh alpha) nên nằm trực tiếp trên
   gradient của hero — để nguyên độ đục cho hình sắc nét. */
.cz-hx-md{min-width:0;display:flex;justify-content:center}
.cz-hx-md img{width:100%;max-width:760px;height:auto;display:block}
.cz-hx-kick{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(178,226,255,.70);color:#EAF6FF;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.cz-hx-kick .fa{font-size:14px}
.cz-hx-h1{
  margin:18px 0 0;font-size:clamp(28px,3.4vw,45px);font-weight:800;line-height:1.2;
  letter-spacing:-.6px;color:#fff;text-shadow:0 6px 30px rgba(0,10,30,.5);
}
.cz-hx-h1-accent{color:var(--cz-gold)}
.cz-hx-price{margin:16px 0 0;font-size:17px;font-weight:600;color:rgba(226,240,255,.9)}
.cz-hx-price b{font-size:clamp(26px,2.6vw,34px);font-weight:800;color:var(--cz-gold);letter-spacing:-.5px;margin:0 2px}
.cz-hx-price span{font-size:15px;color:rgba(226,240,255,.75)}
.cz-hx-ctas{margin:32px 0 0;display:flex;flex-wrap:wrap;gap:13px}
.cz-hx-btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:12px;
  font-family:inherit;font-size:15px;font-weight:700;text-decoration:none;transition:.26s;
}
.cz-hx-btn .fa{font-size:16px}
.cz-hx-main{background:linear-gradient(135deg,#F2C93B,var(--cz-gold));color:#1B1400;box-shadow:0 14px 34px rgba(227,183,33,.34)}
.cz-hx-main:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(227,183,33,.46)}
.cz-hx-ghost{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.38);color:#fff;backdrop-filter:blur(8px)}
.cz-hx-ghost:hover{background:rgba(36,161,255,.28);border-color:#24A1FF;transform:translateY(-3px)}
.cz-hx-strip{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.22);
  background:rgba(7,74,150,.46);backdrop-filter:blur(6px);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.cz-hx-strip>div{padding:20px 26px;border-left:1px solid rgba(255,255,255,.12)}
.cz-hx-strip>div:first-child{border-left:0;padding-left:44px}
.cz-hx-strip>div:last-child{padding-right:44px}
.cz-hx-strip b{display:block;font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.2px}
.cz-hx-strip span{display:block;margin-top:5px;font-size:12.8px;line-height:1.6;color:rgba(203,226,255,.78)}
@media (max-width:1024px){
  /* Tablet: xếp 1 cột, ảnh minh hoạ xuống dưới phần chữ */
  .cz-hx-wrap{grid-template-columns:1fr;gap:26px;padding:56px 32px 54px}
  .cz-hx-tx{max-width:none}
  .cz-hx-md img{max-width:520px}
  .cz-hx-strip{grid-template-columns:1fr 1fr}
  .cz-hx-strip>div{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:16px 32px}
  .cz-hx-strip>div:nth-child(2n){border-left:1px solid rgba(255,255,255,.12)}
  .cz-hx-strip>div:first-child,.cz-hx-strip>div:last-child{padding-left:32px;padding-right:32px}
}
@media (max-width:640px){
  .cz-hx-wrap{padding:48px 20px 44px;gap:22px}
  .cz-hx-tx{max-width:none}
  .cz-hx-md img{max-width:100%}
  .cz-hx-btn{flex:1 1 auto;justify-content:center;padding:14px 20px}
  .cz-hx-strip{grid-template-columns:1fr}
  .cz-hx-strip>div,.cz-hx-strip>div:nth-child(2n),
  .cz-hx-strip>div:first-child,.cz-hx-strip>div:last-child{border-left:0;padding:14px 20px}
}


/* ==============================================================
   GIỚI THIỆU DỊCH VỤ — khối ngay dưới hero
   Bố cục 2 cột: ảnh minh hoạ bên trái, nội dung bên phải.
   Nền trắng để tách với hero (xanh) phía trên và khối Ưu điểm
   (#F6FAFF) phía dưới.
   ============================================================== */
.cz-gt,.cz-gt *{box-sizing:border-box}
.cz-gt{background:#fff;font-family:var(--cz-font);padding:70px 0 66px}
.cz-gt-wrap{max-width:1240px;margin:0 auto;padding:0 44px}
.cz-gt-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}

/* --- Cột trái: ảnh minh hoạ + hiệu ứng đường sáng chạy --- */
.cz-gt-md{display:flex;align-items:center;justify-content:center}
.cz-gt-illus{position:relative;width:100%;max-width:480px;line-height:0}
.cz-gt-illus img{width:100%;height:auto;display:block}


/* --- Cột phải: nội dung --- */
.cz-gt-tx h2{
  margin:14px 0 0;font-size:clamp(23px,2.5vw,34px);font-weight:800;line-height:1.28;
  letter-spacing:-.2px;color:var(--cz-text);text-wrap:balance;
}
/* gạch chân gradient canh trái (không canh giữa như .cz-svc-head) */
.cz-gt-tx h2::after{
  content:'';display:block;width:64px;height:4px;border-radius:99px;margin:16px 0 0;
  background:linear-gradient(90deg,#0B6FD0,var(--cz-blue),#7FE9FF);
}
.cz-gt-tx p{margin:16px 0 0;font-size:15.2px;line-height:1.8;color:var(--cz-ink)}
.cz-gt-tx p b{color:var(--cz-text);font-weight:700}

@media (max-width:960px){
  .cz-gt{padding:56px 0 52px}
  .cz-gt-wrap{padding:0 32px}
  .cz-gt-grid{grid-template-columns:1fr;gap:32px}
  .cz-gt-md{order:2}          /* màn hẹp: chữ trước, ảnh sau */
  .cz-gt-tx{order:1}
  .cz-gt-illus{max-width:400px}
}
@media (max-width:640px){
  .cz-gt{padding:46px 0 44px}
  .cz-gt-wrap{padding:0 20px}
  .cz-gt-illus{max-width:320px}
  .cz-gt-tx p{font-size:14.6px}
}

/* ==============================================================
   ƯU ĐIỂM DỊCH VỤ — 3 ô, đặt ngay dưới hero
   ============================================================== */
.cz-uu,.cz-uu *{box-sizing:border-box}
.cz-uu{background:#F6FAFF;font-family:var(--cz-font);padding:54px 0 60px}
.cz-uu-wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.cz-uu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.cz-uu-c{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border-radius:20px;padding:28px 26px 26px;border:1px solid rgba(1,47,127,.06);
  box-shadow:0 26px 70px rgba(1,32,79,.14),0 2px 6px rgba(1,32,79,.06);transition:.32s;
}
.cz-uu-c::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#0B6FD0,var(--cz-blue),#7FE9FF);transform:scaleX(0);transform-origin:left;transition:.4s}
.cz-uu-c:hover{transform:translateY(-8px);box-shadow:0 34px 84px rgba(1,32,79,.24)}
.cz-uu-c:hover::after{transform:scaleX(1)}
.cz-uu-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));box-shadow:0 10px 26px rgba(36,161,255,.36)}
.cz-uu-ic .fa{font-size:22px;line-height:1}
.cz-uu-c h3{margin:20px 0 0;font-size:18px;font-weight:700;color:var(--cz-text);letter-spacing:-.2px;line-height:1.4}
.cz-uu-c p{margin:10px 0 0;font-size:14px;line-height:1.62;color:var(--cz-ink)}
.cz-uu-tags{margin:16px 0 0;padding-top:2px;display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.cz-uu-tags b{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(36,161,255,.09);color:var(--cz-text);border:1px solid rgba(36,161,255,.16)}
.cz-uu-c p+.cz-uu-tags{margin-top:16px}
.cz-uu .cz-peering{max-width:none;margin:30px 0 0;padding:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--cz-ink)}
.cz-uu .cz-peering span{flex:1 1 100%;line-height:1.7}
.cz-peering em{font-style:normal;font-weight:700;color:var(--cz-text)}
.cz-isp{display:flex;gap:10px;flex-wrap:wrap}
.cz-isp b{padding:7px 14px;border-radius:8px;background:#fff;font-size:12.5px;font-weight:700;color:var(--cz-text);border:1px solid rgba(1,47,127,.10);box-shadow:0 3px 12px rgba(1,32,79,.06)}
@media (max-width:1024px){.cz-uu-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (max-width:640px){.cz-uu{padding:48px 0 54px}.cz-uu-wrap{padding:0 20px}.cz-uu-grid{grid-template-columns:1fr;gap:14px}.cz-uu-c{padding:22px 20px}}

/* ==============================================================
   LIÊN KẾT CHÉO SANG SẢN PHẨM LIÊN QUAN
   ============================================================== */
.cz-xzone{background:#F2FAFF;padding:44px 0 64px;display:flow-root;font-family:var(--cz-font)}
.cz-xsell{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:0 44px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.cz-xs{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ill tx go";align-items:center;gap:18px;
  text-decoration:none;padding:22px 24px;border-radius:18px;
  background:linear-gradient(150deg,#3AABFF 0%,#24A1FF 58%,#1793F5 100%);
  border:1px solid rgba(255,255,255,.30);box-shadow:0 14px 34px rgba(18,110,205,.28);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s,background .28s;
}
.cz-xs:hover{background:linear-gradient(150deg,#48B3FF 0%,#2AA6FF 58%,#1B99F8 100%);border-color:rgba(255,255,255,.55);box-shadow:0 20px 44px rgba(18,110,205,.36);transform:translateY(-3px)}
.cz-xs-ill{grid-area:ill;width:76px;height:76px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 20px rgba(3,52,110,.18);transition:transform .28s,background .28s}
.cz-xs:hover .cz-xs-ill{background:#fff;transform:scale(1.05)}
.cz-xs-ill .fa{font-size:34px;line-height:1;color:#1E9AFE;display:block}
.cz-xs-tx{grid-area:tx}
.cz-xs-tx em{display:block;font-style:normal;font-size:11.4px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#DCF1FF}
.cz-xs-tx strong{display:block;margin-top:4px;font-size:16.5px;font-weight:800;color:#fff}
.cz-xs-tx>span{display:block;margin-top:6px;font-size:13.6px;line-height:1.62;color:rgba(232,244,255,.92)}
.cz-xs-go{grid-area:go;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;color:#0B6FD0;box-shadow:0 6px 16px rgba(2,40,90,.22);transition:transform .28s,box-shadow .28s}
.cz-xs-go .fa{font-size:16px}
.cz-xs:hover .cz-xs-go{transform:translateX(4px);box-shadow:0 10px 22px rgba(2,40,90,.30)}
@media (max-width:900px){.cz-xsell{grid-template-columns:1fr}}
@media (max-width:560px){
  .cz-xzone{padding:40px 0 46px}
  .cz-xsell{padding:0 20px;gap:14px}
  .cz-xs{grid-template-columns:auto 1fr;grid-template-areas:"ill tx" "go go";align-items:start;gap:14px;padding:18px 16px}
  .cz-xs-ill{width:56px;height:56px;border-radius:14px}
  .cz-xs-ill .fa{font-size:26px}
  .cz-xs-tx strong{font-size:15.4px}
  .cz-xs-go{width:34px;height:34px;justify-self:end}
}

/* ==============================================================
   BẢNG SO SÁNH CÓ / KHÔNG DÙNG ANTI-DDOS
   ============================================================== */
.cz-cmp,.cz-cmp *{box-sizing:border-box}
/* Nền gradient xanh thương hiệu + lớp lưới ô vuông mờ dần ở ::before. */
.cz-cmp{
  position:relative;overflow:hidden;font-family:var(--cz-font);padding:76px 0 88px;color:#fff;
  background:
    radial-gradient(90% 80% at 88% 22%,rgba(120,215,255,.40) 0%,transparent 58%),
    radial-gradient(70% 90% at 6% 92%,rgba(6,52,110,.50) 0%,transparent 62%),
    linear-gradient(115deg,#0A5CB2 0%,#1489EE 38%,#24A1FF 68%,#4FB6FF 100%);
}
.cz-cmp::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 88%);
          mask-image:radial-gradient(120% 90% at 50% 40%,#000 40%,transparent 88%);
}
.cz-cmp-wrap{position:relative;z-index:3;max-width:1340px;margin:0 auto;padding:0 44px}
.cz-cmp-head{text-align:center}
.cz-cmp-head h2{margin:0;font-size:clamp(23px,2.5vw,33px);font-weight:800;line-height:1.3;text-transform:uppercase;letter-spacing:-.2px}
.cz-cmp-head p{margin:10px 0 0;font-size:16px;color:rgba(255,255,255,.9)}
.cz-cmp-line{display:block;width:74px;height:4px;border-radius:4px;margin:18px auto 0;background:rgba(255,255,255,.85)}
.cz-cmp-box{margin-top:34px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,40,96,.22)}
.cz-cmp-tb{width:100%;border-collapse:collapse}
.cz-cmp-tb thead th{padding:17px 20px;background:#0F86E6;color:#fff;font-size:13.4px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.cz-cmp-tb thead th:first-child{text-align:left;width:200px}
.cz-cmp-tb tbody th{width:200px;white-space:nowrap;padding:16px 20px;text-align:left;vertical-align:top;font-size:14.6px;font-weight:700;color:var(--cz-text);background:#F7FBFF;border-right:1px solid rgba(1,47,127,.08)}
.cz-cmp-tb tbody td{padding:16px 20px;vertical-align:top;font-size:14.4px;line-height:1.7;color:var(--cz-ink)}
.cz-cmp-tb tbody td+td{border-left:1px solid rgba(1,47,127,.08)}
.cz-cmp-tb tbody tr+tr th,.cz-cmp-tb tbody tr+tr td{border-top:1px solid rgba(1,47,127,.08)}
.cz-cmp-tb tbody tr:hover td{background:rgba(36,161,255,.05)}
.cz-cmp-us{color:var(--cz-text);font-weight:500}
/* Dấu ✓ / ✗ đầu ô — xanh cho Cloudzone, đỏ cho cách tự cài */
.cz-cmp-tb i{font-style:normal;font-weight:800;margin-right:7px}
.cz-cmp-y{color:#0F9D58}
.cz-cmp-n{color:#D93F3F}
.cz-cmp-note{margin:16px 0 0;font-size:12.8px;line-height:1.7;color:rgba(255,255,255,.82);text-align:center}
@media (max-width:860px){
  .cz-cmp{padding:56px 0 60px}
  .cz-cmp-wrap{padding:0 20px}
  .cz-cmp-box{background:transparent;box-shadow:none;border-radius:0}
  .cz-cmp-tb,.cz-cmp-tb tbody,.cz-cmp-tb tr,.cz-cmp-tb th,.cz-cmp-tb td{display:block;width:auto}
  .cz-cmp-tb thead{display:none}
  .cz-cmp-tb tbody tr{background:#fff;border-radius:16px;margin-bottom:14px;overflow:hidden;box-shadow:0 10px 26px rgba(0,40,96,.16)}
  .cz-cmp-tb tbody th{width:auto;white-space:normal;background:#0F86E6;color:#fff;border-right:0;font-size:14.4px;padding:13px 18px}
  .cz-cmp-tb tbody td{padding:14px 18px}
  .cz-cmp-tb tbody td+td{border-left:0;border-top:1px solid rgba(1,47,127,.08)}
  .cz-cmp-tb tbody tr+tr th,.cz-cmp-tb tbody tr+tr td{border-top:0}
  .cz-cmp-tb tbody td::before{content:attr(data-label);display:block;margin-bottom:5px;font-size:11.8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0F86E6}
  .cz-cmp-tb tbody td+td::before{color:var(--cz-ink)}
}

/* ==============================================================
   DẢI CTA GIỮA TRANG (.cz-r4-*) — đặt cuối khối Cách thức hoạt động
   ============================================================== */
.cz-r4-cta{margin-top:30px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:26px 30px;border-radius:20px;background:linear-gradient(120deg,#3AABFF 0%,#24A1FF 60%,#1793F5 100%);box-shadow:0 16px 38px rgba(18,110,205,.26)}
.cz-r4-cta-tx b{display:block;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.2px}
.cz-r4-cta-tx span{display:block;margin-top:6px;font-size:14.4px;line-height:1.6;color:rgba(233,245,255,.94)}
.cz-r4-cta-bt{display:flex;gap:12px;flex-wrap:wrap}
.cz-r4-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;font-family:inherit;font-size:14.6px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.26s}
.cz-r4-btn .fa{font-size:16px}
.cz-r4-main{background:linear-gradient(135deg,#F2C93B,var(--cz-gold));color:#1B1400;box-shadow:0 12px 26px rgba(0,40,90,.22)}
.cz-r4-main:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,40,90,.30)}
.cz-r4-ghost{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);color:#fff}
.cz-r4-ghost:hover{background:#fff;color:#0B6FD0;transform:translateY(-3px)}
@media (max-width:640px){
  .cz-r4-cta{padding:22px 18px;text-align:center;justify-content:center}
  .cz-r4-cta-bt{width:100%;justify-content:center}
  .cz-r4-btn{flex:1 1 auto;justify-content:center}
}

/* ==============================================================
   HẠ TẦNG VẬN HÀNH DỊCH VỤ
   ============================================================== */
.cz-dc{position:relative;overflow:hidden;isolation:isolate;font-family:var(--cz-font);color:#fff;padding:82px 0 76px;background:linear-gradient(160deg,#0A5FB8 0%,#1789EA 34%,#24A1FF 72%,#0C6DC4 100%)}
.cz-dc-bg{
  position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(70% 60% at 78% 18%,rgba(160,240,255,.28) 0%,transparent 60%),
    radial-gradient(60% 50% at 12% 88%,rgba(0,40,96,.40) 0%,transparent 62%),
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:auto,auto,58px 58px,58px 58px;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 34%,#000 22%,transparent 78%);
          mask-image:radial-gradient(120% 92% at 50% 34%,#000 22%,transparent 78%);
}
.cz-dc-wrap{position:relative;z-index:2;max-width:1300px;margin:0 auto;padding:0 44px}
.cz-dc-head{text-align:center;max-width:760px;margin:0 auto 44px}
.cz-dc-head b{color:#fff;font-weight:700}
.cz-dc-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:36px;align-items:center}
.cz-dc-side{display:grid;align-content:center;min-width:0}
.cz-map-wrap{max-width:580px;margin:0 auto;padding:0;background:none;border:0;cursor:zoom-in}
.cz-map-in{position:relative;aspect-ratio:1421/1627}
.cz-map-img{display:block;width:100%;height:100%;object-fit:contain}
.cz-map-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cz-mmesh path{fill:none;stroke:rgba(240,150,10,.9);stroke-width:6;stroke-linecap:round;stroke-dasharray:18 22;animation:czDash 1.5s linear infinite;filter:drop-shadow(0 0 6px rgba(255,180,40,.7))}
.cz-mnode .cz-md{fill:#FFA800;stroke:#fff;stroke-width:5;filter:drop-shadow(0 0 14px rgba(255,150,10,.95)) drop-shadow(0 0 28px rgba(255,168,20,.6));animation:czBlink 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
.cz-mnode .cz-mw{fill:none;stroke:#FFA800;stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:center;animation:czWave 2.8s ease-out infinite;animation-delay:calc(var(--i) * -.46s)}
@keyframes czDash{to{stroke-dashoffset:-48}}
@keyframes czBlink{0%,100%{opacity:.18}50%{opacity:1}}
@keyframes czWave{0%{transform:scale(.55);opacity:.85}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.cz-mmesh path,.cz-mnode .cz-md,.cz-mnode .cz-mw{animation:none}.cz-mnode .cz-mw{opacity:.35}}
.cz-map-zoomhint{display:none;position:absolute;right:12px;bottom:12px;z-index:5;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.92);color:#0B4FA6;font-size:12.4px;font-weight:700;box-shadow:0 6px 18px rgba(0,24,64,.22);pointer-events:none}
.cz-map-zoomhint .fa{font-size:14px}
@media (max-width:900px){.cz-map-zoomhint{display:inline-flex}}
.cz-dc-list-h{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,244,255,.88);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.cz-dc-list-h::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.28)}
.cz-dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cz-dcf{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);border-radius:16px;padding:16px 17px;backdrop-filter:blur(12px);transition:.3s}
.cz-dcf:hover{background:rgba(255,255,255,.21);border-color:rgba(255,255,255,.52);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,32,80,.24)}
.cz-dcnum{width:32px;height:32px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#0B6FD0;font-size:13px;font-weight:800}
.cz-dcf>div>b{display:block;font-size:14.5px;font-weight:700;color:#fff;line-height:1.4}
.cz-dc-quick{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.24);display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.cz-dcq{display:flex;gap:11px;align-items:flex-start;min-width:0}
.cz-dcq .fa{width:20px;flex:0 0 auto;font-size:18px;line-height:1.25;text-align:center;color:#FFD84D;margin-top:2px}
.cz-dcq b{display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.35}
@media (max-width:1180px){.cz-dc-main{grid-template-columns:1fr;gap:32px}.cz-dc-grid{grid-template-columns:1fr 1fr}.cz-dc-quick{grid-template-columns:1fr 1fr}.cz-map-wrap{max-width:520px}}
@media (max-width:860px){.cz-dc{padding:56px 0 52px}.cz-dc-wrap{padding:0 20px}.cz-dcf{padding:14px}.cz-dc-grid{grid-template-columns:1fr}.cz-dc-quick{grid-template-columns:1fr;gap:16px;margin-top:28px}}
@media (max-width:760px){.cz-dc-list{display:none}}

/* Lightbox bản đồ */
.cz-lb{position:fixed;inset:0;z-index:9999;display:none;background:#061A34;-webkit-user-select:none;user-select:none;touch-action:none;font-family:var(--cz-font)}
.cz-lb.is-open{display:block}
.cz-lb-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.cz-lb-img{max-width:100%;max-height:100%;display:block;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;user-select:none}
.cz-lb.is-pan .cz-lb-img{cursor:grab}
.cz-lb.is-drag .cz-lb-img{cursor:grabbing}
.cz-lb-x{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.cz-lb-x:hover{background:rgba(255,255,255,.24)}
.cz-lb-tools{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px)}
.cz-lb-tools button{min-width:42px;height:42px;padding:0 15px;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;background:rgba(255,255,255,.14);color:#fff;font-family:inherit;font-size:15px;font-weight:700;transition:.2s}
.cz-lb-tools button:hover{background:#24A1FF}
.cz-lb-hint{position:absolute;left:0;right:0;top:20px;z-index:2;text-align:center;padding:0 72px;color:rgba(255,255,255,.72);font-size:12.6px;line-height:1.5;pointer-events:none}
@media (max-width:600px){.cz-lb-tools{bottom:16px}.cz-lb-tools button{min-width:38px;height:38px;padding:0 12px;font-size:14px}}

/* ==============================================================
   HỆ SINH THÁI DỊCH VỤ  (bản chuẩn — cập nhật 09/2026)
   Lõi đám mây ở giữa, các nhóm dịch vụ toả sang hai bên, mỗi thẻ
   nối về lõi bằng một sợi dây có tia sáng chạy liên tục.
   Icon dùng Font Awesome 4.7 (thẻ <i class="fa fa-...">).
   ============================================================== */
.cz-eco{background:#fff;font-family:var(--cz-font);padding:78px 0 88px;overflow:hidden}
.cz-eco-wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.cz-eco-grid{display:grid;grid-template-columns:1fr minmax(240px,300px) 1fr;gap:26px;align-items:stretch}
.cz-eco-col{display:grid;gap:14px;align-content:space-between}

/* --- Thẻ dịch vụ --- */
.cz-eco-card{position:relative;display:flex;gap:13px;align-items:flex-start;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(1,47,127,.09);border-radius:15px;padding:15px 17px;box-shadow:0 6px 18px rgba(1,32,79,.06);transition:.3s}
.cz-eco-card:hover{transform:translateY(-4px);border-color:rgba(36,161,255,.45);box-shadow:0 16px 38px rgba(36,161,255,.20)}
.cz-eco-ic{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:rgba(36,161,255,.10);color:var(--cz-blue);transition:.28s;text-decoration:none}
.cz-eco-ic svg{width:20px;height:20px}
.cz-eco-ic i,.cz-eco-ic .fa{font-size:19px;line-height:1}
.cz-eco-card:hover .cz-eco-ic{background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;box-shadow:0 8px 20px rgba(36,161,255,.36)}
.cz-eco-go{position:absolute;right:14px;top:14px;font-size:13px;line-height:1;color:var(--cz-blue);opacity:0;transform:translate(-4px,4px);transition:.26s}
.cz-eco-card:hover .cz-eco-go{opacity:1;transform:none}
.cz-eco-tx b{display:block;font-size:14.8px;font-weight:700;color:var(--cz-text);line-height:1.4}
.cz-eco-tx em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--cz-ink)}
.cz-eco-head-link{text-decoration:none;color:inherit;display:block}
.cz-eco-chips{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}
.cz-eco-chips b,.cz-eco-chips a{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:#0B6FD0;text-decoration:none;background:rgba(36,161,255,.09);border:1px solid rgba(36,161,255,.18);transition:.22s}
.cz-eco-chips a:hover{background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;border-color:transparent}

/* --- Sợi dây nối về lõi, có tia sáng chạy --- */
.cz-eco-wire{position:absolute;top:50%;width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(36,161,255,.18),rgba(36,161,255,.7));overflow:hidden}
.cz-eco-wire::after{content:'';position:absolute;top:-1.5px;width:9px;height:5px;border-radius:3px;background:var(--cz-blue);box-shadow:0 0 8px rgba(36,161,255,.9);animation:czWire 2.6s linear infinite;animation-delay:calc(var(--i) * -.42s)}
.cz-eco-l .cz-eco-wire{right:-34px}
.cz-eco-r .cz-eco-wire{left:-34px;transform:scaleX(-1)}
@keyframes czWire{0%{left:-10px;opacity:0}20%,80%{opacity:1}100%{left:34px;opacity:0}}

/* --- Lõi hệ sinh thái --- */
.cz-eco-hub{position:relative;display:grid;place-items:center;min-height:300px}
.cz-eco-ring{position:absolute;width:210px;height:210px;border-radius:50%;border:1.4px solid rgba(36,161,255,.40);animation:czSpin 22s linear infinite}
.cz-eco-ring.r2{width:264px;height:264px;border-style:dashed;border-color:rgba(36,161,255,.45);animation-duration:30s;animation-direction:reverse}
.cz-eco-ring.r3{width:316px;height:316px;border-color:rgba(36,161,255,.22);animation-duration:42s}
@keyframes czSpin{to{transform:rotate(360deg)}}
.cz-eco-core{position:relative;width:210px;height:210px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 44%,rgba(36,161,255,.30) 0%,rgba(36,161,255,.12) 52%,rgba(36,161,255,.03) 70%,transparent 78%);text-align:center;animation:czFloat 5s ease-in-out infinite}
@keyframes czFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.cz-eco-core svg{width:130px;height:87px;filter:drop-shadow(0 12px 30px rgba(36,161,255,.55))}
.cz-eco-rain rect{animation:czRain 1.9s ease-in-out infinite}
.cz-eco-rain rect:nth-child(2){animation-delay:-.6s}
.cz-eco-rain rect:nth-child(3){animation-delay:-1.2s}
@keyframes czRain{0%,100%{transform:translateY(-4px);opacity:.25}50%{transform:translateY(4px);opacity:1}}
.cz-eco-core span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--cz-ink);font-weight:600}
.cz-eco-core span b{display:block;font-size:21px;font-weight:800;color:#0B6FD0;letter-spacing:-.3px;margin-top:3px}

/* --- Responsive --- */
@media (max-width:1180px){
  .cz-eco-grid{grid-template-columns:1fr 1fr;gap:18px}
  .cz-eco-hub{grid-column:1/-1;grid-row:1;min-height:250px}
  .cz-eco-l,.cz-eco-r{grid-row:2}
  .cz-eco-wire{display:none}
}
@media (max-width:860px){
  .cz-eco{padding:52px 0 56px}
  .cz-eco-wrap{padding:0 20px}
  .cz-eco-grid{grid-template-columns:1fr;gap:14px}
  .cz-eco-l,.cz-eco-r{grid-row:auto}
  .cz-eco-ring{width:170px;height:170px}
  .cz-eco-ring.r2{width:210px;height:210px}
  .cz-eco-ring.r3{width:250px;height:250px}
  .cz-eco-core{width:170px;height:170px}
  .cz-eco-core svg{width:86px;height:56px}
}
@media (prefers-reduced-motion:reduce){.cz-eco-ring,.cz-eco-core,.cz-eco-rain rect{animation:none}}
/* ==============================================================
   SLIDE BANNER + Ô LIÊN HỆ
   ============================================================== */
.cz-bn{background:#F2F8FF;font-family:var(--cz-font);padding:34px 0 40px}
.cz-bn-wrap{max-width:1340px;margin:0 auto;padding:0 44px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:stretch}
.cz-bn-slider{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(1,32,79,.14)}
.cz-bn-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.cz-bn-slide{position:relative;flex:0 0 100%;display:block;line-height:0;aspect-ratio:2.47}
.cz-bn-slide img{width:100%;height:100%;object-fit:cover;display:block}
.cz-bn-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.85);color:#0B6FD0;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,30,80,.2);transition:.25s}
.cz-bn-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.cz-bn-nav .fa{font-size:19px}
.cz-bn-prev{left:16px}
.cz-bn-next{right:16px}
.cz-bn-dots{position:absolute;right:22px;bottom:18px;z-index:5;display:flex;gap:7px;align-items:center}
.cz-bn-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;cursor:pointer;background:rgba(255,255,255,.55);transition:.28s}
.cz-bn-dots button.is-on{width:26px;background:#fff}
.cz-bn-side{background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 14px 40px rgba(1,32,79,.10)}
.cz-bn-side img{width:180px;height:auto;display:block}
.cz-bn-side .cz-bn-line{width:56px;height:3px;border-radius:99px;margin:20px 0 18px;background:linear-gradient(90deg,#0B6FD0,var(--cz-blue),#7FE9FF)}
.cz-bn-side p{margin:0;font-size:15.5px;font-weight:700;color:var(--cz-text);line-height:1.6}
.cz-bn-side small{display:block;margin-top:8px;font-size:13px;font-weight:400;color:var(--cz-ink);line-height:1.6}
.cz-bn-zalo{margin-top:auto;padding-top:22px;width:100%}
.cz-bn-zalo a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 20px;border-radius:12px;text-decoration:none;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));box-shadow:0 12px 30px rgba(36,161,255,.34);transition:.28s}
.cz-bn-zalo a:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(36,161,255,.44)}
.cz-bn-zalo .fa{font-size:17px}
@media (max-width:1180px){.cz-bn-wrap{grid-template-columns:1fr;gap:16px}.cz-bn-side{flex-direction:row;text-align:left;gap:22px;align-items:center;padding:22px 26px}.cz-bn-side .cz-bn-line{display:none}.cz-bn-zalo{margin:0;padding:0;width:auto;min-width:230px}}
@media (max-width:860px){.cz-bn-wrap{padding:0 20px}.cz-bn-nav{width:34px;height:34px}.cz-bn-prev{left:8px}.cz-bn-next{right:8px}.cz-bn-side{flex-direction:column;text-align:center}.cz-bn-zalo{width:100%;padding-top:18px}}

/* ==============================================================
   CÂU HỎI THƯỜNG GẶP
   ============================================================== */
.cz-why{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#FFFFFF 0%,#F6FBFF 46%,#EDF6FF 100%);font-family:var(--cz-font);padding:78px 0 88px}
.cz-why-wrap{position:relative;z-index:2;max-width:1300px;margin:0 auto;padding:0 44px}
.cz-why .cz-svc-head{position:relative;z-index:2}
.cz-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.cz-why-col{display:grid;gap:14px;align-content:start}
.cz-why-item{background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(1,32,79,.06);transition:.3s}
.cz-why-item:hover{border-color:rgba(36,161,255,.34);box-shadow:0 14px 34px rgba(36,161,255,.16)}
.cz-why-item.is-open{border-color:rgba(36,161,255,.44);box-shadow:0 18px 44px rgba(36,161,255,.18)}
.cz-why-h{width:100%;display:flex;gap:14px;align-items:center;text-align:left;padding:18px 20px;background:none;border:0;cursor:pointer;font-family:inherit}
.cz-why-ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:rgba(36,161,255,.10);color:var(--cz-blue);transition:.28s}
.cz-why-ic .fa{font-size:18px;line-height:1}
.cz-why-item.is-open .cz-why-ic{background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;box-shadow:0 8px 20px rgba(36,161,255,.34)}
.cz-why-t{flex:1;min-width:0}
.cz-why-t b{display:block;font-size:15.5px;font-weight:700;color:var(--cz-text);line-height:1.4}
.cz-why-t em{display:block;margin-top:4px;font-style:normal;font-size:13px;line-height:1.5;color:var(--cz-ink)}
.cz-why-x{position:relative;width:22px;height:22px;flex:0 0 auto}
.cz-why-x::before,.cz-why-x::after{content:'';position:absolute;left:50%;top:50%;background:var(--cz-blue);border-radius:2px;transform:translate(-50%,-50%);transition:.3s}
.cz-why-x::before{width:13px;height:2.2px}
.cz-why-x::after{width:2.2px;height:13px}
.cz-why-item.is-open .cz-why-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.cz-why-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
.cz-why-item.is-open .cz-why-b{grid-template-rows:1fr}
.cz-why-b>div{overflow:hidden}
.cz-why-b p{margin:0 0 12px;padding:0 20px;font-size:14px;line-height:1.75;color:var(--cz-ink)}
.cz-why-b p:first-child{padding-top:2px}
.cz-why-b p:last-child{margin-bottom:20px}
.cz-why-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cz-why-blob{position:absolute;border-radius:50%;filter:blur(80px)}
.cz-why-blob.b1{width:520px;height:520px;left:-140px;top:-160px;background:rgba(36,161,255,.16);animation:czBreathe 9s ease-in-out infinite}
.cz-why-blob.b2{width:460px;height:460px;right:-120px;bottom:-180px;background:rgba(127,233,255,.20);animation:czBreathe 11s ease-in-out infinite reverse}
@keyframes czBreathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}
.cz-why-cloud{position:absolute;display:block;opacity:.10}
.cz-why-cloud svg{width:100%;height:auto;display:block;fill:#24A1FF}
.cz-why-cloud.c1{width:190px;top:12%;left:-16%;animation:czDrift 34s linear infinite}
.cz-why-cloud.c2{width:130px;top:58%;left:-14%;opacity:.08;animation:czDrift 46s linear infinite;animation-delay:-14s}
.cz-why-cloud.c3{width:96px;top:82%;left:-12%;opacity:.12;animation:czDrift 28s linear infinite;animation-delay:-8s}
@keyframes czDrift{to{transform:translateX(calc(100vw + 220px))}}
@media (max-width:1180px){.cz-why-grid{grid-template-columns:1fr;gap:14px}}
@media (max-width:860px){.cz-why{padding:52px 0 60px}.cz-why-wrap{padding:0 20px}.cz-why-h{padding:15px 16px;gap:11px}.cz-why-ic{width:36px;height:36px;border-radius:10px}.cz-why-t b{font-size:14.5px}.cz-why-cloud.c1{width:130px}}
@media (prefers-reduced-motion:reduce){.cz-why-bg *{animation:none !important}}

/* ==============================================================
   KHÁCH HÀNG NÓI VỀ CLOUDZONE + ĐỐI TÁC TIÊU BIỂU
   ============================================================== */
.cz-tm,.cz-pt2,.cz-tm *,.cz-pt2 *{box-sizing:border-box}
.cz-tm{background:#fff;font-family:var(--cz-font);padding:74px 0 60px}
.cz-tm-wrap{position:relative;margin:0 auto;padding:0 44px}
.cz-tm-row{position:relative;overflow-x:auto;padding:6px 2px 22px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.cz-tm-row::-webkit-scrollbar{display:none}
.cz-tm-track{display:flex;gap:20px;align-items:stretch;width:max-content}
.cz-tm-card{position:relative;flex:0 0 372px;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:18px;padding:26px 24px 22px;box-shadow:0 10px 30px rgba(1,32,79,.08);transition:.3s}
.cz-tm-card .cz-tm-who{margin-top:auto}
.cz-tm-card:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(36,161,255,.18);border-color:rgba(36,161,255,.34)}
.cz-tm-q{display:block;font-size:26px;line-height:1;color:rgba(36,161,255,.30)}
.cz-tm-card p{margin:12px 0 0;font-size:14px;line-height:1.75;color:var(--cz-ink);font-style:italic}
.cz-tm-who{margin-top:20px;padding-top:16px;border-top:1px solid rgba(1,47,127,.08);display:flex;gap:12px;align-items:center}
.cz-tm-av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;font-size:17px;font-weight:800}
img.cz-tm-av{object-fit:cover;border:2px solid rgba(36,161,255,.28);background:#EAF5FF}
.cz-tm-who b{display:block;font-size:14.5px;font-weight:700;color:var(--cz-text)}
.cz-tm-who em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--cz-ink)}
.cz-tm-nav{display:flex;gap:10px;justify-content:center;margin-top:6px}
.cz-tm-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(36,161,255,.34);background:#fff;color:#0B6FD0;cursor:pointer;display:grid;place-items:center;transition:.25s}
.cz-tm-nav button:hover{background:#0B6FD0;color:#fff;border-color:transparent}
.cz-tm-nav .fa{font-size:17px}
.cz-pt2{background:#F2F8FF;font-family:var(--cz-font);padding:64px 0 74px;overflow:hidden}
.cz-pt2-wrap{margin:0 auto;padding:0 44px;text-align:center}
.cz-pt2-h span{color:#0B6FD0}
.cz-pt2-stats{margin:34px auto 0;max-width:900px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cz-pt2-stats b{display:block;font-size:clamp(24px,2.4vw,32px);font-weight:800;color:var(--cz-text);letter-spacing:-.6px}
.cz-pt2-stats i{font-style:normal;color:var(--cz-blue)}
.cz-pt2-stats span{display:block;margin-top:5px;font-size:13px;color:var(--cz-ink);line-height:1.5}
.cz-pt2-sub{margin:28px 0 0}
.cz-pt2-sub b{color:#0B6FD0;font-weight:800}
.cz-pn-row{margin-top:26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cz-pn-track{display:flex;gap:16px;width:max-content;animation:czMarquee 38s linear infinite}
.cz-pn-track.cz-pn-rev{animation-direction:reverse}
.cz-pn-row:hover .cz-pn-track{animation-play-state:paused}
@keyframes czMarquee{to{transform:translateX(-50%)}}
.cz-pn{flex:0 0 auto;min-width:168px;height:74px;display:grid;place-items:center;background:#fff;border:1px solid rgba(1,47,127,.07);border-radius:14px;padding:0 20px;box-shadow:0 4px 14px rgba(1,32,79,.05);transition:.26s}
.cz-pn:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(36,161,255,.18)}
.cz-pn b{font-size:14px;font-weight:700;color:#8A9AB0;letter-spacing:.2px;white-space:nowrap}
.cz-pn:hover b{color:#0B6FD0}
.cz-pn img{max-width:134px;max-height:50px;width:auto;height:auto;object-fit:contain;display:block;transition:transform .26s ease}
.cz-pn:hover img{transform:scale(1.06)}
a.cz-pn{text-decoration:none;cursor:pointer}
a.cz-pn:focus-visible{outline:2px solid var(--cz-blue);outline-offset:3px}
@media (max-width:860px){
  .cz-tm{padding:52px 0 44px}
  .cz-tm-wrap,.cz-pt2-wrap{padding:0 20px}
  .cz-tm-card{flex:0 0 300px}
  .cz-pt2{padding:48px 0 56px}
  .cz-pt2-stats{grid-template-columns:1fr 1fr;gap:22px}
  .cz-pn{min-width:140px;height:64px}
}

/* ==============================================================
   DẢI CTA CUỐI TRANG
   ============================================================== */
.cz-cta,.cz-cta *{box-sizing:border-box}
.cz-cta{position:relative;overflow:hidden;isolation:isolate;font-family:var(--cz-font);padding:70px 0;text-align:center;color:#fff;background:radial-gradient(70% 80% at 50% 0%,rgba(140,235,255,.24) 0%,transparent 60%),linear-gradient(120deg,#0A5FB8 0%,#1789EA 46%,#24A1FF 100%)}
.cz-cta-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.cz-cta-src{position:absolute;top:50%;left:50%;width:0;height:0}
.cz-cta-ring{position:absolute;left:0;top:0;width:1100px;height:620px;margin:-310px 0 0 -550px;border-radius:50%;border:0;background:radial-gradient(closest-side ellipse,transparent 0 56%,rgba(226,248,255,.10) 64%,rgba(226,248,255,.30) 72%,rgba(226,248,255,.10) 80%,transparent 90%);filter:blur(9px);transform:scale(.8);opacity:0;animation:czHalo 7.5s ease-out infinite}
.cz-cta-ring.r2{animation-delay:-2.5s}
.cz-cta-ring.r3{animation-delay:-5s;background:radial-gradient(closest-side ellipse,transparent 0 56%,rgba(160,232,255,.10) 64%,rgba(160,232,255,.30) 72%,rgba(160,232,255,.10) 80%,transparent 90%)}
@keyframes czHalo{0%{transform:scale(.8);opacity:0}18%{opacity:.85}100%{transform:scale(2.5);opacity:0}}
.cz-cta-aura{position:absolute;top:50%;width:560px;height:560px;margin-top:-280px;border-radius:50%;filter:blur(72px);background:radial-gradient(circle,rgba(190,242,255,.40) 0%,rgba(190,242,255,.14) 46%,transparent 72%);animation:czAura 7s ease-in-out infinite}
.cz-cta-aura.l{left:-200px}
.cz-cta-aura.r{right:-200px;animation-delay:-3.5s}
@keyframes czAura{0%,100%{transform:scale(.88);opacity:.42}50%{transform:scale(1.14);opacity:.9}}
.cz-cta-wrap{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 24px}
.cz-cta p{color:rgba(240,250,255,.94)}
.cz-cta-btns{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cz-cta-main,.cz-cta-ghost{display:inline-flex;align-items:center;justify-content:center;padding:14px 34px;border-radius:11px;font-size:15px;font-weight:700;text-decoration:none;transition:.28s}
.cz-cta-main{background:#fff;color:#0B6FD0;box-shadow:0 12px 30px rgba(0,30,80,.24)}
.cz-cta-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.55)}
.cz-cta-main:hover,.cz-cta-ghost:hover{transform:translateY(-3px)}
@media (max-width:860px){.cz-cta{padding:52px 0}.cz-cta-btns a{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.cz-cta-fx *{animation:none !important}}

/* ==============================================================
   HIỆU ỨNG XUẤT HIỆN KHI CUỘN TRANG (scroll reveal)
   ============================================================== */
html.cz-anim [data-rv]{
  opacity:0;transform:translate3d(0,38px,0);
  transition:opacity 1.15s cubic-bezier(.22,.68,.24,1),transform 1.15s cubic-bezier(.22,.68,.24,1);
  transition-delay:var(--rvd,0s);will-change:opacity,transform;
}
html.cz-anim [data-rv="left"]{transform:translate3d(-56px,0,0)}
html.cz-anim [data-rv="right"]{transform:translate3d(56px,0,0)}
html.cz-anim [data-rv="zoom"]{transform:scale(.91)}
html.cz-anim [data-rv="fade"]{transform:none}
html.cz-anim [data-rv].is-in{opacity:1;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){html.cz-anim [data-rv]{opacity:1 !important;transform:none !important;transition:none !important}}


/* ==============================================================
   MINH HOẠ SVG TRONG KHỐI "ANTI-DDOS LÀ GÌ"
   Thay cho ảnh bitmap của trang cũ (không có file gốc).
   ============================================================== */
.cz-gt-svg{max-width:520px}
.cz-gt-illus svg{width:100%;height:auto;display:block}
.cz-dg-lb{font-family:var(--cz-font);font-size:14.5px;font-weight:700;text-anchor:middle}
/* Nét đứt chạy: lưu lượng tấn công chạy vào, lưu lượng sạch chạy ra */
.cz-dg-bad path,.cz-dg-ok path{stroke-dasharray:10 14;animation:czFlow 1.1s linear infinite}
.cz-dg-ok path{animation-duration:1.6s}
@keyframes czFlow{to{stroke-dashoffset:-48}}
@media (prefers-reduced-motion:reduce){.cz-dg-bad path,.cz-dg-ok path{animation:none}}

/* ==============================================================
   BẢNG GIÁ — BẢNG SO SÁNH 3 GÓI  (.cz-dt-*)
   Hàng = tiêu chí, cột = 3 gói. Cột "Tiêu chuẩn" tô nổi bật.
   ============================================================== */
.cz-dt,.cz-dt *{box-sizing:border-box}
.cz-dt{background:#fff;font-family:var(--cz-font);padding:70px 0 76px}
.cz-dt-wrap{max-width:1240px;margin:0 auto;padding:0 44px}
.cz-dt-box{margin-top:32px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 22px 60px rgba(1,32,79,.12);border:1px solid rgba(1,47,127,.06)}
.cz-dt-tb{width:100%;border-collapse:collapse}
.cz-dt-tb thead th{
  padding:18px 20px;text-align:center;vertical-align:middle;
  background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
  font-size:15px;font-weight:800;letter-spacing:-.2px;
}
.cz-dt-tb thead th:first-child{text-align:left;width:210px;font-size:12.8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,246,255,.9)}
.cz-dt-tb tbody th{
  width:210px;padding:15px 20px;text-align:left;vertical-align:middle;
  font-size:14.2px;font-weight:700;color:var(--cz-text);
  background:#F7FBFF;border-right:1px solid rgba(1,47,127,.08);
}
.cz-dt-tb tbody td{padding:15px 20px;text-align:center;vertical-align:middle;font-size:14.4px;line-height:1.65;color:var(--cz-ink)}
.cz-dt-tb tbody td+td{border-left:1px solid rgba(1,47,127,.07)}
.cz-dt-tb tbody tr+tr th,.cz-dt-tb tbody tr+tr td{border-top:1px solid rgba(1,47,127,.08)}
.cz-dt-tb tbody tr:hover td{background:rgba(36,161,255,.045)}
.cz-dt-price-row td{padding-top:20px;padding-bottom:20px}
.cz-dt-price-row b{display:block;font-size:22px;font-weight:800;color:#0B6FD0;letter-spacing:-.5px}
.cz-dt-price-row span{display:block;margin-top:2px;font-size:12.6px;color:var(--cz-ink)}
.cz-dt-y{font-style:normal;font-weight:800;color:#0F9D58;margin-right:6px}
.cz-dt-btn{
  display:inline-block;padding:11px 26px;border-radius:10px;text-decoration:none;
  font-size:14px;font-weight:700;color:#0B6FD0;
  background:rgba(36,161,255,.10);border:1px solid rgba(36,161,255,.28);transition:.26s;
}
.cz-dt-btn:hover{background:#0B6FD0;color:#fff;border-color:transparent;transform:translateY(-2px)}
.cz-dt-note{margin:18px 0 0;font-size:13.2px;line-height:1.75;color:var(--cz-ink);text-align:center}
.cz-dt-note a{color:#0B6FD0;font-weight:700;text-decoration:none}
.cz-dt-note a:hover{text-decoration:underline}
/* --------------------------------------------------------------
   Màn hình nhỏ: xếp lại theo GÓI — mỗi gói thành một thẻ riêng.
   Bảng chuyển sang grid 1 cột; thead/tbody/tr dùng display:contents
   để các ô th/td trở thành ô lưới, rồi gán grid-row thủ công:
     hàng 1–8   = gói Cơ bản      (đầu thẻ + 7 dòng)
     hàng 9–16  = gói Tiêu chuẩn
     hàng 17–24 = gói Nâng cao
   Nhãn tiêu chí lấy từ thuộc tính data-crit của từng ô, nên nội dung
   chỉ cần viết một lần trong HTML.
   -------------------------------------------------------------- */
@media (max-width:860px){
  .cz-dt{padding:52px 0 58px}
  .cz-dt-wrap{padding:0 20px}
  .cz-dt-box{background:none;box-shadow:none;border:0;border-radius:0;overflow:visible}
  .cz-dt-tb{display:grid;grid-template-columns:minmax(0,1fr)}
  .cz-dt-tb thead,.cz-dt-tb tbody,.cz-dt-tb tr{display:contents}
  /* cột tiêu chí gốc không dùng nữa — nhãn đã nằm ở data-crit */
  .cz-dt-tb thead th:first-child,.cz-dt-tb tbody th{display:none}

  /* đầu mỗi thẻ gói */
  .cz-dt-tb thead th{display:block;width:auto;padding:15px 18px;border-radius:16px 16px 0 0;font-size:16.5px}
  .cz-dt-tb thead th:nth-child(2){grid-row:1}
  .cz-dt-tb thead th:nth-child(3){grid-row:9}
  .cz-dt-tb thead th:nth-child(4){grid-row:17}
  .cz-dt-tb thead th:nth-child(3),.cz-dt-tb thead th:nth-child(4){margin-top:24px}

  /* các dòng thông số trong thẻ */
  .cz-dt-tb tbody td{
    display:flex;align-items:center;justify-content:flex-end;gap:0;
    width:auto;padding:13px 18px;text-align:right;
    background:#fff;border:1px solid rgba(1,47,127,.08);border-top:0;
  }
  .cz-dt-tb tbody td::before{
    content:attr(data-crit);margin-right:16px;margin-inline-end:auto;flex:0 0 auto;
    font-size:13.4px;font-weight:700;color:var(--cz-text);text-align:left;
  }
  .cz-dt-tb tbody tr+tr td{border-top:0}
  .cz-dt-tb tbody tr:last-child td{border-radius:0 0 16px 16px;box-shadow:0 12px 32px rgba(1,32,79,.10)}
  .cz-dt-tb tbody tr:hover td{background:#fff}

  /* dòng giá và dòng nút */
  .cz-dt-price-row td{padding-top:16px;padding-bottom:16px}
  .cz-dt-price-row b{font-size:21px}
  .cz-dt-price-row span{display:inline;margin-left:5px}
  .cz-dt-cta-row td{padding-top:15px;padding-bottom:17px}
  .cz-dt-btn{padding:10px 24px}
  .cz-dt-note{font-size:12.8px}

  /* vị trí từng ô trong lưới */
  .cz-dt-tb tbody tr:nth-child(1) td:nth-child(2){grid-row:2}
  .cz-dt-tb tbody tr:nth-child(1) td:nth-child(3){grid-row:10}
  .cz-dt-tb tbody tr:nth-child(1) td:nth-child(4){grid-row:18}
  .cz-dt-tb tbody tr:nth-child(2) td:nth-child(2){grid-row:3}
  .cz-dt-tb tbody tr:nth-child(2) td:nth-child(3){grid-row:11}
  .cz-dt-tb tbody tr:nth-child(2) td:nth-child(4){grid-row:19}
  .cz-dt-tb tbody tr:nth-child(3) td:nth-child(2){grid-row:4}
  .cz-dt-tb tbody tr:nth-child(3) td:nth-child(3){grid-row:12}
  .cz-dt-tb tbody tr:nth-child(3) td:nth-child(4){grid-row:20}
  .cz-dt-tb tbody tr:nth-child(4) td:nth-child(2){grid-row:5}
  .cz-dt-tb tbody tr:nth-child(4) td:nth-child(3){grid-row:13}
  .cz-dt-tb tbody tr:nth-child(4) td:nth-child(4){grid-row:21}
  .cz-dt-tb tbody tr:nth-child(5) td:nth-child(2){grid-row:6}
  .cz-dt-tb tbody tr:nth-child(5) td:nth-child(3){grid-row:14}
  .cz-dt-tb tbody tr:nth-child(5) td:nth-child(4){grid-row:22}
  .cz-dt-tb tbody tr:nth-child(6) td:nth-child(2){grid-row:7}
  .cz-dt-tb tbody tr:nth-child(6) td:nth-child(3){grid-row:15}
  .cz-dt-tb tbody tr:nth-child(6) td:nth-child(4){grid-row:23}
  .cz-dt-tb tbody tr:nth-child(7) td:nth-child(2){grid-row:8}
  .cz-dt-tb tbody tr:nth-child(7) td:nth-child(3){grid-row:16}
  .cz-dt-tb tbody tr:nth-child(7) td:nth-child(4){grid-row:24}
}

/* ==============================================================
   CÁCH THỨC HOẠT ĐỘNG  (.cz-hw-*)
   6 ô, mỗi ô một bước — số thứ tự lớn mờ ở góc phải.
   ============================================================== */
.cz-hw,.cz-hw *{box-sizing:border-box}
.cz-hw{background:#F6FAFF;font-family:var(--cz-font);padding:74px 0 80px}
.cz-hw-wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.cz-hw-grid{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.cz-hw-c{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid rgba(1,47,127,.07);border-radius:20px;
  padding:28px 26px 26px;box-shadow:0 8px 26px rgba(1,32,79,.06);transition:.32s;
}
.cz-hw-c:hover{transform:translateY(-6px);border-color:rgba(36,161,255,.30);box-shadow:0 26px 62px rgba(1,32,79,.14)}
.cz-hw-n{
  position:absolute;right:16px;top:6px;
  font-size:62px;font-weight:800;line-height:1;letter-spacing:-2px;
  color:rgba(36,161,255,.10);pointer-events:none;transition:.32s;
}
.cz-hw-c:hover .cz-hw-n{color:rgba(36,161,255,.18)}
.cz-hw-ic{
  position:relative;z-index:2;width:50px;height:50px;border-radius:14px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));
  box-shadow:0 10px 26px rgba(36,161,255,.34);
}
.cz-hw-ic .fa{font-size:22px;line-height:1}
.cz-hw-c h3{position:relative;z-index:2;margin:18px 0 0;font-size:17.5px;font-weight:800;line-height:1.4;color:var(--cz-text);letter-spacing:-.2px}
.cz-hw-c p{margin:10px 0 0;font-size:14px;line-height:1.72;color:var(--cz-ink)}
@media (max-width:1024px){.cz-hw-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (max-width:640px){.cz-hw{padding:52px 0 58px}.cz-hw-wrap{padding:0 20px}.cz-hw-grid{grid-template-columns:1fr;gap:14px}.cz-hw-c{padding:24px 20px}.cz-hw-n{font-size:52px}}


/* ==============================================================
   TRANG PHẦN MỀM — CSS RIÊNG (tiền tố cz-pm-)
   Chỉ chứa những gì hệ cz- dùng chung chưa có:
   1. .cz-hx-lead   — đoạn mô tả trong hero (các trang khác không có)
   2. .cz-hx-server — khung ảnh minh hoạ hero (ảnh chữ nhật, không tách nền)
   3. .cz-pm-*      — khối trưng bày sản phẩm dạng zigzag ảnh – chữ
   Mọi màu đều lấy từ biến --cz-* đã khai báo ở đầu style.css.
   ============================================================== */

/* --- 1 & 2. Bổ sung cho hero -------------------------------------- */
.cz-hx-lead{
  margin:18px 0 0;max-width:640px;
  font-size:15.4px;line-height:1.8;color:rgba(226,240,255,.92);
}
.cz-hx-lead b{color:#fff;font-weight:700}

/* Ảnh minh hoạ hero là ảnh chữ nhật có nền trắng (không tách nền như
   trang Anti-DDoS) nên phải bọc trong khung kính mờ, nếu không mép ảnh
   sẽ cắt thẳng vào gradient của hero trông rất thô. */
.cz-hx-server{
  width:100%;max-width:760px;padding:0;border-radius:0;
  background:none;border:0;box-shadow:none;
}
.cz-hx-server-inner{border-radius:0;line-height:0;background:none}
.cz-hx-server-inner img{width:100%;height:auto;display:block}
@media (max-width:1024px){.cz-hx-server{max-width:560px;margin:0 auto}}
@media (max-width:640px){.cz-hx-server{padding:7px;border-radius:18px}}

/* --- 3. Khối sản phẩm: zigzag ảnh – chữ --------------------------- */
.cz-pm,.cz-pm *{box-sizing:border-box}
.cz-pm{background:#fff;font-family:var(--cz-font);padding:74px 0 70px}
.cz-pm.is-alt{background:#F6FAFF}          /* nhịp nền xen kẽ giữa các khối */
.cz-pm-wrap{max-width:1240px;margin:0 auto;padding:0 44px}
.cz-pm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.cz-pm-row.is-rev .cz-pm-md{order:2}       /* đảo ảnh sang phải */
.cz-pm-row.is-rev .cz-pm-tx{order:1}

/* Ảnh nằm trong khung thẻ trắng có bóng đổ — cùng kiểu thẻ với .cz-uu-c */
/* isolation:isolate — tạo ngữ cảnh xếp lớp riêng để vệt sáng z-index:-1 của
   .cz-pm-frame::before không tụt xuống dưới nền của cả section. */
.cz-pm-md{min-width:0;display:flex;justify-content:center;position:relative;isolation:isolate}
.cz-pm-frame{
  position:relative;width:100%;max-width:520px;padding:0;border-radius:0;
  background:none;border:0;box-shadow:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.cz-pm-frame.is-tall{max-width:420px}      /* ảnh CV & Blog cao hơn rộng */
.cz-pm-frame::before{content:none}          /* bỏ vệt sáng/nền phía sau */
.cz-pm-frame:hover{transform:translateY(-6px)}
.cz-pm-frame img{width:100%;height:auto;display:block;border-radius:0}

/* Cột chữ */
.cz-pm-tx{min-width:0}
.cz-pm-tx h2{
  margin:14px 0 0;font-size:clamp(23px,2.5vw,32px);font-weight:800;line-height:1.3;
  letter-spacing:-.2px;color:var(--cz-text);text-wrap:balance;
}
.cz-pm-tx h2 span{color:#0B6FD0}
/* gạch chân gradient canh trái, giống .cz-gt-tx h2 của các trang khác */
.cz-pm-tx h2::after{
  content:'';display:block;width:64px;height:4px;border-radius:99px;margin:16px 0 0;
  background:linear-gradient(90deg,#0B6FD0,var(--cz-blue),#7FE9FF);
}
.cz-pm-tx>p{margin:16px 0 0;font-size:15.2px;line-height:1.8;color:var(--cz-ink)}
.cz-pm-tx>p b{color:var(--cz-text);font-weight:700}

/* Tiêu đề con trong khối CV & Blog ("Tạo CV ấn tượng", "Viết blog…") */
.cz-pm-sub{margin:22px 0 0 !important;padding-left:13px;position:relative}
.cz-pm-sub::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:99px;
  background:linear-gradient(180deg,#0B6FD0,var(--cz-blue));
}
.cz-pm-sub b{font-size:16px;font-weight:800;color:var(--cz-text)}

/* Danh sách tính năng — dấu tick tròn màu xanh thương hiệu */
.cz-pm-feat{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.cz-pm-feat li{
  position:relative;padding-left:30px;
  font-size:15px;line-height:1.7;color:var(--cz-ink);
}
.cz-pm-feat li::before{
  content:'\f058';                          /* fa-check-circle */
  font-family:FontAwesome;font-size:16px;line-height:1.6;
  position:absolute;left:0;top:0;color:var(--cz-blue);
}
.cz-pm-feat li b{color:var(--cz-text);font-weight:700}

/* Dòng ghi chú dự án đã dùng VINACMS */
.cz-pm-note{
  margin:20px 0 0 !important;padding:13px 16px;border-radius:12px;
  background:rgba(36,161,255,.07);border:1px solid rgba(36,161,255,.16);
  border-left:4px solid var(--cz-blue);
  font-size:14.4px !important;line-height:1.7 !important;color:var(--cz-text) !important;
}
.cz-pm-note a{color:#0B6FD0;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(11,111,208,.35)}
.cz-pm-note a:hover{border-bottom-color:#0B6FD0}

/* Nút */
.cz-pm-ctas{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.cz-pm-btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:12px;
  font-family:inherit;font-size:14.6px;font-weight:700;text-decoration:none;transition:.26s;
}
.cz-pm-btn .fa{font-size:15px}
.cz-pm-btn.is-main{
  background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
  box-shadow:0 14px 32px rgba(11,111,208,.28);
}
.cz-pm-btn.is-main:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(11,111,208,.38)}
.cz-pm-btn.is-ghost{background:#fff;color:#0B6FD0;border:1px solid rgba(36,161,255,.42);box-shadow:0 6px 18px rgba(1,32,79,.06)}
.cz-pm-btn.is-ghost:hover{background:rgba(36,161,255,.08);border-color:var(--cz-blue);transform:translateY(-3px)}

@media (max-width:960px){
  .cz-pm{padding:58px 0 56px}
  .cz-pm-wrap{padding:0 32px}
  /* Màn hẹp: chữ trước, ảnh sau — kể cả hàng đã đảo chiều ở desktop */
  .cz-pm-row,.cz-pm-row.is-rev{grid-template-columns:1fr;gap:30px}
  .cz-pm-row .cz-pm-md,.cz-pm-row.is-rev .cz-pm-md{order:2}
  .cz-pm-row .cz-pm-tx,.cz-pm-row.is-rev .cz-pm-tx{order:1}
  .cz-pm-frame{max-width:460px}
  .cz-pm-frame.is-tall{max-width:360px}
}
@media (max-width:640px){
  .cz-pm{padding:48px 0 46px}
  .cz-pm-wrap{padding:0 20px}
  .cz-pm-frame{max-width:100%;padding:8px;border-radius:18px}
  .cz-pm-frame.is-tall{max-width:100%}
  .cz-pm-tx>p{font-size:14.6px}
  .cz-pm-feat li{font-size:14.4px}
  .cz-pm-btn{flex:1 1 auto;justify-content:center;padding:13px 18px}
}

/* --- Khối hub danh mục (chỉ dùng ở phương án 3) -------------------- */
/* Dùng lại lưới .cz-uu nhưng thẻ là thẻ <a> nên phải bỏ gạch chân link. */
.cz-pm-hub{padding:70px 0 66px}
.cz-pm-hub .cz-uu-grid{grid-template-columns:repeat(5,1fr)}
.cz-pm-hub a.cz-uu-c{text-decoration:none;color:inherit}
.cz-pm-hub .cz-uu-c h3{font-size:17px}
.cz-pm-hub .cz-uu-tags{display:flex}
@media (max-width:1180px){.cz-pm-hub .cz-uu-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.cz-pm-hub .cz-uu-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.cz-pm-hub .cz-uu-grid{grid-template-columns:1fr}}



/* === Cỡ icon Font Awesome 4 — sinh tự động, khớp với từng rule svg ở trên === */
.cz-eco-ic .fa{font-size:20px;line-height:1}