/* ============================================================ MẪU WEB 990k — MỘT bộ xương, BỐN bộ da. Đổi da bằng class trên : gd-do-vang | gd-xanh-y-te | gd-navy-cong-ty | gd-hong-lam-dep Không framework. Không JS bắt buộc. Một chủ đề sáng, cố ý. ============================================================ */ /* ---------- Bộ da mặc định: ĐỎ – VÀNG (Kinh Doanh) ---------- */ :root{ --bang-chu:#f1eae2; --o-trong-nen:#e9e2d6; --o-trong-chu:#8a7c66; --chan-chu:#f4eaea; --chinh:#c62828; --chinh-dam:#8e1f1f; --nhan:#f2b705; /* màu nhấn: gạch chân, nút, giá */ --nhan-sang:#ffd34d; --nhan-toi:#c08f00; --chu-tren-nhan:#3b2600; --kem:#fdf6e8; /* nền mục xen kẽ */ --tieu-de-phu:#4a3728; --bang-nen-1:#4a241a; --bang-nen-2:#2e1510; --gia-nhom:#f0e4cf; --soc:#faf7f2; --hop-hotline-nen:#fff8f8; --chu:#333333; --chu-nhat:#6b6b6b; --vien:#dddddd; --trang:#ffffff; --xanh-zalo:#0068ff; /* Bo góc theo bộ da. Xưởng cơ khí góc vuông, tiệm nail góc tròn — cùng một bộ xương, đổi một biến. Không đụng vòng tròn 50% của nút nổi. */ --bo-goc:4px; --rong:1170px; --chu-tieu-de:"Roboto Condensed",Roboto,Arial,sans-serif; --chu-than:Roboto,"Helvetica Neue",Arial,sans-serif; } /* ---------- Bộ da: XANH Y TẾ (nha khoa, phòng khám, nhà thuốc) ---------- */ body.gd-xanh-y-te{ --bo-goc:6px; /* mềm vừa, sạch như tờ giấy khám */ --bang-chu:#e2eef5; --o-trong-nen:#dfe9ef; --o-trong-chu:#6d8492; --chan-chu:#e6eff5; --chinh:#0277bd; --chinh-dam:#01579b; --nhan:#00bfa5; --nhan-sang:#5ce0cd; --nhan-toi:#00897b; --chu-tren-nhan:#00332c; --kem:#eef6fb; --tieu-de-phu:#123a52; --bang-nen-1:#0d3f5e; --bang-nen-2:#07202f; --gia-nhom:#d7e9f4; --soc:#f5f9fc; --hop-hotline-nen:#f2f9ff; } /* ---------- Bộ da: NAVY CÔNG TY (kiến trúc, in ấn, luật) ---------- */ body.gd-navy-cong-ty{ --bo-goc:0; /* góc vuông: xưởng, công ty, nhà thầu */ --bang-chu:#e6eaef; --o-trong-nen:#e3e7ec; --o-trong-chu:#78828f; --chan-chu:#e8ecf1; --chinh:#1a3a5c; --chinh-dam:#102439; --nhan:#c9a227; --nhan-sang:#e8c657; --nhan-toi:#8f7218; --chu-tren-nhan:#241d05; --kem:#f1f3f6; --tieu-de-phu:#22303d; --bang-nen-1:#1d3852; --bang-nen-2:#0c1926; --gia-nhom:#dde3ea; --soc:#f7f8fa; --hop-hotline-nen:#f4f7fb; } /* ---------- Bộ da: XANH LÁ (nông sản, cây cảnh, thú y, vật tư nông nghiệp) ---------- */ body.gd-xanh-la{ --chinh:#2e7d32; --chinh-dam:#1b5e20; --nhan:#f9a825; --nhan-sang:#ffd254; --nhan-toi:#c17900; --chu-tren-nhan:#33270a; --kem:#f1f7ee; --tieu-de-phu:#25401f; --bang-nen-1:#1f4a23; --bang-nen-2:#0e2a12; --gia-nhom:#dcead6; --soc:#f7faf5; --hop-hotline-nen:#f3faf2; --bang-chu:#e7f0e4; --o-trong-nen:#e2ebdd; --o-trong-chu:#74856d; --chan-chu:#e9f1e7; } /* ---------- Bộ da: HỒNG LÀM ĐẸP (spa, nail, áo cưới, mầm non) ---------- */ body.gd-hong-lam-dep{ --bo-goc:14px; /* góc tròn: spa, nail, ảnh cưới */ --bang-chu:#f6e6ec; --o-trong-nen:#eee0e5; --o-trong-chu:#8f7480; --chan-chu:#f7e9ee; --chinh:#c2185b; --chinh-dam:#8c0f41; --nhan:#d4a373; --nhan-sang:#eec9a4; --nhan-toi:#a2764c; --chu-tren-nhan:#3a2413; --kem:#fdf1f4; --tieu-de-phu:#5a2338; --bang-nen-1:#5c2338; --bang-nen-2:#31101d; --gia-nhom:#f6dfe6; --soc:#fdf8fa; --hop-hotline-nen:#fff5f8; } /* ============================================================ Bộ xương — dùng chung cho cả bốn 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 15px/1.65 var(--chu-than); padding-bottom:64px; } img{max-width:100%;display:block} a{color:var(--chinh);text-decoration:none} a:hover{text-decoration:underline} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--nhan);outline-offset:2px} .khung{width:100%;max-width:var(--rong);margin:0 auto;padding:0 15px} /* ---------- Thanh trên cùng ---------- */ .thanh-tren{background:var(--chinh-dam);color:#fff;font-size:13px} .thanh-tren .khung{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center; justify-content:space-between;min-height:34px} .thanh-tren span{display:inline-flex;align-items:center;gap:6px} .thanh-tren b{font-weight:700;letter-spacing:.3px} .thanh-tren svg{width:14px;height:14px;fill:var(--nhan);flex:none} /* ---------- Đầu trang ---------- */ .dau-trang{background:var(--trang);border-bottom:3px solid var(--chinh)} .dau-trang .khung{display:flex;flex-wrap:wrap;gap:16px;align-items:center; justify-content:space-between;padding-top:14px;padding-bottom:14px} .hieu{display:flex;align-items:center;gap:12px} .hieu:hover{text-decoration:none} .dau-bat{width:52px;height:52px;flex:none;border-radius:50%;background:var(--chinh); display:grid;place-items:center;border:2px solid var(--nhan)} .dau-bat svg{width:28px;height:28px;fill:#fff} .hieu h1{margin:0;font:700 26px/1.1 var(--chu-tieu-de); color:var(--chinh);text-transform:uppercase;letter-spacing:.5px} .hieu p{margin:2px 0 0;font-size:13px;color:var(--chu-nhat);font-style:italic} .hop-hotline{display:flex;align-items:center;gap:10px;border:1px dashed var(--chinh); border-radius:var(--bo-goc);padding:8px 14px;background:var(--hop-hotline-nen)} .hop-hotline svg{width:26px;height:26px;fill:var(--chinh);flex:none} .hop-hotline small{display:block;font-size:12px;color:var(--chu-nhat); text-transform:uppercase;letter-spacing:.6px} .hop-hotline strong{font:700 22px/1.1 var(--chu-tieu-de); color:var(--chinh);font-variant-numeric:tabular-nums} /* ---------- Mục lục: vẫn MỘT trang, chỉ là neo cuộn ---------- */ /* KHÔNG dính đầu màn hình. Hai lý do, cái nào cũng đủ: 1. Nút Gọi/Zalo đã dính đáy rồi. Thêm một thanh dính đầu là màn hình điện thoại bị kẹp hai đầu, phần đọc được co lại còn hơn 700px. 2. Câu bán là "một trang, cuộn một mạch, KHÔNG CÓ MENU". Một thanh chữ dính trên đầu suốt buổi thì nó là menu, dù mình gọi nó là mục lục. Cuộn qua là mất — đúng như mục lục trong cuốn sách. */ .muc-luc{background:var(--chinh);box-shadow:0 2px 5px rgba(0,0,0,.2)} .muc-luc ul{display:flex;flex-wrap:nowrap;overflow-x:auto;margin:0;padding:0; list-style:none;-webkit-overflow-scrolling:touch;scrollbar-width:none} .muc-luc ul::-webkit-scrollbar{display:none} .muc-luc a{display:block;padding:12px 18px;color:#fff; font:700 13px/1 var(--chu-tieu-de); text-transform:uppercase;letter-spacing:.7px;white-space:nowrap; border-right:1px solid rgba(255,255,255,.18)} .muc-luc a:hover,.muc-luc a:focus{background:var(--chinh-dam);text-decoration:none} /* ---------- Băng đầu trang ---------- */ .bang{position:relative;background:var(--bang-nen-2);color:#fff;overflow:hidden} .bang-nen{position:absolute;inset:0;background: radial-gradient(120% 90% at 78% 42%,rgba(255,255,255,.16),transparent 62%), linear-gradient(180deg,var(--bang-nen-1) 0%,var(--bang-nen-2) 100%)} .bang .khung{position:relative;display:grid;gap:24px;align-items:center; grid-template-columns:1.05fr .95fr;padding-top:38px;padding-bottom:38px} .bang h2{margin:0 0 12px;font:700 40px/1.15 var(--chu-tieu-de); text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.55);text-wrap:balance} .bang h2 em{font-style:normal;color:var(--nhan);display:block} .bang p{margin:0 0 20px;font-size:16px;color:var(--bang-chu);max-width:46ch} .nut-hang{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .nut{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--bo-goc); font:700 15px/1 var(--chu-than);border:none;cursor:pointer} .nut svg{width:18px;height:18px;fill:currentColor;flex:none} .nut:hover{text-decoration:none;filter:brightness(1.07)} .nut-nhan{background:linear-gradient(180deg,var(--nhan-sang),var(--nhan)); color:var(--chu-tren-nhan);box-shadow:0 3px 0 var(--nhan-toi)} .nut-vien{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.65)} .o-anh{border:4px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.4);background:var(--o-trong-nen); aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:12px; overflow:hidden} .o-anh img{width:100%;height:100%;object-fit:cover} .o-anh span{font:700 12px/1.5 var(--chu-tieu-de);color:var(--o-trong-chu); text-transform:uppercase;letter-spacing:1px} /* ---------- Ba lời hứa ---------- */ .hua{background:var(--nhan);color:var(--chu-tren-nhan)} .hua .khung{display:grid;grid-template-columns:repeat(3,1fr);gap:0; padding-top:0;padding-bottom:0} .hua > .khung > div{display:flex;align-items:center;gap:12px;padding:16px 15px} .hua > .khung > div + div{border-left:1px solid rgba(0,0,0,.18)} .hua svg{width:30px;height:30px;fill:var(--chinh-dam);flex:none} .hua b{display:block;font:700 15px/1.25 var(--chu-tieu-de);text-transform:uppercase} .hua small{font-size:13px;opacity:.85} /* ---------- Khung mục chung ---------- */ .muc{padding:44px 0} .muc-kem{background:var(--kem)} .tieu-de{text-align:center;margin:0 0 8px; font:700 30px/1.2 var(--chu-tieu-de); text-transform:uppercase;color:var(--chinh);letter-spacing:.5px;text-wrap:balance} .gach{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 26px} .gach::before,.gach::after{content:"";height:2px;width:56px;background:var(--nhan)} .gach i{width:9px;height:9px;background:var(--chinh);transform:rotate(45deg);display:block} .dan{text-align:center;max-width:64ch;margin:-16px auto 26px;color:var(--chu-nhat);font-size:15px} /* ---------- Bảng giá ---------- */ .bang-gia{width:100%;border-collapse:collapse;background:#fff; border:1px solid var(--vien);font-size:15px} .bang-gia caption{caption-side:top;text-align:left;padding:0 0 8px;font-size:13px; color:var(--chu-nhat);font-style:italic} .bang-gia th{background:var(--chinh);color:#fff;text-align:left;padding:11px 14px; font:700 13px/1.2 var(--chu-tieu-de);text-transform:uppercase;letter-spacing:.6px} .bang-gia th:last-child,.bang-gia td:last-child{text-align:right;white-space:nowrap} .bang-gia td{padding:10px 14px;border-top:1px solid var(--vien)} .bang-gia tbody tr:not(.nhom):nth-child(odd) td{background:var(--soc)} /* Dòng nhóm là ô duy nhất của hàng nên dính luật căn phải của cột giá. Trả nó về căn trái — nhóm món phải thẳng hàng với tên món bên dưới. */ .bang-gia tr.nhom td{text-align:left;background:var(--gia-nhom); font:700 13px/1.2 var(--chu-tieu-de); text-transform:uppercase;color:var(--tieu-de-phu);letter-spacing:.6px} .gia{font-weight:700;color:var(--chinh-dam);font-variant-numeric:tabular-nums} /* Ô ảnh món: khung vuông cố định, ảnh nào cũng cắt vừa, hàng không nhảy cao thấp. */ .bang-gia td.o-mon{width:88px;padding:6px 0 6px 10px} .bang-gia td.o-mon img{display:block;width:72px;height:72px;object-fit:cover; border:1px solid var(--vien);background:var(--soc)} /* Chữ chỉ dành cho trình đọc màn hình. */ .chi-doc{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} /* ---------- Bảng giá hai chiều ---------- */ /* Cột đầu là TÊN hạng mục, không phải tiêu đề cột, nên phải trả nó về dáng chữ thường — luật .bang-gia th ở trên đang tô nền đỏ chữ hoa. */ .bang-2c th[scope="row"]{background:var(--trang);color:var(--chu); font:400 15px/1.35 var(--chu-than);text-transform:none;letter-spacing:0; padding:10px 14px;border-top:1px solid var(--vien);white-space:normal; /* Ghim cột tên lại khi cuộn ngang: cuộn tới cột giá thứ tư vẫn biết đang đọc dòng nào. Viền phải vẽ bằng box-shadow vì ô sticky trong bảng border-collapse hay rụng mất border. */ position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--vien)} .bang-2c tbody tr:nth-child(odd) th[scope="row"]{background:var(--soc)} .bang-2c tr.nhom td{position:sticky;left:0} /* Mọi cột giá căn phải, không riêng cột cuối. */ .bang-2c th:not(:first-child){text-align:right} .bang-2c td.gia{text-align:right;white-space:nowrap} .bang-2c th[scope="col"]{white-space:nowrap} /* Dòng nhắc vuốt: máy bàn thấy hết bảng rồi thì nhắc làm gì. */ .chi-cuon{display:none;margin:10px auto 0;font-size:13px} .cuon-ngang{overflow-x:auto} /* ---------- Lưới ảnh ---------- */ .luoi-anh{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .luoi-anh figure{margin:0} .luoi-anh .o-anh{border:1px solid var(--vien);box-shadow:0 1px 3px rgba(0,0,0,.08); aspect-ratio:1/1} .luoi-anh figcaption{font-size:13px;color:var(--chu-nhat);padding-top:6px;text-align:center} /* ---------- Trước / sau ---------- */ .luoi-ts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .luoi-ts figure{margin:0} .luoi-ts .cap{display:grid;grid-template-columns:1fr 1fr;gap:8px} .luoi-ts .o-anh{position:relative;border:1px solid var(--vien); box-shadow:0 1px 3px rgba(0,0,0,.08);aspect-ratio:1/1;padding:0} .nhan-ts{position:absolute;top:0;left:0;z-index:1;background:var(--chu-nhat);color:#fff; padding:4px 10px;font:700 11px/1.4 var(--chu-tieu-de);text-transform:uppercase; letter-spacing:1px} .nhan-ts.sau{background:var(--chinh)} .luoi-ts figcaption{font-size:14px;color:var(--chu-nhat);padding-top:8px;text-align:center} .nho-ts{margin:22px auto 0;font-size:13px;font-style:italic} /* ---------- Các cơ sở ---------- */ .luoi-cn{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .luoi-cn article{padding:18px 20px} .luoi-cn .dong-tin{padding:9px 0;align-items:flex-start} .nut-nho{padding:12px 16px;font-size:13px;margin-top:10px;min-height:44px; display:inline-flex;align-items:center; color:var(--chinh);border-color:var(--chinh)} /* ---------- Giờ theo ngày ---------- */ .gio-tuan{border-collapse:collapse;margin-top:6px;font-size:14px} .gio-tuan th{text-align:left;font-weight:400;color:var(--chu-nhat);padding:3px 14px 3px 0; white-space:nowrap} .gio-tuan td{padding:3px 0;font-weight:700;font-variant-numeric:tabular-nums} /* ---------- Thẻ chữ ---------- */ .the{background:#fff;border:1px solid var(--vien);border-radius:var(--bo-goc); box-shadow:0 1px 3px rgba(0,0,0,.07);padding:20px 22px} .the h3{margin:0 0 4px;font:700 19px/1.3 var(--chu-tieu-de); text-transform:uppercase;color:var(--tieu-de-phu)} .gach-nho{width:44px;height:3px;background:var(--nhan);margin:0 0 12px} .the p{margin:0 0 10px;text-align:justify} .the p:last-child{margin-bottom:0} .the ul{margin:0;padding-left:20px} .the li{margin-bottom:6px} .cot-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} /* ---------- Hồ sơ năng lực ---------- */ .luoi-nl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .luoi-nl article{background:#fff;border:1px solid var(--vien);border-radius:var(--bo-goc); box-shadow:0 1px 3px rgba(0,0,0,.07);overflow:hidden} .luoi-nl .o-anh{border:none;box-shadow:none;aspect-ratio:16/10} .luoi-nl .noi{padding:14px 16px} .luoi-nl h3{margin:0 0 6px;font:700 17px/1.3 var(--chu-tieu-de);color:var(--tieu-de-phu)} .luoi-nl p{margin:0;font-size:14px;color:var(--chu-nhat)} /* ---------- Giấy phép ---------- */ .giay-phep{border-left:5px solid var(--chinh);background:#fff} .giay-phep dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0} .giay-phep dt{font-weight:700;color:var(--chu-nhat);font-size:13px; text-transform:uppercase;letter-spacing:.4px} .giay-phep dd{margin:0} /* ---------- Liên hệ ---------- */ .lien-he{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .dong-tin{display:flex;gap:12px;padding:12px 0;border-bottom:1px dotted var(--vien)} .dong-tin:last-child{border-bottom:none} /* Ngón tay cái không bấm trúng dòng chữ cao 18px. Mốc 44px của Apple, 48dp của Google — số máy và Zalo là thứ khách bấm nhiều nhất, phải to. */ .dong-tin a[href^="tel:"],.dong-tin a[href*="zalo"], .chan a[href^="tel:"],.chan a[href*="zalo"]{ display:inline-flex;align-items:center;min-height:44px} .dong-tin svg{width:20px;height:20px;fill:var(--chinh);flex:none;margin-top:2px} .dong-tin b{display:block;font-size:13px;text-transform:uppercase;color:var(--chu-nhat); letter-spacing:.5px;font-weight:700} .o-ban-do{border:1px solid var(--vien);background:var(--o-trong-nen);aspect-ratio:16/11; display:grid;place-items:center;text-align:center;padding:0;border-radius:var(--bo-goc); overflow:hidden} .o-ban-do iframe{width:100%;height:100%;border:0;display:block} .o-ban-do span{font:700 12px/1.6 var(--chu-tieu-de);color:var(--o-trong-chu); text-transform:uppercase;letter-spacing:1px;padding:16px} /* ---------- Chân trang ---------- */ .chan{background:var(--chinh-dam);color:var(--chan-chu);padding:34px 0 0;font-size:14px;margin-top:8px} .chan .khung{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:26px} .chan h4{margin:0 0 12px;font:700 15px/1.2 var(--chu-tieu-de); text-transform:uppercase;color:var(--nhan);letter-spacing:.6px} .chan p{margin:0} .chan a{color:#fff;text-decoration:underline} .chan ul{margin:0;padding:0;list-style:none} .chan li{margin-bottom:7px} .ban-quyen{border-top:1px solid rgba(255,255,255,.18);margin-top:28px; padding:14px 0;text-align:center;font-size:13px;opacity:.85} /* ---------- Nút kiếm tiền ---------- */ .day{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid; grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.15)} .day a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 8px; color:#fff;font:700 16px/1 var(--chu-than)} .day a:hover{text-decoration:none} .day svg{width:20px;height:20px;fill:#fff} .day .goi{background:var(--chinh)} .day .zalo{background:var(--xanh-zalo)} .tron{position:fixed;right:18px;z-index:60;width:54px;height:54px;border-radius:50%; display:none;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.3)} .tron svg{width:26px;height:26px;fill:#fff} .tron.goi{bottom:88px;background:var(--chinh)} .tron.zalo{bottom:22px;background:var(--xanh-zalo)} .tron::after{content:"";position:absolute;inset:-6px;border-radius:50%; border:2px solid;opacity:.45;animation:song 1.8s infinite} .tron.goi::after{border-color:var(--chinh)} .tron.zalo::after{border-color:var(--xanh-zalo)} @keyframes song{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.35);opacity:0}} /* ---------- Điện thoại ---------- */ @media (max-width:860px){ /* Điện thoại: ảnh món nhỏ lại cho tên món còn chỗ thở. */ .bang-gia td.o-mon{width:66px;padding-left:8px} .bang-gia td.o-mon img{width:56px;height:56px} .bang .khung{grid-template-columns:1fr;padding-top:26px;padding-bottom:26px} .bang h2{font-size:29px} .hua .khung{grid-template-columns:1fr} .hua > .khung > div + div{border-left:none;border-top:1px solid rgba(0,0,0,.18)} .luoi-anh{grid-template-columns:repeat(2,1fr)} .luoi-nl{grid-template-columns:1fr} .luoi-ts{grid-template-columns:1fr} .luoi-cn{grid-template-columns:1fr} .cot-2,.lien-he{grid-template-columns:1fr} .chan .khung{grid-template-columns:1fr} .dau-trang .khung{justify-content:center;text-align:center} .hieu{flex-direction:column;text-align:center} .hieu h1{font-size:23px} .muc{padding:32px 0} .tieu-de{font-size:24px} .giay-phep dl{grid-template-columns:1fr} /* Cột tên chiếm nửa màn thì cuộn ngang thành vô nghĩa — chặn trần lại. */ /* Bảng đã cuộn ngang được rồi thì đừng bóp cột tên: cho nó đủ chỗ xuống nhiều nhất hai dòng, thừa thì để người ta vuốt. */ .bang-2c th[scope="row"]{min-width:150px;max-width:52vw;font-size:14px} .bang-2c{font-size:14px} .chi-cuon{display:block} } @media (min-width:861px){ .day{display:none} body{padding-bottom:0} .tron{display:grid} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .tron::after{animation:none} }