trong khu SAT đều mang cả hai lớp (class="page wrap"), chữ dính sát mép màn hình trên điện thoại ở TOÀN BỘ khu. Trên máy tính không thấy vì max-width:1080px đã tự chừa lề. Sửa 26/8/2026 khi dựng khu Khoá học — trang đọc dài là chỗ lộ rõ nhất. */ .page { padding-top:28px; padding-bottom:64px; } .kicker { color:var(--acc); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:6px; } h1.page-title { color:var(--navy); font-size:clamp(26px,3.6vw,36px); line-height:1.2; letter-spacing:-.3px; } .page-lead { color:var(--muted); font-size:16px; max-width:720px; margin-top:6px; } h2.sec-title { color:var(--navy); font-size:clamp(20px,2.6vw,26px); line-height:1.25; margin:34px 0 12px; } .grid { display:grid; gap:18px; } .grid.c2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .grid.c3 { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); } .card h3 { color:var(--navy); font-size:17px; margin-bottom:8px; } .pill { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.4px; border-radius:3px; padding:2px 7px; border:1px solid var(--line-2); color:var(--navy); background:#fff; } .pill.pro { border-color:var(--acc); color:var(--acc); } .pill.free { border-color:#0E9F6E; color:#0E9F6E; } .pill.done { border-color:#0E9F6E; color:#065F46; background:var(--okbg); } /* ===== Bố cục 2 cột: rail trái (3 mức khó) + nội dung ===== */ .layout { display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:start; margin-top:22px; } .rail { position:sticky; top:120px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .rail .rail-tieu-de { font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--muted); padding:12px 16px 8px; } .rail a { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 16px; font-size:14px; font-weight:600; color:var(--text); text-decoration:none; border-left:3px solid transparent; } .rail a:hover { background:#F3F6FB; } .rail a.on { color:var(--navy); background:var(--acc-soft); border-left-color:var(--acc); font-weight:800; } .rail a .n { font-size:12px; color:var(--muted); font-weight:700; } .rail .rail-chu-thich { font-size:12px; color:var(--muted); padding:10px 16px 14px; border-top:1px solid var(--line); line-height:1.5; } /* ===== Thanh phân trang kho đề lẻ (23/8/2026) ===== Kho nhân ba đưa mỗi dạng nhỏ lên 96 bộ; ô "Tất cả" đổ hết một lượt thì dài gấp bốn màn hình và trình duyệt phải dựng 96 ô xem trước có SVG cùng lúc. Cắt 24 thẻ một trang, đúng con số đã chốt cho /luyen-tap bên ielts8020. Nút hai đầu khi hết đường dựng bằng , không phải tô mờ — xem chú thích trong khu-luyen.js. Vì vậy .tat ở đây chỉ lo phần nhìn, không phải phần chặn. */ .phan-trang { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:18px 0 4px; padding-top:14px; border-top:1px solid var(--line); } .phan-trang .pt-dem { font-size:13px; color:var(--muted); font-weight:600; } .phan-trang .pt-nut-hang { display:flex; flex-wrap:wrap; gap:6px; } .phan-trang .pt-nut, .phan-trang .pt-so { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; font-size:13.5px; font-weight:700; text-decoration:none; color:var(--text); background:#fff; border:1px solid #DCE3ED; border-radius:4px; } .phan-trang a.pt-nut:hover, .phan-trang a.pt-so:hover { border-color:var(--navy); } .phan-trang .pt-so.on { background:var(--navy); border-color:var(--navy); color:#fff; } .phan-trang .pt-nut.tat { color:var(--muted); background:#F3F6FB; border-color:var(--line); cursor:default; } /* Điện thoại: dãy số trang là thứ tràn ngang trước tiên. Cho nó cuộn ngang trong khung riêng thay vì đẩy cả trang lệch — bẫy đã gặp ở các bảng rộng của web. */ @media (max-width:560px) { .phan-trang { flex-direction:column; align-items:stretch; } .phan-trang .pt-nut-hang { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; } } /* Dải sub-tab 4 dạng nhỏ trong trang Verbal/Math */ .dom-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; } .dom-tabs a { text-decoration:none; font-size:13.5px; font-weight:700; color:var(--text); background:#fff; border:1px solid #DCE3ED; border-radius:4px; padding:9px 14px; } .dom-tabs a.on { background:var(--navy); border-color:var(--navy); color:#fff; } .dom-tabs a:hover:not(.on) { border-color:var(--navy); } /* Thẻ đề lẻ */ /* ===== Thẻ đề lẻ — có ô XEM TRƯỚC nội dung thật (23/8/2026) ===== Trước đây danh sách là 255 dòng ngang giống hệt nhau: mã · tên · mức · số câu. Đọc như bảng kê kho, không mời được ai bấm vào làm. Nay mỗi thẻ mở đầu bằng một mẩu nội dung THẬT của chính bộ đó — hình vẽ trong đề (Toán) hoặc mấy dòng đầu của đề bài dựng thành ô giấy (Verbal). Xem oXem() trong khu-luyen.js. Lưới tự co theo bề rộng: 2–3 cột trên máy tính, 1 cột trên điện thoại. */ .de-list { display:grid; gap:12px; margin-top:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } .de-item { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--text); transition:border-color .12s ease, transform .12s ease; } .de-item:hover { border-color:var(--acc); transform:translateY(-2px); } /* Ô xem trước — cao cố định để mọi thẻ bằng nhau dù nội dung dài ngắn khác nhau */ .de-xem { display:flex; align-items:center; justify-content:center; height:126px; background:#F5F8FC; border-bottom:1px solid var(--line); overflow:hidden; padding:10px; } .de-xem.hinh svg { max-width:100%; max-height:106px; height:auto; width:auto; } /* Ô giấy: chữ đề thật, dựng cho giống một mẩu trang đề. Chữ có chân + hàng chữ thưa để khác hẳn phần giao diện xung quanh — nhìn là biết đây là NỘI DUNG. */ .de-xem.chu { align-items:flex-start; padding:0; position:relative; background:#fff; } .de-xem.chu > span { display:block; padding:13px 15px 0; font-size:12.5px; line-height:1.62; font-family:Georgia,"Times New Roman",serif; color:#334155; } /* Chữ bị cắt ngang thân dòng trông như lỗi — phủ một dải trắng mờ dần ở đáy để nó đọc ra là "còn nữa" chứ không phải "vỡ layout". */ .de-xem.chu::after { content:""; position:absolute; left:0; right:0; bottom:0; height:44px; background:linear-gradient(rgba(255,255,255,0),#fff 88%); } /* Bảng số liệu của đề — thu nhỏ vừa ô, cắt phần thừa. Giữ nguyên hình bảng vì gỡ thẻ ra chữ thì thành một dãy chữ số rời rạc, đọc không ra gì. */ .de-xem.bang { align-items:flex-start; justify-content:flex-start; padding:10px 0 0 12px; background:#fff; position:relative; } /* Bảng để RỘNG TỰ NHIÊN rồi cắt ở mép phải, không bóp từng ô. Bóp ô thì mọi tiêu đề cột thành "More tha…", "45 minut…" — đọc ra thứ gì đó hỏng. Cắt ở mép thì đọc ra "bảng còn nữa", đúng thứ nó là. Dải trắng mờ ở mép phải nói hộ điều đó. */ .de-xem.bang table { border-collapse:collapse; font-size:10.5px; line-height:1.35; width:auto; } .de-xem.bang th, .de-xem.bang td { border:1px solid var(--line); padding:3px 6px; text-align:left; color:#334155; white-space:nowrap; } .de-xem.bang th { background:#F5F8FC; font-weight:700; color:var(--navy); } /* Cắt cả hai chiều: mép phải (còn cột) và mép dưới (còn dòng). Không có dải mờ ở đáy thì dòng cuối bị xén ngang thân chữ, đọc ra là vỡ layout chứ không phải "bảng còn nữa". Hai lớp phủ nên dùng ::after cho phải và ::before cho dưới. */ .de-xem.bang::after { content:""; position:absolute; top:0; bottom:0; right:0; width:38px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff 82%); } .de-xem.bang::before { content:""; position:absolute; left:0; right:0; bottom:0; height:26px; background:linear-gradient(rgba(255,255,255,0),#fff 85%); z-index:1; } .de-xem.trong { font-size:13px; font-weight:800; color:var(--line-2); letter-spacing:1px; } .de-than { display:flex; flex-direction:column; gap:6px; padding:12px 14px 13px; flex:1; } .de-item .hang-tren { display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .de-item .ma { flex:none; font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.4px; background:#F3F6FB; border-radius:3px; padding:3px 7px; } .de-item .ten { font-weight:700; color:var(--navy); font-size:14.5px; line-height:1.4; } .de-item .meta { margin-top:auto; font-size:12.5px; color:var(--muted); } .de-item:hover .meta { color:var(--acc); } .de-item .diem { font-weight:800; color:var(--ok); font-size:12.5px; margin-left:auto; } /* Thẻ đề full / dự đoán. Từ 23/8/2026 thẻ mở đầu bằng ô xem trước nội dung thật (.de-xem, dựng bởi SAT.oXem) nên phần chữ lùi vào .fc-than — padding chuyển từ thẻ xuống thân, để ô xem trước tràn sát mép thẻ như một tấm ảnh bìa. */ .full-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; } .full-card .fc-than { padding:16px 20px 18px; display:flex; flex-direction:column; gap:9px; flex:1; } .full-card h3 { color:var(--navy); font-size:16.5px; line-height:1.35; } .full-card .chi-tiet { font-size:13px; color:var(--muted); line-height:1.55; } /* Mô tả trọng tâm của đề dự đoán do người soạn viết, dài ngắn rất khác nhau — có thẻ 2 dòng, có thẻ 8 dòng, để nguyên thì cả lưới so le như răng cưa. Kẹp 4 dòng cho các thẻ cao bằng nhau; ai cần đọc đủ thì rê chuột (title). */ /* (23/8/2026) Thẻ đề dự đoán nay mang HAI dòng trọng tâm (Verbal và Math) nên kẹp 2 dòng mỗi dòng thay vì 4 — tổng chiều cao giữ nguyên, lưới vẫn phẳng. */ .full-card .chi-tiet.trong-tam { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .full-card .hang-nut { margin-top:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .full-card .kq-cu { font-size:12.5px; color:var(--ok); font-weight:700; } /* Hộp PRO — kiểu pro-box của luyenthi + bảng gói của ielts8020 */ .pro-box { background:#fff; border:2px solid var(--acc); border-radius:var(--radius); padding:24px; margin-top:26px; } .pro-box h3 { color:var(--navy); font-size:19px; } .goi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:26px; } .goi { border:1px solid var(--line-2); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:6px; background:#fff; } .goi.hay { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); position:relative; } .goi .nhan { font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); } .goi.hay .nhan { color:var(--acc); } /* (24/8/2026) Ô giá đọc theo thứ tự NGÀY → THÁNG → TỔNG GÓI. Con số to nhất là giá mỗi ngày: một ly cà phê mỗi ngày dễ gật đầu hơn một cục tiền. Tổng gói vẫn ghi đủ nhưng nằm dưới cùng, sau một đường kẻ — giấu nó đi là mất tin, để nó lên đầu là mất người. Cùng khuôn với pro.html của ielts8020. */ .goi { position:relative; padding-top:22px; } /* (24/8/2026) Con số mỗi ngày to hẳn lên (30 → 36px) và đổi từ navy sang --acc: navy đọc như chữ tiêu đề bình thường, còn --acc là màu xanh nút bấm nên mắt bắt được ngay đâu là giá. Bó chữ lại letter-spacing:-1px để "6.600đ/ngày" vẫn nằm gọn một dòng trong ô rộng ~180px của lưới 4 cột; flex-wrap là lối thoát cho gói "Mua đứt" (con số 7 chữ số, không cách nào nhét một dòng). */ .goi .gia { font-size:36px; font-weight:800; color:var(--acc); line-height:1.1; letter-spacing:-1px; display:flex; align-items:baseline; flex-wrap:wrap; gap:1px; } .goi .gia small { font-size:14px; color:var(--muted); font-weight:700; letter-spacing:0; } .goi.hay .gia { font-size:38px; } .goi.hay { background:var(--acc-soft); } .goi .thang { font-size:13.5px; color:var(--text); font-weight:700; } /* Giá gốc gạch ngang = giá MỖI THÁNG của gói 1 tháng. Có mốc để so thì con số "≈ 100.000đ/tháng" mới nói lên điều gì; đứng một mình nó chỉ là một con số. */ .goi .goc { color:var(--muted); font-weight:700; text-decoration:line-through; text-decoration-thickness:1.5px; margin-right:3px; } .goi .tk { display:inline-block; font-size:11.5px; font-weight:800; color:#fff; background:var(--ok); border-radius:999px; padding:2px 9px; margin-left:6px; } /* Tiết kiệm càng nhiều thì nhãn càng to — bốn nhãn cùng một cỡ thì phải đọc hết bốn con số mới biết bậc nào lợi. Bậc ≥40% tách hẳn xuống dòng riêng, viết hoa: đó là thứ đáng nhìn nhất trong cả ô giá. */ .goi .tk.vua { font-size:13px; padding:3px 11px; } .goi .tk.manh { display:block; width:-moz-fit-content; width:fit-content; margin:8px 0 2px; font-size:15px; padding:4px 13px; letter-spacing:.3px; text-transform:uppercase; box-shadow:0 2px 6px rgba(6,95,70,.28); } /* margin-top:auto nằm ở .tong chứ không ở .btn: bốn ô có phần mô tả dài ngắn khác nhau, đẩy nút xuống đáy mà để dòng tổng trôi tự do thì bốn dòng tổng nằm ở bốn độ cao khác nhau, mắt không so ngang được. */ .goi .tong { font-size:12.5px; color:var(--muted); margin-top:auto; padding-top:9px; border-top:1px dashed var(--line-2); } .goi .tong b { color:var(--text); font-weight:800; } /* Nhãn "được chọn nhiều nhất" đè lên viền trên. .goi-grid phải có khoảng thở ở trên, không thì nhãn bị khối phía trước cắt mất một nửa. */ .goi .tag-hay { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--acc); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.2px; border-radius:999px; padding:3px 13px; white-space:nowrap; } .goi .ngay { font-size:12.5px; color:var(--ok); font-weight:700; } .goi .mo { font-size:13px; color:var(--muted); line-height:1.5; } .goi .btn { margin-top:10px; } .msg { border-radius:4px; padding:10px 14px; font-size:13.5px; margin-top:10px; } .msg.err { background:var(--errbg); color:var(--err); } .help { background:#F8FAFC; border:1px dashed var(--line-2); border-radius:4px; padding:12px 14px; font-size:13px; color:var(--muted); margin-top:12px; } /* Ô dẫn vào 4 khu con, đặt ngay dưới h1 của trang hub SAT. Vừa là lối vào cho khách mới (bảng điều khiển bên dưới rỗng khi chưa làm bài nào), vừa là đường cho Google bò sang các trang con. */ .lt-o { display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; } .lt-o:hover { border-color:var(--acc); box-shadow:var(--shadow); transform:translateY(-2px); } .lt-o b { color:var(--navy); font-size:15px; } .lt-o span { color:var(--muted); font-size:12.5px; line-height:1.5; } /* FAQ trang hub — nội dung phải HIỂN THỊ thì khối FAQPage mới khai được. Dùng

nên nội dung vẫn nằm trong DOM và Google đọc được, chỉ gập lại cho gọn; đây là dạng Google chấp nhận. */ .sat-faq { display:flex; flex-direction:column; gap:8px; margin-top:12px; } .sat-faq details { background:#fff; border:1px solid var(--line); border-radius:var(--radius); } .sat-faq summary { cursor:pointer; padding:13px 16px; font-weight:600; color:var(--navy); font-size:14.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; } .sat-faq summary::-webkit-details-marker { display:none; } .sat-faq summary::after { content:"+"; color:var(--acc); font-weight:700; font-size:18px; flex:none; } .sat-faq details[open] summary::after { content:"−"; } .sat-faq summary:hover { color:var(--acc); } .sat-faq p { padding:0 16px 14px; margin:0; color:var(--muted); font-size:14px; line-height:1.65; } /* ===== Lộ trình của Tôi ===== */ .lt-hero { background:linear-gradient(135deg,#EAF6FD,#F5FAFE 60%,#fff); border:1px solid #C7E4F4; border-radius:var(--radius); padding:24px; margin-top:20px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; } .lt-hero .noi-dung { flex:1 1 380px; } .lt-hero h2 { color:var(--navy); font-size:20px; margin-bottom:6px; } .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:18px; } .stat { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; } .stat .so { font-size:26px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; } .stat .so small { font-size:13px; color:var(--muted); font-weight:600; } .stat .ten { font-size:12.5px; color:var(--muted); margin-top:2px; } /* Thanh Skills Insight: 8 dạng nhỏ, % đúng */ .si-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 36px; margin-top:14px; } .si-cot h4 { color:var(--navy); font-size:14.5px; margin:10px 0 8px; } .si-item { padding:7px 0; border-bottom:1px solid var(--line); } .si-item .d { display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; } .si-item .d b { color:var(--navy); font-weight:700; } .si-item .d span { color:var(--muted); font-variant-numeric:tabular-nums; } .si-bar { height:9px; background:#EEF2F8; border-radius:2px; overflow:hidden; display:flex; } .si-bar i { display:block; height:100%; background:var(--navy); } .si-bar i.thap { background:var(--acc); } /* Lịch sử làm bài */ .ls-table { width:100%; border-collapse:collapse; font-size:13.5px; background:#fff; border:1px solid var(--line); } .ls-table th { text-align:left; font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line-2); background:#F8FAFC; } .ls-table td { padding:10px 14px; border-bottom:1px solid var(--line); } .ls-table tr:last-child td { border-bottom:0; } /* ===== Kết quả HV ===== */ .wins-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:18px; } .win-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .win-top { display:flex; align-items:baseline; gap:8px; } .win-label { font-size:11px; font-weight:800; letter-spacing:.8px; color:#fff; background:var(--navy); border-radius:3px; padding:2px 7px; } .win-total { font-size:34px; font-weight:800; color:var(--navy); } .win-max { color:var(--muted); font-size:14px; } .win-subs { display:flex; gap:18px; margin:10px 0; } .win-sub b { display:block; font-size:19px; color:var(--navy); } .win-sub span { font-size:11.5px; color:var(--muted); } .win-stars { color:#F59E0B; letter-spacing:2px; } .win-name { font-weight:800; color:var(--navy); margin-top:6px; } .win-course { font-size:12.5px; color:var(--muted); } .win-quote { font-size:13px; color:var(--text); margin-top:8px; font-style:italic; } /* ===================================================================== PHÒNG THI — nhái màn Bluebook (Digital SAT). Nền trắng, thanh trên/dưới kẻ mảnh, chữ đen, không màu mè. Chỉ dùng trong thi.html / lam-bai.html. ===================================================================== */ body.exam { background:#fff; } .bb-top { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #E5E7EB; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:10px 22px; gap:10px; } .bb-top .ten-de { font-size:14px; font-weight:700; color:#111827; justify-self:start; line-height:1.3; } .bb-top .ten-de small { display:block; font-weight:400; color:#6B7280; font-size:12px; } .bb-timer { justify-self:center; text-align:center; } .bb-timer .t { font-size:20px; font-weight:800; color:#111827; font-variant-numeric:tabular-nums; letter-spacing:.5px; } .bb-timer .t.sap-het { color:#B91C1C; } .bb-timer button { background:none; border:1px solid #D1D5DB; border-radius:999px; font-size:11px; padding:2px 12px; cursor:pointer; color:#374151; } .bb-top .cong-cu { justify-self:end; display:flex; gap:14px; align-items:center; } .bb-top .cong-cu button, .bb-top .cong-cu a { background:none; border:0; cursor:pointer; color:#111827; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:1px; text-decoration:none; } .bb-top .cong-cu .ico { font-size:17px; line-height:1; } .bb-stage { max-width:1240px; margin:0 auto; padding:26px 22px 90px; } /* RW: đoạn văn trái — câu hỏi phải, kẻ giữa như Bluebook */ .bb-2cot { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:52vh; } .bb-2cot .doan { padding:6px 34px 6px 6px; border-right:2px solid #E5E7EB; font-size:15.5px; line-height:1.75; color:#111827; } .bb-2cot .hoi { padding:6px 6px 6px 34px; } .bb-1cot { max-width:720px; margin:0 auto; } .q-so-hang { display:flex; align-items:center; gap:10px; background:#F3F4F6; border-bottom:1px solid #D1D5DB; padding:6px 10px; margin-bottom:18px; } .q-so { background:#111827; color:#fff; font-weight:800; font-size:14px; padding:2px 10px; } .q-danh-dau { display:flex; align-items:center; gap:5px; font-size:12.5px; color:#374151; background:none; border:0; cursor:pointer; } .q-danh-dau .co { font-size:15px; } .q-danh-dau.on { color:#B91C1C; font-weight:700; } .q-gach-btn { margin-left:auto; background:none; border:1px solid #9CA3AF; border-radius:3px; font-size:11px; font-weight:700; padding:1px 7px; cursor:pointer; color:#374151; text-decoration:line-through; } .q-gach-btn.on { background:#111827; color:#fff; border-color:#111827; } .q-stem { font-size:15.5px; line-height:1.7; color:#111827; } .q-stem table { border-collapse:collapse; margin:14px auto; font-size:14px; } .q-stem table th, .q-stem table td { border:1px solid #6B7280; padding:6px 12px; text-align:center; } .q-stem table th { background:#F3F4F6; } .q-fig { margin:14px auto; text-align:center; max-width:420px; } .q-fig svg { width:100%; height:auto; } .q-opts { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; } .q-opt { position:relative; display:flex; align-items:flex-start; gap:12px; border:1px solid #6B7280; border-radius:6px; padding:11px 14px; cursor:pointer; font-size:15px; line-height:1.55; background:#fff; } .q-opt:hover { background:#F9FAFB; } .q-opt .chu { flex:none; width:26px; height:26px; border:1.5px solid #111827; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; } .q-opt.chon { border:2px solid #2563EB; padding:10px 13px; background:#EFF6FF; } .q-opt.chon .chu { background:#2563EB; border-color:#2563EB; color:#fff; } .q-opt.gach { opacity:.45; } .q-opt.gach .nd { text-decoration:line-through; } .q-opt .gach-x { position:absolute; right:8px; top:8px; font-size:11px; border:1px solid #9CA3AF; border-radius:3px; padding:0 5px; background:#fff; cursor:pointer; display:none; } .bb-stage.che-do-gach .q-opt .gach-x { display:block; } /* chấm chữa (đề lẻ + xem lại): tô đúng/sai */ .q-opt.dung { border:2px solid #059669; background:#ECFDF5; } .q-opt.dung .chu { background:#059669; border-color:#059669; color:#fff; } .q-opt.sai { border:2px solid #DC2626; background:#FEF2F2; } .q-opt.sai .chu { background:#DC2626; border-color:#DC2626; color:#fff; } .q-spr input { font-size:18px; padding:9px 13px; border:1.5px solid #6B7280; border-radius:5px; width:190px; font-family:inherit; } .q-spr .luat { font-size:12.5px; color:#6B7280; margin-top:8px; line-height:1.6; } .q-giai { margin-top:18px; border:1px solid var(--line-2); border-left:4px solid var(--navy); background:#F8FAFC; border-radius:4px; padding:14px 16px; font-size:14px; line-height:1.7; } .q-giai .bay { margin-top:8px; color:var(--warn); } .q-giai .nhan { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; } /* Thanh dưới */ .bb-bottom { position:fixed; left:0; right:0; bottom:0; z-index:100; background:#fff; border-top:1px solid #E5E7EB; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:10px 22px; } .bb-bottom .hv-ten { font-size:13.5px; font-weight:700; color:#111827; justify-self:start; } .bb-qnav-btn { justify-self:center; background:#111827; color:#fff; border:0; border-radius:6px; font-size:13.5px; font-weight:700; padding:8px 16px; cursor:pointer; display:flex; align-items:center; gap:7px; } .bb-bottom .di-chuyen { justify-self:end; display:flex; gap:9px; } .bb-bottom .di-chuyen button { background:#2563EB; color:#fff; border:0; border-radius:999px; font-size:14px; font-weight:700; padding:9px 24px; cursor:pointer; } .bb-bottom .di-chuyen button.lui { background:#fff; color:#2563EB; border:1px solid #2563EB; } .bb-bottom .di-chuyen button[disabled] { opacity:.4; cursor:not-allowed; } /* Bảng câu hỏi (question palette) nổi từ nút giữa */ .bb-palette { position:fixed; bottom:64px; left:50%; transform:translateX(-50%); z-index:120; background:#fff; border:1px solid #D1D5DB; border-radius:8px; box-shadow:0 12px 34px rgba(16,24,40,.22); padding:16px 18px; width:min(480px, 94vw); } .bb-palette h4 { font-size:13.5px; color:#111827; text-align:center; margin-bottom:4px; } .bb-palette .chu-thich { display:flex; justify-content:center; gap:16px; font-size:11.5px; color:#374151; border-bottom:1px solid #E5E7EB; padding-bottom:8px; margin-bottom:10px; } .bb-palette .o-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:7px; } .bb-palette .o { position:relative; border:1px dashed #6B7280; background:#fff; color:#2563EB; font-weight:700; font-size:13px; padding:7px 0; text-align:center; cursor:pointer; border-radius:3px; } .bb-palette .o.da-tra-loi { background:#2563EB; border:1px solid #2563EB; color:#fff; } .bb-palette .o.hien-tai::after { content:"📍"; position:absolute; top:-9px; right:-4px; font-size:11px; } .bb-palette .o.danh-dau { outline:2px solid #B91C1C; outline-offset:1px; } .bb-palette .dong { display:block; margin:12px auto 0; background:none; border:1px solid #2563EB; color:#2563EB; border-radius:999px; font-size:12.5px; font-weight:700; padding:5px 18px; cursor:pointer; } /* Màn giữa module / nộp / kết quả */ .bb-nghi { max-width:640px; margin:60px auto; text-align:center; } .bb-nghi h2 { color:#111827; font-size:24px; margin-bottom:10px; } .bb-nghi p { color:#374151; margin-bottom:10px; } .bb-nghi .dem { font-size:44px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; margin:16px 0; } .kq-box { max-width:760px; margin:40px auto; } .kq-tong { display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; margin:22px 0; } .kq-o { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 30px; text-align:center; min-width:170px; } .kq-o .so { font-size:38px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; } .kq-o .ten { font-size:12.5px; color:var(--muted); } .kq-o.tong-diem { border:2px solid var(--acc); } .kq-o.tong-diem .so { color:var(--acc); } /* ===== Bảng điểm kiểu College Board — chỉ dùng ở màn Kết quả của đề FULL ===== Nhái đúng khối "SAT Scores" trong báo cáo điểm của College Board: cột trái là TỔNG + hai phần (kèm khoảng điểm và phân vị), cột phải là Knowledge and Skills chia đôi Reading and Writing | Math. Mỗi dạng nhỏ là một DÃY Ô — MỖI Ô LÀ MỘT CÂU, ô tô đậm là câu làm đúng; như vậy nhìn phát biết sai mấy câu chứ không phải đọc thanh phần trăm rồi tự nhân chia. Màn kết quả của đề LẺ (lam-bai.html) vẫn giữ .kq-tong + .si-item cũ vì đề lẻ không có thang 1600 nên không có gì để dựng thành bảng điểm. */ .kq-box.kq-rong { max-width:1060px; } .sr { display:grid; grid-template-columns:342px 1fr; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:22px 0; } .sr-rail { padding:18px 20px 22px; border-right:1px solid var(--line); background:#FBFCFE; } .sr-than { padding:18px 22px 22px; } .sr-nhan { font-size:11px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--muted); } .sr-hang { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .sr-so { font-size:38px; font-weight:800; line-height:1.1; color:var(--navy); font-variant-numeric:tabular-nums; } .sr-thang { font-size:11.5px; color:var(--muted); border-left:1px solid var(--line-2); padding-left:8px; } .sr-pv { margin-left:auto; font-size:11px; font-weight:700; color:var(--navy-2); white-space:nowrap; border:1px solid var(--line-2); border-radius:999px; padding:2px 9px; } .sr-phu { font-size:11.5px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums; } .sr-phu:empty { display:none; } .sr-tong { border:2px solid var(--acc); border-radius:6px; padding:11px 13px; margin-top:4px; } .sr-tong .sr-so { color:var(--acc); } .sr-tong .sr-pv { color:var(--acc); border-color:var(--acc); } .sr-vach { height:1px; background:var(--line); margin:16px 0 12px; } .sr-phan { padding:11px 0; border-bottom:1px dashed var(--line); } .sr-phan:last-child { border-bottom:0; padding-bottom:0; } .sr-phan .sr-so { font-size:29px; } .sr-ten { font-size:13px; font-weight:700; color:var(--navy); margin-bottom:1px; } .sr-ten em { font-style:normal; font-weight:400; font-size:11px; color:var(--muted); } .sr-than h3 { font-size:17px; color:var(--navy); } .sr-lead { font-size:12.5px; color:var(--muted); margin-top:2px; } .sr-cot { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; margin-top:14px; } .sr-cot h4 { font-size:12.5px; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:5px; } .sr-dom { padding:9px 0; } .sr-dom > b { display:block; font-size:12.5px; font-weight:700; color:var(--text); } .sr-dom > span { display:block; font-size:11px; color:var(--muted); margin:1px 0 5px; font-variant-numeric:tabular-nums; } .sr-dom > span b { color:var(--navy); font-weight:700; } .sr-dom > span b.sr-yeu { color:var(--acc); } .sr-oo { display:flex; gap:2px; } .sr-oo i { flex:1 1 0; height:13px; border-radius:1px; background:#EDF1F7; border:1px solid #DCE3ED; } .sr-oo i.on { background:var(--navy); border-color:var(--navy); } .sr-oo i.on.yeu { background:var(--acc); border-color:var(--acc); } .sr-ghi { font-size:11.5px; line-height:1.55; color:var(--muted); margin-top:14px; border-top:1px solid var(--line); padding-top:10px; } /* Trang thi (body.exam) KHÔNG bị zoom, nên mốc dưới đây là px viewport thật. */ @media (max-width:880px) { .sr { grid-template-columns:1fr; } .sr-rail { border-right:0; border-bottom:1px solid var(--line); } .sr-cot { grid-template-columns:1fr; } .sr-cot > div + div h4 { margin-top:14px; } } /* Reference sheet (toán) */ .bb-ref { position:fixed; top:64px; right:18px; z-index:130; width:min(560px,92vw); max-height:74vh; overflow:auto; background:#fff; border:1px solid #D1D5DB; border-radius:8px; box-shadow:0 14px 40px rgba(16,24,40,.25); padding:18px 20px; } .bb-ref h4 { font-size:14px; margin-bottom:10px; color:#111827; } .bb-ref .luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; font-size:12.5px; text-align:center; } .bb-ref figure { margin:0; } .bb-ref .dong { display:block; margin:14px auto 0; background:none; border:1px solid #2563EB; color:#2563EB; border-radius:999px; font-size:12.5px; font-weight:700; padding:5px 18px; cursor:pointer; } /* chú thích đúng/sai ở màn xem lại */ .xem-lai-nav { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; } .xem-lai-nav button { border:1px solid var(--line-2); background:#fff; border-radius:3px; min-width:34px; padding:5px 0; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--text); } .xem-lai-nav button.dung { background:var(--okbg); color:var(--ok); border-color:#A7F3D0; } .xem-lai-nav button.sai { background:var(--errbg); color:var(--err); border-color:#FECACA; } .xem-lai-nav button.on { outline:2px solid var(--navy); } /* ===== Responsive ===== */ @media (max-width:900px) { .layout { grid-template-columns:1fr; } .rail { position:static; display:flex; flex-wrap:wrap; } .rail .rail-tieu-de, .rail .rail-chu-thich { display:none; } .rail a { border-left:0; border-bottom:3px solid transparent; flex:1 1 auto; justify-content:center; } .rail a.on { border-bottom-color:var(--acc); } .bb-2cot { grid-template-columns:1fr; } .bb-2cot .doan { border-right:0; border-bottom:2px solid #E5E7EB; padding:6px 6px 20px; margin-bottom:18px; } .bb-2cot .hoi { padding:6px; } .si-grid { grid-template-columns:1fr; } } @media (max-width:760px) { .main-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; } .nav-drop { display:none; } .header-cta > .btn.an-mobile { display:none; } /* Nút Quản trị (chỉ admin/editor thấy) co còn cái cờ-lê trên điện thoại */ #satAdminBtn .nhan-adm { display:none; } #satAdminBtn { padding:8px 11px; } .bb-top { padding:8px 12px; } .bb-top .ten-de small { display:none; } .bb-stage { padding:18px 14px 100px; } .bb-bottom { padding:8px 12px; } .bb-bottom .hv-ten { display:none; } .bb-bottom { grid-template-columns:auto 1fr; } .bb-bottom .di-chuyen { justify-self:end; } } /* ===== (23/8/2026) Ba thứ Bluebook thật có mà phòng thi còn thiếu ===== */ /* Directions — trong Bluebook là bảng xổ ngay dưới tên module, mở/đóng được */ .bb-huongdan { max-width:1240px; margin:0 auto; padding:0 22px; } .bb-huongdan > button { background:none; border:0; cursor:pointer; padding:10px 0 2px; font-size:13.5px; font-weight:700; color:#2563EB; display:flex; align-items:center; gap:5px; } .bb-huongdan .noi-dung { display:none; border:1px solid #D1D5DB; border-radius:8px; background:#F9FAFB; padding:14px 16px; margin-top:8px; font-size:13.5px; line-height:1.7; color:#111827; } .bb-huongdan.mo .noi-dung { display:block; } .bb-huongdan .noi-dung .viet { margin-top:10px; padding-top:10px; border-top:1px dashed #D1D5DB; color:#4B5563; } /* Bôi vàng + ghi chú — công cụ Annotate của phần Reading and Writing */ mark.hl { padding:1px 0; border-radius:2px; cursor:pointer; } mark.hl.v { background:#FDE68A; } mark.hl.x { background:#BBF7D0; } mark.hl.h { background:#BFDBFE; } mark.hl[data-nc]::after { content:"✎"; font-size:11px; vertical-align:super; color:#B45309; margin-left:1px; } #hlMenu { position:fixed; z-index:150; background:#fff; border:1px solid #D1D5DB; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.2); padding:7px; display:flex; gap:6px; align-items:center; } #hlMenu .mau { width:22px; height:22px; border-radius:50%; border:1px solid #9CA3AF; cursor:pointer; } #hlMenu .mau.v { background:#FDE68A; } #hlMenu .mau.x { background:#BBF7D0; } #hlMenu .mau.h { background:#BFDBFE; } #hlMenu button.chu { background:none; border:1px solid #D1D5DB; border-radius:6px; cursor:pointer; font-size:12px; padding:4px 8px; color:#111827; } .bb-nc { position:fixed; z-index:150; background:#fff; border:1px solid #D1D5DB; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.2); padding:10px; width:260px; } .bb-nc textarea { width:100%; height:70px; border:1px solid #D1D5DB; border-radius:6px; padding:6px; font:inherit; font-size:13px; resize:vertical; } .bb-nc .hang { display:flex; gap:6px; justify-content:flex-end; margin-top:7px; } /* Thanh kéo chia đôi — Bluebook cho kéo rộng/hẹp cột đoạn văn */ .bb-2cot { grid-template-columns:var(--cot,1fr) 6px 1fr; } .bb-2cot .keo { cursor:col-resize; background:#E5E7EB; border-radius:3px; } .bb-2cot .keo:hover { background:#9CA3AF; } .bb-2cot .doan { border-right:0; padding-right:22px; } .bb-2cot .hoi { padding-left:22px; } @media (max-width:860px) { .bb-2cot { grid-template-columns:1fr; } .bb-2cot .keo { display:none; } .bb-2cot .doan { border-bottom:2px solid #E5E7EB; padding:6px 6px 20px; margin-bottom:18px; } } /* ===== Bảng so sánh FREE / SAT PRO + FAQ (khuôn lấy từ pro.html của ielts8020) ===== */ .cmp { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); margin-top:22px; } .cmp th, .cmp td { border:1px solid var(--line); padding:12px 15px; font-size:14.5px; text-align:center; } .cmp th { background:var(--navy); color:#fff; font-size:14px; } .cmp td:first-child { text-align:left; font-weight:600; } .cmp .y { color:var(--ok); font-weight:800; } .cmp .n { color:#B91C1C; opacity:.6; } .cmp tr.row-dd td { background:var(--acc-soft); font-size:15px; } .cmp tr.row-dd td:first-child { border-left:5px solid var(--acc); } .cmp-cuon { overflow-x:auto; } details.faq { background:#fff; border:1px solid var(--line); border-radius:6px; padding:14px 18px; margin-bottom:10px; } details.faq summary { font-weight:700; color:var(--navy); cursor:pointer; font-size:15px; } details.faq p { margin-top:10px; color:#374151; font-size:14.5px; line-height:1.75; } /* ---- Cổng gác lời giải (mô hình sản phẩm chốt 23/8/2026) -------------------- Free LÀM được và XEM ĐÁP ÁN được ở mọi đề lẻ + 2 đề test đầu vào; phần HƯỚNG DẪN GIẢI THÍCH mới là hàng của SAT PRO. Khối này thay chỗ .q-giai khi chưa có PRO — cố ý giữ đúng khung và khoảng cách của .q-giai để bố cục không nhảy. */ .giai-khoa { margin-top:18px; border:1px dashed var(--acc); border-left:4px solid var(--acc); background:linear-gradient(135deg,#FDF2F8,#F5F7FF); border-radius:4px; padding:14px 16px; } .giai-khoa .nhan { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:6px; } .giai-khoa p { margin:0 0 10px; font-size:14px; line-height:1.7; color:#374151; } .giai-khoa .nut { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .giai-khoa .phu { font-size:12.5px; color:var(--muted); } /* Tem "test đầu vào" trên thẻ đề mô phỏng miễn phí */ .pill.dauvao { border-color:#0E9F6E; color:#0E9F6E; background:#ECFDF5; } .bang-dauvao { border:1px solid #A7F3D0; background:#ECFDF5; border-radius:12px; padding:14px 18px; margin:0 0 18px; font-size:14.5px; line-height:1.75; color:#065F46; } .bang-dauvao b { color:#064E3B; } /* Khu làm mờ cho người chưa có PRO (cùng cách ielts8020 đang dùng ở /du-doan) */ .mo-wrap { position:relative; } .mo-trong { filter:blur(7px) saturate(.85); opacity:.7; pointer-events:none; user-select:none; -webkit-user-select:none; } .mo-giu { position:sticky; top:30vh; height:0; z-index:6; display:flex; justify-content:center; } .mo-cta { background:#fff; border:1.5px solid var(--line-2); border-radius:14px; box-shadow:0 12px 34px rgba(28,53,95,.22); padding:20px 24px; text-align:center; max-width:360px; transform:translateY(-50%); } .mo-cta p { font-size:13.5px; color:var(--muted); margin:8px 0 14px; line-height:1.65; } .mo-cta .phu { font-size:12px; margin:10px 0 0; } /* ===== THẺ TÀI LIỆU CÓ ẢNH XEM THỬ (trang /sat8020/ket-qua) ================= Vì sao có khối này: trước 23/8/2026 thẻ tài liệu chỉ có tiêu đề + mô tả + nút tải. Khách không biết bên trong là gì nên phải ĐĂNG KÝ TÀI KHOẢN mới xem được — đúng thứ tự ngược. Nay mỗi thẻ bày sẵn MỘT TRANG THẬT bên trong sách (chọn tay, ưu tiên trang có đồ thị / hình học / bảng công thức màu), bấm vào là phóng to đọc được. Ảnh cắt từ MÉP TRÊN (object-position:top) chứ không căn giữa: đầu trang mới là chỗ có tiêu đề chương — cắt giữa thì ra một mảng chữ không rõ là gì. ========================================================================== */ .tl-o { display:flex; flex-direction:column; overflow:hidden; padding:0; } .tl-anh { position:relative; display:block; width:100%; aspect-ratio:4/3; border:none; padding:0; margin:0; background:#EEF2F7; cursor:zoom-in; border-bottom:1px solid var(--line); overflow:hidden; } /* PHÓNG VÀO GÓC TRÊN-TRÁI, ĐỪNG THU CẢ TRANG A4 (24/8/2026). Ảnh xem thử là một trang sách thật, tỉ lệ 4/3 đúng bằng khung — nghĩa là object-fit:cover không cắt gì cả, cả trang bị bóp xuống bề ngang ~250px của thẻ. Ở cỡ đó chữ nhỏ hơn 3px: người xem chỉ thấy một mảng xám mờ và tưởng ảnh hỏng, đúng thứ khối bìa trắng trơn ở nửa màn hình đầu trang Tài liệu. Nay phóng 1,55 lần và neo vào GÓC TRÊN-TRÁI: tiêu đề chương, bảng và hình của trang hiện ra đọc được ngay trên thẻ. Bấm vào vẫn mở nguyên trang. Neo TRÁI chứ không phải giữa vì trang sách căn lề trái — neo giữa là cụt mất chữ đầu dòng của tiêu đề. Ai thêm ảnh xem thử mới thì chọn trang có thứ đáng xem nằm ở một phần ba trên bên trái (xem BAN-GIAO-ANH-XEM-THU.md). */ .tl-anh img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; transform:scale(1.55); transform-origin:top left; transition:transform .35s ease; } .tl-anh:hover img, .tl-anh:focus-visible img { transform:scale(1.62); } .tl-anh .tl-nhan { position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; background:linear-gradient(to top,rgba(15,23,42,.82),rgba(15,23,42,0)); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:6px; } .tl-anh:focus-visible { outline:3px solid var(--acc); outline-offset:-3px; } .tl-than { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; } .tl-than h3 { margin:0 0 6px; } .tl-than .tl-mo { font-size:14px; color:var(--muted); line-height:1.55; margin:0 0 14px; flex:1; } .tl-than .btn { align-self:flex-start; } /* Lightbox — bấm ảnh để đọc trang đó ở cỡ thật */ .tl-lop { position:fixed; inset:0; z-index:300; background:rgba(15,23,42,.88); display:flex; align-items:center; justify-content:center; /* chừa đáy cho dòng chú thích cố định, không thì nó đè lên chân trang ảnh */ padding:22px 16px 78px; overflow:hidden; } .tl-lop img { /* max-height:100% KHÔNG ăn khi cha đang overflow:auto — phải khoá theo chiều cao màn hình, nếu không trang A4 tràn quá màn hình và người xem phải cuộn. BẪY ZOOM: body có zoom 1.10/1.15 từ 1240px, mà `vh` KHÔNG bị zoom chia lại — `calc(100vh - 110px)` vì thế nở ra 1.10 lần và đẩy ảnh lên quá mép trên. Dùng phần trăm của .tl-lop (chính nó là inset:0 nên cao đúng màn hình, và phần trăm thì nằm trong cùng hệ toạ độ đã zoom). Cha phải hết overflow:auto để phần trăm có mốc — ảnh đã tự vừa nên không cần cuộn nữa. */ max-width:min(860px,100%); max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.5); background:#fff; } .tl-lop .tl-dong { position:fixed; top:16px; right:18px; width:42px; height:42px; border:none; border-radius:50%; background:#fff; color:var(--navy); font-size:20px; cursor:pointer; line-height:1; box-shadow:0 4px 14px rgba(0,0,0,.3); } .tl-lop .tl-chu { position:fixed; left:0; right:0; bottom:0; padding:14px 18px; background:rgba(15,23,42,.92); color:#fff; font-size:13.5px; text-align:center; } @media (max-width:600px) { .tl-anh { aspect-ratio:3/2; } } /* ===== Màn đăng nhập đè lên trang (SAT.moDangNhap) ===== Không đá người dùng sang /dang-nhap nữa — xổ hộp này ngay tại trang đang xem. z-index phải trên MỌI thứ của phòng thi (thanh bb-top/bb-bottom, máy tính Desmos 140, bảng công thức 130), nên để 400. */ .dn-lop { position:fixed; inset:0; z-index:400; background:rgba(16,24,40,.55); display:flex; align-items:center; justify-content:center; padding:20px; } .dn-hop { position:relative; width:min(400px,100%); background:#fff; border-radius:10px; padding:26px 26px 22px; box-shadow:0 20px 60px rgba(16,24,40,.35); text-align:center; } .dn-hop h3 { font-size:19px; color:var(--navy); } .dn-hop > p { font-size:13px; color:var(--muted); margin-top:7px; line-height:1.6; } .dn-dong { position:absolute; top:8px; right:10px; border:0; background:none; cursor:pointer; font-size:17px; line-height:1; color:var(--muted); padding:5px 7px; } .dn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:18px; padding:12px 16px; font:700 15px/1 Arial,sans-serif; color:#3C4043; cursor:pointer; background:#fff; border:1px solid var(--line-2); border-radius:6px; } .dn-google:hover { background:#F7F9FC; } .dn-google:disabled { opacity:.65; cursor:default; } .dn-msg { font-size:12.5px; color:var(--err); margin-top:9px; } .dn-msg:empty { display:none; } .dn-phu { font-size:12px; color:var(--muted); margin-top:14px; border-top:1px solid var(--line); padding-top:12px; } /* Dải ảnh lớp SAT trên trang bán gói (pro.html). Cùng vai trò với dải ảnh lớp ở pro.html của ielts8020: bằng chứng "có lớp thật, có người thật" đặt ngay trước FAQ. Cắt theo tỷ lệ cố định để 3 ảnh khác kích thước vẫn thành một dải phẳng. */ .pro-anh { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:46px 0 0; } .pro-anh img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); display:block; } @media (max-width:700px) { .pro-anh { grid-template-columns:1fr 1fr; } .pro-anh img:nth-child(3) { display:none; } } /* ===== Dải giới thiệu cho khách lạ ở trang hub (#daiKhachLa) ===== Chỉ hiện khi CHƯA đăng nhập — xem dungDaiKhachLa() trong sat8020/index.html. Nguyên tắc: ảnh trước, chữ sau, đúng một nút. Toàn bộ phần "ảnh" là nội dung THẬT của đề đang có trong kho, không phải ảnh minh hoạ mua ngoài. */ .dkl { margin:6px 0 30px; } .dkl .page-title { margin-bottom:16px; } .dkl-anh { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .dkl-o { display:block; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; background:#fff; transition:border-color .12s ease, transform .12s ease; } .dkl-o:hover { border-color:var(--acc); transform:translateY(-2px); } /* Ô xem trước ở đây cao hơn ở thẻ đề: đây là thứ đầu tiên khách nhìn thấy, hình vẽ nhỏ quá thì không đọc ra là một câu hỏi thật. */ .dkl-o .de-xem { height:150px; border-bottom:0; } .dkl-o .de-xem.hinh svg { max-height:128px; } .dkl-chu { margin:9px 0 0; font-size:13px; color:var(--muted); text-align:center; } .dkl-bang { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px 0 18px; } .dkl-diem { display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; background:var(--acc-soft); border:1px solid #C7E4F4; border-radius:var(--radius); padding:9px 14px; } .dkl-diem b { font-size:22px; font-weight:800; color:var(--navy); line-height:1; } .dkl-diem span { font-size:12px; color:var(--muted); } .dkl-diem i { font-style:normal; font-size:12.5px; color:var(--muted); flex:1 0 100%; } .dkl-them { font-size:13px; font-weight:700; white-space:nowrap; } @media (max-width:820px) { .dkl-anh { grid-template-columns:1fr 1fr; } .dkl-o:nth-child(n+3) { display:none; } /* 2 ô là đủ trên điện thoại */ .dkl-o .de-xem { height:130px; } .dkl .btn-lg { display:block; text-align:center; } } /* ===================================================================== KHỐI TĂNG TRƯỞNG ĐIỂM — pro.html, ngay dưới bảng giá. Biểu đồ là SVG viết tay trong pro.html chứ không dùng thư viện: ba đường thẳng và bốn dòng chữ thì kéo cả một thư viện vẽ đồ thị về là đắt vô lý, mà trang bán hàng có thêm một file JS ngoài là thêm một chỗ để hỏng. ===================================================================== */ .tang-truong { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 24px; margin-top:30px; box-shadow:var(--shadow); } .tang-truong h2 { color:var(--navy); font-size:23px; line-height:1.3; } .tang-truong h2 b { color:var(--acc); } .tang-truong .lead { color:var(--muted); font-size:14.5px; line-height:1.65; max-width:760px; margin-top:8px; } .tt-do-thi { display:block; width:100%; height:auto; max-width:760px; margin:18px auto 4px; } .tt-o { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:18px; } .tt-o > div { background:var(--acc-soft); border-radius:var(--radius); padding:14px 16px; } .tt-o b { display:block; color:var(--navy); font-size:14.5px; margin-bottom:4px; } .tt-o span { font-size:13px; color:var(--text); line-height:1.55; } /* ===================================================================== KHUNG MÀN THI cho ô xem trước của thẻ ĐỀ ĐẦY ĐỦ (SAT.oXem có cờ manHinh). Nội dung bên trong vẫn là .de-xem cũ; khung này chỉ thêm thanh trên có đồng hồ + nhãn module, và hàng A/B/C/D ở đáy. Ba thứ đó là cái người ta nhận ra ngay là màn Bluebook, mà lại rẻ — không thêm ảnh, không thêm request. KHÔNG dùng cho kho đề lẻ: đề lẻ không có đồng hồ và không chia module. ===================================================================== */ .de-man { border-bottom:1px solid var(--line); background:#fff; } .dm-top { display:flex; align-items:center; gap:8px; padding:5px 10px; border-bottom:1px solid var(--line); background:#fff; } .dm-gio { font-size:12px; font-weight:800; color:#111827; font-variant-numeric:tabular-nums; } .dm-nhan { font-size:10.5px; color:var(--muted); font-weight:600; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Ô nội dung thấp hơn 126px cũ để chừa chỗ cho hai thanh, tổng chiều cao thẻ giữ nguyên — nếu không thì lưới đề trên trang chủ tụt hàng. */ .de-man .de-xem { height:104px; border-bottom:0; } .de-man .de-xem.hinh svg { max-height:88px; } .dm-day { display:flex; align-items:center; gap:6px; padding:6px 10px; border-top:1px solid var(--line); background:#FAFBFD; } .dm-day i { width:17px; height:17px; border:1.5px solid var(--line-2); border-radius:50%; font-style:normal; font-size:9.5px; font-weight:800; color:var(--muted); display:flex; align-items:center; justify-content:center; } .dm-day i:first-child { border-color:#2563EB; background:#2563EB; color:#fff; } .dm-next { margin-left:auto; background:#2563EB; color:#fff; border-radius:999px; font-size:10px; font-weight:800; padding:2px 11px; } /* ===================================================================== BẢNG XẾP HẠNG THEO NGÀY (SAT.veBXH) — /giai-de, /verbal, /math. Cố ý gọn và nhạt màu: đây là thứ đứng CẠNH khu học chứ không phải thứ người ta vào để xem. To hơn kho đề là đảo mất trọng tâm của trang. ===================================================================== */ .bxh { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 16px; margin-top:30px; box-shadow:var(--shadow); } .bxh-dau { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .bxh-dau h3 { color:var(--navy); font-size:17px; } .bxh-phu { font-size:12.5px; color:var(--muted); } .bxh-tai, .bxh-trong { font-size:13.5px; color:var(--muted); padding:14px 0 4px; } /* Bảng hẹp hơn màn hình thì cuộn ngang TRONG khối, không đẩy cả trang trượt. */ .bxh-cuon { overflow-x:auto; margin-top:12px; } .bxh-bang { width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; } .bxh-bang th { text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); padding:0 10px 7px; border-bottom:1px solid var(--line); } .bxh-bang th:not(:nth-child(2)):not(:first-child) { text-align:right; } .bxh-bang td { padding:8px 10px; border-bottom:1px solid var(--line); color:var(--text); } .bxh-bang td.s { text-align:right; font-variant-numeric:tabular-nums; } .bxh-bang td.h { width:38px; font-weight:800; color:var(--muted); font-size:15px; font-variant-numeric:tabular-nums; } /* Ba hạng đầu: trước đây là huy chương 🥇🥈🥉 — emoji màu, mỗi máy render một kiểu và lệch hẳn tông với bảng. Nay vẫn là số hạng như mọi dòng, chỉ đậm và đổi sang màu nhấn để mắt bắt được ngay ba dòng đầu. */ .bxh-bang td.h.top3 { color:var(--acc); font-size:16px; } .bxh-bang tr:last-child td { border-bottom:0; } .bxh-bang tr.toi td { background:var(--acc-soft); } .bxh-bang tr.toi td:first-child { border-left:3px solid var(--acc); padding-left:7px; } .bxh-ban { font-size:10.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#fff; background:var(--acc); border-radius:999px; padding:1px 7px; margin-left:5px; } .bxh-toi { font-size:13px; color:var(--text); margin-top:11px; } .bxh-toi b { color:var(--acc); } .bxh-nhac { font-size:12.5px; color:var(--warn); background:var(--warnbg); border-radius:4px; padding:8px 12px; margin-top:12px; } /* Bánh răng SVG của nút Quản trị (sat-app.js). Dùng SVG một màu thay emoji 🔧 để nút ăn theo màu chữ của nút và không đổi hình giữa các máy. Trên điện thoại .nhan-adm ẩn đi, còn lại đúng cái bánh răng — xem @media ở trên. */ .ico-adm { vertical-align:-3px; } /* ========================================================================== KHOÁ HỌC (26/8/2026) — mục lục /khoa-hoc và trang bài học /bai-hoc 78 bài dựng từ giáo trình LaTeX, xem sat8020/_build_khoahoc.py. Hai nguyên tắc chi phối cả khối này: ① Trang bài học là trang ĐỌC DÀI (5–24 KB chữ mỗi bài), nên nó hẹp hơn phần còn lại của khu SAT — dòng dài quá 90 ký tự thì mắt nhảy dòng sai, và đây là chỗ duy nhất người ta ngồi đọc mười phút liền. ② Các hộp lý thuyết giữ ĐÚNG bốn vai của sách in: khái niệm · ví dụ mẫu · giải thích tiếng Việt · lỗi thường gặp. Đổi màu thì đổi cả bốn cùng lúc, đừng để hai hộp cùng một màu — người đọc phân biệt vai bằng màu trước khi kịp đọc nhãn. ========================================================================== */ .kh-phan-mota { color:var(--muted); font-size:14.5px; max-width:760px; margin:14px 0 4px; } .kh-tiendo { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 6px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:11px 14px; } .kh-td-thanh { flex:1 1 200px; height:8px; background:#EEF2F7; border-radius:999px; overflow:hidden; } .kh-td-thanh i { display:block; height:100%; background:var(--acc-lite); border-radius:999px; } .kh-td-chu { font-size:13px; color:var(--muted); } .kh-td-chu b { color:var(--navy); } .kh-chuong { margin-top:30px; } .kh-ch-ten { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--navy); font-size:19px; line-height:1.3; } .kh-ch-ma { font-size:12px; font-weight:800; letter-spacing:.6px; color:#fff; background:var(--navy); border-radius:3px; padding:3px 8px; } .kh-ch-so { font-size:12px; font-weight:700; color:var(--muted); } .kh-ch-mota { color:var(--muted); font-size:13.5px; margin:6px 0 12px; max-width:760px; } .kh-ds { list-style:none; display:grid; gap:8px; } .kh-bai { display:flex; align-items:center; gap:13px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 15px; text-decoration:none; color:var(--text); transition:border-color .15s, box-shadow .15s; } .kh-bai:hover { border-color:var(--acc); box-shadow:var(--shadow); } .kh-so { flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--acc-soft); color:var(--acc); font-size:13px; font-weight:800; } .kh-than { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; } .kh-ten { font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; } .kh-ten-vi { font-size:13.5px; color:var(--text); line-height:1.4; } .kh-meta { font-size:12.5px; color:var(--muted); } .kh-diem { color:var(--ok); } .kh-xong { flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--okbg); color:var(--ok); font-weight:800; font-size:13px; } /* ===== Trang bài học ===== */ .kh-doc { max-width:820px; } .kh-duong { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:12px; } .kh-duong a { color:var(--muted); text-decoration:none; } .kh-duong a:hover { color:var(--acc); text-decoration:underline; } .kh-duong b { color:var(--navy); } .lt-muc-tieu { background:var(--acc-soft); border-left:3px solid var(--acc); border-radius:4px; padding:12px 16px; margin:18px 0 6px; font-size:14.5px; line-height:1.6; } .lt-than { font-size:16px; line-height:1.75; margin-top:20px; } .lt-than p { margin:13px 0; } .lt-than h2 { color:var(--navy); font-size:21px; line-height:1.3; margin:32px 0 6px; padding-top:16px; border-top:1px solid var(--line); } .lt-than h3 { color:var(--navy); font-size:17px; margin:22px 0 4px; } .lt-than ul, .lt-than ol { margin:12px 0 12px 22px; } .lt-than li { margin:6px 0; } .lt-than u { text-decoration:underline; text-underline-offset:3px; } .lt-than code { background:#F1F5F9; border:1px solid var(--line); border-radius:3px; padding:1px 5px; font-size:.92em; font-family:"SF Mono",Menlo,Consolas,monospace; } .lt-giua { text-align:center; } .lt-giua > table, .lt-giua .lt-bang-cuon { margin-left:auto; margin-right:auto; text-align:left; } /* Bốn hộp của sách in. Nhãn nằm trong .lt-nhan, dựng bởi _build_khoahoc.py. */ .lt-nhan { font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; margin-bottom:5px; } .lt-key, .lt-concept, .lt-vd, .lt-vn, .lt-bay { border-radius:5px; padding:13px 16px; margin:18px 0; font-size:15px; line-height:1.65; } .lt-key { background:#F1F5FA; border-left:3px solid var(--navy); } .lt-concept { background:#EEF2F8; border-left:3px solid var(--navy); } .lt-concept .lt-nhan { color:var(--navy); } .lt-vd { background:#fff; border:1px solid var(--navy); } .lt-vd .lt-nhan { color:var(--navy); } .lt-vn { background:var(--acc-soft); border-left:3px solid var(--acc-lite); } .lt-vn .lt-nhan { color:var(--acc); } .lt-bay { background:var(--warnbg); border-left:3px solid var(--warn); } .lt-bay .lt-nhan { color:var(--warn); } .lt-key p:first-child, .lt-concept p:first-child, .lt-vd p:first-child, .lt-vn p:first-child, .lt-bay p:first-child { margin-top:0; } .lt-key p:last-child, .lt-concept p:last-child, .lt-vd p:last-child, .lt-vn p:last-child, .lt-bay p:last-child { margin-bottom:0; } /* Đoạn văn đề Đọc–Viết trong ví dụ mẫu (lệnh \passage của giáo trình) */ .lt-doan-de { background:#FBFCFE; border:1px solid var(--line); border-radius:4px; padding:12px 15px; margin:12px 0; font-size:14.5px; line-height:1.7; font-style:italic; } .lt-muctieu { font-style:italic; color:var(--navy); margin:10px 0; } /* Bảng số liệu. Bọc trong khung cuộn riêng — bảng 5 cột trên điện thoại mà không có khung này thì đẩy lệch cả trang, đúng bẫy đã gặp ở bảng xếp hạng. */ .lt-bang-cuon { overflow-x:auto; margin:16px 0; } .lt-bang { border-collapse:collapse; font-size:14px; min-width:min(100%,420px); background:#fff; } .lt-bang th, .lt-bang td { border:1px solid var(--line); padding:7px 12px; text-align:left; vertical-align:top; } .lt-bang th { background:#F1F5FA; color:var(--navy); font-weight:800; } /* Hình dựng lại từ TikZ (_tikz2svg.py) và 4 biểu đồ vẽ tay (_hinh_bieudo.py) */ .lt-hinh { margin:18px 0; text-align:center; } .lt-hinh svg { max-width:100%; height:auto; } /* Công thức dài (hệ phương trình, hằng đẳng thức xếp cột) tràn ngang trên điện thoại — cho cuộn trong khung của nó thay vì đẩy cả trang. */ .lt-than .katex-display { overflow-x:auto; overflow-y:hidden; padding:2px 0; } /* ===== Khối bài tập cuối bài học ===== */ .kh-lam { background:#fff; border:1px solid var(--acc); border-radius:var(--radius); padding:20px 22px; margin:34px 0 0; } .kh-lam h2 { color:var(--navy); font-size:19px; margin-bottom:6px; } .kh-lam p { font-size:14.5px; color:var(--text); } .kh-tang { display:inline-flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .kh-tang i { font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.2px; border-radius:3px; padding:3px 9px; } .kh-tang .n { background:#F1F5FA; color:var(--muted); } .kh-tang .k { background:var(--acc-soft); color:var(--acc); } .kh-tang .rk { background:var(--warnbg); color:var(--warn); } .kh-nut { display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; } .kh-nut .btn { padding:11px 20px; } #khXong.kh-da-xong { border-color:#0E9F6E; color:#065F46; background:var(--okbg); } .kh-kq { font-size:13px; color:var(--muted); margin-top:11px; } .kh-tiep { display:flex; justify-content:space-between; gap:12px; margin-top:22px; } .kh-tiep a { display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:11px 16px; text-decoration:none; color:var(--muted); font-size:12.5px; max-width:48%; } .kh-tiep a:hover { border-color:var(--acc); } .kh-tiep a b { color:var(--navy); font-size:14px; } .kh-tiep .kh-sa { text-align:right; } @media (max-width:560px) { .lt-than { font-size:15.5px; } .kh-bai { align-items:flex-start; } .kh-lam { padding:16px; } } /* Bốn phương án của một câu ví dụ trong bài học — phải là (A)(B)(C)(D), không phải 1·2·3·4: lời giải ngay dưới nó viết "Answer (C)". Dựng bằng counter thay vì ghi chữ cái vào dữ liệu, để thêm/bớt phương án không phải sửa nội dung. */ .lt-chon { list-style:none; counter-reset:pa; margin:12px 0 12px 2px; } .lt-chon li { counter-increment:pa; position:relative; padding-left:36px; margin:6px 0; } .lt-chon li::before { content:"(" counter(pa, upper-alpha) ")"; position:absolute; left:0; font-weight:800; color:var(--navy); } /* ========================================================================== TẦNG TỰ HỌC (26/8/2026) — sat8020-giao-trinh/tu-hoc/.md Roger bỏ hướng video, nên phần thầy đáng lẽ giảng phải nằm trên trang. Sáu khối tiếng Việt xếp quanh bản lý thuyết tiếng Anh có sẵn. Nguyên tắc phối màu: khối nào là VIỆC PHẢI LÀM thì có viền nhấn, khối nào là ĐỌC THÊM thì phẳng — người tự học cuộn qua một trang dài, phải phân biệt được bằng mắt trước khi đọc chữ. ========================================================================== */ .th-o { margin:26px 0; font-size:16px; line-height:1.75; } .th-o p { margin:12px 0; } .th-o ul { margin:10px 0 10px 22px; } .th-o li { margin:5px 0; } .th-nhan { color:var(--navy); font-size:20px; line-height:1.3; margin-bottom:8px; padding-top:18px; border-top:1px solid var(--line); } .th-muc { color:var(--navy); font-size:17px; margin:22px 0 2px; } .th-lien { color:var(--acc); font-weight:600; } /* Vào bài — câu chuyện dẫn nhập, đọc trước khi vào lý thuyết */ .th-vao { background:#F8FAFD; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; font-size:15.5px; } .th-vao .th-nhan { border-top:0; padding-top:0; font-size:16px; } .th-vao p:last-child { margin-bottom:0; } /* Cần biết trước — danh sách móc sang bài khác */ .th-truoc { background:#fff; border-left:3px solid var(--acc-lite); border-radius:4px; padding:13px 16px; font-size:15px; } .th-truoc .th-nhan { border-top:0; padding-top:0; font-size:15px; text-transform:uppercase; letter-spacing:.6px; color:var(--acc); } .th-truoc ul { margin:6px 0 0 20px; } /* Ba chỗ mất điểm */ .th-sai .th-muc { color:var(--warn); font-size:15.5px; } .th-sai { background:var(--warnbg); border-radius:5px; padding:14px 18px; } .th-sai .th-nhan { border-top:0; padding-top:0; color:var(--warn); font-size:17px; } .th-sai p:last-child { margin-bottom:0; } /* Tự kiểm tra */ .th-cau { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; margin:12px 0; } .th-so { font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--acc); margin-bottom:5px; } .th-de { font-size:15.5px; line-height:1.7; } .th-pa { list-style:none; counter-reset:tp; margin:10px 0 0; } .th-pa li { counter-increment:tp; position:relative; padding-left:34px; margin:5px 0; font-size:15px; } .th-pa li::before { content:"(" counter(tp, upper-alpha) ")"; position:absolute; left:0; font-weight:800; color:var(--navy); } /* Ô đúng KHÔNG được tô sẵn: cả điểm của phần này là người học tự chọn rồi mới mở lời chữa. Chỉ đánh dấu trong DOM để lời chữa nói đúng chữ cái. */ .th-pa li.dung { } .th-chua { margin-top:11px; border-top:1px dashed var(--line-2); padding-top:9px; } .th-chua summary { cursor:pointer; font-size:13.5px; font-weight:700; color:var(--acc); list-style:none; } .th-chua summary::-webkit-details-marker { display:none; } .th-chua summary::after { content:" ↓"; } .th-chua[open] summary::after { content:" ↑"; } .th-nhan-dap { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.4px; background:var(--okbg); color:var(--ok); border-radius:3px; padding:3px 10px; margin:9px 0 2px; } .th-chua p { font-size:15px; margin:9px 0; } /* Tóm tắt bỏ túi — thứ đọc lại trước khi thi */ .th-tom { background:var(--acc-soft); border-radius:5px; padding:15px 18px; } .th-tom .th-nhan { border-top:0; padding-top:0; color:var(--acc); font-size:17px; } .th-tom ul { margin:6px 0 0 20px; } .th-tom li { margin:7px 0; font-size:15.5px; } /* Nhãn dẫn vào bản tiếng Anh */ .th-nhan-en span { display:block; font-size:13.5px; font-weight:400; color:var(--muted); margin-top:3px; line-height:1.55; } @media (max-width:560px) { .th-o { font-size:15.5px; } .th-vao, .th-sai, .th-tom { padding:13px 15px; } } /* Bảng thuật ngữ Anh–Việt, đứng TRƯỚC thân bài tiếng Anh. Người học cầm sẵn nghĩa rồi mới đọc — nếu không thì mỗi từ lạ là một lần dừng lại tra, và đọc một mạch mới là thứ phần Đọc–Viết đòi hỏi. */ .tv-cuon { overflow-x:auto; } .tv-bang { border-collapse:collapse; width:100%; font-size:14.5px; background:#fff; min-width:min(100%,520px); } .tv-bang th, .tv-bang td { border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top; } .tv-bang th { background:#F1F5FA; color:var(--navy); font-weight:800; font-size:12px; letter-spacing:.4px; text-transform:uppercase; } .tv-bang .tv-en { font-weight:700; color:var(--navy); white-space:nowrap; } .tv-bang .tv-vi { color:var(--text); } .tv-bang .tv-gt { color:var(--muted); font-size:13.5px; } .th-tv .th-nhan { border-top:0; padding-top:0; font-size:17px; } /* =================================================================== KHU NGOẠI NGỮ — phần riêng, không có trong hệ thiết kế của khu SAT =================================================================== */ /* --- Dải chọn dạng bài + lọc độ khó --- */ .kho-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 10px; } .kho-tabs a { text-decoration:none; font-size:13.5px; font-weight:700; color:var(--text); background:#fff; border:1px solid var(--line-2); border-radius:4px; padding:8px 13px; } .kho-tabs a.on { background:var(--navy); border-color:var(--navy); color:#fff; } .kho-tabs a:hover:not(.on) { border-color:var(--acc); } .kho-tabs a .n { font-size:11.5px; color:var(--muted); font-weight:700; margin-left:4px; } .kho-tabs a.on .n { color:#CBD5E1; } .kho-loc { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:6px; } .kho-loc .loc-nhan { font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-right:3px; } .kho-loc a { text-decoration:none; font-size:12.5px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:4px 11px; background:#fff; } .kho-loc a.on { color:var(--acc); border-color:var(--acc); background:var(--acc-soft); } /* Tem độ khó — năm bậc, đi từ xám sang đỏ. Chỉ dùng MÀU VIỀN + CHỮ, không tô nền đặc: mỗi thẻ đề đã có một tem rồi, tô đặc cả lưới là rối mắt. */ .pill.kho.d1 { border-color:#94A3B8; color:#475569; } .pill.kho.d2 { border-color:#0E9F6E; color:#047857; } .pill.kho.d3 { border-color:var(--acc); color:var(--acc); } .pill.kho.d4 { border-color:#D97706; color:#B45309; } .pill.kho.d5 { border-color:#DC2626; color:#B91C1C; } /* --- Lưới thẻ đề --- */ .de-list { display:grid; gap:12px; margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); } .de-item { display:flex; flex-direction:column; gap:9px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; text-decoration:none; color:var(--text); transition:border-color .12s, transform .12s; } .de-item:hover { border-color:var(--acc); transform:translateY(-2px); } .de-dau { display:flex; gap:6px; flex-wrap:wrap; } .de-than { font-size:13.5px; line-height:1.55; flex:1; } .de-chan { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:8px; } /* --- Màn mở của một đề --- */ .de-mo-nhan { display:flex; gap:7px; margin-bottom:9px; } .de-mo h1 { font-size:24px; color:var(--navy); } .de-mo-luoi { display:grid; gap:16px; margin:20px 0; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .luat-thi { margin:0; padding-left:20px; font-size:14px; line-height:1.75; } .tu-vung { margin:10px 0 0; padding-left:18px; font-size:14px; line-height:1.7; } .de-mo-nut { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .luot-con { font-size:13.5px; } .ghi-chu { font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:16px; border-left:3px solid var(--line-2); padding-left:12px; } /* --- Phòng làm bài --- */ .de-lam { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:18px; } .de-thanh { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--navy); color:#fff; padding:12px 18px; } .de-thanh-ten { font-weight:800; font-size:14.5px; letter-spacing:.2px; } .dong-ho { font-variant-numeric:tabular-nums; font-weight:800; font-size:19px; background:rgba(255,255,255,.14); border-radius:4px; padding:3px 11px; min-width:62px; text-align:center; } /* Năm giây cuối đổi đỏ và nhấp — hết giờ là TỰ NỘP, phải báo trước cho người làm */ .dong-ho.gap { background:#DC2626; animation:nhap 1s steps(2,end) infinite; } @keyframes nhap { 50% { opacity:.45; } } .de-noi { padding:22px 24px; } .de-van { font-size:16.5px; line-height:1.85; white-space:normal; } .de-hinh { border:1px solid var(--line); border-radius:var(--radius); padding:10px; background:#fff; } .de-hinh svg { display:block; width:100%; height:auto; } .de-hinh-ghi { font-size:12.5px; margin-top:8px; } .de-nghe { text-align:center; padding:26px 0; } .de-nghe p { font-size:15px; margin-top:14px; } .song { display:flex; align-items:flex-end; justify-content:center; gap:5px; height:44px; } .song span { width:6px; background:var(--acc-lite); border-radius:3px; animation:song 1s ease-in-out infinite; } .song span:nth-child(1){height:14px;animation-delay:0s} .song span:nth-child(2){height:30px;animation-delay:.15s} .song span:nth-child(3){height:44px;animation-delay:.3s} .song span:nth-child(4){height:26px;animation-delay:.45s} .song span:nth-child(5){height:16px;animation-delay:.6s} @keyframes song { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} } .de-ghi { display:flex; align-items:center; gap:10px; margin:18px 0 14px; font-weight:700; color:#B91C1C; } .cham-do { width:12px; height:12px; border-radius:50%; background:#DC2626; animation:nhap 1s steps(2,end) infinite; flex:none; } .de-nhap { width:100%; margin-top:16px; padding:13px 14px; font-size:15.5px; line-height:1.7; font-family:inherit; border:1px solid var(--line-2); border-radius:var(--radius); resize:vertical; } .de-nhap:focus { outline:2px solid var(--acc); outline-offset:-1px; border-color:var(--acc); } .de-chon { display:grid; gap:9px; margin-top:16px; } .de-chon label { display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.6; border:1px solid var(--line-2); border-radius:var(--radius); padding:11px 14px; cursor:pointer; } .de-chon label:hover { border-color:var(--acc); background:var(--acc-soft); } .de-noi > .btn { margin-top:18px; } .de-cho { text-align:center; padding:70px 20px; } .de-cho h2 { font-size:19px; color:var(--navy); margin-top:18px; } .quay { width:38px; height:38px; margin:0 auto; border-radius:50%; border:3px solid var(--acc-soft); border-top-color:var(--acc); animation:quay .9s linear infinite; } @keyframes quay { to { transform:rotate(360deg); } } /* --- Thẻ điểm --- */ .the-diem { display:flex; flex-wrap:wrap; gap:24px; align-items:center; background:#fff; border:1px solid var(--line); border-left:5px solid var(--acc); border-radius:var(--radius); padding:24px 26px; margin-top:18px; } .the-so { display:flex; flex-direction:column; align-items:flex-start; min-width:150px; } .the-so .nhan { font-size:11.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted); } .the-so .so { font-size:56px; font-weight:800; color:var(--acc); line-height:1.05; } .the-so .tren { font-size:13px; color:var(--muted); } .the-thanh { width:100%; height:7px; background:var(--acc-soft); border-radius:4px; margin-top:10px; } .the-thanh i { display:block; height:100%; background:var(--acc-lite); border-radius:4px; } .the-chu { flex:1; min-width:250px; } .the-chu h1 { font-size:20px; color:var(--navy); margin-bottom:7px; } .the-chu p { font-size:14.5px; line-height:1.7; } .tc-luoi { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .tc { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; } .tc-dau { display:flex; justify-content:space-between; font-size:14.5px; color:var(--navy); } .tc-thanh { height:6px; background:#EEF2F7; border-radius:3px; margin:9px 0 10px; } .tc-thanh i { display:block; height:100%; background:var(--acc); border-radius:3px; } .tc p { font-size:13.5px; line-height:1.65; } .tc .pill { margin-top:8px; } .tr { background:#F7F9FC; border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; font-family:inherit; font-size:14.5px; line-height:1.75; white-space:pre-wrap; } .bang-sai { width:100%; border-collapse:collapse; font-size:14px; margin-top:6px; } .bang-sai th, .bang-sai td { border-bottom:1px solid var(--line); padding:7px 9px; text-align:left; } .bang-sai th { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); } .sua { border-left:3px solid var(--line-2); padding-left:12px; margin:12px 0; } .sua .sai { color:#B91C1C; text-decoration:line-through; font-size:14.5px; } .sua .dung { color:#047857; font-weight:700; font-size:14.5px; margin-top:3px; } .help { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; font-size:14.5px; color:var(--muted); margin-top:14px; } @media (max-width:620px) { .de-noi { padding:18px 16px; } .the-so .so { font-size:44px; } .de-mo h1 { font-size:20px; } } /* --- Bài tập theo bậc --- */ .bt-ds { display:grid; gap:12px; margin-top:16px; } .bt-cau { display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; } .bt-so { flex:none; width:28px; height:28px; border-radius:50%; background:var(--acc-soft); color:var(--acc); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; } .bt-than { flex:1; min-width:0; } .bt-de { font-size:15.5px; line-height:1.75; } .bt-nhap { width:100%; max-width:420px; margin-top:11px; padding:9px 12px; font-size:15px; font-family:inherit; border:1px solid var(--line-2); border-radius:var(--radius); } .bt-nhap:focus { outline:2px solid var(--acc); outline-offset:-1px; border-color:var(--acc); } .bt-nhap.dung { border-color:#0E9F6E; background:var(--okbg); } .bt-nhap.sai { border-color:#DC2626; background:var(--errbg); } .bt-kq { font-size:13.5px; margin-top:7px; } .bt-kq.dung { color:var(--ok); font-weight:700; } .bt-kq.sai { color:var(--err); } /* --- Dải giới thiệu cho khách chưa đăng nhập --- */ .gt-dai { padding:6px 0 4px; } .gt-dai h1 { font-size:27px; color:var(--navy); line-height:1.3; } .gt-o { display:grid; gap:14px; margin:22px 0 8px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .gt-the { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px; text-decoration:none; color:var(--text); display:block; transition:border-color .12s, transform .12s; } .gt-the:hover { border-color:var(--acc); transform:translateY(-2px); } .gt-the b { color:var(--navy); font-size:15.5px; display:block; } .gt-the span { font-size:12px; color:var(--acc); font-weight:800; } .gt-the p { font-size:13px; color:var(--muted); line-height:1.6; margin-top:7px; } /* --- Bảng điều khiển --- */ .lt-hero { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); border-left:5px solid var(--acc); border-radius:var(--radius); padding:20px 22px; margin:16px 0 6px; } .lt-hero h2 { font-size:18px; color:var(--navy); margin-bottom:5px; } .lt-hero .noi-dung { flex:1; min-width:260px; } .stat-grid { display:grid; gap:14px; margin-top:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); } .stat { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; } .stat-so { display:block; font-size:27px; font-weight:800; color:var(--acc); line-height:1.2; } .stat-ten { font-size:12.5px; color:var(--muted); } .dang-hang { display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:13px 16px; margin-top:10px; text-decoration:none; color:var(--text); } .dang-hang:hover { border-color:var(--acc); } .dang-ten { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14px; } .dang-ten b { color:var(--navy); } .dang-ten span { font-size:12.5px; color:var(--muted); } .dang-thanh { height:6px; background:#EEF2F7; border-radius:3px; margin-top:9px; } .dang-thanh i { display:block; height:100%; background:var(--acc-lite); border-radius:3px; } .bang-ls { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-top:10px; } .bang-ls th, .bang-ls td { border-bottom:1px solid var(--line); padding:10px 13px; text-align:left; } .bang-ls th { font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); } .bang-ls tr:last-child td { border-bottom:0; } .sec-title { font-size:17px; color:var(--navy); margin:26px 0 4px; } .gia-the .gia { font-size:31px; font-weight:800; color:var(--acc); margin:6px 0 4px; } .gia-the .gia span { font-size:14px; font-weight:600; color:var(--muted); } .gia-the .btn { margin-top:12px; } .de-thumb { border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff; } .de-thumb svg { display:block; width:100%; height:auto; } .bt-goi { font-size:13px; color:var(--muted); margin-top:6px; } .bt-tu-cham { font-size:12.5px; margin-top:9px; } .bt-nghe { margin-top:10px; padding:7px 14px; font-size:13px; } .cho-trong { display:inline-block; min-width:76px; border-bottom:2px solid var(--acc); color:transparent; } .bt-doi { margin-top:7px; font-size:14.5px; line-height:1.8; color:var(--text); } .w-dung { color:var(--ok); } .w-sai { color:var(--err); background:var(--errbg); border-radius:3px; padding:0 3px; text-decoration:underline; text-decoration-style:wavy; }