/* EDUZO - lop giao dien cua ba vo con, bo me, thay co (buong lai co qt.css rieng). Tu Design System 1.0 (24/09/2026): tep nay nap SAU `ez/eduzo.css` va `ez/eduzo-khung.css`, va chi goi token `--ez-*` (qua bi danh ngay duoi). Bo chu: Nunito cho tieu de va con so, Lexend cho than chu (`chu/chu.css`). */ :root { /* ==== DESIGN SYSTEM 1.0 (24/09/2026) ======================================= Tu ban 1.0, MOI mau, co chu, khe, bo goc cua tep nay la BI DANH tro ve token `--ez-*` trong `app/ez/eduzo.css` (sinh tu `noi-dung/eduzo-tokens.json`, nguon su that DUY NHAT; `thu/soat-token.mjs` do hai ben). Ten cu giu lai de than tep va ma JS khong phai doi mot luot; gia tri thi CHI song o token. CAM go ma mau, co chu, khe trong than tep: goi `--ez-*` (hoac bi danh o day). `UI-UX.md` 1.0 (cam, navy, Be Vietnam Pro) da bi thay hoan toan. */ /* ---- mau: be mat va muc ---- */ --nen: var(--ez-nen-trang); --mat: var(--ez-nen-the); --muc: var(--ez-muc-chinh); --muc-nhe: var(--ez-muc-phu); --vien: var(--ez-vien-nhat); --trang: var(--ez-mau-trang); --tren-muc: var(--ez-muc-tren-dam); /* ---- mau: hanh dong (tim muc). CHI tren thu bam duoc (qc.md cau 9). ---- */ --nhan: var(--ez-hanh-dong-nen); --nhan-dam: var(--ez-hanh-dong-nen); --nhan-nen: var(--ez-hanh-dong-nhat); --chon-nen: var(--ez-hanh-dong-nhat); /* ---- mau: trang thai hoc (dung / sai / can on) ---- */ --dung: var(--ez-hoc-dung-dam); --dung-nen: var(--ez-hoc-dung-nen); --sai: var(--ez-hoc-sai-dam); --sai-nen: var(--ez-hoc-sai-nen); --on: var(--ez-hoc-can-on-dam); --on-nen: var(--ez-hoc-can-on-nen); --cho-nen: var(--ez-he-thong-canh-bao-nen); --cho-muc: var(--ez-he-thong-canh-bao-dam); /* ---- thang khe 4px (khe.*) ---- */ --moc-o: var(--ez-khe-32); --chang-dem: var(--ez-khe-16); /* ---- bo goc (bo.* va vai.bo-*) ---- */ --bo-nho: var(--ez-bo-10); --bo-to: var(--ez-bo-20); --bo-tron: var(--ez-bo-tron); } /* ---- BO CUC MAC DINH CUA NUT (khong phai hinh thanh phan) ---------------------- Nut trong vo trai het khung tru khi man noi khac; nut nghe dung le trai. Do uu tien 0 (`:where`) de moi luat bo cuc cua man thang ma khong can nang. Hinh nut (EzNut) chi o `ez/ez.css`. */ :where(.ez-nut){ width: 100%; } /* G2 luot 4 (14/10): nut o vo con TRAI HET be ngang (dong tren), nen le am -8px cua nut chu (ez.css, danh cho nut chu rong vua chu) day ca nut lech trai 8px ("Quay lai", "Thoi, de sau"). Nut chu khong `--nho` la nut trai ngang: bo le am. */ .ez-nut--chu:not(.ez-nut--nho) { margin-inline: 0; } :where(.nut--nghe){ margin-left: auto; flex: 0 0 auto; } /* ---- THAM SO THEO VAI: doc tu token vai.* (ez/eduzo.css khai theo data-vai) -- `:root` khong mang data-vai la vai CON. Moi so o day la bi danh; doi con so thi doi `noi-dung/eduzo-tokens.json`, khong doi o day. */ :root, [data-vai] { --cham: var(--ez-vung-cham); --bo: var(--ez-bo-the); --bo-goc: var(--ez-bo-the); --bo-nut: var(--ez-bo-nut); --khe-khoi: var(--ez-khe-giua-khoi); --khe-trong-khoi: var(--ez-khe-trong-khoi); --khe-truoc-hanh-dong: var(--ez-khe-ket-luan); --day-dai-vai: 3px; /* DS 1.0: dai nhan vai 3px duoi thanh dinh (EzThanhDinh) */ --mau-vai: var(--ez-vai-mau); --nen-nut-chinh: var(--ez-hanh-dong-nen); --chu-ho: var(--ez-phong-than); --chu-ho-de: var(--ez-phong-tieu-de); /* thang chu 10 bac (chu.*), khong nhan he so kho man: DS 1.0 dat co theo VO */ --chu-nho: var(--ez-chu-chu-thich-co); --chu-phu: var(--ez-chu-phu-co); --chu: var(--ez-chu-than-co); --chu-to: var(--ez-chu-than-lon-co); --chu-khoi: var(--ez-chu-tieu-de-3-co); --chu-de: var(--ez-chu-tieu-de-2-co); --chu-so: var(--ez-chu-tieu-de-1-co); --chu-so-to: var(--ez-chu-so-lieu-co); --chu-hanh-dong: var(--ez-chu-nut-co); --chu-o-nhap: var(--ez-chu-than-lon-co); --cao-than: 1.6; --cao-de: 1.28; } :root, [data-vai="con"] { --anh-dai-dien: var(--ez-khe-64); --cot-noi-dung: var(--ez-cot-toi-da); } [data-vai="bo-me"] { --anh-dai-dien: var(--ez-khe-48); --cot-noi-dung: var(--ez-cot-toi-da); } [data-vai="thay-co"] { --anh-dai-dien: var(--ez-khe-48); --cot-noi-dung: var(--ez-cot-toi-da); } [data-vai="quan-tri"] { --anh-dai-dien: var(--ez-khe-40); --cot-noi-dung: var(--ez-cot-toi-da); } /* Mot `data-vai` long trong trang phai giai lai ho chu (font-family da giai thanh ten cu the o `html` roi moi truyen xuong). */ [data-vai] { font-family: var(--chu-ho); } /* Man dang nhap/dang ky la mot FORM, khong phai mot trang noi dung: cot co dinh o moi vai. */ :root { --cot-form: 420px; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--nen); color: var(--muc); font-family: var(--chu-ho); font-size: var(--chu-to); line-height: var(--cao-than); -webkit-text-size-adjust: 100%; } /* ---- CHU SO DEU O RONG (tabular) ------------------------------------------ Diem XP, chuoi ngay, phan tram, bang cua bo me va buong lai: moi lan con so doi (1.284 -> 1.290) ma chu so khong deu o rong thi ca cum NHAY NGANG. Mat doc no nhu man vua ve lai, khong phai nhu mot con so vua tang. `lining-nums` giu moi chu so cung chieu cao — khong co chu so nao thut xuong duoi duong co so nhu chu thuong. */ h1, h2, h3, .ez-tieu-de-1, .ez-tieu-de-2, .ez-the-so__so, .nha__so, .o--pin, .tienbo__so, .gem__so, .nv__gem, table, th, td { font-variant-numeric: tabular-nums lining-nums; } h1, h2, h3 { line-height: var(--cao-de); } /* ---- BE RONG DONG --------------------------------------------------------- Nguoi lon doc thoai mai o 60-75 ky tu mot dong. TRE MOI DOC thi khong: mat be mat dong khi phai quet qua mot dong dai, nen than bai cua vo con gioi han 45 ky tu. Day la gioi han CHU, khong phai gioi han KHUNG — bang, duong hoc va the van dung tron chieu rong cot. */ .ngu-lieu__van, .de { max-width: 68ch; } [data-vai="con"] .ngu-lieu__van, :root:not([data-vai]) .ngu-lieu__van, [data-vai="con"] .de, :root:not([data-vai]) .de { max-width: 45ch; } /* MOT `data-vai` LONG BEN TRONG TRANG cung phai doi ho chu. `font-family` tren `html, body` da GIAI `var(--chu-ho)` thanh mot ten cu the roi moi truyen xuong — con thua ke mang theo KET QUA, khong mang theo cai `var()`. Nen mot khoi `data-vai="bo-me"` dat trong trang van ve bang chu cua vo ngoai, va no doc y het mot khoi dung: van co chu, van co dau, chi khac hinh. Dong duoi bat moi khoi mang `data-vai` GIAI LAI. Cung ho loi voi `--he-so-kho` o dot 42. */ [data-vai] { font-family: var(--chu-ho); } .khung { max-width: 560px; margin: 0 auto; padding: var(--ez-khe-16) var(--ez-khe-16) var(--ez-khe-96); } :where(.man) { display: flex; flex-direction: column; gap: var(--khe-khoi); } .man--giua { min-height: 70vh; justify-content: center; text-align: center; } /* Man dau (cham luot 4): cau dan dinh sat thanh dinh, chu "tren lop." mo coi. */ .man--dau { padding-top: var(--ez-khe-32); } .man--dau > .ez-phu { text-wrap: balance; } /* CO CHU CANG TO, KHOANG CACH CHU CANG PHAI AM. `letter-spacing: 1px` o 40px la +0,025em — o co ay chu da thua khoang cach san, gian them lam dau thanh roi khoi chu. Tieng Viet khong chiu duoc gian duong o than bai lan tieu de. */ .ez-phu { margin: 0; } /* Nut/Chinh (UI-UX §6): nen MAU NHAN, dung MOT tren mot khoi. Truoc dot 45 la nen muc - nguoc voi chinh bang uu tien hanh dong da ghi. */ /* NUT KHOA la trang thai TRUNG TINH, khong phai mau nhan lam mo (dot 66). Cu: `opacity: .45` tren nen cam ra mot nut cam nhat - van la MAU HANH DONG, doc ra nhu bam duoc (UI-UX §6: mau nhan chi cho hanh dong). Nut chu giu nen trong. */ .ez-bao { position: sticky; top: 0; z-index: 5; margin-bottom: var(--ez-khe-8); } /* --- man nha --- */ .dinh { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .dinh__ten { font-size: var(--chu-to); font-weight: 800; } .on { border-left: 4px solid var(--on); gap: var(--ez-khe-4); } .on__ten { font-weight: 600; } .nha, .ez-the.nha { border-left: 4px solid var(--on); gap: var(--ez-khe-8); } .nha--du { border-left-color: var(--dung); background: var(--dung-nen); } .nha__dinh { display: flex; align-items: baseline; gap: var(--ez-khe-8); } .nha__so { font-size: var(--chu-so); line-height: 1; } .nha__nhan { font-size: var(--chu-phu); color: var(--muc-nhe); } .nha__cau { margin: 0; font-size: var(--chu); font-weight: 600; } /* Chuoi nha nam TRONG the tuan (dot 66): mot phan cua the, khong phai the thu hai. */ .nha--trong { display: flex; flex-direction: column; border: 0; border-top: 1px solid var(--vien); background: none; padding: var(--ez-khe-12) 0 0; margin: 0; } .nha--trong.nha--du { background: none; } .duong { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .chang { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: var(--ez-khe-12) var(--chang-dem); } .chang--dang_hoc { border-color: var(--nhan); border-width: 2px; } .chang--khoa { opacity: .55; } .chang__ten { font-weight: 600; } .chang__phu { font-size: var(--chu-phu); color: var(--muc-nhe); margin-top: var(--ez-khe-4); } .thanh--bai { flex: 1; margin: 0 var(--ez-khe-12); } .o--pin { text-align: center; letter-spacing: 8px; } .yeu { padding: var(--ez-khe-8) 0; border-top: 1px solid var(--vien); } .yeu:first-of-type { border-top: none; } .yeu__ten { font-weight: 600; } .viec__cau { font-weight: 600; margin: 0; } .ez-the.goi { gap: var(--ez-khe-8); } .goi__ten { font-size: var(--chu-to); font-weight: 800; } .goi__gia { font-size: var(--chu-de); font-weight: 800; color: var(--nhan); } .ez-the.ds-con { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .the-con { min-height: var(--ez-khe-64); font-size: var(--chu-to); } .ds-kn { display: flex; flex-direction: column; gap: var(--ez-khe-4); margin-top: var(--ez-khe-8); } .kn { display: flex; justify-content: space-between; gap: var(--ez-khe-12); font-size: var(--chu-phu); } .kn__muc { color: var(--muc-nhe); white-space: nowrap; } /* --- bai hoc --- */ /* Man bai cao dung phan con lai duoi thanh dinh (EzThanhDinh 52px + dem dinh khung), de thanh chan (margin-top: auto) cham dung day khung nhin, khong con dai xam thua. */ .man--bai { min-height: calc(100vh - 52px - var(--ez-khe-16)); min-height: calc(100dvh - 52px - var(--ez-khe-16)); } .bai-dau { display: flex; align-items: center; } .bai-dem { font-size: var(--chu-phu); color: var(--muc-nhe); white-space: nowrap; } .hop-cau { display: flex; flex-direction: column; gap: var(--ez-khe-giua-khoi); flex: 1; } /* Dong ngu canh va de bai la MOT cap (ban ve M4: khe 8), cach cum dap an mot khe khoi. */ .hop-cau > .chi-dan + * { margin-top: calc(var(--ez-khe-8) - var(--ez-khe-giua-khoi)); } .de { font-size: var(--chu-de); font-weight: 600; margin: 0; line-height: var(--cao-de); } .cau-con { font-size: var(--chu-to); font-weight: 600; margin: var(--ez-khe-12) 0 0; } .phat-bieu { font-size: var(--chu-de); font-weight: 800; line-height: var(--cao-de); text-align: center; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: var(--ez-khe-16); margin: 0; } .nhac { font-size: var(--chu-phu); color: var(--muc-nhe); margin: 0; } .nhac--vui { color: var(--dung); } .nhac--loi { color: var(--sai); } .nhac--nhe { font-size: var(--chu-nho); } .ez-lua-chon { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .ez-lua-chon--doi, .ez-lua-chon--dau { flex-direction: row; } .ez-lua-chon--doi .ez-dap-an, .ez-lua-chon--dau .ez-dap-an { text-align: center; } .mau-dien { display: flex; align-items: center; gap: var(--ez-khe-8); flex-wrap: wrap; font-size: var(--chu-de); font-weight: 600; justify-content: center; } .o-dien { width: 120px; min-height: 60px; font-size: var(--chu-de); text-align: center; border: 2px solid var(--muc); border-radius: var(--bo-nho); background: var(--mat); color: var(--muc); } .o-dien:focus { outline: none; border-color: var(--nhan); } .mau-dien--trong-de { display: block; text-align: center; } .mau-dien--trong-de .o-dien { display: inline-block; vertical-align: middle; min-height: 0; padding: 2px var(--ez-khe-8); margin: 2px 0.25em; } /* Sau khi Kiem tra: o dien mang ket qua nhu o chon (vien + chu cung mau, kem khoa go). */ .o-dien--dung { border-color: var(--ez-hoc-dung-dam); background: var(--ez-hoc-dung-nen); color: var(--ez-hoc-dung-dam); } .o-dien--sai { border-color: var(--ez-hoc-sai-dam); background: var(--ez-hoc-sai-nen); color: var(--ez-hoc-sai-dam); } .ghep { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ez-khe-8); } .ghep__cot { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .o-ghep, .o-xep { position: relative; } .o-ghep[data-so]:not([data-so=""])::after, .o-xep[data-so]:not([data-so=""])::after { content: attr(data-so); position: absolute; top: calc(-1 * var(--ez-khe-8)); right: calc(-1 * var(--ez-khe-8)); width: var(--ez-khe-24); height: var(--ez-khe-24); border-radius: var(--bo-tron); background: var(--muc); color: var(--nen); font-size: var(--chu-nho); font-weight: 800; display: grid; place-items: center; } /* SAP XEP THU TU (ban ve DS 1.0): moi muc mot HANG, o so thu tu ben trai (trong khi chua chon). Be cham lan luot; so hien ngay tren hang vua cham. */ .de--phep-tinh { text-align: center; font-family: var(--ez-phong-so); font-weight: 800; font-size: var(--ez-chu-tieu-de-1-co); line-height: var(--ez-chu-tieu-de-1-cao); margin: var(--ez-khe-trong-khoi) 0; } .xep__kho { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .xep__kho .o-xep[data-so]:not([data-so=""])::after { content: none; } .xep__hang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ngu-lieu { background: var(--mat); border-left: 4px solid var(--muc); border-radius: var(--bo-nho); padding: var(--ez-khe-12) var(--ez-khe-16); } .ngu-lieu__van { margin: 0; font-size: var(--chu-to); white-space: pre-line; } .ngu-lieu__nguon { margin: var(--ez-khe-8) 0 0; font-size: var(--chu-phu); color: var(--muc-nhe); } /* CHAN BAI = thanh dinh day, moi kho (ban ve M3/M4): vien tren mot net, nen the, trai het be ngang man bang border-image (muc ve tran, KHONG sinh cuon ngang); nut rong het cot. Tach vung LAM (de + dap an) khoi vung QUYET (nut, phan hoi). */ .chan { display: flex; flex-direction: column; gap: var(--ez-khe-12); position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding: var(--ez-khe-20) 0 calc(var(--ez-khe-20) + env(safe-area-inset-bottom)); border-image: linear-gradient(var(--ez-vien-nhat) 0 1px, var(--ez-nen-the) 1px) fill 0 / 0 / 0 100vmax; } .khung:has(> .man--bai) { padding-bottom: 0; } /* Cum de neo DAU vung noi dung o moi kho (ban ve M3/M4), cach thanh tien do mot khe vung; khoang trong con lai nam giua dap an va thanh chan, khong nam tren dau cau hoi. */ .man--bai .hop-cau { flex: 0 1 auto; justify-content: flex-start; margin-top: calc(var(--ez-khe-vung) - var(--khe-khoi)); } /* Phan hoi cuoi cau la dai day man (EzPhanHoi day): thanh chan nhuong nen cho no. */ .chan:has(> .ez-phan-hoi--day) { padding: 0; border-image: none; } /* Dot 46: phan hoi khi chua dung la khoi TRUNG TINH (ban ve + the mo ta: "khong duoc co chu 'sai' to do giua man"). Do chi con o vien o da chon. */ .loi { color: var(--sai); } /* Nam muc trong 390px la 78px moi muc; voi `padding: 8px 12px` thi con 54px cho chu, va "Luyen tap" gay lam hai dong. Cong `thu/kho-lon-gate.mjs` bat duoc — mot nhan gay dong trong thanh dieu huong doc ra nhu bi bop, va no bi bop that. Bot le NGANG thoi: chieu cao vung cham va co chu giu nguyen. */ /* --- tim (CHIEN-LUOC §6) --- Tim la mot phep do su pham, khong phai mot cai khoa. Nen no ve nho, dat duoi thanh tien do, va KHONG bao gio doi mau ca man hinh hay chan duong di. */ .tim { display: flex; gap: var(--ez-khe-4); align-self: flex-start; margin-top: var(--ez-khe-4); } .tim__mot { font-size: var(--chu-to); line-height: 1; color: var(--sai); } .tim__mot--het { color: var(--vien); } .day-lai { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: var(--ez-khe-12) var(--ez-khe-12); margin-top: var(--ez-khe-8); font-size: var(--chu); color: var(--muc); } /* --- thu thach tuan (CHIEN-LUOC §6) --- Khoi nay noi ve CA TUAN, khoi chuoi nha ngay tren no noi ve HOM NAY. Nen no phai trong KHAC di - cung mot lop da thi hai khoi doc ra thanh mot khoi. */ .ez-the.tuan { border: 1px solid var(--vien); background: var(--mat); } .tuan--dat { border-color: var(--dung); background: var(--dung-nen); } .ez-the.tuan { gap: var(--ez-khe-12); } .tuan__doc { display: flex; flex-direction: column; gap: var(--ez-khe-4); } .tuan__ten { font-size: var(--chu-phu); font-weight: 600; color: var(--muc-nhe); } .tuan__so { font-size: var(--chu-to); font-weight: 800; } .tuan__cau { margin: 0; font-size: var(--chu); } .tuan__be { display: flex; flex-wrap: wrap; gap: var(--ez-khe-4); } .tuan__mot { font-size: var(--chu-phu); padding: var(--ez-khe-2) var(--ez-khe-8); border-radius: var(--bo-tron); background: var(--nen); border: 1px solid var(--vien); color: var(--muc-nhe); } .tuan__mot--nay { border-color: var(--dung); color: var(--dung); font-weight: 600; } /* --- tuan cua con (CHIEN-LUOC §6) --- Khoi nay dem KY NANG DA THAO, nen no phai trong khac han hai khoi dem NGAY o tren. NEN TRUNG TINH, KHONG PHAI NEN XANH. Trong he nay mau xanh la co MOT nghia: DUNG. No to o cau tra loi dung, o chang da thuoc, o ngay ca nha giu duoc nhip — nhung nhung cai do deu la thu be GIANH DUOC. Khoi nay la mot con so thong ke, va no xanh VO DIEU KIEN, ke ca khi con so bang 0. Anh Vu chup mot man hinh co ba the xanh xep chong roi noi "lon xon": dung vay — khi moi thu deu xanh thi khong con gi la dac biet, va tin hieu manh nhat cua app bi tieu vao cho khong can. */ .ez-the.tienbo { gap: var(--ez-khe-8); } .tienbo__ten { font-size: var(--chu-phu); font-weight: 600; color: var(--muc-nhe); } .tienbo__so { font-size: var(--chu-so); line-height: 1; color: var(--muc); } /* Dot 46: moi phan mot DONG co dau Xong (ban ve), khong con la vien thuoc. */ .tienbo__ds { display: flex; flex-direction: column; } .tienbo__mot { display: flex; align-items: center; gap: var(--ez-khe-12); padding: var(--ez-khe-8) 0; border-bottom: 1px solid var(--vien); font-size: var(--chu); font-weight: 600; } /* Chua thao them phan nao: khoi doi vai tu BAO CAO sang LOI NHAC, nen no thoi mang mau ket qua. Xanh la o day doc ra thanh mot loi khen cho mot viec chua xay ra. */ .tienbo--chua { border-color: var(--vien); background: var(--mat); } .tienbo__cau { margin: 0; font-size: var(--chu); } /* --- man dau: hoc truoc, dang ky sau (§6) --- Nam nut lop la thu dau tien nguoi ta thay, nen chung phai to va de cham. Duong dang nhap van con nhung no la mot dong chu - khong phai cai chan ngang. */ .chon-lop { display: flex; flex-wrap: wrap; gap: var(--ez-khe-8); justify-content: center; } .ez-nut.nut--lop { flex: 1 1 30%; min-width: var(--ez-khe-96); } /* ════════════════════════════════════════════════════════════════════ LOP DA CUA BE (§4.1) — phan NHIN THAY DUOC. Muoi bay dot dau don vao tang do va cong gac; be mat thi dung o "bo toi thieu". Day la lan dau no duoc dung ra tu te. Anh avatar lay tu Khoai.org — dung mon thu tu trong danh sach §7 khai "mang theo" ma truoc do chua mang gi. ════════════════════════════════════════════════════════════════════ */ /* --- avatar --- */ .av { border-radius: var(--bo-tron); overflow: hidden; flex: 0 0 auto; background: var(--mat); border: 2px solid var(--vien); display: grid; place-items: center; } .av__anh { width: 100%; height: 100%; object-fit: cover; display: block; } .av--to { width: var(--ez-khe-64); height: var(--ez-khe-64); } .av--vua { width: 44px; height: 44px; } .av--chu { font-family: var(--ez-phong-tieu-de); font-weight: 800; background: var(--ez-mau-tim-100); border-color: transparent; color: var(--ez-hanh-dong-chu); } /* EzOHinh anh-dai-dien chua co anh */ .av--to.av--chu { font-size: var(--chu-de); } .av--vua.av--chu { font-size: var(--chu-to); } /* --- the con: mot cai mat, khong chi mot dong chu --- */ .the-con { display: flex; align-items: center; gap: var(--ez-khe-12); text-align: left; width: 100%; padding: var(--ez-khe-12) var(--ez-khe-12); } .the-con__chu { display: flex; flex-direction: column; gap: var(--ez-khe-4); } .the-con__ten { font-size: var(--chu-to); font-weight: 800; } .the-con__lop { font-size: var(--chu-phu); color: var(--muc-nhe); } /* --- chon avatar luc them be --- */ .chon-av { display: flex; flex-wrap: wrap; gap: var(--ez-khe-8); } /* Luot 4 (14/10): hang dong 5 mat hong ~70px ben phai o 1280. Luoi tu lap day hang, moi mat dung giua o cua no. */ .chon-av:not(.chon-av__lop) { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); justify-items: center; } .chon-av__lop { margin-bottom: var(--ez-khe-12); } .av-chon { width: 56px; height: 56px; padding: 0; border-radius: var(--bo-tron); overflow: hidden; border: 3px solid transparent; background: var(--mat); cursor: pointer; } .av-chon__anh { width: 100%; height: 100%; object-fit: cover; display: block; } .av-chon--dang { border-color: var(--nhan); } /* --- dinh man nha --- */ .dinh__hang { display: flex; align-items: center; gap: var(--ez-khe-12); } /* --- con duong: moi chang mot MOC, khong phai mot thanh xam --- */ .chang { display: flex; align-items: flex-start; gap: var(--ez-khe-12); position: relative; } .chang__moc { flex: 0 0 auto; width: var(--moc-o); height: var(--moc-o); border-radius: var(--bo-tron); display: grid; place-items: center; font-weight: 800; font-size: var(--chu-phu); background: var(--mat); border: 2px solid var(--vien); color: var(--muc-nhe); } .chang__than { flex: 1; min-width: 0; } /* Soi day noi cac moc: con duong phai TRONG RA mot con duong. BA CON SO NAY PHAI SUY TU MOC, KHONG DUOC GO TAY. Ban truoc `left: 16px` va `top: 36px` la hai con so viet cung, dung cho mot cai moc 34px voi padding 14px — nhung `body.be-nho` doi moc thanh 44px va khong ai sua hai so kia, nen soi day chay LECH 21px khoi tam moc tren dung khô be dang dung nhat. Do duoc bang `thu/do-day.mjs`; khong cong nao bat vi khong phep do nao hoi cau ay, va mot soi day lech van la mot soi day - no chi trong hoi ky. */ .chang:not(:last-child)::before { content: ''; position: absolute; left: calc(var(--chang-dem) + var(--moc-o) / 2 - var(--ez-khe-2)); top: calc(var(--ez-khe-12) + var(--moc-o) + var(--ez-khe-2)); bottom: calc(-1 * var(--ez-khe-8)); width: var(--ez-khe-4); background: var(--vien); } .chang--xong .chang__moc { background: var(--dung); border-color: var(--dung); color: var(--tren-muc); } .chang--xong:not(:last-child)::before { background: var(--dung); } .chang--dang_hoc .chang__moc { border-color: var(--nhan); color: var(--nhan); } /* --- phan hoi: mot chut chuyen dong, khong phai phao hoa --- */ .ez-phan-hoi { animation: len 0.22s ease-out; } /* Khe 4px giua hinh va chu dinh phan hoi: mat cu tu truoc buoc 3b (EzPhanHoi ve khe-trong-khoi). Truoc day thang nho bi danh do uu tien 0; nay phai nang. */ .ez-phan-hoi > .ez-phan-hoi__dinh { gap: var(--ez-khe-4); } /* Moi o thuong tren thanh dinh giu mot dong (`chung/khung-vo.js`). */ .dinh__mot { white-space: nowrap; } /* --- an mung khi xong bai --- */ .man--mung { text-align: center; } .mung { position: relative; width: 116px; height: 116px; margin: 0 auto; } .mung__vong { position: absolute; inset: 0; border-radius: var(--bo-tron); border: 6px solid var(--dung); opacity: 0.25; animation: toaRa 1.1s ease-out; } .mung__so { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--chu-so); color: var(--dung); animation: bat 0.4s ease-out; } @keyframes len { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes bat { from { transform: scale(0.6); } 60% { transform: scale(1.12); } to { transform: scale(1); } } @keyframes toaRa { from { transform: scale(0.7); opacity: 0.6; } to { transform: scale(1); opacity: 0.25; } } /* Mot dua tre nhay cam voi chuyen dong, hoac mot may yeu, thi tat het. Day khong phai mot tuy chon dep - `prefers-reduced-motion` la mot nhu cau that. */ @media (prefers-reduced-motion: reduce) { .ez-phan-hoi, .ez-phan-hoi__hinh, .mung__vong, .mung__so { animation: none; } } /* --- nhiem vu va bo suu tap (§6) --- */ .ez-the.gem { align-items: center; text-align: center; gap: var(--ez-khe-4); } .gem__so { font-size: var(--chu-so-to); color: var(--ez-thuong-gem-chu); line-height: 1; } .gem__nhan { font-size: var(--chu-phu); color: var(--muc-nhe); } .nv { gap: var(--ez-khe-8); } .nv__dinh { display: flex; align-items: center; gap: var(--ez-khe-8); } .nv__tich { flex: 0 0 auto; width: var(--ez-khe-24); height: var(--ez-khe-24); border-radius: var(--bo-tron); display: grid; place-items: center; font-weight: 800; color: var(--tren-muc); font-size: var(--chu-phu); background: var(--vien); } .nv--dat .nv__tich { background: var(--dung); } .nv__ten { flex: 1; font-size: var(--chu); } .nv__gem { font-weight: 800; color: var(--ez-thuong-gem-chu); white-space: nowrap; } .nv--dat { border-color: var(--dung); background: var(--dung-nen); } .nv__phu { font-size: var(--chu-phu); color: var(--muc-nhe); } .st-ho { font-size: var(--chu-phu); font-weight: 800; color: var(--muc-nhe); } .st-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--ez-khe-8); } .st { aspect-ratio: 1; padding: var(--ez-khe-4); border-radius: var(--bo); cursor: pointer; background: var(--nen); border: 2px dashed var(--vien); } /* Chua mo thi mo di, nhung VAN NHIN THAY: be phai biet minh dang tiet kiem cho cai nao. Giau di thi cai dich khong ton tai. */ .st__anh { width: 100%; height: 100%; object-fit: contain; opacity: 0.22; filter: grayscale(1); } .st--co { border-style: solid; border-color: var(--dung); background: var(--mat); cursor: default; } .st--co .st__anh { opacity: 1; filter: none; } /* --- phan loai: xep muc vao nhom --- */ .phanloai { display: flex; flex-direction: column; gap: var(--ez-khe-12); } .phanloai__muc, .phanloai__nhom { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .o-nhom { min-height: var(--cham); padding: var(--ez-khe-8) var(--ez-khe-12); border-radius: var(--bo); font-size: var(--chu); font-weight: 600; text-align: left; background: var(--nen); border: 2px dashed var(--vien); color: var(--muc-nhe); } /* Nhom chi sang len KHI da chon mot muc: truoc do bam vao no khong lam gi ca, va mot cai nut trong sang ma bam khong an la mot loi hua sai. */ .o-nhom--cho { border-style: solid; border-color: var(--nhan); color: var(--muc); } /* ---- MON (da mon, dot chang 1) ------------------------------------------- Mau mon KHONG DUOC trung mau dung/sai: `--dung` xanh la va `--sai` do da mang mot NGHIA trong app nay. Bay mau trong `mon.js` deu tranh ca hai vung ay. Mau di vao day qua bien `--mon-mau` do JS dat — CSS khong biet ten mon nao, nen them mot mon la sua MOT dong trong `mon.js`, khong phai sua bang mau. */ :where(.chon-mon), .dai-mon { display: flex; flex-wrap: wrap; gap: var(--ez-khe-8); } .dai-mon:empty { display: none; } /* Dot 66: chip mang HINH mon (svg) canh chu - can hang ngang, khong de hinh roi dong. */ .ez-chip .hinh { flex: none; } /* Con duong deo mau cua mon dang di: ba mon thi ba con duong phai TRONG khac nhau, khong thi doi mon xong be tuong minh chua doi. */ .duong { --mon-mau: var(--muc); } .duong .chang--dang_hoc .chang__moc { border-color: var(--mon-mau); color: var(--mon-mau); } /* ---- BE NHO (lop 1-3) — thanh ngu Khoai.org so 8 -------------------------- Khoai ghi ro: "Dung chi phong to chu — phai don gian hoa workflow." Nen day khong phai mot bo chu to, no la BA thu: 1. chu to va vung cham rong hon (ngon tay be nho khong chinh xac hon, no chi be hon — va man hinh thi cung mot kich thuoc) 2. bot khoi tren man nha: mot dua lop 1 khong doc duoc "so voi tuan truoc" 3. loi van ngan hon, o `app.js` Cong tac la `body.be-nho`, dat theo LOP CUA BE dang chon. */ body.be-nho { font-size: var(--chu-to); } body.be-nho { --cham: 60px; } /* DA RUT LAI luat "an khoi tuan cua con o be nho". Khoai noi "dung chi phong to chu — phai DON GIAN HOA WORKFLOW"; no khong noi "giau tien bo di". Khoi ay viet "Tuan nay con da thao them N phan" — do la mot loi khen ve chinh be, va mot dua lop 1 can nghe no hon mot dua lop 7. Ban soi bat duoc, va no bat dung. Giao dien theo lop o day chi con la CO CHU va VUNG CHAM, cong loi van ngan hon o `app.js` — khong bot thong tin nao cua be. */ /* Con duong o be nho: moc to hon de ngon tay cham trung. Doi BIEN chu khong doi rieng cai moc — soi day doc cung bien do va tu di theo. */ body.be-nho { --moc-o: 44px; } body.be-nho .chang__moc { font-size: var(--chu-to); } /* ---- SUY NGAM (chang 3) -------------------------------------------------- KHONG phai mot cai hop chan man. Nut "De sau" nam ngay canh nut gui va cung co the bam duoc — §1.5 cam gay ap luc tam ly len tre, va mot cai hop khong thoat duoc chinh la ap luc. */ .ez-the.suy-ngam { text-align: left; } .suy-ngam__hoi { font-weight: 600; } .suy-ngam__nut { display: flex; gap: var(--ez-khe-8); } .suy-ngam__nut .ez-nut { width: auto; flex: 1; } .sn-dong { padding: var(--ez-khe-8) 0; border-bottom: 1px solid var(--vien); } .sn-dong:last-child { border-bottom: none; } .sn-dong__chu { font-style: italic; } /* ---- NHA MINH (chat + dau tri, §6B) --------------------------------------- Hai mon nay CHUNG mot cua vi chung cung tra loi mot cau: "trong nha minh dang co gi". Tach ra hai muc o thanh duoi thi thanh sau muc, va o 390px thi sau muc chi con ~62px moi muc. Khe 8px giu mat cu (EzTab ve 4px); tu buoc 3b phai mang ngu canh `.man >` moi thang lop DS. */ .man > .ez-tab-hang { display: flex; gap: var(--ez-khe-8); } .tin-ds { display: flex; flex-direction: column; gap: var(--ez-khe-8); max-height: 46vh; overflow-y: auto; } /* Dot 46: khung nam o BONG tin (`.tin__bong`), dong tin chi xep mat + bong. */ .tin { } /* Tin CUA MINH lech phai: mot dua tre nhan ra "cai nay minh viet" bang CHO DUNG truoc khi doc duoc ten o tren. */ .tin--toi { margin-left: var(--ez-khe-24); } .tin__ai { font-size: var(--chu-phu); color: var(--muc-nhe); } .tin__chu { overflow-wrap: anywhere; } .tin__st { width: 72px; height: 72px; object-fit: contain; } .tin-go { display: flex; gap: var(--ez-khe-8); margin-top: var(--ez-khe-12); } .tin-go .ez-nut { width: auto; } .van { padding: var(--ez-khe-8) 0; border-bottom: 1px solid var(--vien); } .van:last-child { border-bottom: none; } .van__ai { font-weight: 600; } /* ---- SAU CAI MAT o man dau (chang 2) -------------------------------------- Man dau tien cua mot app cho tre em ma khong co gi de nhin la mot man hinh noi rang o day khong co ai. Sau hinh nay Khoai.org da ve xong; chung dung o day de be nhan ra app truoc khi doc duoc ten no. */ .mat-dau { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ez-khe-4); margin-bottom: var(--ez-khe-8); } .mat-dau__mot { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--mat); border: 2px solid var(--vien); } /* Be nho thi mat to hon — cung mot man hinh, ma mat cua no be hon. */ body.be-nho .mat-dau__mot { width: var(--ez-khe-64); height: var(--ez-khe-64); } .dai-mon__mot { display: flex; align-items: center; gap: var(--ez-khe-8); flex-wrap: wrap; } .dai-mon__mot .ez-nut { width: auto; } /* Chip "tinh" la mot cai NHAN, khong phai mot cai nut — bo con tro tay di, khong thi be bam vao roi khong co gi xay ra. */ .ez-chip.chip-mon--tinh { cursor: default; } /* ---- MAN KHONG CON GI DE LAM --------------------------------------------- Mot man "trong" van phai tra loi duoc cau "the gio con lam gi". Ban truoc ba man nay la mot dong chu roi chin phan muoi khoang trang. */ /* Le trong theo the chuan (20px, thuoc _soi-ds): ban cu 24/20 lech luat the, lo ra khi the sanh khoa (cong tac choi, 26/09) vao ban soi. */ .ez-the.ez-trong-vui { align-items: center; text-align: center; } .ez-trong-vui__hinh { font-size: var(--chu-so-to); line-height: 1; } .trong-vui__cau { font-size: var(--chu-to); font-weight: 600; } .ez-trong-vui .ez-phu { max-width: 34ch; } /* ---- MAN NHA DAO THU TU (Duolingo: con duong LA man nha) ------------------ Dinh man la mot DAI MONG, khong phai mot bang diem. Ban truoc hai o so to dat ngay duoi ten be, nen mot be vua tao ho so mo app ra la doc duoc "0 diem · 0 ngay lien tiep" — mot bang ti so cua so khong, o cho de nhin nhat man hinh. */ /* Ten be GIU CHO cua no; day so co bao nhieu thi chiem bay nhieu va khong bop ai. Ban truoc `margin-left:auto` day day so sang phai va cot ten con lai vai chuc diem anh — "Bé Na · lớp 2" xuong bon dong, moi dong mot chu. */ .dinh__hang { flex-wrap: wrap; row-gap: var(--ez-khe-8); } .dinh__ten { flex: 1 1 auto; min-width: 0; font-family: var(--ez-phong-tieu-de); font-weight: 800; } /* Chi so = EzThuong. Hep thi ca dai chi so xuong hang duoi ten (khong bop ten). */ .dinh__so { display: flex; gap: var(--ez-khe-8); flex-wrap: wrap; } /* ---- BON CHAM THAY THANH PHAN TRAM --------------------------------------- He tinh thang muc 0..4 cho tung ky nang tu ngay dau, nhung no chi hien o man Ho so duoi dang chu "muc 0/4". Mot dua sau tuoi DEM DUOC bon cham; no khong doc duoc mot thanh xam dai 60%. */ .cham-hang { display: flex; gap: var(--ez-khe-4); margin: var(--ez-khe-4) 0 var(--ez-khe-2); } .cham { width: var(--ez-khe-12); height: var(--ez-khe-12); border-radius: 50%; background: var(--vien); border: 1px solid var(--vien); } .cham--day { background: var(--mon-mau, var(--muc)); border-color: var(--mon-mau, var(--muc)); } /* Chang dang hoc LA mot cai nut. Gop "cho vong cam" voi "cai nut kia" lam mot: be bam thang vao cho minh dang dung. */ .chang__di { display: block; margin-top: var(--ez-khe-8); min-height: var(--cham); padding: var(--ez-khe-12) var(--ez-khe-16); font-size: var(--chu-to); font-weight: 800; font-family: inherit; border: 2px solid var(--muc); border-radius: var(--bo-nho); background: var(--muc); color: var(--nen); cursor: pointer; width: 100%; } /* ---- MAN BAI: BO 700px CHET ---------------------------------------------- `.hop-cau { flex: 1 }` lam hop cau hoi gian het chieu cao con lai roi neo noi dung LEN DINH — nen mot phep tinh mot dong lo lung tren cung, nut o tan day, va bay tram diem anh trong giua. Cho noi dung vao GIUA vung con lai. */ .hop-cau { justify-content: center; } .cho-chon { text-align: center; margin: 0; } .cho-chon[hidden] { display: none; } /* ---- HUY CHUONG DOI MAU THEO KET QUA ------------------------------------- Ban truoc vong luon xanh la — ma xanh la trong app nay nghia la DUNG — nen mot be lam 3/8 van thay mot vong xanh mung ro. Mau la mot cau noi. */ .mung--gioi .mung__vong { border-color: var(--dung); } .mung--gioi .mung__so { color: var(--dung); } .mung--kha .mung__vong { border-color: var(--nhan); } .mung--kha .mung__so { color: var(--nhan); } .mung--chua .mung__vong { border-color: var(--muc-nhe); } .mung--chua .mung__so { color: var(--muc-nhe); } .ez-the.cong-tac { padding: var(--ez-le-trong); } /* Luot 4 (14/10): cong tac co num. Ray mau hanh dong khi bat (bam duoc), vien khi tat. */ .dong-chon--cong-tac { align-items: center; } .dong-chon--cong-tac:has(.dong-chon__phu) { align-items: center; } .cong-tac__ray { flex: 0 0 auto; position: relative; width: 52px; height: 32px; border-radius: var(--bo-tron); background: var(--vien); transition: background-color var(--ez-td-nhanh) var(--ez-dc-chuan); } .cong-tac__ray--bat { background: var(--nhan); } .cong-tac__num { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: var(--bo-tron); background: var(--mat); border: 1px solid var(--vien); transition: transform var(--ez-td-nhanh) var(--ez-dc-chuan); } .cong-tac__ray--bat .cong-tac__num { transform: translateX(20px); } .cong-tac .ez-nut { text-align: left; } /* ---- KHOI DANG DOI -------------------------------------------------------- CO Y khong phai mot vong quay: mot vong quay noi "may dang ban", con ba vach xam noi "cho nay sap co chu" — va cai thu hai moi la thu dung o mot man vua trong. Vach nhap NHE, khong nhay: mot man hinh nhap nhay la mot man hinh doc ra nhu dang hong. */ .doi { display: flex; flex-direction: column; gap: var(--ez-khe-8); padding: var(--ez-khe-4) 0; } .doi__vach { height: var(--ez-khe-16); border-radius: var(--bo-nho); background: var(--vien); opacity: .55; } .doi__vach:nth-child(2) { width: 78%; } .doi__vach:nth-child(3) { width: 54%; } @media (prefers-reduced-motion: no-preference) { .doi__vach { animation: tho 1.3s ease-in-out infinite; } .doi__vach:nth-child(2) { animation-delay: .12s; } .doi__vach:nth-child(3) { animation-delay: .24s; } @keyframes tho { 0%, 100% { opacity: .35; } 50% { opacity: .7; } } } :where(.khung-than) { display: flex; flex-direction: column; gap: var(--khe-khoi); } /* ---- BAT THONG BAO (man bo me) -------------------------------------------- Mot cong tac, khong phai mot loi moi lap lai. Bo me tat roi thi thoi hoi lai — hoi lai chinh la cai giong doi hon ma §6 da bo, chi doi cho tu be sang ho. */ .ez-the.day-o { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .day-o__trang { font-size: var(--chu-phu); color: var(--muc-nhe); } /* Cong tac DANG BAT la mot trang thai cai dat, khong phai mot thu be gianh duoc. Mau xanh o he nay co mot nghia la DUNG; tieu no vao mot cai cong tac la lam nhat di chinh cho no can to. Xanh-la-bat la thoi quen cua web, khong phai luat cua san pham nay. */ .day-o__trang--bat { color: var(--muc); font-weight: 600; } .day-o__vung { display: flex; flex-direction: column; gap: var(--ez-khe-8); } /* O dong y ban tin: o tick giu co tu nhien (luat input toan cuc tung nuot o tick o he khac), chu nam canh, nhieu dong thi thut theo chu. */ .dong-y { display: flex; align-items: flex-start; gap: var(--ez-khe-8); font-size: var(--chu-phu); color: var(--muc); } .dong-y input { flex: none; width: auto; margin-top: 3px; font-size: var(--ez-chu-than-lon-co); } /* cung co chu o nhap .ez-o: Safari iPad khong phong to */ /* Nut mo phan con lai cua con duong. Dat THANG HANG voi cac chang (cung le trai voi `.chang__than`) chu khong can giua: no la buoc tiep theo cua danh sach, khong phai mot hanh dong rieng. Mang ca `ez-nut` de thang EzNut chu (buoc 3b: truoc day thang nho bi danh do uu tien 0). */ .ez-nut.duong__them { width: 100%; margin-top: var(--ez-khe-4); padding: var(--ez-khe-12); border: 2px dashed var(--vien); background: transparent; } /* ════════════════════════════════════════════════════════════════════════════ KHỔ MÀN LỚN — iPad và máy tính là NỀN TẢNG CHÍNH (§4.1 bản 09/09/2026) Trước khối này app có ĐÚNG MỘT khối `@media` về bố cục, và nó chỉ đổi cỡ chữ ở 620px. Đo được: cột ghim cứng 560px, nên trên iPad ngang bỏ trống 53% bề ngang và trên máy tính 1440 bỏ trống 61% — app điện thoại phóng to. BA MỐC, và mỗi mốc trả lời một câu khác nhau: ≥820 iPad dọc — vừa đủ cho một cột rộng, chưa đủ cho hai ≥1180 iPad ngang, laptop — đủ chỗ cho con đường trải ngang ≥1440 máy tính — đủ chỗ cho cột phụ KHUNG ĐỔI THEO TỪNG MÀN, không một bề rộng cho tất cả. Màn làm bài giữ cột hẹp vì một đứa trẻ đang giải toán không cần thêm thứ để nhìn; màn đường học và báo cáo thì ngược lại — chúng sinh ra để cho thấy TOÀN CẢNH, mà toàn cảnh nhét vào 560px thì thành một danh sách phải cuộn. Bề ngang khai bằng `--kho-khung` và CSS tự biết màn nào đang mở qua `:has()` — 0 dòng JS phải sửa. Trình duyệt không có `:has()` thì rơi về bề ngang mặc định: hẹp hơn, không vỡ. KHỔ 390px KHÔNG LỆCH MỘT PIXEL. Mọi luật dưới đây nằm từ 820px trở lên, và bàn soi `thu/soi-kho.mjs` đối chứng đúng điều đó ở cả bốn khổ. ════════════════════════════════════════════════════════════════════════════ */ /* ---- KHUON BO CUC DS 1.0 (L1-L9) va LUAT CO GIAN ----------------------------- Be rong cot va le deu la TOKEN: `--ez-cot-toi-da` (theo vai), `--ez-luoi-le` (theo kho: 16/20 · 32 · 40), sinh tu `eduzo-tokens.json` (`ez/eduzo-khung.css`). Ba moc cua DS: 600 (may tinh bang doc) · 1024 (thanh ben) · 1440. L1 lam bai .man--bai cot doc, KHONG dieu huong L2 man hoc (con) co tab day / thanh ben: cot rong `--ez-cot-toi-da-rong` L7 khoanh khac .man--mung cot doc, KHONG dieu huong man giua (cua vao, PIN, form) cot doc CSS tu biet man nao dang mo qua `:has()` — khong mot dong JS phai sua. */ :root, [data-vai] { --kho-khung: var(--ez-cot-toi-da); --dem-khung: var(--ez-luoi-le); } .khung { max-width: var(--kho-khung); padding-left: var(--dem-khung); padding-right: var(--dem-khung); /* Tab day cao 84px + vung an toan: noi dung chua cho (luat co gian). */ padding-bottom: calc(84px + env(safe-area-inset-bottom)); } .khung:has(> .man--bai), .khung:has(> .man--mung), .khung:has(> .man--giua) { --kho-khung: var(--ez-cot-toi-da); } /* L2 chia 5+3 tu moc 600 (ez.css), nen khung cung phai rong ra tu moc ay: truoc 26/09 khung giu cot 560 toi 1024, cot phu con ~170px va chu gay tung tu. */ @media (min-width: 600px) { .khung:has(> [data-khuon="L2"]) { --kho-khung: var(--ez-cot-toi-da-rong); } } @media (min-width: 1024px) { /* L2: man co dieu huong trai rong toi cot rong cua vai. */ .khung:has(.ez-tab-day) { --kho-khung: var(--ez-cot-toi-da-rong); } .khung:has(> .man--bai), .khung:has(> .man--mung), .khung:has(> .man--giua) { --kho-khung: var(--ez-cot-toi-da); } .khung { padding-bottom: var(--ez-khe-48); } } /* ---- VÙNG CHẠM TỐI THIỂU TRÊN MÁY CHẠM ------------------------------------- `.nut--nho` khai 40px và chạy như thế trên live từ lâu: dưới ngưỡng 44px của WCAG 2.5.5 và của Apple. Cổng `thu/kho-lon-gate.mjs` bắt được ở cả bốn khổ chạm — không cổng nào thấy trước đó vì chưa phép đo nào hỏi câu này. Gác theo CON TRỎ chứ không theo bề ngang: nút này nhỏ là có chủ ý (nó là nút phụ, và trên máy tính con trỏ chuột chính xác hơn ngón tay nhiều). Thứ phải sửa là ca ngón tay. */ @media (pointer: coarse) { /* NGON TAY DO THEO VAI, KHONG THEO MOT CON SO CHUNG. Truoc dot 42 khoi nay go tran 44/46 — dung bang nguong cu cua cong gac, nen no "dat" o moi vo chi vi hai ben cung sai mot kieu. Vo con doi 52px (`--cham` cua vai con, 60px voi `body.be-nho`), vo quan tri chi can 32px; mot con so khong tra loi duoc ca hai. Muc tab day theo `--cham` (60px o `body.be-nho`), nang qua EzTabDay tu buoc 3b vi truoc day chi thang bi danh do uu tien 0. */ .ez-tab-day .ez-tab-day__muc { min-height: var(--cham); } } /* ---- CON TRỎ, KHÔNG PHẢI BỀ NGANG ------------------------------------------ iPad ngang là 1180px và là NGÓN TAY; laptop 1180px là trackpad. Hỏi bề ngang để đoán ngón tay là đoán sai đúng một nửa số máy. Vùng chạm CỐ Ý không hạ xuống cho chuột: đây là app cho trẻ con, nút to không hại ai, và hạ xuống là thêm một luật không mua được gì. Thứ thật sự cần phân nhánh là HOVER — thiếu nó thì trên máy tính app đọc ra như một tấm ảnh tĩnh, rê chuột khắp nơi không gì nhúc nhích. */ @media (hover: hover) and (pointer: fine) { /* Hover cua nut, dap an, chip, tab: `ez/ez.css` (DS 1.0). O day chi con the rieng. */ .the-con:hover, .chang__di:hover { border-color: var(--ez-vien-dam); } .o-nhom--cho:hover { border-color: var(--nhan); } .ez-nut, .ez-dap-an, .o-ghep, .o-xep, .the-con, .ez-chip, .ez-tab, .chang__di, .ez-tab-day__muc { transition: border-color .12s ease, background-color .12s ease, filter .12s ease; } } @media (prefers-reduced-motion: reduce) { .ez-nut, .ez-dap-an, .o-ghep, .o-xep, .the-con, .ez-chip, .ez-tab, .chang__di, .ez-tab-day__muc { transition: none; } } /* ════════════════════════════════════════════════════════════════════════════ ĐỢT B · MÀN LÀM BÀI TRÊN KHỔ LỚN Nới cột không tự làm màn học tốt hơn. Ảnh chụp sau đợt A chỉ ra ba chỗ: câu hỏi lơ lửng giữa hai vùng trống dọc mênh mông, nút *Kiểm tra* trải hết 820px, và đáp án xếp một cột thành một dải mảnh chạy dọc giữa màn. Điều màn rộng THẬT SỰ mua được cho việc học — không phải chỗ trống: · đáp án xếp lưới, mắt quét một lượt thay vì rà dọc · đoạn văn đọc hiểu ĐỨNG YÊN bên cạnh trong lúc con trả lời câu hỏi về nó · ghép cặp và phân loại có chỗ để thở ════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* ---- CỤM BÀI VỀ GIỮA MÀN, THÔI KÉO GIÃN -------------------------------- Trên điện thoại `.chan` dính đáy màn là đúng: ngón cái ở đó. Trên máy tính thì không có ngón cái nào cả, và một cái nút cách câu hỏi năm trăm điểm ảnh chỉ làm mắt phải đi hai chặng. Cho cả cụm về giữa. */ /* CAN GIUA CUM CAU HOI, KHONG CAN GIUA CA MAN. Ban dau viet `justify-content: center` cho ca `.man--bai` va no day luon THANH TIEN DO voi HANG TIM xuong giua man — chung la thanh trang thai, cho cua chung la tren dinh. Hai cai `auto` nay chi day rieng cum giua ve giua vung con lai. */ /* DS 1.0 khuon L1 (25/09): cum cau hoi dung o DAU vung noi dung (dem 48px duoi thanh tien do), khong can giua theo chieu doc; do tren live 1440 thay ~250px trong phia tren. Nut Kiem tra van theo ngay duoi cau (khong day xuong day). */ /* De bai va phep tinh phai cung mot truc. O 560px hai truc lech nhau khong ai thay; o 820px thi "Tinh:" nam sat le trai con phep tinh nam giua man. */ .hop-cau:has(> .mau-dien) .de, .hop-cau:has(> .phat-bieu) .de { text-align: center; } .cho-chon { text-align: center; } /* ---- ĐÁP ÁN XẾP LƯỚI KHI SỐ ĐÁP ÁN CHẴN -------------------------------- `:not(:has(> :last-child:nth-child(odd)))` = con cuối KHÔNG đứng ở vị trí lẻ = tổng số con chẵn. Số lẻ thì giữ một cột: chia đôi một danh sách lẻ luôn để lại một ô mồ côi ở hàng cuối, và ô mồ côi trông như một lỗi. */ .ez-lua-chon:not(.ez-lua-chon--doi):not(.ez-lua-chon--dau):not(:has(> :last-child:nth-child(odd))) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ez-khe-12); } .ez-lua-chon--doi, .ez-lua-chon--dau { gap: var(--ez-khe-12); } /* Ô điền to lên cho vừa thang chữ mới. */ .o-dien { width: 160px; min-height: 68px; } /* Ghép cặp và phân loại có chỗ thở. Mục phân loại xếp ngang: ở 560px chúng buộc phải xếp dọc, nên con phải cuộn giữa MỤC và NHÓM để ghép — mà việc ghép đòi nhìn thấy cả hai cùng lúc. */ .ghep { gap: var(--ez-khe-12); } .ghep__cot { gap: var(--ez-khe-12); } .phanloai { gap: var(--ez-khe-24); } .phanloai__muc, .phanloai__nhom { flex-direction: row; flex-wrap: wrap; } .phanloai__muc > *, .phanloai__nhom > * { flex: 1 1 200px; } } /* ---- ĐỌC HIỂU: ĐOẠN VĂN ĐỨNG YÊN BÊN CẠNH --------------------------------- Trên điện thoại con đọc đoạn văn, cuộn xuống trả lời, quên mất, cuộn lên đọc lại. Vòng đó KHÔNG phải một phần của việc luyện đọc hiểu — nó là cái giá của màn hẹp. Từ 1180px trở lên thì cái giá đó không cần trả nữa. `grid-row: 1 / -1` cho đoạn văn trải hết chiều cao cột trái; mọi thứ còn lại rơi sang cột phải. Đoạn văn dài hơn màn thì `sticky` giữ nó lại. */ @media (min-width: 1024px) { .khung:has(.man--bai .ngu-lieu) { --kho-khung: var(--ez-cot-toi-da-rong); } .hop-cau:has(> .ngu-lieu) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ez-khe-24); align-items: start; } .hop-cau > .ngu-lieu { grid-column: 1; grid-row: 1 / -1; position: sticky; top: var(--ez-khe-16); } .hop-cau:has(> .ngu-lieu) > :not(.ngu-lieu) { grid-column: 2; } .hop-cau:has(> .ngu-lieu) > .cau-con:first-of-type { margin-top: 0; } .ngu-lieu__van { font-size: var(--chu-to); line-height: 1.65; } } /* So/chu phim tren dap an (EzDapAn `ky`): hinh va luat hien o `ez/ez.css`. */ /* ════════════════════════════════════════════════════════════════════════════ ĐỢT C · MÀN NHÀ HAI CỘT — CON ĐƯỜNG LÀ THỨ CON LÀM Trên điện thoại mọi thứ buộc phải xếp chồng, nên đã có một quyết định đúng: đường học lên trước, thống kê lùi xuống. Nhưng "lùi xuống" trên màn hẹp nghĩa là *khuất*, và trên màn rộng thì không cần phải chọn nữa. CỘT TRÁI = THỨ CON LÀM (con đường, và cái nút nằm ngay trên chặng đang học). CỘT PHẢI = THỨ ĐỂ ĐỌC (chuỗi nhà, thử thách tuần, tiến bộ, nhiệm vụ). Đỉnh màn và dải đổi môn trải ngang trên cùng: chúng nói về CẢ hai cột — đổi môn là việc làm trước khi học, và nó đổi màu chính con đường bên dưới. Cùng kỹ thuật với đoạn văn đọc hiểu ở đợt B: một thứ chiếm trọn một cột bằng `grid-row`, phần còn lại rơi sang cột kia. Không một dòng JS nào phải sửa. */ /* KHUON L2 (DS 1.0, EzKhuon "Chinh va phu", 25/09): dai doi mon trai ngang; COT CHINH = dau chuong + con duong (8/12 cot may tinh, 5/8 may tinh bang); COT PHU = tuan nay, ca nha, tien bo (4/12, 3/8). Dien thoai mot cot, giu thu tu cu: con duong dung TRUOC cac khoi so (be mo app ra de hoc). */ .cot-chinh, .cot-phu { display: flex; flex-direction: column; gap: var(--khe-khoi); min-width: 0; } .cot-phu:empty { display: none; } /* Luoi 8+4 · 5+3 cua man Hoc: khuon L2 o `ez/ez.css` (data-khuon). */ .man:has(> .cot-chinh) > .dai-mon:empty { display: none; } @media (min-width: 1024px) { /* Con duong co cho roi thi moc to len cho ra mot con duong. */ .man:has(> .cot-chinh) { --moc-o: var(--ez-khe-40); --chang-dem: var(--ez-khe-16); } .man:has(> .cot-chinh) .chang__moc { font-size: var(--chu); } .man:has(> .cot-chinh) .cham { width: var(--ez-khe-12); height: var(--ez-khe-12); } } /* DAU CHUONG (L2 "Dau chuong · mau mon"): nen dam cua mon, chu tren nen dam. */ .dau-chuong { gap: var(--ez-khe-8); min-height: 160px; padding: var(--ez-khe-24); border-radius: var(--ez-bo-the); background: var(--mon-mau, var(--ez-mon-T-dam)); color: var(--ez-muc-tren-dam); } .dau-chuong .dinh__hang { margin-bottom: var(--ez-khe-8); } .dau-chuong .dinh__ten { font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); color: inherit; } .dau-chuong__ten { margin: 0; font-family: var(--ez-phong-tieu-de); font-weight: 800; color: inherit; font-size: var(--ez-chu-tieu-de-2-co); line-height: var(--ez-chu-tieu-de-2-cao); } .dau-chuong__phu { margin: 0; color: inherit; font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); } .dau-chuong .nhac, .dau-chuong .dai { margin: var(--ez-khe-8) 0 0; color: inherit; background: transparent; } /* Loi cua co trong dau chuong la MOT CAU, khong phai hop thu hai long trong khoi mau (26/09): khung vien trang trong khoi xanh doc ra thanh the trong the. */ .dau-chuong .dai { padding: 0; border: 0; border-radius: 0; font-weight: 600; } /* Ở iPad dọc (820-1179) vẫn một cột — 820px chia đôi thì mỗi cột hẹp hơn cả màn điện thoại, tức là chia cho có chứ không chia để đọc. Chỗ rộng ra dùng vào việc khác: các ô số của đỉnh màn xếp ngang thay vì chồng lên nhau. */ @media (min-width: 600px) { .tuan__be { gap: var(--ez-khe-8); } .ez-the.ds-con { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ez-khe-12); } .st-luoi { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .chon-av { gap: var(--ez-khe-12); } .chon-av:not(.chon-av__lop) { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } .av-chon { width: var(--ez-khe-64); height: var(--ez-khe-64); } .mat-dau__mot { width: 72px; height: 72px; } .chon-lop { gap: var(--ez-khe-12); } .ez-nut.nut--lop { flex: 0 1 auto; min-width: 132px; } } /* ════════════════════════════════════════════════════════════════════════════ BỘ CÂU HỎI THÊM BÉ · THANH CHỌN MÔN (09/09/2026) Duolingo đặt bộ chọn khoá học ở ĐỈNH màn và nội dung ngay dưới — người học luôn biết mình đang ở khoá nào, và đổi khoá là một chạm chứ không phải đi vào một màn cài đặt. EDUZO đã có dải môn đúng chỗ ấy từ trước, nhưng nó là một chip nhỏ lẫn giữa các khối; đợt này cho nó thành một THANH. ════════════════════════════════════════════════════════════════════════════ */ /* ---- dải bước của bộ câu hỏi ---------------------------------------------- Không dùng lại `.cham-hang` của con đường: bốn chấm ở đó mang nghĩa MỨC THÀNH THẠO, và mượn hình của một thứ đã có nghĩa là dạy sai người đọc. */ .buoc-hang { display: flex; gap: var(--ez-khe-4); margin-bottom: var(--ez-khe-8); } .buoc { height: var(--ez-khe-4); flex: 1; border-radius: var(--bo-tron); background: var(--vien); } /* BUOC DA QUA KHONG TO XANH. Mau xanh trong he nay co MOT nghia: ĐÚNG — no to o cau tra loi dung, o chang da thuoc, o ngay ca nha giu duoc nhip. Di qua mot buoc cua mot bo cau hoi khong phai mot thu be GIANH DUOC, no la thu tuc; to xanh o day la tieu tin hieu manh nhat cua app vao cho khong can. Cong `chuan-mau-gate.mjs` bat dung cho nay. */ .buoc--qua { background: var(--muc-nhe); } .buoc--nay { background: var(--nhan); } /* ---- lưới chọn môn --------------------------------------------------------- Một hàng chip cuộn ngang thì môn thứ tư trở đi nằm ngoài màn, và thứ nằm ngoài màn thì coi như không có. Ở bước chọn môn, MỌI môn phải thấy cùng lúc. */ /* Luoi chon mon: khuon L6 o `ez/ez.css` (data-khuon), 2 · 3 · 4 the mot hang. */ .chon-mon--luoi { min-width: 0; } /* Man Them be: khoi mon nam trong cot doc hep cua L1. Luoi L6 dem cot theo be ngang MAN HINH (4 cot tu 1280) nen o day moi the con ~60px, chu gay tung dong. O cot hep, mon la DANH SACH DOC (cung dang khoi "Mon sap co" ngay duoi). */ .chon-mon--ds { flex-direction: column; flex-wrap: nowrap; } .chip-mon__hinh { font-size: var(--chu-so); line-height: 1; } .chip-mon__ten { font-size: var(--chu); font-weight: 600; text-align: center; } /* ---- chọn mục tiêu tuần ---------------------------------------------------- */ .chon-muc { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .o-muc { display: flex; align-items: baseline; gap: var(--ez-khe-12); min-height: var(--cham); padding: var(--ez-khe-12) var(--ez-khe-16); text-align: left; background: var(--mat); border: 2px solid var(--vien); border-radius: var(--bo-nho); color: var(--muc); cursor: pointer; width: 100%; } .o-muc--dang { border-color: var(--muc); background: var(--chon-nen); } .o-muc__ten { font-size: var(--chu-to); font-weight: 800; } .o-muc__phu { font-size: var(--chu-phu); color: var(--muc-nhe); } /* ---- THANH CHỌN MÔN Ở ĐỈNH ------------------------------------------------- Dính trên khi cuộn: con đường dài hơn một màn, và cuộn tới chặng thứ tám mà không còn thấy mình đang học môn nào là mất chỗ neo. z-index thấp hơn `.bao` (dải báo lỗi, z-index 5): một câu lỗi phải nằm trên mọi thứ, kể cả trên thanh này. */ .dai-mon:not(:empty) { position: sticky; top: 0; z-index: 3; background: var(--nen); padding: var(--ez-khe-8) 0; margin-bottom: var(--ez-khe-4); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .dai-mon::-webkit-scrollbar { display: none; } .dai-mon .ez-chip { flex: 0 0 auto; } /* Môn ĐANG học phải nhìn ra ngay giữa một hàng chip: chỉ đổi màu viền thì ở 390px với bảy môn, mắt phải rà từng cái. */ @media (min-width: 600px) { /* Nút của bộ câu hỏi thôi trải hết bề ngang — cùng luật với nút màn làm bài. Một cái nút rộng 975px không dễ bấm hơn một cái rộng 300px. */ .man:has(> .buoc-hang) .ez-nut--lon { width: auto; min-width: 300px; align-self: center; } .man:has(> .buoc-hang) .khung-than { align-items: stretch; } .man:has(> .buoc-hang) .khung-than .ez-nut--lon { align-self: center; } /* Ở khổ rộng dải môn thôi cuộn: có chỗ cho cả bảy môn nằm một hàng. */ .dai-mon:not(:empty) { flex-wrap: wrap; overflow-x: visible; } } /* DAI NHAC CUA CO tren man Hoc (dot 18). Mau `dung` chu khong mau nhan: day la mot cau BAO TIN, khong phai mot cau goi hanh dong - be khong phai bam gi ca. */ .nhac--co { background: var(--dung-nen); color: var(--dung); border-radius: var(--bo-nho); padding: var(--ez-khe-8) var(--ez-khe-12); } /* ════════════════════════════════════════════════════════════════════════════ COMPONENT THEO FIGMA (dot 45) — nhung component Figma co ma chua co lop. Bang noi day du: `noi-dung/component-lop.json`. Cong: `thu/soat-comp.mjs` do GIA TRI THAT trong trinh duyet o tung vai, khong doc chuoi CSS. ════════════════════════════════════════════════════════════════════════════ */ /* Nut/Pha (UI-UX §6): khong hoan tac duoc. Khong bao gio noi hon nut thuan. */ /* O/Ma: ma lop co phat cho phu huynh. Danh dau, KHONG bam duoc. */ .o-ma { display: inline-flex; align-items: center; padding: var(--ez-khe-8) var(--ez-khe-12); background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); font-size: var(--chu-so-to); font-weight: 800; color: var(--muc); letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; } /* O/Bang: mot o cua bang (thoi khoa bieu, tuan cua con). Chon duoc nen chiu nguong cham. */ .o-bang { min-height: var(--cham); padding: var(--ez-khe-8); display: grid; place-items: center; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-nho); font-size: var(--chu-phu); font-weight: 400; color: var(--muc-nhe); } /* Chip/On · Chip/CanGiup: nhan TRANG THAI, khong bam duoc, khong chiu nguong cham. `nhan--on` (tim, "on lai") la mot thu khac - dung lan. */ /* Thanh/Dinh: thanh dinh cua man. Thanh KHONG bam duoc; muc trong no thi co. */ /* Dai/Nhac: cau nhac trung tinh. Dai/ChuY: CHI khi bo qua se gay hau qua that. */ .dai { padding: var(--ez-khe-8) var(--ez-khe-12); background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); font-size: var(--chu-phu); font-weight: 400; color: var(--muc-nhe); margin: 0; } .dai--chu-y { padding: var(--ez-khe-12); background: var(--sai-nen); border-color: transparent; font-size: var(--chu); color: var(--muc); } /* Luot 4 (14/10): o vo con dai nhac co vien doc ra o nhap. Bo vien, giu nen nhat. */ /* Cham luot 4 (14/10): bo vien roi thi nen nhat trung nen man, con lai dem ngang 12px lam dong chu thut khoi le the (them-mon 1280). Dai nhac vo con la dong chu tram. */ :is([data-vai="con"], :root:not([data-vai])) .dai:not(.dai--chu-y, .dai--ranh) { border-color: transparent; background: transparent; padding-inline: 0; } /* Dau/Xong: chi cho viec da xong THAT. Huy/Buoc: so buoc trong mot luong. */ .dau-xong, .huy-buoc { display: inline-grid; place-items: center; flex: 0 0 auto; padding: var(--ez-khe-4); border-radius: var(--bo-tron); font-size: var(--chu-phu); line-height: 1; color: var(--trang); font-variant-numeric: tabular-nums lining-nums; } .dau-xong { background: var(--dung); font-weight: 800; min-width: var(--ez-khe-16); min-height: var(--ez-khe-16); } .huy-buoc { background: var(--muc); font-weight: 800; min-width: var(--ez-khe-24); min-height: var(--ez-khe-24); } /* Navigation/Bottom Item: o bieu tuong 28px tren chu. Bieu tuong vao o dot 46. */ /* ════════════════════════════════════════════════════════════════════════════ VO CON THEO FIGMA (dot 46) — thanh dinh, the co dong dau, dong chon, o nhap co bieu tuong. Bang noi component: `noi-dung/component-lop.json`. ════════════════════════════════════════════════════════════════════════════ */ /* Nut, o nhap, o chon KHONG thua ke bo chu: trinh duyet gan cho chung chu he thong. Thieu dong nay thi moi nut trong app ve bang Arial trong khi chu quanh no la Lexend — do duoc o ban soi dot 46, khong cong nao bat truoc do. */ :where(button, input, select, textarea) { font-family: inherit; } /* Thanh dinh cua vo: Thanh/Dinh trai het be ngang, KHONG bo goc, va mang DAI VAI 3px mau vai ngay duoi (UI-UX §1B). */ /* The co dong dau: ten khoi ben trai, nhan ben phai. */ .the__dau { display: flex; align-items: center; justify-content: space-between; gap: var(--ez-khe-12); } .the__ten { margin: 0; font-size: var(--chu); font-weight: 800; } .the__than { display: flex; flex-direction: column; gap: var(--ez-khe-12); } .man--giua .ez-the { text-align: left; } /* Man nhan loi moi doi tac (27/09): khoi o co nhan trong man giua; nhan va chu cung dau dong, khoang cach lay dung cua man cha. */ .o-loi-moi { display: flex; flex-direction: column; gap: inherit; text-align: start; } .the--mo { opacity: .6; } /* Nhan trung tinh (so mon, so buoc) va nhan "Dang chon". Khong bam duoc — khong chiu nguong cham (UI-UX §5). "Dang chon" nen MUC, khong xanh: xanh chi cho thu be gianh duoc (`chuan-mau-gate.mjs`); ban ve to xanh cho nay. */ /* Dong chon (The/DapAn co o bieu tuong): o bieu tuong · ten + dong phu · nhan. */ .dong-chon { display: flex; align-items: center; gap: var(--ez-khe-12); width: 100%; min-height: var(--cham); padding: var(--ez-khe-12); text-align: left; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); color: var(--muc); font-size: var(--chu); font-weight: 400; } button.dong-chon { cursor: pointer; } .dong-chon--dang { border-color: var(--nhan); box-shadow: inset 0 0 0 1px var(--nhan); } .dong-chon__hinh { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--mat); color: var(--muc-nhe); font-size: var(--chu-to); line-height: 1; } .dong-chon--dang .dong-chon__hinh { color: var(--nhan); } .dong-chon__chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ez-khe-2); } .dong-chon__ten { font-size: var(--chu); font-weight: 800; } .dong-chon__phu { font-size: var(--chu-phu); color: var(--muc-nhe); } .dong-chon .ez-nhan { align-self: center; flex: 0 0 auto; } /* RA SOAT LUOT 2 (14/10): ten/dong phu mo coi ("100", "lam.") va o bieu tuong troi giua the khi chu nhieu dong. Ten can deu dong, dong phu tranh mo coi; dong co dong phu thi o bieu tuong neo dau dong chu. */ .dong-chon__ten { text-wrap: balance; } /* Cham luot 4 (14/10): ten bai o xong-phien bo lung "vi 100" xuong dong hai; nhan o so ngan ("Chuoi ngay") gay hai dong thi ba o lech day. */ .ket-ky-nang__ten { text-wrap: balance; } .ez-the-so__nhan { white-space: nowrap; } .dong-chon__phu { text-wrap: pretty; } .dong-chon:has(.dong-chon__phu) { align-items: flex-start; } /* DIEN THOAI (ra soat UI/UX 14/10): nhan ben phai an nua be ngang, ten gay 2-3 dong ("Lam xong mot / bai"). Duoi 600 nhan xuong dong duoi chu, thang le chu. */ @media (max-width: 599px) { /* Chi dong NGANG; o the doc trong luoi L6/L8 (chon mon) nhan da co cho rieng. */ /* Luot 4 (14/10): luat cu tinh san o hinh 36px; dong co ANH MAT (to hon) thi chu roi xuong duoi anh, nhan thut 120px. Nay la luoi hai cot: hinh/anh o cot dau (cao bao nhieu cung duoc), chu va nhan chung cot hai, thang le chu. */ :not([data-khuon="L6"], [data-khuon="L8"]) > .dong-chon:has(> .ez-nhan) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: var(--ez-khe-4); } :not([data-khuon="L6"], [data-khuon="L8"]) > .dong-chon:has(> .ez-nhan) > :first-child { grid-row: span 2; } :not([data-khuon="L6"], [data-khuon="L8"]) > .dong-chon > .ez-nhan { grid-column: 2; justify-self: start; align-self: start; } } /* "Chon" cuoi dong chon con: dau hieu mang hinh NUT PHU, ca dong moi la nut. */ .dong-chon__di { flex: 0 0 auto; padding: var(--ez-khe-8) var(--ez-khe-12); border: 1px solid var(--vien); border-radius: var(--bo); font-size: var(--chu); font-weight: 800; color: var(--muc); } .the-con.dong-chon { padding: var(--ez-khe-12); font-size: var(--chu); } /* Ban ve: cac be xep MOT cot trong mot the (khoi `@media` cu chia hai cot). */ .ez-the.ds-con { display: flex; flex-direction: column; gap: var(--ez-khe-8); } /* O nhap co bieu tuong: bieu tuong nam TRONG o, ben trai. */ .ez-o-co-hinh { position: relative; display: block; } .ez-o-co-hinh[hidden] { display: none; } .o-co-hinh__hinh { position: absolute; left: var(--ez-khe-8); top: 50%; transform: translateY(-50%); width: var(--ez-khe-32); height: var(--ez-khe-32); display: grid; place-items: center; pointer-events: none; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--mat); color: var(--muc-nhe); } /* Luoi lop o man dau: nut PHU. Bam la vao thang bai — khong co trang thai chon. */ .ez-the .chon-lop { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--ez-khe-8); } .ez-the .nut--lop { min-width: 0; } /* Duong lien ket (Figma: dong chu mau nhan, canh trai trong the). Van la mot nut: giu nguong cham, chi bo hinh nut. */ .nut--lien-ket { width: auto; align-self: flex-start; } .man--giua > .nut--lien-ket { align-self: center; } .buoc-chu { margin-top: calc(var(--ez-khe-8) * -1); } /* Bo cau hoi them be cung cot ay: mot cau hoi, mot cot hep, khong trai 1040px. */ /* ════════════════════════════════════════════════════════════════════════════ VO CON THEO FIGMA — LUOT 2 (dot 46): thanh duoi bon muc, chi so, bai lam, xong phien, luyen tap, nhiem vu. ════════════════════════════════════════════════════════════════════════════ */ /* Chi so o dinh man nha: nhan chu + so, hinh vien nhu Chip/Thuong. */ .hoc-hoi { margin-top: var(--ez-khe-8); } /* Nhan khoi: dong chu hoa nho dung dau mot nhom (ban ve: "CON CAN ON 3 PHAN"). */ .nhan-khoi { margin: 0; font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao); font-weight: 600; color: var(--ez-muc-phu); } /* Thanh tien do bai lam CHIA DOAN: moi cau mot doan. */ .thanh-doan { flex: 1; display: flex; gap: var(--ez-khe-4); margin: 0 var(--ez-khe-12); } .thanh-doan__mot { flex: 1; height: var(--ez-khe-8); border-radius: var(--bo-tron); background: var(--vien); } .thanh-doan__mot--dung { background: var(--dung); } .thanh-doan__mot--qua { background: var(--muc-nhe); } .thanh-doan__mot--nay { background: var(--nhan); } /* Bon dap an thanh luoi 2x2 o may tinh (ban ve). Phim so 1-4 van theo THU TU con, nen thu tu doc trai-phai-tren-duoi giu nguyen. */ @media (min-width: 600px) { .ez-lua-chon:not(.ez-lua-chon--doi):not(.ez-lua-chon--dau):has(> .ez-dap-an:nth-child(4):last-child) { display: grid; grid-template-columns: 1fr 1fr; } } /* O da chon mang ket qua sau khi kiem tra. */ /* Xong phien: the chi so co o bieu tuong tren so. */ .ez-the.gem { text-align: center; align-items: center; align-self: start; } /* the ngan, khong keo cao theo cot ben */ .gem__hinh { width: var(--ez-khe-48); height: var(--ez-khe-48); display: grid; place-items: center; border-radius: var(--ez-bo-tron); background: var(--ez-thuong-gem-nen); color: var(--ez-muc-tren-dam); } /* Nut hoc tren chang dang hoc LA hanh dong chinh cua man nha (the mo ta: "mot nut: bai tiep theo") — nen mang hinh Nut/Chinh. */ .chang__di { background: var(--ez-hanh-dong-nen); border-color: transparent; color: var(--ez-hanh-dong-tren); font-family: var(--ez-phong-tieu-de); font-size: var(--ez-chu-nut-co); font-weight: 800; border-radius: var(--ez-bo-nut); box-shadow: var(--ez-bong-nut); } .chang__di:hover { background: var(--ez-hanh-dong-di-chuot); } .chang__di:active { background: var(--ez-hanh-dong-nhan); transform: translateY(3px); box-shadow: none; } .chang__di:focus-visible { outline: none; box-shadow: var(--ez-bong-nut), var(--ez-noi-tieu-diem); } /* So gem mang mau thuong gem (DS mau-thuong.gem). */ /* Nhiem vu da xong that: vien xanh (cong chuan mau: nhiem vu da xong). */ .dong-chon.nv--dat { border-color: var(--dung); box-shadow: inset 0 0 0 1px var(--dung); } .dong-chon.nv--dat .dong-chon__hinh { color: var(--dung); } /* ════════════════════════════════════════════════════════════════════════════ VO CON THEO FIGMA — LUOT 3 (dot 46): Ho so, Nha minh, Dau tri, Them mon, Tuan cua con. ════════════════════════════════════════════════════════════════════════════ */ .nut--vua { width: auto; align-self: flex-start; } .dong-chon--mo { opacity: .55; } /* Ho so */ .ho-so__dau { display: flex; align-items: center; gap: var(--ez-khe-16); } .ho-so__dau .ez-tieu-de-2 { margin: 0; } .ds-xong { display: flex; flex-direction: column; } .ds-xong__mot { display: flex; align-items: center; gap: var(--ez-khe-12); padding: var(--ez-khe-8) 0; border-bottom: 1px solid var(--vien); font-size: var(--chu); font-weight: 600; } .ez-the.the--bo-me { gap: var(--ez-khe-8); } .the--bo-me .dong-chon__hinh { align-self: flex-start; } /* Nha minh: dai ranh gioi + bong tin co mat chu cai */ .dai--ranh { display: flex; align-items: center; gap: var(--ez-khe-8); border-style: dashed; font-weight: 600; } .dai__hinh { display: grid; place-items: center; color: var(--muc-nhe); } .tin { display: flex; align-items: flex-start; gap: var(--ez-khe-8); } .tin--toi { flex-direction: row-reverse; } .tin__mat { flex: 0 0 auto; width: var(--ez-khe-32); height: var(--ez-khe-32); border-radius: var(--bo-tron); display: grid; place-items: center; background: var(--on); color: var(--trang); font-weight: 800; font-size: var(--chu-phu); } .tin__mat--lon { background: var(--ez-mau-muc-800); } .tin__bong { max-width: 70%; padding: var(--ez-khe-8) var(--ez-khe-12); background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); } .tin--toi .tin__bong { background: var(--muc); border-color: var(--muc); color: var(--trang); } .tin--toi .tin__ai { color: var(--trang); } .tin__ai { font-size: var(--chu-phu); font-weight: 800; color: var(--muc-nhe); } .tin-go { display: flex; gap: var(--ez-khe-8); align-items: center; } .tin-go .ez-o-co-hinh { flex: 1; } .tin-go > .ez-nut { width: auto; } .tin-loi { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .tin-soan { display: flex; flex-direction: column; gap: var(--ez-khe-8); } @media (max-width: 1023px) { body:has(.ez-tab-day) .tin-soan { position: sticky; z-index: 2; bottom: calc(var(--ez-vung-cham) + var(--ez-khe-8) * 3 + env(safe-area-inset-bottom)); padding: var(--ez-khe-8) 0; background: var(--ez-nen-trang); } /* Cham luot 4 (14/10): mep tren cua khung soan cat ngang bong bong bang mot net cung, trong nhu vo bo cuc. Dai mo dan 16px tu nen len cho tin tan vao khung. */ body:has(.ez-tab-day) .tin-soan::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: var(--ez-khe-16); pointer-events: none; background: linear-gradient(to top, var(--ez-nen-trang), transparent); } } .tin-loi__dau { font-weight: 800; color: var(--sai); } /* Dau tri: the anh em */ .ae-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ez-khe-12); } .ae { align-items: center; text-align: center; } .ae__ten { font-size: var(--chu-to); font-weight: 800; } /* ════════════════════════════════════════════════════════════════════════════ VO BO ME THEO FIGMA (dot 47). Truoc dot nay `nha.js` goi mot loat lop KHONG TON TAI trong he (`so-to`, `chinh`, `nut-tron`, `the--nhan`, `hang-chinh`, `o--ma`, `phu--nho`…) — mot lop khong ton tai thi khong bao loi, no chi ve bang kieu mac dinh cua trinh duyet. Ban soi dot 47 do ra. ════════════════════════════════════════════════════════════════════════════ */ /* O doi lop cua vo co (dot 66): nam trong thanh dinh, doc nhu chu phu cho toi khi bam. Khong mang mau nhan - day la chon ngu canh, khong phai hanh dong chinh. */ .doi-lop { font-size: var(--chu-phu); font-weight: 600; color: var(--muc); background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-nho); min-height: 36px; padding: var(--ez-khe-4) var(--ez-khe-12); max-width: 60vw; cursor: pointer; } @media (pointer: coarse) { .doi-lop { min-height: var(--cham); } } .chip-hang { display: flex; gap: var(--ez-khe-8); flex-wrap: wrap; } /* Chip cuon mot hang (De theo mon, cham 15/10): bay lop xuong hai hang o 390 doc nhu hai nhom. Cung mep mo voi .chon-av__lop; dem cuoi de chip cuoi ra khoi vung mo. */ .chip-hang--cuon { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline-end: var(--ez-khe-32); -webkit-mask-image: linear-gradient(to right, var(--ez-muc-chinh) calc(100% - var(--ez-khe-32)), transparent); mask-image: linear-gradient(to right, var(--ez-muc-chinh) calc(100% - var(--ez-khe-32)), transparent); } .chip-hang--cuon::-webkit-scrollbar { display: none; } .chip-hang--cuon .ez-chip { flex: 0 0 auto; } .so-to { margin: 0; font-size: var(--chu-so-to); font-weight: 800; line-height: var(--cao-de); letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; } .chinh { margin: 0; font-size: var(--chu-to); font-weight: 800; } .phu--nho { font-size: var(--chu-phu); } .ez-the.the--ba-cau { gap: var(--ez-khe-8); } /* Viec CO NHO: vien trai mau nhan (ban ve) — bo me phan biet viec co giao voi loi khuyen cua may chi bang cach nhin (`man-nha.js`, vien_nhan). */ /* Vao lop thanh cong: trung tinh, KHONG xanh — do la viec bo me vua lam, khong phai thu be gianh duoc (cong chuan mau). */ .hang-nut { display: flex; gap: var(--ez-khe-8); flex-wrap: wrap; } .hang-nut .ez-nut { width: auto; } /* Nhip song: bo dem - so + */ .hang-chinh { display: flex; align-items: center; gap: var(--ez-khe-12); } .nut-tron { width: var(--cham); height: var(--cham); display: grid; place-items: center; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--mat); font-size: var(--chu-to); font-weight: 800; color: var(--muc); cursor: pointer; } .nut-tron:disabled { opacity: .45; cursor: default; } /* O ma lop: nhan nho TRONG o, ma to ben duoi (ban ve Vao lop). Ca khung la nhan cua o nhap — bam dau cung vao o, nen nguong cham tinh tren ca khung. */ .ez-o-co-nhan { display: flex; flex-direction: column; gap: var(--ez-khe-2); min-height: var(--cham); padding: var(--ez-khe-8) var(--ez-khe-12); background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); cursor: text; } .ez-o-co-nhan:focus-within { border-color: var(--nhan); } .o-co-nhan__nhan { font-size: var(--chu-phu); color: var(--muc-nhe); } .o--ma { letter-spacing: .02em; } .dong-chon__mat { flex: 0 0 auto; width: var(--ez-khe-32); height: var(--ez-khe-32); border-radius: var(--bo-tron); display: grid; place-items: center; background: var(--on); color: var(--trang); font-weight: 800; } .man--giua .o--pin { max-width: 240px; align-self: center; } /* ════════════════════════════════════════════════════════════════════════════ VO THAY CO THEO FIGMA (dot 48). Truoc dot nay `lop.js` goi mot loat lop KHONG TON TAI (`cot`, `buoc-dau`, `vong-so`, `ds-em`, `hang-em`, `chip`, `ma-lop`, `muc--mo`), va `section.buoc` TRUNG ten voi vach buoc 4px cua vo con — ba buoc cua co bi ep cao 4px. Nay doi ten: `buoc-khoi`. ════════════════════════════════════════════════════════════════════════════ */ .tab-hang--dinh { flex-wrap: wrap; } .tab-hang--dinh .ez-tab { flex: 0 0 auto; } :where(.cot-lop) { display: flex; flex-direction: column; gap: var(--khe-khoi); } /* Ba buoc: huy hieu so (Huy/Buoc) + cau hoi, roi phan cua buoc thut vao. */ .buoc-khoi { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .buoc-khoi__dau { display: flex; align-items: center; gap: var(--ez-khe-8); } .buoc-khoi__hoi { margin: 0; font-size: var(--chu); font-weight: 800; } .buoc-khoi > :not(.buoc-khoi__dau) { margin-left: calc(var(--ez-khe-24) + var(--ez-khe-8)); } .ds-chang { display: flex; flex-direction: column; gap: var(--ez-khe-8); } /* O vuong cua dong chon chang: dau tick khi dang chon — MUC, khong xanh (chon mot chang khong phai thu gianh duoc). */ .o-vuong { flex: 0 0 auto; width: var(--ez-khe-24); height: var(--ez-khe-24); display: grid; place-items: center; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--nen); font-size: var(--chu-phu); font-weight: 800; color: var(--trang); } .o-vuong--dang { background: var(--muc); border-color: var(--muc); } /* Hang em: ten · thanh ty le · nhan trang thai. XEP THEO TEN (the mo ta). */ .ds-em { display: flex; flex-direction: column; } .hang-em { display: flex; align-items: center; gap: var(--ez-khe-12); padding: var(--ez-khe-8) 0; } /* Dot 66: duong ke thuoc KHOI em, khong thuoc dong ten (xem `veHang`, lop.js). */ .em-khoi { border-bottom: 1px solid var(--vien); } .hang-em__ten { flex: 1; min-width: 0; font-weight: 600; } /* Cong doi tac (cham lai 22/30): dai viec ke mang nut ben trong; the ma gom hang ma + link + nut chep, link nam tren nen chim cho thay day la thu de chep. */ .dai--viec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ez-khe-12); } .dai--viec > p { margin: 0; flex: 1 1 20rem; min-width: 0; } .dai--viec > .ez-nut { flex: none; } .the-ma .hang-em + .hang-em { border-top: 1px solid var(--ez-vien-nhat); } .the-ma__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ez-khe-12); } .the-ma__chu { flex: 1 1 16rem; min-width: 0; padding: var(--ez-khe-8) var(--ez-khe-12); border-radius: var(--ez-bo-nut); background: var(--ez-nen-chim); color: var(--ez-muc-phu); overflow-wrap: anywhere; user-select: all; } .the-ma__link > .ez-nut { flex: none; } /* Hang ma doi tac o kho hep (cham 15/10): "MAU05A · Goi tu van" gay chu, so luot bi ep. Ten mot tang; luot bam + nhan trang thai tang duoi. */ @media (max-width: 599px) { .hang-em--ma { flex-wrap: wrap; row-gap: var(--ez-khe-4); } .hang-em--ma > .hang-em__ten { flex: 1 0 100%; } .hang-em--ma > .ez-phu { flex: 1; } } .thanh-em { flex: 0 0 72px; height: var(--ez-khe-8); border-radius: var(--bo-tron); background: var(--vien); overflow: hidden; } .thanh-em__day { display: block; height: 100%; border-radius: var(--bo-tron); background: var(--muc-nhe); } .thanh-em__day--sai { background: var(--nhan); } .thanh-em__day--dung { background: var(--dung); } /* COT NOI DUNG THEO VAI cho hai vo nguoi lon, o MOI kho may tinh (ban ve: thay co 720, bo me 560). Ba khoi @media cu dat --kho-khung 720/1040/1160 cho vo con — nhung man thay co trai 1040px la mot bang tinh, khong phai nam phut giua hai tiet. Do rieng tinh cu the hon `.khung:has(...)` nen khong can !important. */ @media (min-width: 1024px) { /* ba vo nguoi lon: cot theo vai.toi-da (da khai o khoi khuon) */ } /* Dot 50: nut "Mo" cua cua PIN canh GIUA cung o PIN — o PIN dung giua man, nut lech trai thi mat doc lech theo (do o 390px). */ .man--giua > .o--pin ~ .nut--vua { align-self: center; } /* Dot 51 (cong soat-lop): dai bao THUONG (bao(cau) khong kem loai) chua tung co nen — chu tin nhan dinh tren man, trong suot, de len noi dung dang cuon. */ /* Dot 58: the goi o vo bo me — cac dong trong the dung khe cua the, khong cong them le mac dinh cua

(le doi tung dong ra hai lan). */ .goi p { margin: 0; } /* Dot 59: dong "Nha cho nghi hom nay" duoi ten em (man Nhin ngang lop cua co). */ .hang-em__nghi { margin: calc(-1 * var(--ez-khe-4)) 0 var(--ez-khe-4); font-size: var(--chu-phu); } /* Dot 66: dong "vuong o dau" duoi ten em can giup, va nhom "on" gap lai. */ .hang-em__vuong { margin: calc(-1 * var(--ez-khe-4)) 0 var(--ez-khe-8); font-size: var(--chu-phu); } .ez-phu.hang-em__vuong { color: var(--muc); } /* Cong doi tac (dien tap 28/09): GIA TRI dai xuong dong duoi nhan (Thong tin nhan tien, Chinh sach). Cung co chu dong gia tri, khong thu nho nhu dong phu `hang-em__vuong`. */ .hang-em__gia-dai { margin: calc(-1 * var(--ez-khe-4)) 0 var(--ez-khe-8); color: var(--muc); } .gap-on { margin-top: 0; } /* `summary` GIU display mac dinh (list-item) de con dau tam giac - dat flex thi dau bien mat va nhom gap doc ra nhu mot nhan chet, khong ai biet bam duoc. */ .gap-on > summary { cursor: pointer; padding: var(--ez-khe-12) 0; } .gap-on > .dong-chon { margin-top: var(--ez-khe-8); } /* ---- BO CUC GIU LAI SAU KHI THANH PHAN VE `ez/ez.css` (DS 1.0 Pha 2) -------- */ .ez-tien-do { margin-top: var(--ez-khe-8); } .thanh--bai { flex: 1; margin: 0 var(--ez-khe-12); } /* Luat co gian DS 1.0: nhan nut MOT dong; hang chat thi NUT xuong hang, khong gay chu trong nut. `.tin-go` giu nguyen mot hang (o go + nut gui). */ .ez-nut { white-space: nowrap; } /* Nut CHU (lien ket) la mot dong chu, khong phai mot khoi: hep thi xuong dong. */ .ez-nut--chu, .nut--lien-ket { white-space: normal; } .suy-ngam__nut, .hang-nut { flex-wrap: wrap; } .suy-ngam__nut > .ez-nut, .hang-nut > .ez-nut { flex: 1 1 auto; } /* The so ba o (XP · chuoi ngay · gem) o may hep: so lon khong duoc tran the (luat co gian: the cao len, khong cat). Tu 600 tro len giu bac so lieu day du. */ /* Bieu tuong tren the so mang MAU THUONG cua dung loai (DS mau-thuong). */ /* ---- LAM BAI (DS 1.0 Pha 5) ------------------------------------------------ */ /* Chi dan: mot dong, nho hon de, mau muc phu. */ .chi-dan { margin: 0; font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); font-weight: 600; color: var(--ez-muc-phu); } /* Luot 4 (14/10): dong nguon bai mo coi "an dung" o 1280. */ .chi-dan { text-wrap: balance; } /* Ket qua tren o da chon: bieu tuong ben phai (EzDapAn dung/sai). */ .o-chon__ket { margin-left: auto; display: inline-flex; flex: none; } .ez-lua-chon--doi .ez-dap-an, .ez-lua-chon--dau .ez-dap-an, .o-chon--dau { justify-content: center; } /* O dung hien khi be chon sai: vien dut + nhan "Đáp án đúng" (EzDapAn loi-giai). */ .ez-dap-an--loi-giai { flex-wrap: wrap; } .o-chon__nhan-dung { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ez-khe-4); font-family: var(--ez-phong-than); font-size: var(--ez-chu-nhan-co); font-weight: 600; color: var(--ez-hoc-dung-dam); } /* EzBanPhimSo: 3 cot, phim cao vung cham - 4, so Nunito 800 (DS 1.0 Pha 5). */ .ban-phim-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ez-khe-8); margin-top: var(--ez-khe-12); } .ban-phim-so__phim { min-height: calc(var(--ez-vung-cham) - 4px); border: 1.5px solid var(--ez-vien-nhat); border-radius: var(--ez-bo-nut); background: var(--ez-nen-the); color: var(--ez-muc-chinh); box-shadow: var(--ez-bong-nut-phu); display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; font-family: var(--ez-phong-so); font-weight: 800; font-size: var(--ez-bt-20); font-variant-numeric: tabular-nums; } .ban-phim-so__phim--phu { background: var(--ez-nen-chim); } .ban-phim-so__phim:active { transform: translateY(2px); box-shadow: none; } .ban-phim-so__phim:focus-visible { outline: none; box-shadow: var(--ez-noi-tieu-diem); } /* ---- HINH THUC BUOI · TRO CHOI (DS 1.0 Pha 7a/7b) ------------------------- */ .ket-ky-nang { display: flex; flex-direction: column; align-items: center; gap: var(--ez-khe-4); margin: 0; } .ket-ky-nang__nhan { font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao); font-weight: 600; color: var(--ez-muc-phu); } .ket-ky-nang__ten { font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-than-lon-co); color: var(--ez-muc-chinh); } .ae--1 .av--chu { background: var(--ez-tro-choi-nguoi-1-nhat); color: var(--ez-tro-choi-nguoi-1); box-shadow: inset 0 0 0 2px var(--ez-tro-choi-nguoi-1); } .ae--2 .av--chu { background: var(--ez-tro-choi-nguoi-2-nhat); color: var(--ez-tro-choi-nguoi-2); box-shadow: inset 0 0 0 2px var(--ez-tro-choi-nguoi-2); } /* O hinh trong trang thai rong va man ket: can giua, khong keo het cot. */ .ez-trong-vui .ez-o-hinh, .man--mung > .ez-o-hinh { align-self: center; margin: 0 auto; } /* NHA MINH (vo bo me, ban ve DS 1.0): ba cau trong khung 720; tu 600 cau 1 trai ngang, cau 2 va cau 3 dung canh nhau. Thu tu doc van 1 -> 2 -> 3 (BO-ME.md). */ /* Luoi: khuon L3 (`ez/ez.css`), cau 1 nhip 12, cau 2 va 3 nhip 6. */ .ba-cau { align-items: stretch; } /* NHA MINH + BAO CAO bo me (DS 1.0, ban ve m6 · vo-03 · ct-bo-me) ---------- */ .the__dau { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ez-khe-12); } .the__tom { margin: 0; font-weight: 600; color: var(--ez-muc-chinh); } .so-to--lon { font-size: calc(var(--ez-chu-so-lieu-co) * 1.4); line-height: 1.05; } .viec-tiep { display: flex; flex-direction: column; gap: var(--ez-khe-4); padding-top: var(--ez-khe-12); border-top: 1px solid var(--ez-vien-nhat); } .viec-tiep .chinh, .viec-tiep .ez-phu { margin: 0; } .the--hom-nay .ez-nut--chinh { width: 100%; } /* Bieu do cot bay ngay: hom nay dam, ngay khac nhat, ngay trong la gach mong. */ .bd-tuan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ez-khe-8); align-items: end; } .bd-tuan__o { display: flex; flex-direction: column; align-items: center; gap: var(--ez-khe-8); min-width: 0; } .bd-tuan__ray { width: 100%; height: var(--ez-khe-80); display: flex; align-items: flex-end; justify-content: center; } .bd-tuan--so .bd-tuan__ray { height: var(--ez-khe-96); } .bd-tuan__cot { width: min(100%, var(--ez-khe-48)); background: var(--ez-mau-tim-200); border-radius: var(--ez-bo-6) var(--ez-bo-6) var(--ez-bo-4) var(--ez-bo-4); } .bd-tuan__o--nay .bd-tuan__cot { background: var(--ez-hanh-dong-nen); } .bd-tuan__cot--trong { height: var(--ez-khe-4); background: var(--ez-mau-xam-200); border-radius: var(--ez-bo-tron); } .bd-tuan__nhan { font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao); color: var(--ez-muc-phu); } .bd-tuan__o--nay .bd-tuan__nhan { color: var(--ez-muc-chinh); font-weight: 800; } .bd-tuan__so { font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao); color: var(--ez-muc-phu); min-height: var(--ez-chu-nhan-cao); } /* Ky nang theo mon: bieu tuong mau mon · ten · thanh mau mon dam · phan tram. */ .kn-mon { display: grid; grid-template-columns: var(--ez-khe-24) max-content minmax(0, 1fr) 3rem; align-items: center; gap: var(--ez-khe-12); } .kn-mon__hang { display: contents; } .kn-mon__hinh { display: inline-flex; } .kn-mon__ten { font-weight: 600; color: var(--ez-muc-chinh); } .kn-mon__ray { height: var(--ez-khe-8); background: var(--ez-mau-xam-100); border-radius: var(--ez-bo-tron); overflow: hidden; } .kn-mon__day { height: 100%; border-radius: var(--ez-bo-tron); } .kn-mon__so { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ez-muc-chinh); } /* Bao cao tuan: hai con so lon canh nhau tren bieu do co so. */ .bao-tuan__o p { margin: 0; } .bao-tuan__doi { display: inline-flex; align-items: center; gap: var(--ez-khe-4); font-weight: 600; color: var(--ez-muc-phu); } .bao-tuan__doi--len { color: var(--ez-hoc-dung-dam); } .ds-vuong { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ez-khe-8); } .ds-vuong li { display: flex; justify-content: space-between; gap: var(--ez-khe-12); padding: var(--ez-khe-8) var(--ez-khe-12); background: var(--ez-hoc-can-on-nen); border-radius: var(--ez-bo-8); } /* Hoat dong gan day: gio · bieu tuong · hai dong chu. */ .hd-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--khe-khoi); } .hd-ds__dong { display: grid; grid-template-columns: 4.5rem var(--ez-khe-32) minmax(0, 1fr); align-items: start; gap: var(--ez-khe-12); } .hd-ds__khi { color: var(--ez-muc-phu); padding-top: var(--ez-khe-4); } .hd-ds__hinh { display: inline-flex; align-items: center; justify-content: center; width: var(--ez-khe-32); height: var(--ez-khe-32); border-radius: var(--ez-bo-8); background: var(--ez-hoc-dang-hoc-nen); color: var(--ez-hanh-dong-nen); } .hd-ds__hinh--tot { background: var(--ez-hoc-dung-nen); color: var(--ez-hoc-dung-dam); } .hd-ds__chu { display: flex; flex-direction: column; gap: var(--ez-khe-2); min-width: 0; } .hd-ds__chu .chinh { font-weight: 600; color: var(--ez-muc-chinh); } /* Doi chieu chuong trinh (bo me): cot so chi mang "003", hinh 24; o 390 cot chu duoc khoang 250px thay vi 190px cua luoi huong dan (cot thoi gian 4.5rem). */ .hd-ds--doi-chieu .hd-ds__dong { grid-template-columns: 2.25rem var(--ez-khe-24) minmax(0, 1fr); gap: var(--ez-khe-8); } .hd-ds--doi-chieu .hd-ds__hinh { width: var(--ez-khe-24); height: var(--ez-khe-24); border-radius: var(--ez-bo-8); } .hd-ds__hinh--co-bai { background: var(--ez-nen-chim); color: var(--ez-muc-chinh); } /* Chua co bai: vong net dut rong (hinh dac circle-dashed doc nhu mot cham den o co 18). */ .hd-ds--doi-chieu .hd-ds__hinh--chua { background: transparent; border: 1px dashed var(--ez-vien-dam); border-radius: var(--ez-bo-tron); } @media (min-width: 720px) { .hd-ds--doi-chieu .hd-ds__dong { gap: var(--ez-khe-12); } } .the--ba-cau .the__ten, .bao-cao .the__ten { margin: 0; font-family: var(--ez-phong-tieu-de); font-size: var(--ez-chu-than-lon-co); line-height: var(--ez-chu-than-lon-cao); font-weight: 800; color: var(--ez-muc-chinh); } /* LOP · TONG QUAN thay co (DS 1.0, ban ve m7 · vo-04): ba the tren, ban do nhiet duoi. Tu 1024 ba the canh nhau; the dau vien nhan (viec chinh). */ /* Lop tong quan: khuon L3 (ba the nhip 4 + ban do nhip 12). */ .lop-tq > .ez-the { gap: var(--ez-khe-8); } .lop-tq > .ez-the :is(.so-to, p) { margin: 0; } .nhan-khoi--canh-bao { display: inline-flex; align-items: center; gap: var(--ez-khe-4); color: var(--ez-hoc-can-on-dam); } .the--lop-vuong .the__ten { margin: 0; font-family: var(--ez-phong-tieu-de); font-size: calc(var(--ez-chu-than-lon-co) * 1.3); line-height: var(--ez-chu-than-lon-cao); font-weight: 800; } .the--lop-vuong .ez-nut--chinh { align-self: flex-start; } .ez-the.ban-do { padding: 0; overflow: hidden; } .ban-do__dau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ez-khe-12); padding: var(--ez-khe-16) var(--ez-khe-20); } .ban-do__dau .the__ten { margin: 0; margin-right: auto; font-family: var(--ez-phong-tieu-de); font-size: var(--ez-chu-than-lon-co); font-weight: 800; } .ban-do__thang { display: inline-flex; align-items: center; gap: var(--ez-khe-4); } .ban-do__thang .nhiet { display: inline-flex; align-items: center; justify-content: center; width: var(--ez-khe-24); height: var(--ez-khe-24); border-radius: var(--ez-bo-4); font-size: var(--ez-chu-nhan-co); } .ban-do__cuon { overflow-x: auto; border-top: 1px solid var(--ez-vien-nhat); } /* The ban do lop chua co bai (27/09): the padding 0 cho bang tran vien, nen cau trong can le rieng cung thang dau the. */ .ban-do__trong { margin: 0; padding: var(--ez-khe-16) var(--ez-khe-20); border-top: 1px solid var(--ez-vien-nhat); } .ban-do__bang { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ban-do__bang th, .ban-do__bang td { padding: var(--ez-khe-12) var(--ez-khe-12); border-bottom: 1px solid var(--ez-vien-nhat); text-align: center; } .ban-do__bang thead th { background: var(--ez-nen-chim); color: var(--ez-muc-phu); font-weight: 600; font-size: var(--ez-chu-nhan-co); vertical-align: bottom; min-width: 7rem; } .ban-do__bang .ban-do__ten { text-align: left; font-weight: 700; color: var(--ez-muc-chinh); white-space: nowrap; position: sticky; left: 0; background: var(--ez-nen-the); z-index: 1; min-width: 9rem; } .ban-do__bang thead .ban-do__ten { background: var(--ez-nen-chim); } .ban-do__bang td.nhiet { font-weight: 700; } .ban-do__co { text-align: left; min-width: 11rem; } .ban-do__co .ez-nhan + .ez-nhan { margin-top: var(--ez-khe-4); } .ban-do__co .ez-nhan { display: inline-flex; align-items: center; gap: var(--ez-khe-4); margin-right: var(--ez-khe-4); } /* O NHIET theo thang LAM cua vai thay co, khong theo tim hanh dong (ra soat UI/UX 14/10): o muc 4 tim dam trong y het nut bam, ma o nhiet khong bam duoc. */ .nhiet--trong { background: var(--ez-nen-the); color: var(--ez-muc-mo); } .nhiet--0 { background: var(--ez-mau-lam-50); color: var(--ez-muc-chinh); } .nhiet--1 { background: var(--ez-mau-lam-100); color: var(--ez-muc-chinh); } .nhiet--2 { background: var(--ez-mau-lam-200); color: var(--ez-muc-chinh); } .nhiet--3 { background: var(--ez-mau-lam-400); color: var(--ez-muc-chinh); } /* 27/09: chu trang tren tim-400 chi 2,74:1 (duoi WCAG AA) */ .nhiet--4 { background: var(--ez-mau-lam-700); color: var(--ez-muc-tren-dam); } /* MAN HOC CUA CON · DS 1.0 (ban ve m1 · m2) ------------------------------ Tam dau: dong nho · ten con duong · "N tren M bai da thuoc". Cap 1 nen dam mau mon (m1), cap 2 nen nhat mau mon chu mau mon dam (m2). */ .dau-chuong__nho { margin: 0; font-weight: 600; font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); color: inherit; opacity: .9; } [data-tuoi="cap-2"] .dau-chuong { background: var(--mon-nen, var(--ez-mon-T-nen)); color: var(--mon-mau, var(--ez-mon-T-dam)); border: 1px solid var(--mon-mau, var(--ez-mon-T-dam)); min-height: 0; } /* Bai da thuoc gom mot dong mo ra duoc. */ .da-thuoc { background: var(--ez-nen-the); border: 1px solid var(--ez-vien-nhat); border-radius: var(--ez-bo-the); } .da-thuoc__tom { display: flex; align-items: center; gap: var(--ez-khe-12); min-height: var(--cham); padding: var(--ez-khe-12) var(--ez-khe-16); cursor: pointer; list-style: none; } .da-thuoc__tom::-webkit-details-marker { display: none; } .da-thuoc__hinh { display: inline-flex; color: var(--ez-hoc-dung-dam); } .da-thuoc__so { font-weight: 800; color: var(--ez-muc-chinh); margin-right: auto; } .ez-nhan.da-thuoc__on { display: inline-flex; align-items: center; gap: var(--ez-khe-4); } .da-thuoc__mo { display: inline-flex; color: var(--ez-muc-phu); transform: rotate(90deg); transition: transform .15s; } .da-thuoc[open] .da-thuoc__mo { transform: rotate(-90deg); } .da-thuoc .chang { border: 0; border-top: 1px solid var(--ez-vien-nhat); border-radius: 0; background: transparent; } .da-thuoc .chang::before { display: none; } /* Bai dang hoc: the lon, vien nhan, chip "Dang hoc", thanh bon nac, nut to. */ .duong .chang--dang_hoc { flex-direction: column; align-items: stretch; gap: var(--ez-khe-12); padding: var(--ez-khe-20) var(--ez-khe-24); border: 2px solid var(--ez-hanh-dong-nen); } .duong .chang--dang_hoc::before { display: none; } .chang__dau { display: flex; align-items: center; justify-content: space-between; gap: var(--ez-khe-12); } .duong .chang--dang_hoc .chang__moc.chip-dang { width: auto; height: auto; border: 0; border-radius: var(--ez-bo-tron); display: inline-flex; align-items: center; gap: var(--ez-khe-8); padding: var(--ez-khe-4) var(--ez-khe-12); background: var(--ez-hoc-dang-hoc-nen); color: var(--ez-hanh-dong-nen); font-size: var(--chu-phu); } .chang__so { font-weight: 600; color: var(--ez-muc-phu); font-size: var(--chu-phu); } .duong .chang--dang_hoc .chang__ten { font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-tieu-de-2-co); line-height: var(--ez-chu-tieu-de-2-cao); color: var(--ez-muc-chinh); margin-bottom: var(--ez-khe-12); } .duong .chang--dang_hoc .nhan-khoi { margin: 0 0 var(--ez-khe-8); } .muc-nac { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ez-khe-4); margin-bottom: var(--ez-khe-trong-khoi); } .muc-nac__o { display: flex; flex-direction: column; gap: var(--ez-khe-4); min-width: 0; } .muc-nac__vach { height: var(--ez-khe-8); border-radius: var(--ez-bo-tron); background: var(--ez-mau-xam-200); } .muc-nac__o--day .muc-nac__vach { background: var(--mon-mau, var(--ez-hanh-dong-nen)); } .muc-nac__chu { font-size: var(--ez-chu-nhan-co); line-height: var(--ez-chu-nhan-cao); color: var(--ez-muc-phu); white-space: nowrap; } /* The dang hoc hep (cot chinh L2 o bang doc ~400px): bon nhan duoi nac gay tung chu. Muc hien tai da noi o dong "Mức thuộc bài · …" ngay tren, nen o day chi giu nac. */ .chang--dang_hoc { container-type: inline-size; } @container (max-width: 360px) { .muc-nac__chu { display: none; } } .muc-nac__o--dang .muc-nac__chu { font-weight: 800; color: var(--ez-muc-chinh); } .duong .chang--dang_hoc .chang__di { display: inline-flex; align-items: center; justify-content: center; gap: var(--ez-khe-8); } /* Bai sau: dong nho, o bieu tuong vuong, khong nen the. */ .duong .chang--chua_toi, .duong .chang--khoa { background: transparent; border: 0; padding-top: var(--ez-khe-4); padding-bottom: var(--ez-khe-4); align-items: center; } .duong .chang--chua_toi .chang__moc, .duong .chang--khoa .chang__moc { border-radius: var(--ez-bo-12); background: var(--ez-nen-the); border: 1px solid var(--ez-vien-nhat); color: var(--ez-muc-phu); } .duong .chang--chua_toi .chang__ten, .duong .chang--khoa .chang__ten { color: var(--ez-muc-chinh); } .duong .chang--chua_toi::before, .duong .chang--khoa::before { top: calc(var(--ez-khe-4) + var(--moc-o)); bottom: calc(-1 * var(--ez-khe-4)); background: var(--ez-vien-nhat); } /* Cot phu: "Tuan nay cua " — vong muc tieu + hai o so. */ .ez-the.tuan-be { display: flex; flex-direction: column; gap: var(--khe-khoi); } .tuan-be .the__ten, .tuan .tuan__ten { margin: 0; font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-than-lon-co); color: var(--ez-muc-chinh); } .tuan .tuan__ten { display: inline-flex; align-items: center; gap: var(--ez-khe-8); } .tuan-be__hang { display: flex; align-items: center; gap: var(--ez-khe-16); } /* Cot phu hep (L2 5+3 o bang doc, ~250px): vong va chu xep DOC thay vi ep chu thanh mot cot tung tu va tran khoi the. Do theo be rong cua CHINH the, khong theo man. */ .ez-the.tuan-be { container-type: inline-size; } @container (max-width: 300px) { .tuan-be__hang { flex-direction: column; align-items: flex-start; } } .vong-muc { --pct: 0%; flex: 0 0 auto; width: var(--ez-khe-96); height: var(--ez-khe-96); border-radius: var(--ez-bo-tron); display: grid; place-items: center; background: conic-gradient(var(--ez-hanh-dong-nen) var(--pct), var(--ez-mau-xam-200) 0); } .vong-muc::before { content: ''; grid-area: 1 / 1; width: calc(100% - var(--ez-khe-16)); height: calc(100% - var(--ez-khe-16)); border-radius: var(--ez-bo-tron); background: var(--ez-nen-the); } .vong-muc__so { grid-area: 1 / 1; position: relative; font-weight: 800; font-size: var(--ez-chu-than-lon-co); color: var(--ez-muc-chinh); } .tuan-be__chu p { margin: 0; } .tuan-be__muc { font-weight: 800; font-size: var(--ez-chu-than-lon-co); color: var(--ez-muc-chinh); } .tuan-be__o-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: var(--ez-khe-12); } .tuan-be__o-hang:not(:has(.tuan-be__o:not([hidden]))) { display: none; } .tuan-be__o { padding: var(--ez-khe-12); border-radius: var(--ez-bo-12); } .tuan-be__o p { margin: 0; } .tuan-be__o--chuoi { background: var(--ez-he-thong-loi-nen); color: var(--ez-he-thong-loi-dam); } .tuan-be__o-dau { display: flex; align-items: center; gap: var(--ez-khe-4); } .tuan-be__so { font-weight: 800; font-size: var(--ez-chu-than-lon-co); } .tuan-be__nhan { font-size: var(--chu-phu); font-weight: 600; } .man .duong .muc-nac .cham { width: 100%; height: var(--ez-khe-8); border: 0; border-radius: var(--ez-bo-tron); background: var(--ez-mau-xam-200); } .man .duong .muc-nac .cham--day { background: var(--mon-mau, var(--ez-hanh-dong-nen)); } .dau-chuong .dinh__hang { display: flex; align-items: center; gap: var(--ez-khe-8); } .duong .chang--chua_toi .chang__moc { font-size: var(--chu-phu); font-weight: 800; } /* MAN LAM BAI · DS 1.0 (ban ve m3) --------------------------------------- */ .an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Nut thoat bai: giu mat cu (mau muc chinh, rong bang vung cham). Truoc buoc 3b luat nay thang bi danh `:where(.nut--chu)` vi bi danh co do uu tien 0; nay phai mang ca lop `ez-nut` moi thang. Ban ve (M3 Trac nghiem) ve dau X mau muc-phu: CHO ANH CHOT, xem mien tru trong `thu/ghi-de-ds-gate.mjs`. */ .ez-nut.bai-thoat, .ez-nut.bai-thoat:disabled { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cham); color: var(--ez-muc-chinh); } .man--bai .chi-dan { display: flex; align-items: center; gap: var(--ez-khe-8); text-align: left; align-self: stretch; color: var(--mon-mau, var(--ez-muc-phu)); font-weight: 600; min-height: var(--cham); } .phan-hoi__xp { display: inline-flex; align-items: center; gap: var(--ez-khe-4); margin-left: auto; font-weight: 800; color: var(--ez-he-thong-canh-bao-dam); } .ez-phan-hoi .ez-nut--lon { width: 100%; margin-top: var(--ez-khe-12); } .man--bai .chi-dan .hinh { flex: 0 0 auto; width: var(--ez-khe-20); height: var(--ez-khe-20); } /* Man ket buoi (ban ve m5): ba o so nen nhat theo loai thuong. */ /* DAU TRI · DS 1.0 (ban ve tc-dau-tri) ----------------------------------- */ .ds-doi-thu { display: flex; flex-direction: column; gap: var(--ez-khe-8); margin: 0; } .dau-dinh { display: flex; align-items: center; justify-content: space-between; gap: var(--ez-khe-12); } .dau-dinh__ten { font-weight: 800; color: var(--ez-muc-chinh); } .dau-dinh__gio { display: inline-flex; align-items: center; gap: var(--ez-khe-4); font-size: var(--chu-phu); color: var(--ez-muc-phu); } .dau-cho { display: inline-flex; align-items: center; gap: var(--ez-khe-8); align-self: center; padding: var(--ez-khe-4) var(--ez-khe-12); border-radius: var(--ez-bo-tron); background: var(--ez-he-thong-canh-bao-nen); color: var(--ez-he-thong-canh-bao-dam); font-weight: 700; } .dau-cho__cham { width: var(--ez-khe-8); height: var(--ez-khe-8); border-radius: var(--ez-bo-tron); background: currentColor; } /* SANH TRO CHOI · XO · CO VUA (DS 1.0 Pha 7b, ban ve tc-sanh · tc-xo · tc-co-vua) */ /* Luoi sanh: khuon L8 o `ez/ez.css` (2 · 3 · 3 the mot hang). */ .sanh__the { display: flex; flex-direction: column; align-items: stretch; gap: var(--ez-khe-8); padding: var(--ez-khe-12); text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--ez-nen-the); border: 1px solid var(--ez-vien-nhat); border-radius: var(--ez-bo-the); } .sanh__the:hover { border-color: var(--ez-vien-dam); } .sanh__bia { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--ez-bo-8); background: var(--ez-hoc-dang-hoc-nen); color: var(--ez-hanh-dong-nen); } .sanh__ten { display: inline-flex; align-items: center; gap: var(--ez-khe-8); font-weight: 800; color: var(--ez-muc-chinh); } .sanh__ten .hinh { color: var(--ez-hanh-dong-nen); } .sanh__phu { font-size: var(--chu-phu); color: var(--ez-muc-phu); } .man--tro { display: flex; flex-direction: column; gap: var(--ez-khe-12); } .tro-dau { display: flex; align-items: center; gap: var(--ez-khe-8); } .tro-dau .ez-tieu-de-2, .tro-dau__ten { margin: 0; } .tro-dau__ten { font-size: var(--ez-chu-than-lon-co); font-weight: 800; color: var(--ez-muc-chinh); } .ez-nut.tro-ve, .ez-nut.tro-ve:disabled { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cham); color: var(--ez-muc-chinh); } .chon-muc-may { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ez-khe-4); padding: var(--ez-khe-4); border-radius: var(--ez-bo-12); background: var(--ez-nen-chim); } .chon-muc-may__o { min-height: var(--cham); border: 0; border-radius: var(--ez-bo-8); background: transparent; font: inherit; font-weight: 600; color: var(--ez-muc-phu); cursor: pointer; } .chon-muc-may__o--dang { background: var(--ez-nen-the); color: var(--ez-muc-chinh); font-weight: 800; } .tro-nguoi { display: flex; align-items: center; gap: var(--ez-khe-12); padding: var(--ez-khe-8) var(--ez-khe-12); border: 1px solid var(--ez-vien-nhat); border-radius: var(--ez-bo-12); background: var(--ez-nen-the); } .tro-nguoi--dang { border: 2px solid var(--ez-hanh-dong-nen); background: var(--ez-hoc-dang-hoc-nen); } .tro-nguoi__chu { display: flex; flex-direction: column; min-width: 0; margin-right: auto; } .tro-nguoi__ten { font-weight: 800; color: var(--ez-muc-chinh); } .tro-nguoi__luot { flex: 0 0 auto; } /* Luot 4 (14/10): o 390 nhan "Toi luot" ben phai ep dong phu gay ("Cham mot quan / cua con"). Cung luat G3: duoi 600 nhan xuong duoi chu, thang le chu. */ @media (max-width: 599px) { .tro-nguoi:has(> .tro-nguoi__luot) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ez-khe-12); row-gap: var(--ez-khe-4); } .tro-nguoi:has(> .tro-nguoi__luot) > :first-child { grid-row: span 2; align-self: center; } .tro-nguoi__luot { grid-column: 2; justify-self: start; } } /* XO: X lam, O cam lua, luon kem ky hieu (khong chi mau); hang thang nen vang nhat. */ .xo-khung { overflow: auto; max-width: 100%; border: 2px solid var(--ez-muc-chinh); border-radius: var(--ez-bo-12); background: var(--ez-nen-the); -webkit-overflow-scrolling: touch; } .xo-khung--nho { align-self: center; width: min(100%, 360px); overflow: hidden; } .xo-ban { display: grid; grid-template-columns: repeat(var(--xo-n), minmax(0, 1fr)); } .xo-ban--lon { grid-template-columns: repeat(var(--xo-n), var(--ez-khe-48)); width: max-content; } .xo-o { aspect-ratio: 1; min-width: var(--cham); border: 0; border-right: 1px solid var(--ez-vien-nhat); border-bottom: 1px solid var(--ez-vien-nhat); background: transparent; font: inherit; font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-than-lon-co); cursor: pointer; } .xo-khung--nho .xo-o { font-size: calc(var(--ez-chu-so-lieu-co) * 1.6); } .xo-o:disabled { cursor: default; } .xo-o--x { color: var(--ez-tro-choi-nguoi-1); } .xo-o--o { color: var(--ez-tro-choi-nguoi-2); } .xo-o--vua { background: var(--ez-tro-choi-o-vua-di); } .xo-o--hang { background: var(--ez-he-thong-canh-bao-nen); } /* CO VUA: o sang/toi, quan tron mang chu Viet; cham hop le, vien an quan, do chieu. */ .co-cot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--khe-khoi); } /* Khuon L9 giu cot 720 (DS). Hai cot cu 560 + 280 khong vua 640 nen ca hai bi bop, ban con ~336px (ra soat lan 2): ban lay het phan con lai, lich su co dinh hep. */ @media (min-width: 1024px) { .co-cot { grid-template-columns: minmax(0, 1fr) calc(var(--ez-khe-48) * 4); align-items: start; } } .co-trai { display: flex; flex-direction: column; gap: var(--ez-khe-12); } .co-ban { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 2px solid var(--ez-muc-chinh); border-radius: var(--ez-bo-8); overflow: hidden; } .co-o { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; display: grid; place-items: center; cursor: pointer; font: inherit; } .co-o:disabled { cursor: default; } .co-o--sang { background: var(--ez-tro-choi-o-sang); } .co-o--toi { background: var(--ez-tro-choi-o-toi); } .co-o--vua { background: var(--ez-tro-choi-o-vua-di); } .co-o--chon { box-shadow: inset 0 0 0 3px var(--ez-tro-choi-o-chon); } .co-o--di::after { content: ''; width: 28%; height: 28%; border-radius: var(--ez-bo-tron); background: var(--ez-tro-choi-o-hop-le); } .co-o--an { box-shadow: inset 0 0 0 3px var(--ez-tro-choi-o-hop-le); } .co-o--chieu { box-shadow: inset 0 0 0 3px var(--ez-tro-choi-o-chieu); } .co-quan { display: grid; place-items: center; width: 78%; height: 78%; border-radius: var(--ez-bo-tron); font-weight: 800; font-size: var(--chu-phu); line-height: 1; } .co-quan:empty { width: 40%; height: 40%; } .co-quan--trang { background: var(--ez-tro-choi-quan-trang); color: var(--ez-muc-chinh); box-shadow: inset 0 0 0 2px var(--ez-muc-chinh); } .co-quan--den { background: var(--ez-tro-choi-quan-den); color: var(--ez-muc-tren-dam); } .co-quan.co-quan--anh { width: 100%; height: 100%; background: none; box-shadow: none; border-radius: 0; object-fit: contain; pointer-events: none; } .ez-the.co-phai { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .co-phai .the__ten { margin: 0; font-weight: 800; } .co-ls { margin: 0; padding-left: var(--ez-khe-24); max-height: 320px; overflow: auto; font-variant-numeric: tabular-nums; } .co-ls__dong { padding: var(--ez-khe-4) var(--ez-khe-8); border-radius: var(--ez-bo-6); } .co-ls__dong { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ez-khe-8); } .co-ls__dong--moi { background: var(--ez-tro-choi-o-vua-di); } /* Dien thoai: ban co tran ra sat le de tam o dat 44 (ban ve tc-co-vua). */ @media (max-width: 599px) { .man--co .co-ban { margin-inline: calc(-1 * var(--ez-khe-16)); border-radius: 0; border-inline-width: 0; } } /* Man tro choi tren may tinh: rong hon cot doc cua vo con (ban ve tc-co-vua 1440: ban giua, lich su o cot phu). */ @media (min-width: 1024px) { .khung:has(> .man--tro) { --kho-khung: var(--ez-cot-toi-da-rong); } .man--tro .xo-khung--nho { width: min(100%, 420px); } } /* Sanh: van theo luot dang cho (ban ve tc-sanh "Dang cho con di"). */ .van-cho { display: flex; align-items: center; gap: var(--ez-khe-12); padding: var(--ez-le-trong); border: 1px solid var(--ez-vien-nhat); border-radius: var(--ez-bo-the); background: var(--ez-nen-the); } .van-cho--toi { border: 2px solid var(--ez-hanh-dong-nen); } .van-cho__hinh { display: inline-flex; color: var(--ez-hanh-dong-nen); } .van-cho { flex-wrap: wrap; } .van-cho__chu { display: flex; flex-direction: column; min-width: 0; margin-right: auto; flex: 1 1 12rem; } .van-cho__ten { font-weight: 800; color: var(--ez-muc-chinh); } /* Dien thoai (ra soat lan 2): bieu tuong neo dong ten, nut xuong hang thi trai het be ngang the, khong dung le loi duoi chu. */ @media (max-width: 599px) { .van-cho { align-items: flex-start; } .van-cho__chu { flex-basis: 0; } .van-cho > .ez-nut { flex: 1 0 100%; } } /* Cham so "van co cho con di" tren muc Nha minh va tab Choi cung nha. Mau HANH DONG, khong do: do trong app nay la "sai". */ .ez-tab-day__hinh { position: relative; } .muc__dem, .tab__dem { display: inline-grid; place-items: center; min-width: var(--ez-khe-20); height: var(--ez-khe-20); padding: 0 var(--ez-khe-4); border-radius: var(--ez-bo-tron); background: var(--ez-hanh-dong-nen); color: var(--ez-muc-tren-dam); font-size: var(--ez-chu-nhan-co); font-weight: 800; line-height: 1; } .muc__dem { position: absolute; top: calc(-1 * var(--ez-khe-4)); right: calc(-1 * var(--ez-khe-12)); box-shadow: 0 0 0 2px var(--ez-nen-the); } .tab__dem { margin-left: var(--ez-khe-8); } /* Luot 4 (14/10): o thanh ben, cham so de len bieu tuong nha va dinh chu ("1Nha minh"). Tu 1024 cham so ve cuoi dong muc, nhu so dem cua mot muc menu. */ @media (min-width: 1024px) { .ez-tab-day .ez-tab-day__muc { position: relative; } .ez-tab-day .ez-tab-day__hinh { position: static; } .ez-tab-day .muc__dem { top: 50%; right: var(--ez-khe-12); transform: translateY(-50%); box-shadow: none; } } .ez-nut.tro-dung, .ez-nut.tro-dung:disabled { align-self: flex-start; color: var(--ez-muc-phu); } /* PHAN HOI GAN DUNG (EzPhanHoi 'gan-dung', lam): dung y sai dang, sua ngay. */ /* ==== SAP DAT THEO VAI (DS 1.0 qc 2, 26/09/2026) =============================== Khe BO CUC doc tu khe theo VAI (`--ez-khe-giua-khoi`, `-trong-khoi`, `-ket-luan`), khong doc tu thang so: bon vo co bon mat do. Thang 4px chi con cho khe TRONG thanh phan. Thuoc: `thu/_soi-ds.mjs` phep "khe giua khoi" + "le trong the". - tieu de khong mang le mac dinh cua trinh duyet; khe do khung quyet. - nhom tieu de (tieu de + dong phu ngay sau) dung khe TRONG khoi. - cum nut: khe KET LUAN truoc nut dau (khe lon nhat nam truoc nut chinh), cac nut lien nhau dung khe trong khoi. */ h1, h2, h3, .ez-tieu-de-1, .ez-tieu-de-2, .ez-tieu-de-3 { margin: 0; } .man > :is(h1, h2, .ez-tieu-de-1, .ez-tieu-de-2) + :is(.ez-phu, .nhac) { margin-top: calc(var(--khe-trong-khoi) - var(--khe-khoi)); } .man > :not(.ez-nut) + .ez-nut { margin-top: calc(var(--khe-truoc-hanh-dong) - var(--khe-khoi)); } .man > .ez-nut + .ez-nut { margin-top: calc(var(--khe-trong-khoi) - var(--khe-khoi)); } /* KHUNG TOI DA THEO KHUON (Pha 3d): L1, L7 = cot cua vai (con 560, bo me 720); L9 ban choi 720 can giua. Man tro choi thoi mo toi cot rong 1120. */ :root { --kho-ban-choi: 720px; } .khung:has(> :is([data-khuon="L1"], [data-khuon="L7"])) { --kho-khung: var(--ez-cot-toi-da); } .khung:has(> [data-khuon="L9"]) { --kho-khung: var(--kho-ban-choi); } /* CUM KHOI (khuon L3): tieu de + cac dong cua mot y. Dong cach dong bang khe HANG, tieu de cach dong dau bang khe TRONG khoi. */ .nhom-khoi { --khe-nhom: var(--ez-khe-hang); display: flex; flex-direction: column; gap: var(--khe-nhom); min-width: 0; } .nhom-khoi:has(> .ez-the) { --khe-nhom: var(--khe-khoi); } .nhom-khoi > :is(h2, h3, .ez-tieu-de-2, .ez-tieu-de-3) + * { margin-top: calc(var(--ez-khe-trong-khoi) - var(--khe-nhom)); } .nhom-khoi > * + :is(h2, h3, .ez-tieu-de-2, .ez-tieu-de-3) { margin-top: calc(var(--ez-khe-giua-khoi) - var(--khe-nhom)); } /* THE TRONG LUOI L6 (Pha 3d: "the co o hinh o tren, ten o duoi"): dong chon dung doc thanh the, le trong theo vai. */ [data-khuon="L6"] > .dong-chon { flex-direction: column; align-items: flex-start; padding: var(--ez-le-trong); } [data-khuon="L6"] > .dong-chon .ez-nhan { align-self: flex-start; } /* Trong cum: nut chu (lien ket) dung le trai; khe KET LUAN truoc nut chinh. */ .nhom-khoi > :is(.ez-nut--chu, .nut--lien-ket) { align-self: flex-start; } .nhom-khoi > :not(.ez-nut) + :is(.ez-nut--chinh, .ez-nut--lon) { margin-top: calc(var(--ez-khe-ket-luan) - var(--khe-nhom)); } /* Khuon L5 cho ban do nhiet: dau bang DINH khi cuon doc. */ .ban-do__bang thead th { position: sticky; top: 0; z-index: 2; background: var(--ez-nen-the); } /* Cong doi tac (nac 4 phase E): van ban dieu khoan va bai hoc trong the. Khoang cach doan di bang khe cua the (flex gap); le mac dinh cua trinh duyet cong them vao khe thi doan cach nhau gan gap doi (anh 1280, 27/09). */ .van-ban > p, .van-ban > ul { margin: 0; } .van-ban > ul { padding-left: var(--ez-khe-24); display: flex; flex-direction: column; gap: var(--ez-khe-8); } /* Hoc den dau kiem den do (duong vao doi tac dot 2): dong bai hoc giai thich cau vua chon sai sang mau "can on" (khong phai mau hanh dong, khong phai mau sai: dong ay dung, nguoi doc can doc lai). Ket qua tung cau: bieu tuong + chu, trich dong bai. */ .van-ban li.dong-bai--sang { background: var(--ez-hoc-can-on-nen); box-shadow: inset var(--ez-khe-4) 0 0 var(--ez-hoc-can-on-vien); padding: var(--ez-khe-4) var(--ez-khe-8); border-radius: var(--ez-bo-8); color: var(--ez-hoc-can-on-dam); } .ket-cau { display: flex; flex-direction: column; gap: var(--ez-khe-8); } .ket-cau > p { margin: 0; } .ket-cau--dung, .ket-cau__dau { display: flex; align-items: center; gap: var(--ez-khe-8); font-weight: 700; } .ket-cau--dung { flex-direction: row; color: var(--ez-hoc-dung-dam); } .ket-cau__dau { color: var(--ez-hoc-sai-dam); align-items: flex-start; } /* Chu xuong hai dong thi bieu tuong dung o dong DAU (anh 390, 28/09), khong troi giua. */ .ket-cau__dau > svg { flex: none; margin-top: var(--ez-khe-2); } .ket-cau__trich { margin: 0; padding: var(--ez-khe-8) var(--ez-khe-12); border-left: var(--ez-khe-4) solid var(--ez-hoc-can-on-vien); background: var(--ez-hoc-can-on-nen); color: var(--ez-hoc-can-on-dam); } /* ═══ GIÁO CỤ HÌNH (app/js/ve-giao-cu.js · CHIEN-LUOC-GIAO-CU) ═══════════════════ Khối hình MẶC ĐÚNG ô hình của DS (EzOHinh: nền tím-50, bo lòng, không viền), không tự chế nền. Bản đầu dùng ảnh mặt bàn gỗ + vật 48px ở mọi khổ: anh chê "xấu quá" (30/09) — vật lọt thỏm như emoji, nền nặng lệch tông. Cỡ vật một biến --gc-co theo khổ. Lưới hàng thẳng tối đa 5 vật, hàng lẻ CĂN GIỮA (flex, không grid), khe ≥ 1/6 cỡ vật để bóng 3D không dính. */ .gc-khoi { --gc-co: var(--ez-bt-48); --gc-khe: var(--ez-khe-8); margin: 0; padding: var(--ez-khe-16) var(--ez-khe-12); border-radius: var(--ez-bo-long, var(--ez-bo-the)); background: var(--ez-mau-tim-50); display: flex; justify-content: center; align-items: center; overflow: hidden; } @media (min-width: 600px) { /* 64: năm vật một hàng vừa cột đọc (5×64 + 4×12 = 368); 80 thì chỉ vừa bốn, mất nhịp đếm theo năm. */ .gc-khoi { --gc-co: var(--ez-bt-64); --gc-khe: var(--ez-khe-12); padding: var(--ez-khe-24); } } .gc-khoi--nen { background: var(--gc-nen) center / cover no-repeat, var(--ez-mau-tim-50); } .gc-hang { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ez-khe-16); } .gc-hang--nhom { gap: var(--gc-khe); align-items: stretch; } /* Phép cộng: nhóm · dấu · nhóm thành ba tầng thẳng giữa, không để dấu đứng lẻ cuối hàng. */ .gc-hang--cong { flex-direction: column; gap: var(--ez-khe-8); } .gc-hang--thuoc { flex-direction: column; gap: var(--ez-khe-8); width: 100%; } .gc-hang--thuoc > .gc-may { width: 100%; } .gc-luoi { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gc-khe); max-width: calc(var(--gc-co) * 5 + var(--gc-khe) * 4); } .gc-vat { width: var(--gc-co); height: var(--gc-co); object-fit: contain; display: block; flex: none; } /* Vật trong nhóm: hai cột, mỗi nhóm một thẻ trắng trên nền tím-50 của khối. */ .gc-luoi--nho { --gc-co: var(--ez-khe-40); max-width: calc(var(--gc-co) * 2 + var(--gc-khe)); } @media (min-width: 600px) { .gc-luoi--nho { --gc-co: var(--ez-bt-48); } } .gc-vat--bot { opacity: .3; filter: grayscale(1); } .gc-vat--nhan { --gc-co: var(--ez-bt-64); } .gc-dau { font-family: var(--ez-phong-so); font-weight: 800; font-size: var(--ez-chu-tieu-de-1-co); color: var(--ez-mau-tim-600); } .gc-chua { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; padding: var(--ez-khe-12) var(--ez-khe-8) var(--ez-khe-8); border-radius: var(--ez-bo-12); background: var(--ez-nen-trang); border: 1px solid var(--ez-mau-tim-100); } /* Ảnh đồ chứa có vùng chừa 10% quanh vật: phóng to và cho vật chồng sâu xuống để đọc ra "cam NẰM TRÊN đĩa", không phải cam lơ lửng trên một biểu tượng nhỏ. */ .gc-chua > .gc-luoi { position: relative; z-index: 1; margin-bottom: calc(-1 * var(--ez-khe-24)); } .gc-chua__nen { width: calc(var(--ez-bt-64) + var(--ez-bt-24)); height: var(--ez-bt-48); object-fit: contain; } /* Điện thoại: vật 40, đồ chứa thấp để BA nhóm một hàng (3 × 104 + 2 khe = 328 < 334px cột). */ @media (min-width: 600px) { .gc-chua__nen { width: calc(var(--ez-bt-64) * 2); height: calc(var(--ez-bt-64) + var(--ez-khe-24)); } } .gc-du { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ez-khe-4); padding: var(--ez-khe-8); border: 2px dashed var(--ez-mau-tim-300); border-radius: var(--ez-bo-12); } .gc-du__nhan, .gc-to__chu { font-size: var(--ez-chu-phu-co); font-weight: 700; color: var(--ez-muc-phu); } .gc-to { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ez-khe-4); } .gc-to__anh { width: var(--ez-bt-64); height: var(--ez-bt-64); object-fit: contain; } .gc-to__chu { font-family: var(--ez-phong-so); color: var(--ez-muc-chinh); } .gc-tranh { position: relative; width: 100%; } .gc-tranh__anh { display: block; width: 100%; height: auto; border-radius: var(--ez-bo-12); } /* Điện thoại: tranh 16:10 giữ phần DƯỚI (vùng trống đặt vật), bớt trời, để ô trả lời còn trong màn đầu (tc3). */ @media (max-width: 599px) { .gc-tranh__anh { aspect-ratio: 16 / 10; object-fit: cover; object-position: center bottom; } } .gc-tranh__vung { position: absolute; left: 3%; right: 3%; bottom: 5%; display: flex; justify-content: center; } /* Năm vật 48 một hàng cần 272px; tranh ở 390 rộng ~300px, nên vùng gần trọn bề ngang và khe hẹp. */ .gc-tranh { --gc-co: var(--ez-bt-48); --gc-khe: var(--ez-khe-8); } @media (min-width: 600px) { .gc-tranh { --gc-co: var(--ez-bt-64); } } .gc-tranh__the { display: inline-flex; align-items: center; gap: var(--ez-khe-8); padding: var(--ez-khe-4) var(--ez-khe-16) var(--ez-khe-4) var(--ez-khe-8); border-radius: var(--ez-bo-tron); background: var(--ez-nen-trang); box-shadow: var(--ez-bong-nut-phu, none); } .gc-tranh__so { font-family: var(--ez-phong-so); font-weight: 800; font-size: var(--ez-chu-tieu-de-1-co); color: var(--ez-muc-chinh); } .gc-mach { width: var(--ez-bt-24); height: var(--ez-bt-24); object-fit: contain; flex: none; } .gc-loi { color: var(--ez-he-thong-canh-bao-dam); background: var(--ez-he-thong-canh-bao-nen); border-color: var(--ez-he-thong-canh-bao-vien); font-size: var(--ez-chu-phu-co); } .gc-may { width: 100%; display: flex; justify-content: center; } .gc-svg { width: 100%; max-width: calc(var(--ez-bt-64) * 8); height: auto; overflow: visible; } .gc-svg--vua { max-width: calc(var(--ez-bt-64) * 4); } .gc-net { stroke: var(--ez-muc-chinh); stroke-width: 3; fill: none; stroke-linecap: round; } .gc-net--day { stroke-width: 5; } .gc-net-nhat { stroke: var(--ez-muc-mo); stroke-width: 2; fill: none; stroke-dasharray: 4 4; } .gc-to-net { fill: var(--ez-muc-chinh); } .gc-to-1 { fill: var(--ez-mau-ho-phach-400); } .gc-to-2 { fill: var(--ez-mau-ngoc-300); } .gc-o { fill: var(--ez-nen-trang); stroke: var(--ez-muc-chinh); stroke-width: 2; } .gc-o--to { fill: var(--ez-mau-lam-200); } .gc-hinh { fill: var(--ez-mau-lam-100); stroke: var(--ez-muc-chinh); stroke-width: 3; } .gc-thuoc { fill: var(--ez-mau-vang-100); stroke: var(--ez-mau-vang-500); stroke-width: 2; } .gc-mat { fill: var(--ez-nen-trang); stroke: var(--ez-muc-chinh); stroke-width: 4; } .gc-kim { stroke: var(--ez-muc-chinh); stroke-width: 4; stroke-linecap: round; } .gc-kim--gio { stroke-width: 7; } .gc-hoi { fill: var(--ez-bai-goi-y-nen); stroke: var(--ez-bai-goi-y-vien); stroke-width: 2; } /* Cỡ chữ trong hình KHÔNG khai ở đây: nó là đơn vị toạ độ viewBox (thuộc tính font-size do ve-giao-cu.js đặt cạnh x, y), co giãn cùng hình, không phải cỡ chữ màn hình của thang. */ .gc-chu { font-family: var(--ez-phong-so); font-weight: 800; fill: var(--ez-muc-chinh); } .gc-chu--nho { font-weight: 700; } .gc-chu--hoi { fill: var(--ez-bai-goi-y-dam); } .gc-khoi-tren { fill: var(--ez-mau-ho-phach-200); stroke: var(--ez-muc-chinh); stroke-width: 1.5; } .gc-khoi-trai { fill: var(--ez-mau-ho-phach-400); stroke: var(--ez-muc-chinh); stroke-width: 1.5; } .gc-khoi-phai { fill: var(--ez-mau-ho-phach-300); stroke: var(--ez-muc-chinh); stroke-width: 1.5; } /* Trang làm thử bộ mẫu giáo cụ (/mau-giao-cu/). Màn câu dùng NGUYÊN khuôn L1 của vỏ con (.man--bai · .bai-dau · .hop-cau · .chan · .ez-phan-hoi); ở đây chỉ màn đầu lớp và màn kết. */ .mau-gc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ez-khe-12); padding-top: var(--ez-khe-16); padding-bottom: var(--ez-khe-48); } .mau-gc > .ez-nut--lon { align-self: stretch; margin-top: var(--ez-khe-16); } .mau-gc__lop { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ez-khe-8); margin-bottom: var(--ez-khe-16); } /* Nền lớp là KHUNG viền lòng trống: làm huy hiệu vuông, số lớp in giữa khung. */ .mau-gc__huy { flex: none; width: calc(var(--ez-bt-64) * 3); aspect-ratio: 1; display: grid; place-items: center; background: var(--gc-nen) center / contain no-repeat; } .mau-gc__huy-so { font-family: var(--ez-phong-so); font-weight: 800; font-size: var(--ez-chu-hien-thi-co); line-height: var(--ez-chu-hien-thi-cao); color: var(--ez-mau-tim-600); } .mau-gc__tieu { margin: 0; font-family: var(--ez-phong-tieu-de); font-weight: 800; font-size: var(--ez-chu-tieu-de-1-co); line-height: var(--ez-chu-tieu-de-1-cao); color: var(--ez-muc-chinh); } .mau-gc__phu { margin: 0; font-size: var(--ez-chu-than-co); color: var(--ez-muc-phu); } .mau-gc__mach { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ez-khe-12); padding: var(--ez-khe-12) var(--ez-khe-16); border-radius: var(--ez-bo-the); background: var(--ez-mau-tim-50); } .mau-gc__mach > .gc-mach { width: var(--ez-bt-48); height: var(--ez-bt-48); } .mau-gc__ket-anh { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ez-bo-the); margin-bottom: var(--ez-khe-8); } /* DUONG LUI cua man con (ra soat UI/UX 14/10): dau ruot, chu thang le cot. */ .nut-lui, .man > .ez-nut.nut-lui { align-self: flex-start; width: auto; justify-content: flex-start; } /* BA CAU O DIEN THOAI (ra soat UI/UX 14/10): bieu do tuan cao ~500px day cau hai "Con dang vuong cho nao" (nam trong the ky nang) xuong duoi nep gap. Duoi 600 the ky nang dung ngay sau the hom nay; bieu do tuan xuong cuoi. */ @media (max-width: 599px) { .ba-cau > [data-ma="ky_nang"] { order: -1; } .ba-cau > [data-ma="hom_nay"] { order: -2; } } /* MAN LOP O DIEN THOAI (ra soat UI/UX 14/10): ban do nhiet la cong cu chinh cua co ma o 390 nam duoi ba the so, chi lo hang tieu de. Duoi 600: the vuong · ban do · roi moi toi the so. */ @media (max-width: 599px) { .lop-tq > .ban-do { order: 1; } .lop-tq > [data-ma]:not([data-ma="vuong"]) { order: 2; } } /* LUOT 2 RA SOAT VO CON (14/10) ------------------------------------------------ */ /* Man Hoc o 390: nut "Hoc bai hom nay" nam duoi tab day luc vua mo. Tam dau gon lai, bo dong "N tren M bai da thuoc" (dong "N bai da thuoc" ngay duoi da noi). */ @media (max-width: 599px) { .dau-chuong { min-height: 0; padding: var(--ez-khe-16) var(--ez-khe-20); } .dau-chuong .dau-chuong__phu { display: none; } .duong .chang--dang_hoc { padding: var(--ez-khe-16); } .duong .chang--dang_hoc .chang__ten { font-size: var(--ez-chu-tieu-de-3-co); line-height: var(--ez-chu-tieu-de-3-cao); margin-bottom: var(--ez-khe-8); } } /* Bao loi o khung chat dinh day: luot 1 de khoi loi cao gan nua man. Mot hang gon: loi ben trai, nut Sua tin ben phai. */ @media (max-width: 1023px) { .tin-soan .tin-loi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ez-khe-12); row-gap: 0; padding: var(--ez-khe-8) var(--ez-khe-12); font-size: var(--ez-chu-phu-co); line-height: var(--ez-chu-phu-cao); } .tin-soan .tin-loi > :not(.ez-nut) { grid-column: 1; } .tin-soan .tin-loi > .ez-nut { grid-column: 2; grid-row: 1 / span 2; width: auto; } } /* Luot 4 (14/10): o 390 nut ben phai ep cau bao gay ba dong. Duoi 600 nut xuong duoi cau, thang le chu, cung luat G3 (nhan/nut ben phai xuong dong o dien thoai). */ @media (max-width: 599px) { .tin-soan .tin-loi { grid-template-columns: minmax(0, 1fr); row-gap: var(--ez-khe-8); } .tin-soan .tin-loi > .ez-nut { grid-column: 1; grid-row: auto; justify-self: start; } } /* Man khoanh khac tu 1024: hai nut dung mot hang, thanh dinh day thap mot nua, khong che the ben tren. */ @media (min-width: 1024px) { .man--mung > .chan { flex-direction: row; } .man--mung > .chan > .ez-nut { flex: 1 1 0; } } /* CHIP CUON co mep mo (ra soat lan 2): hang Lop 1-9 o Them be tran khoi 390 ma "Lop 4" bi cat cut, khong gi bao con cuon. Mep phai mo dan; dem cuoi bang be rong lop mo nen cuon het thi chip cuoi ra khoi vung mo. */ .chon-av__lop { padding-inline-end: var(--ez-khe-32); -webkit-mask-image: linear-gradient(to right, var(--ez-muc-chinh) calc(100% - var(--ez-khe-32)), transparent); mask-image: linear-gradient(to right, var(--ez-muc-chinh) calc(100% - var(--ez-khe-32)), transparent); } /* De theo mon (cham lai 22/30): luoi the de, khe doc bang khe the cu (12), the cung hang cao bang nhau. */ .luoi-de { row-gap: var(--ez-khe-12); align-items: stretch; }