/* Trang tra cuu TKB - thiet ke uu tien dien thoai (mobile-first). Khong dung thu vien ngoai: tai nhanh, khong phu thuoc CDN. CO CHU: moi kich thuoc chu (va phan lon khoang cach) dung don vi rem, tinh theo co chu goc cua the ngay ben duoi. Muon to/nho TOAN BO trang chi can doi 3 dong `html { font-size }` - khong phai sua tung cho. - Dien thoai : 17px (to hon mac dinh 16px cua trinh duyet) - May tinh bang (>= 768px) : 19px - May tinh (>= 1200px) : 20px Truoc day dung px co dinh, nhieu chu phu chi 10-12.5px -> kho doc, nhat la tren man hinh may tinh. */ html { font-size: 17px; } @media (min-width: 768px) { html { font-size: 19px; } } @media (min-width: 1200px) { html { font-size: 20px; } } :root { --xanh: #1E3A8A; --xanh-nhat: #2563EB; --xanh-rat-nhat: #EFF6FF; --nen: #F8FAFC; --the: #FFFFFF; --vien: #E2E8F0; --chu: #1E293B; --chu-mo: #5B6B80; /* dam hon mot chut so voi truoc (#64748B) de chu phu de doc hon */ --vang: #FEF3C7; --vang-vien: #F59E0B; --do: #FEE2E2; --xanh-ok: #DCFCE7; --bk: 0 1px 3px rgba(15, 23, 42, .08); --le: 0.9rem; /* le trai/phai cua noi dung - dung chung cho main va bang ca tuan */ } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--nen); color: var(--chu); font-size: 1rem; /* >= 16px: iOS khong tu zoom khi bam vao o nhap */ line-height: 1.5; -webkit-text-size-adjust: 100%; } a { color: var(--xanh-nhat); text-decoration: none; } /* ---------- Thanh tieu de ---------- */ header.top { background: linear-gradient(135deg, var(--xanh) 0%, var(--xanh-nhat) 100%); color: #fff; padding: 0.85rem 1rem; /* KHONG dinh o dau trang: chu to hon lam tieu de cao 2-3 dong, dinh lai se chiem nhieu man hinh dien thoai. Thanh nav mong ben duoi dinh thay. */ box-shadow: 0 2px 10px rgba(30, 58, 138, .25); } header.top .truong { font-size: 1rem; font-weight: 700; line-height: 1.3; } /* Giu cum "(Phan hieu 1)" tren cung 1 dong: neu phai xuong dong thi ca cum xuong, khong bi cat thanh "(Phan hieu" / "1)" */ .khong-ngat { white-space: nowrap; } header.top .nam { font-size: 0.8rem; opacity: .9; margin-top: 2px; } header.top a { color: #fff; } nav.thanh { display: flex; gap: 0; background: var(--the); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 19; overflow-x: auto; -webkit-overflow-scrolling: touch; } nav.thanh a { flex: 1 0 auto; text-align: center; padding: 0.7rem 0.9rem; font-size: 0.95rem; font-weight: 600; color: var(--chu-mo); border-bottom: 3px solid transparent; white-space: nowrap; } nav.thanh a.dang { color: var(--xanh-nhat); border-bottom-color: var(--xanh-nhat); } main { padding: var(--le); max-width: 50rem; margin: 0 auto; } /* ---------- Khoi chung ---------- */ h1 { font-size: 1.35rem; margin: 0 0 2px; line-height: 1.3; } h2 { font-size: 1.1rem; margin: 1.35rem 0 0.6rem; } .phude { color: var(--chu-mo); font-size: 0.875rem; margin-bottom: 0.85rem; } .the { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 0.9rem; margin-bottom: 0.9rem; box-shadow: var(--bk); } .nhan { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--xanh-rat-nhat); color: var(--xanh-nhat); } /* ---------- Thong bao ---------- */ .tb { padding: 0.7rem 0.8rem; border-radius: 10px; margin-bottom: 0.75rem; font-size: 0.94rem; } .tb.ok { background: var(--xanh-ok); border: 1px solid #86EFAC; } .tb.error { background: var(--do); border: 1px solid #FCA5A5; } .tb.warn { background: var(--vang); border: 1px solid var(--vang-vien); } /* ---------- Luoi chon lop ---------- */ .khoi { margin-bottom: 1rem; } .ten-khoi { font-size: 0.875rem; font-weight: 700; color: var(--chu-mo); margin-bottom: 0.5rem; } /* Khoi thong tin va danh sach huong dan o trang quan ly */ .thong-tin { font-size: 0.94rem; line-height: 1.8; } .huong-dan { font-size: 0.94rem; padding-left: 1.25rem; margin: 0.5rem 0 0; } .huong-dan li { margin-bottom: 0.3rem; } .o-lop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; } @media (min-width: 420px) { .o-lop { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 620px) { .o-lop { grid-template-columns: repeat(6, 1fr); } } .o-lop a { display: block; text-align: center; padding: 0.9rem 0.25rem; background: var(--the); border: 1px solid var(--vien); border-radius: 11px; font-weight: 700; font-size: 1.15rem; color: var(--chu); box-shadow: var(--bk); } .o-lop a:active { background: var(--xanh-rat-nhat); border-color: var(--xanh-nhat); } .o-lop a .cs { display: block; font-size: 0.72rem; font-weight: 500; color: var(--chu-mo); margin-top: 3px; } /* ---------- Nut lon ---------- */ .nut-lon { display: flex; align-items: center; gap: 0.75rem; background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 0.9rem; margin-bottom: 0.7rem; box-shadow: var(--bk); color: var(--chu); } .nut-lon .bieu-tuong { font-size: 1.7rem; line-height: 1; } .nut-lon .tieu { font-weight: 700; font-size: 1.05rem; } .nut-lon .mo-ta { font-size: 0.85rem; color: var(--chu-mo); } .nut-lon:active { border-color: var(--xanh-nhat); } /* ---------- Chon thu ---------- */ .chon-thu { display: flex; gap: 0.45rem; overflow-x: auto; padding: 3px 0 0.7rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .chon-thu::-webkit-scrollbar { display: none; } .chon-thu button { flex: 0 0 auto; padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid var(--vien); background: var(--the); font-size: 0.95rem; font-weight: 600; color: var(--chu-mo); font-family: inherit; cursor: pointer; } .chon-thu button.dang { background: var(--xanh-nhat); border-color: var(--xanh-nhat); color: #fff; } .chon-thu button .hom-nay { font-size: 0.7rem; display: block; opacity: .85; } /* ---------- Bang tiet hoc (dien thoai: danh sach doc) ---------- */ .buoi-ten { font-size: 0.8rem; font-weight: 700; color: var(--chu-mo); text-transform: uppercase; letter-spacing: .04em; margin: 1rem 0 0.45rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--vien); } .hang-tiet { display: flex; align-items: center; gap: 0.7rem; background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 0.7rem 0.8rem; margin-bottom: 0.45rem; } .hang-tiet.trong { background: transparent; border-style: dashed; opacity: .6; } .hang-tiet.danhdau { background: var(--vang); border-color: var(--vang-vien); } .hang-tiet .so-tiet { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 9px; background: var(--xanh-rat-nhat); color: var(--xanh-nhat); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; } .hang-tiet.trong .so-tiet { background: #F1F5F9; color: var(--chu-mo); } .hang-tiet .noi-dung { min-width: 0; flex: 1; } .hang-tiet .mon { font-weight: 600; font-size: 1.05rem; } .hang-tiet .phu { font-size: 0.875rem; color: var(--chu-mo); } .hang-tiet .canh-bao { font-size: 1.05rem; flex: 0 0 auto; } .ngay-trong { padding: 1.6rem 0.9rem; text-align: center; color: var(--chu-mo); font-size: 0.95rem; } /* ---------- Bang ca tuan (cuon ngang) ---------- */ .bang-tuan { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--le)); padding: 0 var(--le); } table.tuan { border-collapse: collapse; font-size: 0.82rem; min-width: 36rem; background: var(--the); } table.tuan th, table.tuan td { border: 1px solid var(--vien); padding: 0.4rem 0.3rem; text-align: center; vertical-align: middle; } table.tuan th { background: var(--xanh-rat-nhat); font-size: 0.8rem; color: var(--xanh); } table.tuan td.nhan-tiet { background: var(--nen); font-weight: 600; white-space: nowrap; font-size: 0.78rem; } table.tuan td.danhdau { background: var(--vang); } table.tuan td .m { font-weight: 600; display: block; } table.tuan td .p { color: var(--chu-mo); font-size: 0.75rem; } table.tuan tr.trua td { background: #F1F5F9; height: 6px; padding: 0; } /* ---------- Bieu mau ---------- */ label { display: block; font-size: 0.875rem; font-weight: 600; margin: 0.75rem 0 0.3rem; } input[type=text], input[type=password], input[type=file], select { width: 100%; padding: 0.75rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--vien); border-radius: 9px; background: var(--the); color: var(--chu); } input[type=file] { padding: 0.55rem; } button.chinh, .nut-chinh { width: 100%; padding: 0.8rem; margin-top: 1rem; border: none; border-radius: 9px; background: var(--xanh-nhat); color: #fff; font-size: 1.05rem; font-weight: 700; font-family: inherit; cursor: pointer; display: block; text-align: center; } button.chinh:active { background: var(--xanh); } button.phu { width: 100%; padding: 0.7rem; margin-top: 0.55rem; border: 1px solid var(--vien); border-radius: 9px; background: var(--the); color: var(--chu); font-size: 0.95rem; font-family: inherit; cursor: pointer; } /* ---------- Danh sach giao vien ---------- */ .tim { margin-bottom: 0.75rem; } ul.ds-gv { list-style: none; margin: 0; padding: 0; } ul.ds-gv li { margin-bottom: 0.45rem; } ul.ds-gv a { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 0.8rem 0.9rem; color: var(--chu); } ul.ds-gv a:active { border-color: var(--xanh-nhat); } ul.ds-gv .ten { font-weight: 600; font-size: 1.05rem; } ul.ds-gv .sotiet { font-size: 0.82rem; color: var(--chu-mo); white-space: nowrap; } footer { text-align: center; font-size: 0.82rem; color: var(--chu-mo); /* Chua them khoang cho vach Home cua iPhone khi chay o che do ung dung */ padding: 1.3rem var(--le) calc(1.8rem + env(safe-area-inset-bottom, 0px)); } footer a { color: var(--chu-mo); text-decoration: underline; } /* Dong ban quyen: tach khoi phan tren bang vach mong */ footer .ban-quyen { margin: 0.85rem auto 0; padding-top: 0.75rem; max-width: 26rem; border-top: 1px solid var(--vien); font-size: 0.82rem; color: var(--chu-mo); } footer .ban-quyen strong { color: var(--chu); font-weight: 600; } /* So dien thoai: bam de goi tren dien thoai */ footer .ban-quyen a { color: var(--xanh-nhat); text-decoration: none; font-weight: 600; } @media print { header.top, nav.thanh, .chon-thu, footer { display: none; } .ngay { display: block !important; } }