/* ===================================================================== ZH LUXURY — Bộ giao diện dùng chung cho toàn bộ zerotohero135.com Tối: "Đen Navy" — đen, xanh navy, xanh dương đậm, chữ trắng xanh Sáng: "Trắng Navy" — trắng xanh nhạt, xanh dương đậm, chữ navy Nạp SAU cùng (cuối ) để đồng bộ màu cho mọi trang. Nguyên tắc: 1 bảng màu · 1 vàng · chữ nghiêm túc · viền mảnh · bóng nhẹ. ===================================================================== */ /* Phông chữ nạp bất đồng bộ bằng thẻ (xem toi-uu-hieu-nang.py) — không dùng @import vì chặn hiển thị */ /* ---------- 1. BẢNG MÀU GỐC ---------- */ html:root, html[data-theme="dark"]:root { --lx-bg:#04060d; --lx-bg2:#080d1c; --lx-surface:#0c1428; --lx-surface2:#101c38; --lx-surface3:#16274d; --lx-hair:rgba(59,130,246,.32); --lx-line:#1b2b52; --lx-text:#eaf0ff; --lx-text2:#b4c1e0; --lx-muted:#7f8db3; --lx-gold:#1d4ed8; --lx-gold-hi:#3b82f6; --lx-gold-deep:#1e3a8a; --lx-gold-text:#7fb0ff; --lx-on-gold:#ffffff; --lx-brand:#7fb0ff; --lx-brand-hi:#cfe0ff; --lx-ok:#34d399; --lx-warn:#fbbf24; --lx-bad:#fb7185; --lx-info:#38bdf8; --lx-violet:#a5b4fc; --lx-shadow:0 10px 30px rgba(0,2,12,.6); --lx-shadow-sm:0 2px 10px rgba(0,2,12,.45); --lx-glow:0 0 0 1px rgba(59,130,246,.55), 0 8px 26px rgba(29,78,216,.30); --lx-page-glow:radial-gradient(1100px 520px at 82% -8%, rgba(29,78,216,.22), transparent 62%), radial-gradient(900px 500px at -5% 105%, rgba(30,58,138,.20), transparent 60%); --lx-header-bg:linear-gradient(180deg, rgba(12,20,40,.97), rgba(4,6,13,.95)); } html[data-theme="light"]:root { --lx-bg:#f8faff; --lx-bg2:#f1f5f9; --lx-surface:#ffffff; --lx-surface2:#f8faff; --lx-surface3:#edf2f7; --lx-hair:rgba(37,99,235,.12); --lx-line:#e2e8f0; --lx-text:#0f172a; --lx-text2:#334166; --lx-muted:#64748b; --lx-gold:#1d4ed8; --lx-gold-hi:#2563eb; --lx-gold-deep:#1e3a8a; --lx-gold-text:#1d4ed8; --lx-on-gold:#ffffff; --lx-brand:#1d4ed8; --lx-brand-hi:#2563eb; --lx-ok:#059669; --lx-warn:#d97706; --lx-bad:#e11d48; --lx-info:#0284c7; --lx-violet:#6366f1; --lx-shadow:0 12px 30px -6px rgba(30,58,138,.08), 0 0 1px rgba(0,0,0,.08); --lx-shadow-sm:0 2px 8px -2px rgba(30,58,138,.06), 0 0 1px rgba(0,0,0,.08); --lx-glow:0 0 0 1px rgba(37,99,235,.38), 0 8px 24px -4px rgba(37,99,235,.18); --lx-page-glow:radial-gradient(1200px 600px at 85% -10%, rgba(37,99,235,.07), transparent 60%), radial-gradient(1000px 500px at -10% 110%, rgba(30,58,138,.05), transparent 55%); --lx-header-bg:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.95)); } html:root { --lx-display:var(--lx-sans); --lx-sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --lx-radius:16px; --lx-radius-sm:10px; } /* ---------- 2. ÁNH XẠ TÊN MÀU CŨ (mọi trang dùng tên riêng) ---------- */ html:root, html[data-theme]:root { /* hệ style.css chung + Hiệu Suất + Đo 5 */ --bg:var(--lx-bg); --surface:var(--lx-surface); --surface2:var(--lx-surface2); --surface3:var(--lx-surface3); --border:var(--lx-line); --border-light:var(--lx-hair); --text:var(--lx-text); --text2:var(--lx-text2); --text-muted:var(--lx-muted); --accent:var(--lx-gold); --accent2:var(--lx-gold-hi); --accent-hover:var(--lx-gold-deep); --accent3:var(--lx-ok); --accent4:var(--lx-bad); --accent-blue:var(--lx-info); --accent-purple:var(--lx-violet); --shadow:var(--lx-shadow); --shadow-sm:var(--lx-shadow-sm); --radius:var(--lx-radius); --radius-lg:var(--lx-radius); --shadow-glow-gold:0 4px 20px rgba(59,130,246,.30); --purple:var(--lx-violet); --blue:var(--lx-info); /* Rèn Trí Tuệ + Quản Trị */ --bg2:var(--lx-bg2); --bg3:var(--lx-surface2); --line:var(--lx-line); --txt:var(--lx-text); --mut:var(--lx-text2); --dim:var(--lx-muted); --gold:var(--lx-gold); --gold2:var(--lx-gold-hi); --jade:var(--lx-ok); --jade2:var(--lx-ok); --red:var(--lx-bad); --navy:var(--lx-surface3); /* Tài Chính */ --panel:var(--lx-surface); --panel2:var(--lx-surface2); --muted:var(--lx-text2); --green:var(--lx-ok); --amber:var(--lx-warn); --cyan:var(--lx-info); --kiem:var(--lx-ok); --giu:var(--lx-info); --nhan:var(--lx-violet); --card:var(--lx-surface); } /* nền sáng: các trang dùng "vàng nhạt" (accent2/gold2) làm MÀU CHỮ nên phải sẫm hơn để đọc được */ html[data-theme="light"]:root { --accent2:var(--lx-gold-text); --gold2:var(--lx-gold-text); --zhmm-accent:var(--lx-gold); } /* nền tối: xanh đậm nhất chỉ dùng làm nền nút; chữ/viền dùng xanh sáng hơn để đọc rõ */ html[data-theme="dark"]:root { --accent:var(--lx-gold-hi); --gold:var(--lx-gold-hi); --accent-hover:var(--lx-gold); --zhmm-accent:var(--lx-gold-hi); } /* thư viện sơ đồ (mindmap) */ html[data-theme] body .zhmm, html[data-theme] body .zhmm.zhmm-full { --zhmm-canvas:var(--lx-bg); --zhmm-dot:color-mix(in srgb, var(--lx-gold) 10%, transparent); --zhmm-accent:var(--lx-gold-hi); --zhmm-ui:var(--lx-surface); --zhmm-ui2:var(--lx-surface2); --zhmm-line:var(--lx-line); --zhmm-fg:var(--lx-text); --zhmm-fg2:var(--lx-text2); } /* ---------- 3. NỀN TRANG · CHỮ · CHỌN · CUỘN ---------- */ /* nền: đặt ở , vầng sáng là 1 lớp cố định riêng (không dùng background-attachment:fixed vì buộc vẽ lại mỗi lần cuộn → giật) */ html[data-theme] { background:var(--lx-bg); } html[data-theme] body { background:transparent !important; color:var(--lx-text); font-family:var(--lx-sans); -webkit-font-smoothing:antialiased; } html[data-theme] body::before { content:""; position:fixed; top:0;right:0;bottom:0;left:0; z-index:-1; pointer-events:none; background:var(--lx-page-glow); } ::selection { background:rgba(59,130,246,.35); color:inherit; } * { scrollbar-width:thin; scrollbar-color:var(--lx-gold-deep) transparent; } ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--lx-gold-deep); border-radius:10px; border:2px solid transparent; background-clip:content-box; } :focus-visible { outline:2px solid var(--lx-gold-text); outline-offset:2px; } html[data-theme] body h1, html[data-theme] body h2, html[data-theme] body .brand h1, html[data-theme] body .card h2 { font-family:var(--lx-display); letter-spacing:.01em; } html[data-theme] body h1 { font-weight:700; } html[data-theme] body .card h2, html[data-theme] body .sectit, html[data-theme] body .sidebar-title { font-weight:700; } html[data-theme] body .sectit, html[data-theme] body .sidebar-title, html[data-theme] body .card-title { letter-spacing:.14em; color:var(--lx-gold-text); } /* ---------- 4. THANH MENU CHUNG (zh-header) ---------- */ html[data-theme] body .header { background:var(--lx-header-bg) !important; border-bottom:1px solid var(--lx-hair) !important; box-shadow:0 1px 0 rgba(59,130,246,.08), 0 10px 30px rgba(0,0,0,.18) !important; backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); } html[data-theme] body .header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--lx-gold) 20%, var(--lx-gold-hi) 50%, var(--lx-gold) 80%, transparent); opacity:.55; } html[data-theme] body .brand-title, html[data-theme] body .brand-text .brand-title { font-family:var(--lx-display) !important; font-weight:700; font-size:14px !important; letter-spacing:.1em !important; white-space:nowrap; background:linear-gradient(135deg,var(--lx-brand),var(--lx-brand-hi)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } html[data-theme] body .brand-sub { color:var(--lx-muted) !important; letter-spacing:.14em; } html[data-theme] body .brand-logo { border-radius:8px !important; box-shadow:0 0 0 1px var(--lx-hair), 0 4px 16px rgba(59,130,246,.25); } /* nút điều hướng: mọi phân hệ cùng một kiểu, chỉ nút đang mở mới có vàng (style.css cũ đặt màu riêng từng phân hệ bằng !important nên cần độ ưu tiên cao hơn) */ html[data-theme] body .header .nav-links-center a.nav-btn[class*="nav-btn-"] { background:transparent !important; color:var(--lx-text2) !important; border:1px solid transparent !important; box-shadow:none !important; font-weight:600; letter-spacing:.02em; border-radius:999px; transform:none !important; } html[data-theme] body .header .nav-links-center a.nav-btn[class*="nav-btn-"]:hover { background:color-mix(in srgb, var(--lx-gold) 10%, transparent) !important; color:var(--lx-gold-text) !important; border-color:var(--lx-hair) !important; transform:translateY(-1px) !important; } html[data-theme] body .header .nav-links-center a.nav-btn[class*="nav-btn-"].active { background:linear-gradient(135deg,#2563eb,#1d4ed8) !important; color:#ffffff !important; border-color:transparent !important; font-weight:700; box-shadow:0 4px 18px rgba(37,99,235,.35) !important; } html[data-theme] body .zh-user-pill { background:var(--lx-surface2) !important; border:1px solid var(--lx-hair) !important; color:var(--lx-text) !important; border-radius:999px; } html[data-theme] body .zh-logout-btn { background:transparent !important; border:1px solid color-mix(in srgb, var(--lx-bad) 55%, transparent) !important; color:var(--lx-bad) !important; } html[data-theme] body .zh-logout-btn:hover { background:color-mix(in srgb, var(--lx-bad) 14%, transparent) !important; } html[data-theme] body .zh-pricing-btn, html[data-theme] body .zh-ref-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: var(--lx-surface2) !important; border: 1px solid var(--lx-hair) !important; color: var(--lx-text) !important; font-size: 16px !important; text-decoration: none !important; flex-shrink: 0 !important; margin-right: 6px !important; padding: 0 !important; box-shadow: none !important; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important; } html[data-theme] body .zh-pricing-btn:hover, html[data-theme] body .zh-ref-btn:hover, html[data-theme] body .zh-pricing-btn.active, html[data-theme] body .zh-ref-btn.active { border-color: var(--lx-gold) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important; } /* gọn thanh menu để 6 nút + tài khoản luôn vừa 1 hàng */ html[data-theme] body .header { padding:0 16px !important; gap:10px; } html[data-theme] body .header-left { flex:0 0 auto; } html[data-theme] body .nav-links-center { flex:1 1 auto; min-width:0; justify-content:center; gap:4px !important; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } html[data-theme] body .nav-links-center::-webkit-scrollbar { display:none; } html[data-theme] body .nav-links-center .nav-btn { padding:7px 11px !important; font-size:12px !important; white-space:nowrap; gap:6px !important; flex-shrink:0; } html[data-theme] body .nav-links-right { flex:0 0 auto; gap:8px !important; } html[data-theme] body .zh-user-pill { padding:4px 8px 4px 6px !important; gap:6px !important; } html[data-theme] body #zhNavUserName { max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:1650px){ html[data-theme] body .header .nav-btn-icon { display:none !important; } html[data-theme] body .header .nav-links-center .nav-btn { padding:6px 8px !important; font-size:11.5px !important; gap:4px !important; } } @media (max-width:1800px){ html[data-theme] body header.header .nav-links-center:has(.nav-btn-admin) .nav-btn { padding:6px 7px !important; } html[data-theme] body header.header .nav-links-center:has(.nav-btn-admin) .nav-btn-icon { display:none !important; } } /* menu trượt trên điện thoại: cùng kiểu, không mỗi phân hệ một màu */ html[data-theme] body .zh-mobile-drawer { background:var(--lx-bg2) !important; border-color:var(--lx-hair) !important; } html[data-theme] body .zh-mobile-drawer .zh-mobile-drawer-links a.nav-btn[class*="nav-btn-"] { color:var(--lx-text2) !important; background:transparent !important; border:1px solid var(--lx-hair) !important; border-radius:12px; } html[data-theme] body .zh-mobile-drawer .zh-mobile-drawer-links a.nav-btn[class*="nav-btn-"].active { background:linear-gradient(135deg,#2563eb,#1d4ed8) !important; color:#ffffff !important; } /* ---------- 5. THẺ · KHUNG ---------- */ html[data-theme] body .card, html[data-theme] body .tile, html[data-theme] body .up-box { background:var(--lx-surface) !important; border:1px solid var(--lx-hair) !important; border-radius:var(--lx-radius) !important; box-shadow:var(--lx-shadow-sm) !important; } html[data-theme] body .card[onclick], html[data-theme] body .card:hover { transition:transform .2s, box-shadow .2s, border-color .2s; } html[data-theme] body .card[onclick]:hover { transform:translateY(-3px); border-color:var(--lx-gold) !important; box-shadow:var(--lx-glow) !important; } html[data-theme] body .up-box { background:var(--lx-surface2) !important; } html[data-theme] body .modal, html[data-theme] body .modal-box { background:var(--lx-surface) !important; border:1px solid var(--lx-hair) !important; border-radius:20px !important; box-shadow:var(--lx-shadow) !important; color:var(--lx-text); } html[data-theme] body .modal-bg, html[data-theme] body .modal-overlay { background:rgba(5,6,10,.72) !important; backdrop-filter:blur(6px); } /* ---------- 6. THANH BÊN (Trí Tuệ · Quản Trị · Đo 5) ---------- */ html[data-theme] body .side, html[data-theme] body .sidebar { background:var(--lx-bg2) !important; border-right:1px solid var(--lx-hair) !important; box-shadow:none !important; } html[data-theme] body .nav button, html[data-theme] body .sidebar-item { background:transparent !important; color:var(--lx-text2) !important; border:1px solid transparent !important; box-shadow:none !important; border-radius:12px; } html[data-theme] body .nav button:hover, html[data-theme] body .sidebar-item:hover { background:color-mix(in srgb, var(--lx-gold) 9%, transparent) !important; color:var(--lx-text) !important; } html[data-theme] body .nav button.on, html[data-theme] body .sidebar-item.active { background:linear-gradient(90deg, color-mix(in srgb, var(--lx-gold) 20%, transparent), color-mix(in srgb, var(--lx-gold) 4%, transparent)) !important; color:var(--lx-gold-text) !important; border-color:var(--lx-hair) !important; box-shadow:inset 3px 0 0 var(--lx-gold) !important; font-weight:700; } /* ---------- 7. NÚT · Ô NHẬP ---------- */ html[data-theme] body .btn-primary, html[data-theme] body .btn.primary, html[data-theme] body .btn.pri, html[data-theme] body .zh-pm-btn-save { background:linear-gradient(135deg,var(--lx-btn-hi),var(--lx-gold)) !important; color:var(--lx-on-gold) !important; border:none !important; font-weight:700; box-shadow:0 6px 18px rgba(59,130,246,.28) !important; } html[data-theme] body .btn-primary:hover, html[data-theme] body .btn.primary:hover { filter:brightness(1.06); transform:translateY(-1px); } html[data-theme] body .btn.ghost, html[data-theme] body .btn.gho, html[data-theme] body .btn-ghost { background:transparent !important; color:var(--lx-text) !important; border:1px solid var(--lx-hair) !important; box-shadow:none !important; } html[data-theme] body .btn.ghost:hover, html[data-theme] body .btn.gho:hover { border-color:var(--lx-gold) !important; color:var(--lx-gold-text) !important; } html[data-theme] body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), html[data-theme] body select, html[data-theme] body textarea { background:var(--lx-surface2) !important; color:var(--lx-text) !important; border:1px solid var(--lx-line) !important; border-radius:var(--lx-radius-sm) !important; font-family:var(--lx-sans); transition:border-color .15s, box-shadow .15s; } html[data-theme] body input:focus, html[data-theme] body select:focus, html[data-theme] body textarea:focus { border-color:var(--lx-gold) !important; box-shadow:0 0 0 3px rgba(59,130,246,.22) !important; outline:2px solid var(--lx-gold-text) !important; outline-offset:1px; } html[data-theme] body ::placeholder { color:var(--lx-muted); opacity:1; } html[data-theme] body option { background:var(--lx-surface); color:var(--lx-text); } html[data-theme] body a { color:var(--lx-gold-text); } html[data-theme] body table th { color:var(--lx-gold-text); } /* ---------- 8. CÁC NHÃN TRẠNG THÁI · THÔNG BÁO ---------- */ html[data-theme] body #zhSyncBadge, html[data-theme] body .zh-sync-badge, html[data-theme] body .savebadge { background:var(--lx-surface2) !important; color:var(--lx-text) !important; border:1px solid var(--lx-hair) !important; box-shadow:var(--lx-shadow) !important; border-radius:999px; } html[data-theme] body #zhSyncBadge, html[data-theme] body .zh-sync-badge { left: 16px !important; right: auto !important; } html[data-theme] body .toast, html[data-theme] body #toast { background:var(--lx-surface2) !important; color:var(--lx-text) !important; border:1px solid var(--lx-hair) !important; } /* ---------- 9. TRANG CÓ NỀN RIÊNG ---------- */ html body.zh-tc, html[data-theme] body { --zh-tc-bg:transparent; } @media (max-width:820px){ html[data-theme] body .nav-btn{ padding:8px 12px; } } @media print { html[data-theme] body { background:#fff !important; color:#000 !important; } } /* tên người dùng trên thanh menu luôn đọc rõ ở cả hai nền */ html[data-theme] body .zh-user-pill, html[data-theme] body #zhNavUserName { color:var(--lx-text) !important; } /* nút bật/chọn (Tài Chính: kỳ Tuần/Tháng…) dùng vàng thay vì xanh dương */ html[data-theme] body .chip.on, html[data-theme] body .seg button.on, html[data-theme] body .seg button.active, html[data-theme] body .seg button[aria-pressed="true"] { background:linear-gradient(135deg,var(--lx-btn-hi),var(--lx-gold)) !important; color:var(--lx-on-gold) !important; border-color:transparent !important; font-weight:700; } /* trang chủ: nút "Mở ZH …" cùng một kiểu vàng thay vì mỗi phân hệ một màu */ html[data-theme] body .launch-btn, html[data-theme] body a.launch-btn[class*="btn-"] { background:linear-gradient(135deg,var(--lx-btn-hi),var(--lx-gold)) !important; color:var(--lx-on-gold) !important; border:none !important; font-weight:700; letter-spacing:.02em; box-shadow:0 8px 22px rgba(59,130,246,.28) !important; } html[data-theme] body .launch-btn:hover { filter:brightness(1.06); transform:translateY(-2px); } /* ===================================================================== BỐ CỤC 2 CỘT DÙNG CHUNG: thanh danh mục trái + nội dung giữa (như Trí Tuệ, Quản Trị) Áp dụng cho Tài Chính, Hiệu Suất, Đo 5 Chỉ Số. Không có logo trong trang. ===================================================================== */ html:root { --lx-header-h:72px; --lx-side-w:230px; } html[data-theme] body .side-title, html[data-theme] body #mohinh-subnav::before { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--lx-gold-text); padding:2px 8px; display:block; } /* tiêu đề trang thống nhất */ html[data-theme] body .ph .eyebrow, html[data-theme] body .lx-ph .eyebrow { color:var(--lx-gold-text); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; } html[data-theme] body .ph h1, html[data-theme] body .lx-ph h1 { font-size:24px; line-height:1.15; margin:2px 0 8px; color:var(--lx-text); text-transform:none; } html[data-theme] body .ph .intro { color:var(--lx-text2); font-size:14px; margin:0 0 4px; } html[data-theme] body .ph .intro .sub { font-size:14px; color:var(--lx-text2); } /* --- Tài Chính --- */ html[data-theme] body .lx-wrap { max-width:none !important; width:100%; margin:0 !important; padding:0 !important; display:flex; align-items:flex-start; background:none !important; box-shadow:none !important; border-radius:0 !important; overflow:visible !important; min-height:calc(100vh - var(--lx-header-h)); } html[data-theme] body .lx-side { width:var(--lx-side-w); flex-shrink:0; position:sticky; top:var(--lx-header-h); height:calc(100vh - var(--lx-header-h)); overflow-y:auto; background:var(--lx-bg2) !important; border-right:1px solid var(--lx-hair); padding:20px 12px; } html[data-theme] body .lx-side .side-title:not(:first-child) { margin-top:18px; } html[data-theme] body .lx-nav.maintabs { display:flex; flex-direction:column; gap:4px; margin:10px 0 0; } html[data-theme] body .lx-nav .mtab { min-width:0 !important; text-align:left; padding:10px 13px !important; border:1px solid transparent !important; background:transparent !important; border-radius:12px !important; box-shadow:none !important; } html[data-theme] body .lx-nav .mtab .mt-title { font-size:14px !important; font-weight:600; color:var(--lx-text2); letter-spacing:0; } html[data-theme] body .lx-nav .mtab .mt-desc { font-size:12px; color:var(--lx-muted); margin-top:1px; } html[data-theme] body .lx-nav .mtab:hover { background:color-mix(in srgb, var(--lx-gold) 9%, transparent) !important; } html[data-theme] body .lx-nav .mtab.on { background:linear-gradient(90deg, color-mix(in srgb, var(--lx-gold) 20%, transparent), color-mix(in srgb, var(--lx-gold) 4%, transparent)) !important; border-color:var(--lx-hair) !important; box-shadow:inset 3px 0 0 var(--lx-gold) !important; } html[data-theme] body .lx-nav .mtab.on .mt-title { color:var(--lx-gold-text); font-weight:700; } html[data-theme] body .lx-tools { display:flex !important; flex-direction:column; gap:2px; margin-top:8px; } html[data-theme] body .lx-tools .btn, html[data-theme] body .lx-tools label.btn { width:100%; justify-content:flex-start; text-align:left; gap:6px; background:transparent !important; border:1px solid transparent !important; color:var(--lx-text2) !important; padding:8px 12px; border-radius:10px; box-shadow:none !important; font-size:14px; } html[data-theme] body .lx-tools .btn:hover { background:color-mix(in srgb, var(--lx-gold) 9%, transparent) !important; color:var(--lx-text) !important; } html[data-theme] body .lx-tools .btn.primary { background:linear-gradient(135deg, var(--lx-btn-hi), var(--lx-gold)) !important; color:#ffffff !important; font-weight:700 !important; border:none !important; box-shadow:0 4px 14px rgba(37,99,235,.28) !important; } html[data-theme] body .lx-tools .btn.primary:hover { background:linear-gradient(135deg, var(--lx-gold-hi, #3b82f6), var(--lx-gold, #1d4ed8)) !important; color:#ffffff !important; filter:brightness(1.08); box-shadow:0 6px 18px rgba(37,99,235,.38) !important; } html[data-theme] body .lx-tools .btn[style*="--red"], html[data-theme] body .lx-tools .btn[style*="red"] { color:var(--lx-bad) !important; } html[data-theme] body .lx-content { flex:1; min-width:0; max-width:1000px; margin:0 auto; padding:26px 34px 80px; } /* --- Hiệu Suất: thanh điều hướng ngang -> thanh danh mục cố định bên trái --- (dùng khung cố định thay vì lưới, tránh lỗi đẩy nội dung xuống cuối trang) */ html[data-theme] body #mohinhhs-shell { display:block; padding-left:var(--lx-side-w); min-height:calc(100vh - var(--lx-header-h)); } html[data-theme] body #mohinhhs-shell > nav#mohinh-subnav { position:fixed; left:0; top:var(--lx-header-h); bottom:0; width:var(--lx-side-w); height:auto; overflow-y:auto; z-index:5; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:20px 12px !important; margin:0; background:var(--lx-bg2) !important; border-right:1px solid var(--lx-hair) !important; border-bottom:none !important; } html[data-theme] body #mohinh-subnav::before { content:'Danh mục hiệu suất'; margin-bottom:8px; } html[data-theme] body #mohinh-subnav > img, html[data-theme] body #mohinh-subnav .nav-brand { display:none !important; } html[data-theme] body #mohinh-subnav .nav-tab { padding:11px 13px !important; border-radius:12px; border:1px solid transparent !important; border-bottom:1px solid transparent !important; color:var(--lx-text2) !important; font-size:14px !important; font-weight:600; background:transparent; } html[data-theme] body #mohinh-subnav .nav-tab:hover { background:color-mix(in srgb, var(--lx-gold) 9%, transparent); color:var(--lx-text) !important; } html[data-theme] body #mohinh-subnav .nav-tab.active { background:linear-gradient(90deg, color-mix(in srgb, var(--lx-gold) 20%, transparent), color-mix(in srgb, var(--lx-gold) 4%, transparent)); border-color:var(--lx-hair) !important; box-shadow:inset 3px 0 0 var(--lx-gold); color:var(--lx-gold-text) !important; font-weight:700; } html[data-theme] body #mohinh-subnav .nav-tools { display:flex; flex-direction:column; gap:2px; margin:14px 0 0 !important; border-top:1px solid var(--lx-hair); padding-top:12px; } html[data-theme] body #mohinh-subnav .nav-tools .nav-btn { width:100%; justify-content:flex-start; text-align:left; background:transparent !important; border:1px solid transparent !important; color:var(--lx-text2) !important; padding:8px 12px !important; border-radius:10px !important; font-size:14px !important; box-shadow:none !important; } html[data-theme] body #mohinh-subnav .nav-date { margin:10px 0 0 !important; padding:0 8px !important; font-size:12px; color:var(--lx-muted) !important; } html[data-theme] body #mohinhhs-shell .page { max-width:1000px; margin:0 auto; padding:26px 34px 80px; } html[data-theme] body #mohinhhs-shell #zhChain { max-width:1000px; margin:0 auto; padding:14px 34px 0; width:100%; box-sizing:border-box; } /* --- Đo 5 Chỉ Số: bỏ logo, cột nội dung giống Trí Tuệ / Quản Trị --- */ html[data-theme] body .app-layout { align-items:flex-start; } html[data-theme] body .app-layout .sidebar { position:sticky; top:var(--lx-header-h); height:calc(100vh - var(--lx-header-h)); width:var(--lx-side-w); flex-shrink:0; overflow-y:auto; padding:20px 12px; } html[data-theme] body .main-content { flex:1; min-width:0; max-width:1000px; margin:0 auto; padding:26px 34px 80px; } html[data-theme] body .main-content > .page-header { padding:0 !important; margin:0 0 6px !important; display:block; } html[data-theme] body .main-content > .page-header img, html[data-theme] body .main-content > .page-header .user-logo, html[data-theme] body .user-logo { display:none !important; } html[data-theme] body .main-content > .page-header h1 { font-family:var(--lx-display) !important; font-size:24px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:.01em; } html[data-theme] body .main-content > .page-header h1 span { color:var(--lx-gold-text) !important; } /* ===================================================================== ĐÁP ỨNG MÀN HÌNH: laptop lớn → laptop nhỏ → máy tính bảng → điện thoại Mốc: >1320 đầy đủ · ≤1320 gọn menu · ≤1100 thanh bên hẹp · ≤1000 menu bấm mở (☰) ≤860 thanh danh mục thành dải ngang · ≤560 điện thoại · cảm ứng: nút ≥44px ===================================================================== */ html body { overflow-x:clip; } html[data-theme] body img, html[data-theme] body canvas, html[data-theme] body video { max-width:100%; } html[data-theme] body .tbl-wrap, html[data-theme] body .table-wrap, html[data-theme] body [class*="tbl-wrap"] { overflow-x:auto; -webkit-overflow-scrolling:touch; } /* thanh menu chung */ @media (max-width:1320px){ html[data-theme] body .header .brand-text { display:none; } html[data-theme] body #zhNavUserName { display:none !important; } } @media (max-width:1100px){ html:root { --lx-side-w:200px; } html[data-theme] body .lx-content, html[data-theme] body .main-content, html[data-theme] body #mohinhhs-shell .page { padding-left:24px; padding-right:24px; } } @media (max-width:1000px){ html[data-theme] body .header { padding:0 14px !important; } } /* 7 mục menu + tài khoản cần ~1400px; hẹp hơn thì dùng nút ☰ (menu trượt) thay vì để thanh menu bị xuống dòng */ @media (max-width:1400px){ html[data-theme] body .mobile-toggle-btn { display:flex !important; } html[data-theme] body .header .nav-links-center { display:none !important; } } html[data-theme] body .header { flex-wrap:nowrap !important; } html[data-theme] body .zh-mobile-drawer { max-width:min(88vw, 360px); } /* thanh danh mục → dải ngang dính dưới thanh menu (máy tính bảng dọc + điện thoại) */ @media (max-width:860px){ html:root { --lx-side-w:100%; } html[data-theme] body > .wrap, html[data-theme] body .lx-wrap, html[data-theme] body .app-layout { flex-direction:column !important; align-items:stretch !important; } html[data-theme] body .sidebar-backdrop, html[data-theme] body .sidebar-nav-group { display:none !important; } html[data-theme] body .lx-side, html[data-theme] body .app-layout .sidebar, html[data-theme] body .wrap > .side, html[data-theme] body #mohinhhs-shell > nav#mohinh-subnav { position:sticky !important; top:var(--lx-header-h) !important; left:auto !important; bottom:auto !important; transform:none !important; visibility:visible !important; width:100% !important; max-width:none !important; height:auto !important; z-index:30; border-right:none !important; border-bottom:1px solid var(--lx-hair) !important; padding:8px 12px !important; background:var(--lx-header-bg) !important; backdrop-filter:blur(12px); box-shadow:0 6px 16px rgba(0,0,0,.12) !important; } html[data-theme] body .lx-side, html[data-theme] body .wrap > .side { overflow:visible !important; } html[data-theme] body .app-layout .sidebar, html[data-theme] body #mohinhhs-shell > nav#mohinh-subnav { overflow-x:auto !important; overflow-y:hidden !important; } /* cột nội dung: không co theo nội dung (lề auto trong khung cột làm nó rộng hơn màn hình) */ html[data-theme] body .wrap > main, html[data-theme] body .lx-content, html[data-theme] body .main-content, html[data-theme] body .content { margin-left:0 !important; margin-right:0 !important; width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box; align-self:stretch; } html[data-theme] body .side-title, html[data-theme] body #mohinh-subnav::before, html[data-theme] body .sidebar-title { display:none !important; } /* dải tab cuộn ngang */ html[data-theme] body .lx-nav.maintabs, html[data-theme] body .wrap > .side .nav, html[data-theme] body .app-layout .sidebar, html[data-theme] body #mohinhhs-shell > nav#mohinh-subnav { flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; gap:6px !important; scrollbar-width:none; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } html[data-theme] body .lx-nav.maintabs::-webkit-scrollbar, html[data-theme] body .wrap > .side .nav::-webkit-scrollbar, html[data-theme] body .app-layout .sidebar::-webkit-scrollbar, html[data-theme] body #mohinh-subnav::-webkit-scrollbar { display:none; } html[data-theme] body .lx-nav .mtab, html[data-theme] body .wrap > .side .nav button, html[data-theme] body .sidebar-item, html[data-theme] body #mohinh-subnav .nav-tab { flex:none !important; white-space:nowrap; width:auto !important; padding:9px 14px !important; scroll-snap-align:start; box-shadow:none !important; } html[data-theme] body .lx-nav .mtab .mt-desc { display:none; } /* Trí Tuệ / Quản Trị: giữ chữ trên dải tab (bản gốc chỉ còn biểu tượng), bỏ nhãn nhóm */ html[data-theme] body .wrap > .side .nav button .lbl { display:inline !important; } html[data-theme] body .wrap > .side .nav .grp-h { display:none !important; } html[data-theme] body .wrap > .side .nav button { flex-direction:row; align-items:center; gap:8px; } html[data-theme] body .lx-nav .mtab { text-align:center; } html[data-theme] body .wrap > .side .nav button.on, html[data-theme] body .sidebar-item.active, html[data-theme] body .lx-nav .mtab.on, html[data-theme] body #mohinh-subnav .nav-tab.active { box-shadow:inset 0 -3px 0 var(--lx-gold) !important; } /* công cụ Tài Chính: thu gọn sau nút "⚙ Công cụ", mở ra dạng hộp thả xuống (không làm dài thanh dính) */ html[data-theme] body .lx-side { display:block !important; } html[data-theme] body .lx-tools-toggle { display:inline-flex !important; align-self:flex-start; margin:6px 0 2px; } html[data-theme] body .lx-tools { display:none !important; position:absolute; left:12px; right:12px; top:100%; z-index:40; margin:0 !important; padding:8px !important; background:var(--lx-surface) !important; border:1px solid var(--lx-hair); border-radius:14px; box-shadow:var(--lx-shadow); max-height:60vh;max-height:60dvh; overflow-y:auto; flex-direction:column !important; } html[data-theme] body .lx-side.tools-open .lx-tools { display:flex !important; } html[data-theme] body .lx-tools .btn { width:100%; justify-content:flex-start; } /* công cụ Hiệu Suất nằm cuối dải */ html[data-theme] body #mohinh-subnav .nav-tools { flex-direction:row; border:none; margin:0 0 0 6px !important; padding:0; flex:none; } html[data-theme] body #mohinh-subnav .nav-tools .nav-btn { width:auto; white-space:nowrap; } html[data-theme] body #mohinh-subnav .nav-date { display:none; } /* nội dung */ html[data-theme] body .lx-content, html[data-theme] body .main-content, html[data-theme] body .wrap > .content { padding:18px 16px 70px !important; max-width:100% !important; } html[data-theme] body #mohinhhs-shell { padding-left:0; } html[data-theme] body #mohinhhs-shell .page { padding:18px 16px 70px; } html[data-theme] body #mohinhhs-shell #zhChain { padding:10px 16px 0; overflow-x:auto; } html[data-theme] body .ph h1, html[data-theme] body .lx-ph h1, html[data-theme] body .main-content > .page-header h1 { font-size:24px !important; } } @media (min-width:861px){ html[data-theme] body .lx-tools-toggle { display:none !important; } } html[data-theme] body .lx-tools-toggle { display:none; align-items:center; gap:6px; background:var(--lx-surface2) !important; color:var(--lx-text2); border:1px solid var(--lx-hair); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; cursor:pointer; } /* điện thoại */ @media (max-width:560px){ html[data-theme] body .card, html[data-theme] body .tile { border-radius:14px !important; } html[data-theme] body .filterbar, html[data-theme] body .chips { flex-wrap:wrap; } html[data-theme] body #zhSyncBadge, html[data-theme] body .zh-sync-badge { font-size:12px; padding:4px 10px; bottom:10px; left:10px !important; right:auto !important; } html[data-theme] body .ph h1, html[data-theme] body .lx-ph h1, html[data-theme] body .main-content > .page-header h1 { font-size:24px !important; } html[data-theme] body .zh-sync-badge, html[data-theme] body #zhSyncBadge { max-width:calc(100vw - 24px); font-size:12px; } html[data-theme] body .modal { width:calc(100vw - 20px) !important; max-width:none !important; max-height:88vh;max-height:88dvh; overflow-y:auto; } } /* tối ưu cảm ứng: loại bỏ độ trễ 300ms, chống nuốt click và chống hủy click */ html, body, button, a, input, select, textarea, [role="button"], .btn, .nav button, .nav-btn, .sidebar-item, .card, .scard, .catchip, .chip, .mtab, .nav-tab, .zv-card, .zhmm button, .zhmm-node, summary, .toggle-switch-4, .modesw button, .zh-float, .zh-fl, .tl-item, .cl-pi, .header, .side, .lx-side { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* nền mờ cho drawer mobile */ .zh-drawer-backdrop { display: none; position: fixed; top:0;right:0;bottom:0;left:0; background: rgba(0, 0, 0, 0.65); z-index: 99990 !important; touch-action: manipulation; backdrop-filter: none !important; } .zh-drawer-backdrop.active { display: block !important; } body.zh-drawer-open { overflow: hidden !important; } /* cảm ứng: vùng bấm tối thiểu 44px, chống chạm nhầm */ @media (pointer:coarse){ html[data-theme] body .nav button, html[data-theme] body .sidebar-item, html[data-theme] body #mohinh-subnav .nav-tab, html[data-theme] body .lx-nav .mtab, html[data-theme] body .btn, html[data-theme] body .nav-btn, html[data-theme] body .lx-tools-toggle, html[data-theme] body .chip, html[data-theme] body .seg button { min-height:44px; } html[data-theme] body input:not([type=checkbox]):not([type=radio]), html[data-theme] body select { min-height:44px; } /* cỡ chữ ô nhập: xem khối ZH_CO_CHU_O_NHAP_V2 (iOS 16px, còn lại 14px) */ /* chống nuốt click do API kéo thả của HTML5 trên điện thoại cảm ứng */ .scard, .card, .tl-item, .cl-pi { -webkit-user-drag: none; } } /* tai thỏ / thanh cạnh của điện thoại */ @supports (padding:max(0px)){ html[data-theme] body .header { padding-left:max(14px, env(safe-area-inset-left)) !important; padding-right:max(14px, env(safe-area-inset-right)) !important; } html[data-theme] body .lx-content, html[data-theme] body .main-content { padding-bottom:max(70px, calc(env(safe-area-inset-bottom) + 40px)); } } @media (prefers-reduced-motion:reduce){ html body *, html body *::before, html body *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* trang chủ: thẻ phân hệ xếp 1 cột khi màn hình hẹp */ @media (max-width:900px){ html[data-theme] body .apps-grid { grid-template-columns:1fr !important; } } /* ===================================================================== ZH OS: bảng điều khiển ở trang chủ + thông báo đồng bộ giữa các tab ===================================================================== */ html[data-theme] body #zhOsHub { max-width:1180px; margin:0 auto 28px; padding:22px 24px; background:var(--lx-surface); border:1px solid var(--lx-hair); border-radius:20px; box-shadow:var(--lx-shadow-sm); } html[data-theme] body .zhos-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px; } html[data-theme] body .zhos-head .eyebrow { color:var(--lx-gold-text); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; } html[data-theme] body .zhos-head h2 { font-family:var(--lx-display); font-size:24px; margin:2px 0 4px; color:var(--lx-text); } html[data-theme] body .zhos-head p { margin:0; color:var(--lx-text2); font-size:14px; } html[data-theme] body .zhos-refresh { background:transparent; color:var(--lx-text2); border:1px solid var(--lx-hair); border-radius:999px; padding:7px 14px; cursor:pointer; font-weight:600; } html[data-theme] body .zhos-refresh:hover { color:var(--lx-gold-text); border-color:var(--lx-gold); } html[data-theme] body .zhos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; } html[data-theme] body .zhos-card { display:block; text-decoration:none; background:var(--lx-surface2); border:1px solid var(--lx-hair); border-radius:16px; padding:14px 16px; transition:.2s; } html[data-theme] body .zhos-card:hover { transform:translateY(-3px); border-color:var(--lx-gold); box-shadow:var(--lx-glow); } html[data-theme] body .zhos-t { font-size:12px; font-weight:700; letter-spacing:.4px; color:var(--lx-text2); text-transform:uppercase; } html[data-theme] body .zhos-v { font-size:20px; font-weight:700; color:var(--lx-gold-text); margin:6px 0 4px; } html[data-theme] body .zhos-s { font-size:12px; color:var(--lx-muted); } html[data-theme] body .zhos-none { font-size:16px; font-weight:600; color:var(--lx-muted); } html[data-theme] body .zhos-acts { margin-top:16px; } html[data-theme] body .zhos-at { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--lx-gold-text); margin-bottom:8px; } html[data-theme] body .zhos-act { display:flex; align-items:center; gap:12px; text-decoration:none; padding:10px 12px; border-radius:12px; border:1px solid transparent; color:var(--lx-text); } html[data-theme] body .zhos-act:hover { background:color-mix(in srgb, var(--lx-gold) 9%, transparent); border-color:var(--lx-hair); } html[data-theme] body .zhos-act b { display:block; font-weight:700; } html[data-theme] body .zhos-act small { display:block; color:var(--lx-muted); font-size:12px; } html[data-theme] body .zhos-ai { font-size:20px; } html[data-theme] body .zhos-go { margin-left:auto; color:var(--lx-gold-text); font-size:20px; } html[data-theme] body .zhos-empty { color:var(--lx-text2); padding:6px 4px; } html[data-theme] body .zhos-toast { position:fixed; left:16px; bottom:16px; z-index:100000; max-width:min(92vw,460px); display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--lx-surface2); color:var(--lx-text); border:1px solid var(--lx-gold); border-radius:14px; padding:10px 14px; box-shadow:var(--lx-shadow); font-size:14px; } html[data-theme] body .zhos-toast button { background:linear-gradient(135deg,var(--lx-btn-hi),var(--lx-gold)); color:var(--lx-on-gold); border:none; border-radius:999px; padding:6px 14px; font-weight:700; cursor:pointer; } html[data-theme] body .zhos-toast button.x { background:transparent; color:var(--lx-text2); padding:4px 8px; } @media (max-width:560px){ html[data-theme] body #zhOsHub { padding:16px 14px; border-radius:16px; margin:0 12px 20px; } html[data-theme] body .zhos-head h2 { font-size:20px; } } /* ===================================================================== HIỆU NĂNG: mượt khi cuộn và bấm ===================================================================== */ /* làm mờ nền (backdrop-filter) buộc trình duyệt tính lại vùng phía sau mỗi khung hình → bỏ toàn bộ; nền thanh menu/dải tab đã đủ đục */ html[data-theme] body *, html[data-theme] body *::before, html[data-theme] body *::after { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html[data-theme] body .header { background:var(--lx-header-bg-solid, var(--lx-header-bg)) !important; will-change:transform; } html:root { --lx-header-bg-solid:linear-gradient(180deg, #13151f, #0a0b10); } html[data-theme="light"]:root { --lx-header-bg-solid:linear-gradient(180deg, #fffdf8, #f6f1e7); } html[data-theme] body #mohinhhs-shell > nav#mohinh-subnav, html[data-theme] body .lx-side, html[data-theme] body .app-layout .sidebar { will-change:transform; } html[data-theme] body .zh-sync-badge, html[data-theme] body #zhSyncBadge { will-change:transform; } /* hiệu ứng chuyển màu: chỉ những thuộc tính cần, không "all" */ html[data-theme] body .nav button, html[data-theme] body .sidebar-item, html[data-theme] body #mohinh-subnav .nav-tab, html[data-theme] body .lx-nav .mtab, html[data-theme] body .btn, html[data-theme] body .nav-btn, html[data-theme] body .chip, html[data-theme] body .zhos-card, html[data-theme] body .card[onclick] { transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } /* chống giật bố cục lúc nạp: giữ chỗ cho thanh menu; tự hiện sau tối đa 0.3 giây */ html[data-theme] body > #zh-header:empty { min-height:var(--lx-header-h); } html[data-theme]:not([data-lx-ready]) body > .wrap, html[data-theme]:not([data-lx-ready]) #mohinhhs-shell { visibility:hidden; animation:lxShow 0s linear 0.3s forwards; } @keyframes lxShow { to { visibility:visible; } } /* nội dung ngoài màn hình không cần vẽ ngay */ /* ZH_FULLSCREEN_FIX_V1: trang đang HIỂN THỊ có thể mang lớp .active (Hiệu Suất, Tài Chính) HOẶC .on (Rèn Trí Tuệ, Quản Trị). Trước đây chỉ loại .active nên trang .on bị content-visibility:auto, và thuộc tính này NHỐT mọi phần tử position:fixed bên trong (mindmap toàn màn hình chỉ rộng bằng khung trang, không phủ màn hình). */ html[data-theme] body .page:not(.active):not(.on), html[data-theme] body .subpage:not(.on):not(.active) { content-visibility:auto; contain-intrinsic-size:1px 600px; } /* --- Thanh công cụ (Rèn Trí Tuệ, Quản Trị): theo màu giao diện, cuộn theo trang (không dính, khỏi chiếm màn hình), tự xuống dòng --- */ html[data-theme] body .bar:has(> :is(input, button, .btn, select)) { position:static !important; flex-wrap:wrap !important; background:var(--lx-bg) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; margin:0 0 16px !important; padding:10px 0 !important; border-bottom:1px solid var(--lx-hair) !important; } html[data-theme] body .bar input.title { min-width:200px; } /* .bar cũng là tên của THANH TIẾN ĐỘ ở Tài Chính / Đo 5: khôi phục nền + phần tô (luật trên chỉ áp cho thanh công cụ có nút) */ html[data-theme] body .bar:not(:has(> :is(input, button, .btn, select))) { background:var(--lx-surface3, #16274d); border-radius:99px; overflow:hidden; } /* ===================================================================== HỆ CHỮ THỐNG NHẤT (mọi trang) · Tiêu đề trang / mục lớn (h1, h2, tên thương hiệu): cùng họ Inter, đậm 700, siết chữ nhẹ · Mọi thứ còn lại: Inter — MỘT họ chữ duy nhất cho cả hệ thống (như Linear, Stripe, VUS) · Độ đậm chỉ dùng 400 / 500 / 600 / 700 — không còn 800, 900 (xem dong-bo-chu.py) ===================================================================== */ html[data-theme] body :where(div,span,p,a,li,td,th,label,small,b,strong,em,i:not(.ti),button,input,select,textarea,summary,option,h3,h4,h5,h6,legend,figcaption,dt,dd) { font-family:var(--lx-sans) !important; } html[data-theme] body h1, html[data-theme] body h2, html[data-theme] body .brand-title, html[data-theme] body .brand-text .brand-title, html[data-theme] body .main-content > .page-header h1, html[data-theme] body .zhos-head h2, html[data-theme] body .card h2 { font-family:var(--lx-display) !important; font-weight:700 !important; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; letter-spacing:.01em; } html[data-theme] body h1 { font-size:clamp(26px, 3.2vw, 34px) !important; line-height:1.18; } html[data-theme] body h2 { font-size:clamp(20px, 2.2vw, 24px) !important; line-height:1.25; } html[data-theme] body h3 { font-size:18px; font-weight:700; line-height:1.3; } html[data-theme] body h4, html[data-theme] body h5 { font-size:16px; font-weight:600; } html[data-theme] body b, html[data-theme] body strong { font-weight:700; } html[data-theme] body :where(button,.btn,label,th,summary) { font-weight:600; } html[data-theme] body :where(td,th,.zhos-card,[class*="stat"],[class*="kpi"]) { font-variant-numeric:tabular-nums; } /* MỘT họ chữ: tiêu đề chỉ khác cỡ + độ đậm + siết chữ nhẹ, không đổi kiểu chữ */ html[data-theme] body h1, html[data-theme] body h2, html[data-theme] body .brand-title, html[data-theme] body .zhos-head h2 { letter-spacing:-.015em !important; } html[data-theme] body .brand-title { letter-spacing:.06em !important; } /* ===================================================================== THANG CỠ CHỮ (mọi trang) — mỗi bậc cách nhau ≥ 2px để nhìn ra thứ bậc 12 nhãn nhỏ · tiêu đề bảng · huy hiệu · ghi chú 14 chữ nội dung · nút · ô nhập 15-16 câu mô tả dưới tiêu đề · tiêu đề thẻ nhỏ (h3) 18-20 số phụ nổi bật 20 tiêu đề mục (h2) 24 số liệu lớn (thẻ chỉ số) 28 tiêu đề trang (h1) ===================================================================== */ html[data-theme] body h1 { font-size:clamp(24px, 2.4vw, 28px) !important; letter-spacing:-.02em !important; } html[data-theme] body h2 { font-size:20px !important; } html[data-theme] body h3 { font-size:16px !important; } html[data-theme] body :is(.eyebrow, .kicker, .ph .tag, .page-header .tag) { font-size:12px !important; letter-spacing:.16em; text-transform:uppercase; font-weight:700; } html[data-theme] body :is(h1 + .sub, h1 + p, h1 + .intro, h1 + .subtitle, .page-header h1 + p) { font-size:16px !important; line-height:1.55; margin-top:8px; } html[data-theme] body :is(.val, .stat-val, .stat-value, .kpi-val, .kpi-value, .num-lg) { font-size:clamp(16px, 0.9vw + 10px, 21px) !important; letter-spacing:-.02em; line-height:1.15; } /* ZH_SO_NHO_V1: cỡ số THEO MÀN HÌNH (điện thoại ~16px → máy tính ~21px), trước đây cố định 24px làm vỡ cột, chữ '100%' bị xuống dòng */ html[data-theme] body :is(.badge, .pill, .tag, .wl-tag, th) { font-size:12px; } /* ===================================================================== KHỐI TIÊU ĐỀ ĐẦU TRANG — MỘT KHUÔN CHO CẢ 5 TRANG nhãn nhỏ (12px, xanh) → tiêu đề (28px) → mô tả (15px) → nhãn phụ (nếu có) Cùng khoảng cách trên, khoảng cách giữa các dòng, và khoảng cách xuống nội dung. ===================================================================== */ html[data-theme] body :is(.ph, .lx-ph, .main-content > .page-header) { display:block !important; padding:0 !important; margin:0 0 28px !important; border:0 !important; background:none !important; text-align:left !important; max-width:none !important; } html[data-theme] body :is(.ph, .lx-ph, .main-content > .page-header) .eyebrow { display:block; margin:0 0 10px !important; line-height:1.2 !important; font-size:12px !important; letter-spacing:.16em !important; font-weight:700 !important; text-transform:uppercase !important; color:var(--lx-gold-text) !important; } html[data-theme] body :is(.ph, .lx-ph, .main-content > .page-header) :is(h1, h2) { margin:0 0 10px !important; padding:0 !important; font-size:clamp(24px, 2.4vw, 28px) !important; line-height:1.2 !important; font-weight:700 !important; letter-spacing:-.02em !important; text-transform:none !important; color:var(--lx-text) !important; -webkit-text-fill-color:currentColor !important; background:none !important; } html[data-theme] body :is(.ph, .lx-ph, .main-content > .page-header) :is(h1, h2) span { color:inherit !important; } html[data-theme] body :is(.ph, .lx-ph, .main-content > .page-header) :is(p, .intro, .sub, h1 + div, h2 + div):not(.eyebrow):not(.badge):not(.chip) { margin:0 !important; max-width:720px; font-size:16px !important; line-height:1.6 !important; font-weight:400 !important; color:var(--lx-text2) !important; letter-spacing:0 !important; text-transform:none !important; } html[data-theme] body .ph p[style*="letter-spacing"] { margin-top:14px !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--lx-gold-text) !important; } html[data-theme] body :is(.ph, .lx-ph) .badge, html[data-theme] body :is(.ph, .lx-ph) .pill { margin-top:10px; } @media (max-width:860px){ html[data-theme] body :is(.ph, .lx-ph, .main-content > .page-header) { margin-bottom:20px !important; } } /* Hiệu Suất: khối tiêu đề nằm đúng cột nội dung (cùng bề rộng/căn lề với các thẻ bên dưới) */ html[data-theme] body #mohinhhs-shell .lx-hs-head { max-width:1000px; margin:0 auto !important; padding:26px 34px 0 !important; box-sizing:border-box; } @media (max-width:1100px){ html[data-theme] body #mohinhhs-shell .lx-hs-head { padding-left:24px !important; padding-right:24px !important; } } @media (max-width:860px){ html[data-theme] body #mohinhhs-shell .lx-hs-head { padding:18px 16px 0 !important; } } /* ===================================================================== ĐỒNG BỘ BỐ CỤC + SỬA LỖI TỪ 3 CHUYÊN GIA (UX · hình ảnh · tiếp cận) ===================================================================== */ /* --- màu: tương phản đạt AA --- */ html:root { --lx-btn-hi:#2f6fed; --lx-field-line:#5a6b99; --lx-header-bg-solid:linear-gradient(180deg,#0c1428,#04060d); } html[data-theme="dark"]:root { --lx-muted:#8b99bf; } html[data-theme="light"]:root { --lx-btn-hi:#2563eb; --lx-field-line:#cbd5e1; --lx-header-bg-solid:linear-gradient(180deg,#ffffff,#f8faff); --lx-ok:#059669; --lx-bad:#e11d48; --lx-warn:#d97706; --lx-info:#0284c7; --lx-muted:#64748b; } html[data-theme] body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea) { border-color:var(--lx-field-line) !important; } /* --- bố cục: cùng bề rộng sidebar, cùng lề trên, cùng cột nội dung --- */ @media (min-width:1101px){ html:root { --lx-side-w:250px; } } html[data-theme] body :is(.lx-side, .wrap > .side, .app-layout .sidebar, #mohinh-subnav) { box-sizing:border-box !important; } html[data-theme] body header.header, html[data-theme] body #zh-header > header { margin:0 !important; } html[data-theme] body main.main { padding:26px 34px 80px !important; } @media (max-width:1100px){ html[data-theme] body main.main { padding-left:24px !important; padding-right:24px !important; } } @media (max-width:860px){ html[data-theme] body main.main { padding:18px 16px 70px !important; } } html[data-theme] body #mohinhhs-shell .lx-hs-head { max-width:1000px !important; } html[data-theme] body #mohinhhs-shell #zhChain { margin-bottom:8px; } @media (max-width:560px){ html[data-theme] body { padding-bottom:44px; } } /* --- bàn phím: liên kết "bỏ qua đến nội dung" --- */ .lx-skip { position:absolute; left:8px; top:-60px; z-index:100001; padding:10px 16px; border-radius:10px; background:var(--lx-gold); color:var(--lx-on-gold); font-weight:700; text-decoration:none; transition:top .15s; } .lx-skip:focus { top:8px; } /* ===================================================================== HIỆU SUẤT · Ma trận ưu tiên + Lộ trình 90 ngày — chế độ SÁNG (trang gốc gắn cứng nền tối cho 4 ô; ở chế độ sáng đổi sang nền nhạt cùng tông màu) ===================================================================== */ html[data-theme="light"] body .cl-pq.win { background:linear-gradient(135deg,#fff1f2,#ffe4e6); border-color:#e11d48; --qc:#be123c; } html[data-theme="light"] body .cl-pq.big { background:linear-gradient(135deg,#ecfdf5,#d1fae5); border-color:#10b981; --qc:#047857; } html[data-theme="light"] body .cl-pq.fill { background:linear-gradient(135deg,#eff6ff,#dbeafe); border-color:#3b82f6; --qc:#1d4ed8; } html[data-theme="light"] body .cl-pq.drop { background:linear-gradient(135deg,#f4f4f5,#e4e4e7); border-color:#a1a1aa; --qc:#52525b; } html[data-theme="light"] body .cl-pq-hd .n { color:#fff; } html[data-theme="light"] body .cl-pq-tag { opacity:1; } html[data-theme="light"] body .cl-pq-desc, html[data-theme="light"] body .cl-pq-empty { color:var(--lx-text2); opacity:1; } html[data-theme="light"] body .cl-pi { background:rgba(255,255,255,.78); border-color:rgba(15,23,48,.1); color:var(--lx-text); } html[data-theme="light"] body .cl-pi:hover { border-color:rgba(15,23,48,.28); } html[data-theme="light"] body .cl-pi .t:focus { background:rgba(15,23,48,.06); } html[data-theme="light"] body .cl-pi .sc select { background:#fff !important; border-color:rgba(15,23,48,.18) !important; color:var(--lx-text) !important; } html[data-theme="light"] body .cl-pi .act:hover { color:#fff; } html[data-theme="light"] body .cl-pi .act.done { border-color:rgba(4,120,87,.5); color:#047857; } html[data-theme="light"] body .cl-pi .act.done:hover { background:rgba(4,120,87,.12); color:#047857; } html[data-theme="light"] body .cl-pq-add input { background:rgba(255,255,255,.85) !important; border-color:rgba(15,23,48,.25) !important; color:var(--lx-text) !important; } html[data-theme="light"] body .cl-pm-quote { background:rgba(15,23,48,.04); } html[data-theme="light"] body .cl-m .prog { background:rgba(15,23,48,.1); } html[data-theme="light"] body .cl-m .nowtag { color:#fff; } html[data-theme="light"] body .zhmm-hint { background:rgba(255,255,255,.92); color:var(--lx-text2); border-color:var(--lx-line); } /* HO-SO-CO-CHU: hộp "Chỉnh sửa hồ sơ" — giá trị bị kế thừa cỡ 24px của .val (số liệu) làm to hơn nhãn */ html[data-theme] body .zh-pm-info-item { align-items:baseline; gap:12px; } html[data-theme] body .zh-pm-info-item .lbl { font-size:14px !important; font-weight:500; color:var(--lx-muted); } html[data-theme] body .zh-pm-info-item .val, html[data-theme] body .zh-pm-info-item .zh-pm-user-val { font-size:14px !important; line-height:1.45 !important; font-weight:600 !important; text-align:right; overflow-wrap:anywhere; } html[data-theme] body .zh-pm-label { font-size:12px; font-weight:700; letter-spacing:.04em; } html[data-theme] body .zh-pm-input { font-size:14px; } /* ZH_SO_GOI_Y_V1: chip hiện số có dấu chấm ngăn hàng nghìn dưới ô số */ .zh-numchip { position: fixed; z-index: 100000; pointer-events: none; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; background: var(--lx-surface3, #1b2748); color: var(--lx-gold-text, #f2c14e); border: 1px solid var(--lx-line, rgba(255,255,255,.18)); box-shadow: var(--lx-shadow-sm, 0 4px 14px rgba(0,0,0,.35)); } /* ZH_LIEN_HE_NOI_V1: nút liên hệ nổi góc phải — biểu tượng SVG trắng trên nền màu thương hiệu, nhãn hiện khi rê chuột; chữ luôn trắng ở cả giao diện sáng và tối */ .zh-float { position: fixed; right: 16px; bottom: 96px; z-index: 9000; display: flex; flex-direction: column; align-items: center; gap: 12px; } .zh-float-list { display: none; flex-direction: column; gap: 12px; align-items: center; } .zh-float.open .zh-float-list { display: flex; } html body .zh-fl, html body a.zh-fl, html body a.zh-fl:visited { position: relative; width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; text-decoration: none !important; border: 3px solid rgba(255,255,255,.95); cursor: pointer; font-family: inherit; line-height: 1; padding: 0; box-shadow: 0 6px 16px rgba(10,20,40,.38), 0 0 0 1px rgba(10,20,40,.18); transition: transform .15s, box-shadow .15s; opacity: 1 !important; } html body .zh-fl:hover, html body .zh-fl:focus-visible { transform: scale(1.1); box-shadow: 0 10px 22px rgba(10,20,40,.45), 0 0 0 1px rgba(10,20,40,.2); outline: none; } html body .zh-fl svg { width: 24px; height: 24px; color: #fff; fill: currentColor; display: block; } html body .zh-fl-about svg { width: 28px; height: 28px; } .zh-zalo-t { font-size: 14px; font-weight:700; letter-spacing: -.2px; color: #fff; font-family: 'Inter', system-ui, sans-serif; } html body .zh-fl-zalo { background: #0068ff; } html body .zh-fl-mess { background: linear-gradient(135deg, #a334fa 0%, #0099ff 100%); } html body .zh-fl-fb { background: #1877f2; } html body .zh-fl-yt { background: #e60000; } html body .zh-fl-tt { background: #111; box-shadow: 3px 3px 0 #25f4ee, -3px -3px 0 #fe2c55, 0 6px 16px rgba(10,20,40,.38); } html body .zh-fl-tel { background: #16a34a; } html body .zh-fl-about { background: #b8860b; } html body .zh-fl-toggle { background: #2563eb; } .zh-fl-toggle .c { display: none; } .zh-float.open .zh-fl-toggle .o { display: none; } .zh-float.open .zh-fl-toggle .c { display: inline-flex; } .zh-fl::before { content: attr(data-t); position: absolute; right: 60px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(15,23,42,.94); box-shadow: 0 4px 12px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .12s; } .zh-fl:hover::before, .zh-fl:focus-visible::before { opacity: 1; } @media (max-width: 700px) { .zh-float { right: 10px; bottom: 84px; gap: 10px; } html body .zh-fl { width: 46px; height: 46px; } .zh-fl::before { display: none; } } @media print { .zh-float { display: none; } } /* ZH_AN_TU_LUU_MAY_V1: dữ liệu đã tự lưu vào tài khoản trên máy chủ -> ẩn các nút "tự lưu xuống máy" và nhắc sao lưu. Nút Sao lưu/Nhập thủ công vẫn còn. */ #rt-auto-btn, #qt-auto-btn, #zhBkAuto, #tdBackup, #backupBanner { display: none !important; } /* ZH_NHOM_A_V1: điện thoại — Hiệu Suất không tràn ngang; ô nhập 16px chống iOS tự phóng to */ @media (max-width: 760px) { .td-grid > *, .card { min-width: 0; } .td-addrow { flex-wrap: wrap; } .td-addrow > * { min-width: 0; max-width: 100%; } .zh-kpisel { max-width: 100%; } } /* (cỡ chữ ô nhập trên cảm ứng: chuyển vào khối ZH_CO_CHU_O_NHAP_V2) */ @supports (min-height: 100dvh) { html[data-lx] body { min-height: 100dvh; } } /* ZH_BAN_DO_MUC_TIEU_V1: bản đồ 5 mục tiêu cuộc đời — bản đồ LÊN TRÊN và to, thanh chấm điểm XUỐNG DƯỚI */ html body .cl-wheel { grid-template-columns: 1fr; gap: 18px; } html body .cl-wheel .cl-radar, html body .cl-radar { width: 100%; max-width: 560px; height: auto; min-height: 280px; margin: 4px auto 0; display: block; } html body .cl-wheel-in { grid-template-columns: minmax(150px, max-content) minmax(120px, 1fr) 30px; gap: 14px 12px; } html body .cl-wheel-in .cl-wr span { white-space: normal; font-size: 14px; font-weight: 600; } html body .cl-wheel-in .cl-wr b { font-size: 18px; text-align: center; } .cl-wd { display: block; font-size: 12px; font-weight: 700; color: #26de81; margin-top: 2px; } .cl-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text2, #9aa7c7); margin-top: 8px; } .cl-leg .g { color: #e8b84b; font-weight: 700; } .cl-leg .b { color: #26de81; font-weight: 700; } .cl-wheel-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } @media (max-width: 560px) { html body .cl-wheel-in { grid-template-columns: 1fr minmax(100px, 1.2fr) 28px; } } /* ZH_MINDMAP_FULL_V1: toàn màn hình phủ trên header và nút nổi; nút zoom đưa lên góc phải trên để không bị ô "Đã lưu vào Cloud" che */ .zhmm.zhmm-full { z-index: 99000 !important; } .zhmm .zhmm-zoom { top: 12px; bottom: auto; } /* ZH_DONG_HO_SANG_V1: giao diện SÁNG — số đồng hồ Pomodoro màu đen đậm (trước đây chữ trắng nên không đọc được) */ html[data-theme="light"] body .pomo-time, html[data-theme="light"] body .pomo-circle.running .pomo-time, html[data-theme="light"] body .pomo-circle.paused .pomo-time { color: #0b1220 !important; text-shadow: none !important; } html[data-theme="light"] body .pomo-label { color: #334155 !important; } /* ZH_DONG_BO_CHU_V1: tiêu đề khung (card) cùng một kiểu ở mọi trang: Inter, chữ hoa đầu câu, đậm, 18px (trước: Hiệu Suất viết HOA nhỏ giãn chữ, Tài Chính / Đo 5 cỡ 20px) */ html[data-theme] body .card-title, html[data-theme] body .panel > h2, html[data-theme] body .card > h2 { font-family: 'Inter', system-ui, sans-serif; text-transform: none; letter-spacing: -.2px; font-size: 18px !important; font-weight: 700; } /* ZH_THUONG_HIEU_VANG_V1: chữ ZERO TO HERO ở góc trên trái màu vàng (sáng & tối đồng bộ màu vàng thương hiệu #f2b91e) */ html[data-theme] body .brand-title, html[data-theme] body .brand-text .brand-title { color: #f2b91e !important; -webkit-text-fill-color: #f2b91e !important; background: none !important; text-shadow: 0 1px 0 rgba(0,0,0,.25); } html[data-theme="light"] body .brand-title, html[data-theme="light"] body .brand-text .brand-title { color: #f2b91e !important; -webkit-text-fill-color: #f2b91e !important; text-shadow: none; } /* ZH_BRAND_VANG_V1: vàng thương hiệu = vàng của logo mới (#f2b91e). Chữ "ZERO TO HERO" ở khung đăng nhập/đăng ký dùng cùng vàng với thanh trên (sáng & tối đều dùng #f2b91e). */ html[data-theme] body .brand-header .title { background: none !important; color: #f2b91e !important; -webkit-text-fill-color: #f2b91e !important; letter-spacing: .1em !important; text-shadow: 0 1px 0 rgba(0,0,0,.25); } html[data-theme="light"] body .brand-header .title { color: #f2b91e !important; -webkit-text-fill-color: #f2b91e !important; text-shadow: none; } /* ZH_ONLINE_FIX_V1: sửa lỗi bản điện thoại (file "Check lỗi Website", 04/10/2026) */ /* a) dải tab xếp chồng (≤860px): bỏ khối ghi chú cuối thanh bên (chiếm chỗ, làm màn ngang chỉ còn vài dòng nội dung) */ @media (max-width:860px){ html[data-theme] body .wrap > .side .foot, html[data-theme] body .side .foot { display:none !important; } } /* b) điện thoại nằm ngang (thấp): thanh menu và dải tab không dính, nhường toàn bộ chiều cao cho nội dung / mindmap */ @media (max-height:520px) and (orientation:landscape){ html[data-theme] body .header { position:relative !important; } html[data-theme] body .lx-side, html[data-theme] body .app-layout .sidebar, html[data-theme] body .wrap > .side, html[data-theme] body #mohinhhs-shell > nav#mohinh-subnav { position:static !important; box-shadow:none !important; } } /* c) Đo 5 · bảng Tài chính: dưới 640px bảng xuống hàng riêng, rộng đủ hiện số, không bị cắt mép phải */ @media (max-width:640px){ html[data-theme] body .fin-summary { flex-direction:column !important; align-items:stretch !important; padding:14px !important; } html[data-theme] body .fin-ring { align-self:center !important; } html[data-theme] body .fin-tbl-wrap { flex:none !important; width:100% !important; overflow:visible !important; } html[data-theme] body .fin-tbl th:first-child, html[data-theme] body .fin-tbl td:first-child { width:48% !important; } html[data-theme] body .fin-tbl th:last-child, html[data-theme] body .fin-tbl td.val { width:52% !important; white-space:nowrap !important; font-size:18px !important; letter-spacing:-.2px; } } /* d) Tài Chính · ba thẻ Thu nhập / Chi tiêu / Chênh lệch dưới lịch: số lớn không tràn viền */ .tc-cal-sum > .card { min-width:0; } @media (max-width:560px){ html[data-theme] body .tc-cal-sum { gap:6px !important; } html[data-theme] body .tc-cal-sum > .card { padding:10px 8px !important; } html[data-theme] body .tc-cal-sum .label { font-size:12px !important; } html[data-theme] body .tc-cal-sum .val { font-size:clamp(11px, 3.4vw, 17px) !important; white-space:nowrap; letter-spacing:-.3px; margin-top:4px !important; } } /* e) chữ dài không tràn khung (nút gợi ý, thẻ, nhãn) */ html[data-theme] body .cl-mini, html[data-theme] body .chip, html[data-theme] body .tag { white-space:normal !important; max-width:100%; overflow-wrap:anywhere; text-align:left; line-height:1.35; } html[data-theme] body .card { overflow-wrap:break-word; } /* g) nhẹ máy: thẻ ở dưới màn hình chưa vẽ cho tới khi cuộn tới (Rèn Trí Tuệ có hàng chục thẻ chủ đề) */ @media (max-width:860px), (pointer:coarse){ html[data-theme] body .saved-grid > .scard { content-visibility:auto; contain-intrinsic-size:auto 220px; } html[data-theme] body .card, html[data-theme] body .scard { box-shadow:none !important; } html[data-theme] body * { scroll-behavior:auto !important; } } /* ZH_ONLINE_FIX_V1B: ZH Hiệu Suất · khung "lộ trình học" (biểu tượng nền tảng) đẩy cả trang rộng hơn màn hình điện thoại (443px trên màn 375px) */ @media (max-width:700px){ html[data-theme] body .lo-learnwrap { grid-template-columns:minmax(0,1fr) !important; } html[data-theme] body .lo-learn { min-width:0; flex-wrap:wrap; } html[data-theme] body .lo-learn .n { white-space:normal; overflow:visible; text-overflow:clip; flex:1 1 150px; overflow-wrap:anywhere; } html[data-theme] body .hh-plats { flex-shrink:1; } } /* ZH_ONLINE_FIX_V1C: ZH Hiệu Suất · bản đồ 5 mục tiêu (svg) và dòng "lịch sử ngày" cũng làm trang rộng quá màn điện thoại */ html[data-theme] body .cl-wheel { grid-template-columns:minmax(0,1fr) !important; } html[data-theme] body .cl-wheel > * { min-width:0; } html[data-theme] body .cl-radar, html[data-theme] body .cl-wheel svg { max-width:100%; } html[data-theme] body .day-hist-header { flex-wrap:wrap; gap:8px; } html[data-theme] body .day-hist-header > * { min-width:0; max-width:100%; } /* ZH_ONLINE_FIX_V1D: thanh chấm điểm 5 mục tiêu: cột 1fr co theo nội dung nên đẩy số điểm ra ngoài mép phải */ @media (max-width:560px){ html body .cl-wheel-in { grid-template-columns:minmax(0,1fr) minmax(90px,1.1fr) 32px !important; gap:12px 10px !important; } html body .cl-wheel-in .cl-wr, html body .cl-wheel-in .cl-wr span { min-width:0; overflow-wrap:anywhere; } } /* ZH_ONLINE_FIX_V1E: điện thoại nằm ngang: khung mindmap cao gần bằng màn hình (trước đây cố định 460px, bị cắt khi màn chỉ cao ~375px) */ @media (max-height:520px) and (orientation:landscape){ html[data-theme] body .zhmm:not(.zhmm-full) { height:max(300px, calc(100vh - 20px)) !important; } } /* ZH_MOBILE_FIX_V2: rà điện thoại lần 2 (màn 360px) */ html[data-theme] body .zhmm-group { flex-wrap:wrap; } @media (max-width:560px){ html[data-theme] body .summary-stats { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } html[data-theme] body .stat-item .val { white-space:normal; overflow:visible; text-overflow:clip; font-size:clamp(14px, 4.3vw, 18px) !important; line-height:1.25; overflow-wrap:anywhere; } html[data-theme] body .cl-data-grid { grid-template-columns:minmax(0, 1fr); } html[data-theme] body .cl-dc li span { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; } html[data-theme] body .cl-wg { white-space:normal; max-width:100%; overflow:visible; text-overflow:clip; } html[data-theme] body .rt-tname { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } html[data-theme] body .tl-cat-header { flex-wrap:wrap; } html[data-theme] body .tl-cat-name { min-width:0; width:100%; flex:1 1 100%; } } /* ZH_MOBILE_FIX_V2B: Hiệu Suất · tab Môi trường: tiêu đề thẻ (tên + nút ↓ 🗑) không đẩy nút ra ngoài mép phải; nút nhỏ đủ vùng chạm */ html[data-theme] body .mt-card-header { flex-wrap:wrap; gap:6px 8px; } html[data-theme] body .mt-card-header > * { min-width:0; max-width:100%; } @media (pointer:coarse){ html[data-theme] body .tl-cat-move, html[data-theme] body .tl-cat-del { min-width:40px; min-height:40px; padding:8px 10px; font-size:16px; } } /* ZH_MOBILE_FIX_V2C: quét ở màn 320px (iPhone SE đời đầu, Android nhỏ): cột lưới 1fr bị nội dung đẩy rộng hơn màn, hàng flex ép chữ còn 16px */ @media (max-width:760px){ html[data-theme] body .cl-pm-wrap { grid-template-columns:22px minmax(0, 1fr); } html[data-theme] body .cl-pm { grid-template-columns:minmax(0, 1fr); } html[data-theme] body .cl-pq { min-width:0; } html[data-theme] body .grid.two, html[data-theme] body .two { grid-template-columns:minmax(0, 1fr); } html[data-theme] body .grid > * { min-width:0; } } @media (max-width:420px){ html[data-theme] body .zh-obj { flex-wrap:wrap; } html[data-theme] body .zh-obj > * { min-width:0; } html[data-theme] body .hist-goal { flex:1 1 140px; min-width:0; } html[data-theme] body .pomo-controls { flex-wrap:wrap; } html[data-theme] body .hn-dots { grid-template-columns:repeat(7, minmax(0, 1fr)); } html[data-theme] body .cm-ph { flex-wrap:wrap; } html[data-theme] body .cm-ph .who { flex:1 1 120px; min-width:0; } html[data-theme] body .fin-tbl td.val { white-space:normal !important; overflow-wrap:normal; word-break:keep-all; } html[data-theme] body .tc-cal-sum .val { font-size:clamp(10px, 3.1vw, 16px) !important; letter-spacing:-.5px; } } /* ZH_MOBILE_FIX_V2D: màn ≤420px: hàng việc (ma trận phân việc) cho chữ một dòng riêng, nút xuống dưới; tiêu đề mục tiêu OKR không còn 16px; vòng tròn ngày nhỏ lại cho vừa 7 cột; hàng Hũ chia tiền (nhãn 128px + ô nhập + thanh + số 90px cố định) co giãn */ @media (max-width:420px){ html[data-theme] body .cl-pi { flex-wrap:wrap; } html[data-theme] body .cl-pi .t { flex:1 1 calc(100% - 34px); } html[data-theme] body .zh-obj > div { flex:1 1 150px; min-width:0; } html[data-theme] body #hnToday .hn-dots { gap:4px; } html[data-theme] body #hnToday .hn-dc { width:30px; height:30px; font-size:14px; } html[data-theme] body span[style*="flex:0 0 128px"] { flex:0 1 84px !important; min-width:0; } html[data-theme] body b[style*="flex:0 0 90px"] { flex:0 0 auto !important; min-width:56px; } html[data-theme] body .bar { min-width:24px; } } /* ZH_MOBILE_FIX_V2E: mindmap TOÀN MÀN HÌNH trên điện thoại (xoay dọc/ngang đều được): phủ trọn màn hình, thanh công cụ một hàng cuộn ngang để nhường chỗ cho bản đồ; ✕ thoát luôn nằm ở nhóm thu phóng */ html[data-theme] body .zhmm.zhmm-full { position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:auto !important; max-width:none !important; height:auto !important; margin:0 !important; border-radius:0 !important; } /* (không dùng vh/dvh: neo bốn cạnh top/right/bottom/left = 0 luôn đúng với khung nhìn thật, cả khi thanh địa chỉ trình duyệt điện thoại co giãn) */ @media (max-width:900px){ html[data-theme] body .zhmm.zhmm-full .zhmm-toolbar { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding:6px 8px; gap:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-top:max(6px, env(safe-area-inset-top)); } html[data-theme] body .zhmm.zhmm-full .zhmm-toolbar::-webkit-scrollbar { display:none; } html[data-theme] body .zhmm.zhmm-full .zhmm-toolbar .zhmm-group { flex:none; flex-wrap:nowrap; } html[data-theme] body .zhmm.zhmm-full .zhmm-hint, html[data-theme] body .zhmm.zhmm-full .zhmm-note { display:none; } } /* ZH_SO_NHO_V1B: số trong bảng/danh sách gọn hơn: "Bạn đang tiến bộ thế nào?" (cột % rộng 60px bị chữ 24px làm "100%" xuống 2 dòng) và bảng Tài chính ở Đo 5 */ html[data-theme] body .up-row .val { font-size:clamp(14px, 0.5vw + 11px, 18px) !important; white-space:nowrap; letter-spacing:0; } html[data-theme] body .up-row.tot .val { font-size:clamp(15px, 0.5vw + 12px, 19px) !important; } html[data-theme] body .fin-tbl td.val { font-size:clamp(15px, 0.4vw + 12px, 17px) !important; letter-spacing:-.01em; } html[data-theme] body .fin-tbl td { font-size:clamp(13px, 0.3vw + 11px, 14px); } html[data-theme] body .metric .val { font-size:clamp(16px, 0.9vw + 10px, 21px) !important; } /* ZH_LAN3_V1: rà lần 3 theo báo cáo 5 chuyên gia — co giãn theo thiết bị */ html[data-theme="dark"] { color-scheme:dark; } html[data-theme="light"] { color-scheme:light; --text-sub:#5b6b8c; } html, body { overscroll-behavior-y:contain; } /* 1. thanh đầu trang: logo không bị bóp, ☰ không bị đè */ @media (max-width:400px){ html body .header .header-left { flex-shrink:0 !important; } html body .header .brand { flex:none !important; overflow:visible !important; } html body .header .brand-title { display:none !important; } } @media (max-width:767px){ html body .header .zh-pricing-btn, html body .header .zh-ref-btn { display:none !important; } } /* 2. thẻ Mục tiêu của tôi */ @media (max-width:700px){ html[data-theme] body .zh-obj { flex-wrap:wrap; } html[data-theme] body .zh-obj > .zh-vthumb { flex:1 1 100%; width:100%; max-height:150px; } html[data-theme] body .zh-obj > .zh-ring { flex:none; } html[data-theme] body .zh-obj > div:not(.zh-vthumb):not(.zh-ring) { flex:1 1 180px; min-width:0; } } @media (max-width:420px){ html[data-theme] body .zh-obj > div:not(.zh-vthumb):not(.zh-ring) { flex:1 1 140px; } } /* 3. tab Hôm nay: lưới co được, máy tính bảng dọc xếp một cột */ html[data-theme] body .td-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } html[data-theme] body .td-grid > * { min-width:0; } @media (max-width:1000px){ html[data-theme] body .td-grid { grid-template-columns:minmax(0, 1fr); } } /* 4. mindmap toàn màn hình: không còn chiều cao tối thiểu 520px (xoay ngang) */ html[data-theme] body .zhmm.zhmm-full { min-height:0 !important; max-height:none !important; } /* 5. nút liên hệ nổi: màn thấp thì danh sách cuộn được */ @media (max-height:520px){ .zh-float-list { max-height:calc(100vh - 130px); overflow-y:auto; } } /* 6. Đo 5 bảng Tài chính: số dài không bị cắt */ @media (max-width:1100px){ html[data-theme] body .fin-tbl td.val { font-size:clamp(12px, 1.5vw, 16px) !important; overflow-wrap:anywhere; white-space:normal; } } html[data-theme] body .fin-tbl-wrap { overflow-x:auto; } /* nhãn mốc 10 NĂM … 1 NGÀY không đè lên ô nhập */ html[data-theme] body .cascade-period { min-width:76px; white-space:nowrap; } /* "Tôi đang ở đâu": nội dung chính được xuống dòng thay vì cắt còn 16 ký tự */ html[data-theme] body .cl-dc li { flex-wrap:wrap; } html[data-theme] body .cl-dc li span { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; } /* 7. cỡ chữ ô nhập (ZH_CO_CHU_O_NHAP_V2, sếp 05/10: nhỏ lại cho vừa mắt trên điện thoại / máy tính bảng / laptop): GỌN 14px trên mọi thiết bị. RIÊNG iPhone/iPad (Safari) giữ 16px, vì chữ nhỏ hơn thì Safari tự phóng to cả trang mỗi lần bấm vào ô (-webkit-touch-callout chỉ có trên iOS). Vùng bấm đủ lớn trên cảm ứng. */ @supports (-webkit-touch-callout: none) { @media (max-width:1100px){ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size:16px; } html[data-theme] body input:not([type=checkbox]):not([type=radio]), html[data-theme] body select { font-size:16px; } } } @supports not (-webkit-touch-callout: none) { html[data-theme] body :is(.cd-in, .hn-in, textarea.wiz-ta, #textInput, #aiQuestion, input.job-title, input.title) { font-size:14px; } } @media (pointer:coarse), (max-width:640px){ html[data-theme] body :is(button.del, .del-x, .zh-logout-btn) { min-width:40px; min-height:40px; } } /* 8. giao diện SÁNG (ZH_LAN3_V1B): màu chữ cố định (thiết kế cho nền tối) → bản đậm, đủ tương phản */ html[data-theme="light"] body :is([style^="color:#7ab4fc"], [style^="color: #7ab4fc"], [style*=" color:#7ab4fc"], [style*=" color: #7ab4fc"], [style*=";color:#7ab4fc"], [style*=";color: #7ab4fc"]) { color:#1d4ed8 !important; } html[data-theme="light"] body :is([style^="color:#a78bfa"], [style^="color: #a78bfa"], [style*=" color:#a78bfa"], [style*=" color: #a78bfa"], [style*=";color:#a78bfa"], [style*=";color: #a78bfa"]) { color:#6d28d9 !important; } html[data-theme="light"] body :is([style^="color:#f0b323"], [style^="color: #f0b323"], [style*=" color:#f0b323"], [style*=" color: #f0b323"], [style*=";color:#f0b323"], [style*=";color: #f0b323"]) { color:#92610a !important; } html[data-theme="light"] body :is([style^="color:#26de81"], [style^="color: #26de81"], [style*=" color:#26de81"], [style*=" color: #26de81"], [style*=";color:#26de81"], [style*=";color: #26de81"]) { color:#047857 !important; } html[data-theme="light"] body :is([style^="color:#8898bb"], [style^="color: #8898bb"], [style*=" color:#8898bb"], [style*=" color: #8898bb"], [style*=";color:#8898bb"], [style*=";color: #8898bb"]) { color:#5b6b8c !important; } html[data-theme="light"] body .cl-num { color:#fff; } html[data-theme="light"] body .btn-success { color:#fff; } /* 9. in ấn: không in thanh điều hướng và nút nổi */ @media print { header.header, .header, .zh-float, .lx-side, .sidebar, .nav-tabs, .no-print { display:none !important; } } /* ZH_MM_MOBILE_V1 (ZH_LAN4_V1B): mindmap trên điện thoại / máy tính bảng — toàn màn hình, ✕ thoát lớn, thu phóng cảm ứng */ .zhmm .zhmm-fsbtn, .zhmm .zhmm-xbtn, .zhmm .zhmm-tbtn { display:none; } /* toàn màn hình phủ TRỌN màn hình dù trang có luật #id { height:72vh !important } (Tài Chính, Rèn Trí Tuệ, Quản Trị, Hiệu Suất) */ html body #zhRTMindmap.zhmm-full, html body #zhtcMindmap.zhmm-full, html body #zhMindmap.zhmm-full, html body #qtMindmap.zhmm-full { height:auto !important; min-height:0 !important; max-height:none !important; } @media (max-width:900px), (pointer:coarse) { /* ngoài toàn màn hình: nút mở to ở góc trái dưới; vuốt dọc cuộn được trang; lời nhắc phím tắt không còn chỗ đứng */ html[data-theme] body .zhmm:not(.zhmm-full) .zhmm-fsbtn { display:inline-flex; align-items:center; gap:6px; position:absolute; left:10px; bottom:10px; z-index:6; height:44px; padding:0 16px; border-radius:22px; border:1px solid rgba(255,255,255,.55); background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; font-size:16px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.4); cursor:pointer; } html[data-theme] body .zhmm:not(.zhmm-full) .zhmm-hint { display:none; } html[data-theme] body .zhmm:not(.zhmm-full) .zhmm-canvas { touch-action:pan-y; } /* toàn màn hình: ✕ thoát luôn thấy; thanh công cụ ẩn (bật bằng nút Công cụ); thu phóng ở góc trái dưới */ html[data-theme] body .zhmm.zhmm-full .zhmm-xbtn { display:flex; align-items:center; justify-content:center; position:absolute; top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); z-index:9; width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.9); background:#dc2626; color:#fff; font-size:20px; line-height:1; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.5); cursor:pointer; } html[data-theme] body .zhmm.zhmm-full .zhmm-tbtn { display:flex; align-items:center; position:absolute; top:max(10px, env(safe-area-inset-top)); left:max(10px, env(safe-area-inset-left)); z-index:9; height:44px; padding:0 14px; border-radius:22px; border:1px solid rgba(255,255,255,.5); background:rgba(17,20,32,.92); color:#fff; font-size:16px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.45); cursor:pointer; } html[data-theme] body .zhmm.zhmm-full:not(.zhmm-tb-open) .zhmm-toolbar { display:none; } html[data-theme] body .zhmm.zhmm-full .zhmm-zoom { top:auto; right:auto; left:max(10px, env(safe-area-inset-left)); bottom:max(10px, env(safe-area-inset-bottom)); z-index:8; } html[data-theme] body .zhmm.zhmm-full .zhmm-zoom button { min-width:40px; height:40px; font-size:16px; } html[data-theme] body .zhmm.zhmm-full .zhmm-zoom [data-act=full] { display:none; } } /* ZH_MM_PRETTY_V1 (ZH_LAN5_V1): mindmap đẹp và thu hút — thẻ màu, nhãn nhánh, bảng chi tiết, nút viên thuốc */ html[data-theme] body .zhmm.zhmm-cards-light, html[data-theme] body .zhmm.zhmm-cards-light.zhmm-full { --zhmm-canvas:#f4f6fc; --zhmm-dot:rgba(30,45,90,.11); --zhmm-accent:#3b6cf6; --zhmm-ui:#ffffff; --zhmm-ui2:#eef2fb; --zhmm-line:#dde4f2; --zhmm-fg:#18223d; --zhmm-fg2:#5a6785; border-color:#dde4f2; box-shadow:0 12px 38px rgba(30,45,90,.13); } html[data-theme] body .zhmm.zhmm-cards-dark, html[data-theme] body .zhmm.zhmm-cards-dark.zhmm-full { --zhmm-canvas:#0d1226; --zhmm-dot:rgba(255,255,255,.08); --zhmm-accent:#9aaeff; --zhmm-ui:#141a33; --zhmm-ui2:#1b2342; --zhmm-line:#2a3560; --zhmm-fg:#eef1ff; --zhmm-fg2:#a3afd8; border-color:#2a3560; box-shadow:0 12px 38px rgba(0,0,0,.45); } .zhmm.zhmm-cards .zhmm-canvas { background-color:var(--zhmm-canvas); background-size:24px 24px, 100% 100%, 100% 100%; background-image:radial-gradient(var(--zhmm-dot) 1.3px, transparent 1.5px), radial-gradient(640px 420px at 6% 8%, rgba(91,124,250,.11), transparent 72%), radial-gradient(560px 400px at 96% 92%, rgba(242,169,59,.11), transparent 72%); } .zhmm.zhmm-cards-dark .zhmm-canvas { background-image:radial-gradient(var(--zhmm-dot) 1.3px, transparent 1.5px), radial-gradient(640px 420px at 6% 8%, rgba(123,149,255,.16), transparent 72%), radial-gradient(560px 400px at 96% 92%, rgba(255,122,166,.12), transparent 72%); } /* thẻ */ .zhmm.zhmm-cards .zhmm-node { border-radius:16px; transition:box-shadow .2s, transform .2s; } .zhmm.zhmm-cards .zhmm-cbody { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; } .zhmm.zhmm-cards .zhmm-crow { display:flex; align-items:center; gap:6px; } .zhmm.zhmm-cards .zhmm-meta { display:flex; flex-wrap:wrap; gap:6px; } .zhmm.zhmm-cards .zhmm-kick { font:800 11.5px/1 'Segoe UI',system-ui,sans-serif; letter-spacing:.14em; color:var(--c); color:color-mix(in srgb, var(--c) 78%, #000); } .zhmm.zhmm-cards-dark .zhmm-kick { color:var(--c); } .zhmm.zhmm-cards .zhmm-d0 { background:linear-gradient(135deg, #14213d 0%, #26407a 100%) !important; border-left:8px solid #ff9a3d !important; box-shadow:0 16px 38px rgba(20,33,61,.34); } .zhmm.zhmm-cards-dark .zhmm-d0 { background:linear-gradient(135deg, #1c2a5e 0%, #3a4fb0 100%) !important; box-shadow:0 16px 38px rgba(0,0,0,.5); } .zhmm.zhmm-cards .zhmm-d0 .zhmm-text { font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.3; } .zhmm.zhmm-cards .zhmm-d1 { border-left:7px solid var(--c) !important; box-shadow:0 10px 24px rgba(30,45,90,.12); background:linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #ffffff) 0%, color-mix(in srgb, var(--c) 6%, #ffffff) 100%) !important; } .zhmm.zhmm-cards-dark .zhmm-d1 { box-shadow:0 10px 24px rgba(0,0,0,.35); background:linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, #0d1226) 0%, color-mix(in srgb, var(--c) 10%, #0d1226) 100%) !important; } .zhmm.zhmm-cards .zhmm-d2 { border-left:6px solid var(--c) !important; box-shadow:0 8px 20px rgba(30,45,90,.10); } .zhmm.zhmm-cards-dark .zhmm-d2 { box-shadow:0 8px 20px rgba(0,0,0,.35); } .zhmm.zhmm-cards .zhmm-d1 .zhmm-text { font-weight:800; font-size:18px; letter-spacing:-.01em; line-height:1.35; max-width:300px; } .zhmm.zhmm-cards .zhmm-d2 .zhmm-text { font-weight:700; font-size:16px; line-height:1.35; } .zhmm.zhmm-cards .zhmm-node:not(.zhmm-d0):hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(30,45,90,.18); } .zhmm.zhmm-cards .zhmm-node.is-selected { box-shadow:0 0 0 3px var(--zhmm-canvas), 0 0 0 6px var(--c), 0 16px 34px rgba(30,45,90,.22); } .zhmm.zhmm-cards .zhmm-node.is-selected.zhmm-d0 { box-shadow:0 0 0 3px var(--zhmm-canvas), 0 0 0 6px #ff9a3d, 0 16px 38px rgba(20,33,61,.34); } /* chip */ .zhmm.zhmm-cards .zhmm-chip { background:rgba(30,45,90,.07); border:0; color:#44506f; font-size:13px; font-weight:800; padding:6px 12px; font-family:'Segoe UI',system-ui,sans-serif; } .zhmm.zhmm-cards-dark .zhmm-chip { background:rgba(255,255,255,.10); color:#d3daf7; } .zhmm.zhmm-cards .zhmm-d0 .zhmm-chip { background:rgba(255,255,255,.16); color:#fff; } .zhmm.zhmm-cards .zhmm-chip.zhmm-pct-lo, .zhmm.zhmm-cards .zhmm-chip.zhmm-due-over, .zhmm.zhmm-cards .zhmm-chip.zhmm-chip-warn { color:#d6304a; background:rgba(214,48,74,.10); } .zhmm.zhmm-cards .zhmm-chip.zhmm-pct-mid, .zhmm.zhmm-cards .zhmm-chip.zhmm-due-soon { color:#b8730a; background:rgba(242,169,59,.16); } .zhmm.zhmm-cards .zhmm-chip.zhmm-pct-hi, .zhmm.zhmm-cards .zhmm-chip.zhmm-due-done, .zhmm.zhmm-cards .zhmm-chip.zhmm-chip-ka { color:#0f8f6a; background:rgba(34,184,160,.13); } /* nút +N / − ở mép thẻ */ .zhmm.zhmm-cards .zhmm-toggle { min-width:28px; height:28px; border-radius:14px; border:2px solid var(--c); background:#ffffff; color:var(--c); font-size:13px; font-weight:800; line-height:24px; box-shadow:0 4px 12px rgba(30,45,90,.2); } .zhmm.zhmm-cards-dark .zhmm-toggle { background:#141a33; } .zhmm.zhmm-cards .zhmm-toggle:hover { background:var(--c); color:#fff; } .zhmm.zhmm-cards .zhmm-edges path { stroke-opacity:.92; } /* thanh công cụ và nút thu phóng dạng viên thuốc */ .zhmm .zhmm-toolbar { background:linear-gradient(180deg, var(--zhmm-ui), var(--zhmm-ui2)); } .zhmm .zhmm-toolbar button { border-radius:10px; } .zhmm .zhmm-toolbar button.zhmm-primary, .zhmm .zhmm-dbtns button.zhmm-primary { background:linear-gradient(135deg, #3b6cf6, #7c5cf6); color:#fff; border-color:transparent; } .zhmm .zhmm-toolbar button.zhmm-on { background:rgba(59,108,246,.14); border-color:rgba(59,108,246,.45); color:var(--zhmm-accent); } .zhmm .zhmm-back-btn { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13px; padding:0 14px; height:32px; border-radius:16px; background:linear-gradient(135deg, #3b82f6, #1d4ed8); color:#fff !important; border:none; box-shadow:0 3px 10px rgba(59,130,246,0.35); cursor:pointer; } .zhmm .zhmm-back-btn:hover { background:linear-gradient(135deg, #60a5fa, #2563eb); transform:translateY(-1px); } .zhmm.zhmm-full .zhmm-toolbar > .zhmm-group.zhmm-return-group { display:inline-flex !important; } .zhmm.zhmm-single .zhmm-toolbar > .zhmm-group.zhmm-return-group + .zhmm-group { display:none !important; } .zhmm .zhmm-zoom { background:transparent !important; border:0 !important; box-shadow:none !important; gap:8px; padding:0; } .zhmm .zhmm-zoom button { height:36px; min-width:36px; padding:0 14px; border-radius:18px; background:#ffffff; color:#1b2540; border:1px solid rgba(30,45,90,.12); box-shadow:0 5px 16px rgba(30,45,90,.20); font-size:14px; font-weight:800; } .zhmm .zhmm-zoom button:hover:not(:disabled) { background:#f3f6ff; color:#3b6cf6; transform:translateY(-1px); border-color:rgba(59,108,246,.4); } .zhmm.zhmm-full .zhmm-zoom [data-act=full] { background:linear-gradient(135deg, #ff8a3d, #ff6a2f) !important; color:#fff !important; border-color:transparent !important; font-weight:800; } .zhmm.zhmm-full .zhmm-zoom [data-act=full]:hover:not(:disabled) { background:linear-gradient(135deg, #ff9a52, #ff7a40) !important; color:#fff !important; } /* bảng chi tiết */ .zhmm .zhmm-detail { position:absolute; top:62px; right:14px; z-index:7; width:min(350px, calc(100% - 28px)); max-height:calc(100% - 78px); overflow:auto; padding:20px 20px 16px; border-radius:20px; background:var(--zhmm-ui); color:var(--zhmm-fg); border:1px solid var(--zhmm-line); border-top:6px solid var(--c, #5b7cfa); box-shadow:0 22px 56px rgba(20,33,61,.30); animation:zhmm-pop .2s ease-out; } @keyframes zhmm-pop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } } .zhmm .zhmm-dx { position:absolute; top:12px; right:12px; width:34px; height:34px; padding:0; border-radius:50%; border:1px solid var(--zhmm-line); background:var(--zhmm-ui2); color:var(--zhmm-fg); font-size:15px; font-weight:700; } .zhmm .zhmm-dtitle { font-size:20px; font-weight:800; line-height:1.3; letter-spacing:-.01em; padding-right:40px; margin:0 0 12px; } .zhmm .zhmm-dtag { display:inline-block; font-size:13px; font-weight:700; padding:4px 13px; border-radius:99px; border:1px solid var(--zhmm-line); color:var(--zhmm-fg2); background:var(--zhmm-ui2); } .zhmm .zhmm-dbody { margin-top:14px; font-size:15px; line-height:1.65; color:var(--zhmm-fg); } .zhmm .zhmm-dbody p { margin:0 0 8px; } .zhmm .zhmm-dbody ul { margin:6px 0 4px; padding-left:22px; } .zhmm .zhmm-dbody li { margin:5px 0; } .zhmm .zhmm-dbody li::marker { color:var(--c, #5b7cfa); font-size:1.15em; } .zhmm .zhmm-dempty { margin:14px 0 4px; font-size:14px; color:var(--zhmm-fg2); font-style:italic; } .zhmm .zhmm-dsub { margin:16px 0 8px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--zhmm-fg2); } .zhmm .zhmm-dkids { display:flex; flex-wrap:wrap; gap:6px; } .zhmm .zhmm-dkid { height:auto; min-height:32px; padding:6px 12px; border-radius:99px; border:1px solid var(--c, #5b7cfa); background:transparent; color:var(--zhmm-fg); font-size:13px; font-weight:700; white-space:normal; text-align:left; } .zhmm .zhmm-dkid:hover:not(:disabled) { background:var(--c, #5b7cfa); color:#fff; border-color:var(--c, #5b7cfa); } .zhmm .zhmm-dbtns { display:flex; gap:8px; margin-top:16px; } .zhmm .zhmm-dbtns button { height:36px; padding:0 16px; border-radius:10px; font-weight:700; border:1px solid var(--zhmm-line); background:var(--zhmm-ui2); color:var(--zhmm-fg); } .zhmm .zhmm-dta { display:block; width:100%; margin-top:14px; padding:10px 12px; border-radius:12px; border:1px solid var(--zhmm-line); background:var(--zhmm-ui2); color:var(--zhmm-fg); font:inherit; font-size:15px; line-height:1.55; resize:vertical; min-height:120px; } .zhmm .zhmm-dta:focus { outline:none; border-color:#3b6cf6; box-shadow:0 0 0 3px rgba(59,108,246,.18); } .zhmm .zhmm-lbl { display:inline; } /* toàn màn hình: không còn viền 1px quanh khung (phủ đúng 100%) */ html[data-theme] body .zhmm.zhmm-full { border:0 !important; box-shadow:none !important; } /* bảng chi tiết: sửa đồng bộ (tên, mô tả, thêm/xóa ý) */ .zhmm .zhmm-dtitle-in { display:block; width:100%; box-sizing:border-box; margin:0 0 10px; padding:0 42px 4px 0; background:transparent; border:0; border-bottom:2px dashed transparent; border-radius:6px 6px 0 0; color:inherit; font:inherit; font-size:20px; font-weight:800; line-height:1.3; letter-spacing:-.01em; resize:none; overflow:hidden; outline:none; cursor:text; } .zhmm .zhmm-dtitle-in:hover { border-bottom-color:var(--zhmm-line); } .zhmm .zhmm-dtitle-in:focus { border-bottom-color:var(--c, #5b7cfa); background:var(--zhmm-ui2); } .zhmm .zhmm-dbody.is-editable { cursor:text; border-radius:10px; margin-left:-6px; margin-right:-6px; padding:2px 6px; } .zhmm .zhmm-dbody.is-editable:hover { background:var(--zhmm-ui2); } .zhmm .zhmm-dwrap { flex-wrap:wrap; } .zhmm .zhmm-dbtns .zhmm-ddel { color:#d6304a; border-color:rgba(214,48,74,.4); background:rgba(214,48,74,.07); } .zhmm .zhmm-dbtns .zhmm-ddel:hover:not(:disabled) { background:#d6304a; color:#fff; border-color:#d6304a; } .zhmm .zhmm-dsaved { align-self:center; font-size:12.5px; font-weight:700; color:#0f8f6a; } /* ô tên / mô tả trong bảng: thắng luật ô nhập chung của trang (viền, nền, chiều cao) */ html[data-theme] body .zhmm .zhmm-dtitle-in { color:var(--zhmm-fg) !important; -webkit-text-fill-color:var(--zhmm-fg) !important; border:0 !important; border-bottom:2px dashed transparent !important; border-radius:6px 6px 0 0 !important; background:transparent !important; box-shadow:none !important; padding:0 42px 4px 0 !important; height:auto !important; min-height:0 !important; margin:0 0 10px !important; } html[data-theme] body .zhmm .zhmm-dtitle-in:hover { border-bottom-color:var(--zhmm-line) !important; } html[data-theme] body .zhmm .zhmm-dtitle-in:focus { border-bottom-color:var(--c, #5b7cfa) !important; background:var(--zhmm-ui2) !important; outline:none !important; } html[data-theme] body .zhmm .zhmm-dta { border:1px solid var(--zhmm-line) !important; border-radius:12px !important; background:var(--zhmm-ui2) !important; color:var(--zhmm-fg) !important; padding:10px 12px !important; min-height:120px !important; } html[data-theme] body .zhmm .zhmm-dta:focus { border-color:#3b6cf6 !important; outline:none !important; box-shadow:0 0 0 3px rgba(59,108,246,.18) !important; } /* Nút Lưu & Đồng bộ trong ô vuông chi tiết Mindmap */ .zhmm .zhmm-dsync-row { margin:12px 0 14px; } .zhmm .zhmm-btn-sync { width:100% !important; height:40px !important; padding:0 14px !important; background:linear-gradient(135deg, #2563eb, #1d4ed8) !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.2) !important; border-radius:10px !important; font-size:13.5px !important; font-weight:700 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; cursor:pointer !important; box-shadow:0 4px 14px rgba(37,99,235,0.35) !important; transition:all .2s ease !important; box-sizing:border-box !important; } .zhmm .zhmm-btn-sync:hover { background:linear-gradient(135deg, #3b82f6, #2563eb) !important; transform:translateY(-1px) !important; box-shadow:0 6px 18px rgba(37,99,235,0.45) !important; } .zhmm .zhmm-btn-sync:active { transform:translateY(0) !important; } .zhmm .zhmm-btn-sync.is-success { background:linear-gradient(135deg, #10b981, #059669) !important; box-shadow:0 4px 14px rgba(16,185,129,0.35) !important; } .zhmm .zhmm-dsync-msg { display:none; font-size:12px; color:#10b981; font-weight:700; margin-top:6px; text-align:center; } /* dòng gợi ý dưới bản đồ */ .zhmm.zhmm-cards-light .zhmm-hint { background:rgba(255,255,255,.94); color:#44506f; border:1px solid #dde4f2; box-shadow:0 6px 18px rgba(30,45,90,.12); } .zhmm.zhmm-cards-light .zhmm-hint b { color:#18223d; } .zhmm.zhmm-cards-dark .zhmm-hint { background:rgba(20,26,51,.92); color:#c3ccf0; border:1px solid #2a3560; } .zhmm.zhmm-cards-dark .zhmm-hint b { color:#fff; } /* ===== HỘP XEM ẢNH & CHI TIẾT ẢNH TRONG MINDMAP ===== */ .zhmm .zhmm-dimg-box { margin: 12px 0 14px; padding: 8px; background: var(--zhmm-ui2, rgba(255,255,255,0.04)); border: 1px solid var(--zhmm-line, rgba(255,255,255,0.1)); border-radius: 12px; } .zhmm .zhmm-dimg-thumb-wrap { position: relative; width: 100%; max-height: 180px; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; } .zhmm .zhmm-dimg-thumb { width: 100%; max-height: 180px; object-fit: cover; display: block; transition: transform .2s ease, filter .2s ease; } .zhmm .zhmm-dimg-thumb-wrap:hover .zhmm-dimg-thumb { transform: scale(1.02); filter: brightness(0.92); } .zhmm .zhmm-dimg-zoom-hint { position: absolute; bottom: 6px; right: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,0.72); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none; } .zhmm .zhmm-dimg-actions { display: flex; gap: 6px; margin-top: 8px; } .zhmm .zhmm-dimg-btn { flex: 1; height: 32px !important; padding: 0 8px !important; font-size: 12px !important; font-weight: 700 !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; border: 1px solid var(--zhmm-line) !important; background: var(--zhmm-ui) !important; color: var(--zhmm-fg) !important; transition: all .15s ease !important; } .zhmm .zhmm-dimg-btn:hover { filter: brightness(1.15); transform: translateY(-1px); } .zhmm .zhmm-dimg-btn.zhmm-primary { background: linear-gradient(135deg, #3b6cf6, #7c5cf6) !important; color: #fff !important; border-color: transparent !important; } .zhmm .zhmm-dimg-btn.zhmm-ddel { color: #ef4444 !important; border-color: rgba(239,68,68,0.3) !important; background: rgba(239,68,68,0.08) !important; flex: 0 0 auto; } .zhmm .zhmm-dimg-btn.zhmm-ddel:hover { background: #ef4444 !important; color: #fff !important; } /* Lightbox xem ảnh hiện đại toàn màn hình */ .zhmm-imgview { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; background: rgba(8, 11, 20, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; user-select: none; animation: zhmmFadeIn .16s ease-out; } @keyframes zhmmFadeIn { from { opacity: 0; } to { opacity: 1; } } .zhmm-iv-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: rgba(15, 23, 42, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .zhmm-iv-title { color: #f8fafc; font-size: 14.5px; font-weight: 700; font-family: system-ui, -apple-system, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; } .zhmm-iv-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .zhmm-iv-btn { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s ease; display: inline-flex; align-items: center; justify-content: center; } .zhmm-iv-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .zhmm-iv-close { background: rgba(239, 68, 68, 0.25); color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); padding: 5px 14px; } .zhmm-iv-close:hover { background: #ef4444; color: #fff; } .zhmm-iv-body { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 16px; cursor: grab; position: relative; } .zhmm-iv-body.is-dragging { cursor: grabbing; } .zhmm-iv-img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); transition: transform .08s cubic-bezier(0.2, 0, 0, 1); transform-origin: center center; cursor: default; } /* điện thoại / máy tính bảng */ @media (max-width:900px), (pointer:coarse) { .zhmm .zhmm-lbl { display:none; } .zhmm .zhmm-detail { top:auto; bottom:68px; left:10px; right:10px; width:auto; max-height:46%; border-radius:18px; } html[data-theme] body .zhmm.zhmm-full:not(.zhmm-tb-open) .zhmm-views { display:none; } /* màn dọc: bản đồ phủ 100%, không còn dải tab phía trên */ } @media (max-width:420px) { .zhmm.zhmm-cards .zhmm-d1 .zhmm-text { max-width:220px; } .zhmm.zhmm-cards .zhmm-text { max-width:200px; } } @media print { .zhmm .zhmm-detail { display:none !important; } } /* ===================================================================== GIAO DIỆN SÁNG CAO CẤP (Pure Crystal White & Royal Sapphire Navy) Giữ nguyên bản sắc xanh Navy gốc nhưng tinh tế, hiện đại, sang trọng hơn ===================================================================== */ html[data-theme="light"] { color-scheme:light; --text-sub:#475569; } html[data-theme="light"] body { background:var(--lx-bg) !important; color:#0f172a !important; } html[data-theme="light"] ::selection { background:rgba(37,99,235,.20) !important; color:#0f172a !important; } /* Sticky bar trên cùng ở Rèn Trí Tuệ & Quản Trị: kính mờ sạch bóng, hết vệt đen */ html[data-theme="light"] body .bar { background:rgba(255,255,255,.94) !important; border-bottom:1px solid rgba(37,99,235,.12) !important; box-shadow:0 4px 20px -2px rgba(30,58,138,.05) !important; } html[data-theme="light"] body .bar input.title { background:#ffffff !important; border-color:rgba(37,99,235,.20) !important; color:#0f172a !important; box-shadow:0 1px 3px rgba(0,0,0,.04) !important; } html[data-theme="light"] body .bar input.title:focus { border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.15) !important; } /* Thẻ, Khung, Wizard, Bảng: Trắng tinh thể với viền xanh khói siêu mảnh và bóng mềm */ html[data-theme="light"] body .card, html[data-theme="light"] body .panel, html[data-theme="light"] body .streamcard, html[data-theme="light"] body .war-card, html[data-theme="light"] body .diag-item, html[data-theme="light"] body .preview, html[data-theme="light"] body .drawer, html[data-theme="light"] body .wiz, html[data-theme="light"] body .scard, html[data-theme="light"] body .tile, html[data-theme="light"] body .up-box, html[data-theme="light"] body .modal, html[data-theme="light"] body .modal-box { background:#ffffff !important; border:1px solid rgba(37,99,235,.12) !important; box-shadow:0 8px 24px -4px rgba(30,58,138,.06), 0 2px 6px -1px rgba(30,58,138,.03) !important; } html[data-theme="light"] body .card[onclick]:hover, html[data-theme="light"] body .scard:hover { border-color:rgba(37,99,235,.35) !important; box-shadow:0 12px 30px -4px rgba(30,58,138,.10) !important; } /* Chuẩn hóa toàn bộ ô nhập liệu & Form controls ở nền sáng: nền trắng/sáng, chữ đen than sắc nét, viền rõ */ html[data-theme="light"] body input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="light"] body select, html[data-theme="light"] body textarea, html[data-theme="light"] body .rgoal, html[data-theme="light"] body .goal-in, html[data-theme="light"] body .input-row input { background:#ffffff !important; border:1px solid #cbd5e1 !important; color:#0f172a !important; border-radius:8px !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.03) !important; } html[data-theme="light"] body input:focus, html[data-theme="light"] body select:focus, html[data-theme="light"] body textarea:focus, html[data-theme="light"] body .rgoal:focus, html[data-theme="light"] body .goal-in:focus { background:#ffffff !important; border-color:#2563eb !important; outline:none !important; box-shadow:0 0 0 3px rgba(37,99,235,.15) !important; color:#0f172a !important; } html[data-theme="light"] body input::placeholder, html[data-theme="light"] body textarea::placeholder { color:#64748b !important; } /* Dòng dữ liệu & Bảng ở nền sáng */ html[data-theme="light"] body .resrow { border-bottom:1px solid #e2e8f0 !important; color:#0f172a !important; } html[data-theme="light"] body .resrow .ricon { background:#f1f5f9 !important; border:1px solid #e2e8f0 !important; } html[data-theme="light"] body .resrow .rname { color:#0f172a !important; font-weight:600 !important; } html[data-theme="light"] body .resrow .rscore { color:#4338ca !important; font-weight:700 !important; } html[data-theme="light"] body .bar { background:#e2e8f0 !important; } html[data-theme="light"] body table th { color:#475569 !important; border-bottom:2px solid #e2e8f0 !important; } html[data-theme="light"] body table td { color:#0f172a !important; border-bottom:1px solid #e2e8f0 !important; } html[data-theme="light"] body tr:hover td { background:#f8fafc !important; } html[data-theme="light"] body .pill, html[data-theme="light"] body .hint, html[data-theme="light"] body .sub { color:#475569 !important; } html[data-theme="light"] body .card .label { color:#475569 !important; font-weight:600 !important; } html[data-theme="light"] body .tag { background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#334155 !important; } html[data-theme="light"] body .badge.off { background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#64748b !important; } html[data-theme="light"] body .chip { background:#f8fafc !important; border-color:#cbd5e1 !important; color:#334155 !important; } html[data-theme="light"] body .chip.on { background:#2563eb !important; color:#ffffff !important; border-color:#2563eb !important; } html[data-theme="light"] body .wiz-step { color:#1d4ed8 !important; } html[data-theme="light"] body .wiz-ta { background:#f8fafc !important; border:1px solid #cbd5e1 !important; color:#0f172a !important; } html[data-theme="light"] body .wiz-ta:focus { background:#ffffff !important; border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.15) !important; } html[data-theme="light"] body .wiz-ex { background:rgba(37,99,235,.06) !important; border-left:3.5px solid #2563eb !important; color:#1e40af !important; } html[data-theme="light"] body .wiz-tip { background:#f1f5f9 !important; border-color:#cbd5e1 !important; color:#334155 !important; } /* Switch chế độ & Subtabs: gradient xanh sapphire tinh xảo */ html[data-theme="light"] body .modesw { background:#e2e8f0 !important; border-color:rgba(37,99,235,.18) !important; } html[data-theme="light"] body .modesw button { color:#475569 !important; } html[data-theme="light"] body .subtabs button { background:#ffffff !important; border:1px solid rgba(37,99,235,.15) !important; color:#475569 !important; } html[data-theme="light"] body .subtabs button:hover { background:#f8faff !important; border-color:#2563eb !important; color:#1d4ed8 !important; } html[data-theme="light"] body .subtabs button.on, html[data-theme="light"] body .modesw button.on, html[data-theme="light"] body .catchip.on { background:linear-gradient(135deg,#2563eb,#1d4ed8) !important; color:#ffffff !important; border-color:transparent !important; box-shadow:0 4px 14px rgba(37,99,235,.28) !important; } html[data-theme="light"] body .catchip { background:#ffffff !important; border-color:rgba(37,99,235,.15) !important; color:#475569 !important; } html[data-theme="light"] body .tprog-bar { background:#e2e8f0 !important; } html[data-theme="light"] body .tprog-bar i { background:linear-gradient(90deg,#059669,#2563eb) !important; } /* Nút bấm chính: gradient xanh sapphire quý phái */ html[data-theme="light"] body .btn.pri, html[data-theme="light"] body .btn-primary, html[data-theme="light"] body .btn.primary, html[data-theme="light"] body .lx-tools .btn.primary { background:linear-gradient(135deg,#2563eb,#1d4ed8) !important; color:#ffffff !important; box-shadow:0 4px 14px rgba(37,99,235,.28) !important; } html[data-theme="light"] body .btn.pri:hover, html[data-theme="light"] body .btn-primary:hover, html[data-theme="light"] body .btn.primary:hover, html[data-theme="light"] body .lx-tools .btn.primary:hover { background:linear-gradient(135deg,#1d4ed8,#1e40af) !important; color:#ffffff !important; filter:brightness(1.06); box-shadow:0 6px 20px rgba(37,99,235,.38) !important; } html[data-theme="light"] body .btn.gho, html[data-theme="light"] body .btn-ghost { background:#ffffff !important; border:1px solid rgba(37,99,235,.18) !important; color:#1e293b !important; } html[data-theme="light"] body .btn.gho:hover, html[data-theme="light"] body .btn-ghost:hover { background:#f8faff !important; border-color:#2563eb !important; color:#1d4ed8 !important; } /* Sidebar & Navigation */ html[data-theme="light"] body .side, html[data-theme="light"] body .sidebar { background:#f8faff !important; border-right:1px solid rgba(37,99,235,.10) !important; } html[data-theme="light"] body .nav button { color:#334155 !important; } html[data-theme="light"] body .nav button:hover { background:rgba(37,99,235,.07) !important; color:#0f172a !important; } html[data-theme="light"] body .nav button.on { background:linear-gradient(90deg, rgba(37,99,235,.12), rgba(37,99,235,.02)) !important; color:#1d4ed8 !important; border-left:3px solid #2563eb !important; font-weight:700 !important; } /* Header & Brand */ html[data-theme="light"] body .header { background:#ffffff !important; border-bottom:1px solid rgba(37,99,235,.12) !important; box-shadow:0 4px 20px rgba(30,58,138,.05) !important; } html[data-theme="light"] body .header .nav-links-center a.nav-btn[class*="nav-btn-"] { color:#334155 !important; } html[data-theme="light"] body .header .nav-links-center a.nav-btn[class*="nav-btn-"]:hover { background:rgba(37,99,235,.08) !important; color:#1d4ed8 !important; } html[data-theme="light"] body .header .nav-links-center a.nav-btn[class*="nav-btn-"].active { background:linear-gradient(135deg,#2563eb,#1d4ed8) !important; color:#ffffff !important; box-shadow:0 4px 14px rgba(37,99,235,.28) !important; } /* Tiêu đề & Nhãn: xanh sapphire hoàng gia sắc sảo */ html[data-theme="light"] body .sectit, html[data-theme="light"] body .sidebar-title, html[data-theme="light"] body .card-title { color:#1d4ed8 !important; } html[data-theme="light"] body .sectit::before { background:#1d4ed8 !important; } html[data-theme="light"] body .brand-title, html[data-theme="light"] body .brand-text .brand-title { color:#f2b91e !important; -webkit-text-fill-color:#f2b91e !important; font-weight:800 !important; letter-spacing:.06em !important; } /* ZH_COMPAT_V1 */ /* ===================================================================== TỐI ƯU HIỆU NĂNG GIAO DIỆN (SMOOTH 60FPS & FAST INTERACTION) Khử giật lag cuộn trang, khử trễ phản hồi cảm ứng / click, tối ưu GPU ===================================================================== */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, a, input, select, textarea, [role="button"] { touch-action: manipulation; } .wrap, .side, .main, .content, .lx-wrap, .lx-side, .lx-content { -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; } canvas, svg, .zh-mm-mount, .zhmm { transform: translateZ(0); } .panel, .card, .streamcard, .chartbox { contain: layout style; } .chartbox canvas { will-change: transform; } /* ===================================================================== CHUẨN HÓA CĂN LỀ TRÁI CÁC HỘP THOẠI MODAL / FORM NHẬP LIỆU (UX DỄ ĐỌC) ===================================================================== */ html[data-theme] body :is(.zh-modal, .modal, .modal-box, .zh-modal-box:not(.zh-confirm-box):not(.zh-alert-box), .zh-modal-hd, .zh-modal-sub, .zh-modal-bd, .zh-wz, .zh-wz-focus, .zh-wz-step-box, .zh-wz-step-hd, .zh-wz-subtip) { text-align: left !important; } html[data-theme] body :is(.zh-modal, .modal, .zh-modal-box, .zh-modal-bd, .zh-wz) label { text-align: left !important; } html[data-theme] body :is(.zh-modal, .modal, .zh-modal-box) :is(select, input:not([type=checkbox]):not([type=radio]):not(.zh-nk-inp)) { text-align: left; } /* ===================================================================== CHUẨN HÓA ĐỘ TƯƠNG PHẢN GIAO DIỆN: NỀN SÁNG CHỮ TỐI & NỀN TỐI CHỮ SÁNG ===================================================================== */ /* 1. Biến màu chữ chuẩn đa theme */ html[data-theme="light"]:root { --fg: #0f172a; --fg2: #334155; --text-sub: #475569; } html:root { --fg: #eaf0ff; --fg2: #cbd5e1; } /* 2. Nền tối chữ sáng: Toàn bộ nút/thẻ có nền sẫm gradient xanh/nổi bật bắt buộc chữ trắng */ html[data-theme] body :is( .plan-btn.primary, .billing-opt.active, .popular-tag, #mgTrialBtn, .btn-copy:hover ) { color: #ffffff !important; } /* 3. Nền sáng chữ tối: Các đoạn text có màu chữ pastel nền tối khi sang nền sáng đổi sang màu đậm tương phản cao */ html[data-theme="light"] body :is( [style*="color:var(--fg,#eaf0ff)"], [style*="color: var(--fg,#eaf0ff)"], [style*="color:#eaf0ff"], [style*="color: #eaf0ff"] ) { color: #0f172a !important; } html[data-theme="light"] body :is( [style*="color:var(--fg2,#cbd5e1)"], [style*="color: var(--fg2,#cbd5e1)"], [style*="color:#cbd5e1"], [style*="color: #cbd5e1"] ) { color: #334155 !important; } html[data-theme="light"] body :is( [style*="color:#60a5fa"], [style*="color: #60a5fa"], [style*="color:#93c5fd"], [style*="color: #93c5fd"], [style*="color:#6cb6ff"], [style*="color: #6cb6ff"] ) { color: #1d4ed8 !important; } html[data-theme="light"] body :is( [style*="color:#34d399"], [style*="color: #34d399"] ) { color: #047857 !important; } html[data-theme="light"] body :is( [style*="color:#e8b84b"], [style*="color: #e8b84b"], [style*="color:#e9c46a"], [style*="color: #e9c46a"], [style*="color:#d8a657"], [style*="color: #d8a657"], [style*="color:var(--gold2,#e8b84b)"], [style*="color: var(--gold2,#e8b84b)"] ) { color: #b45309 !important; } html[data-theme="light"] body :is( [style*="color:#8898bb"], [style*="color: #8898bb"], [style*="color:#8b98a8"], [style*="color: #8b98a8"] ) { color: #475569 !important; } /* 4. Khối viền mờ màu trắng trên nền sáng chuyển sang nền và viền thẻ chuẩn */ html[data-theme="light"] body :is( div[style*="background:rgba(255,255,255,0.03)"], div[style*="background: rgba(255,255,255,0.03)"] ) { background: var(--surface2) !important; border-color: var(--border) !important; } /* 5. Thẻ thống kê & nhãn phụ trên nền sáng */ html[data-theme="light"] body :is(.rt-stat span, .rt-stat.fruit span, .rt-rv span[style*="color:var(--mut)"]) { color: #334155 !important; } /* 6. Hộp thông tin mã QR trong mua gói: chữ tương phản sắc nét */ .qr-frame .qr-status-badge.pending { color: #92400e !important; background: #fef3c7 !important; border-color: #f59e0b !important; } .qr-frame .qr-status-badge.success { color: #065f46 !important; background: #d1fae5 !important; border-color: #10b981 !important; } .qr-frame .bank-info-box { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } .qr-frame .bank-row { border-bottom-color: #e2e8f0 !important; } /* iPhone/iPad tự phóng to cả trang khi chạm vào ô nhập có chữ nhỏ hơn 16px (rồi không tự thu lại → khách thấy màn hình lệch, khó chỉnh số). Trên máy cảm ứng và màn hẹp, mọi ô nhập đều giữ chữ 16px. Bỏ qua ô tích, nút chọn, thanh kéo, ô màu, ô tệp. */ @media (max-width: 768px), (hover: none) and (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]), select, textarea { font-size: 16px !important; } }