/* ============================================================ MẪU WEB 990k — MỘT bộ xương, NĂM bộ da. Đổi da bằng class trên : gd-do-vang | gd-xanh-y-te | gd-navy-cong-ty | gd-xanh-la | gd-hong-lam-dep Không framework. Không JS bắt buộc. Một chủ đề sáng, cố ý. Bản này viết lại sau khi ĐO 25 bản mẫu theme WordPress bán chạy (Astra, Kadence, GeneratePress, Blocksy, Divi, Elementor) rồi rút số. Bốn luật khiến bản cũ trông rẻ, cả bốn đều đo được: 1. MỘT DẢI MÀU trong 800px đầu. Bản cũ có 6 dải trong 720px đầu, ba trong số đó là ba sắc đỏ khác nhau nằm trong 171px. Cả trang có ~13 dải vì mọi mục xen kẽ trắng/kem. Đo trên 25 bản mẫu: trang 6-9 mục thì chỉ 1-3 mục có nền khác trắng, và chúng gom cụm. Nay: băng đầu (tối) · dải ba lời hứa (kem) · mục liên hệ (kem) · chân trang (tối). Hết. Mọi mục khác nền trắng. 2. MỘT MÀU BÃO HOÀ, mọi ô màu còn lại S < 25%. Bản cũ có 91 mã màu và bốn sắc gần-trắng lệch nhau dưới 3% dùng làm bốn tín hiệu khác nhau — mắt không phân biệt nổi, chỉ thấy bẩn. Nay mọi biến suy ra từ ĐÚNG BỐN SỐ mỗi bộ da: (góc màu, S nhấn, L nhấn, L nền tối). Xám đều lệch nhẹ về góc màu của bộ da — xám trung tính tuyệt đối trông như chưa ai chọn. 3. MÀU NHẤN LÀ MỰC, KHÔNG PHẢI GIẤY. Đo tỉ lệ dùng trên bản mẫu thật: 12:1 nghiêng về mực. Bản cũ tô nguyên dải vàng bão hoà cho ba lời hứa và nguyên thanh đỏ cho đầu bảng giá. Nay màu nhấn chỉ còn ở nút, giá, liên kết, chữ nghiêng trong băng đầu, tiêu đề chân trang. 4. CÓ THANG. Bản cũ: 12 bậc cỡ chữ trong đó 7 bậc lệch nhau 6-9% (mắt không thấy, chỉ máy thấy), 28 giá trị khoảng cách với 13 giá trị lệch lưới 4px, 8 công thức đổ bóng. Nay: 7 bậc khoảng cách nhân 1,5 (thang lõi WordPress), 4 bậc cỡ chữ, MỘT công thức bóng. Một số ĐO ĐƯỢC phải nhớ, đừng chép số của theme Tây về: dấu tiếng Việt CHẠM NHAU khi line-height < 1,142. Đo bằng fontTools trên Be Vietnam Pro (unitsPerEm=1000): đỉnh chữ 'ế' ở 0,914em, chữ 'ộ' trải -0,227…0,774em, nên khe giữa hai dòng = line-height - 1,142. WordPress Twenty Twenty-Five đặt heading lineHeight 1,125 — con số đó là BẪY với tiếng Việt. Dưới đây không chỗ nào dưới 1,25. ============================================================ */ /* ---------- Thang dùng chung, không theo bộ da ---------- */ :root{ /* Thang khoảng cách nhân 1,5 — lấy đúng thang lõi WordPress. */ --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:36px; --s6:54px; --s7:81px; /* Đo trên 25 bản mẫu: đệm mục máy bàn 70-104px, điện thoại 24-64px, tỉ lệ điện thoại/máy bàn 0,50-0,60. clamp() cho đúng dải đó. */ --khoang-muc:clamp(48px,8vw,96px); --le:clamp(16px,4vw,32px); --rong:1120px; /* KHÔNG hạ hai số này xuống dưới 1,25 — xem ghi chú dấu tiếng Việt. */ --lh-de:1.25; --lh-than:1.65; --f-nho:14px; --f-tem:13px; /* chữ nhỏ nhất được phép: chốt soi bắt mọi chữ dưới 12px */ --f-h3:clamp(18px,2.2vw,21px); --f-h2:clamp(24px,3.4vw,32px); --f-h1:clamp(29px,5vw,42px); /* Bề rộng ruột chữ. Đơn vị ch = bề rộng chữ SỐ "0", ở phông này rộng hơn chữ thường ~28%: viết 64ch tưởng 64 chữ, đo ra 78. Dùng em. Đo trên trang thật: 30em ≈ 69 chữ. */ --ruot:30em; /* MỘT công thức bóng cho cả trang. Đo trên bản mẫu thật: alpha 0,04-0,20, nhoè >= 20px, spread ÂM. Twenty Twelve dùng alpha 0,30 nhoè 6px — đó là dấu vân tay "2012" đo được. */ --bong:0 1px 2px rgba(0,0,0,.04),0 12px 28px -12px rgba(0,0,0,.12); --trang:#ffffff; --xanh-zalo:#0068ff; --chu-tieu-de:Roboto,"Helvetica Neue",Arial,sans-serif; --chu-than:Roboto,"Helvetica Neue",Arial,sans-serif; } /* ---------- Bộ da mặc định: ĐỎ (quán ăn / kinh doanh chung) ---------- */ :root{ --chinh:#b63420; --chinh-dam:#592017; --nhan:#e4978b; --kem:#f9f6f6; --soc:#fbf9f9; --vien:#e9e3e2; --chu:#29201f; --chu-nhat:#766360; --bang-chu:#e7dcda; --chan-chu:#e7dcda; --o-trong-nen:#f2eeed; --o-trong-chu:#937a76; --bo-goc:4px; --co-chu-goc:16px; --ty-le-anh-dau:4/3; } /* ---------- Bộ da: XANH Y TẾ (nha khoa, phòng khám, nhà thuốc) ---------- */ body.gd-xanh-y-te{ --chinh:#11699c; --chinh-dam:#103c56; --nhan:#8bc3e4; --kem:#f6f8f9; --soc:#f9fafb; --vien:#e2e6e9; --chu:#1f2529; --chu-nhat:#606e76; --bang-chu:#dae2e7; --chan-chu:#dae2e7; --o-trong-nen:#edf0f2; --o-trong-chu:#768993; --bo-goc:8px; --co-chu-goc:17px; --ty-le-anh-dau:4/3; } /* ---------- Bộ da: NAVY CÔNG TY (xưởng, vật tư, dịch vụ kỹ thuật) ---------- */ body.gd-navy-cong-ty{ --chinh:#284871; --chinh-dam:#182739; --nhan:#8bb2e4; --kem:#f6f7f9; --soc:#f9fafb; --vien:#e2e5e9; --chu:#1f2329; --chu-nhat:#606a76; --bang-chu:#dae0e7; --chan-chu:#dae0e7; --o-trong-nen:#edeff2; --o-trong-chu:#768393; --bo-goc:0; --co-chu-goc:16px; --ty-le-anh-dau:16/9; } /* ---------- Bộ da: XANH LÁ (nông sản, thực phẩm, vật tư nông nghiệp) ---------- */ body.gd-xanh-la{ --chinh:#226d31; --chinh-dam:#173b1e; --nhan:#8be49d; --kem:#f6f9f7; --soc:#f9fbf9; --vien:#e2e9e3; --chu:#1f2921; --chu-nhat:#607665; --bang-chu:#dae7dd; --chan-chu:#dae7dd; --o-trong-nen:#edf2ee; --o-trong-chu:#76937c; --bo-goc:2px; --co-chu-goc:17px; --ty-le-anh-dau:4/3; } /* ---------- Bộ da: HỒNG LÀM ĐẸP (tóc, nail, spa) ---------- */ body.gd-hong-lam-dep{ --chinh:#a12b5a; --chinh-dam:#4c1a2e; --nhan:#e48baf; --kem:#f9f6f7; --soc:#fbf9fa; --vien:#e9e2e5; --chu:#291f23; --chu-nhat:#766069; --bang-chu:#e7dadf; --chan-chu:#e7dadf; --o-trong-nen:#f2edef; --o-trong-chu:#937682; --bo-goc:14px; --co-chu-goc:16px; --ty-le-anh-dau:4/3; } /* ============================================================ Bộ xương — dùng chung cho cả năm bộ da ============================================================ */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--trang); color:var(--chu); font:400 var(--co-chu-goc)/var(--lh-than) var(--chu-than); padding-bottom:72px; /* chừa chỗ cho thanh Gọi/Zalo dính đáy */ -webkit-font-smoothing:antialiased; } /* height:auto bắt buộc đi kèm width/height trên thẻ . Thiếu nó thì khi max-width bóp ảnh hẹp lại, chiều cao vẫn giữ đúng số ghi trên thẻ — ảnh bẹt ra méo hình. Ô nào tự đặt height riêng thì luật của ô đó thắng, không sao. */ img{max-width:100%;height:auto;display:block} a{color:var(--chinh);text-decoration:none} a:hover{text-decoration:underline} /* Vòng lấy nét: dùng màu chính (đậm, ăn trên nền trắng). Trên hai vùng nền tối thì đổi sang trắng — màu chính nằm trên nền tối cùng góc màu là gần như vô hình. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--chinh);outline-offset:2px} .bang a:focus-visible,.chan a:focus-visible,.day a:focus-visible{outline-color:#fff} .khung{width:100%;max-width:var(--rong);margin:0 auto;padding:0 var(--le)} /* ---------- Thanh trên cùng ---------- */ /* Trước là dải nền --chinh-dam, tức dải màu tối THỨ HAI trong 100px đầu, ngay trên băng đầu cũng tối. Hai dải tối kẹp một dải trắng mỏng là dáng trang 2010. Nay: nền kem, chữ xám, một nét viền chân. */ .thanh-tren{background:var(--kem);color:var(--chu-nhat);font-size:var(--f-tem); border-bottom:1px solid var(--vien)} .thanh-tren .khung{display:flex;flex-wrap:wrap;gap:4px var(--s4);align-items:center; justify-content:space-between;min-height:36px} .thanh-tren span{display:inline-flex;align-items:center;gap:6px} .thanh-tren b{font-weight:700;color:var(--chu)} .thanh-tren svg{width:13px;height:13px;fill:var(--chinh);flex:none} /* ---------- Đầu trang ---------- */ /* Viền chân 3px màu chính -> 1px màu viền. Nét dày nhất đo được trên 25 bản mẫu là 1px, không có ngoại lệ. */ .dau-trang{background:var(--trang);border-bottom:1px solid var(--vien)} .dau-trang .khung{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center; justify-content:space-between;padding-top:var(--s3);padding-bottom:var(--s3)} .hieu{display:flex;align-items:center;gap:var(--s2)} .hieu:hover{text-decoration:none} .dau-bat{width:48px;height:48px;flex:none;border-radius:var(--bo-goc); background:var(--chinh);display:grid;place-items:center} .dau-bat svg{width:26px;height:26px;fill:#fff} /* Bỏ chữ hoa. Chữ hoa tiếng Việt cõng nguyên tầng dấu nên nặng hơn hẳn chữ hoa tiếng Anh; đo trên bản mẫu thật cũng chỉ dùng chữ hoa cho nhãn nhỏ, không dùng cho tên. Giãn chữ âm giúp tên lớn bớt rời, nhưng chặn ở -0,01em: quá mức là dấu chạm thân chữ bên cạnh. */ .hieu h1{margin:0;font:700 clamp(20px,2.6vw,26px)/var(--lh-de) var(--chu-tieu-de); color:var(--chinh);letter-spacing:-.01em} .hieu p{margin:2px 0 0;font-size:var(--f-nho);color:var(--chu-nhat)} /* Viền đứt -> viền liền. Viền đứt trên hộp số điện thoại đọc ra "ô nhập liệu tạm" chứ không ra "thông tin quan trọng". */ .hop-hotline{display:flex;align-items:center;gap:var(--s2); border:1px solid var(--vien);border-radius:var(--bo-goc); padding:var(--s1) var(--s3);background:var(--trang)} .hop-hotline svg{width:24px;height:24px;fill:var(--chinh);flex:none} .hop-hotline small{display:block;font-size:var(--f-tem);color:var(--chu-nhat); text-transform:uppercase;letter-spacing:.08em} .hop-hotline strong{font:700 21px/1.25 var(--chu-tieu-de); color:var(--chinh);font-variant-numeric:tabular-nums} /* ---------- Băng đầu trang ---------- */ /* Bỏ nền chuyển sắc xuyên tâm + nền chuyển sắc dọc. Đo trên 25 bản mẫu: nền băng đầu hoặc là ẢNH, hoặc là MỘT màu phẳng. Chuyển sắc hai lớp trên nền màu đặc là dấu vân tay 2013. */ .bang{position:relative;background:var(--chinh-dam);color:#fff;overflow:hidden} .bang-nen{position:absolute;inset:0;background:var(--chinh-dam)} .bang .khung{position:relative;display:grid;gap:var(--s5);align-items:center; grid-template-columns:1.05fr .95fr; padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(40px,7vw,88px)} /* Bỏ chữ hoa + bỏ đổ bóng chữ. Bóng chữ đen 55% dưới tiêu đề là cách duy nhất bản cũ làm cho chữ đọc được trên nền chuyển sắc; nền phẳng thì tương phản đã đủ, bóng chỉ còn làm chữ nhoè. */ .bang h2{margin:0 0 var(--s3);font:700 var(--f-h1)/var(--lh-de) var(--chu-tieu-de); letter-spacing:-.01em;text-wrap:balance} .bang h2 em{font-style:normal;color:var(--nhan);display:block} .bang p{margin:0;font-size:17px;color:var(--bang-chu);max-width:var(--ruot)} .nut-hang{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)} /* Nút: cao 56px. Đo trên bản mẫu thật 48-54px; cộng thêm vì đây là nút GỌI ĐIỆN trên điện thoại, thứ được bấm nhiều nhất trang. Bỏ chuyển sắc dọc và bỏ box-shadow "0 3px 0" (nút nổi kiểu 2014). */ .nut{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1); min-height:56px;padding:var(--s2) var(--s5);border-radius:var(--bo-goc); font:700 17px/1.25 var(--chu-than);border:1px solid transparent;cursor:pointer} .nut svg{width:19px;height:19px;fill:currentColor;flex:none} .nut:hover{text-decoration:none;filter:brightness(1.06)} /* Nút chính trên nền tối: nền TRẮNG, chữ màu chính. Đã thử nền màu nhấn trước — màu nhấn là sắc nhạt (L 72%) nên trên nền tối nó đọc ra "nút phụ đang mờ" chứ không ra "bấm vào đây". Trắng đặc + trắng viền là đúng cặp đo được trên bản mẫu thật, và thứ bậc rõ ngay từ xa. Tương phản chữ trên nền trắng đã tính đủ 5 bộ da: 6,00 · 5,96 · 9,31 · 6,36 · 6,98. */ .nut-nhan{background:#fff;color:var(--chinh)} .nut-vien{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} /* Viền trắng 4px + bóng đen 40% -> khung ảnh kiểu album 2011. Nay: không viền, bo theo bộ da, một công thức bóng chung. */ /* padding PHẢI là 0. Bản trước để 12px cho chữ "chưa có ảnh" thở, nhưng khi CÓ ảnh thì 12px đó thành một khung nền sáng viền quanh tấm ảnh — đúng cái khung ảnh album 2011 vừa bỏ, chỉ là vẽ bằng padding thay vì bằng border. Chữ chỗ trống tự đệm lấy. */ .o-anh{border:0;border-radius:var(--bo-goc);box-shadow:var(--bong); background:var(--o-trong-nen);aspect-ratio:var(--ty-le-anh-dau); display:grid;place-items:center;text-align:center;padding:0;overflow:hidden} /*