/* app.css — Component layer + token theme cho CEO OS. * * Đi kèm /js/theme.js. File này định nghĩa: * 1. Token màu dạng CSS variable (đổi theo theme sáng/tối). * 2. Bộ component dùng lại: card, KPI, nút, badge, bảng, empty/loading. * 3. Component editorial cho trang "Bản tin sáng" (hero, priority, ticker). * * THEME: * • Mặc định = SÁNG (mọi trang dữ liệu). * • = TỐI (trang Bản tin sáng). Mọi component tự đổi màu * nhờ override biến ở [data-theme="dark"] — không phải viết lại class. * * Màu nhấn = GOLD (#C9A227). Màu ngữ nghĩa giữ nguyên ý nghĩa ở cả 2 theme. */ /* ── TOKEN: THEME SÁNG (mặc định, toàn hệ thống) ────────── * Redesign 2026-06-16: nền sáng & thoáng, nhấn XANH ĐIỆN (#3B82F6). * Tên biến --c-gold* GIỮ NGUYÊN để không phải sửa ~30 chỗ tham chiếu; * giá trị nay là xanh điện (xem chú thích). */ :root { --c-surface: #F6F8FB; /* nền trang — trắng hơi xanh mát */ --c-card: #ffffff; --c-card-2: #F1F5F9; --c-border: #E6EBF2; --c-text: #0F1729; /* gần đen — tương phản cao, hết mỏi mắt */ --c-text-mut: #64748B; /* Nhấn = XANH ĐIỆN (tên biến gold giữ cho tương thích) */ --c-gold: #3B82F6; --c-gold-soft: #EFF6FF; --c-gold-hover: #2563EB; --c-gold-fg: #1D4ED8; /* chữ nhấn trên nền sáng (đủ tương phản) */ --c-gold-accent: #1D4ED8; /* màu link/nhấn theo theme */ --c-success: #16a34a; --c-success-soft: #dcfce7; --c-success-fg: #166534; --c-warning: #d97706; --c-warning-soft: #fef3c7; --c-warning-fg: #92400e; --c-danger: #dc2626; --c-danger-soft: #fee2e2; --c-danger-fg: #991b1b; --c-info: #2563eb; --c-info-soft: #dbeafe; --c-info-fg: #1e40af; /* Font tiêu đề/số lớn */ --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; --radius: 1rem; /* bo góc to hơn — hiện đại, mềm mại */ --shadow: 0 1px 2px 0 rgba(15,23,42,.04), 0 2px 8px -2px rgba(15,23,42,.06); --shadow-hover: 0 8px 24px -6px rgba(59,130,246,.14), 0 4px 10px -4px rgba(15,23,42,.08); } /* ── TOKEN: THEME TỐI (bản tin sáng) ──────────────────── */ [data-theme="dark"] { --c-surface: #100e0a; --c-card: #1a1712; --c-card-2: #221e18; --c-border: #2c2820; --c-text: #efeae0; --c-text-mut: #9a948a; --c-gold-accent: #E5C76B; /* nhấn sáng hơn để đọc được trên nền tối */ /* màu ngữ nghĩa: làm tươi hơn 1 chút + nền soft tối lại cho dễ nhìn */ --c-success-soft: rgba(22,163,74,.16); --c-success-fg: #4ade80; --c-warning-soft: rgba(217,119,6,.18); --c-warning-fg: #fbbf24; --c-danger-soft: rgba(220,38,38,.18); --c-danger-fg: #f87171; --c-info-soft: rgba(37,99,235,.18); --c-info-fg: #60a5fa; --shadow: 0 1px 2px 0 rgba(0,0,0,.4), 0 1px 3px 0 rgba(0,0,0,.5); --shadow-hover: 0 8px 24px -4px rgba(0,0,0,.55); } /* ── Base ─────────────────────────────────────────────── */ html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } body { background: var(--c-surface); color: var(--c-text); transition: background .2s ease, color .2s ease; } [x-cloak] { display: none !important; } /* Tiêu đề & số lớn dùng font display (Plus Jakarta Sans) — trẻ trung, nổi bật */ h1, h2, h3, .page-title, .section-title, .kpi-value, .kpi-metric, .brief-headline, .font-display { font-family: var(--font-display); letter-spacing: -0.015em; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a352b; } ::-webkit-scrollbar-track { background: transparent; } * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .font-mono, .eyebrow { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; } /* ── Khung trang chuẩn ────────────────────────────────── */ .page-head { margin-bottom: 1.5rem; } .page-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; } .page-desc { font-size: 0.875rem; line-height: 1.375rem; color: var(--c-text-mut); margin-top: 0.25rem; } .section-title { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--c-text); } /* Nhãn micro in hoa giãn chữ (eyebrow) — chữ ký editorial */ .eyebrow { font-size: .6875rem; letter-spacing: .18em; font-weight: 600; text-transform: uppercase; color: var(--c-text-mut); } .eyebrow-gold { color: var(--c-gold-accent); } /* ── Card ─────────────────────────────────────────────── */ .card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); } .card-pad { padding: 1.25rem; } .card-hover { transition: box-shadow .2s ease, transform .2s ease; } .card-hover:hover { box-shadow: var(--shadow-hover); } /* ── KPI tile ─────────────────────────────────────────── */ .kpi { background:var(--c-card); border:1px solid var(--c-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem; transition:box-shadow .2s ease; } .kpi:hover { box-shadow: var(--shadow-hover); } .kpi-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.75rem; } .kpi-icon { width:2.5rem; height:2.5rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:1.125rem; background:var(--c-card-2); } .kpi-value { font-size:1.5rem; line-height:2rem; font-weight:700; color:var(--c-text); letter-spacing:-0.01em; font-variant-numeric: tabular-nums; } .kpi-label { font-size:.75rem; line-height:1rem; color:var(--c-text-mut); margin-top:.25rem; } /* ── Badge / trạng thái ───────────────────────────────── */ .badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; font-weight:600; padding:.125rem .5rem; border-radius:9999px; line-height:1.25rem; } .badge-success { background:var(--c-success-soft); color:var(--c-success-fg); } .badge-warning { background:var(--c-warning-soft); color:var(--c-warning-fg); } .badge-danger { background:var(--c-danger-soft); color:var(--c-danger-fg); } .badge-info { background:var(--c-info-soft); color:var(--c-info-fg); } .badge-gold { background:var(--c-gold-soft); color:var(--c-gold-fg); } .badge-neutral { background:rgba(148,163,184,.18); color:var(--c-text-mut); } /* ── Nút ──────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; font-size:.875rem; font-weight:600; padding:.5rem .875rem; border-radius:.5rem; border:1px solid transparent; cursor:pointer; transition:background .15s ease, border-color .15s ease; } .btn:disabled { opacity:.55; cursor:not-allowed; } /* Nút chính = xanh điện fill + chữ trắng (tương phản ~4.6:1) */ .btn-primary { background:var(--c-gold); color:#ffffff; } .btn-primary:hover:not(:disabled) { background:var(--c-gold-hover); } .btn-secondary { background:var(--c-card); color:var(--c-text); border-color:var(--c-border); } .btn-secondary:hover:not(:disabled) { background:var(--c-card-2); } .btn-danger { background:var(--c-danger); color:#fff; } .btn-danger:hover:not(:disabled) { background:#b91c1c; } .btn-ghost { background:transparent; color:var(--c-text-mut); } .btn-ghost:hover:not(:disabled) { background:var(--c-card-2); } .btn-sm { font-size:.75rem; padding:.25rem .625rem; } /* ── Bảng ─────────────────────────────────────────────── */ .tbl { width:100%; border-collapse:collapse; font-size:.875rem; } .tbl thead th { text-align:left; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--c-text-mut); padding:.625rem .875rem; border-bottom:1px solid var(--c-border); background:var(--c-card); } .tbl tbody td { padding:.75rem .875rem; border-bottom:1px solid var(--c-border); color:var(--c-text); } .tbl tbody tr:hover { background:var(--c-card-2); } .tbl tbody tr:last-child td { border-bottom:none; } .tbl .num { text-align:right; font-variant-numeric: tabular-nums; } /* ── Empty state ──────────────────────────────────────── */ .empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3rem 1.5rem; color:var(--c-text-mut); } .empty-icon { font-size:2rem; margin-bottom:.75rem; opacity:.6; } .empty-title { font-size:.9375rem; font-weight:600; color:var(--c-text); } .empty-desc { font-size:.8125rem; margin-top:.25rem; max-width:24rem; } /* ── Loading skeleton ─────────────────────────────────── */ .skeleton { background:linear-gradient(90deg,var(--c-card-2) 25%,var(--c-border) 37%,var(--c-card-2) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; border-radius:.375rem; } @keyframes skeleton { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } } /* ── Tiện ích nhỏ ─────────────────────────────────────── */ .num-tabular { font-variant-numeric: tabular-nums; } .divider { height:1px; background:var(--c-border); border:0; } /* ═══════════════════════════════════════════════════════ EDITORIAL — component riêng cho trang "Bản tin sáng" (chỉ dùng trên nền tối; an toàn nếu xuất hiện ở nền sáng) ═══════════════════════════════════════════════════════ */ /* Hero: vùng tiêu đề bản tin khổ lớn */ .brief-hero { padding: 2rem 2.25rem; } .brief-headline { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); } .brief-headline .accent { color: var(--c-gold-accent); } /* Ô "Ưu tiên hàng đầu" — viền gold mảnh, nền chìm */ .priority-box { border: 1px solid var(--c-border); border-left: 3px solid var(--c-gold); background: linear-gradient(180deg, rgba(201,162,39,.06), transparent); border-radius: .625rem; padding: 1rem 1.25rem; } /* Thanh ticker nguồn dữ liệu (ngang đầu trang) */ .ticker { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:.625rem 1.25rem; border-bottom:1px solid var(--c-border); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-mut); } .ticker .item { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; } .ticker .dot { width:.4rem; height:.4rem; border-radius:9999px; background:var(--c-gold); } .ticker .num { color:var(--c-gold-accent); font-weight:600; } /* Dòng nguồn trong sidebar (gmail 9 · calendar 4 …) */ .source-row { display:flex; align-items:center; justify-content:space-between; padding:.35rem .55rem; font-size:.8125rem; color:var(--c-text-mut); border-radius:.5rem; transition:background .15s ease; } .app-sidebar .source-row { color:#94A3B8; } .source-row:hover { background:rgba(255,255,255,.05); } .source-row .name { display:inline-flex; align-items:center; gap:.55rem; } .source-row .led { width:.5rem; height:.5rem; border-radius:9999px; flex-shrink:0; } .led-on { background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.22), 0 0 6px rgba(34,197,94,.5); } .led-off { background:#475569; } .source-row .cnt { font-family:'JetBrains Mono', monospace; font-variant-numeric:tabular-nums; font-size:.6875rem; color:#64748B; } .source-row .cnt-on { font-size:.625rem; font-weight:700; letter-spacing:.06em; color:#4ADE80; background:rgba(34,197,94,.15); padding:.05rem .35rem; border-radius:9999px; } .source-row .cnt-off { color:#475569; } /* Nhãn DEMO — BẮT BUỘC khi hiển thị số chưa có nguồn thật (HARD RULE #4) */ .demo-tag { display:inline-flex; align-items:center; gap:.25rem; font-size:.625rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.1rem .4rem; border-radius:.25rem; background:var(--c-warning-soft); color:var(--c-warning-fg); } /* ═══════════════════════════════════════════════════════ DARK SHIM — biến markup viết bằng utility màu SÁNG (bg-white, slate-*, các pastel banner) tự đổi sang token TỐI khi ở . Nhờ vậy gộp 6 trang cũ vào 1 trang cuộn mà KHÔNG phải sửa lại từng class trong ~2.600 dòng markup. Selector có attribute → specificity cao hơn utility gốc nên thắng mà không cần !important. Màu ngữ nghĩa ánh xạ về token tối. ═══════════════════════════════════════════════════════ */ /* — Bề mặt — */ [data-theme="dark"] .bg-white { background-color: var(--c-card); } [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100, [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: var(--c-card-2); } [data-theme="dark"] .bg-slate-200 { background-color: rgba(148,163,184,.16); } /* — Viền — */ [data-theme="dark"] .border-slate-50, [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300, [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200 { border-color: var(--c-border); } [data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-border); } /* — Chữ — */ [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800 { color: var(--c-text); } [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-gray-700 { color: #d8d2c6; } [data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-500 { color: var(--c-text-mut); } [data-theme="dark"] .text-slate-400, [data-theme="dark"] .text-gray-400 { color: #847e74; } /* — Hover bề mặt — */ [data-theme="dark"] .hover\:bg-slate-50:hover, [data-theme="dark"] .hover\:bg-slate-100:hover, [data-theme="dark"] .hover\:bg-gray-50:hover, [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--c-card-2); } /* — Accent gold (emerald đã remap sang gold ở theme.js, nhưng thang gold tối quá để đọc trên nền tối → ép sang gold sáng + nền/viền chìm) — */ [data-theme="dark"] .text-emerald-600, [data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-800, [data-theme="dark"] .accent { color: var(--c-gold-accent); } [data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-emerald-100 { background-color: rgba(201,162,39,.12); } [data-theme="dark"] .border-emerald-100, [data-theme="dark"] .border-emerald-200 { border-color: rgba(201,162,39,.30); } [data-theme="dark"] .hover\:bg-emerald-50:hover, [data-theme="dark"] .hover\:bg-emerald-100:hover { background-color: rgba(201,162,39,.16); } /* — Banner ngữ nghĩa (pastel sáng → soft tối) — */ [data-theme="dark"] .bg-amber-50 { background-color: var(--c-warning-soft); } [data-theme="dark"] .text-amber-800, [data-theme="dark"] .text-amber-700 { color: var(--c-warning-fg); } [data-theme="dark"] .bg-amber-200, [data-theme="dark"] .border-amber-200, [data-theme="dark"] .border-amber-100 { border-color: rgba(217,119,6,.35); } [data-theme="dark"] .bg-red-50 { background-color: var(--c-danger-soft); } [data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-800 { color: var(--c-danger-fg); } [data-theme="dark"] .bg-red-100 { background-color: rgba(220,38,38,.18); } [data-theme="dark"] .border-red-200, [data-theme="dark"] .border-red-100 { border-color: rgba(220,38,38,.35); } [data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-emerald-green-50 { background-color: var(--c-success-soft); } [data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800 { color: var(--c-success-fg); } [data-theme="dark"] .bg-blue-50 { background-color: var(--c-info-soft); } [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800 { color: var(--c-info-fg); } [data-theme="dark"] .border-blue-200, [data-theme="dark"] .border-blue-100 { border-color: rgba(37,99,235,.35); } /* — Bù các sắc độ chữ đậm chưa map (tránh chữ tối đè nền tối, khó đọc) — */ [data-theme="dark"] .text-emerald-900 { color: var(--c-success-fg); } [data-theme="dark"] .text-emerald-600, [data-theme="dark"] .text-emerald-500 { color: var(--c-gold-accent); } [data-theme="dark"] .text-amber-900, [data-theme="dark"] .text-amber-600 { color: var(--c-warning-fg); } [data-theme="dark"] .text-blue-600 { color: var(--c-info-fg); } [data-theme="dark"] .text-green-600 { color: var(--c-success-fg); } /* Rose family → dùng token danger */ [data-theme="dark"] .bg-rose-50 { background-color: var(--c-danger-soft); } [data-theme="dark"] .text-rose-600, [data-theme="dark"] .text-rose-700, [data-theme="dark"] .text-rose-800 { color: var(--c-danger-fg); } [data-theme="dark"] .border-rose-200, [data-theme="dark"] .border-rose-100 { border-color: rgba(220,38,38,.35); } /* Purple family → tím sáng dễ đọc trên nền tối */ [data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-purple-100 { background-color: rgba(168,85,247,.15); } [data-theme="dark"] .text-purple-600, [data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-800 { color: #c4a5f5; } [data-theme="dark"] .border-purple-200, [data-theme="dark"] .border-purple-100 { border-color: rgba(168,85,247,.35); } /* Indigo family (thẻ việc-có-lịch trong Inbox) → chàm sáng dễ đọc trên nền tối */ [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,.15); } [data-theme="dark"] .text-indigo-400 { color: #8b8ed6; } [data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-800 { color: #a5b4fc; } [data-theme="dark"] .border-indigo-200, [data-theme="dark"] .border-indigo-100 { border-color: rgba(99,102,241,.35); } /* — Input/textarea trên nền tối — */ [data-theme="dark"] input:not([type=checkbox]):not([type=radio]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--c-card-2); color: var(--c-text); border-color: var(--c-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #6f6a60; } /* ── Single-page scroll: bù trừ header dính khi nhảy tới #neo ── */ .scroll-section { scroll-margin-top: 84px; } html { scroll-behavior: smooth; } /* ── Sidebar nav (1 trang cuộn): link neo + scrollspy ── */ /* Sidebar NAVY TỐI — tương phản mạnh với nền chính sáng, làm nội dung "bật" lên. Mục active = xanh điện phát sáng trên nền tối. */ .app-sidebar { background:linear-gradient(180deg,#111A2E 0%,#0B1220 100%); border-right:1px solid rgba(255,255,255,.07); color:#94A3B8; } /* đường kẻ trong sidebar → mảnh sáng mờ trên nền tối */ .app-sidebar .border-b, .app-sidebar .border-t, .app-sidebar [class*="border-slate-200"] { border-color:rgba(255,255,255,.08) !important; } /* chữ vốn đậm (brand name, user name) → sáng trên nền tối */ .app-sidebar [class*="text-slate-900"] { color:#F8FAFC !important; } .app-sidebar [class*="text-slate-400"] { color:#94A3B8 !important; } .nav-link { display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:.625rem; font-size:.875rem; font-weight:500; color:#94A3B8; cursor:pointer; position:relative; transition:background .18s ease, color .18s ease, box-shadow .18s ease; } .nav-link:hover { background:rgba(255,255,255,.06); color:#F8FAFC; } .nav-link.is-active { background:rgba(59,130,246,.16); color:#FFFFFF; font-weight:600; box-shadow:0 0 0 1px rgba(59,130,246,.25) inset; } /* indicator bo tròn bên trái — phát sáng nhẹ */ .nav-link.is-active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:1.15rem; border-radius:9999px; background:#60A5FA; box-shadow:0 0 8px rgba(96,165,250,.7); } /* icon tile: chip mờ sáng trên navy → xanh đặc khi active */ .nav-link .nav-ico { font-size:.95rem; line-height:1; width:1.7rem; height:1.7rem; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:.55rem; background:rgba(255,255,255,.06); transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } .nav-link:hover .nav-ico { background:rgba(255,255,255,.10); } .nav-link.is-active .nav-ico { background:#3B82F6; transform:scale(1.04); box-shadow:0 2px 8px rgba(59,130,246,.45); } .nav-link .nav-lbl { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-link .nav-num { font-family:'JetBrains Mono', monospace; font-size:.625rem; color:#475569; font-variant-numeric:tabular-nums; letter-spacing:.05em; } .nav-link:hover .nav-num { color:#94A3B8; } .nav-link.is-active .nav-num { color:#93C5FD; } .nav-group-label { padding:.75rem .7rem .375rem; font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#64748B; } /* Footer icon buttons (module hệ thống + logout) — đặt cạnh user ở đáy sidebar */ .footer-ico { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:.5rem; font-size:1rem; line-height:1; color:#64748B; background:transparent; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease; } .footer-ico { color:#94A3B8; } .footer-ico:hover { background:rgba(255,255,255,.08); color:#F8FAFC; border-color:transparent; } .footer-ico.is-active { background:rgba(59,130,246,.16); color:#93C5FD; border-color:rgba(59,130,246,.4); }