/* Hệ thiết kế dùng chung cho cả 6 deck và trang chủ. Kiểu tạp chí in, nền giấy ấm, chỉ một chế độ sáng. Không gradient, không đổ bóng, không bo góc lớn, không emoji làm icon. Bốn ràng buộc chi phối các con số bên dưới: 1. Cột chữ giữ quanh 70–76 ký tự (--wrap). Tiếng Việt nhiều dấu, dòng càng dài mắt càng dễ nhảy sai dòng khi xuống hàng. 2. Trên điện thoại, mọi ô nhập chữ tối thiểu 16px. Dưới ngưỡng đó iOS tự phóng to cả trang khi chạm vào ô và không phóng lại về cũ. 3. Mọi ô bấm cao tối thiểu 40px khi con trỏ là ngón tay (pointer: coarse). 4. Trang chủ rộng hơn deck vì có ma trận 7 cột và ba biểu đồ. Bật bằng class .trang-rong trên của index.html, không phải bằng !important. */ :root { /* Chỉ có bản sáng. Khai báo để trình duyệt không tô đen select và textarea khi máy đang bật chế độ tối. */ color-scheme: light; --paper: #faf7f2; --panel: #f1ece1; --surface: #ffffff; --ink: #14110d; --muted: #5e564b; --accent: #b8232c; --ok: #2c5e2e; --warn: #7a5c1e; --rule-c: #ddd5c7; --rule: 1px solid var(--rule-c); /* Charter chỉ có trên máy Apple. Noto Serif là serif hệ thống của Android và phần lớn bản Linux, và có đủ dấu tiếng Việt — nên đứng trước Georgia. */ --serif: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Noto Serif', Georgia, 'Times New Roman', serif; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'Noto Sans Mono', 'DejaVu Sans Mono', 'Courier New', monospace; --gap: 1rem; --wrap: 38rem; /* cột đọc: deck, outline, lớp phủ */ --wrap-rong: 58rem; /* trang chủ: ma trận 7 cột, ba biểu đồ */ --topbar-h: 6.4rem; /* thanh đầu trang trên điện thoại xếp hai hàng */ } .trang-rong { --wrap: var(--wrap-rong); } * { box-sizing: border-box; } html { font-size: 17px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.72 var(--sans); /* Chuỗi dài không dấu cách (đường dẫn, mã nguồn) không được đẩy trang ra ngoài màn hình. */ overflow-wrap: break-word; overflow-x: hidden; } img, svg { max-width: 100%; } h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; letter-spacing: -.011em; margin: 0; text-wrap: balance; } h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.1rem; } p { margin: 0 0 .75em; text-wrap: pretty; } a { color: var(--accent); text-underline-offset: .18em; } /* Vành bấm bằng bàn phím: trước đây chỉ .search có, các nút đều không. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: #f4dede; } /* padding dùng max() để không lọt vào phần bo góc màn hình điện thoại */ .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(var(--gap), env(safe-area-inset-left, 0px)); padding-right: max(var(--gap), env(safe-area-inset-right, 0px)); } /* ---------- thanh đầu trang ---------- */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: var(--rule); } .topbar-in { max-width: var(--wrap); margin: 0 auto; padding: .45rem max(var(--gap), env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .brand { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; margin-right: auto; } .brand a { color: inherit; text-decoration: none; } .brand small { display: block; font: 400 .7rem/1.35 var(--mono); color: var(--muted); } .btn { display: inline-flex; align-items: center; justify-content: center; font: 500 .84rem/1.1 var(--sans); color: var(--ink); background: transparent; border: var(--rule); border-radius: 3px; padding: .5rem .72rem; min-height: 2.1rem; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--panel); border-color: var(--muted); } .btn[aria-pressed="true"], .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-accent { border-color: var(--accent); color: var(--accent); } .search { font: 400 .88rem var(--sans); color: var(--ink); background: var(--surface); border: var(--rule); border-radius: 3px; padding: .5rem .6rem; width: 11rem; min-width: 0; } .search:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .progress { height: 3px; background: var(--rule-c); } .progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .18s linear; } /* ---------- thẻ kiến thức ---------- */ /* padding-block chứ không phải shorthand `padding`: .deck, .outline và .trang-chu dùng chung phần tử với .wrap, nên shorthand sẽ xoá luôn lề ngang của .wrap và chữ dính sát mép màn hình điện thoại. */ .deck { padding-block: 1.7rem calc(5rem + env(safe-area-inset-bottom, 0px)); } .card { animation: fade .12s ease-out; /* Khi trình duyệt nhảy tới #the-... thì chừa chỗ cho thanh đầu trang dính. --topbar-h đổi theo bề ngang màn hình nên chỗ chừa luôn khớp thanh thật. */ scroll-margin-top: calc(var(--topbar-h) + .8rem); } /* Bắt đầu từ 0.35 chứ không phải 0: nếu hiệu ứng bị đóng băng ở khung đầu (trình duyệt headless, tab nền, máy yếu) thì thẻ vẫn đọc được. */ @keyframes fade { from { opacity: .35; } to { opacity: 1; } } .card-kicker { font: 500 .72rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; } .card h2 { margin-bottom: .85rem; } .chot { font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.48; color: var(--accent); border-left: 4px solid var(--accent); padding: .15rem 0 .15rem 1rem; margin: 0 0 1.15rem; text-wrap: pretty; } .card ul { margin: 0 0 1.15rem; padding-left: 1.25rem; } .card li { margin-bottom: .55rem; } .card li::marker { color: var(--accent); } .ghi-chu { background: var(--panel); border-left: 3px solid var(--muted); padding: .7rem .9rem; margin: 0 0 1.15rem; font-size: .92rem; color: var(--muted); } .ghi-chu b { color: var(--ink); } figure { margin: 0 0 1.15rem; } figure img { display: block; width: 100%; max-width: 100%; height: auto; border: var(--rule); background: var(--surface); } figcaption { font: 400 .78rem/1.5 var(--mono); color: var(--muted); margin-top: .4rem; } /* bảng */ .tbl-wrap { overflow-x: auto; margin: 0 0 1.15rem; border: var(--rule); } table { border-collapse: collapse; width: 100%; font-size: .92rem; } th, td { border-bottom: var(--rule); padding: .55rem .7rem; text-align: left; vertical-align: top; } th { background: var(--panel); font: 600 .78rem/1.35 var(--sans); letter-spacing: .02em; } tr:last-child td { border-bottom: 0; } /* Cột đầu không xuống dòng trên màn hình rộng cho gọn; trên điện thoại thì được xuống dòng, xem khối @media bên dưới — nếu không bảng sẽ phải cuộn ngang. */ td:first-child { white-space: nowrap; } td.wrap-cell, th.wrap-cell { white-space: normal; } /* đối chiếu */ .doi-chieu { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 0 0 1.15rem; } .doi-chieu > div { border: var(--rule); padding: .8rem .9rem; background: var(--surface); } .doi-chieu .dung { border-left: 3px solid var(--ok); } .doi-chieu h3 { font-size: .98rem; margin-bottom: .5rem; } .doi-chieu .tag { display: inline-block; font: 600 .68rem/1 var(--mono); letter-spacing: .08em; padding: .28rem .42rem; margin-bottom: .55rem; text-transform: uppercase; } .tag-dung { background: #e4efe3; color: var(--ok); } .tag-sai { background: #f6e2e2; color: var(--accent); } .doi-chieu ul { margin-bottom: 0; } /* ví dụ minh hoạ — một cảnh lớp học cho thẻ trừu tượng */ .vi-du { border: var(--rule); border-left: 3px solid var(--muted); background: var(--surface); padding: .8rem .9rem; margin: 0 0 1.15rem; font-size: .94rem; } .vi-du-nhan { font: 600 .68rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; } .vi-du p:last-child { margin-bottom: 0; } .vi-du-canh { color: var(--ink); } .vi-du-dung { color: var(--ok); } .vi-du-sai { color: var(--accent); } .vi-du-dung b, .vi-du-sai b { font: 600 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; } /* ô luyện tập có đáp án ẩn */ details.luyen { border: var(--rule); background: var(--surface); padding: .8rem .9rem; margin: 0 0 1.15rem; } details.luyen > summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: .92rem; list-style: none; padding: .2rem 0; min-height: 2rem; display: flex; align-items: center; } details.luyen > summary::-webkit-details-marker { display: none; } details.luyen > summary::before { content: '▸ '; } details.luyen[open] > summary::before { content: '▾ '; } details.luyen .dap-an { margin-top: .65rem; padding-top: .65rem; border-top: var(--rule); } /* citation */ .cites { margin-top: 1.2rem; padding-top: .65rem; border-top: var(--rule); } .cite { display: inline-block; font: 400 .74rem/1.25 var(--mono); color: var(--muted); text-decoration: none; border: var(--rule); border-radius: 2px; padding: .35rem .5rem; margin: 0 .35rem .4rem 0; } a.cite:hover { color: var(--accent); border-color: var(--accent); } .cite.no-link { border-style: dashed; } /* ---------- điều hướng cuối trang ---------- */ .navbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); border-top: var(--rule); } .navbar-in { max-width: var(--wrap); margin: 0 auto; padding: .5rem max(var(--gap), env(safe-area-inset-left, 0px)); padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: .6rem; } .counter { font: 400 .8rem var(--mono); color: var(--muted); margin: 0 auto; font-variant-numeric: tabular-nums; } /* ---------- mục lục ---------- */ .toc { position: fixed; inset: 0; z-index: 30; background: var(--paper); overflow-y: auto; padding: 0 0 calc(2rem + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; } .toc[hidden] { display: none; } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; } .toc li { counter-increment: t; border-bottom: var(--rule); } .toc button { display: flex; gap: .75rem; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: .8rem var(--gap); font: 400 .96rem/1.45 var(--sans); color: var(--ink); } .toc button:hover { background: var(--panel); } .toc button::before { content: counter(t); font: 400 .78rem/1.8 var(--mono); color: var(--muted); min-width: 1.7rem; font-variant-numeric: tabular-nums; } .toc .da-doc::after { content: '·'; color: var(--accent); font-weight: 700; margin-left: auto; } .toc .hit { background: var(--surface); } mark { background: #f7e9a3; color: inherit; padding: 0 .1em; } .rong { color: var(--muted); font-style: italic; padding: 2rem 0; } /* ---------- tiện ích ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .muted { color: var(--muted); } .small { font-size: .88rem; } /* ---------- ngón tay thay cho chuột ---------- */ /* Tách khỏi @media bề ngang: máy tính bảng ngang vẫn là ngón tay. */ @media (pointer: coarse) { .btn, details.luyen > summary { min-height: 2.5rem; } .btn { padding-inline: .85rem; } .cite { padding: .45rem .55rem; } .ct { padding: .35rem .5rem; } } /* ---------- màn hình hẹp ---------- */ @media (max-width: 40em) { :root { --gap: .95rem; } h1 { font-size: 1.55rem; } h2 { font-size: 1.3rem; } .chot { font-size: 1.1rem; } .doi-chieu { grid-template-columns: 1fr; } .search { width: 100%; order: 10; } .brand small { display: none; } /* Bảng vừa khít màn hình thay vì bắt cuộn ngang. */ td:first-child { white-space: normal; } th, td { padding: .5rem .55rem; } } @media (min-width: 40.01em) { :root { --gap: 1.25rem; --topbar-h: 3.6rem; } html { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- cửa vào cho người mới, ở trang chủ ---------- */ .cua-vao { border-left: 3px solid var(--accent); padding-left: 1rem; } .cua-vao .row { margin-top: 1rem; } .btn-to { font-size: .98rem; padding: .7rem 1.1rem; text-decoration: none; } /* ---------- trang hướng dẫn: sinh từ README.md bằng tools/build-guide.js ---------- */ /* Trang chỉ có chữ chạy, không có thành phần riêng nào — nên chỗ này chỉ khai những thẻ mà hệ thiết kế chưa đụng tới: pre, code ngoài .outline, và mục lục. */ .huong-dan { padding-block: 1.7rem 4rem; } .huong-dan h1 { margin-bottom: .9rem; } .huong-dan h2 { border-bottom: 2px solid var(--ink); padding-bottom: .45rem; margin: 2.6rem 0 1.1rem; } .huong-dan h3 { margin: 1.9rem 0 .65rem; } .huong-dan hr { display: none; } /* --- trong README chỉ để ngăn mục, h2 đã có vạch */ .huong-dan ul, .huong-dan ol { margin: 0 0 1.15rem; padding-left: 1.25rem; } .huong-dan li { margin-bottom: .55rem; } .huong-dan li::marker { color: var(--accent); } .huong-dan code { font: 400 .88em var(--mono); background: var(--panel); padding: .12em .32em; } /* Khối mã cuộn ngang trong khung của nó, không đẩy cả trang ra ngoài màn hình. */ .huong-dan pre { margin: 0 0 1.15rem; padding: .8rem .9rem; background: var(--surface); border: var(--rule); overflow-x: auto; } .huong-dan pre code { background: none; padding: 0; font-size: .84rem; line-height: 1.6; white-space: pre; } /* mục lục đầu trang */ .hd-muc { border: var(--rule); background: var(--surface); padding: .9rem 1.1rem; margin-bottom: 2.2rem; } .hd-muc > b { font: 600 .74rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .hd-muc ol { list-style: none; margin: .6rem 0 0; padding: 0; columns: 2; column-gap: 1.4rem; } .hd-muc li { margin-bottom: .3rem; break-inside: avoid; font-size: .92rem; } .hd-muc a { text-decoration: none; } .hd-muc a:hover { text-decoration: underline; } @media (max-width: 40em) { .hd-muc ol { columns: 1; } } /* ---------- trang outline: bản đồ, lộ trình, thuật ngữ, tờ ôn ---------- */ .outline { padding-block: 1.7rem 4rem; } .outline h1 { margin-bottom: .9rem; } .outline .dan { font-family: var(--serif); font-size: 1.14rem; line-height: 1.6; } .outline code { font: 400 .88em var(--mono); background: var(--panel); padding: .12em .32em; } .nam-cau { margin: 0 0 1.15rem; padding-left: 1.4rem; } .nam-cau li { margin-bottom: .7rem; } .nam-cau li::marker { color: var(--accent); font-weight: 700; } /* sơ đồ khung — dựng bằng HTML, không dùng ảnh, nên in và tìm kiếm được */ .so-do { margin: 0 0 1.15rem; } .sd-tang { margin-bottom: .35rem; } .sd-nhan { font: 600 .68rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; } .sd-hang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .sd-o { display: block; border: var(--rule); background: var(--surface); padding: .7rem .8rem; color: var(--ink); text-decoration: none; font-size: .94rem; } .sd-o:hover { border-color: var(--accent); } .sd-o b { display: block; margin-bottom: .25rem; } .sd-o span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.5; } .sd-goc { border-left: 3px solid var(--accent); } .sd-m { border-top: 3px solid var(--ok); } .sd-e { border-top: 3px solid var(--warn); } .sd-t { border-top: 3px solid var(--accent); } .sd-mui { text-align: center; color: var(--rule-c); margin: .15rem 0 .35rem; } /* một buổi sáng MET */ .buoi-sang p { border-left: 3px solid var(--rule-c); padding: 0 0 0 .9rem; margin-bottom: 1.1rem; } .gio { display: inline-block; min-width: 5.4rem; font: 600 .76rem/1 var(--mono); letter-spacing: .04em; color: var(--accent); font-variant-numeric: tabular-nums; } .ct { display: inline-block; font: 400 .76rem/1.25 var(--mono); border: var(--rule); padding: .25rem .4rem; margin: .3rem .28rem 0 0; text-decoration: none; white-space: nowrap; } /* bản đồ thẻ */ .search-rong { width: 100%; margin-bottom: 1.15rem; } .bd-deck { margin-bottom: 1.5rem; } .bd-deck h3 { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; } .bd-deck h3 a { text-decoration: none; } .bd-dem { font: 400 .74rem/1 var(--mono); color: var(--muted); margin-left: auto; white-space: nowrap; } .bd-mota { margin-bottom: .55rem; } .bd-ds, .lt-ds { margin: 0; padding-left: 1.5rem; } .bd-ds li, .lt-ds li { margin-bottom: .5rem; } .bd-ds li::marker, .lt-ds li::marker { color: var(--muted); font: 400 .78rem var(--mono); } .bd-chot { display: block; font-size: .88rem; color: var(--muted); line-height: 1.5; } .bd-co-vd { display: inline-block; font: 600 .62rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border: var(--rule); padding: .16rem .3rem; margin-top: .25rem; } /* lộ trình */ .lt-muc { margin-bottom: 1.5rem; } .lt-muc h3 { display: flex; align-items: baseline; gap: .5rem; } /* thuật ngữ */ .tn-ds { margin: 0; } .tn-ds dt { font-weight: 600; margin-top: .8rem; } .tn-ds dd { margin: .15rem 0 0; font-size: .94rem; color: var(--muted); } /* tờ ôn */ .on-tru { margin-top: 1.3rem; padding-bottom: .3rem; border-bottom: 2px solid var(--ink); } .on-deck { font: 600 .76rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: .9rem 0 .35rem; } .on-ds { margin: 0 0 .65rem; padding-left: 1.15rem; font-size: .9rem; } .on-ds li { margin-bottom: .3rem; line-height: 1.45; } .on-ds li::marker { color: var(--rule-c); } @media (max-width: 40em) { .sd-hang { grid-template-columns: 1fr; } .gio { min-width: 0; margin-right: .4rem; } } /* ---------- bản in ---------- */ @media print { .topbar, .navbar, .toc, .progress, .no-print { display: none !important; } body { background: #fff; font-size: 12pt; } .deck { padding-block: 0; } .card { page-break-after: always; } .cite { border: 0; padding: 0; } figure img { max-height: 9cm; width: auto; } /* Trang outline in ra TỜ ÔN, không in bản đồ và lộ trình: các khối kia mang .no-print nên đã bị ẩn ở dòng đầu. Tờ ôn xếp hai cột cho gọn giấy. */ .outline { padding-block: 0; } .outline .on-ds { font-size: 9pt; } #to-on { columns: 2; column-gap: 1.2rem; font-size: 9.5pt; } #to-on h3 { column-span: all; break-before: auto; } .on-deck, .on-ds { break-inside: avoid; } } /* ---------- lớp phủ quiz và flashcard ---------- */ .lop-phu { position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; } .lop-phu[hidden] { display: none; } /* Trang chủ đặt --wrap rộng 58rem cho ma trận; câu hỏi quiz thì không được rộng theo, nên chặn thêm ở 42rem. */ .lop-phu .than { max-width: min(var(--wrap), 42rem); margin: 0 auto; padding: 1.5rem var(--gap) calc(3rem + env(safe-area-inset-bottom, 0px)); } .quiz-cau h2 { margin-bottom: 1.1rem; } .quiz-lua-chon { display: grid; gap: .55rem; margin: 0 0 1.3rem; } .quiz-lc { display: block; width: 100%; text-align: left; font: 400 1rem/1.55 var(--sans); color: var(--ink); background: var(--surface); border: var(--rule); border-radius: 3px; padding: .8rem .9rem; cursor: pointer; } .quiz-lc:hover { border-color: var(--accent); } .quiz-lc.chon { border-color: var(--accent); border-left-width: 4px; background: var(--panel); } .quiz-nhap { display: block; width: 100%; font: 400 1rem/1.55 var(--sans); color: var(--ink); background: var(--surface); border: var(--rule); border-radius: 3px; padding: .65rem .75rem; margin: 0 0 1.1rem; resize: vertical; } .quiz-nav { margin-top: 1.3rem; } .quiz-ket-qua { list-style: none; margin: 1.3rem 0 0; padding: 0; } .quiz-ket-qua li { border: var(--rule); border-left-width: 4px; padding: .85rem .95rem; margin-bottom: .75rem; background: var(--surface); } .quiz-ket-qua li.dung { border-left-color: var(--ok); } .quiz-ket-qua li.sai { border-left-color: var(--accent); } .qk-hoi { font-weight: 600; margin-bottom: .45rem; } .qk-nguon { margin-top: .55rem; } /* flashcard */ .fc-mat { border: var(--rule); background: var(--surface); padding: 2.1rem 1.3rem; margin: 0 0 1.3rem; min-height: 11rem; display: flex; flex-direction: column; justify-content: center; } .fc-mat.fc-sau { border-left: 4px solid var(--accent); } .fc-nhan { font: 500 .68rem/1 var(--mono); letter-spacing: .11em; color: var(--muted); margin-bottom: .85rem; text-transform: uppercase; } .fc-noi-dung { font-family: var(--serif); font-size: 1.38rem; line-height: 1.45; text-wrap: pretty; } .fc-mat.fc-sau .fc-noi-dung { font-style: italic; color: var(--accent); } .fc-lat { min-width: 8rem; } @media (max-width: 40em) { .fc-noi-dung { font-size: 1.18rem; } .fc-mat { padding: 1.5rem 1.05rem; min-height: 9rem; } } /* ================= TRANG CHỦ ================= */ .trang-chu { padding-block: 1.6rem 4rem; } /* Khối trang chủ rộng 58rem để chứa ma trận; riêng chữ chạy vẫn giữ cột hẹp. */ .trang-chu > .khoi > p, .trang-chu > .khoi > ul, .trang-chu > .khoi > ol { max-width: 40rem; } .khoi { margin-bottom: 2.8rem; } .khoi > h2 { border-bottom: 2px solid var(--ink); padding-bottom: .45rem; margin-bottom: 1.1rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .khoi > h3 { margin-bottom: .65rem; } .tong-pt { margin-left: auto; font: 400 .84rem var(--mono); color: var(--muted); } .tong-pt b { color: var(--accent); font-size: 1rem; font-variant-numeric: tabular-nums; } /* đếm ngược */ .dem-nguoc { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; } .moc { border: var(--rule); padding: 1rem 1.1rem; background: var(--surface); } .moc-chinh { border-left: 4px solid var(--accent); } .moc-ten { font: 600 .74rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .moc-so { font-family: var(--serif); font-size: 2.8rem; line-height: 1; margin: 0; color: var(--accent); font-variant-numeric: tabular-nums; } .moc-don-vi { font: 400 .82rem var(--sans); color: var(--muted); margin: 0 0 .4rem; } .moc-ngay { font: 500 .9rem var(--sans); margin: 0 0 .4rem; } .moc-mo-ta { margin: 0; font-size: .94rem; } /* mục lục deck */ .muc-luc { display: grid; gap: .9rem; } .deck-hang { border: var(--rule); padding: .95rem 1.1rem; background: var(--surface); } .deck-dau { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; } .deck-ten { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-decoration: none; } .deck-ten:hover { color: var(--accent); } .deck-pt { margin-left: auto; font: 500 .96rem var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; } .thanh { height: 6px; background: var(--rule-c); margin-bottom: .55rem; } .thanh > i { display: block; height: 100%; background: var(--accent); } .deck-hang .row { margin-top: .65rem; } /* biểu đồ */ .bd-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; } .bd-thanh { list-style: none; margin: 0; padding: 0; } /* minmax(0,1fr) chứ không phải 1fr: 1fr có sàn là min-content nên tên deck dài đẩy cột phần trăm tràn ra khỏi màn hình điện thoại. */ .bd-thanh li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(3rem, 6rem) 2.9rem; align-items: center; gap: .55rem; padding: .3rem 0; font-size: .88rem; } .bd-thanh .thanh { margin: 0; } .bd-thanh b { font-family: var(--mono); color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; } .bd-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-tru, .bd-quiz { width: 100%; height: auto; max-width: 20rem; } .bd-nhan { font: 700 15px var(--serif); fill: var(--ink); } .bd-so { font: 500 11px var(--mono); fill: var(--muted); } .bd-chu-thich { list-style: none; margin: .55rem 0 0; padding: 0; } .bd-chu-thich li { display: flex; gap: .5rem; font-size: .86rem; padding: .15rem 0; } .bd-chu-thich b { margin-left: auto; font-family: var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; } .ds-quiz { list-style: none; margin: 0; padding: 0; font-size: .9rem; } .ds-quiz li { padding: .2rem 0; } /* ma trận tự chấm */ .ma-tran { border: var(--rule); background: var(--surface); } .mt-dau, .mt-hang { display: grid; grid-template-columns: 2.1fr repeat(5, minmax(0, 1fr)) .85fr; gap: .45rem; align-items: center; padding: .6rem .75rem; border-bottom: var(--rule); } .mt-dau { background: var(--panel); font: 600 .74rem/1.3 var(--sans); } .mt-dau > span:last-child, .mt-tb { text-align: center; } .mt-hang:last-child { border-bottom: 0; } .mt-ten { font-size: .92rem; font-weight: 600; } .sao { color: var(--accent); } .mt-o { display: block; } .mt-nhan { display: none; } .mt-sel { width: 100%; font: 400 .96rem var(--sans); color: var(--ink); background: var(--paper); border: var(--rule); border-radius: 3px; padding: .4rem .3rem; text-align: center; min-height: 2.2rem; } .mt-tb { font: 600 1rem var(--mono); font-variant-numeric: tabular-nums; } .mt-dc { grid-column: 1 / -1; width: 100%; font: 400 .86rem var(--sans); color: var(--ink); background: var(--paper); border: var(--rule); border-radius: 3px; padding: .45rem .55rem; margin-top: .35rem; } .mt-hang.dat { background: #f2f7f1; } .mt-hang.dat .mt-tb { color: var(--ok); } .mt-hang.canh-bao { background: #fdf6e8; } .mt-hang.canh-bao .mt-tb { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .mt-hang.chua-dat .mt-tb { color: var(--muted); } .mt-hang.thieu .mt-tb { color: var(--rule-c); } .mt-tom-tat { margin-top: .9rem; font-size: .94rem; } .canh-bao-chu { color: var(--accent); } .chu-thich-mau { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; } .cm { padding: .25rem .55rem; border: var(--rule); } .cm-dat { background: #f2f7f1; } .cm-canh-bao { background: #fdf6e8; text-decoration: underline; text-underline-offset: 3px; } .cm-chua-dat { color: var(--muted); } .cm-thieu { color: var(--rule-c); } /* kết luận */ .ket-luan { display: grid; gap: .65rem; } .kl-hang { border: var(--rule); border-left: 3px solid var(--muted); padding: .8rem .95rem; background: var(--surface); } .kl-ten { font-family: var(--serif); font-weight: 700; margin-bottom: .3rem; } .kl-hang:first-child { border-left-color: var(--ok); } .kl-hang:last-child { border-left-color: var(--accent); } .io-bao { min-height: 1.2em; margin: .5rem 0; } .io-ok { color: var(--ok); } .io-loi { color: var(--accent); } label.btn { display: inline-flex; } @media (max-width: 47.5em) { /* Ma trận 45 ô không ép thành bảng ngang trên điện thoại: mỗi lĩnh vực thành một khối dọc, mỗi ô có nhãn riêng. */ .mt-dau { display: none; } .mt-hang { grid-template-columns: 1fr auto; gap: .5rem .6rem; padding: .85rem .75rem; border-bottom-width: 6px; } .mt-ten { grid-column: 1 / -1; font-size: 1.02rem; margin-bottom: .25rem; } .mt-o { display: contents; } .mt-nhan { display: block; font-size: .9rem; align-self: center; } .mt-sel { width: 5rem; } .mt-tb { grid-column: 1 / -1; text-align: left; padding-top: .35rem; border-top: var(--rule); } .mt-tb::before { content: 'Điểm trung bình: '; font: 400 .88rem var(--sans); color: var(--muted); } .dem-nguoc { grid-template-columns: 1fr; } } /* ---------- ô nhập trên điện thoại ---------- */ /* Đặt ở cuối file, sau mọi khai báo `font:` của .mt-sel, .mt-dc, .quiz-nhap: font shorthand ghi đè font-size, nên nếu để khối này lên trên nó sẽ bị mất. Dưới 16px iOS phóng to cả trang khi chạm vào ô và không thu lại. */ @media (max-width: 40em) { .search, .search-rong, .quiz-nhap, .quiz-lc, .mt-sel, .mt-dc { font-size: 16px; } }