/* ========================================================================== Nền tảng — Hệ thiết kế SYND: matte black + một màu nhấn vàng đồng Nguyên tắc: KHÔNG dùng màu thứ hai để trang trí. Thành công, cảnh báo, nhấn mạnh đều dùng chung sắc vàng; chỉ lỗi mới được dùng đỏ trầm. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Thuộc tính hidden của HTML phải luôn thắng. Mặc định nó chỉ là `display: none` với độ ưu tiên rất thấp, nên bất kỳ class nào đặt `display: flex/grid/block` cũng ghi đè được — phần tử tưởng đã ẩn vẫn nằm đó và nuốt mọi cú bấm. Đã dính đúng lỗi này ở lớp phủ "đưa cho người ta xem". */ [hidden] { display: none !important; } :root { /* ── Nền ── */ --bg: #0A0A0A; --bg-2: #111111; --card: #1A1A1A; --card-hover: #222222; --surface: #222222; --input: #151515; --modal: #0E0E0E; /* ── Màu nhấn duy nhất ── */ --accent: #C9A55C; --accent-hover: #B8845A; --accent-dim: rgb(201 165 92 / 15%); --accent-line: rgb(201 165 92 / 30%); --accent-glow: rgb(201 165 92 / 8%); /* ── Chữ ── */ --text: #EEEEEE; --text-2: #AAAAAA; --text-3: #777777; --text-in: #0A0A0A; /* ── Viền ── */ --line: #2E2E2E; --line-soft: #232323; --line-lit: #3C3C3C; /* ── Trạng thái: chỉ lỗi mới lệch khỏi vàng ── */ --ok: var(--accent); --warn: var(--accent); --err: #C45C5C; --err-bg: rgb(196 92 92 / 14%); /* ── Hình khối ── */ --r: 12px; --r-sm: 8px; --r-xs: 6px; --r-pill: 999px; --sh-sm: 0 1px 3px rgb(0 0 0 / 50%); --sh: 0 4px 12px rgb(0 0 0 / 60%); --sh-lg: 0 8px 32px rgb(0 0 0 / 70%); --sh-accent: 0 4px 16px rgb(201 165 92 / 22%); /* ── Chữ ── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-cn: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Thang chữ nhỏ gọn kiểu SYND */ --fs-micro: 9px; --fs-meta: 10px; --fs-body: 11px; --fs-md: 12px; --fs-lg: 14px; --fs-xl: 17px; --fs-2xl: 22px; --fs-3xl: 28px; --sidebar-w: 226px; --topbar-h: 48px; --content-max: 980px; color-scheme: dark; } /* Trên điện thoại phải nới cỡ chữ lên. Thang chữ dày đặc kiểu SYND hợp màn hình lớn ngồi gần; cầm điện thoại trên tay, đi ngoài đường, ánh nắng chói thì 9px là không đọc nổi. Tối thiểu 11px. */ @media (max-width: 820px), (pointer: coarse) { :root { --fs-micro: 11px; --fs-meta: 12px; --fs-body: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 30px; } } /* Quy tắc phóng to vùng chạm nằm ở CUỐI views.css — xem ghi chú ở đó. Đặt tại base.css sẽ bị components.css và views.css (load sau) ghi đè mất. */ html { font-family: var(--font); font-size: var(--fs-md); color: var(--text); background-color: var(--bg); /* Nền có chiều sâu: một vầng sáng vàng rất mờ ở trên + hạt nhiễu mịn. Đặt ở để không vẽ lại mỗi lần đổi trang. */ background-image: radial-gradient(ellipse 120vw 70vh at 50% 0%, var(--accent-glow) 0%, transparent 58%), linear-gradient(180deg, rgb(24 18 10 / 40%) 0%, rgb(8 8 8 / 0%) 50%, rgb(0 0 0 / 30%) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); background-size: cover, cover, 300px 300px; background-repeat: no-repeat, no-repeat, repeat; background-blend-mode: screen, normal, overlay; background-attachment: fixed; -webkit-text-size-adjust: 100%; } body { background: transparent; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); } h4 { font-size: var(--fs-body); } p { margin-bottom: .7em; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; transition: color .2s; } a:hover { color: var(--accent-hover); } ul, ol { padding-left: 1.15em; } li { margin-bottom: .25em; } code { font-family: var(--font-mono); font-size: .92em; padding: .1em .38em; border-radius: var(--r-xs); background: var(--input); border: 1px solid var(--line-soft); color: var(--accent); } kbd { font-family: var(--font-mono); font-size: var(--fs-micro); padding: .15em .4em; border-radius: var(--r-xs); background: var(--input); border: 1px solid var(--line); color: var(--text-3); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } /* Chữ Hán dùng font riêng cho nét chuẩn */ [lang="zh-CN"] { font-family: var(--font-cn); font-feature-settings: 'liga' 0; } /* Icon SVG — luôn thừa kế màu chữ, căn giữa theo dòng */ .ic { display: inline-block; vertical-align: -0.18em; flex: none; } .ic--filled { fill: currentColor; } ::selection { background: rgb(201 165 92 / 30%); color: var(--accent); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--line-lit); } *:focus-visible { outline: 2px solid rgb(201 165 92 / 50%); outline-offset: 2px; border-radius: var(--r-xs); } /* Nhấn nút: phản hồi bằng độ sáng, dùng chung toàn app */ button:active:not(:disabled), a:active { filter: brightness(1.15); } .muted { color: var(--text-2); } .dim { color: var(--text-3); } /* Nhãn phần — chữ hoa nhỏ, giãn chữ, kiểu SYND */ .eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes scaleIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } .page-in { animation: fadeUp .28s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }