/* 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%}
/* ==============================================================
1. NỀN HERO — tone chủ đạo #24A1FF
============================================================== */
/* Biến màu đặt ở :root để cả hero lẫn khối card bên dưới đều dùng được */
: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;
}
.cz-hero,.cz-below,.cz-services,.cz-featured,.cz-partner,
.cz-hero *,.cz-hero *::before,.cz-hero *::after,
.cz-below *,.cz-below *::before,.cz-below *::after,
.cz-services *,.cz-services *::before,.cz-services *::after,
.cz-featured *,.cz-featured *::before,.cz-featured *::after,
.cz-partner *,.cz-partner *::before,.cz-partner *::after,
.cz-why,.cz-eco,.cz-bn,
.cz-why *,.cz-why *::before,.cz-why *::after,
.cz-eco *,.cz-eco *::before,.cz-eco *::after,
.cz-bn *,.cz-bn *::before,.cz-bn *::after{box-sizing:border-box}
.cz-hero{
position:relative;overflow:hidden;isolation:isolate;
min-height:620px;padding-bottom:196px; /* chừa chỗ cho hàng card chồng lên */
color:#fff;font-family:var(--cz-font);
/* Gradient cùng hệ màu với video, đậm dần về trái để chữ trắng đủ tương phản */
background:
radial-gradient(88% 120% at 86% 72%,rgba(120,240,255,.22) 0%,transparent 56%),
linear-gradient(103deg,#0C6DC4 0%,#1789EA 15%,#24A1FF 38%,#24A1FF 78%,#57B8FF 100%);
}
/* --- Video: neo vào nửa phải, KHÔNG phủ kín hero --- */
.cz-hero video{
position:absolute;right:34px;bottom:118px;z-index:1;
width:64%;height:auto;
/* Mask 3 lớp: tan dần ở mép trên, trái và phải; giữ nguyên mép dưới
(nơi có chân đế và bóng phản chiếu của khối datacenter).
Nhờ vậy video hoà vào nền gradient, không lộ đường viền khung video. */
/* Vùng mờ chuyển tiếp được thu hẹp lại (trước đây phải tới 42% chiều cao mới
hiện rõ hoàn toàn) để phần thân video rõ nét hơn. */
-webkit-mask-image:
linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 10%,#000 24%,#000 96%,transparent 100%),
linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 9%,#000 22%),
linear-gradient(270deg,transparent 0,rgba(0,0,0,.5) 2%,#000 8%);
mask-image:
linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 10%,#000 24%,#000 96%,transparent 100%),
linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 9%,#000 22%),
linear-gradient(270deg,transparent 0,rgba(0,0,0,.5) 2%,#000 8%);
-webkit-mask-composite:source-in; /* Safari */
mask-composite:intersect; /* Chrome / Firefox / Edge */
/* Làm nét + tăng tương phản/độ rực để video (bitrate thấp) trông rõ hơn */
filter:url(#czSharpen) contrast(1.09) saturate(1.14) brightness(1.03);
}
/* Máy yếu / màn nhỏ: bỏ bộ lọc làm nét để không tốn GPU */
@media (max-width:860px){
.cz-hero video{filter:contrast(1.07) saturate(1.1) brightness(1.02)}
}
/* --- Lớp phủ giữ cho chữ bên trái luôn đọc được --- */
.cz-scrim{
position:absolute;inset:0;z-index:2;
background:
/* Lớp phủ tan sớm hơn về phía phải để không làm video bị bạc màu */
linear-gradient(96deg,rgba(0,66,138,.44) 0%,rgba(0,72,148,.45) 24%,
rgba(0,80,164,.38) 44%,rgba(36,161,255,.10) 60%,transparent 74%),
linear-gradient(180deg,rgba(0,58,118,.28) 0%,transparent 24%,transparent 70%,rgba(0,62,124,.20) 100%);
}
/* ==============================================================
3. KHỐI CHỮ BÊN TRÁI
============================================================== */
.cz-inner{
position:relative;z-index:6;max-width:1360px;margin:0 auto;padding:62px 44px 24px;
}
.cz-col{max-width:710px}
.cz-h1{
margin:0;font-size:clamp(31px,3.1vw,46px);line-height:1.15;
font-weight:800;letter-spacing:-.5px;text-shadow:0 4px 30px rgba(0,14,40,.45);
}
.cz-lead{
margin:20px 0 0;max-width:560px;font-size:17px;line-height:1.62;
color:rgba(240,249,255,.95);text-shadow:0 2px 16px rgba(0,14,40,.4);
}
.cz-lead b{color:#fff;font-weight:600}
.cz-ctas{margin:30px 0 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cz-btn{
display:inline-flex;align-items:center;gap:10px;
padding:15px 30px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;
font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.2px;transition:.28s;
}
.cz-btn svg{width:18px;height:18px}
.cz-btn-main{
background:linear-gradient(135deg,#F2C93B,var(--cz-gold));color:#1B1400;
box-shadow:0 12px 34px rgba(227,183,33,.34);
}
.cz-btn-main:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(227,183,33,.44)}
.cz-btn-ghost{
background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.4);color:#fff;
backdrop-filter:blur(10px);
}
.cz-btn-ghost:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}
/* ==============================================================
4. BA KHỐI CHỮ NHẬT CHỒNG LÊN ĐÁY HERO
============================================================== */
.cz-below{background:#F2FAFF;font-family:var(--cz-font)} /* nền xanh nhạt thương hiệu */
.cz-cards{
position:relative;z-index:8;max-width:1360px;margin:-156px auto 0;padding:0 44px;
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.cz-card{
position:relative;overflow:hidden;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,.20),0 2px 6px rgba(1,32,79,.06);
transition:.32s;
}
.cz-card::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-card:hover{transform:translateY(-8px);box-shadow:0 34px 84px rgba(1,32,79,.26)}
.cz-card:hover::after{transform:scaleX(1)}
.cz-ico{
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-ico svg{width:24px;height:24px}
.cz-card h3{margin:20px 0 0;font-size:18px;font-weight:700;color:var(--cz-text);letter-spacing:-.2px}
.cz-card p{margin:10px 0 0;font-size:14px;line-height:1.62;color:var(--cz-ink)}
.cz-tags{margin:16px 0 0;display:flex;gap:7px;flex-wrap:wrap}
.cz-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);
}
/* --- Dải peering dưới card --- */
.cz-peering{
max-width:1360px;margin:34px auto 0;padding:0 44px 74px;
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
font-size:13.5px;color:var(--cz-ink);
}
.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);
}
/* ==============================================================
5. KHỐI DỊCH VỤ CÓ TAB
Giữ nguyên cấu trúc đang có trên website: tiêu đề + 5 tab nối bằng
dấu "+", nội dung 2 cột (chữ bên trái, minh hoạ bên phải),
6 gạch đầu dòng chia 2 cột và nút "Xem thêm".
============================================================== */
.cz-services{background:#F2FAFF;font-family:var(--cz-font);padding:8px 0 84px}
.cz-svc-wrap{max-width:1360px;margin:0 auto;padding:0 44px}
/* --- Tiêu đề khối --- */
.cz-svc-head{text-align:center;max-width:820px;margin:0 auto 34px}
.cz-svc-head h2{
margin:0;font-size:clamp(21px,2vw,28px);font-weight:800;line-height:1.3;
color:var(--cz-text);text-transform:uppercase;letter-spacing:.2px;
}
.cz-svc-head 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-svc-head p{margin:16px 0 0;font-size:15.5px;line-height:1.6;color:var(--cz-ink)}
/* --- Hàng tab --- */
.cz-tabs{
display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap;
margin-bottom:26px;
}
.cz-plus{
display:flex;align-items:center;font-size:20px;font-weight:400;
color:rgba(1,47,127,.32);user-select:none;
}
.cz-tab{
display:flex;align-items:center;gap:11px;cursor:pointer;white-space:nowrap;
padding:14px 22px;border-radius:12px;font-family:inherit;
font-size:15px;font-weight:700;color:var(--cz-text);
background:#fff;border:1.5px solid rgba(36,161,255,.28);transition:.26s;
}
.cz-tab svg{width:22px;height:22px;color:var(--cz-blue);transition:.26s;flex:0 0 auto}
.cz-tab:hover{border-color:var(--cz-blue);transform:translateY(-2px)}
.cz-tab.is-on{
color:#fff;border-color:transparent;
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));
box-shadow:0 12px 30px rgba(36,161,255,.32);
}
.cz-tab.is-on svg{color:#fff}
/* --- Khung nội dung tab --- */
.cz-panels{
background:#fff;border-radius:22px;padding:44px 46px;
border:1px solid rgba(1,47,127,.07);
box-shadow:0 20px 60px rgba(1,32,79,.10),0 2px 6px rgba(1,32,79,.04);
}
.cz-panel{display:none;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px;align-items:center}
.cz-panel.is-on{display:grid;animation:czFade .35s ease}
@keyframes czFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cz-panel h3{
margin:0;font-size:clamp(18px,1.55vw,22px);line-height:1.42;
font-weight:700;color:var(--cz-text);
}
.cz-panel>div>p{margin:14px 0 0;font-size:14.5px;line-height:1.72;color:var(--cz-ink)}
/* 6 gạch đầu dòng chia 2 cột, giữ đúng format cũ */
.cz-checks{
margin:24px 0 0;padding:22px 0 0;list-style:none;
border-top:1px solid rgba(1,47,127,.09);
display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;
}
.cz-checks li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#2C2C2A}
.cz-checks svg{width:19px;height:19px;flex:0 0 auto;color:var(--cz-blue);margin-top:1px}
/* Tab Phần mềm: 3 sản phẩm thay cho danh sách tick */
.cz-products{margin:24px 0 0;padding:22px 0 0;border-top:1px solid rgba(1,47,127,.09);display:grid;gap:14px}
.cz-prod{
display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:14px;
background:rgba(36,161,255,.045);border:1px solid rgba(36,161,255,.13);
text-decoration:none;transition:.26s;
}
.cz-prod:hover{background:rgba(36,161,255,.09);transform:translateX(4px)}
.cz-prod .cz-prod-ic{
width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
}
.cz-prod .cz-prod-ic svg{width:19px;height:19px}
.cz-prod b{display:block;font-size:14.5px;color:var(--cz-text)}
.cz-prod span{display:block;margin-top:3px;font-size:13px;line-height:1.6;color:var(--cz-ink)}
/* Nút Xem thêm */
.cz-more{
display:inline-flex;align-items:center;gap:9px;margin-top:28px;
padding:13px 26px;border-radius:11px;text-decoration:none;
font-size:14.5px;font-weight:700;color:#fff;
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));
box-shadow:0 12px 30px rgba(36,161,255,.30);transition:.28s;
}
.cz-more:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(36,161,255,.40)}
.cz-more svg{width:17px;height:17px}
/* Minh hoạ bên phải */
.cz-art{display:grid;place-items:center}
.cz-art svg{width:100%;max-width:430px;height:auto}
/* --- Chuyển động cho 5 hình minh hoạ ---------------------------------
Tất cả bằng CSS thuần, không dùng thư viện. Chỉ chạy ở tab đang mở
(tab ẩn dùng display:none nên trình duyệt không tốn tài nguyên vẽ). */
.cz-art svg *{transform-box:fill-box;transform-origin:center}
@keyframes czFloat{50%{transform:translateY(-14px)}}
@keyframes czArrow{0%,100%{transform:translateY(4px);opacity:.55}50%{transform:translateY(-10px);opacity:1}}
@keyframes czBlink{0%,100%{opacity:.18}50%{opacity:1}}
@keyframes czDash{to{stroke-dashoffset:-48}}
@keyframes czSpin{to{transform:rotate(360deg)}}
@keyframes czPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
@keyframes czSweep{0%{opacity:0;transform:translateY(0)}12%,55%{opacity:.7}100%{opacity:0;transform:translateY(150px)}}
@keyframes czDraw{0%{stroke-dashoffset:44}35%,100%{stroke-dashoffset:0}}
@keyframes czBar{0%{transform:scaleX(.25);opacity:.25}35%,100%{transform:scaleX(1);opacity:1}}
@keyframes czGlow{0%,100%{opacity:.35}50%{opacity:.9}}
.cz-an-float{animation:czFloat 3.6s ease-in-out infinite}
.cz-an-arrow{animation:czArrow 2.6s ease-in-out infinite}
.cz-an-blink{animation:czBlink 1.8s ease-in-out infinite}
.cz-an-flow{stroke-dasharray:8 10;animation:czDash 1.1s linear infinite}
.cz-an-spin{animation:czSpin 16s linear infinite}
.cz-an-pulse{animation:czPulse 3.4s ease-in-out infinite}
.cz-an-sweep{animation:czSweep 2.8s ease-in-out infinite}
.cz-an-draw{stroke-dasharray:44;animation:czDraw 3.6s ease-in-out infinite}
.cz-an-bar{transform-origin:left center;animation:czBar 3.8s ease-in-out infinite}
.cz-an-glow{animation:czGlow 2.8s ease-in-out infinite}
/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion:reduce){
.cz-art svg *{animation:none !important}
.cz-panel.is-on{animation:none}
}
/* ==============================================================
8. HẠ TẦNG TRUNG TÂM DỮ LIỆU
Khối duy nhất trong trang dùng nền xanh đậm — tạo điểm ngắt thị giác
giữa chuỗi các khối nền sáng phía trên và phía dưới.
============================================================== */
.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%);
}
/* Lưới kỹ thuật + quầng sáng nền */
.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-kicker{
display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.cz-dc-head h2{
margin:16px 0 0;font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.6px;
text-transform:uppercase;text-shadow:0 4px 26px rgba(0,20,60,.35);
}
.cz-dc-head p{
margin:14px 0 0;font-size:15.5px;line-height:1.7;color:rgba(240,250,255,.92);
}
.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}
/* Cột phải: danh sách 6 Data Center + 4 thông tin nhanh xếp dọc trong cùng một cột.
Trước đây 4 thông tin nằm full-width bên dưới nên khối bị dài; đưa sang phải
giúp tận dụng chiều cao của bản đồ và rút ngắn chiều dọc của cả khối. */
.cz-dc-side{display:grid;align-content:center;min-width:0}
/* --- Bản đồ (ảnh hạ tầng Cloudzone) --- */
/* Ảnh PNG nền trong suốt — đặt trực tiếp lên nền xanh, không panel, không viền */
.cz-map-wrap{max-width:580px;margin:0 auto;padding:0;background:none;border:0}
.cz-map-in{position:relative;aspect-ratio:1421/1627}
.cz-map-img{display:block;width:100%;height:100%;object-fit:contain}
/* Lớp hiệu ứng phủ đúng khung ảnh */
.cz-map-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Đường kết nối giữa 6 Data Center — nét đứt chạy liên tục */
.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));
}
/* 6 điểm vàng nhấp nháy lệch pha nhau */
.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);
}
/* Vòng sóng lan ra từ mỗi điểm */
.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);
}
@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-vn{fill:rgba(255,255,255,.20);stroke:rgba(255,255,255,.88);stroke-width:1.8;stroke-linejoin:round}
.cz-vn-glow{
fill:none;stroke:#CFF3FF;stroke-width:2.4;stroke-linejoin:round;opacity:.5;
filter:drop-shadow(0 0 10px rgba(190,240,255,.9));
stroke-dasharray:1400;animation:czTrace 9s ease-in-out infinite;
}
@keyframes czTrace{0%{stroke-dashoffset:1400}55%,100%{stroke-dashoffset:0}}
/* Đường kết nối nội bộ giữa các Data Center */
.cz-dcline{
fill:none;stroke:#EAFBFF;stroke-width:2.2;stroke-linecap:round;
stroke-dasharray:9 13;filter:drop-shadow(0 0 7px rgba(200,245,255,.9));
animation:czDash 1.3s linear infinite;
}
/* Điểm thành phố */
/* Hạ tầng cũ ở Hà Nội / Đà Nẵng — để mờ */
.cz-dcm.is-off{opacity:.34}
.cz-dcm.is-off .cz-dcm-dot{fill:rgba(255,255,255,.75);filter:none}
.cz-dcm.is-off .cz-dcm-lb{fill:rgba(255,255,255,.8);stroke:rgba(0,50,110,.3)}
/* Cụm 6 Data Center tại TP.HCM */
.cz-mesh path{fill:none;stroke:rgba(255,225,140,.75);stroke-width:1.3;
stroke-dasharray:5 7;animation:czDash 1.5s linear infinite}
.cz-node circle{
fill:#FFD84D;
filter:drop-shadow(0 0 9px rgba(255,216,77,.95)) drop-shadow(0 0 18px rgba(255,216,77,.55));
animation:czBlink 2.2s ease-in-out infinite;
}
.cz-node circle:nth-child(2){animation-delay:-.4s}
.cz-node circle:nth-child(3){animation-delay:-.8s}
.cz-node circle:nth-child(4){animation-delay:-1.2s}
.cz-node circle:nth-child(5){animation-delay:-1.6s}
.cz-node circle:nth-child(6){animation-delay:-2s}
.cz-dcm-lb2{
font-size:11px;font-weight:600;fill:rgba(255,255,255,.85);font-family:var(--cz-font);
paint-order:stroke;stroke:rgba(0,50,110,.4);stroke-width:3px;stroke-linejoin:round;
}
.cz-dcm{cursor:pointer}
.cz-dcm-dot{fill:#fff;filter:drop-shadow(0 4px 14px rgba(0,30,70,.45));transition:.28s}
.cz-dcm-lb{
font-size:12.5px;font-weight:700;fill:#fff;pointer-events:none;
font-family:var(--cz-font);paint-order:stroke;
stroke:rgba(0,50,110,.45);stroke-width:3px;stroke-linejoin:round;
}
.cz-dcm-wave{
fill:none;stroke:#fff;stroke-width:2;opacity:0;
transform-box:fill-box;transform-origin:center;
animation:czWave 2.8s ease-out infinite;
}
@keyframes czWave{0%{transform:scale(.55);opacity:.85}100%{transform:scale(2.1);opacity:0}}
.cz-dcm.is-on .cz-dcm-dot,.cz-dcm:hover .cz-dcm-dot{
fill:#FFE175;filter:drop-shadow(0 0 16px rgba(255,225,117,.95))
}
.cz-isl circle{fill:rgba(255,255,255,.7)}
.cz-isl text{font-size:8.5px;fill:rgba(255,255,255,.7);font-style:italic;font-family:var(--cz-font)}
/* --- Danh sách 6 Data Center --- */
.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-dcf>div>span{display:block;margin-top:5px;font-size:12.8px;line-height:1.55;color:rgba(232,246,255,.84)}
/* --- 4 thông tin nhanh: xếp 2×2 ngay dưới danh sách DC ở cột phải --- */
.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 svg{width:20px;height:20px;flex:0 0 auto;color:#FFD84D;margin-top:2px}
.cz-dcq b{display:block;font-size:14px;font-weight:700;color:#fff;line-height:1.35}
.cz-dcq span{display:block;margin-top:3px;font-size:12.3px;line-height:1.5;color:rgba(226,244,255,.8)}
/* ==============================================================
9. VÌ SAO CHỌN CLOUDZONE — dạng đóng/mở
8 mục xếp 2 cột. Khi đóng chỉ hiện tiêu đề + 1 dòng tóm tắt nên
khối rất gọn; bấm vào mục nào thì mở đủ nội dung gốc của mục đó.
============================================================== */
/* Nền trắng xanh */
.cz-why{
background:linear-gradient(180deg,#FFFFFF 0%,#F6FBFF 46%,#EDF6FF 100%);
/* padding dưới giảm từ 150px → 88px vì không còn quả cầu lưới ở nền */
font-family:var(--cz-font);padding:78px 0 88px;
}
.cz-why-wrap{max-width:1300px;margin:0 auto;padding:0 44px}
.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 svg{width:21px;height:21px}
.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);
}
/* Dấu cộng / trừ */
.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-b b{color:var(--cz-text);font-weight:700}
.cz-why-b a{color:#0B6FD0;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(36,161,255,.4)}
.cz-why-b ul{margin:0 0 12px;padding:0 20px 0 40px;display:grid;gap:8px}
.cz-why-b li{font-size:14px;line-height:1.7;color:var(--cz-ink)}
.cz-why-b li::marker{color:var(--cz-blue)}
/* ==============================================================
10. HỆ SINH THÁI DỊCH VỤ
Lõi đám mây ở giữa, 11 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.
============================================================== */
.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;
}
.cz-eco-ic svg{width:20px;height:20px}
.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;width:15px;height:15px;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-chips{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}
.cz-eco-chips b{
display:inline-block;padding:4px 10px;border-radius:999px;
font-size:11.5px;font-weight:600;color:#0B6FD0;
background:rgba(36,161,255,.09);border:1px solid rgba(36,161,255,.18);
}
/* --- 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}
.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;
}
.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;
}
/* ==============================================================
11. SLIDE BANNER + Ô LIÊN HỆ
Trái: băng chuyền banner tự chạy. Phải: ô cố định mang logo và
nút liên hệ Zalo — luôn hiện, không trôi theo slide.
============================================================== */
.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;
}
/* --- Băng chuyền --- */
.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; /* đúng tỉ lệ file banner nên ảnh không bị cắt */
}
.cz-bn-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* Nút chuyển + chấm chỉ số */
.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 svg{width:20px;height:20px}
.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}
/* --- Ô liên hệ bên phải --- */
.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;width:100%;
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 svg{width:19px;height:19px}
/* ==============================================================
12. RESPONSIVE
============================================================== */
@media (max-width:1180px){
.cz-menu{display:none}
.cz-cards{grid-template-columns:1fr;margin-top:132px}
.cz-panel{grid-template-columns:1fr;gap:30px}
.cz-art{order:2}
.cz-art svg{max-width:360px}
.cz-pt-panel{grid-template-columns:1fr;gap:26px}
.cz-pt-art{order:2}
.cz-why-grid{grid-template-columns:1fr;gap:14px}
/* Hệ sinh thái: lõi lên trên, các nhóm dịch vụ xếp 2 cột bên dưới */
.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}
.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}
.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;gap:20px}
.cz-map-wrap{max-width:520px}
.cz-feat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
.cz-feat-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
.cz-topbar{display:none}
.cz-nav{padding:16px 20px}
.cz-logo-img{height:34px}
.cz-inner{padding:34px 20px 0}
/* Mobile: video phóng to nằm dưới khối chữ, lớp phủ đổi sang chiều dọc */
.cz-hero video{width:126%;right:-13%;bottom:104px}
.cz-scrim{
background:linear-gradient(180deg,rgba(0,52,110,.78) 0%,rgba(0,66,138,.58) 42%,
rgba(0,80,164,.40) 74%,rgba(0,58,120,.34) 100%);
}
.cz-h1{font-size:clamp(27px,7.4vw,36px)}
.cz-btn{flex:1 1 auto;justify-content:center}
.cz-cards{padding:0 20px;gap:16px;margin-top:104px}
.cz-peering{padding:0 20px 54px}
.cz-svc-wrap{padding:0 20px}
.cz-panels{padding:28px 22px;border-radius:18px}
.cz-checks{grid-template-columns:1fr;gap:12px}
/* Hàng tab chuyển sang cuộn ngang, bỏ dấu "+" cho gọn */
.cz-tabs{
flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:8px;
padding-bottom:8px;margin:0 -20px 22px;padding-left:20px;padding-right:20px;
scrollbar-width:none;
}
.cz-tabs::-webkit-scrollbar{display:none}
.cz-plus{display:none}
.cz-tab{padding:11px 16px;font-size:14px}
.cz-services{padding-bottom:60px}
.cz-feat-wrap{padding:0 20px}
.cz-feat-box{padding:16px;border-radius:20px}
.cz-featured{padding-bottom:60px}
.cz-partner{padding:52px 0 64px}
.cz-pt-wrap{padding:0 20px}
.cz-pt-box{padding:24px 20px;border-radius:18px}
.cz-pt-tabs{gap:18px}
.cz-pt-tab{padding:6px 4px 18px}
.cz-pt-tab .ic{width:52px;height:52px;border-radius:15px}
.cz-pt-tab .ic svg{width:26px;height:26px}
.cz-pt-tab b{font-size:15px}
.cz-pt-cta{width:100%;justify-content:center}
.cz-why{padding:52px 0 60px}
.cz-eco{padding:52px 0 56px}
.cz-eco-wrap{padding:0 12px}
.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}
.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}
.cz-bn-cta a{padding:10px 16px;font-size:13.5px}
.cz-eco-wrap{padding:0 20px}
.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-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:640px){
/* Màn hình hẹp: ẩn 4 icon liên hệ để menu không tràn, giữ lại nút Đăng nhập.
Người dùng vẫn có nút gọi hotline ngay trong hero. */
.cz-actions .cz-icon{display:none}
.cz-nav{gap:12px}
.cz-login{padding:9px 16px;font-size:12.5px}
}
/* ==============================================================
13. 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}
/* Băng chuyền cảm nhận khách hàng — tự chạy sang phải, dừng khi rê chuột,
có 2 nút mũi trái/phải. Cơ chế: JS nhân đôi thẻ rồi cuộn ngang liên tục
(dùng scrollLeft thay vì animation để 2 nút và thao tác kéo tay hoạt động).
Chưa có JS → vẫn là thanh cuộn ngang bình thường, không mất nội dung. */
.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;
}
/* đẩy khối tên xuống đáy để các thẻ cân nhau */
.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{width:30px;height:30px;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;
}
/* Ảnh chân dung khách hàng lấy từ cloudzone.vn */
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)}
/* 2 nút điều hướng của băng chuyền cảm nhận */
.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 svg{width:18px;height:18px}
/* --- Đối tác tiêu biểu --- */
.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{
margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:800;color:var(--cz-text);letter-spacing:-.4px;
}
.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;font-size:15px;color:var(--cz-ink)}
.cz-pt2-sub b{color:#0B6FD0;font-weight:800}
/* Dải logo chạy vô tận */
.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}
/* Logo đối tác: để xám nhạt cho đồng bộ, rê chuột thì lên màu thật */
/* Logo giữ đúng màu thật; rê chuột chỉ phóng nhẹ cho biết là bấm được */
.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-tm-row.is-run .cz-tm-track{animation-duration:40s}
.cz-pt2{padding:48px 0 56px}
.cz-pt2-stats{grid-template-columns:1fr 1fr;gap:22px}
.cz-pn{min-width:140px;height:64px}
}
/* ==============================================================
14. TIN TỨC + DẢI CTA + FOOTER
============================================================== */
.cz-nw,.cz-cta,.cz-ft,.cz-nw *,.cz-cta *,.cz-ft *{box-sizing:border-box}
.cz-nw{background:#fff;font-family:var(--cz-font);padding:70px 0 58px}
.cz-nw-wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.cz-nw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.cz-nw-kicker{
display:inline-block;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
background:rgba(36,161,255,.10);color:#0B6FD0;border:1px solid rgba(36,161,255,.18);
}
.cz-nw-head h2{
margin:12px 0 0;font-size:clamp(24px,2.6vw,34px);font-weight:800;
color:var(--cz-text);letter-spacing:-.5px;
}
.cz-nw-all{
flex:0 0 auto;font-size:14px;font-weight:700;color:#0B6FD0;text-decoration:none;
border-bottom:2px solid rgba(36,161,255,.35);padding-bottom:2px;transition:.24s;
}
.cz-nw-all:hover{color:var(--cz-blue);border-color:var(--cz-blue)}
.cz-nw-track{
display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:4px 2px 20px;scrollbar-width:none;
}
.cz-nw-track::-webkit-scrollbar{display:none}
.cz-nw-card{
flex:0 0 clamp(268px,31%,400px);scroll-snap-align:start;text-decoration:none;
background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:16px;overflow:hidden;
box-shadow:0 8px 24px rgba(1,32,79,.07);transition:.3s;display:block;
}
.cz-nw-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(36,161,255,.20);
border-color:rgba(36,161,255,.32)}
/* Ảnh bài viết — hiện là ô giữ chỗ, thay bằng ![]()
khi triển khai */
.cz-nw-thumb{display:grid;place-items:center;aspect-ratio:16/9;position:relative;overflow:hidden}
/* Ảnh bài viết lấy từ media.cloudzone.vn; nền gradient vẫn giữ làm lớp dự phòng */
.cz-nw-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.cz-nw-card:hover .cz-nw-thumb img{transform:scale(1.06)}
.cz-nw-g1{background:linear-gradient(135deg,#0B6FD0,var(--cz-blue))}
.cz-nw-g2{background:linear-gradient(135deg,#00468C,#1789EA)}
.cz-nw-g3{background:linear-gradient(135deg,#1789EA,#5FC0FF)}
.cz-nw-wm{width:44%;height:auto}
.cz-nw-meta{display:flex;align-items:center;gap:10px;padding:16px 18px 0;flex-wrap:wrap}
.cz-nw-meta b{
font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;
background:rgba(36,161,255,.10);color:#0B6FD0;
}
.cz-nw-meta em{font-style:normal;font-size:12.5px;color:var(--cz-ink)}
.cz-nw-card h3{
margin:12px 18px 20px;font-size:16px;font-weight:700;line-height:1.5;color:var(--cz-text);
}
.cz-nw-nav{display:flex;gap:10px;justify-content:center}
.cz-nw-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-nw-nav button:hover{background:#0B6FD0;color:#fff;border-color:transparent}
.cz-nw-nav svg{width:18px;height:18px}
/* --- Dải CTA --- */
.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%);
}
/* Hiệu ứng hào quang: hai nguồn sáng ở hai bên, vòng sáng lan ra từ mép trái/mép phải.
Vùng giữa (nơi có tiêu đề + nút) được mask trong suốt nên vòng sáng không chạy sau nội dung. */
.cz-cta-fx{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
/* chỉ mờ dần ở hai đầu dải để vòng sáng không bị cắt cụt */
-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%);
}
/* Một tâm phát sáng ở giữa dải */
.cz-cta-src{position:absolute;top:50%;left:50%;width:0;height:0}
/* Vòng hào quang lớn: bắt đầu đã rộng hơn khối nội dung nên dải sáng
luôn nằm ngoài tiêu đề/nút, chỉ thấy hai cánh trái–phải lan ra. */
.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}
/* Vòng thứ 3 dùng xanh cyan nhạt (trước đây vàng kem nên nền bị ngả vàng) */
.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}
}
/* Hai quầng sáng ở hai bên, phập phồng ngược pha nhau */
.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 h2{
margin:0;font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.5px;
text-shadow:0 4px 26px rgba(0,20,60,.32);
}
.cz-cta p{margin:16px 0 0;font-size:15.5px;line-height:1.7;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)}
/* --- Footer --- */
.cz-ft{background:#0C2036;color:rgba(214,230,246,.82);font-family:var(--cz-font);padding:56px 0 0}
.cz-ft-wrap{
max-width:1340px;margin:0 auto;padding:0 44px;
display:grid;grid-template-columns:1.25fr .85fr 1.05fr 1.05fr;gap:38px;
}
.cz-ft-logo{width:190px;height:auto;display:block}
.cz-ft-slogan{
margin:18px 0 0;font-size:13px;font-weight:700;letter-spacing:.12em;color:#fff;
}
.cz-ft-info{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.cz-ft-info li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6}
.cz-ft-info svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--cz-blue)}
.cz-ft a{color:inherit;text-decoration:none;transition:.22s}
.cz-ft a:hover{color:#5FC0FF}
.cz-ft-badges{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.cz-ft-badges span{
font-size:9.5px;font-weight:700;line-height:1.35;text-align:center;letter-spacing:.04em;
padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.16);color:rgba(226,240,255,.8);
}
.cz-ft-col h4{
margin:0 0 18px;font-size:15.5px;font-weight:700;color:#fff;letter-spacing:.2px;
}
.cz-ft-col ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.cz-ft-col li{font-size:13.5px;line-height:1.55}
/* Ô nhúng fanpage */
.cz-ft-fb{background:#fff;border-radius:10px;overflow:hidden}
.cz-ft-fb-h{display:flex;gap:10px;align-items:center;padding:12px}
.cz-ft-fb-av{
width:40px;height:40px;border-radius:8px;flex:0 0 auto;
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));
}
.cz-ft-fb-h b{display:block;font-size:14px;color:#1B2A3F}
.cz-ft-fb-h em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:#7A8899}
.cz-ft-fb-b{
padding:22px 12px;text-align:center;font-size:12px;color:#94A3B4;
border-top:1px dashed rgba(1,47,127,.18);background:#F7FAFD;
}
.cz-ft-soc{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.cz-ft-soc a{
font-size:12px;padding:7px 13px;border-radius:7px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
}
.cz-ft-soc a:hover{background:rgba(36,161,255,.28);border-color:rgba(95,192,255,.5)}
.cz-ft-bottom{
margin-top:44px;padding:22px 44px 26px;text-align:center;
border-top:1px solid rgba(255,255,255,.10);font-size:12.5px;line-height:1.9;
color:rgba(196,214,234,.7);
}
.cz-ft-bottom p{margin:0}
.cz-ft-bottom b{color:#fff}
@media (max-width:1180px){
.cz-ft-wrap{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:860px){
.cz-nw{padding:52px 0 44px}
.cz-nw-wrap{padding:0 20px}
.cz-nw-head{flex-direction:column;align-items:flex-start;gap:12px}
.cz-nw-card{flex:0 0 84%}
.cz-cta{padding:52px 0}
.cz-cta-btns a{flex:1 1 auto}
.cz-ft{padding-top:44px}
.cz-ft-wrap{grid-template-columns:1fr;gap:30px;padding:0 20px}
.cz-ft-bottom{padding:20px 20px 24px}
}
/* ==============================================================
15. CHUẨN HOÁ TYPOGRAPHY TOÀN TRANG
Đặt cuối cùng để thống nhất mọi tiêu đề khối và cỡ chữ nội dung,
thay cho các khai báo rời rạc ở từng khối phía trên.
============================================================== */
/* --- Tiêu đề khối (H2): một cỡ, một độ đậm, một kiểu chữ hoa --- */
.cz-svc-head h2,.cz-pt-head h2,.cz-dc-head h2,.cz-pt2-h,.cz-nw-head h2,.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;
/* Chia dòng cân đối, tránh rớt 1 từ lẻ xuống dòng cuối */
text-wrap:balance;
-webkit-hyphens:none;hyphens:none;
}
/* Tiêu đề khối dịch vụ dài hơn → nới khung để tiêu đề không bị ngắt dòng xấu */
.cz-svc-head{max-width:1000px}
/* Gạch chân gradient dùng chung cho mọi tiêu đề khối */
.cz-svc-head h2::after,.cz-pt-head h2::after,.cz-dc-head h2::after,
.cz-pt2-h::after,.cz-nw-head h2::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);
}
/* Trên nền xanh đậm thì gạch chân đổi sang vàng–cyan cho nổi */
.cz-dc-head h2::after,.cz-cta h2::after{
background:linear-gradient(90deg,#FFE175,#7FE9FF);
}
/* Khối tin tức căn lề trái nên gạch chân cũng căn trái */
.cz-nw-head h2::after{margin-left:0}
/* Hai khối có chip nhỏ phía trên tiêu đề: chừa lại khoảng cách */
.cz-dc-head h2{margin-top:16px}
.cz-nw-head h2{margin-top:12px}
/* --- Đoạn mô tả ngay dưới tiêu đề khối: 15.5px --- */
.cz-svc-head p,.cz-dc-head p,.cz-cta p,.cz-pt-lead,.cz-pt2-sub{
font-size:15.5px;line-height:1.7;
}
/* --- Chữ mô tả trong thẻ: 14px --- */
.cz-card p,.cz-fcard p,.cz-panel>div>p,.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}
/* --- Tiêu đề thẻ (H3): 17px, trừ tiêu đề lớn trong tab dịch vụ --- */
.cz-card h3,.cz-fcard h3,.cz-nw-card h3{font-size:17px;font-weight:700;line-height:1.45}
.cz-panel h3{font-size:clamp(19px,1.6vw,23px);line-height:1.4}
/* --- Nền động cho khối "Vì sao chọn Cloudzone" --- */
.cz-why{position:relative;overflow:hidden;isolation:isolate}
.cz-why-wrap{position:relative;z-index:2}
.cz-why .cz-svc-head{position:relative;z-index:2}
.cz-why-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Hai vệt sáng phập phồng */
.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}}
/* (Đã bỏ quả cầu lưới sọc quay chậm ở nền) */
/* Mây dữ liệu trôi ngang */
.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))}}
/* (Đã bỏ 3 tia sáng chạy ngang phía sau — gây rối mắt) */
@media (max-width:860px){
.cz-why-cloud.c1{width:130px}
}
@media (prefers-reduced-motion:reduce){
.cz-why-bg *,.cz-cta-fx *{animation:none !important}
}
/* ==============================================================
16. HIỆU ỨNG XUẤT HIỆN KHI CUỘN TRANG (scroll reveal)
Chỉ kích hoạt khi JavaScript chạy được (class .cz-anim do JS gắn
vào ). Nếu JS bị chặn, mọi nội dung vẫn hiển thị bình thường.
============================================================== */
html.cz-anim [data-rv]{
opacity:0;
transform:translate3d(0,38px,0);
/* 1,15s — chậm vừa đủ để thấy rõ chuyển động khi cuộn */
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;
}
/* Các biến thể hướng vào */
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}
/* Trạng thái đã hiện */
html.cz-anim [data-rv].is-in{opacity:1;transform:none;will-change:auto}
/* Tôn trọng thiết lập giảm chuyển động của người dùng */
@media (prefers-reduced-motion:reduce){
html.cz-anim [data-rv]{opacity:1 !important;transform:none !important;transition:none !important}
}
/* ==============================================================
17. TRANG CLOUD SERVER — CSS riêng cho trang này
============================================================== */
/* --- Hero: chữ căn giữa + video trong khung nổi (khác format trang chủ) --- */
.cz-hero{
/* overflow:visible + bỏ isolation để khung video nhô xuống khối kế tiếp không bị cắt */
overflow:visible;isolation:auto;
min-height:auto;padding-bottom:0;
/* Nền hero: ảnh gốc, chỉ hiệu chỉnh nhẹ sắc độ về đúng tone thương hiệu #24A1FF.
Nền sáng → toàn bộ chữ trong hero chuyển sang navy (xem khối "HERO NỀN SÁNG"). */
color:#0A2A5E;
background-color:#EAF4FF;
background-image: url("hero-bg.webp");
background-size:cover;
background-position:center bottom;
background-repeat:no-repeat;
}
/* --- Lớp hiệu ứng: các vệt sáng trôi theo đường cong của nền --- */
.cz-hero-fx{
position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
/* Nền sáng ở góc trên–trái, đậm dần xuống dưới–phải: chỉ cho vệt sáng
hiện trên vùng xanh (nơi có tương phản), tắt dần ở vùng trắng. */
-webkit-mask-image:radial-gradient(54% 34% at 50% 24%,
rgba(0,0,0,.05) 0%,rgba(0,0,0,.42) 62%,#000 100%);
mask-image:radial-gradient(54% 34% at 50% 24%,
rgba(0,0,0,.05) 0%,rgba(0,0,0,.42) 62%,#000 100%);
}
.cz-hero-fx svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Vệt sáng chạy dọc theo đường cong */
.cz-fx-run{
fill:none;stroke:#FFFFFF;stroke-linecap:round;
vector-effect:non-scaling-stroke; /* độ dày vệt không đổi khi ảnh nền phóng to */
filter:url(#czGlow);
stroke-dasharray:var(--dash) 9999;
animation:czFlow var(--dur) linear infinite;
animation-delay:var(--delay);
}
@keyframes czFlow{
0% {stroke-dashoffset:var(--dash);opacity:0}
10% {opacity:.95}
74% {opacity:.95}
100%{stroke-dashoffset:var(--end);opacity:0}
}
@media (max-width:860px){
.cz-fx-run:nth-of-type(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){
.cz-fx-run{animation:none;opacity:.3;stroke-dasharray:none}
}
/* --- Bảng giá --- */
.cz-pr,.cz-pr *{box-sizing:border-box}
.cz-pr{background:#F2FAFF;font-family:var(--cz-font);padding:8px 0 84px}
.cz-pr-wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.cz-pr-kicker{
display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;
background:rgba(36,161,255,.10);color:#0B6FD0;
font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.cz-pr-box{
margin-top:8px;background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:22px;
box-shadow:0 14px 40px rgba(1,32,79,.08);overflow:hidden;
}
.cz-pr-scroll{overflow-x:auto;scrollbar-width:thin}
.cz-pr-hint{display:none}
.cz-pr-tb{width:100%;border-collapse:collapse;min-width:900px}
.cz-pr-tb th,.cz-pr-tb td{padding:16px 18px;text-align:center;white-space:nowrap}
.cz-pr-tb thead th{
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
font-size:12.6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.cz-pr-tb th:first-child,.cz-pr-tb td:first-child{text-align:left;padding-left:26px}
.cz-pr-tb tbody tr{border-top:1px solid rgba(1,47,127,.07);transition:.24s}
.cz-pr-tb tbody tr:hover{background:rgba(36,161,255,.06)}
.cz-pr-name{font-size:15.5px;font-weight:700;color:var(--cz-text)}
.cz-pr-tag{
display:inline-block;margin-left:9px;padding:3px 9px;border-radius:6px;vertical-align:2px;
background:linear-gradient(135deg,#FFD84D,#FFB300);color:#5A3B00;
font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.cz-pr-tb td{font-size:14.4px;color:var(--cz-ink)}
.cz-pr-tb .cz-pr-cell b{font-weight:700;color:var(--cz-text)}
.cz-pr-price b{font-size:19px;font-weight:800;color:#0B6FD0;letter-spacing:-.4px}
.cz-pr-price span{display:block;margin-top:2px;font-size:12px;color:var(--cz-ink)}
.cz-pr-buy{
display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:10px;
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
font-size:13.5px;font-weight:700;text-decoration:none;transition:.26s;white-space:nowrap;
}
.cz-pr-buy:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(36,161,255,.34)}
.cz-pr-tb tr.is-hot{background:rgba(255,216,77,.09)}
/* Ghi chú ngắn nằm ngay dưới tên gói */
.cz-pr-note{
display:block;margin-top:4px;font-size:12.6px;font-weight:500;line-height:1.45;
color:var(--cz-ink);font-style:italic;
}
.cz-pr-foot{
display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
padding:18px 26px;background:#F7FBFF;border-top:1px solid rgba(1,47,127,.07);
}
.cz-pr-foot em{font-style:normal;font-size:13.4px;color:var(--cz-ink)}
.cz-pr-foot a{color:#0B6FD0;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(36,161,255,.4)}
/* Thông số chung của mọi gói */
/* Gộp toàn bộ thông số vào MỘT khối duy nhất, các ô ngăn nhau bằng đường kẻ mảnh */
.cz-pr-specs{
margin-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:18px;
box-shadow:0 6px 18px rgba(1,32,79,.05);overflow:hidden;
}
.cz-prs{
padding:17px 20px;
border-right:1px solid rgba(1,47,127,.08);
border-bottom:1px solid rgba(1,47,127,.08);
}
/* Bỏ kẻ ở cột cuối và hàng cuối — lưới 4 cột */
.cz-prs:nth-child(4n){border-right:0}
.cz-prs:nth-last-child(-n+4){border-bottom:0}
.cz-prs em{display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:#0B6FD0}
.cz-prs b{display:block;margin-top:5px;font-size:14.2px;font-weight:700;color:var(--cz-text);line-height:1.5}
/* --- 6 ưu điểm Cloud Server --- */
.cz-adv,.cz-adv *{box-sizing:border-box}
.cz-adv{background:#fff;font-family:var(--cz-font);padding:74px 0 80px}
.cz-adv-wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.cz-adv-grid{margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cz-advc{
position:relative;background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:18px;
padding:26px 24px;box-shadow:0 8px 26px rgba(1,32,79,.06);transition:.3s;
}
.cz-advc:hover{transform:translateY(-5px);border-color:rgba(36,161,255,.34);
box-shadow:0 20px 46px rgba(36,161,255,.16)}
.cz-advc .cz-ico{
width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
background:linear-gradient(135deg,rgba(11,111,208,.12),rgba(36,161,255,.18));color:#0B6FD0;
}
.cz-advc .cz-ico svg{width:24px;height:24px}
.cz-advc h3{margin:16px 0 0;font-size:17px;font-weight:700;color:var(--cz-text);line-height:1.45}
.cz-advc p{margin:9px 0 0;font-size:14px;line-height:1.75;color:var(--cz-ink)}
@media (max-width:1180px){
.cz-pr-specs{grid-template-columns:1fr 1fr}
.cz-prs:nth-child(4n){border-right:1px solid rgba(1,47,127,.08)}
.cz-prs:nth-child(2n){border-right:0}
.cz-prs:nth-last-child(-n+4){border-bottom:1px solid rgba(1,47,127,.08)}
.cz-prs:nth-last-child(-n+2){border-bottom:0}
.cz-adv-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
.cz-inner{padding:34px 20px 0;text-align:center}
.cz-hvid{width:calc(100% - 28px);margin:26px auto -64px;padding:7px;border-radius:18px}
.cz-hvid video{border-radius:12px}
.cz-cards{margin-top:104px}
.cz-pr-wrap,.cz-adv-wrap{padding:0 20px}
.cz-pr{padding-bottom:56px}
.cz-pr-hint{
display:block;margin:0;padding:12px 18px 0;font-size:12.6px;font-style:italic;
color:var(--cz-ink);text-align:right;
}
.cz-adv{padding:52px 0 56px}
.cz-adv-grid{grid-template-columns:1fr}
.cz-pr-specs{grid-template-columns:1fr}
.cz-prs{border-right:0;border-bottom:1px solid rgba(1,47,127,.08)}
.cz-prs:last-child{border-bottom:0}
}
.cz-scrim{display:none} /* không cần lớp phủ vì video không làm nền */
.cz-inner{max-width:1000px;padding:52px 44px 0;text-align:center}
.cz-col{max-width:none}
.cz-h1{font-size:clamp(30px,3.9vw,52px)}
.cz-lead{margin:18px auto 0;max-width:740px}
.cz-ctas{justify-content:center}
/* Nhãn nhỏ phía trên tiêu đề */
.cz-kick{
display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
padding:7px 16px;border-radius:999px;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.36);
color:#fff;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.cz-kick svg{width:14px;height:14px}
/* Khung video nổi, nhô xuống khối kế tiếp */
.cz-hvid{
position:relative;z-index:12;max-width:1040px;width:calc(100% - 56px);
margin:42px auto -96px;padding:10px;
border-radius:26px;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.4);
box-shadow:0 44px 90px rgba(0,18,52,.5),inset 0 0 0 1px rgba(255,255,255,.08);
backdrop-filter:blur(4px);
}
.cz-hvid video{
/* huỷ mọi khai báo của video nền ở trang chủ (absolute + mask) để video nằm trong khung */
position:static;inset:auto;right:auto;bottom:auto;
-webkit-mask-image:none;mask-image:none;
/* aspect-ratio giữ đúng chiều cao khung ngay khi video chưa tải xong → không nhảy layout */
display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;
filter:url(#czSharpen) contrast(1.04) saturate(1.08);
}
/* Hàng card không chồng lên hero nữa mà nằm dưới khung video */
.cz-cards{margin-top:148px}
/* Hàng chip thông số ngay dưới nút hero */
.cz-hchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cz-hchips b{
font-size:12.8px;font-weight:700;color:#fff;padding:7px 14px;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
backdrop-filter:blur(6px);
}
/* ==============================================================
HERO NỀN SÁNG — chữ đen brand + điểm nhấn xanh thương hiệu #24A1FF
(không dùng navy đậm để tránh lệch màu thương hiệu; #24A1FF trên nền
trắng chỉ đạt ~2,8:1 nên chữ dùng màu đen #2C2C2A, xanh làm accent)
============================================================== */
/* Thanh trên */
.cz-topbar{
color:#5A5A55;
border-bottom:1px solid rgba(36,161,255,.24);
}
.cz-topbar a:hover{color:#24A1FF}
/* Logo: bản xanh thương hiệu */
.cz-logo-img{filter:none}
/* Menu chính */
.cz-menu a{color:#2C2C2A;opacity:.94}
.cz-menu a::after{background:linear-gradient(90deg,#24A1FF,transparent)}
.cz-menu a:hover{color:#24A1FF;opacity:1}
/* Nút tròn + nút đăng nhập */
.cz-icon{
background:rgba(255,255,255,.78);border:1px solid rgba(36,161,255,.38);
color:#24A1FF;box-shadow:0 4px 14px rgba(36,161,255,.14);
}
.cz-icon:hover{background:#fff;border-color:#24A1FF}
.cz-login{
background:rgba(255,255,255,.86);border:1px solid rgba(36,161,255,.5);color:#2C2C2A;
box-shadow:0 4px 14px rgba(36,161,255,.14);
}
.cz-login:hover{background:#fff;border-color:#24A1FF}
/* Nhãn nhỏ, tiêu đề, đoạn mô tả */
.cz-kick{
background:linear-gradient(135deg,#3AABFF,#24A1FF);
border:0;color:#fff;
box-shadow:0 8px 22px rgba(36,161,255,.34);
}
/* Nút CTA chính giữ màu vàng thương hiệu để làm điểm nhấn duy nhất trong hero */
.cz-h1{color:#2C2C2A;text-shadow:0 2px 18px rgba(255,255,255,.6)}
.cz-lead{color:#4C4C48;text-shadow:none}
.cz-lead b{color:#2C2C2A;font-weight:700}
/* Nút phụ (nút chính giữ nguyên vàng thương hiệu) */
.cz-btn-ghost{
background:rgba(255,255,255,.88);border:1px solid rgba(36,161,255,.45);color:#2C2C2A;
box-shadow:0 8px 24px rgba(36,161,255,.16);
}
.cz-btn-ghost svg{color:#24A1FF}
.cz-btn-ghost:hover{background:#fff;border-color:#24A1FF;transform:translateY(-3px)}
/* Chip thông số */
.cz-hchips b{
color:#2C2C2A;background:rgba(255,255,255,.80);
border:1px solid rgba(36,161,255,.30);box-shadow:0 4px 14px rgba(36,161,255,.10);
}
/* Bỏ khung video trong hero: chừa đáy cho hàng card chồng lên như thiết kế gốc */
.cz-hero{padding-bottom:206px}
.cz-cards{margin-top:-156px}
@media (max-width:1024px){
.cz-hero{padding-bottom:184px}
.cz-cards{margin-top:-140px}
}
@media (max-width:860px){
.cz-hero{padding-bottom:150px}
.cz-cards{margin-top:-112px}
}
/* Chuyển tiếp mềm từ đáy hero sang nền beige của khối bên dưới,
thay cho khung video trước đây che đường ranh giới này */
.cz-hero::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:170px;
z-index:2;pointer-events:none;
background:linear-gradient(180deg,
rgba(242,250,255,0) 0%,rgba(242,250,255,.35) 45%,
rgba(242,250,255,.82) 78%,#F2FAFF 100%);
}
/* Bỏ header (thanh trên + menu) trong hero: bù lại khoảng trống phía trên khối chữ */
.cz-inner{padding-top:104px}
@media (max-width:860px){ .cz-inner{padding-top:56px} }
/* ==============================================================
LIÊN KẾT CHÉO SANG SẢN PHẨM LIÊN QUAN (dưới bảng thông số chung)
============================================================== */
/* Dải nền trắng riêng cho khối liên kết chéo, có khoảng thở trên/dưới cân đối */
/* display:flow-root để margin âm của lưới thẻ không bị 'collapse' kéo cả nền beige lên */
.cz-xzone{background:#F2FAFF;padding:0 0 64px;display:flow-root}
.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;
}
/* Kéo lưới thẻ lên 20% chiều cao thẻ: phần trên đè nhẹ lên nền
khối "Thông số chung", phần còn lại nằm trên nền beige. */
@media (min-width:1300px){ .cz-xsell{margin-top:-26px} }
@media (min-width:901px) and (max-width:1299px){ .cz-xsell{margin-top:-31px} }
.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(180deg,#F8FCFF 0%,#EEF6FF 100%);
border:1px solid rgba(36,161,255,.22);
box-shadow:0 12px 30px rgba(8,70,140,.14);
transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s,background .28s;
}
.cz-xs:hover{
background:#fff;border-color:#24A1FF;
box-shadow:0 16px 38px rgba(18,110,205,.16);
transform:translateY(-3px);
}
/* Ô ảnh minh hoạ */
.cz-xs-ill{
grid-area:ill;
width:76px;height:76px;border-radius:16px;display:grid;place-items:center;
background:linear-gradient(158deg,#E6F3FF 0%,#D2E8FF 100%);
border:1px solid rgba(36,161,255,.20);
transition:transform .28s,background .28s;
}
.cz-xs:hover .cz-xs-ill{background:linear-gradient(158deg,#DDEEFF,#C4E0FF);transform:scale(1.05)}
.cz-xs-ill svg{width:44px;height:44px;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:#24A1FF;
}
.cz-xs-tx strong{display:block;margin-top:4px;font-size:16.5px;font-weight:800;color:var(--cz-text)}
.cz-xs-tx>span{display:block;margin-top:6px;font-size:13.6px;line-height:1.62;color:var(--cz-ink)}
.cz-xs-go{
grid-area:go;
width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
background:#24A1FF;color:#fff;transition:transform .28s,box-shadow .28s;
}
.cz-xs-go svg{width:18px;height:18px}
.cz-xs:hover .cz-xs-go{transform:translateX(4px);box-shadow:0 8px 18px rgba(36,161,255,.4)}
@media (max-width:900px){
.cz-xsell{grid-template-columns:1fr;margin-top:0}
.cz-xzone{padding-top:44px}
}
@media (max-width:560px){
.cz-xzone{padding:40px 0 46px}
.cz-xsell{padding:0 20px;gap:14px}
/* Màn hẹp: ảnh + chữ một hàng, mũi tên xuống góc dưới phải cho chữ rộng rãi */
.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 svg{width:32px;height:32px}
.cz-xs-tx strong{font-size:15.4px}
.cz-xs-go{width:34px;height:34px;justify-self:end}
}
/* ==============================================================
BẢNG GIÁ TRÊN ĐIỆN THOẠI — đổi từ bảng kéo ngang sang dạng thẻ
============================================================== */
@media (max-width:760px){
.cz-pr-hint{display:none} /* không còn phải kéo ngang */
.cz-pr-scroll{overflow:visible}
.cz-pr-box{background:transparent;border:0;box-shadow:none;border-radius:0}
.cz-pr-tb{min-width:0;width:100%;display:block;border-collapse:separate}
.cz-pr-tb thead{display:none}
.cz-pr-tb tbody{display:block}
.cz-pr-tb tbody tr{
display:block;margin-bottom:14px;padding:16px 18px;
background:#fff;border:1px solid rgba(1,47,127,.10);border-radius:16px;
box-shadow:0 6px 18px rgba(1,32,79,.06);
}
.cz-pr-tb tbody tr.is-hot{
background:#FFFDF6;border-color:rgba(255,183,0,.55);
box-shadow:0 10px 26px rgba(227,183,33,.18);
}
.cz-pr-tb tbody tr:hover{background:#fff}
.cz-pr-tb tbody tr.is-hot:hover{background:#FFFDF6}
/* Nhãn thả trái, giá trị chạy về phải — dùng float để "1 GB ECC" không bị tách đôi */
.cz-pr-tb td{
display:block;overflow:hidden;
padding:10px 0;text-align:right;white-space:normal;
border-top:1px solid rgba(1,47,127,.07);font-size:14.6px;
}
.cz-pr-tb td::before{
content:attr(data-label);float:left;margin-right:14px;
font-size:12.6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--cz-ink);line-height:1.5;
}
/* Tên gói: chiếm trọn dòng đầu, không có nhãn, không kẻ trên */
.cz-pr-tb td.cz-pr-tdname{
display:block;text-align:left;border-top:0;padding:0 0 12px;
}
.cz-pr-tb td.cz-pr-tdname::before{content:none}
.cz-pr-name{font-size:17px}
.cz-pr-note{font-size:13px}
/* Giá: nổi bật ngay dưới tên gói */
.cz-pr-tb td.cz-pr-price{padding:12px 0;border-top:1px solid rgba(1,47,127,.07)}
.cz-pr-tb td.cz-pr-price::before{line-height:2.1}
.cz-pr-tb td.cz-pr-price::before{content:"Giá"}
.cz-pr-price b{font-size:24px}
.cz-pr-price span{display:inline;margin-left:2px}
/* Nút đăng ký: full chiều ngang thẻ */
.cz-pr-tb td.cz-pr-tdbuy{display:block;padding:14px 0 0;border-top:0}
.cz-pr-tb td.cz-pr-tdbuy::before{content:none}
.cz-pr-buy{display:block;width:100%;text-align:center;padding:13px 18px;font-size:15px}
/* Ghi chú cuối bảng */
.cz-pr-foot{
margin-top:4px;border-radius:14px;border:1px solid rgba(1,47,127,.08);
border-top:1px solid rgba(1,47,127,.08);
}
}
/* Trên điện thoại: ẩn danh sách 6 Data Center cho trang bớt dài
(thông tin chuẩn TIA-942 Rated 3 vẫn còn ở bảng thông số chung và khối bên cạnh) */
@media (max-width:760px){
.cz-dc-list{display:none}
}
/* ==============================================================
VÌ SAO CHỌN CLOUD SERVER — lưới 6 thẻ, ảnh có vệt sáng chuyển động
============================================================== */
.cz-wh-grid{
margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.cz-wh{
background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:18px;overflow:hidden;
box-shadow:0 8px 22px rgba(1,32,79,.06);transition:.3s;
/* flex cột + phần chữ giãn đầy: các thẻ cao bằng nhau, khối chữ luôn
chạm đáy thẻ nên khi hover không bị hở dải trắng ở dưới */
display:flex;flex-direction:column;
}
/* Rê chuột: CHỈ phần chữ bên dưới chuyển sang màu chủ đạo #24A1FF,
ảnh minh hoạ giữ nguyên màu gốc để không bị ám xanh */
.cz-wh:hover{
transform:translateY(-6px);
border-color:#24A1FF;
box-shadow:0 20px 44px rgba(36,161,255,.28);
}
.cz-wh-bd{transition:background .3s}
.cz-wh-bd h3,.cz-wh-bd p,.cz-wh-bd h3 i{transition:color .3s,background .3s}
.cz-wh:hover .cz-wh-bd{background:linear-gradient(150deg,#3AABFF 0%,#24A1FF 70%,#1793F5 100%)}
.cz-wh:hover .cz-wh-bd h3{color:#fff}
.cz-wh:hover .cz-wh-bd h3 i{color:#0F86E6;background:#fff}
.cz-wh:hover .cz-wh-bd p{color:rgba(255,255,255,.94)}
.cz-wh-img{transition:transform .45s ease}
.cz-wh:hover .cz-wh-img{transform:scale(1.05)}
/* Khung ảnh */
.cz-wh-md{position:relative;overflow:hidden;background:#EAF4FF;isolation:isolate}
.cz-wh-img{
display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
}
/* Nội dung */
.cz-wh-bd{flex:1;padding:18px 20px 22px}
.cz-wh-bd h3{
margin:0;display:flex;align-items:flex-start;gap:10px;
font-size:16.5px;font-weight:700;line-height:1.4;color:var(--cz-text);
}
.cz-wh-bd h3 i{
flex:0 0 auto;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em;
color:#0F86E6;background:rgba(36,161,255,.12);border-radius:7px;padding:4px 7px;margin-top:1px;
}
.cz-wh-bd p{margin:9px 0 0;font-size:13.8px;line-height:1.72;color:var(--cz-ink)}
@media (max-width:1024px){ .cz-wh-grid{grid-template-columns:repeat(2,1fr);gap:20px} }
@media (max-width:640px){ .cz-wh-grid{grid-template-columns:1fr;gap:16px} }
/* ==============================================================
THÔNG SỐ CHUNG — nền ảnh data center, chữ trái, ảnh minh hoạ phải
============================================================== */
.cz-sp,.cz-sp *{box-sizing:border-box}
.cz-sp{
position:relative;overflow:hidden;font-family:var(--cz-font);color:#fff;
padding:76px 0 80px;
/* Ảnh nền gốc, không phủ thêm lớp màu nào lên trên */
background:
radial-gradient(78% 92% at 100% 0%,rgba(0,222,238,.60) 0%,rgba(0,190,244,.18) 46%,transparent 70%),
linear-gradient(101deg,#0090FA 0%,#0096FA 40%,#00A6F7 72%,#00BCF4 100%);
}
/* Ảnh nền + lớp phủ tối dần về trái để chữ luôn đọc rõ */
.cz-sp::before{content:none}
.cz-sp::after{content:none}
/* Lớp đường mạch sáng mờ trên nền gradient */
/* ===== 6 vệt sáng chạy trên các đường nối của ảnh nền ===== */
.cz-sp-flow{
position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;
/* cộng thêm ánh sáng lên đường nối sẵn có thay vì đè lên -> thấy rõ vệt chạy */
mix-blend-mode:plus-lighter;
}
.cz-fl{
/* mỗi đường có keyframes riêng với số liệu tuyệt đối:
tránh var() trong giá trị được animate (Chromium sẽ nhảy bước thay vì chạy mượt) */
stroke-dashoffset:36;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
.cz-fl1{stroke-dasharray:36 318;animation-name:czFlow1;animation-duration:3.37s;animation-delay:0s}
.cz-fl2{stroke-dasharray:36 405;animation-name:czFlow2;animation-duration:4.20s;animation-delay:-0.9s}
.cz-fl3{stroke-dasharray:36 428;animation-name:czFlow3;animation-duration:4.42s;animation-delay:-1.8s}
.cz-fl4{stroke-dasharray:36 683;animation-name:czFlow4;animation-duration:6.85s;animation-delay:-2.7s}
.cz-fl5{stroke-dasharray:36 428;animation-name:czFlow5;animation-duration:4.42s;animation-delay:-3.6s}
.cz-fl6{stroke-dasharray:36 432;animation-name:czFlow6;animation-duration:4.46s;animation-delay:-4.5s}
@keyframes czFlow1{from{stroke-dashoffset:36}to{stroke-dashoffset:-318}}
@keyframes czFlow2{from{stroke-dashoffset:36}to{stroke-dashoffset:-405}}
@keyframes czFlow3{from{stroke-dashoffset:36}to{stroke-dashoffset:-428}}
@keyframes czFlow4{from{stroke-dashoffset:36}to{stroke-dashoffset:-683}}
@keyframes czFlow5{from{stroke-dashoffset:36}to{stroke-dashoffset:-428}}
@keyframes czFlow6{from{stroke-dashoffset:36}to{stroke-dashoffset:-432}}
@media (prefers-reduced-motion:reduce){ .cz-fl{animation:none;opacity:0} }
/* Màn hẹp: ảnh nền canh trái, phần đồ hoạ bị cắt -> tắt hiệu ứng */
@media (max-width:1024px){ .cz-sp-flow{display:none} }
/* Ẩn lớp đường mạch trang trí — nền dùng ảnh gốc, không phủ lớp nào lên trên */
.cz-sp-fx{display:none}
.cz-sp-wrap{
position:relative;z-index:3;max-width:1340px;margin:0 auto;padding:0 44px;
}
.cz-sp-tx{max-width:820px}
.cz-sp-kick{
display:inline-block;padding:6px 15px;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.cz-sp-tx h2{
margin:16px 0 0;font-size:clamp(24px,2.7vw,36px);font-weight:800;line-height:1.28;
text-shadow:0 4px 26px rgba(0,14,40,.45);
}
.cz-sp-lead{
margin:14px 0 0;max-width:560px;font-size:15.4px;line-height:1.75;color:rgba(233,244,255,.92);
}
/* Lưới thông số dạng kính mờ */
.cz-sp-grid{
margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
max-width:700px;
}
.cz-sp-i{
position:relative;
padding:13px 15px;border-radius:13px;
background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.30);
backdrop-filter:blur(7px);transition:.26s;
}
/* Khi hover, làm viền tĩnh dịu lại để vệt sáng chạy nổi bật hơn */
.cz-sp-i:hover{background:rgba(36,161,255,.30);border-color:rgba(255,255,255,.24);transform:translateY(-2px)}
/* Biến góc quay dùng cho vệt sáng chạy quanh viền.
Khai báo @property để trình duyệt nội suy được kiểu khi chạy animation. */
@property --cz-sp-ang{syntax:'';initial-value:0deg;inherits:false}
/* Vệt sáng chạy vòng quanh viền khi rê chuột vào ô thông số.
Kỹ thuật: conic-gradient xoay theo --cz-sp-ang, rồi dùng mask cắt bỏ phần ruột
(mask-composite:exclude) nên chỉ còn lại đúng dải viền mỏng. */
.cz-sp-i::after{
content:'';position:absolute;inset:-1px;border-radius:14px;
padding:2px; /* độ dày vệt sáng viền */
/* đuôi mờ dài + đầu sáng gắt để đọc rõ như một vệt line đang chạy */
background:conic-gradient(from var(--cz-sp-ang),
transparent 0turn,
transparent .52turn,
rgba(120,225,255,.18) .68turn,
rgba(150,235,255,.62) .82turn,
#B6F0FF .90turn,
#FFFFFF .945turn,
#B6F0FF .965turn,
rgba(150,235,255,.35) .982turn,
transparent 1turn);
/* cắt lấy phần viền: lớp phủ toàn bộ trừ đi phần content-box */
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
filter:drop-shadow(0 0 4px rgba(160,235,255,.95)) drop-shadow(0 0 10px rgba(90,205,255,.55));
opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.cz-sp-i:hover::after{
opacity:1;
animation:czSpRun 1.5s linear infinite;
}
@keyframes czSpRun{to{--cz-sp-ang:360deg}}
/* Tôn trọng thiết lập giảm chuyển động của người dùng */
@media (prefers-reduced-motion:reduce){
.cz-sp-i:hover::after{animation:none}
}
.cz-sp-i em{
display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:#DCF0FF;
}
.cz-sp-i b{display:block;margin-top:5px;font-size:13.6px;font-weight:700;line-height:1.5;color:#fff}
@media (max-width:1024px){
/* Màn hẹp: canh ảnh về bên trái (vùng nền phẳng) để chữ trắng luôn đọc rõ */
.cz-sp{background-position:left center}
.cz-sp-tx{max-width:none}
.cz-sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}
@media (max-width:560px){
.cz-sp{padding:52px 0 56px}
.cz-sp-wrap{padding:0 20px}
.cz-sp-grid{grid-template-columns:1fr 1fr;gap:10px}
.cz-sp-i{padding:11px 12px}
.cz-sp-i b{font-size:12.8px}
}
/* ==============================================================
HERO VPS GPU — ẢNH NỀN MỚI, CHỮ BÊN TRÁI / HÌNH BÊN PHẢI
Đặt cuối cùng để ghi đè khối "HERO NỀN SÁNG" của trang Cloud Server:
ảnh nền mới là xanh đậm nên chữ phải trở lại màu trắng.
============================================================== */
.cz-hero{
overflow:hidden;
display:flex;align-items:center;
min-height:600px; /* đủ cao để hình minh hoạ trong ảnh nền không bị cắt */
padding-bottom:196px; /* chừa chỗ cho 3 thẻ chồng lên đáy hero */
color:#fff;
background-color:#1A9FFC; /* trùng tông mép trái ảnh mới -> màn siêu rộng không lộ mép */
background-image: url("hero-bg.webp");
background-size:cover;
background-position:right center; /* neo về phải để giữ nguyên khối hình minh hoạ */
background-repeat:no-repeat;
}
/* Chữ dồn về nửa trái, không bao giờ chờm sang hình */
.cz-inner{
width:100%;max-width:1360px;margin:0 auto;padding:64px 44px 24px;text-align:left;
}
.cz-col{max-width:min(52%,640px)}
.cz-ctas{justify-content:flex-start}
.cz-lead{margin:20px 0 0;max-width:none}
/* Trả lại bộ màu chữ sáng cho nền xanh */
.cz-hero .cz-kick{
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);
color:#fff;box-shadow:none;
}
.cz-hero .cz-h1{color:#fff;text-shadow:0 4px 28px rgba(0,26,70,.42)}
.cz-hero .cz-lead{color:rgba(238,248,255,.96);text-shadow:0 2px 14px rgba(0,26,70,.38)}
.cz-hero .cz-lead b{color:#fff;font-weight:700}
/* Nút chính giữ vàng thương hiệu; nút phụ đổi lại dạng kính mờ trên nền xanh */
.cz-hero .cz-btn-ghost{
background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.44);color:#fff;
box-shadow:none;backdrop-filter:blur(10px);
}
.cz-hero .cz-btn-ghost svg{color:#fff}
.cz-hero .cz-btn-ghost:hover{background:rgba(255,255,255,.26);border-color:#fff}
@media (max-width:1180px){
.cz-col{max-width:56%}
.cz-hero{min-height:540px}
}
/* Màn hẹp: dùng bản hoạ tiết đã tách nền, CĂN GIỮA phía dưới khối chữ.
Nền để phẳng đúng #1A9FFC — trùng màu nền đã chuẩn hoá của ảnh nên
không còn thấy mép ảnh, không cần lớp gradient che nữa.
Ảnh được nâng lên 112px, đúng khoảng hàng thẻ bên dưới chồng lên hero. */
@media (max-width:860px){
.cz-hero{
display:block;min-height:0;
background-color:#1A9FFC;
background-image: url("hero-art.webp");
background-size:min(94%,430px) auto;
background-position:center bottom 112px;
background-repeat:no-repeat;
padding-bottom:calc(min(94vw,430px) * 0.791 + 112px);
}
.cz-inner{padding:44px 20px 0;text-align:left}
.cz-col{max-width:none}
.cz-ctas{justify-content:flex-start}
}
/* ==============================================================
KHỐI THÔNG SỐ CHUNG — 2 cột: chữ bên trái, ảnh chip GPU bên phải.
Nền giữ đúng tone thương hiệu của ảnh cũ (lấy mẫu màu rồi dựng lại
bằng gradient), chỉ thay phần hình minh hoạ.
============================================================== */
.cz-sp-wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.cz-sp-tx{max-width:none}
.cz-sp-md{position:relative;display:grid;place-items:center}
/* Đã bỏ lớp nền sẫm phía sau hình: radial-gradient được tính theo góc xa
nhất nên ở mép trên/dưới của khung tỉ lệ 1.3 nó chưa kịp tan hết, rồi bị
border-radius:50% cắt ngang -> lộ một viền elip cứng trên nền. Hình card
vốn sáng nên đọc rõ trên nền xanh, không cần lớp này. */
/* Khung chứa ảnh + lớp vòng quay: cùng tỉ lệ nên hai lớp luôn khớp nhau */
.cz-gpu{position:relative;width:100%;max-width:560px;margin:0 auto}
.cz-gpu-img{
position:relative;z-index:1;width:100%;height:auto;display:block;
/* Không đặt filter bóng đổ ở đây: CSS áp mặt nạ SAU filter, mà mask-size
100%/no-repeat chỉ phủ đúng khung ảnh -> phần bóng tràn ra ngoài khung
bị cắt vuông, tạo một vệt chữ nhật sẫm hơn nền. Hình là tranh vector
phẳng nên không cần bóng. */
/* Mờ dần từ dưới lên: card chiếm tới 67% chiều cao ảnh, phần dưới chỉ còn
bàn tay và bị cắt ngang ở mép dưới. Cho tan dần từ 64% xuống 100% để
không lộ đường cắt cổ tay. mask-size/repeat khai báo rõ để phần bóng đổ
tràn ra ngoài khung không bị lặp mặt nạ. */
-webkit-mask-image:linear-gradient(180deg,
#000 0%,#000 64%,rgba(0,0,0,.78) 77%,rgba(0,0,0,.36) 90%,transparent 100%);
mask-image:linear-gradient(180deg,
#000 0%,#000 64%,rgba(0,0,0,.78) 77%,rgba(0,0,0,.36) 90%,transparent 100%);
-webkit-mask-size:100% 100%; mask-size:100% 100%;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.cz-gpu-fx{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
/* Vòng nét đứt quay quanh tâm quạt */
.cz-ring{
animation:czRingSpin var(--d,12s) linear infinite;
animation-direction:var(--dir,normal);
}
/* Cung sáng chạy vòng theo đúng đường viền quạt.
Dùng màu cyan (không dùng trắng) vì thân card vốn đã trắng. */
.cz-ring-arc{
stroke:#16CFFF;stroke-width:7;
stroke-dasharray:250 760; /* một cung ~1/4 vòng, phần còn lại trống */
}
/* Vòng nét đứt nằm đúng trên vành quạt, trùng vệt nét đứt vẽ sẵn trong
ảnh — khi quay sẽ đọc thành "các nét đứt của viền đang chạy vòng". */
.cz-ring-dash{
stroke:rgba(70,215,255,.95);stroke-width:5;
stroke-dasharray:15 23;
}
@keyframes czRingSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .cz-ring{animation:none} }
@media (max-width:1024px){
.cz-sp-wrap{grid-template-columns:1fr;gap:30px}
.cz-sp-md{order:-1}
.cz-gpu{max-width:430px}
}
/* ==============================================================
LIGHTBOX BẢN ĐỒ — chạm để mở, phóng to / thu nhỏ / kéo xem
============================================================== */
.cz-map-wrap{cursor:zoom-in}
/* Gợi ý "chạm để phóng to" — chỉ hiện trên màn hình cảm ứng nhỏ */
.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 svg{width:15px;height:15px}
@media (max-width:900px){ .cz-map-zoomhint{display:inline-flex} }
.cz-lb{
position:fixed;inset:0;z-index:9999;display:none;
background:#061A34;
-webkit-user-select:none;user-select:none;touch-action:none;
}
.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;
font-family:var(--cz-font);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}
}
/* ==============================================================
HERO — bỏ ảnh minh hoạ nền, căn giữa toàn bộ nội dung
(thêm modifier .cz-hero-center vào section.cz-hero)
============================================================== */
.cz-hero.cz-hero-center{
background-image:
linear-gradient(120deg,rgba(4,14,36,.74) 0%,rgba(8,34,74,.62) 42%,rgba(10,55,110,.42) 100%),
url("hero-center-bg.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.cz-hero-center .cz-inner{text-align:center}
.cz-hero-center .cz-col{max-width:760px;margin:0 auto}
.cz-hero-center .cz-kick{margin-left:auto;margin-right:auto}
.cz-hero-center .cz-lead{margin:20px auto 0;max-width:640px}
.cz-hero-center .cz-ctas{justify-content:center}
@media (max-width:760px){
.cz-hero-center .cz-col{max-width:none}
}
/* Ở mobile, hệ thiết kế gốc dành khoảng padding-bottom rất lớn (tính bằng calc)
để chừa chỗ cho ảnh hoạ tiết nền (--cz-hero-art). Bản colocation không dùng
ảnh minh hoạ nữa nên phải reset lại — nếu không sẽ để lại khoảng trống xanh
rất lớn phía dưới nút CTA trước khi tới hàng 3 card. */
@media (max-width:860px){
.cz-hero-center{background-image:none;padding-bottom:150px}
}
/* ==============================================================
COLOCATION LÀ GÌ (định nghĩa) — mục mới, section 1 outline SEO
Bố cục 2 cột: video/minh hoạ bên trái — tiêu đề + nội dung bên phải
============================================================== */
.cz-def{background:#fff;font-family:var(--cz-font);padding:74px 0 78px}
.cz-def-wrap{max-width:1200px;margin:0 auto;padding:0 44px}
.cz-def-grid{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:52px;align-items:center}
.cz-def-media{
position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;
box-shadow:0 30px 70px rgba(0,20,60,.24);background:#0A2A5E;
}
.cz-def-media-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.cz-def-media-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cz-def-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);border:0;
display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 34px rgba(0,20,60,.34);
transition:.25s;
}
.cz-def-play:hover{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.cz-def-play svg{width:26px;height:26px;color:#0B6FD0;margin-left:4px}
.cz-def-text{max-width:640px}
.cz-def-kicker{
display:inline-flex;align-items:center;padding:6px 15px;border-radius:999px;
background:rgba(36,161,255,.09);border:1px solid rgba(36,161,255,.18);color:#0B6FD0;
font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
line-height:1;
}
.cz-def-text h2{
margin:0;font-size:clamp(21px,2vw,28px);font-weight:800;line-height:1.3;
color:var(--cz-text);letter-spacing:.2px;
}
.cz-def-text h2::after{
content:'';display:block;width:56px;height:4px;border-radius:99px;margin-top:16px;
background:linear-gradient(90deg,#0B6FD0,var(--cz-blue),#7FE9FF);
}
.cz-def-body{margin-top:18px}
.cz-def-body p{
margin:0 0 16px;font-size:15.5px;line-height:1.8;color:var(--cz-ink);
}
.cz-def-body p:last-child{margin-bottom:0}
.cz-def-body b{color:var(--cz-text);font-weight:700}
@media (max-width:900px){
.cz-def-grid{grid-template-columns:1fr;gap:28px}
.cz-def-media{max-width:520px;margin:0 auto;width:100%}
.cz-def-text{max-width:none}
}
@media (max-width:860px){
.cz-def{padding:52px 0 56px}
.cz-def-wrap{padding:0 20px}
}
/* ==============================================================
ẢNH MINH HOẠ DÙNG LẠI TRONG KHỐI THÔNG SỐ KỸ THUẬT (cz-sp)
Thay cho khối .cz-gpu (đặc thù VPS GPU): ảnh tĩnh, không vòng hiệu ứng.
============================================================== */
.cz-def-img-wrap{
position:relative;width:100%;max-width:520px;margin:0 auto;border-radius:22px;
overflow:hidden;box-shadow:0 30px 70px rgba(0,20,60,.28);
}
.cz-def-img{display:block;width:100%;height:auto;object-fit:cover}
/* ==============================================================
ĐÚC KẾT CUỐI KHỐI "VÌ SAO CHỌN CLOUDZONE" — tránh cảm giác
liệt kê lặp lại, chốt lại giá trị của 3 điểm cộng hưởng với nhau
============================================================== */
.cz-adv-note{
margin-top:34px;display:flex;gap:16px;align-items:flex-start;
padding:22px 26px;border-radius:18px;
background:rgba(36,161,255,.06);border:1px solid rgba(36,161,255,.18);
}
.cz-adv-note-ic{
flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
box-shadow:0 8px 20px rgba(36,161,255,.3);
}
.cz-adv-note-ic svg{width:19px;height:19px}
.cz-adv-note p{margin:0;font-size:14.5px;line-height:1.75;color:var(--cz-text)}
@media (max-width:640px){
.cz-adv-note{padding:18px 20px;gap:12px}
}
/* ==============================================================
ĐỐI TƯỢNG PHÙ HỢP — mục mới, section 5 outline SEO
============================================================== */
.cz-aud{background:#F2FAFF;font-family:var(--cz-font);padding:74px 0 80px} /* nền xanh nhạt — tách biệt rõ với mục "Vì sao chọn" (nền trắng) phía trên */
.cz-aud-wrap{max-width:1360px;margin:0 auto;padding:0 44px}
.cz-aud-grid{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cz-aud-card{
background:#fff;border:1px solid rgba(1,47,127,.07);border-radius:18px;
padding:26px 24px 24px;transition:.3s;
}
.cz-aud-card:hover{
transform:translateY(-6px);border-color:rgba(36,161,255,.4);
box-shadow:0 20px 44px rgba(36,161,255,.16);background:#fff;
}
.cz-aud-card .cz-ico{
width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));box-shadow:0 10px 24px rgba(36,161,255,.32);
}
.cz-aud-card .cz-ico svg{width:23px;height:23px}
.cz-aud-card h3{margin:18px 0 0;font-size:17px;font-weight:700;color:var(--cz-text);letter-spacing:-.2px}
.cz-aud-card p{margin:10px 0 0;font-size:14px;line-height:1.68;color:var(--cz-ink)}
.cz-aud-card p a{color:#0B6FD0;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(11,111,208,.3)}
.cz-aud-card p a:hover{border-color:#0B6FD0}
@media (max-width:1024px){ .cz-aud-grid{grid-template-columns:1fr;gap:18px} }
@media (max-width:860px){
.cz-aud{padding:52px 0 56px}
.cz-aud-wrap{padding:0 20px}
}
/* ==============================================================
LIÊN KẾT GIỮA CÁC DỊCH VỤ (cross-sell) — cho người chưa phù hợp
với colocation (chưa có phần cứng riêng / cần máy ảo GPU)
============================================================== */
.cz-cross{background:#fff;font-family:var(--cz-font);padding:0 0 54px;display:flow-root} /* flow-root để margin âm bên dưới không kéo nền trắng chờm lên nền phía trên */
.cz-cross-wrap{max-width:1360px;margin:0 auto;padding:0 44px}
.cz-cross-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:-26px} /* kéo 2 thẻ chờm ~20% chiều cao lên nền phía trên */
.cz-cross-card{
position:relative;display:flex;align-items:center;gap:18px;
padding:22px 62px 22px 22px;border-radius:20px;text-decoration:none;color:#fff;
background:linear-gradient(120deg,#1789EA 0%,#24A1FF 55%,#3AABFF 100%);
box-shadow:0 16px 40px rgba(36,161,255,.22);transition:.3s;
}
.cz-cross-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(36,161,255,.32)}
.cz-cross-ico{
flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
background:rgba(255,255,255,.92);color:#0B6FD0;
}
.cz-cross-ico svg{width:24px;height:24px}
.cz-cross-kick{
display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.85);margin-bottom:6px;line-height:1;
}
.cz-cross-bd h3{margin:0;font-size:16.5px;font-weight:800;line-height:1.3;color:#fff}
.cz-cross-bd p{margin:8px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.92)}
.cz-cross-arrow{
position:absolute;right:20px;top:50%;transform:translateY(-50%);
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;transition:.25s;
}
.cz-cross-arrow svg{width:17px;height:17px}
.cz-cross-card:hover .cz-cross-arrow{background:#fff;color:#0B6FD0}
@media (max-width:900px){
.cz-cross-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
.cz-cross-wrap{padding:0 20px}
}
@media (max-width:640px){
.cz-cross-card{padding:18px 50px 18px 18px;gap:14px}
.cz-cross-ico{width:44px;height:44px}
.cz-cross-ico svg{width:20px;height:20px}
}
@media (max-width:480px){
.cz-cross-grid{margin-top:-40px} /* thẻ cao hơn do chữ xuống dòng nhiều — tăng độ chờm để vẫn ~20% */
}
/* ==============================================================
SO SÁNH DỊCH VỤ THUÊ CHỖ ĐẶT MÁY CHỦ (SERVER COLOCATION)
Bảng so sánh Cloudzone với các nhà cung cấp khác trên thị trường
(nội dung lấy theo trang cũ) — thay cho khối "so sánh nhanh" trước đây
============================================================== */
.cz-vs{
position:relative;overflow:hidden;font-family:var(--cz-font);color:#fff;padding:74px 0 80px;
background:
radial-gradient(78% 92% at 100% 0%,rgba(0,222,238,.60) 0%,rgba(0,190,244,.18) 46%,transparent 70%),
linear-gradient(101deg,#0090FA 0%,#0096FA 40%,#00A6F7 72%,#00BCF4 100%);
}
.cz-vs-wrap{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:0 44px}
.cz-vs-kicker{
display:inline-flex;align-items:center;padding:6px 15px;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);color:#fff;margin-bottom:16px;
font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.cz-vs .cz-svc-head h2{color:#fff;text-shadow:0 4px 26px rgba(0,14,40,.4)}
.cz-vs .cz-svc-head h2::after{background:linear-gradient(90deg,#fff,rgba(255,255,255,.35))}
.cz-vs .cz-svc-head p{color:rgba(233,244,255,.92)}
.cz-vstb-box{
margin-top:8px;background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:22px;
box-shadow:0 14px 40px rgba(1,32,79,.08);overflow:hidden;
}
.cz-vstb-hint{display:none}
.cz-vstb-scroll{overflow-x:auto;scrollbar-width:thin}
.cz-vstb{width:100%;border-collapse:collapse;min-width:980px}
.cz-vstb th,.cz-vstb td{padding:15px 20px;text-align:left;vertical-align:top}
.cz-vstb thead th{
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
font-size:12.4px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.cz-vstb tbody tr{border-top:1px solid rgba(1,47,127,.07);transition:.24s}
.cz-vstb tbody tr:hover{background:rgba(36,161,255,.05)}
.cz-vstb td{font-size:13.8px;line-height:1.62;color:var(--cz-ink)}
.cz-vstb td:first-child{white-space:nowrap;color:var(--cz-text)}
.cz-vstb td:first-child b{font-weight:700}
.cz-vstb td:nth-child(2){background:rgba(36,161,255,.055);color:var(--cz-text);font-weight:500}
.cz-vstb-foot{
padding:16px 26px;background:#F7FBFF;border-top:1px solid rgba(1,47,127,.07);
}
.cz-vstb-foot em{font-style:normal;font-size:13.4px;color:var(--cz-ink)}
.cz-vstb-foot a{color:#0B6FD0;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(36,161,255,.4)}
@media (max-width:760px){
.cz-vs{padding:52px 0 56px}
.cz-vs-wrap{padding:0 20px}
.cz-vstb-hint{
display:block;margin:0;padding:12px 18px 0;font-size:12.6px;font-style:italic;
color:var(--cz-ink);text-align:right;
}
.cz-vstb{min-width:0;width:100%;display:block;border-collapse:separate}
.cz-vstb thead{display:none}
.cz-vstb tbody{display:block}
.cz-vstb tbody tr{
display:block;margin:14px;overflow:hidden;
background:#fff;border:1px solid rgba(1,47,127,.10);border-radius:16px;
box-shadow:0 6px 18px rgba(1,32,79,.06);
}
.cz-vstb td{display:block;padding:11px 18px;white-space:normal;border-top:0}
/* Ô tiêu chí: đổi thành dải tiêu đề xanh, không hiện lại nhãn "Tiêu chí" */
.cz-vstb td:first-child{
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
font-size:14.5px;font-weight:800;padding:13px 18px;
}
.cz-vstb td:first-child b{color:#fff;font-weight:800}
.cz-vstb td:first-child::before{content:none}
/* Ô Cloudzone: nền xanh nhạt, nhãn màu xanh thương hiệu */
.cz-vstb td:nth-child(2){background:rgba(36,161,255,.07);border-top:1px solid rgba(1,47,127,.06)}
.cz-vstb td:nth-child(2)::before{color:#0B6FD0}
/* Ô nhà cung cấp khác: nền trắng, nhãn màu chữ chính */
.cz-vstb td:nth-child(3){border-top:1px solid rgba(1,47,127,.06)}
.cz-vstb td:nth-child(3)::before{color:var(--cz-text)}
.cz-vstb td::before{
content:attr(data-label);display:block;margin-bottom:3px;
font-size:11.2px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.cz-vstb-scroll{overflow:visible}
}
/* ==============================================================
CTA GIỮA BÀI — chèn ngay dưới bảng giá colocation (outline mục 4)
============================================================== */
.cz-pr-cta{
margin-top:28px;padding:26px 30px;border-radius:20px;
background:linear-gradient(120deg,#0A5FB8 0%,#1789EA 46%,#24A1FF 100%);
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
box-shadow:0 20px 46px rgba(36,161,255,.28);
}
.cz-pr-cta-tx{display:flex;flex-direction:column;gap:4px;color:#fff}
.cz-pr-cta-tx b{font-size:17px;font-weight:800}
.cz-pr-cta-tx span{font-size:13.8px;color:rgba(235,247,255,.92)}
.cz-pr-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){
.cz-pr-cta{padding:22px 22px;flex-direction:column;align-items:flex-start}
.cz-pr-cta-btns{width:100%}
.cz-pr-cta-btns .cz-btn{flex:1 1 auto;justify-content:center}
}
/* ==============================================================
SỬA LỖI: badge "Bảng giá colocation" thiếu margin-bottom nên
đè lên tiêu đề H2 ngay bên dưới
============================================================== */
.cz-pr-kicker{margin-bottom:16px;line-height:1}
/* ==============================================================
GHI CHÚ VAT DƯỚI BẢNG GIÁ CHÍNH
============================================================== */
.cz-pr-vat{
margin:0;padding:16px 26px 20px;font-size:13px;font-style:normal;font-weight:500;
color:var(--cz-ink);text-align:left;border-top:1px solid rgba(1,47,127,.08);
}
@media (max-width:760px){
.cz-pr-vat{padding:14px 4px 4px;border-top:0;text-align:center}
}
/* ==============================================================
GÓI DỊCH VỤ BỔ SUNG (BwPlus / BwMax / PowerUp) — dưới bảng giá chính
============================================================== */
.cz-pr-addon{margin-top:26px}
.cz-pr-addon-note{
background:#EAF4FF;border:1px solid rgba(36,161,255,.18);border-radius:16px;
padding:20px 24px;margin-bottom:18px;
}
.cz-pr-addon-note p{margin:0 0 10px;font-size:14px;line-height:1.75;color:#25507E}
.cz-pr-addon-note p:last-child{margin-bottom:0}
.cz-pr-addon-note b{color:#0A2A5E;font-weight:700}
.cz-pr-addon-note a{color:#0B6FD0;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(36,161,255,.4)}
.cz-pr-addon-box{
background:#fff;border:1px solid rgba(1,47,127,.08);border-radius:22px;
box-shadow:0 14px 40px rgba(1,32,79,.08);overflow:hidden;
}
.cz-pr-addon-scroll{overflow-x:auto;scrollbar-width:thin}
.cz-pr-addon-tb{width:100%;border-collapse:collapse;min-width:760px}
.cz-pr-addon-tb th,.cz-pr-addon-tb td{padding:16px 20px;text-align:left;vertical-align:top}
.cz-pr-addon-tb thead th{
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
font-size:12.6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.cz-pr-addon-tb tbody tr{border-top:1px solid rgba(1,47,127,.07);transition:.24s}
.cz-pr-addon-tb tbody tr:hover{background:rgba(36,161,255,.06)}
.cz-pr-addon-tb td{font-size:14px;line-height:1.6;color:var(--cz-ink)}
.cz-pr-addon-tb td b{color:var(--cz-text);font-weight:700}
.cz-pr-addon-tb td.cz-pr-addon-price{white-space:nowrap;font-weight:800;color:#0B6FD0;font-size:14.5px}
@media (max-width:760px){
.cz-pr-addon-tb{min-width:0;width:100%;display:block;border-collapse:separate}
.cz-pr-addon-tb thead{display:none}
.cz-pr-addon-tb tbody{display:block}
.cz-pr-addon-tb tbody tr{
display:block;margin:14px;overflow:hidden;
background:#fff;border:1px solid rgba(1,47,127,.10);border-radius:16px;
box-shadow:0 6px 18px rgba(1,32,79,.06);
}
.cz-pr-addon-tb td{display:block;padding:10px 18px;border-top:0}
/* Ô "Gói": dải tiêu đề xanh làm điểm nhấn, không lặp lại nhãn "Gói" */
.cz-pr-addon-tb td:first-child{
background:linear-gradient(135deg,#0B6FD0,var(--cz-blue));color:#fff;
font-size:14.5px;font-weight:800;padding:12px 18px;
}
.cz-pr-addon-tb td:first-child b{color:#fff}
.cz-pr-addon-tb td:first-child::before{content:none}
.cz-pr-addon-tb td:not(:first-child){border-top:1px solid rgba(1,47,127,.07)}
/* Ô "Giá": nổi bật màu xanh thương hiệu, cỡ chữ lớn hơn */
.cz-pr-addon-tb td.cz-pr-addon-price{background:rgba(36,161,255,.07);font-size:16px}
.cz-pr-addon-tb td.cz-pr-addon-price::before{color:#0B6FD0}
.cz-pr-addon-tb td::before{
content:attr(data-label);display:block;margin-bottom:3px;
font-size:11.2px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-ink);
}
.cz-pr-addon-scroll{overflow:visible}
}