/* ============================================================================
de-luxury.css — Giao diện ĐỀ THI HSA · TSA "Giấy thi Luxury" — Thầy Trung SN
· Font Chu Văn An (Computer Modern Việt hoá) — khớp tuyệt đối với KaTeX.
· Khung viền kép + hoa văn góc + watermark thưa.
· Hình vẽ .m6fig sinh từ TikZ (currentColor → tự theo dark mode).
Nạp SAU app.css. Phạm vi: chỉ trong .de-paper — không đụng phần còn lại của app.
========================================================================== */
/* ---------- 1. FONT CHU VĂN AN ---------- */
@font-face{font-family:"CVA";src:url("../assets/fonts/cva-regular.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CVA";src:url("../assets/fonts/cva-bold.woff2") format("woff2");
font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"CVA";src:url("../assets/fonts/cva-italic.woff2") format("woff2");
font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"CVA";src:url("../assets/fonts/cva-bolditalic.woff2") format("woff2");
font-weight:700;font-style:italic;font-display:swap}
:root{
--de-ink:#22303F; --de-pink:#FF1F8F; --de-pinkd:#D6006F; --de-gold:#E8A100;
--de-goldl:#FFE7A8; --de-navy:#A4126E; --de-paper:#FFFDFB; --de-line:#F3D6E7;
--de-green:#0B8A3E; --de-red:#DC2626; --de-blue:#2563EB;
/* nền khung hình — PHẢI phẳng: hình TikZ dùng đúng màu này để che nét (tkz-tab) */
--de-fig-bg:#FFFBFD;
--de-fs:1.06rem; /* CỠ CHỮ GỐC — mọi khối con ăn theo, không đặt px rời */
}
/* ---------- 2. TỜ GIẤY THI ---------- */
.de-paper{
font-family:"CVA","Latin Modern Roman","Palatino Linotype",Georgia,serif;
font-size:var(--de-fs); color:var(--de-ink); line-height:1.9;
position:relative; isolation:isolate;
background:var(--de-paper);
border:2.5px solid var(--de-pink);
border-radius:6px;
padding:clamp(14px,3vw,30px);
box-shadow:0 1px 0 #fff inset, 0 10px 34px rgba(164,18,110,.10);
}
/* viền kép: đường mảnh chạy song song bên trong */
.de-paper::before{
content:""; position:absolute; inset:5px; pointer-events:none; z-index:0;
border:1px solid var(--de-line); border-radius:3px;
}
/* watermark THƯA — 3 cụm/hàng, giãn rộng, rất nhạt */
.de-paper::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:6px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:repeat;
}
.de-paper > *{position:relative; z-index:1}
/* hoa văn 4 góc */
.de-paper .de-goc{position:absolute; width:30px; height:30px; z-index:2; pointer-events:none;
border:0 solid var(--de-gold); opacity:.85}
.de-paper .de-goc::before{content:""; position:absolute; inset:0;
background:
linear-gradient(var(--de-gold),var(--de-gold)) left top/100% 1.6px no-repeat,
linear-gradient(var(--de-gold),var(--de-gold)) left top/1.6px 100% no-repeat;}
.de-paper .de-goc::after{content:""; position:absolute; width:5px; height:5px; border-radius:50%;
background:var(--de-goldl); border:1.2px solid var(--de-pink); left:-2.5px; top:-2.5px}
.de-goc.tl{left:11px; top:11px}
.de-goc.tr{right:11px; top:11px; transform:scaleX(-1)}
.de-goc.bl{left:11px; bottom:11px; transform:scaleY(-1)}
.de-goc.br{right:11px; bottom:11px; transform:scale(-1)}
/* ---------- 3. ĐẦU ĐỀ ---------- */
.de-head{position:relative; text-align:center; padding:2px 0 12px; margin-bottom:6px;
border-bottom:2.2px double var(--de-pink)}
/* Logo Math360Skill: HUY HIỆU neo góc trái — đặt tuyệt đối để KHÔNG đẩy lệch tiêu đề
căn giữa (chèn inline làm tên đề dài tụt xuống dòng 2). */
.de-head .de-logo{position:absolute; left:2px; top:0; width:46px; height:46px;
object-fit:contain; padding:3px; box-sizing:border-box; border-radius:50%;
background:radial-gradient(circle at 50% 42%,#fff,#FFF7FB);
border:1px solid var(--de-gold); box-shadow:0 1px 4px rgba(164,18,110,.14)}
.de-head .de-co{font-size:.82em; letter-spacing:2.5px; text-transform:uppercase;
color:var(--de-navy); font-weight:700}
.de-head .de-ten{font-size:1.5em; font-weight:700; line-height:1.35; margin:4px 0 2px;
background:linear-gradient(92deg,var(--de-navy),var(--de-pink) 55%,var(--de-gold));
-webkit-background-clip:text; background-clip:text; color:transparent}
.de-head .de-meta{font-size:.86em; color:var(--de-navy); opacity:.85}
/* ruy-băng dưới tiêu đề: hai dải chuyển sắc + viên kim cương vàng ở giữa */
.de-head .de-ruy{display:flex; align-items:center; justify-content:center; gap:9px; margin:9px 0 0}
.de-head .de-ruy::before, .de-head .de-ruy::after{
content:""; height:2.5px; width:62px; border-radius:3px;
background:linear-gradient(90deg,transparent,var(--de-gold),var(--de-pink))}
.de-head .de-ruy::after{background:linear-gradient(90deg,var(--de-pink),var(--de-gold),transparent)}
.de-head .de-ruy i{width:7px; height:7px; flex:0 0 auto; transform:rotate(45deg);
background:var(--de-gold); border:1.2px solid var(--de-pink); border-radius:1px}
/* ---------- 3b. CHÂN ĐỀ — thương hiệu ---------- */
.de-foot{margin-top:20px; padding-top:11px; text-align:center;
border-top:2.2px double var(--de-pink);
font-size:.8em; line-height:1.75; color:var(--de-navy)}
.de-foot b{color:var(--de-pink)}
.de-foot .de-flogo{height:26px; width:auto; vertical-align:-8px; margin-right:7px; opacity:.92}
.de-foot .de-sep{opacity:.5; margin:0 6px}
/* ---------- 4. KHUNG CÂU ---------- */
.de-cau{border:1.5px solid var(--de-line); border-left:4px solid var(--de-pink);
border-radius:12px; padding:14px 16px 13px; margin:16px 0;
background:linear-gradient(180deg,#fff,#FFFCFE);
box-shadow:0 2px 10px rgba(164,18,110,.05)}
.de-cau:hover{border-left-color:var(--de-gold)}
.de-so{display:inline-block; font-weight:700; font-size:.92em; letter-spacing:.4px;
color:#fff; padding:2px 13px; border-radius:999px; margin-right:7px;
background:linear-gradient(135deg,var(--de-navy),var(--de-pink));
box-shadow:0 2px 7px rgba(255,31,143,.32)}
.de-so.ok{background:linear-gradient(135deg,#0B8A3E,#22C55E); box-shadow:0 2px 7px rgba(11,138,62,.3)}
.de-so.no{background:linear-gradient(135deg,#B91C1C,#EF4444); box-shadow:0 2px 7px rgba(220,38,38,.3)}
.de-chude{display:inline-block; font-size:.78em; padding:1px 9px; border-radius:8px;
background:var(--de-goldl); color:#8A5A00; border:1px solid #F0CE7A}
.de-q{margin-top:7px}
/* ---------- 5. Ô ĐÁP ÁN A B C D — tròn viền hồng nền vàng nhạt ---------- */
.de-opts{display:grid; gap:9px; margin-top:11px}
.de-opt{display:flex; align-items:flex-start; gap:11px; cursor:pointer;
border:1.5px solid var(--de-line); border-radius:12px; padding:9px 13px;
background:#fff; transition:border-color .13s, background .13s, box-shadow .13s}
.de-opt:hover{border-color:var(--de-pink); background:#FFF8FC}
.de-opt input{display:none}
.de-kc{flex:0 0 auto; width:28px; height:28px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
font-weight:700; font-size:.95em; line-height:1;
background:var(--de-goldl); color:var(--de-pinkd);
border:1.6px solid var(--de-pink); box-shadow:0 1px 4px rgba(255,31,143,.2)}
.de-opt.sel{border-color:var(--de-pink); background:#FFF1F8;
box-shadow:0 0 0 2.5px rgba(255,31,143,.16)}
.de-opt.sel .de-kc{background:var(--de-pink); color:#fff; border-color:var(--de-pinkd)}
.de-opt.rv{cursor:default}
.de-opt.rv.dung{border-color:var(--de-green); background:#F1FCF5}
.de-opt.rv.dung .de-kc{background:var(--de-green); color:#fff; border-color:#076B2F}
.de-opt.rv.sai{border-color:var(--de-red); background:#FEF3F3}
.de-opt.rv.sai .de-kc{background:var(--de-red); color:#fff; border-color:#991B1B}
/* ---------- 5b. Ô ĐIỀN ĐÁP SỐ — câu dạng "nhap" ---------- */
.de-nhap{display:flex; align-items:center; gap:10px; margin-top:11px;
font-size:.95em; color:var(--de-navy)}
.de-o-nhap{min-width:120px; padding:7px 14px; text-align:center; font-weight:700;
color:var(--de-pinkd); background:var(--de-goldl);
border:1.6px solid var(--de-pink); border-radius:10px;
box-shadow:0 1px 4px rgba(255,31,143,.18)}
/* ---------- 5c. LỜI GIẢI (PDF đề+đáp án) ---------- */
.de-sol{margin-top:11px; padding:10px 13px; border-radius:0 10px 10px 0;
border-left:3px solid var(--de-green); background:#F3FCF6;
font-size:.93em; line-height:1.8; color:var(--de-ink)}
.de-sol b{color:#0B7A3B}
/* ---------- 6. HÌNH VẼ TikZ ---------- */
/* khung ÔM SÁT hình rồi căn giữa (không để khung full-width mà hình bé lọt thỏm giữa) */
.de-fig{display:flex; justify-content:center; margin:10px auto; padding:10px 9px;
width:fit-content; max-width:100%;
border:1px solid var(--de-line); border-radius:12px;
background:var(--de-fig-bg);
box-shadow:0 0 0 4px var(--de-fig-bg) inset, 0 1px 0 #fff inset}
/* hình figlib đã tự có khung giấy của nó → bỏ khung bọc ngoài kẻo KHUNG ĐÔI */
.de-fig.tron{border:0; background:none; padding:0; box-shadow:none; margin:8px auto}
/* Cỡ hình do coHinh() (de_tsahsa.js) tính sẵn theo CỠ CHỮ trong hình rồi ghi vào biến
--fp (bản in) / --fw (web) → mọi hình trên cùng tờ đề có chữ bằng nhau, hình rộng thì
rộng, hình bé thì bé, đúng kiểu hình trong sách. Không có biến thì lùi về cỡ cũ 340px.
⚠ ĐỪNG thêm lại các luật chặn bề ngang cố định (.rong/.cao 560/260px) — chính chúng
làm chữ trong hình chỗ to gấp 2,5 lần chữ đề, chỗ bé li ti khi in. */
.m6fig{width:var(--fp,var(--fw,auto)); max-width:min(100%,var(--fp,var(--fw,340px)));
height:auto; color:var(--de-ink)} /* currentColor = mực */
.de-cap{text-align:center; font-style:italic; font-size:.85em; color:var(--de-navy);
opacity:.92; margin-top:4px}
/* ---------- 7. BẢNG SỐ LIỆU ---------- */
.de-tab-wrap{overflow-x:auto; margin:12px 0; border-radius:12px;
border:1px solid var(--de-line); background:#fff}
table.de-tab{border-collapse:collapse; width:100%; font-size:.95em; line-height:1.6}
table.de-tab th, table.de-tab td{border:1px solid var(--de-line); padding:7px 12px;
text-align:center; white-space:nowrap}
table.de-tab thead th, table.de-tab tr:first-child td:first-child,
table.de-tab tbody th{
background:linear-gradient(180deg,#FFF3F9,#FFE8F3); color:var(--de-navy); font-weight:700}
table.de-tab tbody tr:nth-child(even) td{background:#FFFCFE}
table.de-tab td:first-child{font-weight:700; color:var(--de-navy);
background:linear-gradient(90deg,#FFF3F9,#FFF9FC)}
/* Bảng TRẦN trong đề (nguồn gõ không gắn lớp) — vẫn phải có kẻ ô, nếu không
in ra chỉ thấy chữ rơi lộn xộn, học sinh không nhận ra đó là bảng. */
.de-cau table:not(.de-tab):not(.ds-tab){border-collapse:collapse; margin:9px auto;
font-size:.95em; line-height:1.6}
.de-cau table:not(.de-tab):not(.ds-tab) th,
.de-cau table:not(.de-tab):not(.ds-tab) td{border:1px solid var(--de-line);
padding:5px 11px; text-align:center}
.de-cau table:not(.de-tab):not(.ds-tab) tr:first-child{background:linear-gradient(180deg,#FFF3F9,#FFE8F3)}
.de-cau table:not(.de-tab):not(.ds-tab) tr:first-child td,
.de-cau table:not(.de-tab):not(.ds-tab) th{color:var(--de-navy); font-weight:700}
/* ---------- 8. CÔNG THỨC — ép KaTeX dùng CVA cho phần chữ ---------- */
.de-paper .katex{font-size:1.06em}
.de-paper .katex .text, .de-paper .katex .mord.text{font-family:"CVA",serif}
/* ---------- 9. NỀN TỐI ---------- */
/* ⚠ APP ĐỔI THEME BẰNG html[data-theme="dark"] (nút 🌙), KHÔNG theo cài đặt máy.
Viết @media(prefers-color-scheme:dark) là VÔ HIỆU trong app — đã sửa 17/07. */
/* nền tối: tím #A4126E chìm nghỉm → nâng thành hồng sáng cho đủ tương phản */
html[data-theme="dark"]{--de-paper:#1B1220; --de-ink:#F0E6EE; --de-line:#4A2740; --de-fig-bg:#241729;
--de-navy:#FFA3D4; --de-pinkd:#FFC7E4}
html[data-theme="dark"] .de-kc{background:#4A2A12; color:#FFE3F1; border-color:var(--de-pink)}
html[data-theme="dark"] .de-paper{background:#1B1220; box-shadow:0 10px 34px rgba(0,0,0,.5)}
html[data-theme="dark"] .de-cau{background:linear-gradient(180deg,#221727,#1D1322)}
html[data-theme="dark"] .de-opt{background:#221727}
html[data-theme="dark"] .de-opt:hover{background:#2C1A2C}
html[data-theme="dark"] .de-opt.sel{background:#33162A}
html[data-theme="dark"] .de-opt.rv.dung{background:#12281B}
html[data-theme="dark"] .de-opt.rv.sai{background:#2E1414}
html[data-theme="dark"] .de-kc{background:#3A2410}
/* ô điền đáp số: nền vàng nhạt của bản sáng chói trên nền tối → hạ tông nâu trầm */
html[data-theme="dark"] .de-o-nhap{background:#3A2410; color:#FFE3F1; border-color:var(--de-pink)}
html[data-theme="dark"] .de-tab-wrap,
html[data-theme="dark"] table.de-tab td{background:#221727}
/* ⚠ phải liệt kê ĐỦ các bộ chọn của khối nền sáng (kể cả tr:first-child td:first-child),
kẻo bộ chọn sáng cụ thể hơn sẽ đè, để sót ô nền sáng chói giữa nền tối. */
html[data-theme="dark"] table.de-tab thead th,
html[data-theme="dark"] table.de-tab td:first-child,
html[data-theme="dark"] table.de-tab tr:first-child td:first-child,
html[data-theme="dark"] table.de-tab tbody th{
background:linear-gradient(180deg,#38182D,#2C1324); color:#FFC7E4}
html[data-theme="dark"] table.de-tab tbody tr:nth-child(even) td{background:#1E1422}
html[data-theme="dark"] .de-chude{background:#3A2410; color:#FFD79A; border-color:#7A5410}
html[data-theme="dark"] .de-sol{background:#0F2418; border-color:var(--de-green); color:var(--de-ink)}
html[data-theme="dark"] .de-sol b{color:#7BE3A4}
/* ---------- 9b. IN PDF — mỗi câu không vỡ trang, khổ A4 ---------- */
@media print{
.de-paper{border-width:1.6px; box-shadow:none}
.de-paper::before{display:none}
.de-cau{box-shadow:none}
/* ⚠ ĐỪNG cấm ngắt trang trong cả khối câu: câu có lời giải dài 15 dòng mà không được
ngắt thì nguyên nửa trang trước bỏ trắng (bản in 22 câu từng ra 23 trang, phân nửa là
giấy trắng). Chỉ giữ NGUYÊN VẸN từng cụm nhỏ: đề, hình, bảng, dãy phương án. */
.de-q, .de-fig, .de-opts, .de-nhap, .de-tab-wrap,
.de-phan{page-break-inside:avoid; break-inside:avoid}
.de-q, .de-phan{page-break-after:avoid; break-after:avoid} /* đề/tiêu đề phần không đứng lẻ cuối trang */
.de-sol-y li{page-break-inside:avoid; break-inside:avoid}
/* Phương án xếp 2 CỘT như đề thi giấy (mỗi phương án một dòng riêng thì tốn nửa trang) */
.de-opts{grid-template-columns:1fr 1fr; gap:6px 12px}
.de-opt{padding:6px 11px}
.de-cau{margin:11px 0; padding:11px 13px 10px}
@page{size:A4 portrait; margin:12mm 10mm}
}
/* ---------- 10. ĐIỆN THOẠI ---------- */
@media(max-width:520px){
:root{--de-fs:1rem}
.de-paper{padding:12px 11px; border-width:2px}
.de-paper::before{inset:4px}
.de-goc{width:20px; height:20px}
.de-goc.tl,.de-goc.bl{left:7px}.de-goc.tr,.de-goc.br{right:7px}
.de-goc.tl,.de-goc.tr{top:7px}.de-goc.bl,.de-goc.br{bottom:7px}
.de-head .de-ten{font-size:1.24em}
.de-cau{padding:11px 12px}
}
/* ---------- 11. IN GIẤY / PDF ---------- */
@media print{
.de-paper{border-color:#000; box-shadow:none; background:#fff}
.de-paper::after{display:none} /* bỏ watermark khi in */
.de-cau{box-shadow:none}
.de-fig{break-inside:avoid; background:#fff}
.de-fig.tron{background:none}
}