/* ============================================================ HỌC VUI – LỚP LÀM ĐẸP ------------------------------------------------------------ File này nạp SAU style.css và chỉ làm một việc: nâng phần nhìn. Không đụng tới bố cục xương sống (thanh trên, khung cuộn, thanh dưới) để game không bị vỡ khi style.css được cập nhật. Bốn nhóm thay đổi: 1. Bảng màu theo BUỔI TRONG NGÀY – trời và cỏ đổi màu theo giờ thật. 2. Chiều sâu – thẻ nổi, bóng mềm hai lớp, viền sáng ở mép trên. 3. Nhịp – nút nhún khi bấm, thẻ nhấc lên khi rê chuột, nội dung hiện ra theo thứ tự chứ không bật ra cùng lúc. 4. Đọc dễ hơn – cỡ chữ, khoảng cách, vùng bấm to hơn trên điện thoại. QUY TẮC: không dùng lớp phủ mờ/trong suốt chồng lên chữ. Trẻ đọc chữ trên nền mờ rất mệt; muốn nổi thì dùng nền đặc và bóng. ============================================================ */ /* ============================================================ 1. MÀU THEO BUỔI TRONG NGÀY mang lớp buoi-sang | buoi-trua | buoi-chieu | buoi-toi do máy chủ đặt (xem hv_buoi() trong hocvui-vuonthu.php). ============================================================ */ :root { /* mặc định = ban ngày */ --troi-1: #4fc3f7; --troi-2: #a8e8fb; --troi-3: #e2f7fe; --co-a: #9ade6f; --co-b: #7ccf4f; --co-c: #5fbc3e; --doi-xa: #b6e79c; --nui-xa: #bfdcee; --vet-co: #a9e884; --rao: 1; --sang-troi: 1; /* dùng chung cho thẻ và nút */ --bong-the: 0 2px 0 rgba(255,255,255,.9) inset, 0 10px 22px rgba(31,26,20,.16); --bong-noi: 0 2px 0 rgba(255,255,255,.9) inset, 0 16px 34px rgba(31,26,20,.24); --bo: 22px; } body.buoi-sang { --troi-1: #ffc09f; --troi-2: #ffe3c4; --troi-3: #fff6e4; --co-a: #9edb76; --co-b: #7fcb55; --co-c: #64b845; --doi-xa: #bae6a4; --nui-xa: #e4d2d4; --vet-co: #aee78c; } body.buoi-chieu { --troi-1: #ff9a6e; --troi-2: #ffc98c; --troi-3: #ffeecb; --co-a: #92cf6a; --co-b: #74bb4c; --co-c: #5aa73d; --doi-xa: #afdc96; --nui-xa: #e0c3b9; --vet-co: #a2dc7c; } /* Đêm TRĂNG SÁNG, không phải đêm tối om: vẫn nhìn rõ cây cỏ và các bạn thú, chỉ khác ban ngày ở chỗ trời xanh tím, có trăng, sao và đom đóm. */ body.buoi-toi { --troi-1: #3a5296; --troi-2: #5a74bd; --troi-3: #8ea4dc; --co-a: #6aa877; --co-b: #55955f; --co-c: #43804c; --doi-xa: #74ae7f; --nui-xa: #7f93c8; --vet-co: #7bb886; --sang-troi: 0; } /* Các điểm dừng của hai dải màu trong tranh nền lấy thẳng từ biến ở trên */ .s-troi1 { stop-color: var(--troi-1); } .s-troi2 { stop-color: var(--troi-2); } .s-troi3 { stop-color: var(--troi-3); } .s-co1 { stop-color: var(--co-a); } .s-co2 { stop-color: var(--co-b); } .s-co3 { stop-color: var(--co-c); } html { background: var(--troi-3); } .canh-doi { fill: var(--doi-xa); } .canh-nui { fill: var(--nui-xa); } .canh-nui-tuyet { fill: #ffffff; opacity: .85; } .canh-vet { fill: var(--vet-co); opacity: .5; } .canh-hoa, .canh-rao, .canh-thong { opacity: .95; } /* Mặt trời ban ngày, mặt trăng ban đêm — không bao giờ cùng xuất hiện */ .canh-nang { transform-origin: 900px 104px; animation: thoNang 6s ease-in-out infinite; } .canh-quang { opacity: .85; transform-origin: 900px 104px; animation: thoNang 9s ease-in-out infinite; } .canh-trang, .canh-sao, .canh-domdom { display: none; } body.buoi-toi .canh-nang, body.buoi-toi .canh-quang { display: none; } body.buoi-toi .canh-trang, body.buoi-toi .canh-sao, body.buoi-toi .canh-domdom { display: block; } body.buoi-toi .canh-sao circle { animation: nhapNhay 4s ease-in-out infinite; } body.buoi-toi .canh-sao circle:nth-child(2n) { animation-delay: -1.3s; } body.buoi-toi .canh-sao circle:nth-child(3n) { animation-delay: -2.6s; } body.buoi-toi .canh-may { opacity: .55; } body.buoi-toi .canh-hoa { opacity: .8; } /* Trăng toả một quầng sáng xuống bãi cỏ, cho đêm không bị chết màu */ body.buoi-toi .canh-quang { display: block; opacity: .35; } @keyframes nhapNhay { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* Lời gợi ý dưới khu vườn đã nằm trên nền viên thuốc trắng nên không đổi màu chữ theo buổi — đổi là mất chữ. Chỉ làm bóng đậm hơn cho nổi trên nền tối. */ body.buoi-toi .vuon-goi { box-shadow: 0 4px 14px rgba(0,0,0,.45); } /* Chiều tà: cả khu vườn ngả vàng một chút cho đúng không khí */ body.buoi-chieu .san-lop { filter: saturate(1.05) hue-rotate(-4deg); } body.buoi-toi .san-lop { filter: brightness(.9) saturate(.92); } /* ============================================================ 2. MÀN HÌNH ĐĂNG NHẬP ============================================================ */ .cong-hop { background: linear-gradient(180deg, #fffefb 0%, #fff7e8 100%); border-radius: 34px; box-shadow: var(--bong-noi), 0 30px 60px rgba(31,26,20,.28); position: relative; overflow: hidden; } /* Dải nắng vắt qua góc trên cho tấm thẻ đỡ phẳng */ .cong-hop::before { content: ''; position: absolute; top: -120px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,216,61,.32), rgba(255,216,61,0) 70%); pointer-events: none; } .cong-thu { font-size: 42px; gap: 2px; } .cong-thu span { display: inline-block; animation: nhunThu 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); } .cong-thu span:nth-child(2) { animation-delay: -.4s; } .cong-thu span:nth-child(3) { animation-delay: -.8s; } .cong-thu span:nth-child(4) { animation-delay: -1.2s; } .cong-thu span:nth-child(5) { animation-delay: -1.6s; } @keyframes nhunThu { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } } .cong-ten { letter-spacing: .5px; text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(155,93,229,.28); } .cong-form input { border-radius: 15px; transition: border-color .18s, box-shadow .18s, background .18s; } .cong-form input:focus { outline: none; border-color: var(--tim); box-shadow: 0 0 0 4px rgba(155,93,229,.18); } /* ============================================================ 3. NÚT BẤM Nút to có "chân" (bóng đặc phía dưới) nên nhấn xuống là lún thật. ============================================================ */ .nut-to, .nut-nho, .loc-nut, .tab-nut { transition: transform .12s cubic-bezier(.2,1.4,.5,1), box-shadow .12s, filter .18s; } .nut-to { border-radius: 17px; letter-spacing: .2px; } .nut-to:hover { filter: brightness(1.05); } .nut-to:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.2); } .nut-nho:active { transform: translateY(2px); } /* Nút chính lấp lánh một lượt khi vừa hiện ra, để bé biết bấm vào đâu */ .nut-to::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 62%); transform: translateX(-120%); pointer-events: none; } .nut-to { position: relative; overflow: hidden; } .nut-to:hover::after { animation: loeSang .7s ease-out; } @keyframes loeSang { to { transform: translateX(120%); } } /* ============================================================ 4. THANH TRÊN ============================================================ */ .thanh-tren { padding-top: max(10px, env(safe-area-inset-top)); } .the-nguoi { border-radius: 999px; box-shadow: var(--bong-the); transition: transform .14s; } .the-nguoi:hover { transform: translateY(-2px); } .the-avatar { background: linear-gradient(180deg, #fff3c9, #ffd97a); box-shadow: 0 2px 0 rgba(255,255,255,.8) inset; } .vi-o { border-radius: 999px; box-shadow: var(--bong-the); } .nut-tron { box-shadow: var(--bong-the); transition: transform .14s, filter .18s; } .nut-tron:hover { transform: translateY(-2px) rotate(-6deg); } .nut-tron:active { transform: translateY(2px); } /* Thanh tiến độ lên cấp: có vệt sáng chạy qua cho vui mắt */ .cap-thanh { overflow: hidden; position: relative; } .cap-thanh u { background: linear-gradient(90deg, #ffd83d, #ff9f1c); position: relative; } .cap-thanh u::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 60%); animation: chayVach 2.4s linear infinite; } @keyframes chayVach { from { transform: translateX(-100%); } to { transform: translateX(220%); } } /* ============================================================ 5. THẺ NỘI DUNG (môn học, cửa hàng, chợ, câu hỏi) ============================================================ */ .the-mon, .the-shop, .the-cau, .ket-qua, .the-sp, .the-biet, .hop-thoai, .bxh li { border-radius: var(--bo); box-shadow: var(--bong-the); } .the-mon, .the-shop { position: relative; overflow: hidden; transition: transform .16s cubic-bezier(.2,1.4,.5,1), box-shadow .16s; } /* Vệt sáng vòng cung ở mép trên, cho thẻ trông tròn trịa như kẹo */ .the-mon::before { content: ''; position: absolute; left: -20%; right: -20%; top: -60%; height: 100%; border-radius: 50%; background: rgba(255,255,255,.18); pointer-events: none; } .the-mon:hover { transform: translateY(-5px) rotate(-1.5deg); box-shadow: var(--bong-noi); } .the-mon:active { transform: translateY(3px); } .the-shop:hover { transform: translateY(-4px); box-shadow: var(--bong-noi); } .the-shop:active { transform: translateY(0); } /* Tiêu đề trang nổi trên tranh nền. CHỮ NÂU viền trắng, không phải chữ trắng: nền trời vốn đã sáng, chữ trắng viền trắng thì bạc trắng ra không đọc nổi, mà dấu tiếng Việt mảnh nên mất trước cả chữ. Nâu trên quầng trắng thì nền sáng hay tối đều rõ. */ .tieu-de { font-size: 27px; line-height: 1.45; letter-spacing: .2px; color: #4a3726; text-shadow: 0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 4px 8px rgba(0,0,0,.16); } /* Thẻ và dòng chữ trong một trang hiện ra lần lượt, không bật ra cùng lúc */ .trang.dang-mo .the-mon, .trang.dang-mo .the-shop { animation: nhoiLen .34s cubic-bezier(.2,1.2,.4,1) both; } .trang.dang-mo .the-mon:nth-child(1), .trang.dang-mo .the-shop:nth-child(1) { animation-delay: .02s; } .trang.dang-mo .the-mon:nth-child(2), .trang.dang-mo .the-shop:nth-child(2) { animation-delay: .06s; } .trang.dang-mo .the-mon:nth-child(3), .trang.dang-mo .the-shop:nth-child(3) { animation-delay: .10s; } .trang.dang-mo .the-mon:nth-child(4), .trang.dang-mo .the-shop:nth-child(4) { animation-delay: .14s; } .trang.dang-mo .the-mon:nth-child(5), .trang.dang-mo .the-shop:nth-child(5) { animation-delay: .18s; } .trang.dang-mo .the-mon:nth-child(6), .trang.dang-mo .the-shop:nth-child(6) { animation-delay: .22s; } .trang.dang-mo .the-mon:nth-child(7), .trang.dang-mo .the-shop:nth-child(7) { animation-delay: .26s; } .trang.dang-mo .the-mon:nth-child(8), .trang.dang-mo .the-shop:nth-child(8) { animation-delay: .30s; } .trang.dang-mo .the-mon:nth-child(9), .trang.dang-mo .the-shop:nth-child(9) { animation-delay: .34s; } /* Từ thẻ thứ 10 trở đi hiện ngay, không chờ thêm: danh sách cửa hàng rất dài, xếp hàng tới thẻ thứ 30 thì bé phải ngồi đợi mới thấy món cuối. */ @keyframes nhoiLen { from { opacity: 0; transform: translateY(14px) scale(.97); } } /* ============================================================ 6. CÂU HỎI VÀ ĐÁP ÁN ============================================================ */ .the-cau { background: linear-gradient(180deg, #fffefb, #fff9ee); box-shadow: var(--bong-noi); } .cau-hoi { font-size: 22.5px; line-height: 1.45; } /* Ô chữ cái A B C D đứng đầu mỗi đáp án (thẻ do game.js tạo). Làm to và vuông hơn: ngón tay bé bấm trúng dễ hơn, mắt quét cũng nhanh hơn. */ .dap { border-radius: 18px; min-height: 58px; transition: transform .13s cubic-bezier(.2,1.4,.5,1), box-shadow .13s, border-color .15s, background .15s; } .dap i { width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(180deg, #ffffff, #f2ece0); font-size: 16px; box-shadow: inset 0 0 0 3px #e3dacb, 0 2px 4px rgba(0,0,0,.08); } .dap:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--bong-noi); } .dap:active:not(:disabled) { transform: translateY(1px); } .dap.dung i { background: linear-gradient(180deg, #23d489, #06b96b); } .dap.sai i { background: linear-gradient(180deg, #ff7a9a, #ef476f); } .chuoi { border-radius: 999px; box-shadow: var(--bong-the); } /* Chuỗi đúng càng dài, ngọn lửa càng bừng lên */ .chuoi b { font-variant-numeric: tabular-nums; } .ket-qua { animation: nhoiLen .3s cubic-bezier(.2,1.2,.4,1) both; } /* ============================================================ 7. KHU VƯỜN – dải thú dưới sân ============================================================ */ .thu-chip { border-radius: 18px; box-shadow: var(--bong-the); transition: transform .16s cubic-bezier(.2,1.4,.5,1), box-shadow .16s; } .thu-chip:hover { transform: translateY(-3px); box-shadow: var(--bong-noi); } .chip-hinh { filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); } /* Bạn thú đang đói nháy nhẹ viền đỏ cho bé để ý */ .thu-chip.doi-qua { animation: nhacDoi 1.8s ease-in-out infinite; } @keyframes nhacDoi { 0%, 100% { box-shadow: var(--bong-the); } 50% { box-shadow: var(--bong-the), 0 0 0 4px rgba(239,71,111,.35); } } /* ============================================================ 8. THANH DƯỚI ============================================================ */ .thanh-duoi { border-radius: 26px 26px 0 0; box-shadow: 0 -8px 26px rgba(31,26,20,.2); padding-bottom: max(6px, env(safe-area-inset-bottom)); } .tab { border-radius: 16px; transition: transform .16s cubic-bezier(.2,1.4,.5,1), background .18s, color .18s; } .tab span { transition: transform .2s cubic-bezier(.2,1.6,.4,1); } .tab:hover span { transform: translateY(-3px) scale(1.08); } .tab.dang-chon span { transform: translateY(-2px) scale(1.14); } .tab.dang-chon { box-shadow: 0 6px 16px rgba(155,93,229,.34); } /* ============================================================ 9. HỘP THOẠI ============================================================ */ .lop-phu { backdrop-filter: none; background: rgba(31,26,20,.55); } .hop-thoai { background: linear-gradient(180deg, #fffefb, #fff8ec); box-shadow: var(--bong-noi), 0 40px 80px rgba(0,0,0,.35); animation: moHop .34s cubic-bezier(.2,1.35,.45,1) both; } @keyframes moHop { from { opacity: 0; transform: translateY(26px) scale(.95); } } /* ============================================================ 10. THÔNG BÁO BAY ============================================================ */ .bay { border-radius: 16px; box-shadow: var(--bong-noi); font-weight: 800; } /* ============================================================ 11. BẢNG XẾP HẠNG ============================================================ */ .bxh li { transition: transform .16s; } .bxh li:hover { transform: translateX(4px); } /* Ba bạn đứng đầu được viền vàng – bạc – đồng */ .bxh li:nth-child(1) { box-shadow: var(--bong-the), inset 0 0 0 3px #ffd83d; } .bxh li:nth-child(2) { box-shadow: var(--bong-the), inset 0 0 0 3px #cfd6dd; } .bxh li:nth-child(3) { box-shadow: var(--bong-the), inset 0 0 0 3px #e0a36b; } /* ============================================================ 12. TRANG HƯỚNG DẪN RIÊNG ============================================================ */ .hd-rieng { padding-bottom: 60px; } .trang-hd-rieng { background: linear-gradient(180deg, #eaf6ff 0%, #f7fbe9 100%); } /* ============================================================ 13. MÀN HÌNH NHỎ ============================================================ */ @media (max-width: 560px) { .cau-hoi { font-size: 20px; } .dap { padding-left: 50px; min-height: 56px; } .dap::before { width: 28px; height: 28px; left: 10px; font-size: 15px; } .tab { font-size: 11px; } .cong-hop { border-radius: 26px; } } /* Bé nào đặt máy ở chế độ "giảm chuyển động" thì tắt hết hoạt hình trang trí */ @media (prefers-reduced-motion: reduce) { .canh-may, .canh-nang, .canh-quang, .cong-thu span, .cap-thanh u::after, .thu-chip.doi-qua, .canh-sao circle { animation: none !important; } .the-mon, .the-shop, .ket-qua, .hop-thoai { animation: none !important; } } /* ============================================================ 14. ĐÊM XUỐNG THÌ CẢNH VẬT CŨNG TỐI THEO Cây, bụi, hoa, hàng rào đều vẽ bằng nên chỉnh một lần là đủ. Không đụng tới mặt trăng và sao (hai thứ đó không phải ). ============================================================ */ body.buoi-toi .canh use { filter: brightness(.86) saturate(.94); } body.buoi-toi .san-ao svg { filter: brightness(.9) saturate(.95); } body.buoi-toi .san-chim, body.buoi-toi .cv { filter: brightness(.92); } body.buoi-chieu .canh use { filter: saturate(1.1) sepia(.08); } body.buoi-chieu .san-ao svg { filter: saturate(1.05) sepia(.1); } body.buoi-sang .canh use { filter: saturate(1.06); } /* ============================================================ 15. SỔ THU NHẬP HÔM NAY (trang Học bài) Trẻ học mà không thấy thành quả thì mau chán, nên đặt ngay đầu trang: hôm nay kiếm được bao nhiêu, từ mấy câu đúng. ============================================================ */ .hoc-tien { margin: 0 auto 14px; width: fit-content; max-width: 100%; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.4; color: #2f6b46; background: linear-gradient(180deg, #ffffff, #eefaf1); border: 3px solid #b7e7c6; border-radius: 999px; padding: 9px 18px; box-shadow: var(--bong-the); } .hoc-tien b { color: #06915a; font-size: 1.1em; } .hoc-tien.chua { color: #7a6a58; background: linear-gradient(180deg, #ffffff, #fdf6e8); border-color: #eadfc7; } .hoc-tien.chua b { color: #b06f14; } /* ============================================================ 16. TIỀN BAY LÊN VÍ Bấm đúng một câu là có ngay một thẻ "+1.000 ₫" bay từ thẻ câu hỏi lên ví ở thanh trên, rồi ví nảy một cái. Bé thấy rõ tiền vừa kiếm được đi đâu. ============================================================ */ .xu-bay { position: fixed; z-index: 90; transform-origin: center; translate: -50% -50%; pointer-events: none; padding: 8px 16px; border-radius: 999px; background: linear-gradient(180deg, #ffe27a, #ffb703); color: #5a3c02; font-weight: 800; font-size: 17px; white-space: nowrap; box-shadow: 0 6px 18px rgba(255,159,28,.5), 0 2px 0 rgba(255,255,255,.7) inset; transition: transform .95s cubic-bezier(.35,.05,.3,1), opacity .95s ease-in; } .vi-nhay { animation: viNhay .7s cubic-bezier(.2,1.5,.4,1); } @keyframes viNhay { 0% { transform: scale(1); } 35% { transform: scale(1.22); box-shadow: var(--bong-the), 0 0 0 6px rgba(255,183,3,.35); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .xu-bay { display: none; } .vi-nhay { animation: none; } } /* Thông báo bay hạ xuống dưới dải thu nhập, không thì hai cái chồng chữ lên nhau đúng lúc bé vừa trả lời xong — lúc cần đọc nhất. */ .bay-ds { top: 128px; } /* ============================================================ 17. DÒNG BÁO TRỐNG / BỊ KHOÁ TRONG CỬA HÀNG VÀ CHỢ Trước đây là chữ trắng đặt thẳng lên tranh nền — nền sáng thì gần như không đọc được. Cho vào một tấm thẻ nền đặc cho chắc. ============================================================ */ .shop-trong { color: #5a4a3a; text-shadow: none; background: linear-gradient(180deg, #ffffff, #fff7e8); border: 3px solid #eadfc7; border-radius: 18px; box-shadow: var(--bong-the); line-height: 1.55; max-width: 640px; margin: 2px auto; } /* Nhãn nhỏ cho biết đang mặc cả món ĐANG TREO TRÊN SẠP, không phải món trong kho */ .phien-sap { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fff3c9; color: #8a5a00; font-style: normal; font-size: .82em; font-weight: 800; } /* ============================================================ 18. CHỌN GIÁ NHANH KHI BÁN Bé không thích gõ số. Ô giá đã điền sẵn giá trị thật, thêm ba nút bấm một cái là xong: bán nhanh, giá chuẩn, lời hơn. ============================================================ */ .gia-goi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -4px 0 2px; } .gia-nut { border: 3px solid #e8e1d4; background: linear-gradient(180deg, #ffffff, #faf6ee); border-radius: 15px; padding: 9px 6px; cursor: pointer; display: grid; gap: 2px; line-height: 1.25; transition: transform .13s cubic-bezier(.2,1.4,.5,1), border-color .15s, background .15s; } .gia-nut b { font-size: 13px; font-weight: 800; color: #5a4a3a; } .gia-nut i { font-size: 13px; font-style: normal; font-weight: 700; color: #8a7a6c; } .gia-nut:hover { transform: translateY(-2px); border-color: var(--tim); } .gia-nut:active { transform: translateY(1px); } .gia-nut.dang-chon { border-color: var(--xanhla); background: linear-gradient(180deg, #eafaf0, #d9f5e4); } .gia-nut.dang-chon b { color: #06915a; } .gia-nut.dang-chon i { color: #06915a; } @media (max-width: 420px) { .gia-nut b, .gia-nut i { font-size: 12px; } } /* ---------- 19. Bảng vàng: thêm dòng tiền ---------- Số tiền xuống dòng riêng dưới ⭐ và 🐾, không để nó ăn mất chỗ của tên bạn trên màn hình điện thoại. */ .bxh .so { text-align: right; line-height: 1.25; } .bxh .so b { display: block; margin-top: 2px; font-size: 13px; font-weight: 800; color: #1f9254; } .buoi-toi .bxh .so b { color: #35c97a; } /* ---------- 20. Chợ: gian thú quý và gian đồ nghề ---------- */ .the-shop.the-quy { background: linear-gradient(160deg, #fff6d8, #ffe9a8); border-color: #f0c419; } .the-shop.the-quy .shop-hinh { filter: drop-shadow(0 2px 6px rgba(240, 196, 25, .55)); } .the-shop.the-nghe { background: linear-gradient(160deg, #eef7ff, #d8ebff); border-color: #7fb3e0; } .the-shop.the-nghe.da-co { background: linear-gradient(160deg, #e6f9ec, #c9f0d6); border-color: #57bd7c; } .the-shop.the-nghe.da-co .shop-gia { color: #1f8a4c; } .nghe-giai { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #eef7ff; border: 2px solid #bcdcf5; font-size: 15px; line-height: 1.45; } .buoi-toi .nghe-giai { background: #23384d; border-color: #36536e; } /* ---------- 21. Vườn: cây cối phải mua, thiên nhiên thì miễn phí ---------- Bướm, ong và cò bay lượn sẵn trong vườn dù bé chưa mua gì. Dùng animation của CSS chứ không dùng JavaScript: nhẹ máy, và trình duyệt tự dừng khi bé chuyển sang tab khác. */ /* GỐC TOẠ ĐỘ phải là góc trên trái của tranh nền. Thiếu dòng này trình duyệt lấy mặc định là TÂM tranh (600, 400): mọi translate trong keyframes bị đẩy đi hàng trăm điểm, con bướm vừa bay vừa giật — nhìn như bay loạn. */ .canh-song > g { will-change: transform; transform-origin: 0 0; } @keyframes hv-buom-bay { 0% { transform: translate(180px, 640px) rotate(-6deg); } 25% { transform: translate(330px, 560px) rotate(8deg); } 50% { transform: translate(250px, 470px) rotate(-4deg); } 75% { transform: translate(120px, 540px) rotate(10deg); } 100% { transform: translate(180px, 640px) rotate(-6deg); } } @keyframes hv-buom-bay2 { 0% { transform: translate(880px, 700px); } 30% { transform: translate(1020px, 600px); } 60% { transform: translate(930px, 500px); } 100% { transform: translate(880px, 700px); } } @keyframes hv-canh-buom { /* hai cánh chớp chớp */ 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.58); } } .canh-buom1 { animation: hv-buom-bay 30s ease-in-out infinite; } .canh-buom2 { animation: hv-buom-bay2 36s ease-in-out infinite; } /* Nhịp cánh: chậm và nhẹ thôi. Trước đây .34s nên con bướm rung bần bật. `transform-box: fill-box` bắt buộc phải có — không có thì trình duyệt thu nhỏ cánh quanh TÂM TRANH NỀN chứ không quanh con bướm, mỗi nhịp cánh con bướm lại nhảy ngang hơn ba trăm điểm. */ .canh-buom use { animation: hv-canh-buom 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes hv-ong-bay { 0% { transform: translate(520px, 690px); } 20% { transform: translate(600px, 650px); } 45% { transform: translate(700px, 706px); } 70% { transform: translate(590px, 730px); } 100% { transform: translate(520px, 690px); } } @keyframes hv-ong-bay2 { 0% { transform: translate(1090px, 560px); } 35% { transform: translate(1010px, 620px); } 70% { transform: translate(1120px, 640px); } 100% { transform: translate(1090px, 560px); } } .canh-ong1 { animation: hv-ong-bay 16s ease-in-out infinite; } .canh-ong2 { animation: hv-ong-bay2 21s ease-in-out infinite; } /* Cò bay ngang trời, mãi mới có một lượt cho đỡ rối mắt */ @keyframes hv-co-bay { 0% { transform: translate(-140px, 150px); opacity: 0; } 6% { opacity: .95; } 94% { opacity: .95; } 100% { transform: translate(1340px, 96px); opacity: 0; } } @keyframes hv-co-bay2 { 0% { transform: translate(1340px, 208px) scaleX(-1); opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { transform: translate(-140px, 176px) scaleX(-1); opacity: 0; } } .canh-co1 { animation: hv-co-bay 38s linear infinite; } .canh-co2 { animation: hv-co-bay2 52s linear infinite 14s; } /* Ban đêm thì bướm ong đi ngủ, chỉ còn đom đóm */ .buoi-toi .canh-buom, .buoi-toi .canh-ong { opacity: 0; } /* Máy nào bật "giảm chuyển động" thì cho mọi thứ đứng yên */ @media (prefers-reduced-motion: reduce) { .canh-song > g, .canh-buom use { animation: none; } .canh-song { opacity: .9; } } /* ---------- 22. Ao: chưa thuê thợ đào thì chưa có ao ---------- Trước đây cái ao vẽ sẵn trong sân, bé chưa mua gì đã có ao — trong khi chợ vẫn bán "Thuê thợ đào ao". Giờ đào xong mới hiện; chừng nào chưa có ao thì vịt, ngỗng, cánh cụt, hà mã cũng chưa nhận nuôi được (máy chủ chặn, xem hv_thu_can_ao trong inc/nongcu.php). */ .san-ao { display: none; } body.co-ao .san-ao { display: block; } /* ---------- 23. Sắp xếp vườn: kéo cây cối, đồ đạc về chỗ mình thích ---------- Cả màn hình thành tấm bản đồ vườn. Tấm SVG ở đây khai ĐÚNG viewBox và preserveAspectRatio như tranh nền, nên chỗ bé thả trùng khít chỗ món đồ hiện ra sau khi bấm Xong — lệch một chút là bé thấy đồ "nhảy" chỗ. */ /* Xếp dọc: tấm bản đồ chiếm hết phần trên, thanh nút nằm dưới cùng. Trước đây thanh nút đặt đè lên bản đồ nên những món ở mép dưới vườn bị nó che, bé không tài nào chạm tới. */ .sap-vuon { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; } .sap-vuon.an { display: none; } /* Nền mờ để bé thấy rõ mình đang ở chế độ xếp vườn, không phải đang chơi */ .sap-vuon::before { content: ''; position: absolute; inset: 0; background: #0b2b12; opacity: .22; } .sap-canh { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; display: block; touch-action: none; /* kéo trong bản đồ thì đừng cuộn trang theo */ position: relative; z-index: 1; } /* Nền bãi cỏ của tấm bản đồ: "meet" để lọt cả vườn nên quanh nó có chỗ trống, vẽ nền vào cho bé biết đâu là mảnh đất của mình. */ .sap-troi { fill: #cfe9f7; } .sap-nen { fill: #8fce5a; } .sap-thay { fill: none; stroke: #ffffff; stroke-width: 4; stroke-dasharray: 14 10; opacity: .9; } .sap-mon { cursor: grab; } .sap-mon.dang-cam { cursor: grabbing; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); } /* Vòng tròn ở GỐC món đồ: chỗ để cầm. Cây thì cao, lá thì mảnh — không có chỗ cầm rõ ràng thì ngón tay bé bấm mãi không trúng. */ .sap-vong { fill: #ffffff; fill-opacity: .34; stroke: #ffffff; stroke-width: 3; stroke-dasharray: 7 6; } .sap-mon.dang-cam .sap-vong { fill: #ffe680; fill-opacity: .6; stroke: #ffd83d; } .sap-thanh { flex: none; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #ffffff; border-top: 3px solid #e6dccb; display: flex; flex-direction: column; gap: 7px; align-items: center; } .sap-goi { margin: 0; font-size: 14px; font-weight: 800; color: var(--nau); text-align: center; } .sap-nut { display: flex; gap: 10px; width: 100%; max-width: 420px; } .sap-nut .nut-to { flex: 1 1 0; } /* Lúc đang xếp vườn thì khoá cuộn trang cho khỏi vừa kéo vừa trôi màn hình */ body.dang-sap { overflow: hidden; } /* ---------- 24. Lớn lên nhìn thấy được ---------- Thú: --lon = cân nặng hiện tại / cân nặng lúc lớn hết (0 → 1), do JS đặt từ số máy chủ tính. Gà con vẽ bằng nửa gà mái, mỗi ngày nhích lên một chút — chứ không phải cứ mãi một hình rồi đùng một cái đổi. */ /* --dong = hệ số thu nhỏ khi vườn đông (do nhipVuon() trong game.js đặt) */ .con { --lon: 1; transform: translate(-50%, -50%) scale(calc((.78 + var(--sau) * .4) * (.5 + var(--lon) * .5) * var(--dong, 1))); } /* ---------- 25. Vườn đông bạn thú ---------- Bé nuôi vài chục bạn thì cái khó không phải chỗ đứng mà là TÊN: mỗi tên là một viên thuốc trắng rộng gấp đôi con vật, chồng lên nhau thành một mảng trắng. Đông thì giấu tên đi, chạm hay rê chuột vào bạn nào mới hiện tên bạn ấy — vẫn biết đứa nào là đứa nào mà vườn lại thoáng. */ .san-dong .con-ten, .san-dong .con-no { opacity: 0; transition: opacity .18s; } .san-dong .con:hover .con-ten, .san-dong .con:focus .con-ten, .san-dong .con.con-gap .con-ten, .san-dong .con.con-doi .con-ten, .san-dong .con:hover .con-no, .san-dong .con:focus .con-no, .san-dong .con.con-gap .con-no, .san-dong .con.con-doi .con-no { opacity: 1; } /* Bong bóng "đang vui" cũng là một viên thuốc trắng nữa: đàn đông thì tắt, chỉ giữ lại bong bóng KÊU ĐÓI và bong bóng vừa mới nói (lúc bé cho ăn). */ .san-dong .con:not(.con-gap):not(.con-doi) .con-bong:not(.con-bong-moi) { opacity: 0; } .san-dong .con:hover .con-bong, .san-dong .con:focus .con-bong { opacity: 1; } /* Bạn đang được rê tới thì nổi hẳn lên trên đàn */ .san-dong .con:hover, .san-dong .con:focus { z-index: 95 !important; } /* ---------- 26. Lời nhắc "chưa tính thưởng" ---------- Xuống dòng đúng chỗ và tách hẳn khỏi lời giải, để bé đọc ra ngay vì sao trả lời đúng mà ví không nhúc nhích. */ .kq-giaithich.kq-nhac { white-space: pre-line; } /* Trứng / sữa đang chờ thu hoạch hiện ngay cạnh bạn thú, khỏi phải mở hộp ra xem */ .con-sp { position: absolute; right: -14px; bottom: 2px; font-style: normal; font-size: .42em; line-height: 1; background: #fff; border-radius: 999px; padding: 3px 5px; box-shadow: 0 2px 4px rgba(0,0,0,.25); animation: sp-nhun 1.6s ease-in-out infinite; } .con-sp b { font-size: 11px; margin-left: 2px; color: var(--nau); } @keyframes sp-nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Quả chín trên cây khẽ đung đưa để bé để ý mà ra hái */ .canh-qua { animation: qua-dua 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes qua-dua { 0%, 100% { opacity: 1; } 50% { opacity: .82; } } .nut-hai { margin-top: 8px; background: linear-gradient(180deg, #ff9f43, #e8722a); } .thu-hoach { gap: 8px; } /* ================================================================== 28. CHƠI CỜ VỚI BẠN — cờ vua và cờ ca-rô ------------------------------------------------------------------ Bàn cờ phải vừa MÀN HÌNH ĐIỆN THOẠI mà ngón tay bé vẫn chạm trúng ô: cạnh bàn tính bằng min(chiều rộng, chiều cao) nên xoay ngang xoay dọc gì cũng thấy trọn bàn, không phải cuộn. Ô cờ vua ít nên rộng rãi; ô ca-rô 15×15 nhỏ hơn, bù lại bé chỉ cần chạm vào ô trống. ================================================================== */ /* Đang mở bàn thì cất tiêu đề + lời giới thiệu để bàn cờ vừa trọn màn hình */ #trang-choi.dang-ban > .tieu-de, #trang-choi.dang-ban > .shop-ghichu { display: none; } .co-tao { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; } .co-tao-nut { flex: 1 1 200px; background: linear-gradient(180deg, #7c6bff, #5a45e0); } .co-ds { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .co-the { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 3px 0 rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 6px; } .co-the b { font-size: 16px; } .co-the i { font-style: normal; color: #6b6b6b; font-size: 14px; } .co-the .nut-nho { align-self: flex-start; } .co-the.toi-luot { box-shadow: 0 0 0 3px var(--xanhla), 0 3px 0 rgba(0,0,0,.12); } .co-the.xong { opacity: .8; } .co-the-nut { display: flex; gap: 6px; flex-wrap: wrap; } .co-the.moi { box-shadow: 0 0 0 3px var(--vang), 0 3px 0 rgba(0,0,0,.12); } .co-the.online b { display: flex; align-items: center; gap: 6px; } .cham-online { width: 9px; height: 9px; border-radius: 50%; background: var(--xanhla); flex: none; box-shadow: 0 0 0 3px rgba(6,185,107,.25); animation: cham-tho 1.8s ease-in-out infinite; } @keyframes cham-tho { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .co-ru[disabled] { opacity: .55; cursor: default; } /* Chấm đỏ trên tab Chơi cờ: có người rủ, hoặc tới lượt bé đi */ .tab-co { position: relative; } .tab-co.co-bao::after { content: attr(data-bao); position: absolute; top: 2px; right: 12%; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--do); color: #fff; font-size: 10px; line-height: 16px; box-shadow: 0 0 0 2px #fff; } .co-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .co-vs { font-weight: 700; } .co-loi { margin: 4px 0; font-size: 16px; } .co-loi.toi-luot { color: var(--xanhla); font-weight: 700; } .co-vai { margin: 0 0 8px; color: #6b6b6b; font-size: 14px; } .co-nut { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } /* Cả bàn cờ là một lưới vuông, cạnh bằng nhau nên ô không bao giờ méo */ .co-khung { display: grid; width: min(92vw, 62vh, 520px); aspect-ratio: 1; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 10px 24px rgba(0,0,0,.18); touch-action: manipulation; } .co-vua { grid-template-columns: repeat(8, 1fr); } .co-caro { grid-template-columns: repeat(var(--canh, 15), 1fr); background: #f2c98a; gap: 1px; padding: 1px; } .co-o { all: unset; display: grid; place-items: center; cursor: pointer; font-size: min(7.4vw, 5vh, 42px); line-height: 1; position: relative; } .co-vua .co-o.sang { background: #f0d9b5; } .co-vua .co-o.toi { background: #b58863; } .co-caro .co-o { background: #fbe3bd; font-size: min(4.4vw, 3vh, 22px); } .co-o:focus-visible { outline: 3px solid var(--vang); outline-offset: -3px; } /* Quân đặc tô màu + viền: ô sáng hay ô tối cũng nhìn rõ cả hai bên. TÊN LỚP phải có tiền tố "q-": lớp .trang trong game này là TRANG (mỗi tab một .trang, chỉ .dang-mo mới hiện) — đặt tên quân trắng là .trang thì cả tám quân trắng bị display:none, bàn cờ chỉ còn quân đen. Đã dính đúng như vậy. */ .co-quan { pointer-events: none; } .co-quan.q-trang { color: #fff; -webkit-text-stroke: 1.4px #3a2716; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0,0,0,.45); } .co-quan.q-den { color: #241a12; -webkit-text-stroke: 1.1px #f3e4cd; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .co-quan.q-x { color: #e8453c; font-weight: 900; } .co-quan.q-o { color: #1f6fd0; font-weight: 900; } /* Nước vừa đi tô vàng để bé nhìn ra ngay bạn ấy vừa đi đâu */ .co-o.vua-di::after { content: ''; position: absolute; inset: 0; background: rgba(255,216,61,.45); pointer-events: none; } .co-o.dang-chon { box-shadow: inset 0 0 0 4px var(--vang); } /* Chấm tròn = ô đi được, vòng tròn = ô ăn được quân */ .co-o.di-duoc::before { content: ''; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(6,185,107,.55); pointer-events: none; } .co-o.an-duoc { box-shadow: inset 0 0 0 4px rgba(232,69,60,.75); } .co-o.thang-day { background: #ffe9a8 !important; box-shadow: inset 0 0 0 2px #e8a33c; } /* Hộp hỏi phong cấp cho con tốt đi tới đích */ .co-phong-nen { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.45); padding: 16px; } .co-phong { background: #fff; border-radius: 18px; padding: 18px; max-width: 380px; text-align: center; } .co-phong-ds { display: flex; gap: 8px; justify-content: center; margin: 12px 0; flex-wrap: wrap; } .co-phong-ds button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #f0d9b5; font-size: 13px; min-width: 64px; } .co-phong-ds button span { font-size: 30px; line-height: 1; } .co-phong-ds button:hover { background: var(--vang); } /* ================================================================== 29. CỬA SỔ CHAT NHỎ ------------------------------------------------------------------ Nổi ở góc phải, NGAY TRÊN thanh tab chứ không đè lên — bé bấm nhầm tab là bực. Thu lại chỉ còn một cái nút tròn; mở ra cũng chỉ cao bằng một phần màn hình, vì bé đang chơi cờ hay đang ngắm vườn mới là chính. ================================================================== */ .ts { position: fixed; right: 10px; z-index: 45; bottom: calc(78px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .ts-nut { all: unset; cursor: pointer; position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.16); } .ts-nut:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.14); } .ts.dang-mo .ts-nut { display: none; } .ts-dem { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--do); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; line-height: 18px; box-shadow: 0 0 0 2px #fff; } /* Có người gọi tên bé thì cái nút nảy lên cho bé để ý */ .ts.ts-keu .ts-nut { animation: ts-nay .5s ease 3; } @keyframes ts-nay { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px) scale(1.06); } } .ts-hop { /* Cao tối đa một nửa màn hình: đang chơi cờ mà cửa sổ chat che hết bàn thì bé phải đóng ra đóng vào mới đi được nước. */ width: min(330px, calc(100vw - 20px)); max-height: 52vh; background: #fff; border-radius: 16px; box-shadow: 0 6px 0 rgba(0,0,0,.1), 0 12px 28px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; } .ts-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--tim); color: #fff; font-size: 14px; } .ts-dong { all: unset; cursor: pointer; padding: 2px 6px; border-radius: 8px; font-size: 15px; } .ts-dong:hover { background: rgba(255,255,255,.2); } .ts-ds { height: min(190px, 26vh); overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: #f7f5ff; } .ts-cau { background: #fff; border-radius: 12px; padding: 6px 9px; font-size: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.06); align-self: flex-start; max-width: 92%; transition: opacity .55s ease, transform .55s ease; } .ts-cau.cua-toi { align-self: flex-end; background: #efe7ff; } .ts-cau.goi-toi { box-shadow: 0 0 0 2px var(--vang), 0 2px 0 rgba(0,0,0,.06); } .ts-cau.la-goi { background: #fff6d8; } /* Hết giờ thì câu mờ dần rồi biến mất — không lưu lại ở đâu cả */ .ts-cau.tan { opacity: 0; transform: translateY(-6px); } .ts-ai { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--tim); } .ts-noi { display: block; word-break: break-word; } .ts-mau { display: flex; gap: 5px; overflow-x: auto; padding: 7px 8px; background: #fff; } .ts-mau button { all: unset; cursor: pointer; flex: none; font-size: 12px; white-space: nowrap; padding: 5px 9px; border-radius: 999px; background: #f0ecff; color: #4b3a7a; } .ts-mau button:hover { background: var(--vang); color: #6b4708; } .ts-go { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #eee; } .ts-o { position: relative; flex: 1; } .ts-o input { width: 100%; box-sizing: border-box; border: 2px solid #e6e1f5; border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 15px; /* 15px trở lên thì iPhone khỏi tự phóng to */ } .ts-o input:focus { outline: none; border-color: var(--tim); } .ts-gui { all: unset; cursor: pointer; width: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--tim); color: #fff; font-size: 17px; } /* Bảng gợi ý tên khi bé gõ "@" */ .ts-goi-y { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; background: #fff; border-radius: 12px; max-height: 168px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.22); z-index: 2; } .ts-goi-y li { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 9px; cursor: pointer; font-size: 14px; } .ts-goi-y li:hover, .ts-goi-y li.chon { background: #f0ecff; } .ts-goi-y li i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--xanhla); } .cham-online.tat { background: #c9c9c9; box-shadow: none; animation: none; } /* Đầu bảng gợi ý và dòng báo vắng bạn: không bấm được, nên phải nhìn ra ngay là KHÁC với mấy dòng tên bấm được ở dưới. */ .ts-goi-y li.ts-goi-dau, .ts-goi-y li.ts-goi-trong { cursor: default; font-size: 12.5px; font-weight: 700; color: #8a7a6c; padding: 6px 9px 4px; line-height: 1.45; } .ts-goi-y li.ts-goi-dau:hover, .ts-goi-y li.ts-goi-trong:hover { background: transparent; } .ts-goi-y li.ts-goi-trong { color: #9a6b4f; } @media (max-width: 560px) { .ts { right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); } .ts-ds { height: min(160px, 22vh); } } /* ================================================================== 31. GAME ĐỐ HOA QUẢ (nhúng bằng iframe) ------------------------------------------------------------------ App rời ở thư mục hoaqua/, tự lo giao diện của nó, nên ở đây chỉ cần cho nó một cái khung cao đúng phần màn hình còn trống (trừ thanh trên và thanh tab), và một màn khoá giống hệt màn khoá ở vườn cho nhất quán. ================================================================== */ #trang-hoaqua { width: 100%; max-width: none; } .hq-frame { display: block; width: 100%; border: 0; border-radius: 16px; height: calc(100vh - 150px); min-height: 420px; background: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.1), 0 12px 28px rgba(0,0,0,.14); } .hq-khoa { background: #fff; border-radius: 22px; padding: 26px 20px; text-align: center; max-width: 360px; margin: 24px auto; box-shadow: 0 8px 0 rgba(0,0,0,.12), 0 16px 34px rgba(0,0,0,.2); } .hq-khoa-hinh { font-size: 44px; line-height: 1; } .hq-khoa h3 { margin: 10px 0 6px; font-size: 21px; color: #4b3a7a; } .hq-khoa p { margin: 0 0 14px; font-size: 15px; } .hq-khoa .nut-to { width: 100%; background: linear-gradient(180deg, #7ee08a, var(--xanhla)); } @media (max-width: 560px) { .hq-frame { height: calc(100vh - 128px); border-radius: 12px; } } /* ============================================================ 32. CHỮ DẪN DỄ ĐỌC — nền đặc thay cho chữ trắng trên tranh nền Cùng một bệnh đã chữa cho .shop-trong ở mục 17: chữ trắng đặt thẳng lên trời sáng thì đọc rất mệt, và dấu tiếng Việt (ề, ữ, ố) mảnh nên mất hút trước cả chữ. Cho lên tấm thẻ nền đặc, chữ nâu đậm, to hơn, giãn dòng rộng ra cho dấu có chỗ thở. ============================================================ */ .shop-ghichu { color: #5a4a3a; text-shadow: none; font-size: 16px; font-weight: 600; line-height: 1.62; background: linear-gradient(180deg, #ffffff, #fff7e8); border: 3px solid #eadfc7; border-radius: 18px; box-shadow: var(--bong-the); max-width: 660px; margin: 2px auto 14px; padding: 12px 16px; } .shop-ghichu b, .shop-ghichu strong { color: #3f2f22; } /* Tên từng gian hàng: viên thuốc nền kem, chữ nâu — vừa nổi vừa điệu. inline-block để viên thuốc ôm đúng chữ chứ không kéo dài hết hàng. */ .shop-khu { display: inline-block; font-size: 19px; line-height: 1.4; color: #4b3a2a; text-shadow: none; background: linear-gradient(180deg, #ffffff, #ffeec9); border: 3px solid #f0d9a4; border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.1); padding: 7px 18px; margin: 14px 0 10px; letter-spacing: .2px; } /* Chữ trong thẻ hàng: nhích to lên cho dễ đọc trên điện thoại */ .shop-ten { font-size: 16px; line-height: 1.35; } .shop-mota { font-size: 13.5px; line-height: 1.5; color: #7a6a5c; } .shop-co { font-size: 12px; line-height: 1.35; padding: 4px 9px; } .goi-nut i { font-size: 13px; } /* Dấu tiếng Việt xếp hai tầng (ề, ữ, ố, ậ) cao hơn chữ Latinh, nên chỗ nào cắt chữ hoặc ép dòng sát quá là mất dấu. Nới cho đủ chỗ. */ .tab { line-height: 1.4; padding-top: 7px; } .the-shop { line-height: 1.45; } /* Trang Học bài: dòng ngày tháng và nhãn chọn tuần cũng phải đọc được */ .sgk-ngay { font-size: 15px; padding: 8px 18px; } .sgk-chon { font-size: 15.5px; color: #4a3726; text-shadow: 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff; } @media (max-width: 560px) { .tieu-de { font-size: 23px; } .shop-ghichu { font-size: 15px; padding: 11px 13px; } .shop-khu { font-size: 17px; padding: 6px 14px; } .sgk-ngay { font-size: 14px; } } /* ============================================================ 33. BÉ BÁO CÂU HỎI SAI Nút báo phải THẤY ĐƯỢC nhưng không được to bằng nút sang câu tiếp — việc chính của bé vẫn là học, báo sai chỉ là thỉnh thoảng. ============================================================ */ .nut-bao { display: block; margin: 10px auto 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; color: #9a6b4f; text-decoration: underline; text-underline-offset: 3px; padding: 6px 10px; border-radius: 12px; } .nut-bao:hover { color: var(--do); background: #fff3f4; text-decoration: none; } .bao-goiy { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 10px; } .bao-goiy .nut-nho { font-size: 13.5px; } .bao-o { width: 100%; box-sizing: border-box; border: 3px solid #e6dfd2; background: #fbf8f1; border-radius: 16px; padding: 12px 14px; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--chu); outline: none; resize: vertical; line-height: 1.5; } .bao-o:focus { border-color: var(--tim); background: #fff; box-shadow: 0 0 0 4px rgba(155,93,229,.18); } /* Mã chống spam: một phép tính, để ngay dưới ô viết */ .bao-ma { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; font-size: 15.5px; font-weight: 700; color: #5a4a3a; } .bao-ma b { font-size: 19px; color: var(--tim); letter-spacing: .5px; background: #f5efff; border-radius: 12px; padding: 4px 12px; } .bao-ma input { width: 92px; border: 3px solid #e6dfd2; background: #fbf8f1; border-radius: 14px; padding: 9px 12px; font-family: inherit; font-size: 18px; font-weight: 800; color: var(--chu); outline: none; text-align: center; } .bao-ma input:focus { border-color: var(--tim); background: #fff; box-shadow: 0 0 0 4px rgba(155,93,229,.18); } /* Dòng giới thiệu ở màn hình đăng nhập: game miễn phí, làm cho con và các bạn */ .cong-loi-nhan { margin: 14px 0 6px; padding: 13px 16px; background: linear-gradient(180deg, #ffffff, #fff7e8); border: 3px solid #eadfc7; border-radius: 18px; font-size: 14.5px; line-height: 1.62; color: #5a4a3a; text-align: left; } .cong-loi-nhan p { margin: 0 0 8px; } .cong-loi-nhan p:last-child { margin-bottom: 0; } .cong-loi-nhan b { color: #3f2f22; } /* ============================================================ 34. LỚP CỦA BÉ Bé chỉ gặp câu của đúng lớp mình, nên con số này phải nhìn thấy được ngay cạnh tên — chứ không phải giấu trong trang hồ sơ. ============================================================ */ .the-lop { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #fff0d6; border: 2px solid #f0d9ae; font-size: 12.5px; font-weight: 800; color: #8a6224; white-space: nowrap; vertical-align: middle; } /* Ô chọn năm sinh ở màn đăng nhập: cùng dáng với các ô nhập khác */ .cong-form select { width: 100%; box-sizing: border-box; border: 3px solid #e6dfd2; background: #fbf8f1; border-radius: 14px; padding: 11px 13px; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--chu); outline: none; } .cong-form select:focus { border-color: var(--tim); background: #fff; } /* ============================================================ 35. TAB BẠN BÈ — ai đang chơi ngay lúc này ============================================================ */ /* Chấm XANH (tab Chơi cờ dùng chấm ĐỎ): đỏ là "có việc cần bé làm ngay", còn đây chỉ là tin vui "có bạn đang chơi" — hai thứ khác nhau thì màu cũng phải khác, không thì bé chạy đi xem rồi hụt hẫng. */ .tab-ban { position: relative; } .tab-ban.ban-bao::after { content: attr(data-bao); position: absolute; top: 2px; right: 12%; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--xanhla); color: #fff; font-size: 10px; line-height: 16px; box-shadow: 0 0 0 2px #fff; } .ban-lop { display: inline-block; background: #ede4ff; color: #6a3fbf; border-radius: 999px; padding: 1px 9px; margin-right: 6px; font-weight: 800; font-size: 12.5px; } /* Bạn đã rời máy: vẫn đọc được nhưng nhạt hơn, để mắt bé rơi vào nhóm đang chơi trước — đó mới là nhóm rủ được. */ .co-the.ban-roi { opacity: .74; } /* ---------- CHÍN tab trên màn hình nhỏ ---------- Thêm tab Bạn bè là thanh dưới có chín nút; màn 375px chia ra mỗi nút còn chừng 39px. Ba cái tên tám chữ (Vườn thú, Cửa hàng, Xếp hạng) không còn chỗ, mà cắt cụt thành "Vườn t…" thì bé đọc ra cái gì? Nên mỗi tab dài mang sẵn HAI tên: tên đầy đủ cho màn rộng, tên ngắn cho màn hẹp. Đổi tên bằng CSS chứ không bằng JavaScript — xoay ngang xoay dọc điện thoại là tên đổi theo ngay, không phải đợi mã nào chạy. Cỡ chữ 11px vẫn giữ nguyên: bóp xuống 9px thì vừa hết, nhưng chữ bé tí như thế thì để làm gì. */ .tab em { font-style: normal; } .t-ngan { display: none; } @media (max-width: 560px) { .t-dai { display: none; } .t-ngan { display: inline; } .tab { padding-left: 0; padding-right: 0; } } /* ============================================================ 36. MÀN ĐĂNG NHẬP — BỐ CỤC HAI CỘT, KHÔNG CẮT MẤT PHẦN ĐẦU ------------------------------------------------------------ Hai lỗi đã đo được trên máy thật (màn 1920 × 910): 1. Thẻ đăng nhập cao 1 346 px trong khi khung nhìn chỉ 910 px. Khung ngoài dùng `place-items: center`, mà một khung CUỘN ĐƯỢC căn giữa như thế thì phần tràn ra phía TRÊN không cuộn tới được — bé mở trang ra là thấy form cụt đầu, cái tên game và hai nút "Đăng nhập / Tạo tài khoản" biến mất. Chữa bằng `margin: auto 0` trên chính tấm thẻ: còn chỗ thì nó tự căn giữa, hết chỗ thì nó tụt về đầu khung và cuộn được đủ hai phía. 2. Cả trang chỉ là MỘT cột rộng 440 px giữa màn hình rộng 1920 px. Màn rộng thì tách làm hai cột: trái là giới thiệu và lời nhắn (thứ đọc một lần), phải là phần bé phải làm (tab, form, nút). Thẻ hạ xuống còn khoảng 760 px là vừa một màn hình, không phải cuộn nữa. Màn hẹp giữ nguyên một cột như cũ, thứ tự đọc vẫn là giới thiệu → form → lời nhắn, nên điện thoại không đổi gì. ============================================================ */ .man-cong { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* KHÔNG dùng center: tràn trên là mất luôn */ padding: 18px 14px 32px; } .man-cong > * { margin: auto 0; /* còn chỗ thì căn giữa, hết chỗ thì cuộn được */ /* KHÔNG ĐƯỢC BỎ. Con của khung flex dọc mặc định `flex-shrink: 1`, nên thẻ cao hơn màn hình sẽ bị BÓP LẠI cho vừa; mà thẻ có `overflow: hidden` để giữ vệt nắng ở góc, nên phần bị bóp không tràn ra mà bị CẮT CỤT. Đã dính thật: nút "📖 Hướng dẫn chơi" ở cuối cột phải hiện ra đúng một nửa. */ flex-shrink: 0; } .cong-hop { display: grid; grid-template-areas: "dau" "viec" "phu" "chan"; align-content: start; padding: 20px 20px 22px; } .cong-dau { grid-area: dau; } .cong-viec { grid-area: viec; } .cong-phu { grid-area: phu; } .cong-chan { grid-area: chan; } .cong-phu .cong-nut-hd { width: 100%; margin-top: 10px; } /* Khối giới thiệu: gọn lại vài pixel cho phần việc được nhiều chỗ hơn */ .cong-dau .cong-mota { margin-bottom: 14px; } /* ---------- Màn rộng: hai cột ---------- */ @media (min-width: 900px) { .cong-hop { width: min(880px, 100%); grid-template-columns: 1fr 1fr; grid-template-areas: "dau viec" "phu viec" "chan viec"; /* Các hàng trên PHẢI ôm sát nội dung. Để cả ba hàng là `auto` thì chiều cao của cột phải (nó bắc qua cả ba hàng) được chia đều xuống, hàng trên phình ra và cột trái hở một mảng trắng giữa lời giới thiệu với khung lời nhắn. Hàng cuối nhận `1fr` để nuốt phần dư ấy. */ grid-template-rows: auto auto 1fr; column-gap: 26px; align-content: start; padding: 24px 26px 26px; } /* Cột phải là phần bé phải làm nên cho nó một vạch ngăn nhẹ, đủ để mắt biết đây là hai việc khác nhau mà không cần kẻ khung. */ .cong-viec { border-left: 3px solid #f2e9d6; padding-left: 26px; align-self: stretch; } .cong-dau { padding-top: 4px; } .cong-phu { margin-top: 2px; } .cong-chan { margin-top: 14px; align-self: start; } .cong-loi-nhan { margin-top: 0; } /* Cột hẹp hơn thẻ cũ nên tên game hạ một bậc cho khỏi xuống dòng xấu */ .cong-ten { font-size: 32px; } .cong-ten b { font-size: 37px; } } /* ---------- Màn rất rộng: thẻ nở thêm chút nữa ---------- */ @media (min-width: 1200px) { .cong-hop { width: min(960px, 100%); } } /* ---------- Hàng chọn hình đại diện ---------- Mười hai hình xếp 6 cột thành hai hàng. Ô vuông đều nhau (aspect-ratio) nên thêm hay bớt hình cũng không vỡ hàng, và không bao giờ có ô dẹt. */ .avatar-ds { gap: 7px; } .avatar-ds button { aspect-ratio: 1; display: grid; place-items: center; padding: 0; line-height: 1; } /* Ô nhập và ô chọn cùng một chiều cao, để cột form nhìn thành một khối đều */ .cong-form input, .cong-form select { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; } .cong-form { gap: 12px; } .cong-form label { gap: 4px; } /* Nút gửi và nút hướng dẫn: cách nhau vừa đủ, không dính vào nhau */ .cong-viec .cong-nut-hd { margin-top: 10px; } .cong-viec .cong-ghi { margin-top: 10px; } /* ---------- Màn hình thấp (laptop 1366×768, cửa sổ không mở hết) ---------- Chỉ bớt KHOẢNG TRẮNG và hạ cỡ chữ trang trí; cỡ chữ của ô nhập và của nút giữ nguyên, vì đó là thứ bé phải đọc và phải bấm trúng. Vẫn không vừa thì cứ để cuộn — ép cho vừa bằng cách thu nhỏ hết mọi thứ là bé khó đọc. */ @media (max-height: 870px) and (min-width: 900px) { .cong-thu { font-size: 32px; } .cong-ten { font-size: 27px; margin-top: 0; } .cong-ten b { font-size: 32px; } .cong-mota { font-size: 14px; margin-bottom: 10px; } .cong-hop { padding-top: 18px; padding-bottom: 20px; } .cong-loi-nhan { font-size: 13.5px; line-height: 1.55; padding: 11px 13px; } .cong-form { gap: 10px; } .cong-form input, .cong-form select { padding: 10px 13px; } .cong-chan { margin-top: 10px; } } /* ============================================================ 37. TẠO TÀI KHOẢN XONG — BÁO LẠI TÊN ĐĂNG NHẬP VÀ MẬT KHẨU ------------------------------------------------------------ Tạo xong mà vào thẳng vườn thú thì bé chẳng kịp biết mình vừa tạo cái gì. Màn này chặn một nhịp. Hai dòng quan trọng nhất — tên đăng nhập và mật khẩu — phải TO, RÕ, và dùng phông đều nét (mono) để không lẫn số 0 với chữ O, chữ l với số 1. Bố mẹ chép tay được là đạt. ============================================================ */ .cong-xong { width: min(440px, 100%); background: linear-gradient(180deg, #fffefb 0%, #fff7e8 100%); border: var(--vien); border-radius: 34px; padding: 24px 22px 26px; box-shadow: var(--bong-noi), 0 30px 60px rgba(31,26,20,.28); text-align: center; animation: nhayVao .5s cubic-bezier(.2,1.4,.5,1) both; } .xong-avatar { display: inline-block; font-size: 56px; line-height: 1; filter: drop-shadow(0 5px 5px rgba(0,0,0,.18)); animation: nhunThu 2.6s ease-in-out infinite; } .xong-tieu { margin: 6px 0 2px; font-size: 30px; font-weight: 800; color: var(--tim); text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(155,93,229,.28); } .xong-chao { margin: 0 0 16px; font-size: 16px; color: #6b5a4c; } .xong-chao b { color: var(--cam); } /* Tấm thẻ ghi tài khoản */ .xong-the { background: #fff; border: 3px solid #eadfc7; border-radius: 20px; padding: 14px 15px 15px; text-align: left; } .xong-nhac { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; font-weight: 700; color: #7a6552; } .xong-dong { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 9px 0; border-top: 2px dashed #f0e6d2; /* Mật khẩu dài thì tụt hẳn xuống dòng dưới của chính nó, chứ đừng cắt giữa chừng để rơi lại một chữ cái lẻ loi ở dòng sau — nhìn tưởng gõ thừa. */ flex-wrap: wrap; } .xong-dong:first-of-type { border-top: 0; } .xong-dong span { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: #9c8b7c; } .xong-dong b { /* Phông đều nét: bé và bố mẹ chép tay không lẫn 0 với O, l với 1. `word-break` để mật khẩu dài không đẩy tấm thẻ tràn ra ngoài. */ font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; font-size: 19px; font-weight: 800; color: #3f2f22; text-align: right; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; /* chỉ bẻ khi thật sự không còn cách nào khác */ } /* Dòng lớp không phải thứ phải chép tay nên để phông thường — phông đều nét giãn chữ rất rộng, "lớp 4" nhìn như bị hở một khoảng giữa. */ .xong-dong.xong-lop-dong b { font-family: inherit; font-size: 17px; } .xong-chep { width: 100%; margin-top: 12px; white-space: normal; /* lời báo "máy không cho chép" dài, phải xuống dòng được */ line-height: 1.4; } .xong-canh { margin: 14px 0 16px; font-size: 13.5px; line-height: 1.55; color: #8a7263; } .xong-canh b { color: var(--do); } .cong-xong .nut-to { width: 100%; } /* Màn rộng: tấm thẻ này ít chữ nên cứ để một cột, chỉ nới ra chút cho cân với thẻ đăng nhập hai cột vừa rời khỏi màn hình. */ @media (min-width: 900px) { .cong-xong { width: min(500px, 100%); padding: 28px 30px 30px; } .xong-dong b { font-size: 20px; } } /* Khẩu hiệu ngay dưới tên game ở màn đăng nhập. Để NHỎ và nhạt hơn tên: nó là câu phụ, đứng đây chỉ để người mới hiểu ngay game này làm gì — to bằng tên thì thành hai cái tên, đọc rối. */ .cong-slogan { margin: 2px 0 12px; text-align: center; font-size: 17px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #9c8b7c; } /* ============================================================ 38. MÀN "ĐI NGỦ" — giờ ngủ trưa, giờ ngủ tối, hết giờ trong ngày ------------------------------------------------------------ Khác hẳn mọi hộp thoại khác trong game ở ba điểm, và cả ba đều cố ý: · PHỦ KÍN (position: fixed, inset: 0) chứ không phải cái hộp nổi giữa màn. Hộp nổi thì vẫn thấy vườn thú nhấp nháy đằng sau, bé cứ ngồi nhìn mãi. · KHÔNG có nút đóng, bấm ra ngoài cũng không tắt. Tắt được là bằng không có. · Màu ĐÊM (xanh tím đậm) chứ không phải màu kem như cả game. Bé nhìn cái là hiểu ngay "trời tối rồi" trước cả khi đọc chữ. ============================================================ */ .man-nghi { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px 16px; overflow-y: auto; background: linear-gradient(170deg, #2b2050 0%, #1b1838 55%, #120f28 100%); animation: nghiHien .45s ease; } .man-nghi.an { display: none; } @keyframes nghiHien { from { opacity: 0; } to { opacity: 1; } } /* Trang bên dưới không cuộn được nữa khi màn này đang phủ */ body.dang-nghi { overflow: hidden; } .nghi-the { width: min(440px, 100%); margin: auto 0; /* đứng giữa mà phần đầu vẫn với tới được khi màn thấp */ text-align: center; color: #fff; } .nghi-hinh { font-size: 76px; line-height: 1; animation: nghiTho 3.4s ease-in-out infinite; } @keyframes nghiTho { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.05); } } .nghi-tieu { margin: 14px 0 10px; font-size: 28px; font-weight: 800; color: #ffd83d; } .nghi-loi { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: #e6e1ff; } .nghi-mo { margin: 0 0 18px; font-size: 16px; font-weight: 800; color: #9be7ff; } /* Bảng ba mốc giờ: bày ra để bé đọc dần mà thuộc lịch của mình, chứ không phải mỗi lần bị chặn lại ngạc nhiên một lần. Mốc đang chặn thì sáng lên. */ .nghi-bang { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 12px 14px; margin-bottom: 18px; text-align: left; } .nghi-dong { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 15.5px; color: #cfc9ee; } .nghi-dong b { flex: 1; font-weight: 700; } .nghi-dong i { font-style: normal; font-weight: 800; color: #fff; white-space: nowrap; } .nghi-dong-dam { background: rgba(255,216,61,.16); color: #ffe89a; } .nghi-dong-dam i { color: #ffd83d; } .nghi-da { margin: 8px 2px 0; font-size: 14px; color: #a9a2cc; text-align: center; } .nghi-da b { color: #fff; } /* Nút thoát DÍNH ĐÁY màn hình, không trôi theo chữ. Đo thật trên điện thoại nằm ngang (740 × 400): tấm thẻ cao 452px trong khung cao 400px, nên mép dưới cái nút nằm ở 472px — thấp hơn đáy màn 72px. Bé phải biết là cuộn được thì mới tìm ra nút, mà bé lớp 1 thì không biết. Thu nhỏ chữ chỉ chữa được đúng một cỡ màn; dính đáy thì màn nào cũng thấy nút, lời nhắc có dài thêm bao nhiêu cũng không đẩy nó đi đâu được. Dải chuyển màu ở đây không phải để cho đẹp: nút dính đáy thì chữ chạy LUỒN XUỐNG DƯỚI nó, mà cắt bằng một mép thẳng thì dòng chữ bị chém ngang trông như màn hình lỗi. Mờ dần thì mắt hiểu ngay là còn chữ ở phía dưới. */ .nghi-chan { position: sticky; bottom: 0; padding: 22px 0 2px; background: linear-gradient(to bottom, rgba(18,15,40,0), rgba(18,15,40,.96) 42%); } .nghi-ra { width: 100%; } /* Màn thấp (điện thoại nằm ngang): thu nhỏ cho vừa, đừng để nút bị đẩy khuất — nút thoát mà với không tới thì bé kẹt lại trong chính cái màn báo đi ngủ. */ @media (max-height: 560px) { .nghi-hinh { font-size: 50px; } .nghi-tieu { font-size: 22px; margin: 10px 0 8px; } .nghi-loi { font-size: 15px; margin-bottom: 10px; } .nghi-bang { padding: 8px 10px; margin-bottom: 12px; } .nghi-dong { padding: 5px 8px; font-size: 14.5px; } }