/* ============================================================================ HAI NỀN: tối ↔ sáng. Mỗi section dùng BA màu nhấn phân bổ vào các thành phần khác nhau (nhãn · gạch chân · từng mục danh sách · hình · nút). Chữ vẫn chỉ 4 mã cố định cho cả trang. ============================================================================ */ :root{ --n-toi:linear-gradient(165deg,#020b13 0%,#051b28 46%,#06272f 100%); --n-sang:linear-gradient(165deg,#ffffff 0%,#eef4f7 100%); /* chữ: CHỈ 4 mã, không hơn */ --c-toi-1:#ffffff; --c-toi-2:#d6e8f0; /* Chữ trên nền sáng: đã tăng độ đen thêm 30% (nhân RGB × 0.7) chính #0b2038 → #081627 · phụ #4a5a68 → #343f49 */ --c-sang-1:#081627; --c-sang-2:#343f49; /* ---- MÀU THƯƠNG HIỆU CỐ ĐỊNH ---- Mọi thứ nằm ở CỘT CHỮ (nhãn · gạch chân · chấm danh sách · nút) đều dùng đúng hai màu này, không đổi theo section. Màu riêng của từng section chỉ xuất hiện trong HÌNH. */ --th-toi:#3fe0e8; --th-toi-2:#5fe9b8; --th-sang:#12788a; --th-sang-2:#0f7a5c; --th-toi-nen:#d9f4f7; /* ================= ĐƠN VỊ CHUẨN — gốc của mọi kích thước ================= Mọi thứ (chữ · nút · khoảng cách · bo góc · lưới) đều tính từ --u, nên tỉ lệ giữa chúng KHOÁ CỨNG với nhau ở mọi khổ màn — không bao giờ lệch pha. min(vw, vh): lấy chiều nào NHỎ hơn. Nếu chỉ theo bề ngang thì màn rộng mà thấp (1920×600) sẽ có chữ to trong khung 85vh thấp tè → tràn. Lấy min là co theo cả hai chiều nên khối nội dung luôn giữ đúng tỉ lệ, không méo. clamp: sàn 12px cho màn nhỏ, trần 18px để màn 4K không phình quá cỡ. Quy chiếu ở 1440×760: --u ≈ 15.8px → nút 38px, header 57px, tiêu đề 47px. */ --u:clamp(12px, min(1.1vw, 2.2vh), 18px); --nut-cao:calc(var(--u) * 2.4); /* 38px ở khổ chuẩn */ --thanh-cao:calc(var(--nut-cao) * 1.5); /* header/footer = 150% nút */ --goc:calc(var(--u) * .63); /* bo góc nút ~10px */ --goc-to:calc(var(--u) * .88); /* bo góc khối lớn ~14px */ --luoi:calc(var(--u) * 3); /* bước lưới kẻ ~48px */ /* Thời gian hiệu ứng HOVER — để rất ngắn cho cảm giác gần như tức thì. Trên 150ms là người dùng bắt đầu thấy "đơ". 90ms vừa đủ để mắt thấy có chuyển tiếp chứ không phải nhảy cóc, mà vẫn phản hồi tức khắc. */ --nhanh:.09s; /* ⚠️ KHÔNG DÙNG FONT ĐƠN CÁCH CHO NHÃN NỮA — đây là lỗi làm chữ nút trên điện thoại mảnh tới mức không đọc được. Lý do: Consolas chỉ có trên Windows. Android và iOS đều KHÔNG có Consolas lẫn Courier New nên rơi thẳng xuống `monospace` hệ thống — trên Android là Droid Sans Mono, nét cực mảnh VÀ chỉ có một nấc đậm, nên font-weight:600 không làm chữ đậm lên được chút nào. Trên máy Windows nhìn vẫn đẹp nên rất dễ bỏ sót. --nhan dùng cho MỌI nhãn phải đọc được: nút · overline · tab menu · logo. Toàn font chữ thường hệ thống — máy nào cũng có, và đều có đủ nấc đậm thật. Chất "công nghệ" giữ bằng IN HOA + giãn chữ, không cần đơn cách. --mono chỉ còn dùng cho SỐ và bảng công cụ đo — chỗ cần các chữ số thẳng cột, và nếu font có mảnh cũng không ảnh hưởng người mua hàng. */ --nhan:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif; --mono:Consolas,"SF Mono",Menlo,"Roboto Mono","Droid Sans Mono", "DejaVu Sans Mono","Courier New",monospace; --sans:"Segoe UI","Noto Sans",Arial,sans-serif; } *{box-sizing:border-box} /* KHÔNG dùng scroll-behavior:smooth của trình duyệt — trang dài 10 màn nên nó cuộn theo quãng đường, đi từ section 1 xuống 8 mất rất lâu, nhìn như không phản hồi. Thay bằng hàm cuộn tự viết ở cuối file: thời gian CỐ ĐỊNH 600ms cho mọi quãng. */ html{scroll-behavior:auto;scroll-padding-top:var(--thanh-cao)} body{margin:0;font-family:var(--sans);line-height:1.6;background:#051b28; -webkit-font-smoothing:antialiased} /* ============================ KHUNG SECTION ============================ */ /* Nội dung chiếm 85% chiều cao section → đệm thở 7.5% mỗi bên. ⚠️ PHẢI TRỪ CHIỀU CAO HEADER khỏi phép tính. Header là thanh CỐ ĐỊNH đè lên đầu section, nên vùng thật sự nhìn thấy chỉ còn (100vh − chiều cao header). Trước đây lấy 7.5vh làm đệm trên: ở màn 900px là 67.5px, mà header đã chiếm 57px → chỉ còn 10px thở thật, nhãn overline gần như dính đáy thanh. Nay tính 85%/7.5% trên VÙNG CÒN LẠI rồi cộng đúng chiều cao header vào đệm trên. Cộng lại vẫn tròn 100vh, không dôi ra. Hệ quả quan trọng: đỉnh section trùng đỉnh khung nhìn là đã đúng vị trí, nên mọi lệnh cuộn tới section KHÔNG được trừ chiều cao header nữa (trừ hai lần). */ .sec{position:relative;min-height:100vh;display:flex;flex-direction:column; justify-content:center;overflow:hidden; --man-dung:calc(100vh - var(--thanh-cao)); padding-top:calc(var(--thanh-cao) + var(--man-dung) * .075); padding-bottom:calc(var(--man-dung) * .075)} .sec[data-nen="toi"] {background:var(--n-toi)} .sec[data-nen="sang"]{background:var(--n-sang)} .sec.chu{padding-top:calc(var(--thanh-cao) + var(--man-dung) * .25); padding-bottom:calc(var(--man-dung) * .25)} /* SECTION CUỐI thấp hơn các section khác đúng bằng chiều cao chân trang, để section cuối + chân trang cộng lại tròn một màn. Cuộn tới section cuối là thấy luôn cả chân trang, không phải cuộn thêm. Vùng dùng được của riêng nó phải trừ CẢ HAI thanh: header đè lên đầu và chân trang chiếm phần đáy. Cả hai đều cao var(--thanh-cao) nên trừ đúng 2 lần. */ .sec:last-child{ --man-dung:calc(100vh - var(--thanh-cao) * 2); min-height:calc(100vh - var(--thanh-cao))} /* LƯỚI KẺ — phải liền mạch xuyên suốt trang. Bước lưới BẰNG NHAU trên cả hai nền (48px) thì vạch DỌC mới trùng nhau ở ranh giới. Vạch NGANG được neo bằng background-position tính trong JS theo khoảng cách từ đỉnh trang, nếu không mỗi section lại bắt đầu đếm lại từ 0 và vạch ngang sẽ so le. */ .luoi{position:absolute;inset:0;pointer-events:none;z-index:0; background-size:var(--luoi) var(--luoi); /* Toàn bộ lớp lưới trong suốt thêm 20% — lưới là NỀN, không được tranh chú ý với nội dung. Hạ ở đây một chỗ thay vì sửa cả hai mã màu tối/sáng: chỉnh một con số là đổi cả trang, và không phá tỉ lệ đậm nhạt giữa hai nền. .luoi không có con nào định vị nên stacking context mới do opacity sinh ra không ảnh hưởng thứ tự lớp với .nd (z-index:2). */ opacity:.8; /* LỚP CHE TOẢ TRÒN — mờ dần đều từ tâm ra lề, KHÔNG có vùng nào bị xoá trắng. Tâm còn 10% độ đậm, ra tới lề là 100%. Giữa màn vẫn thấy lưới, chỉ rất nhạt. · KHÔNG có mốc phẳng ở đầu. Bản trước để transparent suốt 0→30% rồi mới dâng lên, tạo một VÒNG THẤY RÕ ngay mốc 30% — đó là chỗ trông thiếu tự nhiên. Nay dâng ngay từ 0% nên không có ranh giới nào để mắt bắt. · Đường cong luỹ thừa 1.5 (alpha = .10 + .90 × t^1.5) chứ không tuyến tính. Diện tích hình tròn tăng theo r² nên ramp tuyến tính làm phần lớn màn hình rơi vào khoảng đậm, nhìn thành viền tối bao quanh. Luỹ thừa 1.5 bù lại, cho cảm giác đậm lên đều tay theo mắt chứ không theo con số. · ellipse closest-side: bán kính = nửa bề rộng · nửa chiều cao, nên mốc phần trăm đúng nghĩa "phần trăm màn hình" trên mọi khổ màn. Để mặc định farthest-corner thì vùng nhạt phình theo đường chéo, màn càng rộng càng sai. · Không đụng background-position nên phần neo lưới liền mạch giữa các section vẫn nguyên. Trình duyệt cũ không hiểu mask thì hiện lưới đầy đủ như trước. */ -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.15) 15%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.37) 45%, rgba(0,0,0,.52) 60%, rgba(0,0,0,.69) 75%, rgba(0,0,0,.84) 88%, #000 100%); mask-image:radial-gradient(ellipse closest-side at 50% 50%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.15) 15%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.37) 45%, rgba(0,0,0,.52) 60%, rgba(0,0,0,.69) 75%, rgba(0,0,0,.84) 88%, #000 100%)} /* Độ đậm vạch nâng từ .055/.05 lên .09/.08 vì đã có lớp che ở trên. Trung bình lớp che tính theo DIỆN TÍCH (∫ alpha·2t dt, vì diện tích tăng theo r²) ra 0.61 → .055 ÷ .61 = .09 và .05 ÷ .61 = .08. Nhờ vậy tổng lượng lưới nhìn thấy trên cả màn giữ nguyên như trước, chỉ dồn lại: tâm nhạt hẳn, lề đậm lên. Giữ nguyên .055 thì nhân với lớp che sẽ mất hơn một phần ba lưới, trang trống trơn. */ .sec[data-nen="toi"] .luoi{ background-image:linear-gradient(rgba(120,220,235,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(120,220,235,.09) 1px,transparent 1px)} .sec[data-nen="sang"] .luoi{ background-image:linear-gradient(rgba(13,45,73,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(13,45,73,.08) 1px,transparent 1px)} /* ranh giới: vạch mảnh dùng các màu của HÌNH (không phải chữ), không phát sáng */ .sec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:4; background:linear-gradient(90deg,transparent,var(--i1) 18%,var(--i3) 50%,var(--i5,var(--i2)) 82%,transparent); opacity:.5} /* ============================ NỘI DUNG ============================ */ /* 85% và 50% tính trên VÙNG CÒN LẠI sau khi trừ header — khớp với đệm ở .sec */ .nd{position:relative;z-index:2;width:100%;max-width:1072px;margin:0 auto;padding:0 24px; height:calc(var(--man-dung) * .85);display:grid;grid-template-columns:60% 40%; gap:calc(var(--u) * 2.9);align-items:center} .sec.chu .nd{height:calc(var(--man-dung) * .5);grid-template-columns:40% 60%} .sec.chan .nd{direction:rtl} .sec.chan .nd>*{direction:ltr} /* ============================ FORM LIÊN HỆ ============================ Section cuối thay hình minh hoạ bằng FORM ở CẢ MÁY TÍNH LẪN ĐIỆN THOẠI. Lý do: section cuối là chỗ chốt — người xem đọc xong chín section rồi, thứ họ cần là ô để điền, không phải thêm một hình minh hoạ nữa. Trên máy tính form nằm đúng cột 40% của khối hình, ngay cạnh cột chữ — nhìn là điền được luôn. Form dựng SẴN trong DOM cùng với hình, CSS quyết định bên nào hiện. Dựng lại khi đổi khổ màn sẽ mất chữ người dùng đang gõ dở lúc xoay máy. Ô nhập cao đúng bằng nút (var(--nut-cao)) nên form thẳng hàng với nút bên cạnh. */ .form-lh{display:none;flex-direction:column;width:100%; gap:calc(var(--u) * .72)} /* Hiện form và giấu hình — áp cho mọi khổ màn */ .sec:last-child .khoi-hinh > svg{display:none} .sec:last-child .form-lh{display:flex} .form-lh input,.form-lh textarea{ width:100%;box-sizing:border-box;font-family:var(--sans);font-size:15px; padding:0 calc(var(--u) * .82);border-radius:var(--goc); border:1px solid transparent;outline:none;transition:var(--nhanh)} .form-lh input{height:calc(var(--nut-cao) + 3px)} .form-lh textarea{padding-top:calc(var(--u) * .55);padding-bottom:calc(var(--u) * .55); line-height:1.5;resize:none} /* 16px là ngưỡng của Safari trên iPhone: ô nhập nhỏ hơn 16px thì trình duyệt TỰ PHÓNG TO cả trang khi chạm vào ô, người dùng phải tự thu lại. Đặt 15px cho vừa thang chữ rồi bù bằng cỡ 16px riêng cho iOS. */ @supports (-webkit-touch-callout:none){ .form-lh input,.form-lh textarea{font-size:16px} } /* Viền và chữ gợi ý đậm thêm 30% so với bản đầu — bản đầu nhìn mờ, ô nhập không rõ ranh giới nên không nhận ra là chỗ điền được. Nền TỐI thì "đậm hơn" nghĩa là SÁNG hơn: viền 30%→39%, chữ gợi ý #7fa4b3→#a6d6e9. */ .sec[data-nen="toi"] .form-lh input, .sec[data-nen="toi"] .form-lh textarea{ background:rgba(120,220,235,.07);color:var(--c-toi-1); border-color:color-mix(in srgb,var(--th-toi) 39%,transparent)} .sec[data-nen="toi"] .form-lh input::placeholder, .sec[data-nen="toi"] .form-lh textarea::placeholder{color:#a6d6e9} .sec[data-nen="toi"] .form-lh input:focus, .sec[data-nen="toi"] .form-lh textarea:focus{border-color:var(--th-toi)} /* Nền SÁNG thì "đậm hơn" nghĩa là TỐI hơn: viền 28%→36%, chữ gợi ý #8194a1→#5a6771 (nhân RGB × 0.7). Tương phản chữ gợi ý trên nền trắng lên 5.9, thừa ngưỡng 4.5. */ .sec[data-nen="sang"] .form-lh input, .sec[data-nen="sang"] .form-lh textarea{ background:#ffffff;color:var(--c-sang-1); border-color:color-mix(in srgb,#0e606e 36%,transparent)} .sec[data-nen="sang"] .form-lh input::placeholder, .sec[data-nen="sang"] .form-lh textarea::placeholder{color:#5a6771} .sec[data-nen="sang"] .form-lh input:focus, .sec[data-nen="sang"] .form-lh textarea:focus{border-color:#0e606e} /* Ô nhập sai: viền đỏ cam, KHÔNG dùng đỏ tươi cho khỏi chói */ .form-lh .loi{border-color:#e2431a !important} /* CHỪA SẴN chỗ cho dòng thông báo ngay cả khi đang trống. Ẩn lúc trống rồi hiện lúc có chữ sẽ làm cả form nhảy xuống đúng lúc người dùng vừa bấm — vừa giật vừa dễ bấm nhầm vào thứ khác vừa trồi lên. */ .form-lh-bao{margin:0;font-size:13px;line-height:1.4;min-height:1.4em} .form-lh-bao.loi{color:#ff8a4c} .form-lh-bao.xong{color:var(--th-toi)} .sec[data-nen="sang"] .form-lh-bao.loi{color:#cf3f12} .sec[data-nen="sang"] .form-lh-bao.xong{color:#0f7a5c} .khoi-chu{min-width:0;display:flex;flex-direction:column;justify-content:center; gap:calc(var(--u) * .88)} .khoi-hinh{min-width:0;display:flex;align-items:center;justify-content:center} .khoi-hinh svg{width:100%;height:auto;max-height:70vh;display:block} /* ============================ CHỮ ============================ */ /* nhãn: MÀU THƯƠNG HIỆU cố định — không đổi theo section */ /* Overline: font chữ thường + đậm 700. Trước dùng đơn cách + đậm 500 nên trên điện thoại mảnh như sợi chỉ. Giãn chữ hạ từ .16em xuống .12em: giãn quá rộng làm từng chữ cái đứng lẻ ra, mắt phải ghép lại nên càng khó đọc ở cỡ nhỏ. */ .ov{font-family:var(--nhan);font-size:calc(var(--u) * .78);letter-spacing:.12em;font-weight:700; display:inline-flex;align-items:center;gap:calc(var(--u) * .57);align-self:flex-start; padding:calc(var(--u) * .38) calc(var(--u) * .76);border-radius:calc(var(--goc) * .8)} /* CHẤM BÁO HIỆU — phải nhìn ra ngay, đây là thứ báo "đang sống" của cả section. · Kích thước: trước để .38u, trên điện thoại --u chạm sàn 12px nên chấm chỉ còn 4.55px — gần như không thấy. Nay tối thiểu 9px. · Màu: tách khỏi currentColor. Trước chấm cùng màu chữ nhãn (cyan/xanh) nên chìm hẳn vào nền chip. Nay dùng CAM — màu duy nhất trên trang không đụng bảng màu xanh, nên mắt bắt được ngay dù chấm nhỏ. */ .ov b{width:max(9px,calc(var(--u) * .54));height:max(9px,calc(var(--u) * .54)); border-radius:50%;flex:0 0 auto;background:var(--cham)} /* --cham: màu chấm báo hiệu. Mỗi nền một sắc cam riêng để đủ tương phản. nền tối #ff8a4c trên nền #0a2530 → 6.9 (ngưỡng đồ hoạ là 3.0) nền sáng #cf3f12 trên chip #d9f4f7 → 4.6 */ .sec[data-nen="toi"] .ov{color:var(--th-toi);--cham:#ff8a4c; background:color-mix(in srgb,var(--th-toi) 13%,transparent); border:1px solid color-mix(in srgb,var(--th-toi) 32%,transparent)} /* Overline trên nền sáng: đậm thêm 20% (#12788a → #0e606e), cùng sắc với nút trong section nền sáng. Viền cũng đặc hơn cho cân với chữ đã đậm. */ .sec[data-nen="sang"] .ov{color:#0e606e;--cham:#cf3f12;background:var(--th-toi-nen); border:1px solid color-mix(in srgb,#0e606e 30%,transparent)} /* Cỡ chữ tính theo --u nên co giãn đồng bộ với nút, header, khoảng cách. */ h1,h2{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.14} h1{font-size:calc(var(--u) * 3)} /* ~47px ở khổ chuẩn */ h2{font-size:calc(var(--u) * 2.55)} /* ~40px */ /* Text mô tả: IN ĐẬM nhưng ở nấc MỎNG NHẤT mà Segoe UI có. Segoe UI có 5 nấc thật: 300 · 400 · 500=600 · 700 · 800=900. Nấc đậm mỏng nhất là 500 (trùng 600) — dày hơn chữ thường 36% mực nhưng vẫn nhẹ, không nặng như 700. Đặt 500 chứ không 600 để nếu sau này đổi sang phông có nhiều nấc hơn thì tự động lấy nấc mảnh hơn. */ .mo-ta{margin:0;font-size:calc(var(--u) * 1.07);line-height:1.72;max-width:52ch; font-weight:500} /* ---- LUẬT SỐ DÒNG ---- Sec chủ: tiêu đề LUÔN 2 dòng. Các sec còn lại: tiêu đề LUÔN 1 dòng. Gạch đầu dòng: LUÔN 1 dòng, không được rớt sang dòng thứ hai. Chốt cứng chiều cao để dù chữ có dài cũng không làm xô lệch bố cục — nhưng chữ dài thì phải VIẾT LẠI cho vừa, không để nó bị cắt. */ /* KHÔNG cắt chữ. Chữ dài thì phải VIẾT LẠI cho vừa, không được để dấu "..." nuốt mất chữ. Để overflow:visible nên nếu có câu nào quá dài thì nó tràn ra thấy ngay — lỗi lộ liền chứ không âm thầm bị cắt. */ .sec.chu h1{min-height:calc(2 * 1.14em)} .sec:not(.chu) h2{white-space:nowrap;overflow:visible} .ds li span{white-space:nowrap;overflow:visible;min-width:0} .sec[data-nen="toi"] h1,.sec[data-nen="toi"] h2{color:var(--c-toi-1)} .sec[data-nen="sang"] h1,.sec[data-nen="sang"] h2{color:var(--c-sang-1)} /* ---- TIÊU ĐỀ GRADIENT TRÊN MỌI NỀN TỐI ---- Dải màu: trắng → cyan → mint → hổ phách, đúng dải trang tramcongnghe đang dùng. 30% đầu trắng đặc, rồi chuyển dần qua bậc cyan nhạt cho khỏi gãy khúc. PHẢI CHIA HAI GÓC vì số dòng khác nhau: · Sec chủ — tiêu đề 2 dòng → góc 168deg (chéo xuống) để dòng 2 nối tiếp dòng 1. · Sec khác — tiêu đề 1 dòng → góc 100deg (gần ngang) để màu chạy dọc theo chữ. Dùng nhầm góc dựng đứng cho tiêu đề 1 dòng thì cả dòng thành một mảng phẳng lì, vì không có chiều cao để dải màu trải ra. Khai màu đặc TRƯỚC rồi mới cắt nền theo chữ: trình duyệt nào không hiểu background-clip:text vẫn còn chữ trắng để đọc, không mất chữ. */ .sec[data-nen="toi"] h1, .sec[data-nen="toi"] h2{ background:linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #cdf3f6 46%, #3fe0e8 64%, #7ef0d0 82%, #ffd166 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; /* ⚠️ CHỖ NÀY HAY CẮT MẤT ĐUÔI CHỮ. background-clip:text chỉ tô màu trong PHẠM VI HỘP của thẻ. Chữ Việt có đuôi thò xuống (g, y, ạ, ụ) và dấu nặng nằm dưới đường cơ sở; nếu hộp không đủ sâu thì phần thò ra không được tô → chữ "g" cụt thành "q", nhìn như font lỗi. Đo thật ở 30px: đuôi chữ chạm tới 30.9px tính từ đỉnh hộp, mà vùng tô chỉ cao 31.7px — dư 0.8px, sát tới mức máy nào làm tròn khác đi một chút là cắt. .22em (6.6px ở cỡ 30px) cho dư hẳn, không bao giờ chạm mép nữa. Không dùng overflow:visible được: quy tắc cắt theo hộp là của chính background-clip, overflow không can thiệp vào đó. */ padding-bottom:.22em} .sec.chu h1{ /* 30% đầu TRẮNG hoàn toàn, rồi chuyển DẦN sang gradient. Mấu chốt để không đột ngột: chèn một bậc trung gian màu cyan rất nhạt (#cdf3f6) ở 46%. Nhảy thẳng từ trắng sang cyan đậm là mắt bắt được ngay chỗ đổi; đi qua một sắc nhạt ở giữa thì mắt đọc thành một dải liền mạch. Quãng chuyển kéo dài từ 30% tới 64% — hơn một phần ba chiều dài chữ. */ /* GÓC 168deg — tính ra chứ không chọn cảm tính. Góc ngang (100deg) làm hai dòng lấy CÙNG một khoảng màu → mỗi dòng lại chạy lại từ trắng sang vàng, nhìn thành hai dải rời rạc. Với khung tiêu đề tỉ lệ ~3.7:1 và 2 dòng, góc 168deg cho: dòng 1 → lấy khoảng 14–58% của dải màu (trắng → cyan nhạt) dòng 2 → lấy khoảng 42–86% (cyan nhạt → mint → hổ phách) Hai dòng NỐI TIẾP nhau, chỉ chồng nhẹ ở vùng cyan nhạt nên mối nối không lộ. Gradient chạy một mạch từ chữ đầu tới chữ cuối theo đúng thứ tự đọc, mà trong từng dòng vẫn có chuyển màu chứ không bị phẳng lì như góc dựng đứng. */ background:linear-gradient(168deg, #ffffff 0%, #ffffff 30%, #cdf3f6 46%, #3fe0e8 64%, #7ef0d0 82%, #ffd166 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; /* chữ gradient hay bị cắt cụt phần dấu tiếng Việt và đuôi chữ thò xuống */ /* ⚠️ CHỖ NÀY HAY CẮT MẤT ĐUÔI CHỮ. background-clip:text chỉ tô màu trong PHẠM VI HỘP của thẻ. Chữ Việt có đuôi thò xuống (g, y, ạ, ụ) và dấu nặng nằm dưới đường cơ sở; nếu hộp không đủ sâu thì phần thò ra không được tô → chữ "g" cụt thành "q", nhìn như font lỗi. Đo thật ở 30px: đuôi chữ chạm tới 30.9px tính từ đỉnh hộp, mà vùng tô chỉ cao 31.7px — dư 0.8px, sát tới mức máy nào làm tròn khác đi một chút là cắt. .22em (6.6px ở cỡ 30px) cho dư hẳn, không bao giờ chạm mép nữa. Không dùng overflow:visible được: quy tắc cắt theo hộp là của chính background-clip, overflow không can thiệp vào đó. */ padding-bottom:.22em} .sec[data-nen="toi"] .mo-ta{color:var(--c-toi-2)} .sec[data-nen="sang"] .mo-ta{color:var(--c-sang-2)} /* gạch chân: MÀU THƯƠNG HIỆU cố định */ .gach{width:calc(var(--u) * 4.9);height:calc(var(--u) * .19);border-radius:99px;flex:0 0 auto} .sec[data-nen="toi"] .gach{background:linear-gradient(90deg,var(--th-toi),var(--th-toi-2))} .sec[data-nen="sang"] .gach{background:linear-gradient(90deg,var(--th-sang),var(--th-sang-2))} /* danh sách: chấm tick cũng MÀU THƯƠNG HIỆU — cột chữ giữ yên tĩnh */ /* ---- CHỈ HIỆN 3 GẠCH ĐẦU DÒNG, BỎ DÒNG THỨ 4 ---- Áp cho MỌI khổ màn để hai bản giống nhau, không phải mỗi bên một số dòng. Bốn dòng đọc thành một khối dày, mắt lướt qua chứ không đọc; ba dòng vẫn đủ ý mà nhẹ hơn hẳn, phần chỗ trống thu được dồn cho HÌNH. Dòng thứ 4 vẫn nằm nguyên trong DOM — xoá đúng dòng CSS này là nó hiện lại, không phải đi sửa dữ liệu của mười section. */ .ds li:nth-child(n+4){display:none} .ds{list-style:none;margin:calc(var(--u) * .25) 0 0;padding:0;display:grid; gap:calc(var(--u) * .57)} .ds li{display:flex;align-items:flex-start;gap:calc(var(--u) * .63); font-size:calc(var(--u) * .98);line-height:1.55} .ds li i{flex:0 0 auto;width:calc(var(--u) * 1.2);height:calc(var(--u) * 1.2); border-radius:calc(var(--u) * .38);margin-top:calc(var(--u) * .13); display:grid;place-items:center} .ds li i svg{width:calc(var(--u) * .7);height:calc(var(--u) * .7);fill:none;stroke-width:3; stroke-linecap:round;stroke-linejoin:round} .sec[data-nen="toi"] .ds li{color:var(--c-toi-2)} .sec[data-nen="sang"] .ds li{color:var(--c-sang-2)} .sec[data-nen="toi"] .ds li i{background:color-mix(in srgb,var(--th-toi) 16%,transparent)} .sec[data-nen="toi"] .ds li i svg{stroke:var(--th-toi)} .sec[data-nen="sang"] .ds li i{background:var(--th-toi-nen)} .sec[data-nen="sang"] .ds li i svg{stroke:var(--th-sang)} /* ============================ NÚT ============================ */ /* Khoảng cách từ gạch đầu dòng cuối xuống hàng nút: gấp đôi cho thoáng. Cột chữ có gap 14px, cộng margin-top 6px là 20px → nay 40px (gap 14 + margin 26). */ .hang-nut{display:flex;flex-wrap:wrap;gap:calc(var(--u) * .63);margin-top:calc(var(--u) * 1.64)} /* Nút TRONG SECTION rộng hơn nút header 20%: đệm ngang 1.14u so với 0.95u. */ .sec .nut{padding-left:calc(var(--u) * 1.37);padding-right:calc(var(--u) * 1.37)} .nut{height:var(--nut-cao);line-height:1;padding:0 calc(var(--u) * 1.14); border-radius:var(--goc);border:1px solid transparent;cursor:pointer; /* Nhãn nút: font chữ thường + đậm 700 + to hơn 6%. Đây là chỗ hỏng nặng nhất khi còn dùng đơn cách — chữ trên nút là thứ khách phải đọc để biết bấm cái gì. Giãn chữ .06em → .045em cho các chữ cái dính lại thành từ, dễ đọc hơn ở cỡ nhỏ. Chiều cao nút do var(--nut-cao) quyết định nên tăng cỡ chữ KHÔNG làm nút cao lên, chỉ rộng thêm chút — nút vốn đã tự co theo chữ. */ font-family:var(--nhan);font-size:calc(var(--u) * .84);font-weight:700;letter-spacing:.045em; text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center; white-space:nowrap;transition:var(--nhanh);box-sizing:border-box} /* Nút dựng bằng thẻ (nút dẫn ra ngoài, xem s.lk trong JS). Thẻ mặc định có gạch chân và màu liên kết riêng — phải khử, nếu không nút hiện ra có gạch chân dưới chữ. Ba dòng dưới là TẤT CẢ những gì cần để trông y hệt