/* =========================================================================
/dich-vu/thiet-ke-website/ — SECTION 01: XÁC ĐỊNH MỤC TIÊU WEBSITE
Dựng theo bản đặc tả anh Hien duyệt (2026-08-10). Bố cục theo mockup,
hệ màu giữ đúng tông Web22 hiện tại (accent coral, mực navy) — mọi chỗ
bản đặc tả ghi "xanh" đều ánh xạ sang coral của nhận diện.
Chỉ nạp ở đúng trang này (inc/enqueue.php). Prefix cô lập: .w22s1-
Vùng: TOKEN · CỘT TRÁI · CỘT PHẢI (NEED EXPLORER) · PREVIEW · RESPONSIVE
========================================================================= */
.w22s1{
--s1-ac:var(--accent); /* accent chính (coral) */
--s1-ac-ink:var(--accent-ink); /* accent đậm hơn khi hover/active */
--s1-ac-soft:var(--accent-soft); /* nền nhấn rất nhạt */
--s1-ac-tint:#FFF7F9; /* nền nhấn nhạt hơn nữa */
--s1-ac-line:#FFD1DA; /* đường nối quỹ đạo */
--s1-navy:var(--ink);
--s1-ink2:var(--ink-3);
--s1-mut:var(--ink-4);
--s1-line:var(--line);
--s1-sh:0 12px 32px -22px rgba(20,21,26,.28);
--s1-sh-hi:0 18px 40px -22px rgba(20,21,26,.34);
background:var(--bg);
/* Section đầu tiên ngay dưới header nên đệm TRÊN mỏng thôi, để care label
bám sát logo; đệm dưới vẫn dày như các section khác. */
padding:clamp(20px,2.2vw,36px) 0 clamp(56px,8vw,116px);
}
.w22s1-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,2.4vw,34px); position:relative; }
.w22s1-grid{
/* Nới cột trái từ 38 lên 44 phần để tờ care label rộng gần gấp đôi bản đầu;
cột phải vẫn đủ chỗ cho quỹ đạo và sáu thẻ mục tiêu. */
display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr);
gap:clamp(32px,3.4vw,56px);
/* Căn TRÊN để tờ care label nằm ngay dưới logo như mockup, thay vì bị đẩy
xuống giữa khi cột phải cao hơn. */
align-items:start;
}
/* =========================================================================
CỘT TRÁI
========================================================================= */
/* =========================================================================
SECTION 00 — KHỐI MỞ ĐẦU (nằm trên cùng cột trái của Section 01)
Lấp khoảng trống phía trên và giữ thẻ H1 duy nhất của trang. Nhãn nghiêng
nhẹ như miếng tem dán, chữ đổ dần xuống, kết bằng một đường chéo dẫn mắt
xuống khối "01". Prefix: .w22s0-
========================================================================= */
/* --- CARE LABEL: tờ giấy note dán băng dính ------------------------------
Vẽ hoàn toàn bằng CSS, không dùng ảnh. Mép giấy hơi lệch bằng clip-path,
nền trắng ngà, bóng nhẹ tán rộng, cả tờ xoay -4.5deg như dán tay.
Miếng băng dính coral là ::before, nằm vắt qua góc trên-trái. */
.w22s0{
--s0-rot:-4.5deg; /* góc nghiêng của tờ giấy, hiệu ứng vào cũng bám biến này */
position:relative; width:min(560px,100%);
margin:0 0 clamp(26px,2.8vw,40px) clamp(6px,1vw,16px);
padding:clamp(24px,2vw,30px) clamp(26px,2.2vw,34px) clamp(22px,1.9vw,28px);
transform:rotate(var(--s0-rot));
}
/* Tờ giấy là một LỚP RIÊNG phía sau: clip-path nằm ở đây nên miếng băng dính
vẫn nhô được ra ngoài mép giấy (clip-path trên phần tử cha sẽ cắt cả con). */
.w22s0::after{
content:""; position:absolute; inset:0; z-index:0;
/* Nền ấm hơn hẳn màu trang (#fff) để tờ giấy tách ra thay vì chìm, kèm những
đường kẻ ngang rất mờ như giấy vở. Bóng đổ sâu và toả rộng cho cảm giác
tờ giấy nằm nổi trên mặt trang. */
background:
repeating-linear-gradient(to bottom, transparent 0 25px, rgba(255,105,134,.09) 25px 26px),
#FFF1EB;
box-shadow:0 18px 44px -24px rgba(20,21,26,.5), 0 3px 10px -6px rgba(20,21,26,.18);
/* mép giấy xé không đều — lệch vài pixel là đủ, không cần răng cưa dày */
clip-path:polygon(
0 1.4%, 26% 0, 58% 1.2%, 100% 0,
99.2% 34%, 100% 68%, 98.8% 100%,
62% 98.8%, 30% 100%, .8% 99%,
1.2% 62%, 0 30%
);
}
.w22s0::before{
content:""; position:absolute; top:-15px; left:-30px; z-index:2;
width:104px; height:28px; background:var(--s1-ac); opacity:.82;
transform:rotate(-21deg);
/* hai đầu băng dính cắt răng cưa cho ra vẻ xé tay */
clip-path:polygon(
0 0, 100% 0,
calc(100% - 5px) 25%, 100% 50%, calc(100% - 5px) 75%, 100% 100%,
0 100%,
5px 75%, 0 50%, 5px 25%
);
}
.w22s0 > *{ position:relative; z-index:1; }
.w22s0-h1{ margin:0; text-align:center; }
.w22s0-h1 .k{
/* Dòng "Dịch vụ" viết nghiêng cho ra nét tay, tương phản với hai dòng in hoa. */
display:block; font-family:var(--font-head); font-style:italic; font-weight:700;
font-size:clamp(16px,1.45vw,20px); letter-spacing:-.01em; color:var(--s1-ac);
transform:rotate(-1.2deg);
}
.w22s0-h1 .l1,
.w22s0-h1 .l2{
/* Không tải phông thứ ba (cẩm nang chốt 2 webfont) — lấy Inter Tight 900 in
hoa, giãn chữ rộng ra để thành một khối chữ kiểu nhãn dán. */
display:block; font-family:var(--font-head); font-weight:900; text-transform:uppercase;
font-size:clamp(30px,2.9vw,42px); line-height:1.03; letter-spacing:.01em;
}
.w22s0-h1 .l1{ margin-top:4px; color:var(--s1-navy); }
/* Vế sau của H1 — chữ thường, nhỏ hơn hẳn hai dòng in hoa để không tranh chỗ,
nhưng vẫn nằm trong H1 nên bộ đọc màn hình đọc liền một mạch. */
.w22s0-h1 .l3{
display:block; margin-top:9px;
font-family:var(--font-head); font-weight:700; font-size:clamp(14px,1.25vw,17px);
line-height:1.32; letter-spacing:-.015em; color:var(--s1-ink2); text-transform:none;
text-wrap:balance;
}
/* WEBSITE tô thành khối coral chữ trắng, hai đầu cắt xéo như vệt bút dạ quẹt
ngang — điểm tương phản mạnh nhất trong tờ giấy. */
.w22s0-h1 .l2{
display:inline-block; margin-top:5px; padding:3px 14px 4px;
color:#fff; background:var(--s1-ac);
clip-path:polygon(5% 0, 100% 0, 95% 100%, 0 100%);
transform:rotate(-.8deg);
}
/* Góc giấy vênh lên ở mép dưới-phải. */
.w22s0-curl{
position:absolute; right:0; bottom:0; z-index:1;
width:38px; height:38px;
background:linear-gradient(135deg, #FFF1EB 0 46%, #F3DCD4 52%, #E4C7BD 100%);
clip-path:polygon(100% 0, 100% 100%, 0 100%);
border-bottom-right-radius:3px;
box-shadow:-4px -4px 10px -6px rgba(20,21,26,.35);
}
.w22s0-lead{
margin:18px 0 0; padding-top:16px; border-top:1px dashed rgba(255,105,134,.4);
font-size:13.5px; line-height:1.62; color:var(--s1-ink2); text-wrap:pretty;
}
@media (max-width:1024px){
/* Màn hẹp: giảm độ xéo để không ăn vào chữ bên cạnh. */
.w22s0{ --s0-rot:-2.4deg; margin-left:14px; }
}
@media (max-width:640px){
.w22s0{ --s0-rot:-1.8deg; width:min(86%,330px); margin-bottom:26px; }
}
.w22s1-top{ display:flex; align-items:center; gap:18px; }
.w22s1-no{
font-family:var(--font-head); font-weight:800; letter-spacing:-.04em;
font-size:clamp(40px,4vw,56px); line-height:1;
color:var(--s1-ac); opacity:.32;
}
.w22s1-rule{ width:1px; height:42px; background:var(--s1-line); flex:0 0 auto; }
.w22s1-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
color:var(--s1-ac-ink); line-height:1.3;
}
.w22s1-eyebrow::before{ content:""; width:9px; height:9px; border-radius:2px; background:var(--s1-ac); flex:0 0 auto; }
.w22s1-h2{
font-family:var(--font-head); font-weight:800; letter-spacing:-.03em;
font-size:clamp(30px,3.5vw,46px); line-height:1.1; color:var(--s1-navy);
margin:22px 0 0;
}
.w22s1-h2 span{ color:var(--s1-ac); }
.w22s1-desc{ margin:20px 0 0; font-size:clamp(15.5px,1.15vw,17px); line-height:1.72; color:var(--s1-ink2); max-width:46ch; }
/* Khối nhắc nhở */
.w22s1-note{
display:flex; align-items:flex-start; gap:14px;
margin:28px 0 0; padding:18px 20px;
background:var(--s1-ac-tint); border:1px solid var(--s1-ac-soft); border-radius:14px;
}
.w22s1-note .ic{ flex:0 0 auto; color:var(--s1-ac); margin-top:1px; }
.w22s1-note .ic svg{ width:22px; height:22px; }
.w22s1-note p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--s1-ink2); }
.w22s1-note strong{ display:block; color:var(--s1-ac-ink); font-weight:700; }
/* CTA */
.w22s1-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.w22s1-btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--font-head); font-weight:700; font-size:15.5px; letter-spacing:-.01em;
padding:15px 26px; border-radius:11px; border:1px solid transparent;
transition:background .22s, border-color .22s, color .22s, box-shadow .22s;
}
.w22s1-btn svg{ flex:0 0 auto; width:18px; height:18px; }
.w22s1-btn--primary{ background:var(--s1-ac); border-color:var(--s1-ac); color:#fff; }
.w22s1-btn--primary:hover{ background:var(--s1-ac-ink); border-color:var(--s1-ac-ink); color:#fff; box-shadow:0 10px 24px -14px rgba(232,78,110,.9); }
.w22s1-btn--ghost{ background:#fff; border-color:var(--s1-ac); color:var(--s1-ac-ink); }
.w22s1-btn--ghost:hover{ background:var(--s1-ac-tint); color:var(--s1-ac-ink); }
/* Hàng tin cậy */
.w22s1-trust{ display:flex; flex-wrap:wrap; gap:0; margin:36px 0 0; }
.w22s1-trust li{ flex:1 1 0; min-width:138px; padding:0 14px; border-left:1px solid var(--s1-line); }
.w22s1-trust li:first-child{ padding-left:0; border-left:0; }
.w22s1-trust .hd{ display:flex; align-items:center; gap:8px; }
.w22s1-trust .hd svg{ flex:0 0 auto; width:18px; height:18px; color:var(--s1-ac); }
.w22s1-trust b{ font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--s1-navy); line-height:1.25; text-wrap:balance; }
.w22s1-trust p{ margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--s1-ink2); }
/* =========================================================================
CỘT PHẢI — NEED EXPLORER
========================================================================= */
.w22s1-explorer{ position:relative; aspect-ratio:83/88; min-width:0; }
.w22s1-orbit{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; }
.w22s1-orbit ellipse{ fill:none; stroke:var(--s1-ac-line); stroke-width:1.2; stroke-dasharray:2 7; stroke-linecap:round; opacity:.85; }
.w22s1-orbit circle{ fill:var(--s1-ac-line); transition:fill .25s, r .25s; }
.w22s1-orbit circle.is-on{ fill:var(--s1-ac); }
/* --- Đường nối mục tiêu → website ----------------------------------------
Mỗi mục tiêu có một đường riêng chạy vào giữa khung website. Đường nền luôn
hiện, rất mờ. Vệt sáng CHỈ chạy trên đường của mục tiêu đang chọn, và chạy
THEO MỘT CHIỀU từ thẻ vào website — gợi việc nhu cầu đang được đưa vào trang,
không phải vòng xoay quanh trục. */
.w22s1-orbit .lnk{
fill:none; stroke:var(--s1-ac); stroke-width:1.2; stroke-opacity:.22;
stroke-dasharray:3 7; stroke-linecap:round;
}
.w22s1-orbit .lnk-sig{
fill:none; stroke:var(--s1-ac); stroke-width:1.9; stroke-linecap:round;
stroke-dasharray:14 86; stroke-opacity:0;
}
/* --- Vệt sáng chạy vòng quanh quỹ đạo ------------------------------------
Ba lớp cùng chung điểm đầu, độ dài tăng dần và mờ dần: lớp dài hơn thò ra
phía sau nên thành cái đuôi tan dần như vệt sao băng, không phải một đoạn
gạch cứng chạy vòng. Rất chậm (14 giây một vòng) để chỉ thấy khi để ý. */
.w22s1-orbit .orb{
fill:none; stroke:var(--s1-ac); stroke-linecap:round;
stroke-opacity:0; /* mặc định tắt; chỉ bật khi máy cho phép chuyển động */
}
.w22s1-orbit .orb--head{ stroke-width:2.1; stroke-dasharray:7 993; }
.w22s1-orbit .orb--body{ stroke-width:1.7; stroke-dasharray:20 980; }
.w22s1-orbit .orb--tail{ stroke-width:1.3; stroke-dasharray:46 954; }
@media (prefers-reduced-motion:no-preference){
.w22s1-orbit .orb{ animation:w22s1-orbit 14s linear infinite; }
.w22s1-orbit .orb--head{ stroke-opacity:.95; }
.w22s1-orbit .orb--body{ stroke-opacity:.42; }
.w22s1-orbit .orb--tail{ stroke-opacity:.16; }
/* Rê chuột vào vùng khám phá thì vệt rõ hơn — chỉ đổi độ đậm, KHÔNG đổi thời
lượng để animation không nhảy cóc giữa chừng. */
.w22s1-explorer:hover .orb--head{ stroke-opacity:1; }
.w22s1-explorer:hover .orb--body{ stroke-opacity:.55; }
.w22s1-explorer:hover .orb--tail{ stroke-opacity:.24; }
.w22s1-explorer:hover .lnk{ stroke-opacity:.3; }
/* Chấm tại mục tiêu đang chọn thở rất nhẹ. */
.w22s1-orbit circle.is-on{ animation:w22s1-pulse 3s ease-in-out infinite; }
}
/* Đường nối của mục tiêu đang chọn chỉ SÁNG LÊN, không chạy — để trong khung
chỉ có đúng một thứ chuyển động, nhìn không rối. Giữ nét đứt cùng nhịp với
các đường còn lại, chỉ đậm hơn; để nét liền thì nó thô hẳn so với xung quanh. */
.w22s1-orbit .lnk-sig.is-on{ stroke-opacity:.5; stroke-dasharray:3 7; stroke-width:1.3; }
.w22s1-orbit .lnk,
.w22s1-orbit .lnk-sig,
.w22s1-orbit .orb{ transition:stroke-opacity .35s ease; }
@keyframes w22s1-orbit{
from{ stroke-dashoffset:0; }
to{ stroke-dashoffset:-1000; }
}
@keyframes w22s1-pulse{
0%,100%{ r:5; opacity:1; }
50%{ r:6.6; opacity:.6; }
}
/* Khung trình duyệt */
.w22s1-browser{
position:absolute; z-index:1; left:50%; top:27.5%; transform:translateX(-50%);
width:58%; min-width:250px;
background:#fff; border:1px solid var(--s1-line); border-radius:20px; overflow:hidden;
box-shadow:var(--s1-sh);
}
.w22s1-browser__bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#fff; border-bottom:1px solid var(--s1-line); }
.w22s1-browser__bar i{ width:8px; height:8px; border-radius:50%; background:#D9DBE1; flex:0 0 auto; }
.w22s1-browser__view{ position:relative; aspect-ratio:4/3.05; background:#fff; }
/* Sáu ảnh minh hoạ chồng lên nhau, chỉ ảnh của mục tiêu đang chọn hiện ra.
Khung ngoài giữ đúng tỉ lệ ảnh (16:10) nên đổi ảnh không làm nhảy bố cục. */
/* Khung giữ đúng tỉ lệ 3:2 — sáu ảnh đều đã chuẩn hoá về tỉ lệ này (ảnh nào
lệch thì đệm nền trong suốt chứ không cắt), nên đổi mục tiêu là ảnh mới hiện
ra đúng cùng một cỡ, không nhảy to nhỏ. */
.w22s1-shots{
position:absolute; z-index:1; left:50%; top:24%; transform:translateX(-50%);
width:62%; min-width:260px; aspect-ratio:3/2;
}
.w22s1-pv{
position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
opacity:0; visibility:hidden; transform:translateY(6px);
transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.w22s1-pv[data-on="1"]{ opacity:1; visibility:visible; transform:none; }
/* Thẻ mục tiêu */
.w22s1-goal{
position:absolute; z-index:2; width:19.5%; min-width:138px; max-width:170px;
display:block; text-align:center;
background:#fff; border:1px solid var(--s1-line); border-radius:17px; padding:16px 13px;
box-shadow:var(--s1-sh);
transition:border-color .25s, box-shadow .25s, background .25s, transform .25s;
}
.w22s1-goal:hover{ border-color:var(--s1-ac); box-shadow:var(--s1-sh-hi); transform:translateY(-3px); }
.w22s1-goal[aria-pressed="true"]{ border-color:var(--s1-ac); background:var(--s1-ac-tint); box-shadow:0 0 0 3px var(--s1-ac-soft), var(--s1-sh-hi); }
.w22s1-goal .ic{
width:40px; height:40px; margin:0 auto 10px; border-radius:50%;
background:var(--s1-ac-soft); color:var(--s1-ac); display:grid; place-items:center;
transition:background .25s, color .25s;
}
.w22s1-goal .ic svg{ width:20px; height:20px; }
.w22s1-goal:hover .ic,
.w22s1-goal[aria-pressed="true"] .ic{ background:var(--s1-ac); color:#fff; }
.w22s1-goal b{ display:block; font-family:var(--font-head); font-weight:700; font-size:13.5px; line-height:1.25; color:var(--s1-navy); text-wrap:balance; }
.w22s1-goal small{ display:block; margin-top:6px; font-size:11.5px; line-height:1.45; color:var(--s1-ink2); }
.w22s1-goal--g1{ top:0; left:50%; transform:translateX(-50%); }
.w22s1-goal--g1:hover{ transform:translateX(-50%) translateY(-3px); }
.w22s1-goal--g2{ top:27%; left:0; }
.w22s1-goal--g3{ top:27%; right:0; }
.w22s1-goal--g4{ top:67%; left:2%; }
.w22s1-goal--g5{ top:67%; right:2%; }
.w22s1-goal--g6{ bottom:0; left:50%; transform:translateX(-50%); }
.w22s1-goal--g6:hover{ transform:translateX(-50%) translateY(-3px); }
/* Dòng hướng dẫn cuối */
.w22s1-hintline{
display:flex; align-items:center; justify-content:center; gap:9px;
margin:26px 0 0; font-size:14.5px; color:var(--s1-ink2); text-align:center;
}
.w22s1-hintline svg{ flex:0 0 auto; width:18px; height:18px; color:var(--s1-ac); }
/* =========================================================================
PREVIEW — giao diện minh hoạ dựng bằng HTML/CSS (không dùng ảnh, không
thương hiệu thật) nên nhẹ và không gây xê dịch bố cục khi đổi.
========================================================================= */
.w22s1-pv{ font-size:10px; color:var(--s1-navy); }
.w22s1-pv .nav{ display:flex; align-items:center; gap:10px; padding:9px 14px; background:#151A24; color:#fff; }
.w22s1-pv .nav b{ font-family:var(--font-head); font-weight:700; font-size:10px; letter-spacing:.06em; }
.w22s1-pv .nav ul{ display:flex; gap:11px; margin-left:auto; font-size:8.5px; color:#C8CCD6; }
.w22s1-pv .nav ul li:first-child{ color:#fff; }
.w22s1-pv .body{ flex:1; min-height:0; padding:14px; display:flex; gap:12px; }
.w22s1-pv .col{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
/* Preview nào nội dung bám mép trên thì thêm .top cho .body */
.w22s1-pv .body.top{ align-items:flex-start; }
.w22s1-pv .body.top .col,
.w22s1-pv .body.top .card{ justify-content:flex-start; align-self:stretch; }
.w22s1-pv h4{ font-family:var(--font-head); font-weight:800; font-size:14px; line-height:1.2; letter-spacing:-.02em; margin:0 0 6px; }
.w22s1-pv .txt{ font-size:8.5px; line-height:1.5; color:var(--s1-ink2); }
.w22s1-pv .btn{ display:inline-block; margin-top:9px; padding:5px 11px; border-radius:5px; background:var(--s1-ac); color:#fff; font-size:8.5px; font-weight:700; width:max-content; }
/* Khối "ảnh" trong preview: cụm nhà cao tầng gợi hình, dựng thuần CSS */
.w22s1-pv .ph{ flex:1.05; border-radius:7px; background:linear-gradient(170deg,#EDF1F7 0,#D5DDEA 55%,#C2CDDE 100%); position:relative; overflow:hidden; min-height:0; }
.w22s1-pv .ph::before{
content:""; position:absolute; left:12%; bottom:0; width:32%; top:34%;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,transparent 3px 8px),
repeating-linear-gradient(0deg,rgba(255,255,255,.42) 0 3px,transparent 3px 9px),
#C9D4E3;
}
.w22s1-pv .ph::after{
content:""; position:absolute; right:14%; bottom:0; width:38%; top:16%;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,transparent 3px 9px),
repeating-linear-gradient(0deg,rgba(255,255,255,.45) 0 3px,transparent 3px 10px),
#BCC9DB;
}
.w22s1-pv .stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--s1-line); }
.w22s1-pv .stats div{ padding:9px 6px; text-align:center; border-left:1px solid var(--s1-line); }
.w22s1-pv .stats div:first-child{ border-left:0; }
.w22s1-pv .stats b{ display:block; font-family:var(--font-head); font-weight:800; font-size:12px; }
.w22s1-pv .stats small{ display:block; margin-top:2px; font-size:7.5px; color:var(--s1-mut); }
/* mảnh giao diện dùng lại giữa các preview */
.w22s1-pv .body.vert{ flex-direction:column; gap:9px; }
.w22s1-pv .foot{ display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:auto; padding-top:9px; border-top:1px solid var(--s1-line); }
.w22s1-pv .foot .btn{ margin-top:0; }
.w22s1-pv .card{ border:1px solid var(--s1-line); border-radius:7px; padding:8px; background:#fff; }
.w22s1-pv .line{ height:6px; border-radius:3px; background:#EDEFF3; }
.w22s1-pv .line+.line{ margin-top:5px; }
.w22s1-pv .line.w70{ width:70%; }
.w22s1-pv .line.w50{ width:50%; }
.w22s1-pv .field{ height:17px; border-radius:5px; border:1px solid var(--s1-line); background:#FAFAFB; }
.w22s1-pv .field+.field{ margin-top:6px; }
.w22s1-pv .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.w22s1-pv .prod .thumb{ display:block; aspect-ratio:1/.82; border-radius:5px; background:linear-gradient(140deg,#EDF0F5,#D8DEE9); margin-bottom:6px; }
.w22s1-pv .prod b{ display:block; font-size:8.5px; font-weight:700; }
.w22s1-pv .prod span{ display:block; margin-top:2px; font-size:8.5px; color:var(--s1-ac-ink); font-weight:700; }
.w22s1-pv .cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.w22s1-pv .cal i{ aspect-ratio:1; border-radius:4px; background:#F1F3F7; }
.w22s1-pv .cal i.on{ background:var(--s1-ac); }
.w22s1-pv .cal i.dim{ background:#F8F9FB; }
.w22s1-pv .slots{ display:flex; flex-direction:column; gap:5px; }
.w22s1-pv .slots span{ padding:4px 7px; border-radius:5px; border:1px solid var(--s1-line); font-size:8px; text-align:center; }
.w22s1-pv .slots span.on{ border-color:var(--s1-ac); background:var(--s1-ac-soft); color:var(--s1-ac-ink); font-weight:700; }
.w22s1-pv .badge{ display:inline-block; padding:3px 9px; border-radius:999px; background:var(--s1-ac-soft); color:var(--s1-ac-ink); font-size:8px; font-weight:700; width:max-content; }
.w22s1-pv .ticks{ margin-top:8px; display:flex; flex-direction:column; gap:5px; font-size:8.5px; color:var(--s1-ink2); }
.w22s1-pv .ticks span{ display:flex; align-items:center; gap:6px; }
.w22s1-pv .ticks i{ width:11px; height:11px; border-radius:50%; background:var(--s1-ac-soft); flex:0 0 auto; }
.w22s1-pv .chips{ display:flex; gap:6px; }
.w22s1-pv .chips span{ padding:3px 9px; border-radius:999px; border:1px solid var(--s1-line); font-size:8px; color:var(--s1-ink2); }
.w22s1-pv .chips span.on{ border-color:var(--s1-ac); background:var(--s1-ac-soft); color:var(--s1-ac-ink); font-weight:700; }
.w22s1-pv .minis{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:8px; }
.w22s1-pv .minis span{ display:block; border:1px solid var(--s1-line); border-radius:6px; padding:6px 7px; font-size:7.5px; color:var(--s1-mut); }
.w22s1-pv .minis b{ display:block; font-family:var(--font-head); font-weight:800; font-size:12px; color:var(--s1-navy); }
.w22s1-pv .side{ width:26%; flex:0 0 auto; border-right:1px solid var(--s1-line); padding:4px 10px 4px 0; display:flex; flex-direction:column; gap:6px; }
.w22s1-pv .side i{ height:7px; border-radius:3px; background:#EDEFF3; }
.w22s1-pv .side i.on{ background:var(--s1-ac-soft); }
.w22s1-pv .chart{ display:flex; align-items:flex-end; gap:6px; height:56px; margin-top:8px; }
.w22s1-pv .chart i{ flex:1; border-radius:3px 3px 0 0; background:var(--s1-ac-soft); }
.w22s1-pv .chart i.hi{ background:var(--s1-ac); }
.w22s1-pv .rows{ margin-top:9px; display:flex; flex-direction:column; gap:5px; }
.w22s1-pv .rows i{ height:9px; border-radius:3px; background:#F1F3F7; }
/* =========================================================================
RESPONSIVE
========================================================================= */
@media (max-width:1180px){
.w22s1-browser{ width:58%; }
.w22s1-goal{ min-width:132px; padding:16px 12px; }
.w22s1-goal small{ font-size:12px; }
}
@media (max-width:1024px){
.w22s1-grid{ grid-template-columns:minmax(0,1fr); gap:44px; }
.w22s1-desc{ max-width:60ch; }
}
@media (max-width:768px){
/* Màn hẹp bỏ bố cục quỹ đạo: ảnh thôi nổi tuyệt đối (nếu giữ thì nó nằm dưới
lưới thẻ và bị che gần hết), xếp lại thành một cột — chọn mục tiêu ở trên,
ảnh hiện ngay dưới. */
.w22s1-explorer{ aspect-ratio:auto; display:flex; flex-direction:column; }
.w22s1-orbit{ display:none; }
/* relative chứ KHÔNG phải static: sáu ảnh bên trong là absolute, mất mốc neo
này thì chúng nhảy ra neo vào khối bao ngoài và nằm chồng giữa lưới thẻ. */
.w22s1-shots{
position:relative; inset:auto; transform:none; order:2;
width:100%; min-width:0; margin-top:18px;
}
.w22s1-goals{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:0; order:1; }
.w22s1-goal{ position:static; width:auto; min-width:0; max-width:none; transform:none; padding:16px 14px; }
.w22s1-goal--g1:hover,
.w22s1-goal--g6:hover{ transform:translateY(-3px); }
.w22s1-cta .w22s1-btn{ flex:1 1 100%; }
.w22s1-trust{ gap:14px; }
.w22s1-trust li{ flex:1 1 100%; padding:0 0 0 14px; border-left:2px solid var(--s1-ac-soft); }
.w22s1-trust li:first-child{ padding-left:14px; border-left:2px solid var(--s1-ac-soft); }
.w22s1-eyebrow{ font-size:11px; letter-spacing:.08em; }
.w22s1-no{ font-size:38px; }
.w22s1-rule{ height:34px; }
.w22s1-top{ gap:13px; }
}
@media (max-width:359px){
.w22s1-goals{ grid-template-columns:minmax(0,1fr); }
}
/* --- Hiệu ứng vào của Section 01 ------------------------------------------
Chỉ chạy MỘT lần khi trang mở. Trạng thái nghỉ vẫn là "đã hiện" — hiệu ứng
nằm trong @keyframes với fill-mode backwards, nên nếu trình duyệt không chạy
animation thì chữ vẫn đọc được ngay, không bao giờ kẹt ở trạng thái ẩn. */
@media (prefers-reduced-motion:no-preference){
.w22s0{ animation:w22s0-drop .62s cubic-bezier(.22,.85,.3,1) backwards; }
.w22s1-copy > *:not(.w22s0){ animation:w22s1-rise .5s ease-out backwards; }
.w22s1-copy > *:nth-child(2){ animation-delay:.10s; }
.w22s1-copy > *:nth-child(3){ animation-delay:.16s; }
.w22s1-copy > *:nth-child(4){ animation-delay:.22s; }
.w22s1-copy > *:nth-child(5){ animation-delay:.28s; }
.w22s1-copy > *:nth-child(6){ animation-delay:.34s; }
.w22s1-copy > *:nth-child(7){ animation-delay:.40s; }
.w22s1-explorer{ animation:w22s1-zoom .6s ease-out backwards; animation-delay:.12s; }
/* Thẻ mục tiêu CHỈ mờ dần, không animate transform: hai thẻ trên/dưới đang
dùng translateX(-50%) để căn giữa, đụng vào là chúng nhảy lệch. */
.w22s1-goal{ animation:w22s1-fade .45s ease-out backwards; }
.w22s1-goal:nth-of-type(1){ animation-delay:.30s; }
.w22s1-goal:nth-of-type(2){ animation-delay:.36s; }
.w22s1-goal:nth-of-type(3){ animation-delay:.42s; }
.w22s1-goal:nth-of-type(4){ animation-delay:.48s; }
.w22s1-goal:nth-of-type(5){ animation-delay:.54s; }
.w22s1-goal:nth-of-type(6){ animation-delay:.60s; }
}
@keyframes w22s0-drop{
/* Góc nghiêng lấy từ biến --s0-rot nên khi khổ màn hình đổi góc, hiệu ứng
kết thúc đúng góc đó, không nhảy về giá trị khác. */
from{ opacity:0; transform:rotate(calc(var(--s0-rot) - 2deg)) translateY(7px); }
to{ opacity:1; transform:rotate(var(--s0-rot)) translateY(0); }
}
@keyframes w22s1-fade{
from{ opacity:0; }
to{ opacity:1; }
}
@keyframes w22s1-rise{
from{ opacity:0; transform:translateY(12px); }
to{ opacity:1; transform:none; }
}
@keyframes w22s1-zoom{
from{ opacity:0; transform:scale(.98); }
to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
.w22s1-goal, .w22s1-pv, .w22s1-btn, .w22s1-orbit circle{ transition:none; }
.w22s1-goal:hover, .w22s1-goal--g1:hover, .w22s1-goal--g6:hover{ transform:none; }
}
/* =========================================================================
SECTION 02 — GỢI Ý WEBSITE PHÙ HỢP (need finder)
Nhu cầu của bạn → loại website phù hợp → những phần nên có → ví dụ thực tế.
Hệ màu bám đúng nhận diện Web22: accent coral duy nhất, không màu nhấn thứ hai.
Prefix cô lập: .w22s2- (KHÔNG đụng tới .w22s1- của section 01)
========================================================================= */
.w22s2{
--s2-ac:var(--accent);
--s2-ac-ink:var(--accent-ink);
--s2-ac-soft:var(--accent-soft);
--s2-ac-tint:#FFF7F9;
--s2-ink:var(--ink);
--s2-ink2:var(--ink-3);
--s2-mut:var(--ink-4);
--s2-line:var(--line);
--s2-soft:var(--bg-soft);
--s2-sh:0 10px 26px -20px rgba(20,21,26,.26);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s2-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,2.4vw,34px); }
/* ---------------- Đầu khối ---------------- */
.w22s2-head{
display:grid; grid-template-columns:auto minmax(0,1.05fr) minmax(0,.85fr) minmax(0,.62fr);
gap:clamp(16px,2.2vw,34px); align-items:start; margin-bottom:clamp(28px,3.2vw,46px);
}
.w22s2-no{
font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.9;
font-size:clamp(42px,4.4vw,62px); color:var(--s2-ac); opacity:.4;
}
.w22s2-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s2-ac);
}
.w22s2-h2{
font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06;
font-size:clamp(29px,3.7vw,52px); color:var(--s2-ink); margin:12px 0 0;
}
.w22s2-h2 span{ color:var(--s2-ac); }
.w22s2-lead{ margin:0; padding-top:6px; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s2-ink2); }
.w22s2-anno{ margin:0; padding-top:4px; font-size:14px; font-style:italic; line-height:1.45; color:var(--s2-ac); text-align:right; }
.w22s2-anno svg{ display:block; width:58px; height:22px; margin:5px 8px 0 auto; color:var(--s2-ac); }
/* ---------------- Lưới 5 cột ---------------- */
.w22s2-cards,
.w22s2-links,
.w22s2-panels{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.2vw,18px); }
/* Thẻ nhu cầu */
.w22s2-card{
position:relative; text-align:left;
display:flex; flex-direction:column; gap:12px;
background:#fff; border:1px solid var(--s2-line); border-radius:18px; padding:22px 20px;
box-shadow:var(--s2-sh);
transition:border-color .25s, box-shadow .25s, background .25s;
}
.w22s2-card:hover{ border-color:var(--s2-ac); }
.w22s2-card[aria-pressed="true"]{ border-color:var(--s2-ac); box-shadow:0 0 0 2px var(--s2-ac-soft), var(--s2-sh); }
.w22s2-card .hd{ display:flex; align-items:center; gap:13px; }
.w22s2-card .ic{
width:44px; height:44px; border-radius:13px; flex:0 0 auto;
background:var(--s2-ac-soft); color:var(--s2-ac); display:grid; place-items:center;
}
.w22s2-card .ic svg{ width:22px; height:22px; }
.w22s2-card b{ display:block; min-width:0; font-family:var(--font-head); font-weight:700; font-size:15.5px; line-height:1.3; color:var(--s2-ink); text-wrap:balance; }
.w22s2-card small{ display:block; margin-top:-2px; font-size:12.5px; line-height:1.55; color:var(--s2-ink2); }
.w22s2-card .chk{
position:absolute; top:0; left:50%; transform:translate(-50%,-50%) scale(.4);
width:34px; height:34px; border-radius:50%; background:var(--s2-ac); color:#fff;
display:grid; place-items:center; opacity:0; pointer-events:none;
border:3px solid #fff; transition:opacity .22s, transform .22s;
}
.w22s2-card .chk svg{ width:16px; height:16px; }
.w22s2-card[aria-pressed="true"] .chk{ opacity:1; transform:translate(-50%,-50%) scale(1); }
/* Đoạn nối xuống bảng gợi ý */
.w22s2-link{ display:flex; flex-direction:column; align-items:center; padding:10px 0 12px; }
.w22s2-link .dot{ width:7px; height:7px; border-radius:50%; background:var(--s2-ac); flex:0 0 auto; }
.w22s2-link .ln{ width:1px; height:12px; background:var(--s2-line); flex:0 0 auto; }
.w22s2-link .cap{
padding:5px 13px; border-radius:999px; background:var(--s2-ac-soft); color:var(--s2-ac);
font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
/* Bảng gợi ý loại website */
.w22s2-panel{
display:flex; flex-direction:column; min-width:0;
background:#fff; border:1px solid var(--s2-line); border-radius:16px; overflow:hidden;
box-shadow:var(--s2-sh); transition:border-color .25s, box-shadow .25s;
}
.w22s2-panel[data-on="1"]{ border-color:var(--s2-ac); box-shadow:0 0 0 3px var(--s2-ac-soft), var(--s2-sh); }
.w22s2-panel .hd{
background:var(--s2-ac); color:#fff; text-align:center; padding:13px 10px;
font-family:var(--font-head); font-weight:800; font-size:13.5px; letter-spacing:.02em; text-transform:uppercase;
}
.w22s2-panel .bd{ flex:1; display:flex; flex-direction:column; padding:15px 15px 17px; }
.w22s2-panel .lb{
margin:0 0 12px; text-align:center; font-size:10.5px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--s2-ac);
}
.w22s2-panel .ft{ margin:0 0 14px; display:flex; flex-direction:column; gap:9px; }
.w22s2-panel .ft li{ display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.4; color:var(--s2-ink); }
.w22s2-panel .ft svg{ flex:0 0 auto; width:15px; height:15px; margin-top:2px; color:var(--s2-ac); }
.w22s2-panel .cta{
margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
padding:12px 12px; border-radius:10px; border:1px solid var(--s2-ac);
background:#fff; color:var(--s2-ac);
font-family:var(--font-head); font-weight:700; font-size:13.5px;
transition:background .22s, color .22s, border-color .22s;
}
.w22s2-panel .cta svg{ width:15px; height:15px; flex:0 0 auto; }
.w22s2-panel .cta:hover{ background:var(--s2-ac-ink); border-color:var(--s2-ac-ink); color:#fff; }
.w22s2-panel[data-on="1"] .cta{ background:var(--s2-ac); color:#fff; }
.w22s2-panel[data-on="1"] .cta:hover{ background:var(--s2-ac-ink); border-color:var(--s2-ac-ink); }
/* Ảnh minh hoạ giao diện, dựng thuần CSS nên không cần tải asset */
/* Ảnh minh hoạ đã vẽ sẵn khung trình duyệt nên bỏ viền và nền của khung cũ. */
.w22s2-pv{
display:block; width:100%; height:auto; margin-bottom:14px;
aspect-ratio:4/3; object-fit:contain;
}
.w22s2-pv .top{ display:flex; align-items:center; gap:5px; padding:5px 7px; border-bottom:1px solid var(--s2-line); }
.w22s2-pv .top b{ font-family:var(--font-head); font-weight:800; font-size:7.5px; color:var(--s2-ink); letter-spacing:.02em; }
.w22s2-pv .top .m{ flex:1; display:flex; gap:4px; justify-content:flex-end; }
.w22s2-pv .top .m i{ width:12px; height:3px; border-radius:2px; background:#E9EBEF; }
.w22s2-pv .top--dark{ background:#151A24; border-bottom-color:#151A24; }
.w22s2-pv .top--dark b{ color:#fff; }
.w22s2-pv .top--dark .m i{ background:rgba(255,255,255,.35); }
.w22s2-pv .in{ flex:1; min-height:0; padding:7px; display:flex; gap:6px; }
.w22s2-pv .in--col{ flex-direction:column; }
.w22s2-pv .cl{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.w22s2-pv .tt{ display:block; height:5px; border-radius:3px; background:#D3D7DF; }
.w22s2-pv .tt+.tt{ margin-top:4px; width:66%; }
.w22s2-pv .sm{ display:block; height:3px; border-radius:2px; background:#EDEFF3; margin-top:5px; }
.w22s2-pv .pill{ display:block; margin-top:7px; width:36px; height:9px; border-radius:3px; background:var(--s2-ac); }
.w22s2-pv .img{ flex:1; min-width:0; border-radius:5px; background:linear-gradient(150deg,#E9EDF4,#C7D1E0); }
.w22s2-pv .img--dark{ background:linear-gradient(150deg,#333B4D,#151A24); }
.w22s2-pv .row{ display:flex; gap:5px; }
.w22s2-pv .row>*{ flex:1; min-width:0; }
.w22s2-pv .box{ display:flex; flex-direction:column; border:1px solid var(--s2-line); border-radius:4px; padding:4px; }
.w22s2-pv .box .th{ display:block; flex:1; min-height:16px; border-radius:3px; background:linear-gradient(150deg,#EDF0F5,#D8DEE9); margin-bottom:4px; }
.w22s2-pv .box .pr{ display:block; height:3px; width:62%; border-radius:2px; background:var(--s2-ac); opacity:.55; }
.w22s2-pv .strip{ display:flex; gap:4px; margin-top:auto; padding-top:6px; border-top:1px solid var(--s2-line); }
.w22s2-pv .strip i{ flex:1; height:9px; border-radius:2px; background:#F1F3F7; }
.w22s2-pv .side{ width:26%; flex:0 0 auto; background:#151A24; border-radius:4px; padding:5px 4px; display:flex; flex-direction:column; gap:4px; }
.w22s2-pv .side i{ height:3px; border-radius:2px; background:rgba(255,255,255,.28); }
.w22s2-pv .side i.on{ background:var(--s2-ac); }
.w22s2-pv .bars{ display:flex; align-items:flex-end; gap:3px; height:28px; margin-top:6px; }
.w22s2-pv .bars i{ flex:1; border-radius:2px 2px 0 0; background:var(--s2-ac-soft); }
.w22s2-pv .bars i.hi{ background:var(--s2-ac); }
/* ---------------- Dải tư vấn cuối khối ---------------- */
.w22s2-bar{
display:flex; align-items:center; gap:clamp(16px,2vw,28px); flex-wrap:wrap;
margin-top:clamp(26px,3vw,42px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px);
background:var(--s2-ac-tint); border:1px solid var(--s2-ac-soft); border-radius:18px;
}
.w22s2-bar__ic{ width:52px; height:52px; border-radius:14px; flex:0 0 auto; background:var(--s2-ac-soft); color:var(--s2-ac); display:grid; place-items:center; }
.w22s2-bar__ic svg{ width:25px; height:25px; }
.w22s2-bar__tx{ flex:1 1 360px; min-width:0; }
.w22s2-bar__tx h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(18px,1.6vw,22px); color:var(--s2-ink); margin:0; letter-spacing:-.02em; }
.w22s2-bar__tx p{ margin:7px 0 0; font-size:15px; line-height:1.6; color:var(--s2-ink2); }
.w22s2-bar__cta{
flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
padding:15px 26px; border-radius:11px; background:var(--s2-ac); color:#fff;
font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s, box-shadow .22s;
}
.w22s2-bar__cta:hover{ background:var(--s2-ac-ink); color:#fff; box-shadow:0 10px 24px -14px rgba(232,78,110,.9); }
.w22s2-bar__cta svg{ width:18px; height:18px; }
/* ---------------- Máy tính bảng: chọn nhu cầu rồi xem MỘT bảng ---------------- */
@media (max-width:1024px){
.w22s2-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s2-lead{ grid-column:2; padding-top:0; }
.w22s2-anno{ display:none; }
.w22s2-cards{
display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
padding:14px 2px 10px; margin:-14px -2px 0; scrollbar-width:none;
}
.w22s2-cards::-webkit-scrollbar{ display:none; }
.w22s2-card{ flex:0 0 auto; width:min(74vw,290px); scroll-snap-align:start; }
.w22s2-links{ display:flex; justify-content:center; }
.w22s2-link{ display:none; }
.w22s2-link[data-on="1"]{ display:flex; }
.w22s2-panels{ display:block; }
.w22s2-panel{ display:none; max-width:520px; margin:0 auto; }
.w22s2-panel[data-on="1"]{ display:flex; animation:w22s2In .26s ease both; }
.w22s2-panel .ft{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
.w22s2-panel .ft li{ font-size:13.5px; }
.w22s2-pv{ width:100%; max-width:400px; align-self:center; }
}
@keyframes w22s2In{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (max-width:768px){
.w22s2-head{ grid-template-columns:auto minmax(0,1fr); gap:12px 16px; margin-bottom:22px; }
.w22s2-no{ font-size:38px; }
.w22s2-bar{ flex-direction:column; align-items:flex-start; gap:16px; }
.w22s2-bar__tx{ flex:0 0 auto; width:100%; }
.w22s2-bar__cta{ width:100%; justify-content:center; }
.w22s2-panel .ft{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){
.w22s2-card, .w22s2-panel, .w22s2-panel .cta, .w22s2-card .chk{ transition:none; }
.w22s2-panel[data-on="1"]{ animation:none; }
}
/* =========================================================================
SECTION 03 — MẪU WEBSITE ĐÃ THIẾT KẾ
Trả lời "website của tôi có thể trông như thế nào": lưới dự án thật, lọc
theo ngành. Không phải khu khoe thành tích, không số liệu, không case study.
Prefix cô lập: .w22s3- (KHÔNG đụng .w22s1- và .w22s2-)
========================================================================= */
.w22s3{
--s3-ac:var(--accent);
--s3-ac-ink:var(--accent-ink);
--s3-ac-soft:var(--accent-soft);
--s3-ac-tint:#FFF7F9;
--s3-ink:var(--ink);
--s3-ink2:var(--ink-3);
--s3-mut:var(--ink-4);
--s3-line:var(--line);
--s3-soft:var(--bg-soft);
--s3-sh:0 10px 26px -20px rgba(20,21,26,.24);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s3-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,2.4vw,34px); }
/* ---------------- Đầu khối ---------------- */
.w22s3-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(280px,.62fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.6vw,36px);
}
.w22s3-no{
font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88;
font-size:clamp(42px,4.4vw,62px); color:var(--s3-ac); opacity:.4;
}
.w22s3-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s3-ac);
}
.w22s3-h2{
font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06;
font-size:clamp(29px,3.7vw,52px); color:var(--s3-ink); margin:10px 0 0;
}
.w22s3-h2 span{ color:var(--s3-ac); }
.w22s3-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s3-ink2); max-width:62ch; }
/* Hộp ghi chú bên phải */
.w22s3-note{
display:flex; align-items:flex-start; gap:14px;
padding:20px 22px; background:var(--s3-ac-tint);
border:1px solid var(--s3-ac-soft); border-radius:17px;
}
.w22s3-note .ic{
width:46px; height:46px; border-radius:13px; flex:0 0 auto;
background:#fff; color:var(--s3-ac); display:grid; place-items:center;
}
.w22s3-note .ic svg{ width:23px; height:23px; }
.w22s3-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--s3-ink); letter-spacing:-.01em; }
.w22s3-note p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--s3-ink2); }
/* ---------------- Thanh lọc ---------------- */
.w22s3-filter{
display:flex; flex-wrap:wrap; gap:10px;
margin:0 0 clamp(20px,2.2vw,30px);
}
.w22s3-chip{
display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px;
border:1px solid var(--s3-line); border-radius:9px; background:#fff; color:var(--s3-ink);
font-family:var(--font-head); font-weight:700; font-size:14px; white-space:nowrap;
transition:background .22s, border-color .22s, color .22s;
}
.w22s3-chip svg{ flex:0 0 auto; width:17px; height:17px; }
.w22s3-chip:hover{ border-color:var(--s3-ac); color:var(--s3-ac); }
.w22s3-chip[aria-pressed="true"]{ background:var(--s3-ac); border-color:var(--s3-ac); color:#fff; }
/* ---------------- Lưới dự án ---------------- */
.w22s3-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,24px); }
.w22s3-card{
display:flex; flex-direction:column; min-width:0; overflow:hidden;
background:#fff; border:1px solid var(--s3-line); border-radius:16px;
box-shadow:var(--s3-sh); transition:border-color .25s, box-shadow .25s;
animation:w22s3In .22s ease both;
}
.w22s3-card[hidden]{ display:none; }
.w22s3-card:hover{ border-color:var(--s3-ac); }
@keyframes w22s3In{ from{ opacity:0 } to{ opacity:1 } }
.w22s3-shot{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--s3-soft); border-bottom:1px solid var(--s3-line); }
.w22s3-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .3s ease; }
.w22s3-card:hover .w22s3-shot img{ transform:scale(1.02); }
.w22s3-body{ flex:1; display:flex; flex-direction:column; padding:16px 18px 18px; }
.w22s3-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.w22s3-name{ font-family:var(--font-head); font-weight:700; font-size:18px; line-height:1.25; color:var(--s3-ink); margin:0; min-width:0; }
.w22s3-type{ flex:0 0 auto; font-size:13px; color:var(--s3-ink2); }
.w22s3-goal{ display:flex; align-items:flex-start; gap:8px; margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--s3-ink2); }
.w22s3-goal svg{ flex:0 0 auto; width:15px; height:15px; margin-top:3px; color:var(--s3-ac); }
.w22s3-goal b{ font-weight:600; color:var(--s3-ink2); }
.w22s3-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:0; }
.w22s3-tags{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.w22s3-tags span{
padding:5px 10px; border-radius:7px; background:var(--s3-soft); border:1px solid var(--s3-line);
font-size:12px; color:var(--s3-ink2); white-space:nowrap;
}
.w22s3-link{
flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--s3-ac);
transition:color .2s;
}
.w22s3-link svg{ width:15px; height:15px; }
.w22s3-link:hover{ color:var(--s3-ac-ink); }
/* ---------------- Nút mở rộng ---------------- */
.w22s3-more{ margin-top:clamp(22px,2.6vw,34px); text-align:center; }
.w22s3-more a{
display:inline-flex; align-items:center; gap:10px;
padding:15px 30px; border-radius:11px; border:1px solid var(--s3-ac);
background:#fff; color:var(--s3-ac);
font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s, color .22s, border-color .22s;
}
.w22s3-more a:hover{ background:var(--s3-ac); border-color:var(--s3-ac); color:#fff; }
.w22s3-more svg{ width:18px; height:18px; }
.w22s3-empty{ margin:0; padding:34px 0; text-align:center; font-size:15px; color:var(--s3-ink2); }
/* ---------------- Máy tính bảng ---------------- */
@media (max-width:1024px){
.w22s3-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s3-note{ grid-column:1/-1; }
.w22s3-filter{
flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
padding-bottom:6px; margin-left:-2px; padding-left:2px; scrollbar-width:none;
}
.w22s3-filter::-webkit-scrollbar{ display:none; }
.w22s3-chip{ flex:0 0 auto; scroll-snap-align:start; }
.w22s3-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
.w22s3-head{ gap:12px 16px; }
.w22s3-no{ font-size:38px; }
.w22s3-grid{ grid-template-columns:minmax(0,1fr); }
.w22s3-more a{ width:100%; justify-content:center; }
}
@media (max-width:520px){
.w22s3-top{ flex-direction:column; gap:3px; }
.w22s3-foot{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (prefers-reduced-motion:reduce){
.w22s3-card, .w22s3-shot img, .w22s3-chip, .w22s3-link{ transition:none; }
.w22s3-card{ animation:none; }
.w22s3-card:hover .w22s3-shot img{ transform:none; }
}
/* =========================================================================
SECTION 04 — LÀM THEO MẪU BẠN THÍCH
Khách gửi mẫu giao diện đang thích, Web22 phân tích rồi thiết kế bản riêng.
Prefix cô lập: .w22s4- (KHÔNG đụng .w22s1- .w22s2- .w22s3-)
========================================================================= */
.w22s4{
--s4-ac:var(--accent);
--s4-ac-ink:var(--accent-ink);
--s4-ac-soft:var(--accent-soft);
--s4-ac-tint:#FFF7F9;
--s4-ink:var(--ink);
--s4-ink2:var(--ink-3);
--s4-mut:var(--ink-4);
--s4-line:var(--line);
--s4-soft:var(--bg-soft);
--s4-ok:#2B7A4B; --s4-ok-bg:#E7F4EC;
--s4-warn:#A8581F; --s4-warn-bg:#FBF0E3;
--s4-sh:0 10px 26px -20px rgba(20,21,26,.24);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s4-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,2.4vw,34px); }
/* ---------------- Đầu khối ---------------- */
.w22s4-head{
display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(26px,3vw,46px); align-items:start; margin-bottom:clamp(28px,3.2vw,46px);
}
.w22s4-intro{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,1.8vw,26px); align-items:start; }
.w22s4-no{
font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88;
font-size:clamp(42px,4.4vw,62px); color:var(--s4-ac); opacity:.4;
}
.w22s4-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s4-ac);
}
.w22s4-h2{
font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06;
font-size:clamp(29px,3.7vw,52px); color:var(--s4-ink); margin:10px 0 0;
}
.w22s4-h2 span{ color:var(--s4-ac); }
.w22s4-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s4-ink2); max-width:56ch; }
/* Hai điểm giá trị */
.w22s4-values{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
margin-top:clamp(20px,2.2vw,28px);
background:var(--s4-ac-tint); border:1px solid var(--s4-ac-soft); border-radius:17px; overflow:hidden;
}
.w22s4-values li{ display:flex; align-items:flex-start; gap:13px; padding:18px 20px; }
.w22s4-values li+li{ border-left:1px solid var(--s4-ac-soft); }
.w22s4-values .ic{
width:40px; height:40px; border-radius:50%; flex:0 0 auto;
background:#fff; color:var(--s4-ac); display:grid; place-items:center;
}
.w22s4-values .ic svg{ width:20px; height:20px; }
.w22s4-values b{ display:block; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--s4-ink); }
.w22s4-values p{ margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--s4-ink2); }
/* ---------------- Khu vực gửi mẫu ---------------- */
.w22s4-drop{
display:flex; flex-direction:column; align-items:center; text-align:center;
min-height:300px; padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,32px);
background:#fff; border:1.5px dashed var(--s4-ac); border-radius:20px;
transition:background .2s, border-color .2s;
}
.w22s4-drop.is-drag{ background:var(--s4-ac-soft); border-color:var(--s4-ac-ink); }
.w22s4-drop__ic{ color:var(--s4-ac); }
.w22s4-drop__ic svg{ width:54px; height:54px; }
.w22s4-drop h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,20px); color:var(--s4-ink); margin:14px 0 0; letter-spacing:-.02em; }
.w22s4-drop p{ margin:8px 0 0; font-size:14.5px; line-height:1.6; color:var(--s4-ink2); }
.w22s4-drop small{ display:block; margin-top:5px; font-size:13px; color:var(--s4-mut); }
.w22s4-pick{
display:inline-flex; align-items:center; gap:9px; margin-top:18px;
padding:13px 24px; border-radius:10px; background:var(--s4-ac); color:#fff; border:1px solid var(--s4-ac);
font-family:var(--font-head); font-weight:700; font-size:15px;
transition:background .2s, border-color .2s;
}
.w22s4-pick:hover{ background:var(--s4-ac-ink); border-color:var(--s4-ac-ink); }
.w22s4-pick svg{ width:18px; height:18px; }
.w22s4-file-input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Hàng file đã chọn */
.w22s4-picked{ width:100%; margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.w22s4-picked:empty{ display:none; }
.w22s4-frow{
display:flex; align-items:center; gap:11px; text-align:left;
padding:11px 13px; background:var(--s4-soft); border:1px solid var(--s4-line); border-radius:11px;
}
.w22s4-frow .fi{ width:34px; height:34px; border-radius:9px; flex:0 0 auto; background:var(--s4-ac-soft); color:var(--s4-ac); display:grid; place-items:center; }
.w22s4-frow .fi svg{ width:17px; height:17px; }
.w22s4-frow .fn{ flex:1; min-width:0; }
.w22s4-frow b{ display:block; font-size:13.5px; font-weight:600; color:var(--s4-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w22s4-frow small{ display:block; margin-top:2px; font-size:12px; color:var(--s4-mut); }
.w22s4-frow .rm{ flex:0 0 auto; width:30px; height:30px; border-radius:8px; color:var(--s4-mut); display:grid; place-items:center; transition:background .2s, color .2s; }
.w22s4-frow .rm:hover{ background:var(--s4-warn-bg); color:var(--s4-warn); }
.w22s4-frow .rm svg{ width:16px; height:16px; }
/* Thông báo trạng thái */
.w22s4-msg{ width:100%; margin-top:12px; padding:11px 14px; border-radius:10px; font-size:13.5px; line-height:1.55; text-align:left; }
.w22s4-msg[hidden]{ display:none; }
.w22s4-msg--warn{ background:var(--s4-warn-bg); color:var(--s4-warn); }
.w22s4-msg--ok{ background:var(--s4-ok-bg); color:var(--s4-ok); }
/* Gửi link */
.w22s4-or{ width:100%; margin-top:18px; }
.w22s4-or > label{ display:block; font-size:14px; color:var(--s4-ink2); margin-bottom:9px; }
.w22s4-url{ display:flex; align-items:center; gap:9px; padding:6px 6px 6px 14px; background:#fff; border:1px solid var(--s4-line); border-radius:11px; transition:border-color .2s; }
.w22s4-url:focus-within{ border-color:var(--s4-ac); }
.w22s4-url > svg{ flex:0 0 auto; width:18px; height:18px; color:var(--s4-mut); }
.w22s4-url input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:14.5px; color:var(--s4-ink); padding:9px 0; }
.w22s4-url input::placeholder{ color:var(--s4-mut); }
.w22s4-go{ flex:0 0 auto; width:40px; height:40px; border-radius:9px; background:var(--s4-ac); color:#fff; display:grid; place-items:center; transition:background .2s; }
.w22s4-go:hover{ background:var(--s4-ac-ink); }
.w22s4-go svg{ width:17px; height:17px; }
/* ---------------- Quy trình xử lý mẫu ---------------- */
.w22s4-proc{
background:#fff; border:1px solid var(--s4-line); border-radius:20px;
padding:clamp(22px,2.4vw,32px); box-shadow:var(--s4-sh);
}
.w22s4-proc h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(18px,1.6vw,22px); color:var(--s4-ink); margin:0 0 clamp(20px,2.2vw,28px); letter-spacing:-.02em; }
.w22s4-steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); align-items:start; }
.w22s4-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 12px 18px; border:1px solid var(--s4-line); border-radius:14px; }
.w22s4-step__n{
position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
width:34px; height:34px; border-radius:50%; background:var(--s4-ac); color:#fff;
display:grid; place-items:center; border:3px solid #fff;
font-family:var(--font-head); font-weight:800; font-size:13px;
}
.w22s4-step__v{
width:100%; max-width:150px; aspect-ratio:16/11; margin-bottom:14px;
border:1px solid var(--s4-line); border-radius:9px; overflow:hidden;
display:flex; flex-direction:column; background:#fff;
}
.w22s4-step__v .bar{ display:flex; gap:3px; padding:5px 6px; border-bottom:1px solid var(--s4-line); }
.w22s4-step__v .bar i{ width:5px; height:5px; border-radius:50%; background:#E2E4E9; }
.w22s4-step__v .in{ flex:1; min-height:0; display:grid; place-items:center; padding:8px; background:var(--s4-soft); }
.w22s4-step__v .in svg{ width:26px; height:26px; color:var(--s4-ac); }
.w22s4-step b{ display:block; font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1.3; color:var(--s4-ink); text-wrap:balance; }
.w22s4-step p{ margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--s4-ink2); }
.w22s4-step__ar{
position:absolute; top:50%; right:calc(-1 * clamp(10px,1.2vw,18px) / 2 - 8px); transform:translateY(-50%);
color:var(--s4-ac); opacity:.6;
}
.w22s4-step__ar svg{ width:16px; height:16px; }
.w22s4-step:last-child .w22s4-step__ar{ display:none; }
/* ---------------- Dải cam kết ---------------- */
.w22s4-vow{
display:grid; grid-template-columns:minmax(190px,.7fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
margin-top:clamp(20px,2.2vw,30px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px);
background:var(--s4-ac-tint); border:1px solid var(--s4-ac-soft); border-radius:18px;
}
.w22s4-vow__hd{ display:flex; align-items:center; gap:14px; }
.w22s4-vow__hd .ic{ width:52px; height:52px; border-radius:15px; flex:0 0 auto; background:#fff; color:var(--s4-ac); display:grid; place-items:center; }
.w22s4-vow__hd .ic svg{ width:26px; height:26px; }
.w22s4-vow__hd b{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,20px); color:var(--s4-ink); line-height:1.25; letter-spacing:-.02em; }
.w22s4-vow__hd i{ font-style:normal; color:var(--s4-ac); }
.w22s4-vow li{ padding-left:16px; border-left:1px solid var(--s4-ac-soft); }
.w22s4-vow li .t{ display:flex; align-items:center; gap:8px; }
.w22s4-vow li .t svg{ flex:0 0 auto; width:16px; height:16px; color:var(--s4-ac); }
.w22s4-vow li b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--s4-ink); }
.w22s4-vow li p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--s4-ink2); }
/* ---------------- Chưa có mẫu ---------------- */
.w22s4-none{
display:flex; align-items:center; gap:clamp(14px,2vw,24px); flex-wrap:wrap;
max-width:900px; margin:clamp(20px,2.2vw,30px) auto 0;
padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px);
background:var(--s4-soft); border:1px solid var(--s4-line); border-radius:18px;
}
.w22s4-none__ic{ width:52px; height:52px; border-radius:15px; flex:0 0 auto; background:var(--s4-ac-soft); color:var(--s4-ac); display:grid; place-items:center; }
.w22s4-none__ic svg{ width:25px; height:25px; }
.w22s4-none__tx{ flex:1 1 320px; min-width:0; }
.w22s4-none__tx b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,20px); color:var(--s4-ink); letter-spacing:-.02em; }
.w22s4-none__tx p{ margin:6px 0 0; font-size:14.5px; line-height:1.6; color:var(--s4-ink2); }
.w22s4-none__cta{
flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
padding:14px 26px; border-radius:11px; background:var(--s4-ac); color:#fff;
font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s4-none__cta:hover{ background:var(--s4-ac-ink); color:#fff; }
.w22s4-none__cta svg{ width:18px; height:18px; }
/* ---------------- Máy tính bảng ---------------- */
@media (max-width:1024px){
.w22s4-head{ grid-template-columns:minmax(0,1fr); }
.w22s4-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; }
.w22s4-step__ar{ display:none; }
.w22s4-vow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s4-vow__hd{ grid-column:1/-1; }
.w22s4-vow li:nth-child(2){ padding-left:0; border-left:0; }
}
@media (max-width:768px){
.w22s4-intro{ grid-template-columns:auto minmax(0,1fr); gap:12px 16px; }
.w22s4-no{ font-size:38px; }
.w22s4-values{ grid-template-columns:minmax(0,1fr); }
.w22s4-values li+li{ border-left:0; border-top:1px solid var(--s4-ac-soft); }
.w22s4-steps{ grid-template-columns:minmax(0,1fr); gap:24px; }
.w22s4-step{ flex-direction:row; align-items:flex-start; text-align:left; gap:14px; padding:18px 16px 18px 20px; }
.w22s4-step__n{ position:static; transform:none; flex:0 0 auto; border-width:0; }
.w22s4-step__v{ display:none; }
.w22s4-vow{ grid-template-columns:minmax(0,1fr); }
.w22s4-vow li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--s4-ac-soft); }
.w22s4-none__cta{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s4-drop, .w22s4-pick, .w22s4-go, .w22s4-none__cta, .w22s4-frow .rm{ transition:none; }
}
/* =========================================================================
SECTION 05 — CHI PHÍ THIẾT KẾ WEBSITE
Bốn mức đầu tư trọn gói, bàn giao một lần. Giúp khách ước lượng ngân sách,
không phải bảng thuê bao. Prefix cô lập: .w22s5-
========================================================================= */
.w22s5{
--s5-ac:var(--accent);
--s5-ac-ink:var(--accent-ink);
--s5-ac-soft:var(--accent-soft);
--s5-ac-tint:#FFF7F9;
--s5-ink:var(--ink);
--s5-ink2:var(--ink-3);
--s5-mut:var(--ink-4);
--s5-line:var(--line);
--s5-soft:var(--bg-soft);
--s5-sh:0 10px 26px -20px rgba(20,21,26,.24);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s5-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* ---------------- Đầu khối ---------------- */
.w22s5-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(300px,.6fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(26px,3vw,42px);
}
.w22s5-no{
font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88;
font-size:clamp(42px,4.4vw,64px); color:var(--s5-ac); opacity:.4;
}
.w22s5-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s5-ac);
}
.w22s5-h2{
font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06;
font-size:clamp(29px,3.7vw,54px); color:var(--s5-ink); margin:10px 0 0;
}
.w22s5-h2 span{ color:var(--s5-ac); }
.w22s5-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s5-ink2); max-width:62ch; }
.w22s5-note{
display:flex; align-items:flex-start; gap:14px;
padding:20px 22px; background:var(--s5-ac-tint);
border:1px solid var(--s5-ac-soft); border-radius:17px;
}
.w22s5-note .ic{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--s5-ac); display:grid; place-items:center; }
.w22s5-note .ic svg{ width:23px; height:23px; }
.w22s5-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--s5-ink); letter-spacing:-.01em; }
.w22s5-note p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--s5-ink2); }
/* ---------------- Bốn mức đầu tư ---------------- */
.w22s5-plans{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.4vw,20px); align-items:stretch; }
.w22s5-plan{
position:relative; display:flex; flex-direction:column; text-align:center; min-width:0;
background:#fff; border:1px solid var(--s5-line); border-radius:18px;
padding:clamp(22px,2.2vw,30px) clamp(18px,1.8vw,26px);
box-shadow:var(--s5-sh); transition:border-color .25s;
}
.w22s5-plan:hover{ border-color:var(--s5-ac); }
.w22s5-plan--hot{ border-color:var(--s5-ac); border-width:2px; padding-top:calc(clamp(22px,2.2vw,30px) - 1px); }
.w22s5-plan__tag{
position:absolute; top:0; right:0;
padding:6px 14px; border-radius:0 16px 0 12px; background:var(--s5-ac); color:#fff;
font-family:var(--font-head); font-weight:800; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
}
.w22s5-plan__ic{ width:56px; height:56px; margin:0 auto 14px; border-radius:16px; background:var(--s5-ac-soft); color:var(--s5-ac); display:grid; place-items:center; }
.w22s5-plan__ic svg{ width:27px; height:27px; }
.w22s5-plan h3{ font-family:var(--font-head); font-weight:800; font-size:19px; line-height:1.25; color:var(--s5-ink); margin:0; letter-spacing:-.02em; }
/* Chừa đủ 4 dòng để mức giá của bốn gói thẳng hàng nhau. */
.w22s5-plan__note{ margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--s5-ink2); min-height:calc(1.55em * 4); }
.w22s5-plan__price{
font-family:var(--font-head); font-weight:900; letter-spacing:-.03em;
font-size:clamp(28px,2.7vw,36px); line-height:1.1; color:var(--s5-ac);
margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--s5-line);
}
.w22s5-plan__list{ margin:16px 0 20px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.w22s5-plan__list li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.45; color:var(--s5-ink); }
.w22s5-plan__list svg{ flex:0 0 auto; width:16px; height:16px; margin-top:1px; color:var(--s5-ac); }
.w22s5-plan__cta{
margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
padding:13px 12px; border-radius:10px; border:1px solid var(--s5-ac);
background:#fff; color:var(--s5-ac);
font-family:var(--font-head); font-weight:700; font-size:14px;
transition:background .22s, color .22s, border-color .22s;
}
.w22s5-plan__cta svg{ width:15px; height:15px; flex:0 0 auto; }
.w22s5-plan__cta:hover{ background:var(--s5-ac-ink); border-color:var(--s5-ac-ink); color:#fff; }
.w22s5-plan--hot .w22s5-plan__cta{ background:var(--s5-ac); color:#fff; }
.w22s5-plan--hot .w22s5-plan__cta:hover{ background:var(--s5-ac-ink); border-color:var(--s5-ac-ink); }
/* ---------------- Nằm trong gói thiết kế ---------------- */
.w22s5-inc{
display:grid; grid-template-columns:minmax(210px,.75fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
margin-top:clamp(20px,2.2vw,30px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px);
background:var(--s5-ac-tint); border:1px solid var(--s5-ac-soft); border-radius:18px;
}
.w22s5-inc__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); color:var(--s5-ink); letter-spacing:-.02em; line-height:1.25; }
.w22s5-inc__hd i{ display:block; margin-top:6px; font-style:normal; font-weight:700; font-size:14.5px; color:var(--s5-ac); }
.w22s5-inc__hd span{ display:block; width:44px; height:2px; background:var(--s5-ac); margin-top:14px; border-radius:2px; }
.w22s5-inc li{ padding-left:16px; border-left:1px solid var(--s5-ac-soft); }
.w22s5-inc li .ic{ width:42px; height:42px; border-radius:12px; background:#fff; color:var(--s5-ac); display:grid; place-items:center; margin-bottom:11px; }
.w22s5-inc li .ic svg{ width:21px; height:21px; }
.w22s5-inc li b{ display:block; font-family:var(--font-head); font-weight:700; font-size:14.5px; line-height:1.3; color:var(--s5-ink); }
.w22s5-inc li p{ margin:7px 0 10px; font-size:12.5px; line-height:1.55; color:var(--s5-ink2); }
.w22s5-inc li em{
display:inline-block; font-style:normal; padding:4px 11px; border-radius:7px;
background:var(--s5-ac-soft); color:var(--s5-ac); font-size:11.5px; font-weight:700;
}
/* ---------------- Điều gì làm giá thay đổi ---------------- */
.w22s5-why{
display:grid; grid-template-columns:minmax(190px,.7fr) repeat(5,minmax(0,1fr));
gap:clamp(12px,1.4vw,22px); align-items:start;
margin-top:clamp(16px,1.8vw,22px); padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,32px);
background:#fff; border:1px solid var(--s5-line); border-radius:18px; box-shadow:var(--s5-sh);
}
.w22s5-why__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,19px); color:var(--s5-ink); line-height:1.3; letter-spacing:-.02em; }
.w22s5-why__hd p{ margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--s5-ink2); }
.w22s5-why__hd span{ display:block; width:40px; height:2px; background:var(--s5-ac); margin-top:12px; border-radius:2px; }
.w22s5-why li{ display:flex; gap:11px; }
.w22s5-why__hd{ display:block !important; }
.w22s5-why li .ic{ width:36px; height:36px; border-radius:10px; flex:0 0 auto; background:var(--s5-soft); color:var(--s5-ac); display:grid; place-items:center; }
.w22s5-why li .ic svg{ width:18px; height:18px; }
.w22s5-why li b{ display:block; font-family:var(--font-head); font-weight:700; font-size:13.5px; line-height:1.3; color:var(--s5-ink); }
.w22s5-why li p{ margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--s5-ink2); }
/* ---------------- Kêu gọi cuối khối ---------------- */
.w22s5-cta{
display:flex; align-items:center; gap:clamp(14px,2vw,26px); flex-wrap:wrap;
max-width:1000px; margin:clamp(18px,2vw,26px) auto 0;
padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,32px);
background:var(--s5-ac-tint); border:1px solid var(--s5-ac-soft); border-radius:18px;
}
.w22s5-cta__ic{ width:52px; height:52px; border-radius:15px; flex:0 0 auto; background:#fff; color:var(--s5-ac); display:grid; place-items:center; }
.w22s5-cta__ic svg{ width:25px; height:25px; }
.w22s5-cta__tx{ flex:1 1 330px; min-width:0; }
.w22s5-cta__tx b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); color:var(--s5-ink); letter-spacing:-.02em; }
.w22s5-cta__tx p{ margin:6px 0 0; font-size:14.5px; line-height:1.6; color:var(--s5-ink2); }
.w22s5-cta__btn{
flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
padding:15px 28px; border-radius:11px; background:var(--s5-ac); color:#fff;
font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s5-cta__btn:hover{ background:var(--s5-ac-ink); color:#fff; }
.w22s5-cta__btn svg{ width:18px; height:18px; }
/* ---------------- Máy tính bảng ---------------- */
@media (max-width:1100px){
.w22s5-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s5-note{ grid-column:1/-1; }
.w22s5-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s5-inc{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s5-inc__hd{ grid-column:1/-1; }
.w22s5-inc li:nth-child(2){ padding-left:0; border-left:0; }
.w22s5-why{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s5-why__hd{ grid-column:1/-1; }
}
@media (max-width:768px){
.w22s5-head{ gap:12px 16px; }
.w22s5-no{ font-size:38px; }
.w22s5-plans{ grid-template-columns:minmax(0,1fr); }
.w22s5-inc{ grid-template-columns:minmax(0,1fr); }
.w22s5-inc li{ padding-left:0; border-left:0; padding-top:16px; border-top:1px solid var(--s5-ac-soft); }
.w22s5-why{ grid-template-columns:minmax(0,1fr); }
.w22s5-cta__btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s5-plan, .w22s5-plan__cta, .w22s5-cta__btn{ transition:none; }
}
/* =========================================================================
SECTION 06 — GIÁ TRỊ BẠN NHẬN ĐƯỢC
Với số tiền đã bỏ ra, khách nhận được một website hoàn chỉnh dùng được ngay.
Nhân vật chính là khung website ở giữa; 8 thẻ giá trị chỉ đứng giải thích.
Prefix cô lập: .w22s6-
========================================================================= */
.w22s6{
--s6-ac:var(--accent);
--s6-ac-ink:var(--accent-ink);
--s6-ac-soft:var(--accent-soft);
--s6-ac-tint:#FFF7F9;
--s6-ink:var(--ink);
--s6-ink2:var(--ink-3);
--s6-mut:var(--ink-4);
--s6-line:var(--line);
--s6-soft:var(--bg-soft);
--s6-sh:0 10px 26px -20px rgba(20,21,26,.24);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s6-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* ---------------- Đầu khối ---------------- */
.w22s6-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(300px,.62fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(26px,3vw,44px);
}
.w22s6-no{
font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88;
font-size:clamp(42px,4.4vw,64px); color:var(--s6-ac); opacity:.4;
}
.w22s6-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s6-ac);
}
.w22s6-h2{
font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06;
font-size:clamp(29px,3.7vw,54px); color:var(--s6-ink); margin:10px 0 0;
}
.w22s6-h2 span{ color:var(--s6-ac); }
.w22s6-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s6-ink2); max-width:60ch; }
.w22s6-note{
display:flex; align-items:flex-start; gap:14px;
padding:20px 22px; background:var(--s6-ac-tint);
border:1px solid var(--s6-ac-soft); border-radius:17px;
}
.w22s6-note .ic{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--s6-ac); display:grid; place-items:center; }
.w22s6-note .ic svg{ width:23px; height:23px; }
.w22s6-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--s6-ink); letter-spacing:-.01em; }
.w22s6-note p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--s6-ink2); }
/* ---------------- Bố cục: 4 thẻ trái · khung web · 4 thẻ phải ---------------- */
.w22s6-stage{
display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr) minmax(0,.85fr);
gap:clamp(14px,1.6vw,24px); align-items:center;
}
.w22s6-col{ display:flex; flex-direction:column; gap:clamp(12px,1.3vw,18px); }
.w22s6-item{
position:relative; display:flex; align-items:flex-start; gap:13px;
background:#fff; border:1px solid var(--s6-line); border-radius:16px;
padding:18px 20px; box-shadow:var(--s6-sh);
transition:border-color .25s;
}
.w22s6-item:hover{ border-color:var(--s6-ac); }
.w22s6-item .ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; background:var(--s6-ac-soft); color:var(--s6-ac); display:grid; place-items:center; }
.w22s6-item .ic svg{ width:22px; height:22px; }
.w22s6-item b{ display:block; font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1.3; color:var(--s6-ink); }
.w22s6-item p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--s6-ink2); }
.w22s6-item em{
display:inline-block; margin-top:9px; font-style:normal;
padding:3px 9px; border-radius:6px; background:var(--s6-soft); border:1px solid var(--s6-line);
font-size:11px; font-weight:600; color:var(--s6-mut);
}
/* Đoạn nối mảnh chạy về phía khung website ở giữa */
.w22s6-item::after{
content:""; position:absolute; top:50%; width:clamp(14px,1.6vw,24px); height:1px;
border-top:1px dashed var(--s6-ac); opacity:.6;
}
.w22s6-item::before{
content:""; position:absolute; top:50%; width:6px; height:6px; margin-top:-3px;
border-radius:50%; background:var(--s6-ac); opacity:.85;
}
.w22s6-col--l .w22s6-item::after{ left:100%; }
.w22s6-col--l .w22s6-item::before{ left:calc(100% - 3px); }
.w22s6-col--r .w22s6-item::after{ right:100%; }
.w22s6-col--r .w22s6-item::before{ right:calc(100% - 3px); }
/* ---------------- Khung website ở giữa ---------------- */
.w22s6-view{ position:relative; min-width:0; }
.w22s6-browser{
background:#fff; border:1px solid var(--s6-line); border-radius:20px; overflow:hidden;
box-shadow:0 22px 54px -34px rgba(20,21,26,.38);
}
.w22s6-browser__bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--s6-line); }
.w22s6-browser__bar i{ width:8px; height:8px; border-radius:50%; background:#DFE1E6; }
.w22s6-browser__bar i:first-child{ background:#FFD1DA; }
/* giao diện minh hoạ dựng thuần CSS, không dùng thương hiệu thật */
.w22s6-pv{ font-size:11px; color:var(--s6-ink); }
.w22s6-pv .nav{ display:flex; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--s6-line); }
.w22s6-pv .nav b{ font-family:var(--font-head); font-weight:800; font-size:13px; letter-spacing:-.02em; }
.w22s6-pv .nav b i{ font-style:normal; color:var(--s6-ac); }
.w22s6-pv .nav ul{ display:flex; gap:13px; margin-left:auto; font-size:10px; color:var(--s6-ink2); }
.w22s6-pv .nav ul li:first-child{ color:var(--s6-ac); font-weight:700; }
.w22s6-pv .nav .btn{ padding:6px 12px; border-radius:6px; background:var(--s6-ac); color:#fff; font-size:9.5px; font-weight:700; }
.w22s6-pv .hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:16px; padding:20px 16px; align-items:center; }
.w22s6-pv .hero h4{ font-family:var(--font-head); font-weight:800; font-size:clamp(15px,1.7vw,22px); line-height:1.2; letter-spacing:-.02em; margin:0; }
.w22s6-pv .hero p{ margin:9px 0 0; font-size:10.5px; line-height:1.55; color:var(--s6-ink2); }
.w22s6-pv .hero .row{ display:flex; gap:8px; margin-top:13px; }
.w22s6-pv .hero .b1{ padding:7px 13px; border-radius:6px; background:var(--s6-ac); color:#fff; font-size:10px; font-weight:700; }
.w22s6-pv .hero .b2{ padding:7px 13px; border-radius:6px; border:1px solid var(--s6-line); font-size:10px; font-weight:600; color:var(--s6-ink); }
.w22s6-pv .shot{ aspect-ratio:4/3; border-radius:10px; background:linear-gradient(155deg,#F1EDE8 0,#DFD8CF 48%,#CFC6BB 100%); position:relative; overflow:hidden; }
.w22s6-pv .shot::before{ content:""; position:absolute; left:8%; right:38%; bottom:12%; height:34%; border-radius:6px; background:rgba(255,255,255,.55); }
.w22s6-pv .shot::after{ content:""; position:absolute; right:10%; top:14%; width:26%; bottom:34%; border-radius:6px; background:rgba(255,255,255,.4); }
.w22s6-pv .feats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 16px 14px; }
.w22s6-pv .feats div{ display:flex; align-items:flex-start; gap:8px; min-width:0; }
.w22s6-pv .feats div > span:first-child{ width:22px; height:22px; border-radius:7px; flex:0 0 auto; background:var(--s6-ac-soft); color:var(--s6-ac); display:grid; place-items:center; }
.w22s6-pv .feats div > span:last-child{ flex:1; min-width:0; }
.w22s6-pv .feats svg{ width:12px; height:12px; }
.w22s6-pv .feats b{ display:block; font-size:10px; font-weight:700; }
.w22s6-pv .feats small{ display:block; margin-top:2px; font-size:8.5px; color:var(--s6-ink2); line-height:1.4; }
.w22s6-pv .grid{ border-top:1px solid var(--s6-line); padding:13px 16px 16px; }
.w22s6-pv .grid .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.w22s6-pv .grid .hd b{ font-family:var(--font-head); font-weight:800; font-size:11.5px; }
.w22s6-pv .grid .hd em{ font-style:normal; font-size:9.5px; color:var(--s6-ac); font-weight:700; }
.w22s6-pv .grid ul{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.w22s6-pv .grid li{ aspect-ratio:4/3; border-radius:8px; background:linear-gradient(150deg,#EFEBE6,#D8D1C8); }
/* Điện thoại chồng góc dưới phải */
.w22s6-phone{
position:absolute; right:2%; bottom:-6%; width:23%; min-width:132px; max-width:190px; z-index:2;
background:#14151A; border-radius:22px; padding:6px; box-shadow:0 24px 50px -26px rgba(20,21,26,.55);
}
.w22s6-phone__in{ background:#fff; border-radius:17px; overflow:hidden; }
.w22s6-phone .nav{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--s6-line); }
.w22s6-phone .nav b{ font-family:var(--font-head); font-weight:800; font-size:10px; }
.w22s6-phone .nav b i{ font-style:normal; color:var(--s6-ac); }
.w22s6-phone .nav span{ width:13px; height:2px; background:var(--s6-ink); border-radius:2px; box-shadow:0 4px 0 var(--s6-ink), 0 -4px 0 var(--s6-ink); }
.w22s6-phone .bd{ padding:11px 10px 13px; }
.w22s6-phone .bd h5{ font-family:var(--font-head); font-weight:800; font-size:11.5px; line-height:1.25; margin:0; letter-spacing:-.02em; }
.w22s6-phone .bd p{ margin:7px 0 0; font-size:8.5px; line-height:1.5; color:var(--s6-ink2); }
.w22s6-phone .bd .b1{ display:block; margin-top:10px; padding:7px 0; border-radius:6px; background:var(--s6-ac); color:#fff; font-size:9px; font-weight:700; text-align:center; }
.w22s6-phone .bd .b2{ display:block; margin-top:6px; padding:7px 0; border-radius:6px; border:1px solid var(--s6-line); font-size:9px; font-weight:600; text-align:center; }
.w22s6-phone .bd .ft{ display:flex; align-items:center; gap:7px; margin-top:11px; padding-top:10px; border-top:1px solid var(--s6-line); }
.w22s6-phone .bd .ft i{ width:20px; height:20px; border-radius:6px; flex:0 0 auto; background:var(--s6-ac-soft); }
.w22s6-phone .bd .ft small{ font-size:8px; line-height:1.4; color:var(--s6-ink2); }
/* ---------------- Dải giá trị cuối ---------------- */
.w22s6-strip{
display:grid; grid-template-columns:minmax(230px,.85fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
margin-top:clamp(46px,5vw,74px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px);
background:var(--s6-ac-tint); border:1px solid var(--s6-ac-soft); border-radius:18px;
}
.w22s6-strip__hd{ display:flex; align-items:flex-start; gap:14px; }
.w22s6-strip__hd .ic{ width:54px; height:54px; border-radius:16px; flex:0 0 auto; background:#fff; color:var(--s6-ac); display:grid; place-items:center; }
.w22s6-strip__hd .ic svg{ width:26px; height:26px; }
.w22s6-strip__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); line-height:1.25; color:var(--s6-ink); letter-spacing:-.02em; }
.w22s6-strip__hd b i{ font-style:normal; color:var(--s6-ac); }
.w22s6-strip__hd p{ margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--s6-ink2); }
.w22s6-strip li{ padding-left:16px; border-left:1px solid var(--s6-ac-soft); }
.w22s6-strip li .t{ display:flex; align-items:center; gap:8px; }
.w22s6-strip li .t svg{ flex:0 0 auto; width:16px; height:16px; color:var(--s6-ac); }
.w22s6-strip li b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--s6-ink); }
.w22s6-strip li p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--s6-ink2); }
/* ---------------- Máy tính bảng ---------------- */
@media (max-width:1100px){
.w22s6-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s6-note{ grid-column:1/-1; }
.w22s6-stage{ grid-template-columns:minmax(0,1fr); gap:clamp(20px,3vw,34px); }
.w22s6-view{ order:-1; padding-bottom:5%; }
.w22s6-col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s6-item::before, .w22s6-item::after{ display:none; }
.w22s6-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(24px,3vw,36px); }
.w22s6-strip__hd{ grid-column:1/-1; }
.w22s6-strip li:nth-child(2){ padding-left:0; border-left:0; }
}
@media (max-width:768px){
.w22s6-head{ gap:12px 16px; }
.w22s6-no{ font-size:38px; }
.w22s6-col{ grid-template-columns:minmax(0,1fr); }
.w22s6-pv .hero{ grid-template-columns:minmax(0,1fr); }
.w22s6-pv .feats{ grid-template-columns:minmax(0,1fr); gap:8px; }
.w22s6-phone{ position:static; width:min(200px,60%); margin:14px auto 0; max-width:none; }
.w22s6-view{ padding-bottom:0; }
.w22s6-strip{ grid-template-columns:minmax(0,1fr); }
.w22s6-strip li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--s6-ac-soft); }
}
@media (prefers-reduced-motion:reduce){
.w22s6-item{ transition:none; }
}
/* =========================================================================
SECTION 07 — CẤU TRÚC WEBSITE (sơ đồ trang đề xuất)
Sơ đồ minh hoạ: trang chủ ở trên, bảy nhóm trang con bên dưới. Đường nối
dựng bằng CSS, chỉ để nhìn; bỏ đường nối đi thì danh sách vẫn hiểu được.
Prefix cô lập: .w22s7-
========================================================================= */
.w22s7{
--s7-ac:var(--accent);
--s7-ac-ink:var(--accent-ink);
--s7-ac-soft:var(--accent-soft);
--s7-ac-tint:#FFF7F9;
--s7-ink:var(--ink);
--s7-ink2:var(--ink-3);
--s7-mut:var(--ink-4);
--s7-line:var(--line);
--s7-soft:var(--bg-soft);
--s7-sh:0 10px 26px -20px rgba(20,21,26,.22);
--s7-wire:rgba(255,105,134,.62);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s7-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* ---------------- Đầu khối ---------------- */
.w22s7-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(300px,.62fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s7-no{
font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88;
font-size:clamp(42px,4.4vw,64px); color:var(--s7-ac); opacity:.4;
}
.w22s7-eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s7-ac);
}
.w22s7-h2{
font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06;
font-size:clamp(29px,3.7vw,54px); color:var(--s7-ink); margin:10px 0 0;
}
.w22s7-h2 span{ color:var(--s7-ac); }
.w22s7-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s7-ink2); max-width:62ch; }
.w22s7-note{
display:flex; align-items:flex-start; gap:14px;
padding:20px 22px; background:var(--s7-ac-tint);
border:1px solid var(--s7-ac-soft); border-radius:17px;
}
.w22s7-note .ic{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--s7-ac); display:grid; place-items:center; }
.w22s7-note .ic svg{ width:23px; height:23px; }
.w22s7-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; line-height:1.3; color:var(--s7-ink); letter-spacing:-.01em; }
.w22s7-note p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--s7-ink2); }
/* ---------------- Nhãn sơ đồ + gốc cây ---------------- */
.w22s7-tag{
display:flex; justify-content:center; margin-bottom:clamp(16px,1.8vw,24px);
}
.w22s7-tag span{
display:inline-flex; align-items:center; gap:10px;
padding:11px 20px; border:1px solid var(--s7-ac-soft); border-radius:12px; background:#fff;
font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--s7-ac);
}
.w22s7-tag svg{ width:17px; height:17px; }
.w22s7-root{ display:flex; justify-content:center; }
.w22s7-root__card{
display:flex; align-items:center; gap:14px; text-align:left;
width:min(100%,340px); padding:16px 20px;
background:#fff; border:1px solid var(--s7-ac); border-radius:16px; box-shadow:var(--s7-sh);
}
.w22s7-root__card .ic{ width:48px; height:48px; border-radius:14px; flex:0 0 auto; background:var(--s7-ac-soft); color:var(--s7-ac); display:grid; place-items:center; }
.w22s7-root__card .ic svg{ width:24px; height:24px; }
.w22s7-root__card b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; letter-spacing:.02em; color:var(--s7-ink); text-transform:uppercase; }
.w22s7-root__card p{ margin:5px 0 0; font-size:12.5px; line-height:1.5; color:var(--s7-ink2); }
/* thân dọc từ trang chủ xuống nhánh ngang */
.w22s7-stem{ height:34px; display:flex; justify-content:center; }
.w22s7-stem i{ width:0; border-left:1px dashed var(--s7-wire); }
/* ---------------- Bảy nhóm trang ---------------- */
.w22s7-tree{
position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
gap:clamp(10px,1vw,16px); padding-top:46px;
}
/* nhánh ngang nối từ node đầu tới node cuối */
.w22s7-tree::before{
content:""; position:absolute; top:0; left:calc(100% / 14); right:calc(100% / 14);
border-top:1px dashed var(--s7-wire);
}
.w22s7-node{ position:relative; display:flex; flex-direction:column; }
/* nhánh dọc rơi xuống từng node */
.w22s7-node::before{
content:""; position:absolute; top:0; left:50%; height:14px;
border-left:1px dashed var(--s7-wire);
}
.w22s7-node__n{
position:absolute; top:14px; left:50%; transform:translateX(-50%);
width:34px; height:34px; border-radius:50%; background:#fff; border:1.5px solid var(--s7-ac);
display:grid; place-items:center;
font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--s7-ac);
}
.w22s7-card{
flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
margin-top:56px; padding:20px 14px 18px;
background:#fff; border:1px solid var(--s7-line); border-radius:16px; box-shadow:var(--s7-sh);
transition:border-color .25s;
}
.w22s7-card:hover{ border-color:var(--s7-ac); }
.w22s7-card .ic{ width:46px; height:46px; border-radius:14px; background:var(--s7-ac-soft); color:var(--s7-ac); display:grid; place-items:center; margin-bottom:12px; }
.w22s7-card .ic svg{ width:23px; height:23px; }
.w22s7-card b{ display:block; font-family:var(--font-head); font-weight:800; font-size:13.5px; line-height:1.3; letter-spacing:.02em; text-transform:uppercase; color:var(--s7-ink); }
.w22s7-card p{ margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--s7-ink2); }
.w22s7-card .role{ margin-top:auto; padding-top:13px; width:100%; }
.w22s7-card .role em{ display:block; padding-top:13px; border-top:1px solid var(--s7-line); font-style:normal; font-size:12.5px; line-height:1.5; color:var(--s7-ink2); }
/* ---------------- Dải nguyên tắc ---------------- */
.w22s7-strip{
display:grid; grid-template-columns:minmax(250px,.9fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
margin-top:clamp(22px,2.4vw,34px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px);
background:var(--s7-ac-tint); border:1px solid var(--s7-ac-soft); border-radius:18px;
}
.w22s7-strip__hd{ display:flex; align-items:flex-start; gap:14px; }
.w22s7-strip__hd .ic{ width:54px; height:54px; border-radius:16px; flex:0 0 auto; background:#fff; color:var(--s7-ac); display:grid; place-items:center; }
.w22s7-strip__hd .ic svg{ width:26px; height:26px; }
.w22s7-strip__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,19px); line-height:1.3; color:var(--s7-ink); letter-spacing:-.02em; }
.w22s7-strip__hd p{ margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--s7-ink2); }
.w22s7-strip li{ padding-left:16px; border-left:1px solid var(--s7-ac-soft); }
.w22s7-strip li .t{ display:flex; align-items:center; gap:9px; }
.w22s7-strip li .t svg{ flex:0 0 auto; width:18px; height:18px; color:var(--s7-ac); }
.w22s7-strip li b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--s7-ink); }
.w22s7-strip li p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--s7-ink2); }
/* ---------------- Nút cuối ---------------- */
.w22s7-cta{ margin-top:clamp(18px,2vw,26px); text-align:center; }
.w22s7-cta a{
display:inline-flex; align-items:center; gap:10px;
padding:16px 32px; border-radius:11px; background:var(--s7-ac); color:#fff;
font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s7-cta a:hover{ background:var(--s7-ac-ink); color:#fff; }
.w22s7-cta svg{ width:18px; height:18px; }
/* ---------------- Máy tính bảng ---------------- */
@media (max-width:1180px){
.w22s7-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s7-note{ grid-column:1/-1; }
.w22s7-tree{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px clamp(12px,1.4vw,18px); }
.w22s7-tree::before{ left:calc(100% / 8); right:calc(100% / 8); }
.w22s7-node:nth-child(n+5)::before{ display:none; }
.w22s7-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s7-strip__hd{ grid-column:1/-1; }
.w22s7-strip li:nth-child(2){ padding-left:0; border-left:0; }
}
@media (max-width:860px){
.w22s7-tree{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s7-tree::before{ left:calc(100% / 4); right:calc(100% / 4); }
.w22s7-node:nth-child(n+3)::before{ display:none; }
}
/* ---------------- Điện thoại: cây dọc ---------------- */
@media (max-width:640px){
.w22s7-head{ gap:12px 16px; }
.w22s7-no{ font-size:38px; }
.w22s7-root__card{ width:100%; }
.w22s7-stem{ height:24px; justify-content:flex-start; padding-left:21px; }
.w22s7-tree{
grid-template-columns:minmax(0,1fr); gap:14px; padding:0 0 0 44px;
}
.w22s7-tree::before{ top:0; bottom:22px; left:21px; right:auto; border-top:0; border-left:1px dashed var(--s7-wire); }
.w22s7-node::before{ top:50%; left:-23px; width:23px; height:0; border-left:0; border-top:1px dashed var(--s7-wire); }
.w22s7-node__n{ top:50%; left:-44px; transform:translateY(-50%); }
.w22s7-card{
margin-top:0; flex-direction:row; align-items:flex-start; text-align:left; gap:14px;
padding:16px 18px; flex-wrap:wrap;
}
.w22s7-card .ic{ margin-bottom:0; }
.w22s7-card > span:nth-child(2){ flex:1; min-width:0; }
.w22s7-card .role{ flex:1 1 100%; padding-top:11px; }
.w22s7-card .role em{ padding-top:11px; }
.w22s7-strip{ grid-template-columns:minmax(0,1fr); }
.w22s7-strip li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--s7-ac-soft); }
.w22s7-cta a{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s7-card, .w22s7-cta a{ transition:none; }
}
/* =========================================================================
SECTION 08 — THỜI GIAN TRIỂN KHAI
Bảy bước làm website kèm thời gian tham khảo. Prefix cô lập: .w22s8-
========================================================================= */
.w22s8{
--s8-ac:var(--accent);
--s8-ac-ink:var(--accent-ink);
--s8-ac-soft:var(--accent-soft);
--s8-ac-tint:#FFF7F9;
--s8-ink:var(--ink);
--s8-ink2:var(--ink-3);
--s8-mut:var(--ink-4);
--s8-line:var(--line);
--s8-soft:var(--bg-soft);
--s8-sh:0 10px 26px -20px rgba(20,21,26,.22);
--s8-wire:rgba(255,105,134,.6);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s8-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* Đầu khối */
.w22s8-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(320px,.66fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(26px,3vw,42px);
}
.w22s8-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--s8-ac); opacity:.4; }
.w22s8-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s8-ac); }
.w22s8-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(29px,3.7vw,54px); color:var(--s8-ink); margin:10px 0 0; }
.w22s8-h2 span{ color:var(--s8-ac); }
.w22s8-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s8-ink2); max-width:60ch; }
.w22s8-box{ padding:20px 22px; background:var(--s8-ac-tint); border:1px solid var(--s8-ac-soft); border-radius:17px; }
.w22s8-box__hd{ display:flex; align-items:flex-start; gap:14px; }
.w22s8-box__hd .ic{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--s8-ac); display:grid; place-items:center; }
.w22s8-box__hd .ic svg{ width:23px; height:23px; }
.w22s8-box__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; line-height:1.3; color:var(--s8-ink); letter-spacing:-.01em; }
.w22s8-box__hd p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--s8-ink2); }
.w22s8-est{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--s8-ac-soft); display:flex; flex-direction:column; gap:8px; }
.w22s8-est li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px; }
.w22s8-est b{ font-weight:600; color:var(--s8-ink); }
.w22s8-est em{ font-style:normal; font-weight:700; color:var(--s8-ac-ink); white-space:nowrap; }
/* Bảy bước */
.w22s8-steps{
position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
gap:clamp(10px,1vw,16px);
}
.w22s8-steps::before{ content:""; position:absolute; top:17px; left:calc(100% / 14); right:calc(100% / 14); border-top:1px solid var(--s8-wire); }
.w22s8-step{ position:relative; display:flex; flex-direction:column; padding-top:46px; }
.w22s8-step__n{
position:absolute; top:0; left:50%; transform:translateX(-50%);
width:36px; height:36px; border-radius:50%; background:#fff; border:1.5px solid var(--s8-ac);
display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--s8-ac);
}
.w22s8-card{
flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
padding:22px 14px 18px; background:#fff; border:1px solid var(--s8-line); border-radius:16px;
box-shadow:var(--s8-sh); transition:border-color .25s;
}
.w22s8-card:hover{ border-color:var(--s8-ac); }
.w22s8-card--key{ border-color:var(--s8-ac); background:var(--s8-ac-tint); }
.w22s8-card .ic{ width:52px; height:52px; border-radius:50%; background:var(--s8-ac-soft); color:var(--s8-ac); display:grid; place-items:center; margin-bottom:13px; }
.w22s8-card .ic svg{ width:25px; height:25px; }
.w22s8-card b{ display:block; font-family:var(--font-head); font-weight:800; font-size:15px; line-height:1.3; color:var(--s8-ink); letter-spacing:-.01em; text-wrap:balance; }
.w22s8-card .day{ display:inline-block; margin:11px 0 0; padding:5px 12px; border-radius:8px; background:var(--s8-ac-soft); color:var(--s8-ac-ink); font-size:12.5px; font-weight:700; white-space:nowrap; }
.w22s8-card ul{ margin:14px 0 0; display:flex; flex-direction:column; gap:8px; text-align:left; width:100%; }
.w22s8-card li{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.45; color:var(--s8-ink2); }
.w22s8-card li svg{ flex:0 0 auto; width:14px; height:14px; margin-top:2px; color:var(--s8-ac); }
/* mũi tên giữa hai bước */
.w22s8-step__ar{
position:absolute; top:calc(50% + 22px); right:calc(-1 * clamp(10px,1vw,16px) / 2 - 11px);
width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--s8-ac);
display:grid; place-items:center; color:var(--s8-ac); z-index:2;
}
.w22s8-step__ar svg{ width:12px; height:12px; }
.w22s8-step:last-child .w22s8-step__ar{ display:none; }
/* Ghi chú duyệt thiết kế */
.w22s8-approve{
display:flex; align-items:center; gap:12px; justify-content:center; text-align:left;
margin-top:clamp(16px,1.8vw,22px); padding:14px 20px;
background:var(--s8-ac-soft); border-radius:14px;
}
.w22s8-approve .ic{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--s8-ac); display:grid; place-items:center; }
.w22s8-approve .ic svg{ width:19px; height:19px; }
.w22s8-approve p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--s8-ink); }
.w22s8-approve b{ font-weight:700; color:var(--s8-ac-ink); }
.w22s8-fine{ margin:14px 0 0; text-align:center; font-size:13px; line-height:1.6; color:var(--s8-mut); }
/* Dải cam kết */
.w22s8-strip{
display:grid; grid-template-columns:minmax(250px,.95fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
margin-top:clamp(20px,2.2vw,30px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px);
background:var(--s8-ac-tint); border:1px solid var(--s8-ac-soft); border-radius:18px;
}
.w22s8-strip__hd{ display:flex; align-items:flex-start; gap:14px; }
.w22s8-strip__hd .ic{ width:54px; height:54px; border-radius:16px; flex:0 0 auto; background:#fff; color:var(--s8-ac); display:grid; place-items:center; }
.w22s8-strip__hd .ic svg{ width:26px; height:26px; }
.w22s8-strip__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,20px); line-height:1.3; color:var(--s8-ink); letter-spacing:-.02em; }
.w22s8-strip__hd b i{ font-style:normal; color:var(--s8-ac); }
.w22s8-strip__hd p{ margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--s8-ink2); }
.w22s8-strip li{ padding-left:16px; border-left:1px solid var(--s8-ac-soft); }
.w22s8-strip li .t{ display:flex; align-items:center; gap:9px; }
.w22s8-strip li .t svg{ flex:0 0 auto; width:18px; height:18px; color:var(--s8-ac); }
.w22s8-strip li b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--s8-ink); }
.w22s8-strip li p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--s8-ink2); }
/* Kêu gọi cuối */
.w22s8-cta{
display:flex; align-items:center; gap:clamp(14px,2vw,24px); flex-wrap:wrap;
max-width:1040px; margin:clamp(18px,2vw,26px) auto 0;
padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px);
background:var(--s8-soft); border:1px solid var(--s8-line); border-radius:18px;
}
.w22s8-cta__ic{ width:52px; height:52px; border-radius:15px; flex:0 0 auto; background:var(--s8-ac-soft); color:var(--s8-ac); display:grid; place-items:center; }
.w22s8-cta__ic svg{ width:25px; height:25px; }
.w22s8-cta__tx{ flex:1 1 330px; min-width:0; }
.w22s8-cta__tx b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,20px); line-height:1.3; color:var(--s8-ink); letter-spacing:-.02em; }
.w22s8-cta__tx p{ margin:6px 0 0; font-size:14.5px; line-height:1.6; color:var(--s8-ink2); }
.w22s8-cta__btn{
flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
padding:15px 28px; border-radius:11px; background:var(--s8-ac); color:#fff;
font-family:var(--font-head); font-weight:700; font-size:15.5px; transition:background .22s;
}
.w22s8-cta__btn:hover{ background:var(--s8-ac-ink); color:#fff; }
.w22s8-cta__btn svg{ width:18px; height:18px; }
/* Máy tính bảng */
@media (max-width:1180px){
.w22s8-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s8-box{ grid-column:1/-1; }
.w22s8-est{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 22px; }
.w22s8-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px clamp(12px,1.4vw,18px); }
.w22s8-steps::before{ left:calc(100% / 8); right:calc(100% / 8); }
.w22s8-step__ar{ display:none; }
.w22s8-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s8-strip__hd{ grid-column:1/-1; }
.w22s8-strip li:nth-child(2){ padding-left:0; border-left:0; }
}
@media (max-width:900px){
.w22s8-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s8-steps::before{ left:calc(100% / 4); right:calc(100% / 4); }
}
/* Điện thoại: dòng thời gian dọc */
@media (max-width:640px){
.w22s8-head{ gap:12px 16px; }
.w22s8-no{ font-size:38px; }
.w22s8-est{ grid-template-columns:minmax(0,1fr); }
.w22s8-steps{ grid-template-columns:minmax(0,1fr); gap:14px; padding:0 0 0 46px; }
.w22s8-step{ padding-top:0; }
.w22s8-steps::before{ top:6px; bottom:24px; left:22px; right:auto; border-top:0; border-left:1px solid var(--s8-wire); }
.w22s8-step__n{ top:18px; left:-46px; transform:none; }
.w22s8-card{ flex-direction:row; align-items:flex-start; text-align:left; gap:14px; flex-wrap:wrap; padding:16px 18px; }
.w22s8-card .ic{ width:44px; height:44px; margin-bottom:0; }
.w22s8-card .ic svg{ width:22px; height:22px; }
.w22s8-card > span:nth-child(2){ flex:1; min-width:0; }
.w22s8-card .day{ margin-top:8px; }
.w22s8-card ul{ flex:1 1 100%; }
.w22s8-approve{ flex-direction:column; text-align:center; }
.w22s8-strip{ grid-template-columns:minmax(0,1fr); }
.w22s8-strip li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--s8-ac-soft); }
.w22s8-cta__btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s8-card, .w22s8-cta__btn{ transition:none; }
}
/* =========================================================================
SECTION 09 — CHUẨN BỊ DỰ ÁN
Thông điệp: có gì gửi nấy, chưa đủ vẫn bắt đầu được. KHÔNG phải checklist
bắt buộc, nên không dùng ô tích. Prefix cô lập: .w22s9-
========================================================================= */
.w22s9{
--s9-ac:var(--accent);
--s9-ac-ink:var(--accent-ink);
--s9-ac-soft:var(--accent-soft);
--s9-ac-tint:#FFF7F9;
--s9-ink:var(--ink);
--s9-ink2:var(--ink-3);
--s9-mut:var(--ink-4);
--s9-line:var(--line);
--s9-soft:var(--bg-soft);
--s9-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s9-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.w22s9-grid{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,2fr); gap:clamp(24px,3vw,44px); align-items:start; }
/* Cột trái */
.w22s9-top{ display:flex; align-items:flex-start; gap:16px; }
.w22s9-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--s9-ac); opacity:.4; }
.w22s9-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--s9-ac); }
.w22s9-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(29px,3.4vw,50px); color:var(--s9-ink); margin:10px 0 0; }
.w22s9-h2 span{ color:var(--s9-ac); }
.w22s9-rule{ display:block; width:44px; height:2px; background:var(--s9-ac); border-radius:2px; margin:18px 0 0; }
.w22s9-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--s9-ink2); }
.w22s9-send{
display:flex; align-items:flex-start; gap:14px; margin-top:22px; padding:18px 20px;
background:#fff; border:1.5px dashed var(--s9-ac); border-radius:17px;
}
.w22s9-send .ic{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; background:var(--s9-ac-soft); color:var(--s9-ac); display:grid; place-items:center; }
.w22s9-send .ic svg{ width:23px; height:23px; }
.w22s9-send b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--s9-ink); letter-spacing:-.01em; }
.w22s9-send p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--s9-ink2); }
/* Hình minh hoạ dựng bằng CSS */
.w22s9-illu{ position:relative; margin-top:26px; padding-bottom:14px; }
.w22s9-illu__win{ background:#fff; border:1px solid var(--s9-line); border-radius:14px; overflow:hidden; box-shadow:var(--s9-sh); }
.w22s9-illu__bar{ display:flex; gap:6px; padding:10px 13px; border-bottom:1px solid var(--s9-line); }
.w22s9-illu__bar i{ width:8px; height:8px; border-radius:50%; background:#E4E6EB; }
.w22s9-illu__bar i:first-child{ background:#FFD1DA; }
.w22s9-illu__body{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; padding:16px; }
.w22s9-illu__img{ aspect-ratio:4/3; border-radius:9px; background:linear-gradient(150deg,#EDEFF4,#D6DAE2); position:relative; }
.w22s9-illu__img::after{ content:""; position:absolute; inset:auto 14% 16% 14%; height:34%; border-radius:6px; background:rgba(255,255,255,.6); }
.w22s9-illu__txt i{ display:block; height:8px; border-radius:4px; background:#EDEFF3; }
.w22s9-illu__txt i+i{ margin-top:8px; }
.w22s9-illu__txt i:nth-child(1){ width:34%; height:22px; background:#E4E7ED; }
.w22s9-illu__txt i:nth-child(4){ width:64%; }
.w22s9-illu__txt .pill{ display:block; width:58px; height:16px; border-radius:5px; background:var(--s9-ac); margin-top:12px; }
.w22s9-illu__folder{
position:absolute; right:2%; bottom:0; width:40%; max-width:190px;
background:var(--s9-ac); border-radius:12px; padding:26px 12px 12px; box-shadow:0 16px 34px -20px rgba(232,78,110,.7);
}
.w22s9-illu__folder::before{
content:""; position:absolute; top:-9px; left:12px; width:44%; height:12px;
background:var(--s9-ac); border-radius:6px 6px 0 0;
}
.w22s9-illu__folder span{
display:block; background:#fff; border-radius:7px; padding:8px 0; text-align:center;
font-family:var(--font-head); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--s9-ac-ink);
}
.w22s9-micro{ display:flex; align-items:flex-start; gap:9px; margin:16px 0 0; font-size:13.5px; line-height:1.55; color:var(--s9-ink2); }
.w22s9-micro svg{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:var(--s9-ac); }
/* Cột phải */
.w22s9-info{
display:flex; align-items:flex-start; gap:14px; padding:18px 22px; margin-bottom:clamp(14px,1.6vw,20px);
background:var(--s9-ac-tint); border:1px solid var(--s9-ac-soft); border-radius:16px;
}
.w22s9-info .ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; background:#fff; color:var(--s9-ac); display:grid; place-items:center; }
.w22s9-info .ic svg{ width:23px; height:23px; }
.w22s9-info b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16.5px; line-height:1.3; color:var(--s9-ink); letter-spacing:-.01em; }
.w22s9-info p{ margin:6px 0 0; font-size:13.5px; line-height:1.6; color:var(--s9-ink2); }
.w22s9-items{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.2vw,18px); }
.w22s9-item{
position:relative; display:flex; flex-direction:column; text-align:center; align-items:center;
padding:24px 16px 18px; background:#fff; border:1px solid var(--s9-line); border-radius:16px;
box-shadow:var(--s9-sh); transition:border-color .25s;
}
.w22s9-item:hover{ border-color:var(--s9-ac); }
.w22s9-item--more{ border-style:dashed; border-color:var(--s9-ac); }
.w22s9-item__n{
position:absolute; top:12px; left:12px; padding:3px 8px; border-radius:6px;
background:var(--s9-ac); color:#fff; font-family:var(--font-head); font-weight:800; font-size:11px;
}
.w22s9-item .ic{ width:56px; height:56px; border-radius:50%; background:var(--s9-ac-soft); color:var(--s9-ac); display:grid; place-items:center; margin-bottom:13px; }
.w22s9-item .ic svg{ width:27px; height:27px; }
.w22s9-item b{ display:block; font-family:var(--font-head); font-weight:800; font-size:15px; line-height:1.3; color:var(--s9-ink); letter-spacing:-.01em; text-wrap:balance; }
.w22s9-item p{ margin:9px 0 0; font-size:12.5px; line-height:1.55; color:var(--s9-ink2); }
.w22s9-item em{
display:block; margin-top:auto; padding:11px 12px; width:100%;
background:var(--s9-soft); border-radius:10px; font-style:normal;
font-size:12px; line-height:1.5; color:var(--s9-ink2); text-align:left;
}
.w22s9-item--more em{ background:var(--s9-ac-tint); }
.w22s9-item .safe{ display:block; margin-top:9px; font-size:11.5px; line-height:1.45; color:var(--s9-mut); }
/* Dải trấn an */
.w22s9-help{
display:grid; grid-template-columns:minmax(250px,.95fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
margin-top:clamp(22px,2.4vw,34px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px);
background:var(--s9-ac-tint); border:1px solid var(--s9-ac-soft); border-radius:18px;
}
.w22s9-help__hd{ display:flex; align-items:flex-start; gap:14px; }
.w22s9-help__hd .ic{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--s9-ac); display:grid; place-items:center; }
.w22s9-help__hd .ic svg{ width:27px; height:27px; }
.w22s9-help__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); line-height:1.25; color:var(--s9-ink); letter-spacing:-.02em; }
.w22s9-help__hd b i{ display:block; font-style:normal; color:var(--s9-ac); }
.w22s9-help__hd p{ margin:9px 0 0; font-size:13px; line-height:1.55; color:var(--s9-ink2); }
.w22s9-help li{ padding-left:16px; border-left:1px solid var(--s9-ac-soft); }
.w22s9-help li .t{ display:flex; align-items:center; gap:9px; }
.w22s9-help li .t svg{ flex:0 0 auto; width:18px; height:18px; color:var(--s9-ac); }
.w22s9-help li b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--s9-ink); }
.w22s9-help li p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--s9-ink2); }
.w22s9-cta{ margin-top:clamp(18px,2vw,26px); text-align:center; }
.w22s9-cta a{
display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:11px;
background:var(--s9-ac); color:#fff; font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s9-cta a:hover{ background:var(--s9-ac-ink); color:#fff; }
.w22s9-cta svg{ width:18px; height:18px; }
/* Máy tính bảng */
@media (max-width:1180px){
.w22s9-grid{ grid-template-columns:minmax(0,1fr); }
.w22s9-illu{ max-width:520px; }
.w22s9-items{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s9-help{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s9-help__hd{ grid-column:1/-1; }
.w22s9-help li:nth-child(2){ padding-left:0; border-left:0; }
}
@media (max-width:640px){
.w22s9-no{ font-size:38px; }
.w22s9-top{ gap:13px; }
.w22s9-items{ grid-template-columns:minmax(0,1fr); }
.w22s9-item{ flex-direction:row; align-items:flex-start; text-align:left; gap:14px; flex-wrap:wrap; padding:18px 18px 16px; }
.w22s9-item__n{ position:static; align-self:flex-start; }
.w22s9-item .ic{ width:48px; height:48px; margin-bottom:0; }
.w22s9-item > span:nth-child(3){ flex:1; min-width:0; }
.w22s9-item em{ flex:1 1 100%; margin-top:12px; }
.w22s9-help{ grid-template-columns:minmax(0,1fr); }
.w22s9-help li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--s9-ac-soft); }
.w22s9-cta a{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s9-item, .w22s9-cta a{ transition:none; }
}
/* =========================================================================
SECTION 10 — CHẤT LƯỢNG WEBSITE
Bốn trụ kỹ thuật: hiển thị trên thiết bị · tốc độ · nền SEO · bảo mật.
Nói lợi ích trước, thuật ngữ kỹ thuật để nhỏ phía sau. Prefix: .w22s10-
========================================================================= */
.w22s10{
--sa-ac:var(--accent);
--sa-ac-ink:var(--accent-ink);
--sa-ac-soft:var(--accent-soft);
--sa-ac-tint:#FFF7F9;
--sa-ink:var(--ink);
--sa-ink2:var(--ink-3);
--sa-mut:var(--ink-4);
--sa-line:var(--line);
--sa-soft:var(--bg-soft);
--sa-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s10-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.w22s10-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(320px,.66fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s10-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--sa-ac); opacity:.4; }
.w22s10-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sa-ac); }
.w22s10-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,50px); color:var(--sa-ink); margin:10px 0 0; }
.w22s10-h2 span{ color:var(--sa-ac); }
.w22s10-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--sa-ink2); max-width:62ch; }
.w22s10-note{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; background:var(--sa-ac-tint); border:1px solid var(--sa-ac-soft); border-radius:17px; }
.w22s10-note .ic{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--sa-ac); display:grid; place-items:center; }
.w22s10-note .ic svg{ width:26px; height:26px; }
.w22s10-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:16px; line-height:1.3; color:var(--sa-ink); letter-spacing:-.01em; }
.w22s10-note p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--sa-ink2); }
/* Bốn trụ */
.w22s10-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px); }
.w22s10-pillar{
display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:clamp(16px,2vw,28px); align-items:start;
padding:clamp(24px,2.6vw,36px); background:#fff; border:1px solid var(--sa-line);
border-radius:20px; box-shadow:var(--sa-sh); transition:border-color .2s;
}
.w22s10-pillar:hover{ border-color:var(--sa-ac); }
.w22s10-pillar__eb{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--sa-ac); }
.w22s10-pillar h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(19px,1.8vw,25px); line-height:1.22; color:var(--sa-ink); margin:12px 0 0; letter-spacing:-.02em; }
.w22s10-pillar > div > p{ margin:12px 0 0; font-size:14.5px; line-height:1.65; color:var(--sa-ink2); }
.w22s10-gain{
display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding:12px 15px;
background:var(--sa-ac-soft); border-radius:11px;
}
.w22s10-gain svg{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:var(--sa-ac-ink); }
.w22s10-gain span{ font-size:13.5px; line-height:1.5; color:var(--sa-ink); }
.w22s10-tech{ margin-top:16px; }
.w22s10-tech > b{ display:block; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--sa-mut); }
.w22s10-tech ul{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.w22s10-tech li{ padding:4px 10px; border-radius:7px; background:var(--sa-soft); border:1px solid var(--sa-line); font-size:11.5px; color:var(--sa-mut); }
/* Hình minh hoạ nhỏ trong mỗi trụ */
.w22s10-fig{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.w22s10-fig__ic{ width:60px; height:60px; border-radius:18px; background:var(--sa-ac-soft); color:var(--sa-ac); display:grid; place-items:center; }
.w22s10-fig__ic svg{ width:29px; height:29px; }
.w22s10-fig__art{ width:100%; }
.w22s10-fig__art img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
/* trụ 1: màn hình lớn + điện thoại */
.w22s10-dev{ display:flex; align-items:flex-end; gap:8px; }
.w22s10-dev i{ display:block; flex:1; aspect-ratio:4/3; border-radius:8px; border:1.5px solid var(--sa-line); background:linear-gradient(160deg,#F7F8FA,#E9ECF2); }
.w22s10-dev b{ display:block; width:26%; aspect-ratio:9/16; border-radius:8px; border:1.5px solid var(--sa-ac); background:var(--sa-ac-tint); }
/* trụ 2: thanh tốc độ */
.w22s10-bars{ display:flex; flex-direction:column; gap:9px; }
.w22s10-bars i{ display:block; height:9px; border-radius:5px; background:var(--sa-soft); position:relative; overflow:hidden; }
.w22s10-bars i::after{ content:""; position:absolute; inset:0 auto 0 0; border-radius:5px; background:var(--sa-ac); }
.w22s10-bars i:nth-child(1)::after{ width:82%; }
.w22s10-bars i:nth-child(2)::after{ width:66%; }
.w22s10-bars i:nth-child(3)::after{ width:91%; }
/* trụ 3: khung kết quả tìm kiếm */
.w22s10-serp{ border:1.5px solid var(--sa-line); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.w22s10-serp i{ display:block; height:7px; border-radius:4px; background:#EDEFF3; }
.w22s10-serp i:first-child{ height:10px; width:70%; background:var(--sa-ac-soft); }
.w22s10-serp i:last-child{ width:52%; }
/* trụ 4: các lớp bảo vệ đã bật */
.w22s10-sec{ display:flex; flex-direction:column; gap:8px; }
.w22s10-sec i{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:9px; background:var(--sa-soft); border:1px solid var(--sa-line); }
.w22s10-sec i::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--sa-ac); flex:0 0 auto; }
.w22s10-sec i::after{ content:""; flex:1; height:6px; border-radius:3px; background:#E7E9EF; }
.w22s10-sec i:nth-child(2)::after{ width:70%; flex:0 0 70%; }
.w22s10-sec i:nth-child(3)::after{ width:55%; flex:0 0 55%; }
/* Dải kiểm tra chất lượng */
.w22s10-strip{
display:grid; grid-template-columns:minmax(260px,1fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
margin-top:clamp(20px,2.2vw,30px); padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px);
background:var(--sa-ac-tint); border:1px solid var(--sa-ac-soft); border-radius:18px;
}
.w22s10-strip__hd{ display:flex; align-items:flex-start; gap:14px; }
.w22s10-strip__hd .ic{ width:54px; height:54px; border-radius:16px; flex:0 0 auto; background:#fff; color:var(--sa-ac); display:grid; place-items:center; }
.w22s10-strip__hd .ic svg{ width:26px; height:26px; }
.w22s10-strip__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,19px); line-height:1.3; color:var(--sa-ink); letter-spacing:-.02em; }
.w22s10-strip__hd p{ margin:8px 0 0; font-size:13px; line-height:1.55; color:var(--sa-ink2); }
.w22s10-strip li{ padding-left:16px; border-left:1px solid var(--sa-ac-soft); }
.w22s10-strip li .t{ display:flex; align-items:center; gap:9px; }
.w22s10-strip li .t svg{ flex:0 0 auto; width:17px; height:17px; color:var(--sa-ac); }
.w22s10-strip li b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--sa-ink); }
.w22s10-strip li p{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--sa-ink2); }
.w22s10-cta{ margin-top:clamp(18px,2vw,26px); text-align:center; }
.w22s10-cta a.main{
display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:11px;
background:var(--sa-ac); color:#fff; font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s10-cta a.main:hover{ background:var(--sa-ac-ink); color:#fff; }
.w22s10-cta svg{ width:18px; height:18px; }
.w22s10-cta .sub{ display:block; margin-top:14px; font-size:14px; }
.w22s10-cta .sub a{ color:var(--sa-ac-ink); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.w22s10-cta .sub svg{ width:15px; height:15px; }
@media (max-width:1180px){
.w22s10-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s10-note{ grid-column:1/-1; }
.w22s10-grid{ grid-template-columns:minmax(0,1fr); }
.w22s10-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s10-strip__hd{ grid-column:1/-1; }
.w22s10-strip li:nth-child(2){ padding-left:0; border-left:0; }
}
@media (max-width:640px){
.w22s10-no{ font-size:38px; }
.w22s10-head{ gap:12px 16px; }
.w22s10-pillar{ grid-template-columns:minmax(0,1fr); }
.w22s10-fig{ flex-direction:row; align-items:center; gap:16px; }
.w22s10-fig__art{ flex:1; min-width:0; }
.w22s10-strip{ grid-template-columns:minmax(0,1fr); }
.w22s10-strip li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--sa-ac-soft); }
.w22s10-cta a.main{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s10-pillar, .w22s10-cta a.main{ transition:none; }
}
/* =========================================================================
SECTION 11 — WEBSITE SAU KHI BÀN GIAO THUỘC VỀ AI?
8 thẻ quyền sở hữu (4 cột × 2 hàng) + dải nguyên tắc + CTA + ghi chú
giấy phép bên thứ ba. Chỉ một màu nhấn coral. Prefix: .w22s11-
========================================================================= */
.w22s11{
--sb-ac:var(--accent);
--sb-ac-ink:var(--accent-ink);
--sb-ac-soft:var(--accent-soft);
--sb-ac-tint:#FFF7F9;
--sb-ink:var(--ink);
--sb-ink2:var(--ink-3);
--sb-mut:var(--ink-4);
--sb-line:var(--line);
--sb-soft:var(--bg-soft);
--sb-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s11-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* Đầu section */
.w22s11-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(320px,.66fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s11-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--sb-ac); opacity:.4; }
.w22s11-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sb-ac); }
.w22s11-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,50px); color:var(--sb-ink); margin:10px 0 0; }
.w22s11-h2 span{ color:var(--sb-ac); }
.w22s11-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--sb-ink2); max-width:62ch; }
.w22s11-note{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; background:var(--sb-ac-tint); border:1px solid var(--sb-ac-soft); border-radius:17px; }
.w22s11-note .ic{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--sb-ac); display:grid; place-items:center; }
.w22s11-note .ic svg{ width:28px; height:28px; }
.w22s11-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,19px); line-height:1.3; color:var(--sb-ink); letter-spacing:-.01em; }
.w22s11-note p{ margin:8px 0 0; font-size:13.5px; line-height:1.6; color:var(--sb-ink2); }
.w22s11-note .micro{ display:flex; align-items:center; gap:7px; margin-top:11px; font-size:12.5px; color:var(--sb-ac-ink); font-weight:600; }
.w22s11-note .micro svg{ flex:0 0 auto; width:14px; height:14px; }
/* 8 thẻ quyền sở hữu */
.w22s11-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px); }
.w22s11-card{
display:flex; flex-direction:column; justify-content:space-between;
padding:clamp(22px,2vw,28px) clamp(22px,2vw,28px) clamp(16px,1.4vw,20px);
background:#fff; border:1px solid var(--sb-line); border-radius:18px;
box-shadow:var(--sb-sh); transition:border-color .2s;
}
.w22s11-card:hover{ border-color:var(--sb-ac); }
.w22s11-card__top{ display:flex; align-items:flex-start; gap:15px; }
.w22s11-card__ic{ width:54px; height:54px; border-radius:50%; flex:0 0 auto; background:var(--sb-ac-soft); color:var(--sb-ac); display:grid; place-items:center; }
.w22s11-card__ic svg{ width:26px; height:26px; }
.w22s11-card h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.35vw,20px); line-height:1.28; color:var(--sb-ink); margin:2px 0 0; letter-spacing:-.02em; }
.w22s11-card h3 span{ color:var(--sb-ac); }
.w22s11-card__top p{ margin:11px 0 0; font-size:13.5px; line-height:1.62; color:var(--sb-ink2); }
.w22s11-card__gain{
display:flex; align-items:flex-start; gap:9px; margin-top:18px; padding:11px 14px;
background:var(--sb-ac-soft); border-radius:11px;
}
.w22s11-card__gain svg{ flex:0 0 auto; width:15px; height:15px; margin-top:2px; color:var(--sb-ac-ink); }
.w22s11-card__gain span{ font-size:13px; line-height:1.5; color:var(--sb-ink2); }
/* Dải nguyên tắc */
.w22s11-strip{
display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,2.6fr);
gap:clamp(18px,2.2vw,34px); align-items:start;
margin-top:clamp(20px,2.2vw,30px); padding:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,36px);
background:var(--sb-ac-tint); border:1px solid var(--sb-ac-soft); border-radius:20px;
}
.w22s11-strip__hd{ display:flex; align-items:flex-start; gap:15px; }
.w22s11-strip__hd .ic{ width:62px; height:62px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--sb-ac); display:grid; place-items:center; }
.w22s11-strip__hd .ic svg{ width:30px; height:30px; }
.w22s11-strip__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(18px,1.6vw,23px); line-height:1.22; color:var(--sb-ink); letter-spacing:-.02em; }
.w22s11-strip__hd p{ margin:10px 0 0; font-size:13.5px; line-height:1.6; color:var(--sb-ink2); }
.w22s11-prins{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); }
.w22s11-prins li{ padding-left:16px; border-left:1px solid var(--sb-ac-soft); }
.w22s11-prins li:first-child{ padding-left:0; border-left:0; }
.w22s11-prins .t{ display:flex; align-items:center; gap:9px; }
.w22s11-prins .t svg{ flex:0 0 auto; width:18px; height:18px; color:var(--sb-ac); }
.w22s11-prins b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; line-height:1.25; color:var(--sb-ink); }
.w22s11-prins p{ margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--sb-ink2); }
/* CTA + ghi chú giấy phép */
.w22s11-cta{ margin-top:clamp(18px,2vw,26px); text-align:center; }
.w22s11-cta a.main{
display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:11px;
background:var(--sb-ac); color:#fff; font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s11-cta a.main:hover{ background:var(--sb-ac-ink); color:#fff; }
.w22s11-cta a.main svg{ width:18px; height:18px; }
.w22s11-license{
max-width:76ch; margin:clamp(14px,1.6vw,20px) auto 0; text-align:center;
font-size:13px; line-height:1.6; color:var(--sb-mut);
}
@media (max-width:1180px){
.w22s11-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s11-note{ grid-column:1/-1; }
.w22s11-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s11-strip{ grid-template-columns:minmax(0,1fr); }
.w22s11-prins{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s11-prins li:nth-child(3){ padding-left:0; border-left:0; }
}
@media (max-width:640px){
.w22s11-no{ font-size:38px; }
.w22s11-head{ gap:12px 16px; }
.w22s11-grid{ grid-template-columns:minmax(0,1fr); }
.w22s11-prins{ grid-template-columns:minmax(0,1fr); }
.w22s11-prins li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--sb-ac-soft); }
.w22s11-prins li:first-child{ padding-top:0; border-top:0; }
.w22s11-cta a.main{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s11-card, .w22s11-cta a.main{ transition:none; }
}
/* =========================================================================
SECTION 12 — HỖ TRỢ SAU BÀN GIAO
8 thẻ nhóm hỗ trợ (4 cột × 2 hàng, thẻ căn giữa, có số thứ tự) + dải cam
kết 4 nguyên tắc + khối CTA + ghi chú phạm vi. Prefix: .w22s12-
========================================================================= */
.w22s12{
--sc-ac:var(--accent);
--sc-ac-ink:var(--accent-ink);
--sc-ac-soft:var(--accent-soft);
--sc-ac-tint:#FFF7F9;
--sc-ink:var(--ink);
--sc-ink2:var(--ink-3);
--sc-mut:var(--ink-4);
--sc-line:var(--line);
--sc-soft:var(--bg-soft);
--sc-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--sc-soft);
padding:clamp(52px,7vw,110px) 0;
}
.w22s12-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* Đầu section */
.w22s12-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(320px,.66fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s12-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--sc-ac); opacity:.4; }
.w22s12-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sc-ac); }
.w22s12-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,50px); color:var(--sc-ink); margin:10px 0 0; }
.w22s12-h2 span{ color:var(--sc-ac); }
.w22s12-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--sc-ink2); max-width:62ch; }
.w22s12-note{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; background:var(--sc-ac-tint); border:1px solid var(--sc-ac-soft); border-radius:17px; }
.w22s12-note .ic{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--sc-ac); display:grid; place-items:center; }
.w22s12-note .ic svg{ width:28px; height:28px; }
.w22s12-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,19px); line-height:1.3; color:var(--sc-ink); letter-spacing:-.01em; }
.w22s12-note p{ margin:8px 0 0; font-size:13.5px; line-height:1.6; color:var(--sc-ink2); }
/* 8 thẻ hỗ trợ */
.w22s12-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px); }
.w22s12-card{
position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
padding:clamp(26px,2.4vw,32px) clamp(20px,1.9vw,26px) clamp(16px,1.4vw,20px);
background:#fff; border:1px solid var(--sc-line); border-radius:18px;
box-shadow:var(--sc-sh); transition:border-color .2s;
}
.w22s12-card:hover{ border-color:var(--sc-ac); }
.w22s12-card__no{
position:absolute; top:14px; left:16px; min-width:30px; padding:4px 8px; border-radius:8px;
background:var(--sc-ac); color:#fff; font-family:var(--font-head); font-weight:800; font-size:12px;
letter-spacing:.02em; line-height:1.1; text-align:center;
}
.w22s12-card__ic{ width:74px; height:74px; margin-top:14px; border-radius:50%; background:var(--sc-ac-soft); color:var(--sc-ac); display:grid; place-items:center; }
.w22s12-card__ic svg{ width:34px; height:34px; }
.w22s12-card h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.4vw,21px); line-height:1.28; color:var(--sc-ink); margin:16px 0 0; letter-spacing:-.02em; }
.w22s12-card > p{ margin:11px 0 0; font-size:13.5px; line-height:1.62; color:var(--sc-ink2); }
.w22s12-card ul{ width:100%; margin:16px 0 18px; display:flex; flex-direction:column; gap:8px; text-align:left; }
.w22s12-card li{ display:flex; align-items:flex-start; gap:9px; }
.w22s12-card li svg{ flex:0 0 auto; width:14px; height:14px; margin-top:3px; color:var(--sc-ac); }
.w22s12-card li span{ font-size:13px; line-height:1.5; color:var(--sc-ink2); }
/* Phải bám .w22s12-card > p để thắng specificity của dòng mô tả ở trên. */
.w22s12-card > p.w22s12-card__lb{
width:100%; margin:auto 0 0; padding:11px 14px; border-radius:11px;
background:var(--sc-ac-soft); font-size:12.5px; line-height:1.45; color:var(--sc-ink2); text-align:center;
}
/* Dải cam kết */
.w22s12-strip{
display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,2.6fr);
gap:clamp(18px,2.2vw,34px); align-items:start;
margin-top:clamp(20px,2.2vw,30px); padding:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,36px);
background:var(--sc-ac-tint); border:1px solid var(--sc-ac-soft); border-radius:20px;
}
.w22s12-strip__hd{ display:flex; align-items:flex-start; gap:15px; }
.w22s12-strip__hd .ic{ width:62px; height:62px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--sc-ac); display:grid; place-items:center; }
.w22s12-strip__hd .ic svg{ width:30px; height:30px; }
.w22s12-strip__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(18px,1.6vw,23px); line-height:1.22; color:var(--sc-ink); letter-spacing:-.02em; }
.w22s12-strip__hd b span{ color:var(--sc-ac); }
.w22s12-strip__hd p{ margin:10px 0 0; font-size:13.5px; line-height:1.6; color:var(--sc-ink2); }
.w22s12-prins{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); }
.w22s12-prins li{ padding-left:16px; border-left:1px solid var(--sc-ac-soft); }
.w22s12-prins li:first-child{ padding-left:0; border-left:0; }
.w22s12-prins .t{ display:flex; align-items:center; gap:9px; }
.w22s12-prins .t svg{ flex:0 0 auto; width:18px; height:18px; color:var(--sc-ac); }
.w22s12-prins b{ font-family:var(--font-head); font-weight:700; font-size:14.5px; line-height:1.25; color:var(--sc-ink); }
.w22s12-prins p{ margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--sc-ink2); }
/* CTA + ghi chú phạm vi */
.w22s12-cta{
display:flex; align-items:center; gap:clamp(16px,2vw,26px); flex-wrap:wrap;
margin-top:clamp(18px,2vw,26px); padding:clamp(20px,2.2vw,30px) clamp(22px,2.4vw,34px);
background:#fff; border:1px solid var(--sc-line); border-radius:20px; box-shadow:var(--sc-sh);
}
.w22s12-cta .ic{ width:58px; height:58px; border-radius:50%; flex:0 0 auto; background:var(--sc-ac-soft); color:var(--sc-ac); display:grid; place-items:center; }
.w22s12-cta .ic svg{ width:28px; height:28px; }
.w22s12-cta > div{ flex:1 1 260px; min-width:0; }
.w22s12-cta b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); line-height:1.28; color:var(--sc-ink); letter-spacing:-.02em; }
.w22s12-cta > div p{ margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--sc-ink2); }
.w22s12-cta a.main{
flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:11px;
background:var(--sc-ac); color:#fff; font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s12-cta a.main:hover{ background:var(--sc-ac-ink); color:#fff; }
.w22s12-cta a.main svg{ width:18px; height:18px; }
.w22s12-scope{
display:flex; align-items:flex-start; gap:12px;
margin-top:clamp(14px,1.6vw,20px); padding:16px 20px;
background:#fff; border:1px solid var(--sc-line); border-radius:14px;
font-size:13px; line-height:1.65; color:var(--sc-ink2);
}
.w22s12-scope .ic{ flex:0 0 auto; color:var(--sc-ac); display:grid; place-items:center; margin-top:1px; }
.w22s12-scope a{ color:var(--sc-ac-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:1180px){
.w22s12-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s12-note{ grid-column:1/-1; }
.w22s12-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s12-strip{ grid-template-columns:minmax(0,1fr); }
.w22s12-prins{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s12-prins li:nth-child(3){ padding-left:0; border-left:0; }
}
@media (max-width:640px){
.w22s12-no{ font-size:38px; }
.w22s12-head{ gap:12px 16px; }
.w22s12-grid{ grid-template-columns:minmax(0,1fr); }
.w22s12-prins{ grid-template-columns:minmax(0,1fr); }
.w22s12-prins li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--sc-ac-soft); }
.w22s12-prins li:first-child{ padding-top:0; border-top:0; }
.w22s12-cta{ text-align:center; flex-direction:column; }
.w22s12-cta > div{ flex:0 0 auto; width:100%; }
.w22s12-cta a.main{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s12-card, .w22s12-cta a.main{ transition:none; }
}
/* =========================================================================
SECTION 13 — DỰ ÁN THẬT VÀ BÀI TOÁN PHÍA SAU
Một dự án nổi bật (ảnh 60 / chữ 40) + lưới 3 dự án. Ảnh chụp là nhân vật
chính, coral chỉ dùng cho nhãn và nút. Prefix: .w22s13-
========================================================================= */
.w22s13{
--sd-ac:var(--accent);
--sd-ac-ink:var(--accent-ink);
--sd-ac-soft:var(--accent-soft);
--sd-ac-tint:#FFF7F9;
--sd-ink:var(--ink);
--sd-ink2:var(--ink-3);
--sd-mut:var(--ink-4);
--sd-line:var(--line);
--sd-soft:var(--bg-soft);
--sd-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s13-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
/* Đầu section */
.w22s13-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(320px,.66fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s13-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--sd-ac); opacity:.4; }
.w22s13-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sd-ac); }
.w22s13-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,50px); color:var(--sd-ink); margin:10px 0 0; }
.w22s13-h2 span{ color:var(--sd-ac); }
.w22s13-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--sd-ink2); max-width:62ch; }
.w22s13-note{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; background:var(--sd-ac-tint); border:1px solid var(--sd-ac-soft); border-radius:17px; }
.w22s13-note .ic{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--sd-ac); display:grid; place-items:center; }
.w22s13-note .ic svg{ width:28px; height:28px; }
.w22s13-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(15px,1.3vw,18px); line-height:1.28; color:var(--sd-ink); letter-spacing:-.01em; }
.w22s13-note p{ margin:9px 0 0; font-size:13px; line-height:1.6; color:var(--sd-ink2); }
.w22s13-note ul{ display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:12px; }
.w22s13-note li{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--sd-ac-ink); }
.w22s13-note li svg{ flex:0 0 auto; width:15px; height:15px; }
/* Nhãn loại web + tên miền — dùng chung cho dự án nổi bật và thẻ */
.w22s13-badge{
display:inline-flex; align-items:center; padding:5px 12px; border-radius:8px;
background:var(--sd-ac-soft); color:var(--sd-ac-ink);
font-size:12px; font-weight:700; letter-spacing:.01em;
}
.w22s13-domain{ display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:13.5px; font-weight:600; color:var(--sd-ac-ink); }
.w22s13-domain:hover{ color:var(--sd-ac); text-decoration:underline; text-underline-offset:2px; }
.w22s13-domain svg{ flex:0 0 auto; }
/* Khối Bài toán / Web22 đã làm / Kết quả */
.w22s13-block{ margin-top:16px; }
.w22s13-block > b{
display:flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700;
font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sd-ac);
}
.w22s13-block > b svg{ flex:0 0 auto; }
.w22s13-rt{ margin-top:8px; font-size:14px; line-height:1.68; color:var(--sd-ink2); }
.w22s13-rt p{ margin:0 0 8px; }
.w22s13-rt p:last-child{ margin-bottom:0; }
.w22s13-rt ul{ display:flex; flex-direction:column; gap:7px; }
.w22s13-rt li{ position:relative; padding-left:17px; }
.w22s13-rt li::before{ content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--sd-ac); }
.w22s13-rt a{ color:var(--sd-ac-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.w22s13-block--res{ padding:14px 16px; background:var(--sd-ac-tint); border:1px solid var(--sd-ac-soft); border-radius:12px; }
/* Nút trong thẻ */
.w22s13-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:18px; }
.w22s13-acts a.main{
display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:10px;
background:var(--sd-ac); color:#fff; font-family:var(--font-head); font-weight:700; font-size:14.5px;
transition:background .22s;
}
.w22s13-acts a.main:hover{ background:var(--sd-ac-ink); color:#fff; }
.w22s13-acts a.ghost{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--sd-ink2); }
.w22s13-acts a.ghost:hover{ color:var(--sd-ac-ink); }
.w22s13-acts svg{ flex:0 0 auto; }
/* Dự án nổi bật */
.w22s13-feat{
display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
gap:clamp(20px,2.4vw,36px); align-items:center;
padding:clamp(20px,2.2vw,30px); background:#fff; border:1px solid var(--sd-line);
border-radius:22px; box-shadow:var(--sd-sh); transition:border-color .2s;
}
.w22s13-feat:hover{ border-color:var(--sd-ac); }
.w22s13-feat__shot{ border-radius:16px; overflow:hidden; background:var(--sd-soft); border:1px solid var(--sd-line); }
.w22s13-feat__shot img{ display:block; width:100%; height:auto; }
.w22s13-feat__body h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(21px,2vw,28px); line-height:1.2; color:var(--sd-ink); margin:12px 0 0; letter-spacing:-.025em; }
/* Lưới ba dự án */
.w22s13-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px); margin-top:clamp(16px,1.8vw,24px); }
.w22s13-card{
display:flex; flex-direction:column; background:#fff; border:1px solid var(--sd-line);
border-radius:20px; overflow:hidden; box-shadow:var(--sd-sh); transition:border-color .2s;
}
.w22s13-card:hover{ border-color:var(--sd-ac); }
.w22s13-card__shot{ position:relative; background:var(--sd-soft); border-bottom:1px solid var(--sd-line); }
.w22s13-card__shot img{ display:block; width:100%; height:auto; }
.w22s13-card__shot .w22s13-badge{ position:absolute; top:12px; left:12px; background:#fff; box-shadow:0 4px 14px -8px rgba(20,21,26,.4); }
.w22s13-card__body{ display:flex; flex-direction:column; flex:1; padding:clamp(20px,1.9vw,26px); }
.w22s13-card__body h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(18px,1.5vw,22px); line-height:1.24; color:var(--sd-ink); letter-spacing:-.02em; }
.w22s13-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.w22s13-tags li{ padding:4px 10px; border-radius:7px; background:var(--sd-soft); border:1px solid var(--sd-line); font-size:11.5px; color:var(--sd-mut); }
.w22s13-card .w22s13-acts{ margin-top:auto; padding-top:18px; }
/* Xem tất cả + CTA cuối */
.w22s13-all{ margin-top:clamp(16px,1.8vw,24px); text-align:center; }
.w22s13-all a{
display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border-radius:10px;
border:1px solid var(--sd-line); background:#fff; color:var(--sd-ink);
font-family:var(--font-head); font-weight:700; font-size:14.5px; transition:border-color .2s,color .2s;
}
.w22s13-all a:hover{ border-color:var(--sd-ac); color:var(--sd-ac-ink); }
.w22s13-all svg{ flex:0 0 auto; color:var(--sd-ac); }
.w22s13-cta{
display:flex; align-items:center; gap:clamp(16px,2vw,26px); flex-wrap:wrap;
margin-top:clamp(18px,2vw,26px); padding:clamp(20px,2.2vw,30px) clamp(22px,2.4vw,34px);
background:var(--sd-ac-tint); border:1px solid var(--sd-ac-soft); border-radius:20px;
}
.w22s13-cta .ic{ width:58px; height:58px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--sd-ac); display:grid; place-items:center; }
.w22s13-cta .ic svg{ width:28px; height:28px; }
.w22s13-cta > div{ flex:1 1 260px; min-width:0; }
.w22s13-cta b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); line-height:1.28; color:var(--sd-ink); letter-spacing:-.02em; }
.w22s13-cta > div p{ margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--sd-ink2); }
.w22s13-cta a.main{
flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:11px;
background:var(--sd-ac); color:#fff; font-family:var(--font-head); font-weight:700; font-size:15.5px;
transition:background .22s;
}
.w22s13-cta a.main:hover{ background:var(--sd-ac-ink); color:#fff; }
.w22s13-cta a.main svg{ width:18px; height:18px; }
@media (max-width:1180px){
.w22s13-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s13-note{ grid-column:1/-1; }
.w22s13-feat{ grid-template-columns:minmax(0,1fr); }
.w22s13-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
.w22s13-no{ font-size:38px; }
.w22s13-head{ gap:12px 16px; }
.w22s13-grid{ grid-template-columns:minmax(0,1fr); }
.w22s13-acts a.main{ width:100%; justify-content:center; }
.w22s13-cta{ text-align:center; flex-direction:column; }
.w22s13-cta > div{ flex:0 0 auto; width:100%; }
.w22s13-cta a.main, .w22s13-all a{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s13-feat, .w22s13-card, .w22s13-acts a.main, .w22s13-cta a.main{ transition:none; }
}
/* =========================================================================
SECTION 14 — CÂU HỎI THƯỜNG GẶP
Accordion kiểu biên tập: gạch chân mảnh, không thẻ nền riêng từng câu.
Chữ và khoảng trắng là chính. Prefix: .w22s14-
========================================================================= */
.w22s14{
--se-ac:var(--accent);
--se-ac-ink:var(--accent-ink);
--se-ac-soft:var(--accent-soft);
--se-ac-tint:#FFF7F9;
--se-ink:var(--ink);
--se-ink2:var(--ink-3);
--se-mut:var(--ink-4);
--se-line:var(--line);
--se-soft:var(--bg-soft);
background:var(--se-soft);
padding:clamp(52px,7vw,110px) 0;
}
.w22s14-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.w22s14-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(320px,.66fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s14-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--se-ac); opacity:.4; }
.w22s14-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--se-ac); }
.w22s14-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,50px); color:var(--se-ink); margin:10px 0 0; }
.w22s14-h2 span{ color:var(--se-ac); }
.w22s14-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--se-ink2); max-width:62ch; }
.w22s14-note{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; background:#fff; border:1px solid var(--se-line); border-radius:17px; }
.w22s14-note .ic{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:var(--se-ac-soft); color:var(--se-ac); display:grid; place-items:center; }
.w22s14-note .ic svg{ width:28px; height:28px; }
.w22s14-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.4vw,19px); line-height:1.3; color:var(--se-ink); letter-spacing:-.01em; }
.w22s14-note p{ margin:8px 0 0; font-size:13.5px; line-height:1.6; color:var(--se-ink2); }
/* Hai cột câu hỏi */
.w22s14-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,64px); align-items:start; }
.w22s14-col{ background:#fff; border:1px solid var(--se-line); border-radius:18px; padding:4px clamp(18px,1.8vw,26px); }
.w22s14-item{ border-bottom:1px solid var(--se-line); }
.w22s14-item:last-child{ border-bottom:0; }
.w22s14-item > summary{
display:flex; align-items:center; gap:14px; padding:20px 0; cursor:pointer;
list-style:none; min-height:44px;
}
.w22s14-item > summary::-webkit-details-marker{ display:none; }
.w22s14-item > summary:focus-visible{ outline:2px solid var(--se-ac); outline-offset:3px; border-radius:6px; }
.w22s14-item summary .no{ flex:0 0 auto; font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--se-ac); opacity:.55; letter-spacing:.02em; }
.w22s14-item summary .q{ flex:1; min-width:0; font-family:var(--font-head); font-weight:700; font-size:clamp(15.5px,1.3vw,18px); line-height:1.35; color:var(--se-ink); letter-spacing:-.015em; }
.w22s14-item summary .ch{ flex:0 0 auto; color:var(--se-mut); display:grid; place-items:center; transition:transform .22s,color .22s; }
.w22s14-item[open] summary .no{ opacity:1; }
.w22s14-item[open] summary .ch{ transform:rotate(180deg); color:var(--se-ac); }
.w22s14-ans{
padding:0 0 20px 34px; border-left:2px solid var(--se-ac-soft); margin-left:5px;
animation:w22s14-in .22s ease-out;
}
.w22s14-ans p{ font-size:14.5px; line-height:1.72; color:var(--se-ink2); }
@keyframes w22s14-in{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
/* Dải trấn an cuối */
.w22s14-more{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:clamp(14px,2vw,26px);
margin-top:clamp(20px,2.2vw,30px); padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
background:var(--se-ac-tint); border:1px solid var(--se-ac-soft); border-radius:18px;
}
.w22s14-more > div{ flex:1 1 300px; min-width:0; }
.w22s14-more b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); line-height:1.28; color:var(--se-ink); letter-spacing:-.02em; }
.w22s14-more p{ margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--se-ink2); }
.w22s14-more a{
flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:11px;
border:1.5px solid var(--se-ac); background:transparent; color:var(--se-ac-ink);
font-family:var(--font-head); font-weight:700; font-size:15px; transition:background .22s,color .22s;
}
.w22s14-more a:hover{ background:var(--se-ac); color:#fff; }
.w22s14-more a svg{ flex:0 0 auto; }
@media (max-width:1180px){
.w22s14-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s14-note{ grid-column:1/-1; }
}
@media (max-width:900px){
.w22s14-cols{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
.w22s14-no{ font-size:38px; }
.w22s14-head{ gap:12px 16px; }
.w22s14-item summary .q{ font-size:16px; }
.w22s14-ans{ padding-left:28px; }
.w22s14-more a{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s14-item summary .ch, .w22s14-more a{ transition:none; }
.w22s14-ans{ animation:none; }
}
/* =========================================================================
SECTION 15 — LĨNH VỰC THIẾT KẾ WEBSITE
Mười nhóm ngành, mỗi nhóm là một danh sách link tới trang lĩnh vực. Dạng
danh mục, không phải thẻ nặng — chữ và đường kẻ mảnh là chính.
Prefix: .w22s15-
========================================================================= */
.w22s15{
--si-ac:var(--accent);
--si-ac-ink:var(--accent-ink);
--si-ac-soft:var(--accent-soft);
--si-ac-tint:#FFF7F9;
--si-ink:var(--ink);
--si-ink2:var(--ink-3);
--si-mut:var(--ink-4);
--si-line:var(--line);
--si-soft:var(--bg-soft);
--si-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s15-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.w22s15-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(330px,.7fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s15-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--si-ac); opacity:.4; }
.w22s15-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--si-ac); }
.w22s15-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,50px); color:var(--si-ink); margin:10px 0 0; text-wrap:balance; }
.w22s15-h2 span{ color:var(--si-ac); }
.w22s15-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--si-ink2); max-width:60ch; text-wrap:pretty; }
.w22s15-note{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; background:var(--si-ac-tint); border:1px solid var(--si-ac-soft); border-radius:17px; }
.w22s15-note .ic{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--si-ac); display:grid; place-items:center; }
.w22s15-note .ic svg{ width:28px; height:28px; }
.w22s15-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.35vw,18px); line-height:1.3; color:var(--si-ink); letter-spacing:-.01em; text-wrap:balance; }
.w22s15-note p{ margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--si-ink2); text-wrap:pretty; }
/* Lưới nhóm ngành */
.w22s15-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.3vw,20px); }
.w22s15-group{
display:flex; flex-direction:column;
padding:clamp(18px,1.6vw,22px); background:#fff; border:1px solid var(--si-line);
border-radius:18px; box-shadow:var(--si-sh); transition:border-color .2s;
}
.w22s15-group:hover{ border-color:var(--si-ac); }
.w22s15-group__hd{ display:flex; align-items:center; gap:11px; padding-bottom:13px; border-bottom:1px solid var(--si-line); }
.w22s15-group__hd .ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; background:var(--si-ac-soft); color:var(--si-ac); display:grid; place-items:center; }
.w22s15-group h3{ font-family:var(--font-head); font-weight:800; font-size:14.5px; line-height:1.25; color:var(--si-ink); letter-spacing:-.015em; text-wrap:balance; }
.w22s15-group > ul{ display:flex; flex-direction:column; margin-top:4px; }
.w22s15-group > ul li + li{ border-top:1px solid var(--si-soft); }
.w22s15-group > ul a{
/* Nhãn ghi đủ "Thiết kế website …" nên có thể xuống hai dòng — mũi tên bám
dòng ĐẦU thay vì trôi ra giữa. */
display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
padding:9px 0; font-size:12.5px; line-height:1.45; color:var(--si-ink2); transition:color .18s;
}
.w22s15-group > ul a span{ min-width:0; text-wrap:pretty; }
.w22s15-group > ul a svg{ flex:0 0 auto; margin-top:2px; color:var(--si-ac); opacity:.55; transition:opacity .18s,transform .18s; }
.w22s15-group > ul a:hover{ color:var(--si-ac-ink); }
.w22s15-group > ul a:hover svg{ opacity:1; transform:translateX(2px); }
/* Dải cuối */
.w22s15-cta{
display:flex; align-items:center; gap:clamp(16px,2vw,26px); flex-wrap:wrap;
margin-top:clamp(18px,2vw,26px); padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
background:var(--si-ac-tint); border:1px solid var(--si-ac-soft); border-radius:20px;
}
.w22s15-cta .ic{ width:56px; height:56px; border-radius:50%; flex:0 0 auto; background:#fff; color:var(--si-ac); display:grid; place-items:center; }
.w22s15-cta .ic svg{ width:27px; height:27px; }
.w22s15-cta > div{ flex:1 1 280px; min-width:0; }
.w22s15-cta b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,20px); line-height:1.28; color:var(--si-ink); letter-spacing:-.02em; }
.w22s15-cta p{ margin:7px 0 0; font-size:14px; line-height:1.6; color:var(--si-ink2); text-wrap:pretty; }
.w22s15-cta > a{
flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:11px;
border:1.5px solid var(--si-ac); background:#fff; color:var(--si-ac-ink);
font-family:var(--font-head); font-weight:700; font-size:15px; transition:background .2s,color .2s;
}
.w22s15-cta > a:hover{ background:var(--si-ac); color:#fff; }
.w22s15-cta > a svg{ flex:0 0 auto; }
@media (max-width:1320px){
.w22s15-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:1180px){
.w22s15-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s15-note{ grid-column:1/-1; }
.w22s15-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px){
.w22s15-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
.w22s15-no{ font-size:38px; }
.w22s15-head{ gap:12px 16px; }
.w22s15-grid{ grid-template-columns:minmax(0,1fr); }
.w22s15-cta{ text-align:center; flex-direction:column; }
.w22s15-cta > div{ flex:0 0 auto; width:100%; }
.w22s15-cta > a{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s15-group, .w22s15-group > ul a, .w22s15-group > ul a svg, .w22s15-cta > a{ transition:none; }
}
/* =========================================================================
SECTION 16 — DỊCH VỤ LIÊN QUAN
Sáu thẻ dịch vụ, icon coral trong ô bo tròn, nhấn bằng viền khi rê chuột.
Prefix: .w22s16-
========================================================================= */
.w22s16{
--sg-ac:var(--accent);
--sg-ac-ink:var(--accent-ink);
--sg-ac-soft:var(--accent-soft);
--sg-ac-tint:#FFF7F9;
--sg-ink:var(--ink);
--sg-ink2:var(--ink-3);
--sg-mut:var(--ink-4);
--sg-line:var(--line);
--sg-soft:var(--bg-soft);
--sg-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--sg-soft);
padding:clamp(52px,7vw,110px) 0;
}
.w22s16-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.w22s16-head{
display:grid; grid-template-columns:auto minmax(0,1fr) minmax(330px,.7fr);
gap:clamp(18px,2.4vw,36px); align-items:start; margin-bottom:clamp(24px,2.8vw,40px);
}
.w22s16-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--sg-ac); opacity:.4; }
.w22s16-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sg-ac); }
.w22s16-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,50px); color:var(--sg-ink); margin:10px 0 0; }
.w22s16-h2 span{ color:var(--sg-ac); }
.w22s16-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--sg-ink2); max-width:60ch; }
.w22s16-note{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start;
padding:20px 22px; background:#fff; border:1px solid var(--sg-line); border-radius:17px;
}
.w22s16-note .ic{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; background:var(--sg-ac-soft); color:var(--sg-ac); display:grid; place-items:center; }
.w22s16-note .ic svg{ width:26px; height:26px; }
.w22s16-note b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(16px,1.35vw,18px); line-height:1.3; color:var(--sg-ink); letter-spacing:-.01em; }
.w22s16-note p{ margin:7px 0 0; font-size:13px; line-height:1.6; color:var(--sg-ink2); }
.w22s16-note > a{
grid-column:1/-1; justify-self:start; display:inline-flex; align-items:center; gap:8px;
margin-top:4px; padding:11px 20px; border-radius:10px;
border:1.5px solid var(--sg-ac); color:var(--sg-ac-ink);
font-family:var(--font-head); font-weight:700; font-size:14px; transition:background .2s,color .2s;
}
.w22s16-note > a:hover{ background:var(--sg-ac); color:#fff; }
.w22s16-note > a svg{ flex:0 0 auto; }
.w22s16-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px); }
.w22s16-card{
display:flex; align-items:flex-start; gap:16px;
padding:clamp(22px,2.2vw,30px); background:#fff; border:1px solid var(--sg-line);
border-radius:18px; box-shadow:var(--sg-sh); transition:border-color .2s;
}
.w22s16-card:hover{ border-color:var(--sg-ac); }
.w22s16-card__ic{ width:58px; height:58px; border-radius:16px; flex:0 0 auto; background:var(--sg-ac-soft); color:var(--sg-ac); display:grid; place-items:center; }
.w22s16-card__ic svg{ width:28px; height:28px; }
/* Cột chữ cao hết thẻ để link "Tìm hiểu thêm" luôn dính đáy, thẳng hàng nhau. */
.w22s16-card > div{ display:flex; flex-direction:column; align-self:stretch; min-width:0; }
.w22s16-card h3{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.4vw,20px); line-height:1.26; color:var(--sg-ink); letter-spacing:-.02em; text-wrap:balance; }
.w22s16-card p{ margin:10px 0 0; font-size:13.5px; line-height:1.62; color:var(--sg-ink2); text-wrap:pretty; }
.w22s16-card a{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px; margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:600; color:var(--sg-ac-ink); }
.w22s16-card a:hover{ color:var(--sg-ac); text-decoration:underline; text-underline-offset:3px; }
.w22s16-card a svg{ flex:0 0 auto; }
@media (max-width:1180px){
.w22s16-head{ grid-template-columns:auto minmax(0,1fr); }
.w22s16-note{ grid-column:1/-1; }
.w22s16-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
.w22s16-no{ font-size:38px; }
.w22s16-head{ gap:12px 16px; }
.w22s16-grid{ grid-template-columns:minmax(0,1fr); }
.w22s16-note > a{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
.w22s16-card, .w22s16-note > a{ transition:none; }
}
/* =========================================================================
SECTION 17 — BÀI VIẾT LIÊN QUAN + TÁC GIẢ
Phần tiêu đề nằm BÊN TRÁI cùng hàng với các thẻ (khác nhịp mọi section
trên) — ba thẻ bài rồi tới thẻ tác giả. Prefix: .w22s17-
========================================================================= */
.w22s17{
--sh-ac:var(--accent);
--sh-ac-ink:var(--accent-ink);
--sh-ac-soft:var(--accent-soft);
--sh-ac-tint:#FFF7F9;
--sh-ink:var(--ink);
--sh-ink2:var(--ink-3);
--sh-mut:var(--ink-4);
--sh-line:var(--line);
--sh-soft:var(--bg-soft);
--sh-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s17-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.w22s17-row{
display:grid; grid-template-columns:minmax(210px,.95fr) repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,24px); align-items:start;
}
.w22s17-head{ padding-right:8px; }
.w22s17-no{ display:block; font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--sh-ac); opacity:.4; }
.w22s17-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--sh-ac); }
.w22s17-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(24px,2.4vw,36px); color:var(--sh-ink); margin:10px 0 0; }
.w22s17-h2 span{ color:var(--sh-ac); }
.w22s17-desc{ margin:14px 0 0; font-size:14px; line-height:1.65; color:var(--sh-ink2); text-wrap:pretty; }
.w22s17-card{
display:flex; flex-direction:column; height:100%;
background:#fff; border:1px solid var(--sh-line); border-radius:18px; overflow:hidden;
box-shadow:var(--sh-sh); transition:border-color .2s;
}
.w22s17-card:hover{ border-color:var(--sh-ac); }
.w22s17-card__shot{ background:var(--sh-soft); border-bottom:1px solid var(--sh-line); }
.w22s17-card__shot img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.w22s17-card__body{ display:flex; flex-direction:column; flex:1; padding:clamp(16px,1.5vw,20px); }
.w22s17-cat{
display:inline-flex; align-self:flex-start; padding:4px 10px; border-radius:7px;
background:var(--sh-ac-soft); color:var(--sh-ac-ink); font-size:11px; font-weight:700;
}
.w22s17-card h3{ margin:11px 0 0; font-family:var(--font-head); font-weight:800; font-size:15.5px; line-height:1.3; letter-spacing:-.015em; text-wrap:balance; }
.w22s17-card h3 a{ color:var(--sh-ink); }
.w22s17-card h3 a:hover{ color:var(--sh-ac-ink); }
.w22s17-card__body > p{ margin:9px 0 0; font-size:12.5px; line-height:1.6; color:var(--sh-ink2); text-wrap:pretty; }
.w22s17-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.w22s17-card__foot .mins{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--sh-mut); }
.w22s17-card__foot .mins svg{ flex:0 0 auto; }
.w22s17-card__foot a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--sh-ac-ink); }
.w22s17-card__foot a:hover{ color:var(--sh-ac); }
.w22s17-card__foot a svg{ flex:0 0 auto; }
.w22s17-author{
display:flex; flex-direction:column; height:100%;
padding:clamp(18px,1.8vw,24px); background:var(--sh-ac-tint);
border:1px solid var(--sh-ac-soft); border-radius:18px;
}
.w22s17-author .w22s17-eyebrow{ margin-top:0; }
.w22s17-author__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.w22s17-author__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.4vw,20px); line-height:1.2; color:var(--sh-ink); letter-spacing:-.02em; }
.w22s17-author__hd span{ display:block; margin-top:4px; font-size:13px; font-weight:600; color:var(--sh-ac-ink); }
.w22s17-author img{ width:64px; height:64px; border-radius:50%; flex:0 0 auto; object-fit:cover; border:2px solid #fff; }
.w22s17-author > p{ margin:12px 0 0; font-size:12.5px; line-height:1.62; color:var(--sh-ink2); text-wrap:pretty; }
.w22s17-author .main{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
margin-top:auto; padding-top:0; margin-bottom:10px;
padding:12px 18px; border-radius:10px; background:var(--sh-ac); color:#fff;
font-family:var(--font-head); font-weight:700; font-size:13.5px; transition:background .2s;
}
.w22s17-author .main:hover{ background:var(--sh-ac-ink); color:#fff; }
.w22s17-author .sub{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--sh-ink2); }
.w22s17-author .sub:hover{ color:var(--sh-ac-ink); }
.w22s17-author a svg{ flex:0 0 auto; }
@media (max-width:1180px){
.w22s17-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s17-head{ grid-column:1/-1; }
.w22s17-h2{ font-size:clamp(26px,3vw,38px); }
}
@media (max-width:640px){
.w22s17-row{ grid-template-columns:minmax(0,1fr); }
.w22s17-no{ font-size:38px; }
.w22s17-author .main{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
.w22s17-card, .w22s17-author .main{ transition:none; }
}
/* =========================================================================
SECTION 15 — BẮT ĐẦU DỰ ÁN (CTA cuối trang)
Trái: ba điều cần nói. Phải: biểu mẫu gọn. Dưới: kênh liên hệ + dải trấn an.
Xanh lá / cam CHỈ dùng cho trạng thái gửi. Prefix: .w22s18-
========================================================================= */
.w22s18{
--sf-ac:var(--accent);
--sf-ac-ink:var(--accent-ink);
--sf-ac-soft:var(--accent-soft);
--sf-ac-tint:#FFF7F9;
--sf-ink:var(--ink);
--sf-ink2:var(--ink-3);
--sf-mut:var(--ink-4);
--sf-line:var(--line);
--sf-soft:var(--bg-soft);
--sf-ok:#2B7A4B; --sf-ok-bg:#E7F4EC;
--sf-warn:#A8581F; --sf-warn-bg:#FBF0E3;
--sf-sh:0 10px 26px -20px rgba(20,21,26,.22);
background:var(--bg);
padding:clamp(52px,7vw,110px) 0;
}
.w22s18-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.w22s18-main{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(24px,3vw,52px); align-items:start; }
/* Biểu mẫu dài hơn cột trái khá nhiều — cho phần trái bám theo khi cuộn để
không hở một mảng trắng lớn. Chỉ bật ở màn rộng và khi phần trái đủ thấp. */
@media (min-width:1181px){
.w22s18-left{ position:sticky; top:96px; }
}
/* Cột trái */
.w22s18-head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,1.8vw,26px); align-items:start; }
.w22s18-no{ font-family:var(--font-head); font-weight:800; letter-spacing:-.04em; line-height:.88; font-size:clamp(42px,4.4vw,64px); color:var(--sf-ac); opacity:.4; }
.w22s18-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sf-ac); }
.w22s18-h2{ font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; line-height:1.06; font-size:clamp(28px,3.4vw,52px); color:var(--sf-ink); margin:10px 0 0; }
.w22s18-h2 span{ color:var(--sf-ac); }
.w22s18-desc{ margin:16px 0 0; font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:var(--sf-ink2); max-width:56ch; }
.w22s18-steps{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px);
margin-top:clamp(22px,2.6vw,36px);
}
.w22s18-steps li{
position:relative; padding:clamp(18px,1.8vw,24px);
background:var(--sf-ac-tint); border:1px solid var(--sf-ac-soft); border-radius:16px;
}
.w22s18-steps .n{ font-family:var(--font-head); font-weight:800; font-size:12px; color:var(--sf-ac); opacity:.75; letter-spacing:.02em; }
.w22s18-steps .ic{ display:grid; place-items:center; width:48px; height:48px; margin:10px 0 0; border-radius:50%; background:#fff; color:var(--sf-ac); }
.w22s18-steps .ic svg{ width:24px; height:24px; }
.w22s18-steps b{ display:block; margin-top:14px; font-family:var(--font-head); font-weight:800; font-size:clamp(15px,1.25vw,17px); line-height:1.3; color:var(--sf-ink); letter-spacing:-.015em; }
.w22s18-steps p{ margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--sf-ink2); }
.w22s18-steps .opt{ display:inline-block; margin-top:10px; padding:4px 10px; border-radius:7px; background:#fff; border:1px solid var(--sf-ac-soft); font-size:11.5px; font-weight:600; color:var(--sf-ac-ink); }
.w22s18-enough{ margin-top:clamp(16px,1.8vw,22px); font-size:15px; line-height:1.6; }
.w22s18-enough b{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,20px); color:var(--sf-ac); letter-spacing:-.015em; }
.w22s18-enough span{ display:block; margin-top:5px; color:var(--sf-ink2); font-size:14px; }
/* Biểu mẫu */
.w22s18-formwrap{
padding:clamp(24px,2.6vw,38px); background:#fff; border:1px solid var(--sf-line);
border-radius:22px; box-shadow:var(--sf-sh);
}
.w22s18-form__hd{ display:flex; align-items:flex-start; gap:14px; padding-bottom:clamp(16px,1.8vw,22px); border-bottom:1px solid var(--sf-line); }
.w22s18-form__hd .ic{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; background:var(--sf-ac-soft); color:var(--sf-ac); display:grid; place-items:center; }
.w22s18-form__hd .ic svg{ width:25px; height:25px; }
.w22s18-form__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); line-height:1.28; color:var(--sf-ink); letter-spacing:-.02em; }
.w22s18-form__hd p{ margin:7px 0 0; font-size:13.5px; line-height:1.6; color:var(--sf-ink2); }
.w22s18-f{ margin-top:clamp(14px,1.5vw,18px); }
.w22s18-f label,
.w22s18-via legend{ display:block; margin-bottom:7px; font-size:13.5px; font-weight:600; color:var(--sf-ink); }
.w22s18-f .req{ color:var(--sf-ac); }
.w22s18-f .hint{ display:block; margin-top:6px; font-size:12.5px; color:var(--sf-mut); }
.w22s18-f input,
.w22s18-f select,
.w22s18-f textarea{
width:100%; min-height:48px; padding:12px 14px; border-radius:11px;
border:1px solid var(--sf-line); background:#fff; color:var(--sf-ink);
font-family:inherit; font-size:14.5px; line-height:1.5; transition:border-color .18s,box-shadow .18s;
}
.w22s18-f textarea{ resize:vertical; }
.w22s18-f input::placeholder,
.w22s18-f textarea::placeholder{ color:var(--sf-mut); }
.w22s18-f input:focus-visible,
.w22s18-f select:focus-visible,
.w22s18-f textarea:focus-visible{ outline:none; border-color:var(--sf-ac); box-shadow:0 0 0 3px var(--sf-ac-soft); }
.w22s18-f [aria-invalid="true"]{ border-color:var(--sf-warn); background:var(--sf-warn-bg); }
.w22s18-via{ margin-top:clamp(14px,1.5vw,18px); border:0; padding:0; }
.w22s18-seg{ display:flex; gap:8px; flex-wrap:wrap; }
.w22s18-seg label{ flex:1 1 140px; margin:0; }
.w22s18-seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.w22s18-seg span{
display:flex; align-items:center; justify-content:center; min-height:46px; padding:10px 14px;
border:1px solid var(--sf-line); border-radius:11px; background:#fff;
font-size:14px; font-weight:600; color:var(--sf-ink2); cursor:pointer; transition:border-color .18s,background .18s,color .18s;
}
.w22s18-seg input:checked + span{ border-color:var(--sf-ac); background:var(--sf-ac-soft); color:var(--sf-ac-ink); }
.w22s18-seg input:focus-visible + span{ outline:2px solid var(--sf-ac); outline-offset:2px; }
.w22s18-via .w22s18-f{ margin-top:10px; }
.w22s18-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.w22s18-chips button{
padding:7px 13px; border-radius:8px; border:1px solid var(--sf-line); background:var(--sf-soft);
font-family:inherit; font-size:12.5px; color:var(--sf-ink2); cursor:pointer; transition:border-color .18s,color .18s,background .18s;
}
.w22s18-chips button:hover{ border-color:var(--sf-ac); background:var(--sf-ac-soft); color:var(--sf-ac-ink); }
.w22s18-chips button:focus-visible{ outline:2px solid var(--sf-ac); outline-offset:2px; }
.w22s18-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.3vw,16px); }
.w22s18-row .w22s18-f{ margin-top:clamp(14px,1.5vw,18px); }
.w22s18-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.w22s18-submit{
display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px;
margin-top:clamp(18px,2vw,24px); padding:14px 28px; border:0; border-radius:12px;
background:var(--sf-ac); color:#fff; font-family:var(--font-head); font-weight:700; font-size:16px;
cursor:pointer; transition:background .22s;
}
.w22s18-submit:hover{ background:var(--sf-ac-ink); }
.w22s18-submit:focus-visible{ outline:2px solid var(--sf-ac-ink); outline-offset:3px; }
.w22s18-submit[disabled]{ opacity:.72; cursor:progress; }
.w22s18-submit svg{ flex:0 0 auto; }
.w22s18-trust{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:12.5px; line-height:1.55; color:var(--sf-mut); }
.w22s18-trust .ic{ flex:0 0 auto; margin-top:1px; }
.w22s18-msg{ margin-top:12px; font-size:13.5px; line-height:1.55; }
.w22s18-msg:empty{ display:none; }
.w22s18-msg.is-sending{ color:var(--sf-ink2); }
.w22s18-msg.is-ok{ padding:12px 14px; border-radius:11px; background:var(--sf-ok-bg); color:var(--sf-ok); font-weight:600; }
.w22s18-msg.is-err{ padding:12px 14px; border-radius:11px; background:var(--sf-warn-bg); color:var(--sf-warn); font-weight:600; }
/* Kênh liên hệ khác */
.w22s18-chans{ margin-top:clamp(20px,2.4vw,32px); padding:clamp(22px,2.4vw,32px); background:var(--sf-soft); border:1px solid var(--sf-line); border-radius:20px; }
.w22s18-chans__hd{ text-align:center; margin-bottom:clamp(16px,1.8vw,24px); }
.w22s18-chans__hd b{ display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); color:var(--sf-ink); letter-spacing:-.02em; }
.w22s18-chans__hd p{ margin:7px 0 0; font-size:14px; color:var(--sf-ink2); }
.w22s18-chans ul{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.w22s18-chans li{ display:flex; flex-direction:column; padding:clamp(18px,1.8vw,24px); background:#fff; border:1px solid var(--sf-line); border-radius:16px; }
.w22s18-chans .ic{ width:48px; height:48px; border-radius:50%; background:var(--sf-ac-soft); color:var(--sf-ac); display:grid; place-items:center; }
.w22s18-chans .ic svg{ width:24px; height:24px; }
.w22s18-chans li b{ margin-top:14px; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--sf-ink); letter-spacing:-.015em; }
.w22s18-chans li p{ margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--sf-ink2); }
.w22s18-chans .val{ margin-top:10px; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--sf-ac-ink); word-break:break-word; }
.w22s18-chans li a{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:600; color:var(--sf-ink2); }
.w22s18-chans li a:hover{ color:var(--sf-ac-ink); }
.w22s18-chans li a svg{ flex:0 0 auto; }
/* Dải trấn an */
.w22s18-strip{
display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,3fr); gap:clamp(16px,2vw,32px); align-items:start;
margin-top:clamp(16px,1.8vw,24px); padding:clamp(20px,2.2vw,30px) clamp(22px,2.4vw,34px);
background:var(--sf-ac-tint); border:1px solid var(--sf-ac-soft); border-radius:20px;
}
.w22s18-strip__hd b{ font-family:var(--font-head); font-weight:800; font-size:clamp(17px,1.5vw,21px); line-height:1.28; color:var(--sf-ink); letter-spacing:-.02em; }
.w22s18-strip ul{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); }
.w22s18-strip li{ padding-left:16px; border-left:1px solid var(--sf-ac-soft); }
.w22s18-strip li:first-child{ padding-left:0; border-left:0; }
.w22s18-strip .t{ display:flex; align-items:center; gap:9px; }
.w22s18-strip .t svg{ flex:0 0 auto; width:18px; height:18px; color:var(--sf-ac); }
.w22s18-strip .t b{ font-family:var(--font-head); font-weight:700; font-size:13.5px; line-height:1.25; color:var(--sf-ink); }
.w22s18-strip li p{ margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--sf-ink2); }
@media (max-width:1180px){
.w22s18-main{ grid-template-columns:minmax(0,1fr); }
.w22s18-chans ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s18-strip{ grid-template-columns:minmax(0,1fr); }
.w22s18-strip ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.w22s18-strip li:nth-child(3){ padding-left:0; border-left:0; }
}
@media (max-width:640px){
.w22s18-no{ font-size:38px; }
.w22s18-head{ gap:12px 16px; }
.w22s18-steps{ grid-template-columns:minmax(0,1fr); }
.w22s18-row{ grid-template-columns:minmax(0,1fr); }
.w22s18-chans ul{ grid-template-columns:minmax(0,1fr); }
.w22s18-strip ul{ grid-template-columns:minmax(0,1fr); }
.w22s18-strip li{ padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--sf-ac-soft); }
.w22s18-strip li:first-child{ padding-top:0; border-top:0; }
}
@media (prefers-reduced-motion:reduce){
.w22s18-submit, .w22s18-seg span, .w22s18-chips button, .w22s18-f input, .w22s18-f textarea, .w22s18-f select{ transition:none; }
}
/* =========================================================================
SOÁT DÒNG CHỮ — áp cho CẢ 15 section của trang này
Chữa lỗi gãy dòng cụt: tiêu đề bị rớt đúng một chữ xuống dòng cuối
("…theo dự / án", "…kỹ / thuật"). Trình duyệt tự cân lại độ dài các dòng
thay vì mình chẻ chữ bằng tay — đổi khổ màn hình vẫn đẹp.
· balance → cho tiêu đề ngắn (vài dòng): chia các dòng đều nhau
· pretty → cho đoạn văn dài: chỉ lo dòng cuối không cụt
Khối này để CUỐI file, chỉ thêm luật mới, không sửa CSS section cũ.
========================================================================= */
.w22s1-h2, .w22s2-h2, .w22s3-h2, .w22s4-h2, .w22s5-h2,
.w22s6-h2, .w22s7-h2, .w22s8-h2, .w22s9-h2, .w22s10-h2,
.w22s11-h2, .w22s12-h2, .w22s13-h2, .w22s14-h2, .w22s18-h2,
.w22s10-note b, .w22s11-note b, .w22s12-note b, .w22s13-note b, .w22s14-note b,
.w22s10-strip__hd b, .w22s11-strip__hd b, .w22s12-strip__hd b, .w22s18-strip__hd b,
.w22s10-pillar h3, .w22s11-card h3, .w22s12-card h3,
.w22s13-feat__body h3, .w22s13-card__body h3,
.w22s12-cta b, .w22s13-cta b, .w22s14-more b, .w22s18-form__hd b,
.w22s14-item summary .q, .w22s18-steps b, .w22s18-chans li b, .w22s18-enough b{
text-wrap:balance;
}
/* Dòng coral ở thẻ Section 11 tự cân riêng, không dính đuôi một chữ. */
.w22s11-card h3 span{ display:block; text-wrap:balance; }
/* Trên điện thoại, chỗ ngắt dòng cứng của H2 làm câu vỡ thành ba dòng rồi rơi
đúng một chữ xuống cuối. Bỏ ngắt cứng để trình duyệt tự cân cả câu.
(Trong markup đã có sẵn một khoảng trắng ngay sau
— khi
hiện thì
khoảng trắng đó nằm đầu dòng nên bị nuốt, khi
tắt thì nó tách chữ.) */
@media (max-width:640px){
.w22s1-h2 br, .w22s2-h2 br, .w22s3-h2 br, .w22s4-h2 br, .w22s5-h2 br,
.w22s6-h2 br, .w22s7-h2 br, .w22s8-h2 br, .w22s9-h2 br, .w22s10-h2 br,
.w22s11-h2 br, .w22s12-h2 br, .w22s13-h2 br, .w22s14-h2 br, .w22s18-h2 br{
display:none;
}
}
/* Đoạn văn: chỉ chống dòng cuối cụt, không đụng cách ngắt các dòng trên. */
.w22s10-desc, .w22s11-desc, .w22s12-desc, .w22s13-desc, .w22s14-desc, .w22s18-desc,
.w22s11-note p, .w22s12-note p, .w22s13-note p, .w22s14-note p,
.w22s11-card__top p, .w22s12-card > p, .w22s13-rt p,
.w22s11-prins p, .w22s12-prins p, .w22s18-strip li p,
.w22s14-ans p, .w22s11-license, .w22s12-scope, .w22s18-steps p{
text-wrap:pretty;
}
/* =========================================================================
NHỊP ĐỌC CHO CẢ TRANG — trang dài khoảng 26 màn hình, mười tám section.
Trước đây mười một section đầu dùng chung một nền trắng liền mạch nên lướt
không biết đã sang phần mới; ba section có nền "khác" thì lệch trắng chỉ 2%,
mắt không nhận ra. Ở đây làm hai việc:
1. Nền xen kẽ ĐỀU ĐẶN, màu ấm đủ để thấy ranh giới.
2. Mỗi section mở đầu bằng một vạch ngang mảnh, đoạn đầu vạch tô coral —
như dấu sang chương của sách.
Dùng selector ID để thắng phần khai màu nền trong từng khối section, khỏi
phải sửa lại mười tám khối cũ. Để CUỐI file cho dễ tìm khi thêm section mới.
========================================================================= */
#need-finder, #reference-website, #website-value, #website-timeline,
#website-quality, #after-launch-support, #website-faq, #related-services{
background-color:#F6F4F0;
}
#website-goal, #website-showcase, #website-pricing, #website-sitemap,
#project-preparation, #website-ownership, #website-case-studies,
#website-industries, #related-reading{
background-color:#fff;
}
/* Khối chốt trang lấy nền coral rất nhạt để đóng lại một mạch đọc dài. */
#start-website-project{ background-color:#FFF7F9; }
/* Bấm một chấm ở mục lục thì chừa chỗ cho thanh menu dính trên, khỏi che mất
dòng tiêu đề của phần vừa nhảy tới. */
#website-goal, #need-finder, #website-showcase, #reference-website,
#website-pricing, #website-value, #website-sitemap, #website-timeline,
#project-preparation, #website-quality, #website-ownership,
#after-launch-support, #website-case-studies, #website-faq,
#website-industries, #related-services, #related-reading,
#start-website-project{ scroll-margin-top:88px; }
/* Bộ điều hướng trang dài (w22nav-bar + w22nav) đã tách ra dùng chung:
assets/css/w22nav.css — đừng khai lại ở đây. */
/* Vạch sang chương. Section 01 không có vì nó nằm ngay dưới thanh menu. */
#need-finder, #website-showcase, #reference-website, #website-pricing,
#website-value, #website-sitemap, #website-timeline, #project-preparation,
#website-quality, #website-ownership, #after-launch-support,
#website-case-studies, #website-faq, #website-industries,
#related-services, #related-reading, #start-website-project{
background-image:linear-gradient(90deg, var(--accent) 0 72px, var(--line) 72px 100%);
background-repeat:no-repeat;
background-size:100% 2px;
background-position:0 0;
}