/* ============================================================ 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; /* Hạ tầng biến theo bộ da: khoảng cách giữa các mục, cỡ chữ gốc, tỉ lệ ảnh đầu trang, độ dày viền. Do-vang (quán ăn/kinh doanh chung): mặc định. */ --khoang-muc:44px; --co-chu-goc:15px; --ty-le-anh-dau:4/3; --do-day-vien:1px; } /* ---------- 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; /* Y tế: thoáng hơn + chữ to hơn — bệnh nhân lớn tuổi đọc dễ. */ --khoang-muc:48px; --co-chu-goc:16px; } /* ---------- 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; /* Công ty/cơ khí: gọn hơn + viền dày hơn = cảm giác chắc, kỹ thuật; ảnh đầu trang ngang 16/9 hợp ảnh xưởng. */ --khoang-muc:40px; --co-chu-goc:16px; --ty-le-anh-dau:16/9; --do-day-vien:2px; } /* ---------- 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; /* Vật tư nông nghiệp: chữ to nhất — khách lớn tuổi ở quê, mắt kém. */ --co-chu-goc:17px; } /* ---------- 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; /* Làm đẹp: rộng rãi hơn. Ảnh đầu trang riêng cho da này ĐÃ THỬ 2 LẦN, CẢ HAI ĐỀU VỠ — cột ảnh trong .bang .khung (grid 1.05fr/.95fr) vỡ track-sizing bất cứ khi nào tỉ lệ ≤ 1 (không đủ rộng hơn cao): - 3/4 (dọc): tràn mép phải ở CẢ 8 cỡ máy kể cả desktop 1440. - 1/1 (vuông): vẫn tràn mép phải ở 7/8 cỡ (320→1024), chỉ sạch ở desktop 1440. Kết luận: MỌI tỉ lệ ≤ 1 đều vỡ, không riêng giá trị nào — đừng thử lại tỉ lệ dọc/vuông cho da này nữa trừ khi sửa gốc CSS grid ở .bang .khung. Giữ tỉ lệ chung 4/3 (đã soi lại: sạch). */ --khoang-muc:52px; } /* ============================================================ 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 var(--co-chu-goc)/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 calc(var(--co-chu-goc) - 1px)/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:var(--ty-le-anh-dau);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:var(--khoang-muc) 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:var(--do-day-vien) solid var(--vien);font-size:15px} .bang-gia caption{caption-side:top;text-align:left;padding:0 0 8px;font-size:calc(var(--co-chu-goc) - 1px); 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:var(--do-day-vien) 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:var(--do-day-vien) 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:var(--do-day-vien) 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:var(--do-day-vien) solid var(--vien);box-shadow:0 1px 3px rgba(0,0,0,.08); aspect-ratio:1/1} .luoi-anh figcaption{font-size:calc(var(--co-chu-goc) - 1px);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:var(--do-day-vien) 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:calc(var(--co-chu-goc) - 1px);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:var(--do-day-vien) 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:var(--do-day-vien) 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)} /* ---------- Lời khách (khối mới, ẩn khi rỗng) ---------- */ .luoi-dg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .luoi-dg blockquote{margin:0 0 12px;font-style:italic} .luoi-dg blockquote p{text-align:left} .luoi-dg figcaption{display:flex;align-items:center;gap:8px; font:700 15px/1.2 var(--chu-tieu-de);color:var(--tieu-de-phu)} .luoi-dg figcaption svg{width:20px;height:20px;fill:var(--chinh);flex:none} /* ---------- Đối tác / khách hàng (khối mới, ẩn khi rỗng) ---------- */ .luoi-dt{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;align-items:center} .o-doi-tac{display:grid;place-items:center;padding:10px; border:var(--do-day-vien) solid var(--vien);border-radius:var(--bo-goc);background:#fff} .o-doi-tac img{max-height:48px;width:auto;filter:grayscale(1);opacity:.75} .o-doi-tac-chu{min-height:48px;text-align:center;font-weight:600; font-size:calc(var(--co-chu-goc) - 1px);color:var(--chu-nhat);line-height:1.35} /* ---------- 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:var(--do-day-vien) 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} .luoi-dg{grid-template-columns:1fr} .luoi-dt{grid-template-columns:repeat(2,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} }