/* Font Geist (shadcn default). CDN import must stay first; falls back to Inter/system offline. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap'); /* ===== shadcn base "slate" + primary xanh dương, chuyển sang oklch. Giữ nguyên tên token (328 chỗ dùng) — chỉ đổi GIÁ TRỊ nên toàn bộ UI + biểu đồ tự đổi theo. ===== */ :root { color-scheme: light; /* structure / surfaces */ --bg: oklch(0.985 0.006 255); --bg-grad-1: oklch(0.99 0.005 255); --bg-grad-3: oklch(0.975 0.008 255); --panel: oklch(1 0 0); --surface: oklch(1 0 0); --surface-raised: oklch(0.995 0.003 255); --surface-2: oklch(0.984 0.008 255); --surface-muted: oklch(0.968 0.014 255); --thead-bg: oklch(0.972 0.012 255); --sidebar-grad-2: oklch(0.975 0.012 255); --track-bg: oklch(0.95 0.016 255); --border: oklch(0.9 0.025 255); --border-soft: oklch(0.93 0.018 255); --border-strong: oklch(0.86 0.03 255); --border-strong-2: oklch(0.82 0.035 255); /* text scale */ --text: oklch(0.28 0.03 264); --text-strong: oklch(0.208 0.042 266); --slate-700: oklch(0.37 0.03 262); --slate-600: oklch(0.45 0.03 260); --slate-500: oklch(0.55 0.03 258); --muted: oklch(0.48 0.04 257); --subtle: oklch(0.62 0.03 257); --on-accent: oklch(0.985 0.002 248); /* accent family (primary xanh dương; swapped by data-bang-mau) */ --accent: oklch(0.546 0.245 263); --accent-deep: oklch(0.48 0.2 263); --accent-deep-ink: oklch(0.5 0.21 263); --accent-strong: oklch(0.5 0.21 263); --accent-bright: oklch(0.62 0.2 263); --accent-grad-1: oklch(0.6 0.22 263); --accent-grad-2: oklch(0.45 0.19 263); --accent-text: oklch(0.45 0.16 263); --accent-soft: oklch(0.955 0.02 258); --accent-soft-2: oklch(0.92 0.04 258); --accent-border: oklch(0.86 0.055 258); --accent-border-soft: oklch(0.91 0.035 258); --brand-grad-1: oklch(0.62 0.19 270); --accent-shadow: 49,92,246; /* status: success (chart-2 green) */ --success: oklch(0.6 0.13 160); --success-strong: oklch(0.52 0.12 160); --success-text: oklch(0.5 0.11 160); --success-bg: oklch(0.96 0.03 160); --success-bg-2: oklch(0.97 0.025 160); --success-border: oklch(0.88 0.06 160); --delta-pos: oklch(0.52 0.12 160); --bar-grad-2: oklch(0.68 0.15 162); /* status: danger (destructive) */ --danger: oklch(0.577 0.245 27.325); --danger-text: oklch(0.52 0.2 27); --danger-text-2: oklch(0.48 0.19 27); --danger-bg: oklch(0.97 0.025 25); --danger-bg-2: oklch(0.98 0.015 25); --danger-border: oklch(0.9 0.07 25); --danger-border-2: oklch(0.88 0.08 25); --delta-neg: oklch(0.53 0.2 27); /* status: warning (chart-3 amber) */ --yellow: oklch(0.68 0.13 75); --warning-text: oklch(0.52 0.11 70); --warning-text-2: oklch(0.5 0.1 70); --warning-bg: oklch(0.96 0.05 85); --warning-bg-2: oklch(0.98 0.03 85); --warning-border: oklch(0.88 0.09 82); /* status: alpha / orange milestone (chart-5) */ --alpha-text: oklch(0.5 0.15 45); --alpha-strong: oklch(0.62 0.17 48); --alpha-bg: oklch(0.96 0.04 55); --alpha-bg-2: oklch(0.93 0.07 55); /* status: purple finance / spike (chart-4) */ --purple-strong: oklch(0.52 0.2 300); --spike-text: oklch(0.55 0.22 330); --purple-bg: oklch(0.96 0.04 305); --spike-bg: oklch(0.97 0.03 330); --spike-bg-2: oklch(0.94 0.06 330); /* status: cyan info */ --info-text: oklch(0.52 0.12 240); /* legacy aliases kept for compatibility */ --green: var(--success); --red: var(--danger); --shadow-card: 0 1px 2px 0 rgb(16 24 40 / 0.06), 0 1px 3px 0 rgb(16 24 40 / 0.04); --shadow-soft: 0 1px 2px 0 rgb(16 24 40 / 0.05); --sidebar-width: 240px; --topbar-height: 60px; --radius: 0.625rem; } /* ===== Bảng màu (đổi accent-family qua data-bang-mau trên ). Mặc định xanh-duong = :root ===== */ html[data-bang-mau="tim"] { --accent: oklch(0.55 0.24 300); --accent-deep: oklch(0.48 0.22 300); --accent-strong: oklch(0.48 0.22 300); --accent-bright: oklch(0.63 0.2 300); --accent-grad-1: oklch(0.6 0.22 300); --accent-grad-2: oklch(0.44 0.2 300); --accent-text: oklch(0.45 0.17 300); --accent-soft: oklch(0.955 0.02 300); --accent-soft-2: oklch(0.92 0.045 300); --accent-border: oklch(0.86 0.06 300); --accent-border-soft: oklch(0.91 0.04 300); --brand-grad-1: oklch(0.64 0.2 305); --accent-shadow: 124,58,237; } html[data-bang-mau="xanh-la"] { --accent: oklch(0.6 0.15 160); --accent-deep: oklch(0.52 0.13 160); --accent-strong: oklch(0.52 0.13 160); --accent-bright: oklch(0.68 0.16 162); --accent-grad-1: oklch(0.66 0.16 162); --accent-grad-2: oklch(0.46 0.12 160); --accent-text: oklch(0.44 0.11 160); --accent-soft: oklch(0.96 0.03 160); --accent-soft-2: oklch(0.92 0.06 160); --accent-border: oklch(0.86 0.08 160); --accent-border-soft: oklch(0.91 0.05 160); --brand-grad-1: oklch(0.7 0.16 162); --accent-shadow: 22,163,74; } html[data-bang-mau="cam"] { --accent: oklch(0.62 0.18 45); --accent-deep: oklch(0.54 0.16 42); --accent-strong: oklch(0.54 0.16 42); --accent-bright: oklch(0.68 0.17 48); --accent-grad-1: oklch(0.66 0.18 48); --accent-grad-2: oklch(0.48 0.15 40); --accent-text: oklch(0.46 0.13 40); --accent-soft: oklch(0.96 0.035 55); --accent-soft-2: oklch(0.92 0.07 55); --accent-border: oklch(0.86 0.09 52); --accent-border-soft: oklch(0.91 0.05 55); --brand-grad-1: oklch(0.7 0.16 50); --accent-shadow: 234,88,12; } html[data-bang-mau="trung-tinh"] { --accent: oklch(0.45 0.03 260); --accent-deep: oklch(0.37 0.03 262); --accent-strong: oklch(0.37 0.03 262); --accent-bright: oklch(0.55 0.03 258); --accent-grad-1: oklch(0.5 0.03 260); --accent-grad-2: oklch(0.3 0.03 264); --accent-text: oklch(0.3 0.03 264); --accent-soft: oklch(0.968 0.005 258); --accent-soft-2: oklch(0.94 0.008 258); --accent-border: oklch(0.86 0.012 258); --accent-border-soft: oklch(0.92 0.008 258); --brand-grad-1: oklch(0.6 0.025 258); --accent-shadow: 71,85,105; } /* ===== Chế độ tối (override cấu trúc/nền/chữ; ghép được với mọi bảng màu) ===== */ html.dark { color-scheme: dark; --bg: oklch(0.16 0.035 265); --bg-grad-1: oklch(0.175 0.035 265); --bg-grad-3: oklch(0.15 0.035 265); --panel: oklch(0.205 0.04 265); --surface: oklch(0.205 0.04 265); --surface-raised: oklch(0.24 0.042 265); --surface-2: oklch(0.235 0.04 265); --surface-muted: oklch(0.185 0.038 265); --thead-bg: oklch(0.235 0.04 265); --sidebar-grad-2: oklch(0.18 0.038 265); --track-bg: oklch(0.27 0.042 265); --border: oklch(0.32 0.04 265); --border-soft: oklch(0.27 0.04 265); --border-strong: oklch(0.4 0.045 265); --border-strong-2: oklch(0.46 0.045 265); --text: oklch(0.94 0.01 255); --text-strong: oklch(0.98 0.008 255); --slate-700: oklch(0.82 0.02 255); --slate-600: oklch(0.68 0.03 255); --slate-500: oklch(0.68 0.03 255); --muted: oklch(0.72 0.035 255); --subtle: oklch(0.58 0.035 255); /* accent-family dẫn xuất từ --accent (đã đổi theo bảng màu) + --surface (đã đổi theo mode) → tự đúng cho MỌI tổ hợp palette×dark, không leak xanh dương, không cần nhân 4 palette. */ --accent-deep-ink: color-mix(in srgb, var(--accent) 62%, #ffffff); --accent-text: color-mix(in srgb, var(--accent) 55%, #ffffff); --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-soft-2: color-mix(in srgb, var(--accent) 24%, var(--surface)); --accent-border: color-mix(in srgb, var(--accent) 34%, var(--surface)); --accent-border-soft: color-mix(in srgb, var(--accent) 24%, var(--surface)); --accent-strong: color-mix(in srgb, var(--accent) 60%, #ffffff); --success-text: #6ee7b7; --success-strong: #6ee7b7; --success-bg: #10241c; --success-bg-2: #0f2a20; --success-border: #1f4d3a; --delta-pos: #6ee7b7; --danger-text: #fca5b5; --danger-text-2: #fca5b5; --danger-bg: #2a1620; --danger-bg-2: #2a141a; --danger-border: #5a2635; --danger-border-2: #5a2030; --delta-neg: #fca5b5; --warning-text: #fcd34d; --warning-text-2: #fcd34d; --warning-bg: #2a2410; --warning-bg-2: #211d10; --warning-border: #55491f; --alpha-text: #fdba74; --alpha-strong: #fdba74; --alpha-bg: #2a1c10; --alpha-bg-2: #33230f; --purple-strong: #c4b5fd; --spike-text: #e9a5f0; --purple-bg: #1e1830; --spike-bg: #241830; --spike-bg-2: #2c1c3a; --info-text: #7dd3fc; --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 0 rgb(0 0 0 / 0.24); --shadow-soft: 0 1px 2px 0 rgb(0 0 0 / 0.25); } * { box-sizing: border-box; } html { color-scheme: light; background: var(--bg); scroll-behavior: smooth; } body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font: 400 14px/1.5 'Geist', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } body.sidebar-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .65; } input, select, textarea { width: 100%; min-height: 36px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; outline: none; box-shadow: 0 1px 1px rgba(31,46,75,.03); } input:focus, select:focus, textarea:focus { border-color: rgba(var(--accent-shadow),.72); box-shadow: 0 0 0 3px rgba(var(--accent-shadow),.14); } input[aria-invalid="true"], select[aria-invalid="true"] { border-color: rgba(241,110,120,.8); } button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgba(var(--accent-shadow),.75); outline-offset: 2px; } textarea { resize: vertical; } label { display: grid; gap: 6px; min-width: 0; } label > span { color: var(--muted); font-size: 13px; font-weight: 510; } code { color: var(--accent-deep-ink); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } .app-layout { min-height: 100dvh; } .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 16px 12px 14px; overflow-y: auto; background: linear-gradient(180deg,var(--surface) 0%,var(--sidebar-grad-2) 100%); border-right: 1px solid var(--border); box-shadow: 10px 0 30px rgba(31,46,75,.045); } .content-frame { min-width: 0; min-height: 100dvh; margin-left: var(--sidebar-width); } .sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 45; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0,0,0,.66); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; } .brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--on-accent); background: linear-gradient(145deg, var(--brand-grad-1), var(--accent-deep)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 10px 24px rgba(var(--accent-shadow),.24); font-weight: 590; } .brand strong, .brand small { display: block; } .brand small { margin-top: 1px; color: var(--muted); font-size: 12px; } .sidebar-brand { min-height: 52px; padding: 4px 8px; } /* Sidebar gọn như admin: nhãn nhóm chữ thường, mục 1 dòng (ẩn số 01-10 + mô tả phụ) */ .sidebar-label { margin: 20px 10px 6px; color: var(--subtle); font: 500 11px/1.4 'Geist', Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .01em; text-transform: none; } .module-nav { display: grid; gap: 2px; } .module-nav a { position: relative; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--slate-600); border: 1px solid transparent; border-radius: 8px; } .module-nav a:hover { color: var(--text); background: var(--accent-soft); } .module-nav a.active { color: var(--accent-text); background: var(--accent-soft); border-color: transparent; font-weight: 560; } .nav-index { display: none; } .nav-copy { min-width: 0; } .nav-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 14px; font-weight: inherit; } .nav-copy small { display: none; } .sidebar-footer { margin-top: auto; padding: 13px 10px 5px; border-top: 1px solid var(--border-soft); } .sidebar-brand-switcher { display: grid; gap: 6px; margin-bottom: 13px; } .sidebar-brand-switcher span { color: var(--subtle); font: 510 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; } .sidebar-brand-switcher select { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface); font-size: 12px; box-shadow: 0 1px 2px rgba(31,46,75,.04); } .sidebar-brand-switcher select:focus { outline: 2px solid rgba(var(--accent-shadow),.22); border-color: var(--accent); } .sidebar-footer span, .sidebar-footer small { display: block; } .sidebar-footer span { color: var(--text); font-size: 12px; font-weight: 510; } .sidebar-footer i { width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(21,135,91,.1); } .sidebar-footer small { margin-top: 7px; color: var(--subtle); font-size: 11px; line-height: 1.5; } .topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar-height); padding: 12px 24px; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); box-shadow: none; } .mobile-toolbar { display: none; } .topbar-context { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; width: min(1280px,100%); margin-left: auto; } .date-range-picker { position: relative; flex: 0 1 390px; min-width: min(390px,100%); } .date-range-trigger { width: 100%; min-height: 36px; display: grid; grid-template-columns: 22px minmax(0,1fr) 16px; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-strong); background: var(--surface); box-shadow: none; text-align: left; } .date-range-trigger:hover, .date-range-picker.open .date-range-trigger { border-color: var(--border-strong-2); background: var(--accent-soft); } .date-range-trigger.invalid { border-color: rgba(241,110,120,.8); box-shadow: 0 0 0 3px rgba(241,110,120,.12); } .date-trigger-icon { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 0; color: var(--slate-600); background: transparent; font-size: 15px; line-height: 1; } .date-trigger-copy { min-width: 0; display: grid; gap: 0; } .date-trigger-copy strong { display: none; } .date-trigger-copy small { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 560; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .date-trigger-caret { color: var(--slate-600); font-size: 14px; text-align: right; } .date-range-popover { position: absolute; inset: calc(100% + 8px) 0 auto auto; z-index: 60; width: min(660px,calc(100vw - var(--sidebar-width) - 44px)); display: grid; grid-template-columns: 150px minmax(0,1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 50px rgba(15,23,42,.2); } .date-range-popover[hidden] { display: none; } .date-range-presets { padding: 12px 10px; border-right: 1px solid var(--border-soft); background: linear-gradient(180deg,var(--surface),var(--surface-2)); } .date-range-presets > strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 13px; font-weight: 740; } .date-range-preset-list { display: grid; gap: 3px; } .range-preset-button { position: relative; min-height: 30px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; color: var(--slate-700); background: transparent; font-size: 12px; font-weight: 640; text-align: left; white-space: nowrap; } .range-preset-button::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--on-accent); } .range-preset-button:hover { border-color: var(--accent-border-soft); background: var(--accent-soft); } .range-preset-button.active { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); } .range-preset-button.active::before { border-color: var(--accent-bright); background: var(--accent-bright); box-shadow: inset 0 0 0 3px var(--on-accent); } .date-range-main { min-width: 0; display: grid; gap: 10px; padding: 12px; } .date-range-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .date-range-field-grid label > span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } .date-range-field-grid input { min-height: 30px; padding: 5px 8px; font-size: 13px; border-radius: 7px; } .date-range-calendar { display: grid; grid-template-columns: repeat(2,minmax(180px,1fr)); gap: 12px; } .date-range-month { min-width: 0; } .date-range-month header { display: grid; grid-template-columns: 26px minmax(0,1fr) 26px; align-items: center; gap: 6px; margin-bottom: 6px; } .date-range-month header strong { color: var(--text); font-size: 13px; font-weight: 700; text-align: center; } .date-range-nav { width: 26px; height: 26px; border: 0; border-radius: 999px; color: var(--slate-500); background: transparent; font-size: 20px; line-height: 1; } .date-range-nav:hover { color: var(--text); background: var(--accent-soft); } .date-range-weekdays, .date-range-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; } .date-range-weekdays span { height: 20px; color: var(--slate-500); font-size: 11px; font-weight: 700; text-align: center; } .date-range-day { min-width: 0; width: 100%; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--text-strong); background: transparent; font-size: 12px; font-weight: 620; } .date-range-day.empty { display: block; } .date-range-day:hover { border-color: var(--accent-border); background: var(--accent-soft); } .date-range-day.today { border-color: var(--border-strong-2); } .date-range-day.in-range { color: var(--accent-text); background: var(--accent-soft); } .date-range-day.selected-start, .date-range-day.selected-end { color: var(--on-accent); border-color: var(--accent); background: linear-gradient(180deg,var(--accent),var(--accent-deep)); box-shadow: 0 6px 14px rgba(var(--accent-shadow),.2); } .date-range-popover-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-top: 2px; } .date-range-popover-footer small { max-width: 300px; color: var(--muted); font-size: 11px; line-height: 1.4; } .date-range-actions { display: flex; align-items: center; gap: 6px; } .topbar-context .button { min-height: 36px; padding: 6px 12px; border-radius: 8px; font-size: 13px; } .mobile-page-title small, .mobile-page-title strong { display: block; } .mobile-page-title small { color: var(--muted); font-size: 11px; } .mobile-page-title strong { margin-top: 1px; font-size: 15px; font-weight: 590; } .button { min-height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--text); font-size: 13px; font-weight: 510; white-space: nowrap; box-shadow: 0 1px 2px rgba(31,46,75,.04); } .button.primary { color: var(--on-accent); background: var(--accent); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(var(--accent-shadow),.18); } .button.primary:hover { background: var(--accent-deep); } .button.ghost { background: var(--surface); } .button.ghost:hover { background: var(--accent-soft); } .button.small { min-height: 36px; padding: 6px 10px; font-size: 13px; } .icon-button { width: 36px; min-width: 36px; height: 36px; border-radius: 8px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(31,46,75,.04); } .icon-button:hover { color: var(--text); background: var(--accent-soft); } .hamburger, .hamburger::before, .hamburger::after { width: 18px; height: 1.5px; display: block; margin: auto; border-radius: 2px; background: currentColor; } .hamburger { position: relative; } .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; } .hamburger::before { top: -6px; } .hamburger::after { top: 6px; } .filter-icon span { position: relative; width: 18px; height: 14px; display: block; margin: auto; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .filter-icon span::before { content: ""; position: absolute; top: 5px; left: 0; width: 18px; border-top: 1.5px solid currentColor; } .filter-icon span::after { content: ""; position: absolute; top: -4px; left: 4px; width: 3px; height: 3px; border: 1.5px solid currentColor; border-radius: 50%; background: var(--surface); box-shadow: 7px 6px 0 -1px var(--surface), 7px 6px 0 0 currentColor; } .shell { width: min(1600px,calc(100% - 40px)); margin: 0 auto; padding: 16px 0 32px; } .report-status { margin-top: 12px; padding: 10px 13px; color: var(--accent-text); border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); font-size: 14px; } .report-status.loading::before { content: ""; width: 8px; height: 8px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--accent); animation: status-pulse 1s ease-in-out infinite alternate; } .report-status.error { color: var(--danger-text-2); border-color: var(--danger-border-2); background: var(--danger-bg); } @keyframes status-pulse { to { opacity: .35; } } .module { display: none; padding-top: 22px; } .module.active { display: block; } /* Heading gọn như admin: tiêu đề nhỏ, mô tả xuống dưới canh trái, ẩn eyebrow xanh */ .module-heading { display: block; margin-bottom: 16px; } .module-heading > p { max-width: 760px; margin: 5px 0 0; color: var(--muted); text-align: left; font-size: 13px; line-height: 1.5; } .eyebrow { display: none; } h1 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.2px; font-weight: 680; } h2 { margin: 0; font-size: 17px; letter-spacing: -.2px; font-weight: 640; } h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 620; } p { color: var(--muted); } .panel { min-width: 0; margin-top: 12px; padding: 16px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); box-shadow: none; } .table-panel { padding: 0; overflow: hidden; } .panel-head { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; } .table-panel > .panel-head { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface); } .panel-head > div { min-width: 0; } .panel-head > div:first-child { display: flex; align-items: center; gap: 10px; } .panel-head > div:first-child:has(p) { display: block; } .panel-head p { margin: 3px 0 0; } .summary-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; } /* Lưu tồn: xếp dọc nhiều dãy card (Alpha / OB), mỗi dãy là 1 .summary-grid. */ .summary-stack { display: flex; flex-direction: column; gap: 16px; } .summary-group-label { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 640; text-transform: uppercase; letter-spacing: .4px; } .summary-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); box-shadow: none; } .summary-card > span, .summary-card strong, .summary-card small { display: block; } .summary-card > span { color: var(--muted); font-size: 12px; } .summary-card strong { margin-top: 8px; font-size: 26px; line-height: 1.15; font-weight: 680; letter-spacing: -.4px; } .summary-card small { margin-top: 8px; color: var(--muted); font-size: 12px; } .status { min-height: 27px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; white-space: nowrap; } .status.achieved, .status.fresh, .status.ok, .status.done, .status.ready { color: var(--success-text); border-color: var(--success-border); background: var(--success-bg); } .status.not-achieved, .status.error { color: var(--danger-text); border-color: var(--danger-border); background: var(--danger-bg); } .status.neutral, .status.no-data, .status.no-target, .status.unknown, .status.not-configured { color: var(--slate-600); border-color: var(--border); background: var(--surface-muted); } .status.no-source, .status.stale, .status.open, .status.onboarding { color: var(--warning-text); border-color: var(--warning-border); background: var(--warning-bg); } .legend { display: flex; flex-wrap: wrap; gap: 6px; } .daily-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-muted); } .daily-filter-button { min-height: 34px; padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--slate-600); background: var(--surface); font-size: 13px; font-weight: 650; cursor: pointer; } .daily-filter-button:hover { border-color: var(--border-strong-2); background: var(--surface-muted); } .daily-filter-button.active { color: var(--on-accent); border-color: var(--accent); background: linear-gradient(135deg,var(--accent-deep),var(--accent)); box-shadow: 0 8px 20px rgba(var(--accent-shadow),.18); } .daily-view-note { margin-left: auto; color: var(--muted); font-size: 12px; } .table-scroll { max-width: 100%; max-height: min(72vh,720px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border-strong-2) var(--track-bg); background: var(--surface); } .table-top-scroll { max-width: 100%; height: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; background: var(--surface-muted); scrollbar-width: thin; scrollbar-color: var(--border-strong-2) var(--track-bg); } .table-top-scroll > div { width: 1980px; height: 1px; } .data-table { width: 100%; min-width: var(--table-min-width,1120px); border-collapse: separate; border-spacing: 0; } .data-table { --first-column-width: 178px; --metric-column-width: 132px; table-layout: fixed; } .data-table thead th { text-align: center; } .daily-table { --table-min-width: 1980px; --first-column-width: 156px; } .daily-table col.row-key-col { width: 156px; } .wide-table { --table-min-width: 1980px; --first-column-width: 150px; } .content-table { --table-min-width: 2060px; --first-column-width: 220px; } .q3-table { --table-min-width: 1580px; --first-column-width: 210px; } .q3-phase-table { --table-min-width: 1340px; --first-column-width: 190px; } .q3-daily-table { --table-min-width: 1520px; --first-column-width: 112px; --metric-column-width: var(--daily-metric-width); --daily-date-width: 112px; --daily-phase-width: 168px; --daily-cost-width: 96px; --daily-metric-width: 74px; --daily-growth-width: 88px; --daily-benchmark-width: 116px; } .q3-daily-table col.q3-date-col { width: var(--daily-date-width); } .q3-daily-table col.q3-phase-col { width: var(--daily-phase-width); } .q3-daily-table col.q3-intent-col { width: var(--daily-metric-width); } .q3-daily-table col.q3-cost-col { width: var(--daily-cost-width); } .q3-daily-table col.q3-growth-col { width: var(--daily-growth-width); } .q3-daily-table col.q3-benchmark-col { width: var(--daily-benchmark-width); } th, td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; } .data-table th, .data-table td { min-width: var(--metric-column-width); overflow: hidden; text-overflow: ellipsis; } th { position: sticky; top: 0; z-index: 4; height: 38px; color: var(--slate-500); background: var(--surface); font-size: 12px; line-height: 1.2; font-weight: 560; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; } .data-table th { overflow: visible; text-overflow: clip; } /* Bỏ tầng header nhóm → bảng 1 tầng header như admin */ .grouped-table .group-head { display: none; } .grouped-table thead tr:nth-child(2) th { top: 0; } td { font-size: 13px; line-height: 1.3; } tbody tr:hover td { background: var(--surface-2); } tbody tr:last-child td { border-bottom: 0; } .data-table th:first-child, .data-table td:first-child { width: var(--first-column-width); min-width: var(--first-column-width); max-width: var(--first-column-width); position: sticky; left: 0; z-index: 6; background: var(--surface); box-shadow: 1px 0 var(--border); } .data-table thead th:first-child { z-index: 8; } .grouped-table .group-head th:first-child { z-index: 7; background: var(--surface); color: var(--slate-500); } .grouped-table thead tr:nth-child(2) th:first-child { z-index: 9; background: var(--surface); color: var(--slate-500); } tbody tr.total-row td { position: sticky; top: 38px; z-index: 5; color: var(--text); background: var(--surface-muted); font-weight: 650; box-shadow: inset 0 -1px var(--border); } .grouped-table tbody tr.total-row td { top: 38px; } tbody tr.total-row td:first-child { z-index: 7; background: var(--accent-soft-2); } .daily-key strong, .daily-key small, .content-identity strong, .content-identity small { display: block; } .daily-key strong { white-space: nowrap; } .daily-key small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.2; white-space: normal; } .phase-badge { display: block; max-width: 100%; padding: 0; border-radius: 0; color: var(--slate-500); background: transparent; font-size: 11px; font-weight: 650; white-space: normal; } .phase-badge.alpha { color: var(--alpha-text); background: transparent; } .phase-badge.ob { color: var(--info-text); background: transparent; } .phase-badge.spike { color: var(--spike-text); background: transparent; } tbody tr.spike-row td { background: var(--spike-bg); } tbody tr.spike-row:hover td { background: var(--spike-bg-2); } tbody tr.spike-row td:first-child { background: var(--spike-bg-2); } tbody tr.milestone-alpha td { background: var(--alpha-bg); } tbody tr.milestone-alpha:hover td { background: var(--alpha-bg-2); } tbody tr.milestone-ob td { background: var(--accent-soft); } tbody tr.milestone-ob:hover td { background: var(--accent-soft-2); } tbody tr.milestone-alpha td:first-child { background: var(--alpha-bg-2); } tbody tr.milestone-ob td:first-child { background: var(--accent-soft-2); } /* Nhóm cột phẳng, chữ xám như admin (bỏ dải màu đậm) */ .group-head .group-reg, .group-head .group-ip, .group-head .group-nru, .group-head .group-finance, .group-head .group-data, .group-head .group-intent, .group-head .group-exact, .group-head .group-target, .group-head .group-growth, .group-head .group-scope { background: var(--surface); color: var(--slate-500); } .grouped-table thead tr:nth-child(2) th:nth-child(2), .grouped-table tbody td:nth-child(2), .daily-table thead tr:nth-child(2) th:nth-child(5), .daily-table tbody td:nth-child(5), .daily-table thead tr:nth-child(2) th:nth-child(8), .daily-table tbody td:nth-child(8), .daily-table thead tr:nth-child(2) th:nth-child(11), .daily-table tbody td:nth-child(11), .daily-table thead tr:nth-child(2) th:nth-child(14), .daily-table tbody td:nth-child(14), .q3-phase-table thead tr:nth-child(2) th:nth-child(3), .q3-phase-table tbody td:nth-child(3), .q3-phase-table thead tr:nth-child(2) th:nth-child(7), .q3-phase-table tbody td:nth-child(7), .q3-phase-table thead tr:nth-child(2) th:nth-child(9), .q3-phase-table tbody td:nth-child(9), .q3-daily-table thead tr:nth-child(2) th:nth-child(3), .q3-daily-table tbody td:nth-child(3), .q3-daily-table thead tr:nth-child(2) th:nth-child(8), .q3-daily-table tbody td:nth-child(8), .q3-daily-table thead tr:nth-child(2) th:nth-child(9), .q3-daily-table tbody td:nth-child(9), .q3-daily-table thead tr:nth-child(2) th:nth-child(11), .q3-daily-table tbody td:nth-child(11), .q3-volume-table thead tr:nth-child(2) th:nth-child(6), .q3-volume-table tbody td:nth-child(6), .q3-volume-table thead tr:nth-child(2) th:nth-child(8), .q3-volume-table tbody td:nth-child(8) { border-left: 1px solid var(--border-soft); } .q3-volume-table .group-head .group-finance, .q3-volume-table .group-head .group-data { border-left: 1px solid var(--border-soft); } .q3-daily-table .group-head th:nth-child(2), .q3-daily-table thead tr:nth-child(2) th:nth-child(2), .q3-daily-table tbody td:nth-child(2) { width: var(--daily-phase-width); min-width: var(--daily-phase-width); max-width: var(--daily-phase-width); white-space: nowrap; overflow-wrap: normal; text-overflow: clip; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .money { color: var(--text-strong); } .actual { color: var(--text-strong); font-weight: 650; } .target { color: var(--accent-deep-ink); } .missing { color: var(--subtle); font-style: normal; } .scope { max-width: 260px; color: var(--muted); font-size: 12px; } .content-identity { min-width: 220px; } .content-identity strong, .content-identity small { display: block; } .content-identity small { margin-top: 3px; color: var(--muted); } .content-identity a { min-height: 32px; display: inline-flex; align-items: center; margin-top: 4px; color: var(--accent-deep-ink); } .empty-state { padding: 40px 20px; color: var(--muted); text-align: center; } .filter-row { display: grid; grid-template-columns: minmax(260px,1fr) 220px; gap: 10px; margin-bottom: 12px; } .source-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } .contract-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 12px 0 16px; } .contract-card, .mapping-card { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-soft); } .contract-card span, .contract-card strong, .contract-card small { display: block; } .contract-card span { color: var(--muted); font-size: 12px; } .contract-card strong { margin-top: 5px; font-size: 22px; font-weight: 590; } .contract-card small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; } .mapping-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 16px; } .mapping-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .mapping-card span { color: var(--muted); font-size: 12px; } .mapping-card strong { font-size: 24px; font-weight: 590; } .mapping-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; } .mapping-card .bar { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: var(--track-bg); } .mapping-card .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),var(--bar-grad-2)); } .q3-drilldown-draft { border-color: var(--accent-border); background: linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%); } .draft-controls { min-width: min(320px,100%); } .draft-controls label { min-width: 260px; } .q3-drilldown-table-block, .q3-compare-block { min-width: 0; margin: 0 16px 16px; border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--surface); } .q3-drilldown-table { --table-min-width: 1420px; --first-column-width: 210px; } .q3-compare-table { --table-min-width: 1180px; --first-column-width: 180px; } .link-cell { display: inline-flex; align-items: center; max-width: 100%; padding: 0; border: 0; color: var(--accent-deep-ink); background: transparent; font: inherit; font-weight: 750; text-align: left; cursor: pointer; overflow-wrap: anywhere; } .link-cell:hover { text-decoration: underline; } .link-cell:focus-visible, tr.clickable-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .benchmark-cell strong, .benchmark-cell small { display: block; } .benchmark-cell small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; white-space: normal; } .selected-drilldown-row td { background: var(--accent-soft); } .selected-drilldown-row td:first-child { background: var(--accent-soft-2); } .q3-dialog-content-table tbody tr[data-q3-drilldown-content], .q3-daily-table tbody tr.clickable-row, .q3-volume-table tbody tr.clickable-row { cursor: pointer; } .q3-dialog-content-table tbody tr[data-q3-drilldown-content]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .q3-drilldown-dialog { width: min(1320px,calc(100vw - 34px)); max-height: min(900px,calc(100vh - 34px)); padding: 0; border: 0; border-radius: 18px; background: transparent; box-shadow: 0 28px 90px rgba(15,23,42,.34); } .q3-drilldown-dialog::backdrop { background: rgba(15,23,42,.46); backdrop-filter: blur(2px); } .dialog-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-soft); font-size: 24px; line-height: 1; cursor: pointer; } .q3-day-dialog-card { min-width: 0; max-height: min(900px,calc(100vh - 34px)); overflow: auto; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); } .q3-day-dialog-head h2 { margin: 2px 46px 0 0; font-size: clamp(25px,3vw,36px); } .q3-day-dialog-head p { margin: 8px 46px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .q3-dialog-section { min-width: 0; margin-top: 14px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 15px; background: var(--surface-2); } .q3-dialog-section .panel-head.compact { min-height: 0; margin-bottom: 10px; } .q3-dialog-section .panel-head.compact h3 { margin: 0; } .q3-dialog-section .panel-head.compact p { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.4; } .q3-day-metrics-panel, .q3-day-benchmark-panel, .q3-day-content-panel { min-width: 0; } .q3-day-topline-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 12px; align-items: start; } .q3-day-topline .panel-head.compact { margin-bottom: 6px; } .q3-day-topline .panel-head.compact p { display: none; } .q3-content-split { display: grid; grid-template-columns: minmax(620px,.58fr) minmax(360px,.42fr); gap: 14px; align-items: start; } .q3-content-picker, .q3-selected-creative-panel { min-width: 0; } .q3-selected-creative-panel { padding: 12px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-soft); } .q3-dialog-summary-grid { min-width: 0; } .q3-compact-metric-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); font-size: 13px; } .q3-compact-metric-table th, .q3-compact-metric-table td { position: static; min-width: 0; height: auto; padding: 7px 10px; border-bottom: 1px solid var(--border-soft); background: var(--surface); box-shadow: none; text-transform: none; letter-spacing: 0; white-space: normal; } .q3-compact-metric-table th { width: 150px; color: var(--muted); text-align: left; font-size: 12px; font-weight: 700; } .q3-compact-metric-table td:nth-child(2) { width: 130px; text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; } .q3-compact-metric-table tr:last-child th, .q3-compact-metric-table tr:last-child td { border-bottom: 0; } .q3-dialog-metric, .q3-benchmark-card { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); } .q3-dialog-metric span, .q3-dialog-metric strong, .q3-dialog-metric small, .q3-benchmark-card span, .q3-benchmark-card strong, .q3-benchmark-card small { display: block; } .q3-dialog-metric span, .q3-benchmark-card span { color: var(--muted); font-size: 12px; } .q3-dialog-metric strong, .q3-benchmark-card strong { margin-top: 3px; font-size: 20px; } .q3-dialog-metric small, .q3-benchmark-card small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; } .q3-dialog-benchmark { margin-top: 10px; } .q3-benchmark-card dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; } .q3-benchmark-card dt { color: var(--muted); } .q3-benchmark-card dd { margin: 0; font-weight: 700; text-align: right; } .q3-source-split-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .q3-source-card { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-soft); } .q3-source-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 750; } .q3-source-card dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 9px 0; } .q3-source-card dt, .q3-source-card dd { margin: 0; min-width: 0; text-align: center; } .q3-source-card dt { color: var(--muted); font-size: 11px; } .q3-source-card dd { grid-row: 2; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; } .q3-source-card small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; } .q3-dialog-content-scroll { max-height: 520px; margin-top: 10px; border-radius: 12px; } .q3-dialog-content-table { --table-min-width: 1160px; --first-column-width: 220px; --metric-column-width: 112px; } .q3-dialog-content-table th:first-child, .q3-dialog-content-table td:first-child { min-width: 220px; } .q3-volume-table { --table-min-width: 1360px; --first-column-width: 240px; --metric-column-width: 96px; } .q3-volume-table th:first-child, .q3-volume-table td:first-child { min-width: 240px; } .q3-dialog-creative-detail { margin-top: 10px; } .q3-dialog-creative-detail .q3-creative-card { border: 0; box-shadow: none; padding: 0; max-height: none; overflow: visible; } .q3-creative-card { min-width: 0; max-height: min(860px,calc(100vh - 34px)); overflow: auto; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-soft); } .q3-creative-card.compact-creative-card { padding: 0; border: 0; box-shadow: none; } .q3-creative-card header h3 { margin: 2px 42px 0 0; font-size: clamp(24px,3vw,34px); overflow-wrap: anywhere; } .q3-creative-card header p { margin: 8px 42px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .creative-dialog-layout { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1fr); gap: 18px; align-items: start; margin-top: 16px; } .creative-metric-grid { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 12px; margin: 14px 0 0; padding: 14px; border: 1px solid var(--border-soft); border-radius: 13px; background: var(--surface-2); font-size: 14px; } .creative-metric-grid dt { color: var(--muted); } .creative-metric-grid dd { margin: 0; min-width: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; } .q3-creative-card section { margin-top: 16px; } .creative-main-panel > section:first-child { margin-top: 0; } .q3-creative-card h4 { margin: 0 0 7px; font-size: 15px; } .q3-creative-card p { margin: 0; overflow-wrap: anywhere; line-height: 1.55; } .q3-creative-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .creative-copy-block { padding: 14px; border: 1px solid var(--accent-border-soft); border-radius: 13px; background: var(--surface-2); } .creative-copy-block p { font-size: 16px; color: var(--text); } .creative-copy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .creative-copy-grid > div { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); } .creative-thumb { display: block; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-muted); } .creative-thumb img { display: block; width: 100%; min-height: 220px; max-height: 360px; object-fit: contain; background: var(--surface-muted); image-rendering: auto; } .creative-thumb.low-res { min-height: 220px; display: grid; place-items: center; padding: 12px; } .creative-thumb.low-res img { width: auto; max-width: 100%; min-height: 0; max-height: 260px; object-fit: contain; image-rendering: auto; } .creative-thumb.missing { min-height: 220px; display: grid; place-items: center; color: var(--muted); font-size: 14px; } .media-quality-note { margin-top: 8px; color: var(--warning-text-2); font-size: 13px; } .creative-link { display: inline-flex; align-items: center; margin-top: 14px; } .q3-compare-table td strong, .q3-compare-table td small { display: block; } .q3-compare-table td small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; text-transform: none; letter-spacing: 0; white-space: normal; } .delta-positive { color: var(--delta-pos); font-weight: 700; } .delta-negative { color: var(--delta-neg); font-weight: 700; } .delta-neutral { color: var(--muted); font-weight: 650; } .source-card { min-width: 0; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); } .source-card header { display: flex; align-items: start; justify-content: space-between; gap: 10px; } .source-card h3 { margin: 0; font-size: 15px; } .source-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; margin: 12px 0 0; font-size: 12px; } .source-card dt { color: var(--muted); } .source-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .source-maturity { margin-top: 12px; padding: 10px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); } .source-maturity h4 { margin: 0 0 8px; color: var(--accent-text); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .source-maturity dl { margin: 0; } .source-maturity .status.final-closed { color: var(--success-text); border-color: var(--success-border); background: var(--success-bg); } .source-maturity .status.live-partial, .source-maturity .status.provisional, .source-maturity .status.stable-candidate { color: var(--warning-text); border-color: var(--warning-border); background: var(--warning-bg); } .source-error { margin: 12px 0 0; padding: 9px; color: var(--danger-text); border: 1px solid var(--danger-border); border-radius: 9px; background: var(--danger-bg); font-size: 12px; overflow-wrap: anywhere; } .system-status-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .system-status-card { min-width: 0; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); } .system-status-card.warning { border-color: var(--warning-border); background: var(--warning-bg-2); } .system-status-card.error { border-color: var(--danger-border); background: var(--danger-bg-2); } .system-status-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .system-status-card h3 { margin: 0; font-size: 15px; } .system-status-card dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 9px; margin: 12px 0 0; font-size: 12px; } .system-status-card dt { color: var(--muted); } .system-status-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .system-status-card code { font-size: 11px; } .connection-keys-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 12px; cursor: pointer; } .connection-keys-toggle input { width: 16px; height: 16px; cursor: pointer; } .scope-note { margin-top: 15px; padding: 16px; border: 1px solid var(--warning-border); border-radius: 12px; background: var(--warning-bg); } .scope-note p { margin: 4px 0 0; } .q3-kpi-guide { margin-bottom: 18px; } .data-freshness-footer { width: min(1600px,calc(100% - 44px)); margin: 12px auto 26px; padding-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--subtle); border-top: 1px solid var(--border-soft); font-size: 12px; line-height: 1.5; } .data-freshness-footer span { white-space: nowrap; } .toast { position: fixed; right: 22px; bottom: 22px; z-index: 70; max-width: min(520px,calc(100% - 44px)); padding: 13px 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 45px rgba(31,46,75,.18); transform: translateY(30px); opacity: 0; pointer-events: none; transition: .2s ease; } .toast.show { transform: translateY(0); opacity: 1; } .toast.error { border-color: rgba(241,110,120,.45); } @media (max-width: 1180px) and (min-width: 901px) { .topbar-context { justify-content: flex-start; } .date-range-popover { left: 0; right: auto; width: min(660px,calc(100vw - var(--sidebar-width) - 32px)); } .summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .source-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 900px) { .app-sidebar { width: min(82vw,300px); transform: translateX(-100%); border-right-color: var(--border); box-shadow: 24px 0 60px rgba(31,46,75,.18); transition: transform .22s ease; } body.sidebar-open .app-sidebar { transform: translateX(0); } .sidebar-backdrop { display: block; } body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } .content-frame { margin-left: 0; } .topbar { min-height: 64px; padding: 0; } .mobile-toolbar { min-height: 64px; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 10px; padding: 10px 12px; } .mobile-page-title { min-width: 0; } .mobile-page-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-context { display: none; grid-template-columns: 1fr; width: 100%; padding: 12px; border-top: 1px solid var(--border-soft); background: var(--surface); } body.mobile-filters-open .topbar-context { display: grid; } .date-range-picker { width: 100%; min-width: 0; flex-basis: 100%; } .date-range-popover { position: static; width: 100%; margin-top: 8px; grid-template-columns: 1fr; } .date-range-presets { border-right: 0; border-bottom: 1px solid var(--border-soft); } .date-range-preset-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .date-range-calendar { grid-template-columns: 1fr; } .date-range-popover-footer { align-items: stretch; flex-direction: column; } .date-range-actions { justify-content: flex-end; } .topbar-context input, .topbar-context select { font-size: 16px; } .topbar-context .button { width: 100%; } .shell { width: min(100% - 24px,1600px); padding: 12px 0 34px; } .summary-grid::-webkit-scrollbar { display: none; } .module { padding-top: 28px; } .module-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 18px; } .module-heading > p { max-width: none; text-align: left; font-size: 15px; line-height: 1.55; } h1 { font-size: 32px; letter-spacing: -.7px; } .summary-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px,78vw); gap: 9px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } .summary-card { scroll-snap-align: start; } .summary-card > span, .summary-card small { font-size: 13px; } .summary-card strong { font-size: 23px; } .panel { padding: 16px; } .table-panel { padding: 0; } .panel-head { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; } .table-panel > .panel-head { padding: 15px 16px; } .panel-head p { font-size: 15px; line-height: 1.5; } .table-top-scroll { height: 18px; } .table-scroll { border-radius: 0 0 10px 10px; } .data-table td { font-size: 15px; } .daily-table th:first-child, .daily-table td:first-child { min-width: 156px; } .filter-row, .source-grid, .contract-grid, .mapping-grid, .system-status-grid { grid-template-columns: 1fr; } .q3-drilldown-table-block, .q3-compare-block { margin: 0 12px 12px; } .q3-content-split, .q3-day-topline-grid, .creative-dialog-layout, .creative-copy-grid, .q3-source-split-grid { grid-template-columns: 1fr; } .button.small { min-height: 44px; } .content-identity a { min-height: 44px; } .filter-row input, .filter-row select { font-size: 16px; } .source-card h3 { font-size: 16px; } .source-card dl { font-size: 13px; } .toast { right: 12px; bottom: 12px; max-width: calc(100% - 24px); } } @media (max-width: 540px) { .date-range-field-grid { grid-template-columns: 1fr; } .date-range-preset-list { grid-template-columns: 1fr; } .date-range-main { padding: 14px; } .topbar-context label > span { font-size: 12px; } .shell { width: calc(100% - 20px); } .data-freshness-footer { width: calc(100% - 20px); justify-content: flex-start; font-size: 11px; } .data-freshness-footer span { white-space: normal; } .module { padding-top: 24px; } h1 { font-size: 30px; } h2 { font-size: 19px; } .legend { gap: 5px; } .status { font-size: 13px; } .panel { border-radius: 10px; } } .theme-settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px; align-items: start; } .theme-mode-group { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 8px; } .theme-mode-button { min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); font-size: 14px; font-weight: 560; box-shadow: 0 1px 2px rgba(31,46,75,.04); } .theme-mode-button:hover { border-color: var(--accent-border); background: var(--accent-soft); } .theme-mode-button[aria-checked="true"] { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); box-shadow: 0 0 0 2px rgba(var(--accent-shadow),.28); } .theme-palette-group { display: grid; grid-template-columns: repeat(auto-fit,minmax(96px,1fr)); gap: 10px; } .theme-swatch { display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 14px; color: var(--muted); background: var(--surface); font-size: 12px; font-weight: 560; box-shadow: 0 1px 2px rgba(31,46,75,.04); } .theme-swatch i { width: 34px; height: 34px; border-radius: 999px; background: var(--sw); box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px rgba(31,46,75,.12); } .theme-swatch:hover { border-color: var(--accent-border); background: var(--accent-soft); } .theme-swatch[aria-checked="true"] { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft); box-shadow: 0 0 0 2px rgba(var(--accent-shadow),.28); } .theme-swatch[aria-checked="true"] i { box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--sw); } .theme-preview { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; align-items: center; } .theme-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .app-sidebar, .sidebar-backdrop, .toast { transition: none; } .report-status.loading::before { animation: none; } } /* ===== Trang Đăng ký & NRU: biểu đồ đường SVG thuần ===== */ .dang-ky-nru-chart { min-height: 120px; } .dang-ky-nru-svg { width: 100%; height: auto; display: block; } .chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; font-size: 13px; color: var(--muted); } .chart-legend-item { display: inline-flex; align-items: center; gap: 6px; } .chart-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .chart-swatch-reg { background: var(--accent); } .chart-swatch-nru { background: var(--alpha-strong); } .chart-line { stroke-width: 2; } .chart-line-reg { stroke: var(--accent); } .chart-line-nru { stroke: var(--alpha-strong); } .chart-axis { stroke: var(--accent-border); stroke-width: 1; } .chart-axis-label { fill: var(--muted); font-size: 11px; } /* Biểu đồ phễu (Phase A2): 3 thanh ngang thu hẹp dần theo số người giữ lại. */ .pheu-chart { min-height: 120px; } .pheu-funnel { display: flex; flex-direction: column; gap: 14px; } .pheu-step-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .pheu-step-label { font-size: 13px; font-weight: 510; } .pheu-step-value { font-size: 15px; font-weight: 510; letter-spacing: -.3px; } .pheu-bar-track { height: 22px; border-radius: 7px; background: var(--surface-muted, var(--surface)); border: 1px solid var(--border); overflow: hidden; } .pheu-bar-fill { height: 100%; border-radius: 6px; background: var(--accent); transition: width .3s ease; } .pheu-bar-rate { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--muted); } /* Lưu tồn (cohort) — ô mốc: % lớn + số nhỏ; ô chưa chín để mờ, không tô đỏ. */ .luu-ton-count { display: block; margin-top: 2px; font-size: 11px; color: var(--subtle); font-weight: 400; } .luu-ton-immature { color: var(--subtle); } /* LTV cohort — ô hiện tổng doanh thu (đậm) + ARPU/người (dòng nhỏ mờ bên dưới). */ .ltv-arpu { display: block; margin-top: 2px; font-size: 11px; color: var(--subtle); font-weight: 400; } /* Bảng LTV & ROI gộp: ưu tiên DỮ LIỆU ĐẦY ĐỦ — không che số "…", không để số đè nhau. Bảng tự rộng theo nội dung (max-content) rồi cuộn ngang trong .table-scroll → mỗi cột tự lấy đủ chỗ cho số dài nhất, các cột KHÔNG dính vào nhau. */ .ltv-roas-table { width: max-content; max-width: none; table-layout: auto; } .ltv-roas-table td, .ltv-roas-table th { white-space: nowrap; overflow: visible; text-overflow: clip; padding-left: 16px; padding-right: 16px; /* khoảng cách cân bằng giữa các cột */ } .ltv-roas-table td.num, .ltv-roas-table th:not(:first-child) { text-align: right; } /* số căn phải, thẳng hàng dễ đọc */ /* Cột Ngày (first-child): đủ rộng cho "Tổng trong kỳ" nằm gọn 1 dòng (dd/MM + nhãn OB+n vẫn thoải mái). */ .ltv-roas-table th:first-child, .ltv-roas-table td:first-child { width: 118px; min-width: 118px; max-width: 118px; white-space: nowrap; } /* Dòng nhỏ OB+n dưới ngày cohort + dòng ARPU trong ô D: theo cột (căn phải), không đè. */ .ltv-ob-label { display: block; margin-top: 2px; font-size: 11px; color: var(--subtle); font-weight: 400; } .ltv-roas-table .ltv-arpu { text-align: right; } /* Lợi nhuận: dương = xanh, âm (lỗ) = đỏ để cảnh báo nhanh. */ .profit-positive { color: var(--success-text, #1a7f37); } .profit-negative { color: var(--danger-text, #cf222e); } /* Ô rơi đúng ngày mở Open Beta (đường chéo) — nền nhạt làm mốc, không gây rối mắt. */ .luu-ton-ob-day { background: rgba(56,132,255,.12); box-shadow: inset 0 0 0 1px rgba(56,132,255,.28); } /* Hàng TỔNG cuối bảng cohort — gộp toàn khoảng ngày lọc, nổi bật để không lẫn hàng cohort. */ .luu-ton-total-row td { background: var(--surface-2); border-top: 2px solid var(--border-strong); font-weight: 640; } /* ── User menu (topbar account button + dropdown info/đổi mật khẩu/đăng xuất) ── */ .user-menu { position: relative; } .user-menu > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; } .user-menu > summary::-webkit-details-marker { display: none; } .user-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; } .user-menu-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px; } .user-menu-head { margin-bottom: 12px; } .user-menu-head strong { display: block; color: var(--text-strong); } .user-menu-head small { color: var(--muted); font-size: 12px; } .user-menu-form { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .user-menu-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text); } .user-menu-form input { padding: 8px 10px; font-size: 13px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-raised); color: var(--text-strong); } .user-menu-msg { font-size: 12px; padding: 6px 8px; border-radius: 6px; } .user-menu-msg.ok { background: var(--success-bg); color: var(--success-text, #1a7f37); } .user-menu-msg.err { background: var(--danger-bg); color: var(--danger-text); } .user-menu-logout { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .user-menu-logout button { width: 100%; }