/* ═══════════════════════════════════════════════════════════════════════════ vietbaic.com — trang chủ. Ý đồ: cả trang là MỘT CHUỖI BẰNG CHỨNG. Mỗi lời hứa đi liền tang chứng của nó, chứ đừng gom hết ảnh chụp vào một khối cuối trang rồi để phần trên toàn chữ hứa. Người đọc bỏ trang ở chỗ họ phải TIN mà chẳng có gì để nhìn. Bản 20/08 chiều — K xem bản đầu và bắt đúng một lỗi: những dải nền đen làm trang trông "đen chết chóc", lại thêm vệt sáng cam chồng vệt sáng tím nên "nhem nhuốc đủ màu". Đúng. Sang trọng đến từ chỗ TRỐNG và từ sự kiềm chế, chứ không từ nền tối. Nên đảo lại: cả trang SÁNG. Màu tối chỉ còn ở đúng hai nơi — · bên trong khung ôm ảnh chụp (ảnh Google và ChatGPT vốn là giao diện tối, khung tối làm chúng liền một khối thay vì như dán vào), và · chân trang. Trên nền sáng, mấy khung tối đó thành điểm dừng của mắt. Đó chính là chỗ ta muốn mắt dừng: bằng chứng. Màu nhấn: MỘT màu cam, chỉ dùng cho nút hành động chính. Chàm dùng cho liên kết và số. Hết. Không vệt sáng nhiều màu. Chữ: font hệ thống đứng đầu (máy Apple tải 0 byte font), Be Vietnam Pro tự chứa đứng thứ hai — dùng chung sáu tệp woff2 với giao diện bài viết. ═══════════════════════════════════════════════════════════════════════════ */ /* Chữ dự phòng: Inter, bản biến thiên (một tệp lo đủ độ đậm 400–800). Đổi từ Plus Jakarta Sans sang đây vì một lý do thực dụng: Inter dựng theo cùng lối với SF Pro của Apple. Nhờ vậy máy Apple (thấy SF Pro) và máy Windows/Android (thấy Inter) đọc ra CÙNG một thiết kế — trước đó Plus Jakarta Sans rộng và tròn hơn hẳn SF Pro, nên tuỳ máy mà trang trông ra hai kiểu khác nhau, mà chỉ mình K là người luôn nhìn thấy bản dự phòng. Máy Apple vẫn KHÔNG tải một byte font nào. */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/Inter-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} @font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/Inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root{ --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif; /* nền: giấy nguội, thẻ trắng, viền mảnh */ --nen:#F6F7FB; --nen-2:#EEF0F8; /* dải trầm hơn một nhịp, dùng để chia đoạn */ --mat:#FFFFFF; --vien:#E4E8F1; --vien-mo:#EEF1F7; --tit:#101828; --chu:#39475C; --nhe:#57677E; --mo:#8493A8; --nhan:#4F46E5; --nhan-dam:#4338CA; --nhan-nhat:#EEF0FF; --cam:#F97316; /* CHỈ dùng cho nút hành động chính */ --cam-dam:#EA580C; /* tối: chỉ sống bên trong khung ảnh và ở chân trang */ --toi:#141B2C; --toi-2:#1B2338; --toi-chu:#94A3BE; --bo:16px; --bo-2:22px; --bo-3:30px; --eas:cubic-bezier(.22,.68,.36,1); --dinh:64px; --anh-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05); --anh-2:0 2px 8px -3px rgba(16,24,40,.06),0 18px 36px -18px rgba(16,24,40,.16); --anh-3:0 10px 20px -10px rgba(16,24,40,.10),0 40px 80px -28px rgba(16,24,40,.24); --anh-toi:0 10px 20px -12px rgba(16,24,40,.20),0 32px 60px -28px rgba(16,24,40,.34); } @media (max-width:820px){:root{--dinh:56px;}} @view-transition{navigation:auto;} *,*::before,*::after{box-sizing:border-box;} *{margin:0;} html{-webkit-text-size-adjust:100%;background:var(--nen);scroll-padding-top:calc(var(--dinh) + 16px);} body{ font-family:var(--font); font-size:clamp(17px,1rem + .3vw,18.5px); /* 1.75 chứ không phải 1.7: chữ Việt chồng tới hai tầng dấu (ế, ộ, ữ), dãn dòng bó quá thì dấu dòng dưới đụng chân dòng trên. */ line-height:1.75;color:var(--chu);background:var(--nen); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg{max-width:100%;height:auto;display:block;} button,input{font:inherit;color:inherit;} a{color:var(--nhan-dam);text-decoration:none;} ::selection{background:#DEE0FF;color:var(--tit);} :focus-visible{outline:2px solid var(--nhan);outline-offset:3px;border-radius:8px;} .an{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} .so{font-variant-numeric:tabular-nums;} .bo{max-width:1220px;margin:0 auto;padding:0 22px;} .bo-hep{max-width:900px;margin:0 auto;padding:0 22px;} /* Giãn chữ âm vừa phải thôi. Cỡ chữ lớn thì kéo sát vào cho chắc nét, nhưng kéo quá tay là dấu mũ với dấu thanh của chữ này chạm sang chữ bên cạnh. */ h1,h2,h3,h4{color:var(--tit);text-wrap:balance;line-height:1.18;letter-spacing:-.024em;font-weight:800;} h1{font-size:clamp(36px,1.9rem + 3.4vw,66px);line-height:1.08;letter-spacing:-.032em;} h2{font-size:clamp(27px,1.4rem + 1.9vw,42px);} h3{font-size:clamp(19px,1.05rem + .55vw,23px);letter-spacing:-.018em;line-height:1.3;} p{text-wrap:pretty;} .nhan-muc{ display:inline-flex;align-items:center;gap:9px; font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--nhan-dam);background:var(--nhan-nhat); border:1px solid color-mix(in oklab,var(--nhan) 18%,transparent); padding:6px 14px;border-radius:999px;margin-bottom:18px; } .nhan-muc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--nhan);} /* Nhãn có sẵn biểu tượng đồng hồ thì bỏ chấm tròn đi, hai dấu hiệu chồng nhau ở cùng một chỗ là thừa. */ .nhan-gio::before{content:none;} .muc-mo{font-size:clamp(16.5px,1rem + .25vw,19px);line-height:1.65;color:var(--nhe);max-width:62ch;margin-top:14px;} /* Măng-sét kiểu tạp chí: "Năm thứ 10 · Tháng 8/2026". Một dòng nói được cả bề dày lẫn chuyện đang chạy, mà chẳng phải thốt ra chữ "lâu đời" hay "cập nhật liên tục" — nói ra miệng thì thành khoe, để hai con số cạnh nhau thì người đọc tự rút ra. Chấm nhỏ nhấp nháy là dấu hiệu "đang sống" quen mắt. */ .mang-set{ display:inline-flex;align-items:center;gap:9px;margin-top:16px; font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase; color:var(--mo); } .ms-cham{ width:7px;height:7px;border-radius:50%;background:#16A34A;flex:none; box-shadow:0 0 0 3px rgba(22,163,74,.16); } @media (prefers-reduced-motion:no-preference){ .ms-cham{animation:ms-tho 2.6s ease-in-out infinite;} @keyframes ms-tho{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.16);}50%{box-shadow:0 0 0 6px rgba(22,163,74,.05);}} } section{padding:clamp(56px,7vw,100px) 0;} section+section{padding-top:clamp(24px,3.2vw,56px);} /* Nhịp của trang làm bằng sắc độ giấy, không làm bằng nền đen. */ .dai-trang{background:var(--mat);border-block:1px solid var(--vien);} .dai-tram{background:var(--nen-2);} .dai-trang+section,.dai-tram+section{padding-top:clamp(56px,7vw,100px);} /* ─── nút ────────────────────────────────────────────────────────────── */ .nut{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 26px;border-radius:14px;border:0;cursor:pointer; font-weight:700;font-size:15.5px;letter-spacing:-.005em;white-space:nowrap; transition:background .18s var(--eas),transform .18s var(--eas),box-shadow .18s var(--eas),border-color .18s var(--eas); } .nut-1{background:var(--cam);color:#fff;box-shadow:0 10px 26px -13px rgba(249,115,22,.9);} .nut-1:hover{background:var(--cam-dam);transform:translateY(-2px);} .nut-2{background:var(--mat);color:var(--tit);border:1px solid var(--vien);} .nut-2:hover{border-color:var(--nhan);color:var(--nhan-dam);transform:translateY(-2px);} .nut-3{background:var(--nhan);color:#fff;} .nut-3:hover{background:var(--nhan-dam);transform:translateY(-2px);} /* ═══ KHUNG TANG CHỨNG ═══════════════════════════════════════════════════ Chỗ duy nhất còn màu tối trong phần thân trang. Ảnh chụp Google và ChatGPT của VBC vốn là giao diện tối; bọc chúng trong khung tối có thanh cửa sổ thì trông như chính màn hình đó, còn đặt lên thẻ trắng thì trông như dán vào. Trên nền giấy sáng, mấy khung này thành đúng chỗ mắt dừng lại. ═══════════════════════════════════════════════════════════════════════ */ .tc{ background:var(--toi);border:1px solid rgba(16,24,40,.12); border-radius:var(--bo-2);overflow:hidden;box-shadow:var(--anh-2); } .tc-thanh{ display:flex;align-items:center;gap:7px;padding:11px 15px; background:var(--toi-2);border-bottom:1px solid rgba(255,255,255,.06); } .tc-thanh i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);flex:none;} .tc-thanh span{ margin-left:8px;font-size:12.5px;color:var(--toi-chu);font-style:normal; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tc-anh{display:block;width:100%;background:#0E1526;} .tc-chan{ display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 12px; padding:12px 16px;font-size:13px;color:var(--toi-chu); border-top:1px solid rgba(255,255,255,.06);background:var(--toi-2); } .tc-chan b{color:#fff;font-weight:600;} .tc-chan em{font-style:normal;color:#7E8CA8;} /* thẻ sáng cho biểu đồ traffic (ảnh nền trắng) */ .bd{ background:var(--mat);border:1px solid var(--vien);border-radius:var(--bo-2); overflow:hidden;box-shadow:var(--anh-1); transition:transform .2s var(--eas),box-shadow .2s var(--eas),border-color .2s var(--eas); } .bd:hover{transform:translateY(-3px);box-shadow:var(--anh-2);border-color:#CFD8E6;} .bd-anh{width:100%;display:block;background:#fff;} .bd-chan{padding:14px 16px 16px;border-top:1px solid var(--vien-mo);} .bd-ten{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--tit);font-size:15px;} /* Năm khách có số công bố, ba khách chưa. Hai kiểu chữ cao thấp khác nhau làm đáy các thẻ so le. Cho cả hai chiếm đúng một chiều cao thì lưới đứng thẳng hàng, mà chỗ nào chưa có số vẫn nói thật là chưa có. */ .bd-so,.kh-chua-so{min-height:34px;display:flex;align-items:center;} .bd-so{font-size:clamp(21px,1rem + 1vw,26px);font-weight:800;color:var(--nhan-dam);letter-spacing:-.028em;margin-top:4px;} .bd-so small{font-size:13px;font-weight:600;color:var(--mo);letter-spacing:0;margin-left:4px;} .bd-nguon{font-size:12.5px;color:var(--mo);margin-top:5px;} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .hien{animation:hien-len linear both;animation-timeline:view();animation-range:entry 0% cover 22%;} @keyframes hien-len{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}} } } /* ═══ khung trên ═══════════════════════════════════════════════════════ */ .dinh{position:sticky;top:0;z-index:60;height:var(--dinh);background:rgba(255,255,255,.88);border-bottom:1px solid var(--vien);} @supports (backdrop-filter:blur(1px)){.dinh{backdrop-filter:saturate(180%) blur(16px);}} .dinh-trong{max-width:1220px;margin:0 auto;padding:0 22px;height:100%;display:flex;align-items:center;gap:26px;} .dinh-logo img{height:34px;width:auto;} .dinh-menu{display:flex;gap:24px;margin-left:6px;flex:1;} .dinh-menu a{color:var(--tit);font-weight:600;font-size:15px;white-space:nowrap;transition:color .15s;} .dinh-menu a:hover{color:var(--nhan-dam);} .dinh-phai{display:flex;align-items:center;gap:14px;flex:none;} .dinh-dt{color:var(--tit);font-weight:700;font-size:15px;} .dinh .nut{padding:10px 20px;font-size:14.5px;border-radius:999px;} .dinh-gap{display:none;margin-left:auto;} .dinh-gap>summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--vien);border-radius:12px;background:var(--mat);} .dinh-gap>summary::-webkit-details-marker{display:none;} .gach,.gach::before,.gach::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--tit);transition:transform .2s var(--eas);} .gach{position:relative;} .gach::before{content:"";position:absolute;top:-6px;} .gach::after{content:"";position:absolute;top:6px;} .dinh-gap[open] .gach{background:transparent;} .dinh-gap[open] .gach::before{transform:translateY(6px) rotate(45deg);} .dinh-gap[open] .gach::after{transform:translateY(-6px) rotate(-45deg);} .dinh-gap-trong{position:fixed;left:0;right:0;top:var(--dinh);background:var(--mat);border-bottom:1px solid var(--vien);padding:12px 22px 22px;box-shadow:var(--anh-2);max-height:calc(100dvh - var(--dinh));overflow-y:auto;} .dinh-gap-trong a{display:block;padding:14px 2px;color:var(--tit);font-weight:600;font-size:17px;border-bottom:1px solid var(--vien-mo);} .dinh-gap-trong .nut{width:100%;margin-top:14px;} @media (max-width:980px){.dinh-menu,.dinh-phai{display:none;}.dinh-gap{display:block;}} /* ═══ HERO ══════════════════════════════════════════════════════════════ Nền trắng, khoảng trống rộng, một câu. Bên phải là ba tang chứng khác loại — chúng tối, nên tự nổi lên khỏi nền giấy mà chẳng cần viền chớp. ══════════════════════════════════════════════════════════════════════ */ .hero{ background: radial-gradient(46% 52% at 6% 0%,color-mix(in oklab,var(--nhan) 8%,transparent),transparent 68%), var(--mat); border-bottom:1px solid var(--vien); padding-top:clamp(46px,5.4vw,82px);padding-bottom:clamp(38px,4.4vw,64px); } /* Hai cột canh theo MÉP TRÊN, không canh giữa. Cột phải cao hơn cột trái khá nhiều, mà canh giữa thì cột trái bị đẩy tụt xuống — sinh ra một mảng trống to ở góc trên trái, nhìn như quên chưa điền gì vào đó (K bắt được 20/08). Canh mép trên thì hai cột cùng bắt đầu một chỗ, đọc ra là cố ý. */ .hero-luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:clamp(34px,4.4vw,68px);align-items:start;} .hero-nhan{ display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--mo);margin-bottom:22px; } /* ── tiêu đề dài, đọc thành hai nhịp ──────────────────────────────────── Câu "Khi khách hàng tìm kiếm, thương hiệu của bạn xuất hiện trước đối thủ" dài 12 chữ. Để nguyên một cỡ thì thành khối chữ, mắt phải leo hết mới hiểu. Bẻ làm hai: vế điều kiện thu nhỏ và nhạt màu, đứng riêng như câu dẫn trên đầu bài báo; vế kết quả giữ cỡ lớn màu mực. Người đọc lấy được ý ở nhịp thứ hai kể cả khi chỉ liếc qua. Ba thứ nữa của dân dàn trang: dãn dòng bó sát vì cỡ chữ càng lớn thì khoảng trống mặc định càng thừa · giãn chữ âm để chữ hoa không rời rạc · chặn bề ngang theo số ký tự để dòng gãy đúng chỗ ngắt ý. */ .hero-tit{ font-size:clamp(31px,1.5rem + 2.5vw,54px); line-height:1.09;letter-spacing:-.03em; max-width:19ch;text-wrap:balance; font-optical-sizing:auto; } .h1-dan{ display:block; font-size:.46em;font-weight:600;line-height:1.25; letter-spacing:-.012em;color:var(--nhe); margin-bottom:.46em;max-width:none; } @media (max-width:1040px){.hero-tit{max-width:22ch;}} /* MỘT dòng, không phải một đoạn. Chặn bề ngang 46 ký tự để câu chẳng bao giờ tràn sang dòng thứ ba trên màn hình rộng. */ .hero-mo{font-size:clamp(17px,1rem + .42vw,21px);line-height:1.5;color:var(--nhe);margin-top:20px;max-width:46ch;} .hero-mo b{color:var(--tit);font-weight:600;} .hero-o{margin-top:32px;max-width:520px;} /* Ba mẩu trấn an dưới ô nhập. Dấu tích nhỏ để mắt nhặt được mà chẳng phải đọc; xám nhạt để chúng đứng dưới nút cam về thứ bậc. */ .hero-chip{ list-style:none;padding:0;margin:14px 0 0;max-width:none; display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px; } .hero-chip li{ position:relative;padding-left:19px;font-size:13px;line-height:1.5;color:var(--mo); } /* Mẩu thời gian: viền chàm, chữ đậm, có đồng hồ. Chỉ MỘT mẩu được tô nổi — tô cả ba thì lại chẳng mẩu nào nổi. */ .hero-chip li.noi{ display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 11px; border-radius:999px;background:var(--nhan-nhat); border:1px solid color-mix(in oklab,var(--nhan) 22%,transparent); color:var(--nhan-dam);font-weight:700;font-size:13px; } .hero-chip li.noi::before{content:none;} .hero-chip li::before{ content:"";position:absolute;left:1px;top:.44em;width:10px;height:6px; border-left:1.8px solid var(--nhan);border-bottom:1.8px solid var(--nhan); transform:rotate(-45deg);border-radius:1px; } .hero-o-hang{display:flex;gap:10px;} .hero-o-hang input{ flex:1;min-width:0;padding:15px 17px;border-radius:14px;font-size:16px; border:1px solid var(--vien);background:var(--mat);color:var(--tit); box-shadow:var(--anh-1); } .hero-o-hang input::placeholder{color:var(--mo);} .hero-o-hang input:focus{outline:2px solid var(--cam);outline-offset:1px;} .hero-phu{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px;font-size:14.5px;color:var(--mo);} .loc-nhac{align-self:center;margin-left:auto;font-size:13.5px;color:var(--mo);} @media (max-width:700px){.loc-nhac{margin-left:0;width:100%;order:9;}} .hero-phu a{color:var(--nhe);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--vien);} .hero-phu a:hover{color:var(--nhan-dam);text-decoration-color:currentColor;} /* minmax(0,1fr) chứ đừng 1fr trần: 1fr ngầm hiểu là minmax(auto,1fr) nên cột chẳng chịu co xuống dưới bề ngang tối thiểu của thứ nằm trong — dòng ghi chú cộng mũi tên đẩy cả bảng tràn ra ngoài 15px ở khổ 1120px. */ .bang-tc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;} /* Hai tấm ở hàng dưới phải cao BẰNG NHAU. Ô lưới thì đã bằng rồi, nhưng tấm thẻ nằm bên trong lại tự co theo nội dung — thẻ biểu đồ thấp hơn thẻ ChatGPT 85px, để lộ một mảng trống dưới đáy, nhìn là thấy lệch ngay (soi 20/08). Cho thẻ cao hết ô, xếp dọc, và cho phần ảnh giãn ra lấp chỗ thừa. */ .bang-tc .pbc-o .tc,.bang-tc .kh .bd{height:100%;display:flex;flex-direction:column;} .bang-tc .kh .bd-anh{flex:1;min-height:0;object-fit:contain;object-position:center;} .bang-tc .pbc-o .tc-chan,.bang-tc .kh .bd-chan{margin-top:auto;} /* Ghi chú viết tay + mũi tên nguệch ngoạc. Nghiêng một độ rưỡi: đủ để đọc ra "ai đó ghi thêm vào", chưa tới mức trông như lỗi dàn trang. */ .ghi-chu{ display:flex;align-items:flex-end;gap:6px;min-width:0; margin:0 0 -4px 6px;color:var(--mo); } .ghi-chu span{ font-size:14.5px;font-style:italic;line-height:1.4;min-width:0; transform:rotate(-1.5deg);transform-origin:left bottom; } .mui-ten{width:62px;height:auto;flex:none;color:color-mix(in oklab,var(--nhan) 55%,var(--mo));margin-bottom:-6px;} @media (max-width:1040px){.ghi-chu{margin-left:2px;}} @media (max-width:560px){.ghi-chu span{font-size:13.5px;}.mui-ten{width:50px;}} /* Thanh tiêu đề cửa sổ trên mỗi tấm ảnh chính là chỗ nói "đây là màn hình gì" — bản trước để nhạt quá nên người lướt qua chẳng đọc. */ .tc-thanh span{color:#A8B6D2;font-size:13px;} .bang-tc>.rong{grid-column:1/-1;} /* Ảnh ChatGPT cao 744px, thả tự nhiên vào cột 300px thì nó dài gấp đôi cột bên cạnh và cả bảng lệch hẳn. Xén còn một khoảng vừa mắt, tính từ mép trên — chỗ có câu hỏi của người dùng và mấy dòng đầu AI trả lời. Bấm vào vẫn mở bản gốc trọn vẹn. */ .bang-tc .pbc-o.tc-cao .tc-anh{height:212px;object-fit:cover;object-position:top center;} /* Hai tấm ở hàng dưới của hero cao bằng nhau (lưới kéo cho bằng), nhưng ruột của tấm biểu đồ ngắn hơn nên đáy nó thừa ra một mảng trắng — nhìn lệch. Cho tấm ấy xếp dọc và để phần ảnh giãn ra lấp chỗ trống, ảnh canh giữa nên chẳng bị xén tí nào. */ .bang-tc .kh{height:100%;} .bang-tc .kh .bd{height:100%;display:flex;flex-direction:column;} .bang-tc .kh .bd-anh{flex:1;min-height:120px;object-fit:contain;object-position:center;} @media (max-width:1040px){.hero-luoi{grid-template-columns:1fr;gap:38px;}.bang-tc{max-width:640px;}} @media (max-width:560px){ .hero-o-hang{flex-direction:column;} .hero-o-hang .nut{width:100%;} .bang-tc{grid-template-columns:1fr;} } /* dải bốn con số */ .dai-so{border-top:1px solid var(--vien);margin-top:clamp(38px,4.4vw,60px);padding-top:28px;} .dai-so-luoi{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:26px;align-items:end;} .ds-to b{display:block;font-size:clamp(30px,1.4rem + 2.4vw,46px);font-weight:800;color:var(--tit);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;} .ds-to span,.ds-nho span{display:block;font-size:13.5px;color:var(--mo);margin-top:6px;line-height:1.4;} .ds-to em{display:block;font-style:normal;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mo);margin-bottom:9px;} .ds-nho b{display:block;font-size:clamp(20px,1rem + 1vw,27px);font-weight:800;color:var(--nhan-dam);letter-spacing:-.03em;line-height:1;} @media (max-width:820px){.dai-so-luoi{grid-template-columns:1fr 1fr;gap:22px;}.ds-to{grid-column:1/-1;}} /* ═══ khách hàng ════════════════════════════════════════════════════════ */ .khach-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;} @media (max-width:1040px){.khach-luoi{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.khach-luoi{grid-template-columns:1fr;}} .kh{display:block;text-align:left;padding:0;border:0;background:none;cursor:zoom-in;width:100%;font:inherit;} .kh-logo{height:30px;width:auto;object-fit:contain;opacity:.92;transition:opacity .2s,transform .2s;} .kh:hover .kh-logo{opacity:1;transform:scale(1.04);} .kh-chua-so{color:var(--nhe);font-size:14.5px;font-weight:600;margin-top:4px;} .kh .bd-nguon{min-height:36px;} /* ═══ vấn đề ════════════════════════════════════════════════════════════ Đoạn nặng nhất của trang. Bản trước đặt trên nền đen cho "kịch tính" — hoá ra chỉ thành u ám. Ở đây dùng giấy trầm hơn một nhịp và một vạch chàm bên trái: vẫn tách khỏi phần trên, mà đọc xong chẳng thấy nặng nề. */ /* Canh MÉP TRÊN, không canh giữa. Bố cục lệch trái phải thì vẫn đẹp, nhưng nó chỉ đẹp khi hai cột còn chung một đường thẳng để mắt bám vào — mép trên, hoặc mép dưới, hoặc một đường dóng lặp lại. Canh giữa hai cột cao thấp khác nhau thì chẳng còn đường nào chung, và mắt đọc ra là cẩu thả chứ không đọc ra là dụng ý. K bắt được chỗ này, và K đúng. */ .vd-luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,4vw,58px);align-items:start;} .vd-chu p{font-size:clamp(17px,1rem + .4vw,20px);line-height:1.65;color:var(--nhe);margin-bottom:18px;} .vd-chu p b{color:var(--tit);font-weight:600;} /* Chữ nghiêng giữ nguyên màu thân bài. Vừa nghiêng vừa đổi màu là hai tín hiệu cho cùng một việc — mỗi thứ nhấn thêm một kiểu thì cả đoạn thành rừng. */ .vd-chu p em{font-style:italic;} .vd-hop{ margin-top:26px;padding:24px 26px;border-radius:var(--bo-2); background:var(--mat);border:1px solid var(--vien); border-left:3px solid var(--nhan);box-shadow:var(--anh-1); } .vd-hop p{margin-bottom:12px;font-size:16.5px;color:var(--nhe);} .vd-hop p:last-child{margin-bottom:0;} .vd-hop b{color:var(--tit);font-weight:600;} @media (max-width:960px){.vd-luoi{grid-template-columns:1fr;}} /* ═══ giải pháp ═════════════════════════════════════════════════════════ */ /* Bốn thẻ phải cao bằng nhau theo từng hàng. Đo 20/08: 404 · 363 · 782 · 412 — thẻ thứ ba gấp đôi mấy thẻ kia vì ảnh ChatGPT cao 744px thả tự nhiên. Xén ảnh đó còn 4:3 rồi cho cả lưới kéo bằng, và đẩy phần tang chứng xuống đáy thẻ để bốn thẻ có cùng một đường chân. */ /* Canh mép trên, đừng kéo cho bằng. Thẻ "Tối ưu cho AI Search" có ảnh chụp cao gấp đôi ba thẻ kia; kéo bằng thì thẻ bên cạnh thừa ra gần 150px trắng ngay giữa trang. Để mỗi thẻ cao đúng bằng ruột của nó thì đáy so le một chút — mà so le kiểu đó đọc ra là bố cục, chứ không đọc ra là lỗi. */ .gp-luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,26px);margin-top:40px;align-items:start;} .gp-tc .pbc-o.d .tc-anh{aspect-ratio:4/3;object-fit:cover;object-position:top center;} .gp-tc,.gp-so,.gp-ds{margin-top:auto;} .gp-o > .gp-nut{margin-top:16px;} @media (max-width:900px){.gp-luoi{grid-template-columns:1fr;}} .gp-o{ background:var(--mat);border:1px solid var(--vien);border-radius:var(--bo-3); padding:clamp(22px,2.6vw,30px);box-shadow:var(--anh-1); display:flex;flex-direction:column;gap:16px; transition:transform .2s var(--eas),box-shadow .2s var(--eas); } .gp-o:hover{transform:translateY(-3px);box-shadow:var(--anh-2);} .gp-dau{display:flex;align-items:flex-start;gap:14px;} .gp-icon{ flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:var(--nhan-nhat);color:var(--nhan-dam);border:1px solid color-mix(in oklab,var(--nhan) 16%,transparent); } .gp-o p{font-size:15.8px;line-height:1.62;color:var(--nhe);} .gp-so{display:flex;gap:14px;flex-wrap:wrap;} .gp-so div{flex:1;min-width:104px;background:var(--nen);border:1px solid var(--vien-mo);border-radius:14px;padding:14px 16px;} .gp-so b{display:block;font-size:clamp(20px,1rem + 1vw,26px);font-weight:800;color:var(--nhan-dam);letter-spacing:-.03em;line-height:1.1;} .gp-so span{display:block;font-size:13px;color:var(--nhe);margin-top:4px;line-height:1.4;} .gp-nut{align-self:flex-start;} .gp-ds{list-style:none;padding:0;margin:0;display:grid;gap:9px;} .gp-ds li{position:relative;padding-left:26px;font-size:15.2px;line-height:1.5;color:var(--nhe);} .gp-ds li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--nhan);border-bottom:2px solid var(--nhan);transform:rotate(-45deg);border-radius:1px;} /* ═══ lộ trình ══════════════════════════════════════════════════════════ */ .lt-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;} @media (max-width:940px){.lt-luoi{grid-template-columns:1fr;}} .lt-o{ position:relative;background:var(--mat);border:1px solid var(--vien); border-radius:var(--bo-3);padding:clamp(22px,2.4vw,28px);box-shadow:var(--anh-1); display:flex;flex-direction:column;gap:14px; } .lt-o::before{ content:"";position:absolute;top:0;left:clamp(22px,2.4vw,28px);right:clamp(22px,2.4vw,28px); height:3px;border-radius:0 0 3px 3px;background:var(--nhan); } .lt-khi{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mo);} .lt-o h3{margin-top:-4px;} .lt-dong{display:grid;gap:5px;padding-top:14px;border-top:1px solid var(--vien-mo);} .lt-nhan{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nhan-dam);} .lt-dong p{font-size:15.4px;line-height:1.55;color:var(--nhe);} .lt-dong p b{color:var(--tit);font-weight:600;} .lt-moc{ display:flex;gap:10px;align-items:flex-start;margin-top:auto;padding:14px 16px; background:#F0FBF6;border:1px solid #C4EBD8;border-radius:14px; font-size:14.6px;line-height:1.5;color:#17624B; } .lt-moc svg{flex:none;color:#0E9F6E;margin-top:2px;} .lt-30{ margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px; padding:20px 24px;border-radius:var(--bo-2);background:var(--nhan-nhat); border:1px solid color-mix(in oklab,var(--nhan) 16%,transparent); } .lt-30 b{font-size:clamp(18px,1rem + .7vw,22px);color:var(--nhan-dam);letter-spacing:-.02em;} .lt-30 span{color:var(--nhe);font-size:15.5px;} /* ═══ bảng giá ══════════════════════════════════════════════════════════ */ .gia-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;align-items:start;} @media (max-width:940px){.gia-luoi{grid-template-columns:1fr;}} .gia-o{ position:relative;background:var(--mat);border:1px solid var(--vien); border-radius:var(--bo-3);padding:clamp(24px,2.6vw,32px);box-shadow:var(--anh-1); display:flex;flex-direction:column;height:100%; } .gia-o.noi{border-color:var(--nhan);box-shadow:0 0 0 3px var(--nhan-nhat),var(--anh-2);} .gia-co{ position:absolute;top:-12px;left:clamp(24px,2.6vw,32px); background:var(--nhan);color:#fff;font-size:11.5px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;padding:5px 13px;border-radius:999px; } .gia-ten{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mo);} .gia-mo{font-size:15px;color:var(--nhe);margin-top:6px;} .gia-so{font-size:clamp(28px,1.3rem + 1.5vw,36px);font-weight:800;color:var(--tit);letter-spacing:-.038em;margin-top:16px;line-height:1;} .gia-so small{font-size:15px;font-weight:600;color:var(--mo);letter-spacing:0;margin-left:4px;} .gia-ngay{font-size:13.5px;color:var(--mo);margin-top:7px;} .gia-ds{list-style:none;padding:0;margin:22px 0;display:grid;gap:11px;flex:1;} .gia-ds li{position:relative;padding-left:28px;font-size:15.2px;line-height:1.5;color:var(--nhe);} .gia-ds li b{color:var(--tit);font-variant-numeric:tabular-nums;} .gia-ds li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:7px;border-left:2px solid var(--nhan);border-bottom:2px solid var(--nhan);transform:rotate(-45deg);border-radius:1px;} .gia-ht{background:#F0FBF6;border:1px solid #C4EBD8;border-radius:14px;padding:14px 16px;margin-bottom:20px;} .gia-ht b{display:block;font-weight:700;color:#0B6B4F;font-size:15px;} .gia-ht span{font-size:14.2px;line-height:1.5;color:#17624B;} .gia-o .nut{width:100%;} .gia-hd{font-size:13.4px;color:var(--mo);text-align:center;margin-top:12px;} /* Mốc đầu–cuối của hợp đồng. Chữ nhỏ, nằm dưới cùng: nó không phải lời chào hàng, nó là thứ trả lời câu hỏi cuối cùng trong đầu người sắp gật. */ .gia-moc{ font-size:13px;color:var(--nhan-dam);text-align:center;margin-top:6px; font-variant-numeric:tabular-nums; } .cam{ display:flex;gap:20px;align-items:flex-start;margin-top:26px; background:#F0FBF6;border:1px solid #C4EBD8;border-radius:var(--bo-3); padding:clamp(22px,3vw,30px); } .cam svg{flex:none;color:#0E9F6E;} .cam h3{color:#0B6B4F;margin-bottom:6px;} .cam p{font-size:15.8px;line-height:1.68;color:#17624B;} @media (max-width:620px){.cam{flex-direction:column;gap:14px;}} /* ═══ PHÒNG BẰNG CHỨNG ══════════════════════════════════════════════════ Trên nền giấy, 33 khung tối xếp cạnh nhau tự thành một bức tường bằng chứng — đúng ấn tượng cần để lại. Lọc bằng radio + :has(), không JS. ══════════════════════════════════════════════════════════════════════ */ .loc{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;} .loc input{position:absolute;opacity:0;pointer-events:none;} .loc label{ padding:9px 18px;border-radius:999px;cursor:pointer;font-size:14.5px;font-weight:600; background:var(--mat);border:1px solid var(--vien);color:var(--nhe); transition:background .16s,border-color .16s,color .16s; } .loc label:hover{border-color:var(--nhan);color:var(--nhan-dam);} .loc input:checked + label{background:var(--nhan);border-color:var(--nhan);color:#fff;} .loc input:focus-visible + label{outline:2px solid var(--nhan);outline-offset:3px;} .loc label span{opacity:.6;font-weight:500;margin-left:5px;font-variant-numeric:tabular-nums;} .nhom{margin-top:38px;} .nhom-tit{ display:flex;flex-wrap:wrap;align-items:baseline;gap:12px; font-size:clamp(17px,.95rem + .5vw,21px);color:var(--tit);margin-bottom:16px; } .nhom-tit span{font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--mo);} .pbc-luoi{display:grid;gap:16px;} .luoi-serp{grid-template-columns:repeat(auto-fill,minmax(430px,1fr));} .luoi-ai{grid-template-columns:repeat(auto-fill,minmax(276px,1fr));} .luoi-tra{grid-template-columns:repeat(auto-fill,minmax(252px,1fr));} @media (max-width:520px){.luoi-serp,.luoi-ai,.luoi-tra{grid-template-columns:1fr;}} .pbc-o{border:0;padding:0;background:none;cursor:zoom-in;text-align:left;width:100%;font:inherit;display:block;} .pbc-o .tc{transition:transform .2s var(--eas),box-shadow .2s var(--eas);} .pbc-o:hover .tc{transform:translateY(-3px);box-shadow:var(--anh-3);} .pbc-o .tc-anh{aspect-ratio:auto;height:auto;object-fit:contain;} .luoi-ai .pbc-o .tc-anh{aspect-ratio:4/3;object-fit:cover;object-position:top center;} /* Chú thích dài ngắn khác nhau làm đáy các thẻ trong cùng một hàng so le. Chừa sẵn chỗ cho hai dòng thì cả hàng thẳng băng. */ .luoi-ai .tc-chan{min-height:64px;align-content:center;} /* Chú thích tấm dài tấm ngắn nên lưới cao thấp lệch nhau 5px — chừa sẵn chỗ cho hai dòng thì mọi tấm cùng một đường chân. */ .luoi-ai .tc-chan,.luoi-serp .tc-chan{min-height:60px;align-items:center;} .gp-tc .pbc-o.serp .tc-anh{aspect-ratio:16/7;object-fit:cover;object-position:left center;} #pbc:has(#l-serp:checked) .nhom:not(.nhom-serp), #pbc:has(#l-ai:checked) .nhom:not(.nhom-ai), #pbc:has(#l-tra:checked) .nhom:not(.nhom-tra){display:none;} /* Ô lưới thì đã cao bằng nhau, nhưng tấm thẻ bên trong tự co theo nội dung — chú thích tấm một dòng tấm hai dòng là đáy thẻ so le ngay. Cho thẻ cao hết ô và đẩy chú thích xuống đáy: mọi tấm cùng một đường chân ở mọi khổ màn hình, khỏi phải canh tay từng đoạn chữ. */ .pbc-luoi .pbc-o .tc,.khach-luoi .kh .bd,.luoi-tra .kh .bd{ height:100%;display:flex;flex-direction:column; } .pbc-luoi .pbc-o .tc-chan,.khach-luoi .kh .bd-chan,.luoi-tra .kh .bd-chan{margin-top:auto;} /* span bên trong