/* ========================================================================== UK MASTER ACADEMY - THEME & TYPOGRAPHY 3 tông màu học viên tự chọn (data-ukma-theme trên ): giay = GIẤY BẢN (mặc định, sáng ấm, đọc lâu không mỏi) da = DẠ HỌC (tối dịu, học đêm, không đen tuyền tránh halation) tram = TRẦM MẶC (sepia đậm, cho người nhạy sáng) Nghiên cứu nền: NN/g contrast polarity, WCAG AAA cho thân bài, line-height 1.65 vì dấu tiếng Việt chồng tầng. ========================================================================== */ /* ---------- TÔNG 1: GIẤY BẢN (mặc định) ---------- */ :root, html[data-ukma-theme="giay"] { --ukma-bg: #F9F6EF; --ukma-bg-soft: #F2EDE1; --ukma-surface: #FFFFFF; --ukma-surface-2: #FCFAF4; --ukma-ink: #2B2620; --ukma-ink-soft: #5C5347; --ukma-ink-faint: #8A7F6E; --ukma-accent: #8C1F14; /* son đỏ trầm, chỉ điểm nhấn */ --ukma-accent-ink:#FFFFFF; --ukma-gold: #9A7B2D; --ukma-gold-soft: #F0E7CE; --ukma-line: #E7E0D2; --ukma-ok: #2E6B4F; --ukma-ok-soft: #E3EFE8; --ukma-warn: #9A5B1F; --ukma-lock: #C9C0B0; --ukma-shadow: 0 2px 10px rgba(60, 45, 20, .08); --ukma-shadow-lg: 0 10px 30px rgba(60, 45, 20, .13); --ukma-hero-grad: linear-gradient(150deg, #FFFDF6, #F4EBD8); } /* ---------- TÔNG 2: DẠ HỌC ---------- */ html[data-ukma-theme="da"] { --ukma-bg: #201A15; --ukma-bg-soft: #1A1511; --ukma-surface: #2E2620; --ukma-surface-2: #362D24; --ukma-ink: #F2EBDC; --ukma-ink-soft: #CDC2AE; --ukma-ink-faint: #A2957F; --ukma-accent: #D9A441; /* vàng dịu thay đỏ: đỏ trên nền tối khó đọc */ --ukma-accent-ink:#241A08; --ukma-gold: #D9A441; --ukma-gold-soft: #3A3122; --ukma-line: #453A2E; --ukma-ok: #8FCFAB; --ukma-ok-soft: #26332C; --ukma-warn: #D08B4C; --ukma-lock: #55493B; --ukma-shadow: 0 2px 10px rgba(0, 0, 0, .35); --ukma-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5); --ukma-hero-grad: linear-gradient(150deg, #2C241C, #201A15); } /* ---------- TÔNG 3: TRẦM MẶC ---------- */ html[data-ukma-theme="tram"] { --ukma-bg: #EFE6D5; --ukma-bg-soft: #E7DCC7; --ukma-surface: #F7F0E2; --ukma-surface-2: #F2EAD9; --ukma-ink: #3A3226; --ukma-ink-soft: #6B5F4C; --ukma-ink-faint: #92866F; --ukma-accent: #7A5A22; --ukma-accent-ink:#FFF9EC; --ukma-gold: #8A6A2A; --ukma-gold-soft: #E4D6B4; --ukma-line: #D9CDB4; --ukma-ok: #4A6B50; --ukma-ok-soft: #DEE7DA; --ukma-warn: #8E5A20; --ukma-lock: #BDB098; --ukma-shadow: 0 2px 10px rgba(80, 62, 30, .10); --ukma-shadow-lg: 0 10px 30px rgba(80, 62, 30, .16); --ukma-hero-grad: linear-gradient(150deg, #F5EDDC, #E9DCC2); } /* ========================================================================== TYPOGRAPHY Thân bài học: serif (Literata) 17-18px, line-height 1.65-1.7. Giao diện: Be Vietnam Pro. Cỡ chữ 4 nấc qua data-ukma-font trên . ========================================================================== */ :root { --ukma-font-ui: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif; --ukma-font-read: "Literata", "Noto Serif", Georgia, serif; --ukma-read-size: 17px; /* nấc mặc định */ --ukma-read-lh: 1.68; } html[data-ukma-font="1"] { --ukma-read-size: 16px; } html[data-ukma-font="2"] { --ukma-read-size: 17px; } html[data-ukma-font="3"] { --ukma-read-size: 18px; } html[data-ukma-font="4"] { --ukma-read-size: 20px; --ukma-read-lh: 1.72; } /* Khóa color-scheme theo tông: chặn Chrome "tự động tối hóa" phá màu, đồng thời form control (nút, ô nhập) đổi đúng sắc theo tông. */ :root, html[data-ukma-theme="giay"], html[data-ukma-theme="tram"] { color-scheme: light; } html[data-ukma-theme="da"] { color-scheme: dark; } html { -webkit-text-size-adjust: 100%; } /* Button/input KHÔNG thừa kế màu chữ và font từ body: ép thừa kế để chữ trong thẻ bấm không bị chìm khi đổi tông tối. */ button, input, select, textarea { color: inherit; font-family: inherit; } body { margin: 0; background: var(--ukma-bg); color: var(--ukma-ink); font-family: var(--ukma-font-ui); font-size: 15.5px; line-height: 1.55; transition: background .25s ease, color .25s ease; } /* Khối đọc bài học */ .ukma-read { font-family: var(--ukma-font-read); font-size: var(--ukma-read-size); line-height: var(--ukma-read-lh); max-width: 680px; color: var(--ukma-ink); text-align: left; /* không justify: tiếng Việt bị sông trắng */ overflow-wrap: break-word; } .ukma-read p { margin: 0 0 1em; } .ukma-read h2 { font-family: var(--ukma-font-ui); font-size: 1.35em; line-height: 1.35; margin: 1.6em 0 .5em; color: var(--ukma-ink); } .ukma-read h3 { font-family: var(--ukma-font-ui); font-size: 1.15em; line-height: 1.4; margin: 1.4em 0 .4em; color: var(--ukma-ink); } .ukma-read strong { color: var(--ukma-ink); } .ukma-read em { color: var(--ukma-ink-soft); } .ukma-read ul, .ukma-read ol { padding-left: 1.3em; margin: 0 0 1em; } .ukma-read li { margin-bottom: .35em; } .ukma-read blockquote { margin: 1.2em 0; padding: .7em 1em; border-left: 3px solid var(--ukma-gold); background: var(--ukma-gold-soft); border-radius: 0 10px 10px 0; color: var(--ukma-ink); } .ukma-read table { border-collapse: collapse; width: 100%; font-family: var(--ukma-font-ui); font-size: .92em; margin: 1em 0; } .ukma-read th, .ukma-read td { border: 1px solid var(--ukma-line); padding: .5em .65em; text-align: left; } .ukma-read th { background: var(--ukma-bg-soft); } /* Hộp thuật ngữ song ngữ trong bài */ .ukma-term { border-bottom: 1px dashed var(--ukma-gold); cursor: help; } /* Watermark mềm (in mờ email học viên, chèn động khi có đăng nhập) */ .ukma-wm { position: absolute; inset: auto 10px 8px auto; font-size: 11px; color: var(--ukma-ink-faint); opacity: .5; pointer-events: none; user-select: none; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }