/* ═══════════════════════════════════════════════════════════════════════ PULSE — design system của Workflow Engine (2026-07) Lớp token + app shell (sidebar) + override Bootstrap. Không đổi markup từng trang: mọi trang tự "lên đời" qua các selector Bootstrap chuẩn. ═══════════════════════════════════════════════════════════════════════ */ /* ─── PULSE v2 tokens — accent teal, light + dark (data-theme trên ) ─── */ :root, [data-theme="light"] { /* Brand — accent TEAL */ --wf-primary: #0d9488; --wf-primary-hover: #0f766e; --wf-primary-soft: #d7f0ec; --wf-primary-fg: #0b7266; --wf-primary-ring: rgba(13, 148, 136, .20); --wf-primary-glow: 0 8px 22px -8px rgba(13, 148, 136, .44); /* Neutrals */ --wf-text: #101828; --wf-text-2: #5a6472; --wf-text-3: #98a1ae; --wf-border: #d3d8e0; --wf-border-strong: #b4bcc8; --wf-bg: #e7eaef; --wf-surface: #ffffff; --wf-surface-2: #eceff3; --wf-surface-3: #f6f7f9; /* Semantic — mỗi màu có nền soft + chữ fg */ --wf-success: #16a34a; --wf-success-soft: #dcfce7; --wf-success-fg: #15803d; --wf-warning: #d97706; --wf-warning-soft: #fef0d5; --wf-warning-fg: #b45309; --wf-danger: #dc2626; --wf-danger-soft: #fde3e3; --wf-danger-fg: #c11f1f; --wf-info: #2563eb; --wf-info-soft: #dde8fd; --wf-info-fg: #1d55c9; /* "Đậm/kết thúc" — trạng thái chung cuộc (Đã kết thúc, Đã hủy...): đậm hơn hẳn bg-secondary nhưng KHÔNG phải một màu semantic (không đỏ/vàng/xanh) vì không phải cảnh báo. */ --wf-neutral-strong: #0f172a; --wf-neutral-strong-fg: #ffffff; --wf-radius: 16px; --wf-radius-sm: 10px; --wf-row-py: 13px; --wf-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --wf-shadow: 0 1px 2px rgba(16, 24, 40, .06); --wf-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 6px -2px rgba(16, 24, 40, .06); --wf-shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, .22), 0 6px 14px -6px rgba(16, 24, 40, .10); --wf-sidebar-w: 248px; --wf-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Topbar — nhấn RIÊNG, tách khỏi teal accent dùng cho các panel trong trang (vd. header cột lọc Contacts): topbar là dải chrome toàn ứng dụng, luôn hiện trên mọi trang, nên cần một màu khác hẳn để không bị đọc lẫn với vùng nhấn teal bên trong nội dung trang. */ --wf-topbar-bg: #1d4ed8; --wf-topbar-fg: #ffffff; --wf-topbar-fg-muted: rgba(255, 255, 255, .78); --wf-topbar-border: rgba(255, 255, 255, .18); --wf-topbar-chip: rgba(255, 255, 255, .18); --bs-link-color: var(--wf-primary-fg); --bs-link-hover-color: var(--wf-primary-hover); color-scheme: light; } [data-theme="dark"] { --wf-primary: #2dd4bf; --wf-primary-hover: #5eead4; --wf-primary-soft: rgba(45, 212, 191, .15); --wf-primary-fg: #5eead4; --wf-primary-ring: rgba(45, 212, 191, .30); --wf-primary-glow: 0 8px 22px -8px rgba(45, 212, 191, .48); --wf-text: #e7ecf2; --wf-text-2: #9aa6b4; --wf-text-3: #6b7684; --wf-border: #2b3746; --wf-border-strong: #3d4b5d; --wf-bg: #070a0e; --wf-surface: #141c28; --wf-surface-2: #1e2733; --wf-surface-3: #0f1620; --wf-success: #22c55e; --wf-success-soft: rgba(34, 197, 94, .16); --wf-success-fg: #4ade80; --wf-warning: #f59e0b; --wf-warning-soft: rgba(245, 158, 11, .16); --wf-warning-fg: #fbbf24; --wf-danger: #ef4444; --wf-danger-soft: rgba(239, 68, 68, .17); --wf-danger-fg: #f87171; --wf-info: #3b82f6; --wf-info-soft: rgba(59, 130, 246, .17); --wf-info-fg: #60a5fa; /* Đảo lại so với light: nền tối đặc thêm một chip đen tuyền gần như biến mất — dùng chip sáng cho vẫn đọc được là "đậm/chung cuộc" giữa nền tối. */ --wf-neutral-strong: #cbd5e1; --wf-neutral-strong-fg: #0f172a; --wf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --wf-shadow: 0 1px 2px rgba(0, 0, 0, .4); --wf-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5); --wf-shadow-lg: 0 20px 44px -12px rgba(0, 0, 0, .65), 0 6px 14px -6px rgba(0, 0, 0, .5); --wf-topbar-bg: #1d4ed8; --wf-topbar-fg: #ffffff; --wf-topbar-fg-muted: rgba(255, 255, 255, .78); --wf-topbar-border: rgba(255, 255, 255, .18); --wf-topbar-chip: rgba(255, 255, 255, .18); --bs-link-color: var(--wf-primary-fg); --bs-link-hover-color: var(--wf-primary-hover); color-scheme: dark; } /* ═══ Nền tảng ═══ */ /* Cỡ chữ nền của mọi thứ tính theo rem. Riêng trang Contacts nhỏ hơn nửa pixel (12.5px, khai trong contacts-grid.css) vì nó là bảng dày đặc dữ liệu, không phải trang đọc. */ html { font-size: 15px; } body.app-body { font-family: var(--wf-font); background: var(--wf-bg); color: var(--wf-text); padding-bottom: 0; -webkit-font-smoothing: antialiased; } a { color: var(--wf-primary); text-decoration: none; } a:hover { color: var(--wf-primary-hover); text-decoration: underline; } /* ═══ App shell: một thanh ngang trên cùng, không còn sidebar dọc ═══ Điều hướng được dùng vài lần một giờ, dữ liệu thì nhìn liên tục — một dải 248px đứng cạnh suốt ngày là trả tiền mặt bằng cho thứ ít dùng nhất màn hình. Chuyển lên thanh ngang trả lại trọn 248px cho mọi trang, và tận dụng luôn topbar vốn gần như trống. */ .app-main { /* Trừ chiều cao thanh trên cùng: thanh nằm TRÊN khối này trong luồng, để 100vh thì tổng trang thành 100vh + 44px và cửa sổ mọc thêm một thanh cuộn thứ hai bên phải. */ min-height: calc(100vh - 44px); } .app-content { max-width: 1240px; padding: 28px 32px 48px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 7px; padding: 0 6px 0 2px; text-decoration: none !important; flex: 0 0 auto; } .brand-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 3px; background: var(--wf-topbar-chip); border: 1px solid var(--wf-topbar-border); color: #fff; font-weight: 800; font-size: .82rem; } .brand-name { font-weight: 700; font-size: .86rem; color: var(--wf-topbar-fg); letter-spacing: -.01em; white-space: nowrap; } .user-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: var(--wf-primary-soft); border-radius: 50%; font-size: .85rem; } .logout-btn { border: 1px solid var(--wf-border); color: var(--wf-text-2); font-size: .75rem; border-radius: 7px; padding: 3px 10px; background: var(--wf-surface); white-space: nowrap; } .logout-btn:hover { background: var(--wf-surface-2); color: var(--wf-text); border-color: var(--wf-border-strong); } .logout-btn svg, .user-avatar svg { width: 15px; height: 15px; } /* ═══ Thanh trên cùng: nửa trái của ỨNG DỤNG, nửa phải của TRANG ═══ */ /* Thanh nổi hẳn lên trên nội dung: viền đậm hơn + đổ bóng để nó đọc như một lớp riêng đang lơ lửng trên trang, không phẳng lì hòa vào nền. Vẫn ăn theo token nên đúng cả sáng/tối. */ .app-topbar { position: sticky; top: 0; z-index: 1030; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--wf-topbar-bg); color: var(--wf-topbar-fg); border-bottom: 1px solid var(--wf-topbar-border); box-shadow: var(--wf-shadow-md); } .topbar-spacer { flex: 1; } /* Ranh giới giữa phần ứng dụng và phần trang — thiếu nó thì tên trang bị đọc như một mục menu. */ .topbar-div { width: 1px; height: 20px; background: var(--wf-topbar-border); flex: 0 0 auto; margin: 0 2px; } /* ── Điều hướng ── */ .topnav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .topnav-btn { border: 0; background: none; cursor: pointer; padding: 5px 9px; border-radius: 3px; font-size: 13.5px; font-weight: 500; color: var(--wf-topbar-fg-muted); white-space: nowrap; } .topnav-btn:hover { background: var(--wf-topbar-chip); color: var(--wf-topbar-fg); } .topnav-btn.active { background: var(--wf-topbar-chip); color: var(--wf-topbar-fg); font-weight: 600; } .topnav-btn.dropdown-toggle::after { margin-left: 5px; opacity: .55; } /* Nút TÁCH "Chiến dịch": chữ (link) + mũi tên (toggle) ghép thành một cụm bo góc. Chữ đi thẳng /campaigns/manage; mũi tên mới xổ menu. */ .topnav-split { display: flex; align-items: stretch; } .topnav-split .topnav-split-main { border-radius: 3px 0 0 3px; } .topnav-split .topnav-split-caret { border-radius: 0 3px 3px 0; padding-left: 6px; padding-right: 8px; } .topnav-split .topnav-split-caret.dropdown-toggle::after { margin-left: 0; } /* Nút/badge do TRANG tự chèn vào PageBar (vd. "+ Thêm", "Nhập", "Tổng quan") vẫn dùng class Bootstrap chuẩn (btn-outline-secondary/btn-primary…) vốn tính cho nền sáng — đặt trên nền topbar xanh dương mới thì chữ/viền xám tối gần như biến mất. Đè màu NGAY TẠI ĐÂY (một chỗ, áp cho mọi trang) thay vì sửa từng trang. */ .app-topbar .btn { color: var(--wf-topbar-fg); border-color: var(--wf-topbar-border); background: var(--wf-topbar-chip); } .app-topbar .btn:hover, .app-topbar .btn:focus { background: rgba(255, 255, 255, .3); border-color: rgba(255, 255, 255, .45); color: #fff; } .app-topbar .btn-primary, .app-topbar .btn-success { background: #fff; border-color: #fff; color: var(--wf-topbar-bg); } .app-topbar .btn-primary:hover, .app-topbar .btn-success:hover { background: #fff; opacity: .92; color: var(--wf-topbar-bg); } .topnav-menu { --bs-dropdown-border-radius: 3px; padding: 4px; min-width: 208px; font-size: 13.5px; } .topnav-menu--wide { min-width: 236px; } .topnav-menu .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 3px; } .topnav-menu .dropdown-item.active { background: var(--wf-primary-soft); color: var(--wf-primary-fg); font-weight: 600; } .topnav-menu .dropdown-item svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; } .topnav-group { padding: 6px 8px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wf-text-3); } /* ── Ngữ cảnh trang trên thanh ── */ .pb-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; margin: 0; letter-spacing: 0; color: var(--wf-topbar-fg); } .pb-stats { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--wf-topbar-fg-muted); white-space: nowrap; } .pb-stats b { color: var(--wf-topbar-fg); font-weight: 600; } .pb-actions { display: flex; align-items: center; gap: 4px; } /* ── Icon góc phải ── */ .topbar-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; border: 0; background: none; color: var(--wf-topbar-fg-muted); cursor: pointer; text-decoration: none !important; } .topbar-icon:hover, .topbar-icon.active { background: var(--wf-topbar-chip); color: var(--wf-topbar-fg); } .topbar-icon svg { width: 17px; height: 17px; } .theme-ico-light { display: none; } [data-theme="dark"] .theme-ico-light { display: inline-flex; } [data-theme="dark"] .theme-ico-dark { display: none; } .topbar-user { border: 0; background: none; padding: 0 2px; cursor: pointer; } .topbar-user::after { display: none; } .topbar-user .user-avatar { width: 26px; height: 26px; font-size: 11px; background: var(--wf-topbar-chip); color: var(--wf-topbar-fg); } .topbar-menu { display: none; place-items: center; width: 30px; height: 30px; border: 0; background: none; border-radius: 3px; color: var(--wf-topbar-fg-muted); cursor: pointer; } .topbar-menu svg { width: 18px; height: 18px; } .nav-backdrop { display: none; } /* Màn hẹp: các menu điều hướng xếp dọc thành một tấm thả xuống dưới thanh, mở bằng nút ≡. Phần ngữ cảnh trang (số liệu, nút hành động) vẫn ở lại thanh — đó là thứ người dùng cần ngay, không phải thứ giấu sau một cú bấm. */ @media (max-width: 991px) { .app-content { padding: 22px 16px 40px; } .topbar-menu { display: inline-grid; } .brand-name, .pb-stats { display: none; } .topnav { display: none; position: fixed; top: 44px; left: 0; right: 0; z-index: 1036; flex-direction: column; align-items: stretch; gap: 0; padding: 6px; background: var(--wf-surface); border-bottom: 1px solid var(--wf-border); box-shadow: var(--wf-shadow-md); } body.nav-open .topnav { display: flex; } body.nav-open .nav-backdrop { display: block; position: fixed; inset: 44px 0 0; z-index: 1035; background: rgba(4, 8, 14, .5); } .topnav-item { width: 100%; } /* Trong menu hamburger dọc: chữ chiếm hết bề ngang, mũi tên nép phải — vẫn hai đích bấm. */ .topnav-split { width: 100%; } .topnav-split .topnav-split-main { flex: 1 1 auto; width: auto; } .topnav-split .topnav-split-caret { flex: 0 0 auto; width: auto; } /* Bảng menu thả xuống ở đây là nền SÁNG (var(--wf-surface) ở trên), không phải nền topbar — trả .topnav-btn về màu chữ thường, nếu không nó thừa hưởng màu nhạt-trên-xanh và biến mất trên nền trắng. */ .topnav-btn { width: 100%; text-align: left; padding: 8px 10px; color: var(--wf-text-2); } .topnav-btn:hover { background: var(--wf-surface-2); color: var(--wf-text); } .topnav-btn.active { background: var(--wf-primary-soft); color: var(--wf-primary-fg); } } /* ═══ Kiểu chữ trang ═══ */ h1, .h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .35rem; } /* đoạn mô tả ngay dưới tiêu đề trang */ h1 + p.text-muted, h1 + .text-muted { font-size: 12.5px; max-width: 860px; } h2, .h2 { font-size: 1.15rem; font-weight: 650; } .h5, h5 { font-size: .98rem; font-weight: 600; } .h6, h6 { font-size: .9rem; font-weight: 600; } .text-muted { color: var(--wf-text-2) !important; } /* Chữ phụ (.small / ) mặc định của Bootstrap là .875em ≈ 11.8px với cỡ gốc 13.5px — hơi nhỏ. Nâng lên 12.5px cho dễ đọc; site.css nạp sau Bootstrap nên đè được, không cần !important. Style inline (font-size:…) vẫn thắng nên các badge/nhãn cố ý nhỏ không bị ảnh hưởng. */ .small, small { font-size: 12.5px; } /* ═══ Card ═══ */ .card { border: 1px solid var(--wf-border-strong); border-radius: var(--wf-radius); box-shadow: var(--wf-shadow-md); background: var(--wf-surface); } .card-header { background: transparent; border-bottom: 1px solid var(--wf-border); font-size: .9rem; padding: .8rem 1rem; } .card-body { padding: 1rem; } /* ═══ Nút ═══ */ .btn { border-radius: var(--wf-radius-sm); font-weight: 550; font-size: .875rem; } .btn:focus-visible { box-shadow: 0 0 0 4px var(--wf-primary-ring); } .btn-primary { background: var(--wf-primary); border-color: var(--wf-primary); color: #fff; box-shadow: var(--wf-primary-glow); } .btn-primary:hover, .btn-primary:focus { background: var(--wf-primary-hover); border-color: var(--wf-primary-hover); color: #fff; } .btn-primary:disabled { background: var(--wf-primary); border-color: var(--wf-primary); opacity: .5; box-shadow: none; } .btn-outline-primary { color: var(--wf-primary); border-color: #c7d2fe; } .btn-outline-primary:hover { background: var(--wf-primary-soft); border-color: var(--wf-primary); color: var(--wf-primary); } .btn-outline-secondary { color: var(--wf-text-2); border-color: var(--wf-border); } .btn-outline-secondary:hover { background: #f1f5f9; color: var(--wf-text); border-color: #cbd5e1; } .btn-outline-danger { color: var(--wf-danger); border-color: #fecdd3; } .btn-outline-danger:hover { background: var(--wf-danger); border-color: var(--wf-danger); } /* ═══ Form ═══ */ .form-control, .form-select { border-radius: var(--wf-radius-sm); border-color: var(--wf-border); font-size: .875rem; color: var(--wf-text); } .form-control:focus, .form-select:focus { border-color: var(--wf-primary); box-shadow: 0 0 0 4px var(--wf-primary-ring); } .form-label { font-size: .82rem; font-weight: 600; color: var(--wf-text-2); margin-bottom: .3rem; } .form-control::placeholder { color: #b6c2d4; } /* ═══ Bảng ═══ */ .table { --bs-table-hover-bg: #f8fafc; font-size: .875rem; } .table { color: var(--wf-text); } .table thead th, .table > :not(caption) > * > th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-text-3); background: var(--wf-surface-3); border-bottom: 1px solid var(--wf-border); padding-top: .55rem; padding-bottom: .55rem; position: sticky; top: 0; z-index: 1; /* header dính khi cuộn bảng lớn */ } .table td { border-color: var(--wf-border); padding-top: .65rem; padding-bottom: .65rem; vertical-align: middle; } .table tbody tr:hover { background: var(--wf-surface-3); } /* ═══ Badge trạng thái ═══ */ .badge { font-weight: 600; border-radius: 999px; padding: .32em .7em; font-size: .72rem; letter-spacing: .01em; } .badge.bg-primary { background: var(--wf-primary-soft) !important; color: var(--wf-primary) !important; } .badge.bg-success { background: var(--wf-success-soft) !important; color: var(--wf-success) !important; } .badge.bg-warning { background: var(--wf-warning-soft) !important; color: var(--wf-warning) !important; } .badge.bg-danger { background: var(--wf-danger-soft) !important; color: var(--wf-danger) !important; } .badge.bg-info { background: var(--wf-info-soft) !important; color: var(--wf-info) !important; } .badge.bg-secondary { background: var(--wf-surface-2) !important; color: var(--wf-text-2) !important; } .badge.bg-dark { background: var(--wf-neutral-strong) !important; color: var(--wf-neutral-strong-fg) !important; } .badge.bg-light { background: var(--wf-surface-2) !important; color: var(--wf-text-2) !important; border: none !important; } /* ═══ Alert ═══ */ .alert { border-radius: var(--wf-radius-sm); font-size: .875rem; border-width: 1px; } .alert-success { background: var(--wf-success-soft); border-color: #a7f3d0; color: #065f46; } .alert-danger { background: var(--wf-danger-soft); border-color: #fecdd3; color: #9f1239; } .alert-warning { background: var(--wf-warning-soft); border-color: #fde68a; color: #92400e; } .alert-info { background: var(--wf-info-soft); border-color: #bae6fd; color: #075985; } .alert-secondary { background: #f8fafc; border-color: var(--wf-border); color: var(--wf-text-2); } /* ═══ Nav tabs (hồ sơ contact) ═══ */ .nav-tabs { border-bottom: 1px solid var(--wf-border); gap: 4px; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--wf-text-2); font-size: .875rem; font-weight: 550; padding: .55rem .9rem; } .nav-tabs .nav-link:hover { color: var(--wf-text); } .nav-tabs .nav-link.active { color: var(--wf-primary); border-bottom-color: var(--wf-primary); background: transparent; } /* ═══ Hồ sơ contact: layout 2 cột (đúng khuôn HubSpot/Salesforce/Intercom/Pipedrive) ═══ Nội dung chính (tab đang thao tác) bên trái; sidebar phải CỐ ĐỊNH cho dữ liệu định danh/riêng- của-người-xem (thuộc tính, thẩm định, ghi chú) — nhìn thấy song song, không phải bấm qua lại. */ .cd-layout { display: flex; align-items: flex-start; gap: 20px; } .cd-main { flex: 1 1 auto; min-width: 0; } .cd-sidebar { flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px; } @media (max-width: 960px) { .cd-layout { flex-direction: column; } .cd-sidebar { flex: 1 1 auto; width: 100%; } } .cd-sidebar-card { background: var(--wf-surface); border: 1px solid var(--wf-border-strong); border-radius: var(--wf-radius-sm); padding: 10px 12px; } .cd-sidebar-card > summary { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--wf-text); list-style: none; } .cd-sidebar-card > summary::-webkit-details-marker { display: none; } .cd-sidebar-card > summary::before { content: '▸'; color: var(--wf-text-3); font-size: 11px; } .cd-sidebar-card[open] > summary::before { content: '▾'; } .cd-sidebar-card-body { margin-top: 10px; } .cd-sidebar-card-body .table { font-size: .8rem; } /* Nút phụ trong tab "Hoạt động" — chuyển giữa 3 nguồn dữ liệu (sự kiện/email/rule) đã gộp chung một chỗ đứng thay vì 3 tab ngang riêng. Nhạt hơn hẳn .nav-tabs để không đọc như một hàng tab cấp ngang thứ hai — đây là điều khiển PHỤ bên trong một tab, không phải điều hướng cấp trang. */ .cd-activity-subtabs { display: flex; gap: 4px; margin-bottom: 4px; } .cd-activity-subtab { border: 1px solid transparent; background: none; cursor: pointer; padding: 5px 10px; border-radius: 999px; font-size: .8rem; font-weight: 550; color: var(--wf-text-2); } .cd-activity-subtab:hover { background: var(--wf-surface-2); color: var(--wf-text); } .cd-activity-subtab.active { background: var(--wf-primary-soft); color: var(--wf-primary-fg); font-weight: 600; } /* ═══ List group (kết quả lượt chạy) ═══ */ .list-group-item { border-color: var(--wf-border); font-size: .875rem; } .list-group-item:first-child { border-top-left-radius: var(--wf-radius-sm); border-top-right-radius: var(--wf-radius-sm); } .list-group-item:last-child { border-bottom-left-radius: var(--wf-radius-sm); border-bottom-right-radius: var(--wf-radius-sm); } details > summary { cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════ Các style riêng của từng trang (giữ từ trước, chỉnh màu theo token) ═══════════════════════════════════════════════════════════════════════ */ /* ===== Trình thiết kế chiến dịch kéo thả ===== */ .palette-item { border: 1px solid var(--wf-border); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #fff; cursor: grab; user-select: none; transition: box-shadow .15s, transform .15s; } .palette-item:hover { box-shadow: var(--wf-shadow-lg); transform: translateY(-1px); } .palette-item:active { cursor: grabbing; } .flow-canvas { background: repeating-linear-gradient(0deg, #fafafa, #fafafa 24px, #f4f4f4 25px); border: 1px dashed #ccc; border-radius: 10px; padding: 10px 14px; min-height: 420px; } .flow-block { border: 2px solid #999; border-radius: 10px; background: #fff; padding: 10px 12px; box-shadow: var(--wf-shadow); cursor: grab; } .flow-block:active { cursor: grabbing; } .flow-system { border-color: #4f46e5; } .flow-customer { border-color: #059669; } .flow-wait { border-color: #d97706; } .flow-condition { border-color: #0284c7; } .flow-branch { border-color: #e11d48; } .flow-split { border-color: #64748b; } .flow-until { border-color: #0f172a; } .flow-databranch { border-color: #7c3aed; } .drag-handle { cursor: grab; color: #999; } .dropzone { min-height: 26px; margin: 2px 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: .85rem; transition: background .1s, min-height .1s; } .dropzone.over { background: var(--wf-primary-soft); min-height: 40px; outline: 2px dashed var(--wf-primary); color: var(--wf-primary); } .flow-arrow { font-size: 1.1rem; color: #888; } .branch-label { margin-top: 4px; padding: 2px 8px; border-left: 3px solid #fd7e14; color: #fd7e14; font-size: .85rem; background: #fff7f0; border-radius: 0 6px 6px 0; } /* ===== Báo cáo: biểu đồ xu hướng (cột nhóm, 1 trục) ===== */ .trend-chart { display: flex; align-items: flex-end; gap: 8px; height: 170px; overflow-x: auto; padding: 8px 2px 0; } .trend-col { display: flex; flex-direction: column; align-items: center; min-width: 34px; } .trend-bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; } .trend-bar { width: 6px; border-radius: 3px 3px 0 0; min-height: 2px; display: block; transition: height .25s; } .trend-label { font-size: .7rem; color: var(--wf-text-3); margin-top: 5px; white-space: nowrap; } .trend-legend .lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } /* ===== Báo cáo: thanh tỉ lệ ===== */ .rate-bar-track { position: relative; background: #eef1f4; border-radius: 6px; height: 22px; overflow: hidden; } .rate-bar { height: 100%; border-radius: 6px 0 0 6px; transition: width .3s; } .rate-label { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font-size: .8rem; font-weight: 600; color: var(--wf-text); } .rate-bar-track { background: var(--wf-surface-2); } /* ═══════════════════════════════════════════════════════════════════════ PULSE v2 — component mới + vá màu cho dark mode ═══════════════════════════════════════════════════════════════════════ */ /* Vá dark mode cho component Bootstrap dùng nền trắng mặc định */ .card-header { color: var(--wf-text); } .form-control, .form-select, .form-check-input { background-color: var(--wf-surface); color: var(--wf-text); } .form-control:disabled, .form-select:disabled { background-color: var(--wf-surface-2); } .form-control::placeholder { color: var(--wf-text-3); } .input-group-text { background: var(--wf-surface-2); border-color: var(--wf-border); color: var(--wf-text-2); } .modal-content, .dropdown-menu, .offcanvas { background: var(--wf-surface); color: var(--wf-text); border-color: var(--wf-border); } .dropdown-item { color: var(--wf-text-2); } .dropdown-item:hover, .dropdown-item:focus { background: var(--wf-surface-2); color: var(--wf-text); } .list-group-item { background: var(--wf-surface); color: var(--wf-text); } /* Alert: chữ dùng biến -fg để đủ tương phản ở CẢ light lẫn dark */ .alert-success { background: var(--wf-success-soft); border-color: var(--wf-success-soft); color: var(--wf-success-fg); } .alert-danger { background: var(--wf-danger-soft); border-color: var(--wf-danger-soft); color: var(--wf-danger-fg); } .alert-warning { background: var(--wf-warning-soft); border-color: var(--wf-warning-soft); color: var(--wf-warning-fg); } .alert-info { background: var(--wf-info-soft); border-color: var(--wf-info-soft); color: var(--wf-info-fg); } .alert-secondary { background: var(--wf-surface-2); border-color: var(--wf-border); color: var(--wf-text-2); } /* Bảng lớn: khung cuộn ngang + cột số + zebra */ .table-scroll { overflow-x: auto; border-radius: var(--wf-radius-sm); } .num { text-align: right; font-variant-numeric: tabular-nums; } .table.table-zebra tbody tr:nth-child(even) { background: var(--wf-surface-3); } /* Hero dashboard (Trang chủ) */ .hero-panel { position: relative; overflow: hidden; background: #0d1218; color: #eef2f7; border: 1px solid rgba(255, 255, 255, .06); border-radius: 20px; padding: 26px 30px; box-shadow: var(--wf-shadow-md); } .hero-panel::before { content: ""; position: absolute; right: -30px; top: -50px; width: 230px; height: 230px; border-radius: 50%; background: var(--wf-primary); opacity: .18; filter: blur(55px); pointer-events: none; } .hero-metric { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; } .hero-accent { color: var(--wf-primary); } /* Sparkline: dãy cột div, không cần thư viện */ .spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; } .spark > i { flex: 1; background: var(--wf-primary-soft); border-radius: 2px 2px 0 0; min-height: 2px; display: block; } .spark > i.hot { background: var(--wf-primary); } /* Toast (thay alert nhét cứng) */ .toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 1080; display: flex; flex-direction: column; gap: 11px; } .toast-card { display: flex; gap: 10px; padding: 12px 14px; min-width: 260px; max-width: 340px; background: var(--wf-surface); border: 1px solid var(--wf-border); border-left: 3px solid var(--wf-primary); border-radius: 12px; box-shadow: var(--wf-shadow-lg); color: var(--wf-text); animation: wf-toastin .28s cubic-bezier(.2, .7, .2, 1); } .toast-card.is-success { border-left-color: var(--wf-success); } .toast-card.is-error { border-left-color: var(--wf-danger); } @keyframes wf-toastin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } /* Skeleton loading */ .skeleton { background: var(--wf-surface-2); border-radius: 6px; animation: wf-skel 1.2s ease-in-out infinite; } @keyframes wf-skel { 0%, 100% { opacity: .45; } 50% { opacity: .85; } } /* ===== Trang chủ ===== */ .kpi-ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none; } .kpi-ico svg { width: 20px; height: 20px; } .kpi-ico.kpi-sm { width: 34px; height: 34px; border-radius: 9px; } .kpi-ico.kpi-sm svg { width: 16px; height: 16px; } .kpi-info { background: var(--wf-info-soft); color: var(--wf-info-fg); } .kpi-danger { background: var(--wf-danger-soft); color: var(--wf-danger-fg); } .kpi-success { background: var(--wf-success-soft); color: var(--wf-success-fg); } .kpi-warning { background: var(--wf-warning-soft); color: var(--wf-warning-fg); } .btn-hero-ghost { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20); color: #fff; } .btn-hero-ghost:hover, .btn-hero-ghost:focus { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .28); color: #fff; } .onboarding-progress { height: 7px; background: var(--wf-surface-2); border-radius: 99px; overflow: hidden; } .onboarding-progress > span { display: block; height: 100%; background: var(--wf-primary); border-radius: 99px; transition: width .35s; } .onboarding-steps li { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; } .step-check { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--wf-border-strong); flex: none; display: grid; place-items: center; } .step-check.on { background: var(--wf-primary); border-color: var(--wf-primary); } .step-check.on::after { content: "✓"; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; } /* Avatar chữ cái (bảng contact, user…) */ .contact-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--wf-primary-soft); color: var(--wf-primary-fg); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; } /* ===== wf-explain: icon "?" giải thích tại chỗ (hover → popover) ===== */ .wf-explain { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--wf-border-strong); background: var(--wf-surface-2); color: var(--wf-text-3); font-size: 10px; font-weight: 800; line-height: 1; cursor: help; vertical-align: middle; transition: color .12s, border-color .12s, background .12s; } .wf-explain:hover, .wf-explain:focus-visible { color: var(--wf-primary); border-color: var(--wf-primary); background: var(--wf-primary-soft); } .wf-explain-pop { --bs-popover-max-width: 320px; } .wf-explain-pop .popover-body { font-size: .82rem; color: var(--wf-text); } .wf-explain-pop .popover-header { font-size: .78rem; font-weight: 700; } .wf-explain-pop .popover-body b, .wf-explain-pop .popover-body strong { color: var(--wf-text); } /* Focus rõ ràng + tôn trọng reduced-motion */ :focus-visible { outline: 2px solid var(--wf-primary); outline-offset: 2px; border-radius: 5px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ══ Hồ sơ contact: dải nhận dạng trên đầu trang ══════════════════════════════ Bảng sự kiện bên dưới nói contact ĐÃ LÀM GÌ, còn dải này nói contact LÀ AI — thiếu nó thì phải mở tab "Thuộc tính" mới biết mình đang xem ai. */ .cd-head { border: 1px solid var(--wf-border); border-radius: 4px; background: var(--wf-surface); padding: 8px 10px; margin-bottom: 10px; } .cd-head-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .cd-email { font-size: 15px; font-weight: 600; color: var(--wf-text); word-break: break-all; } .cd-tag { font-size: 11px; line-height: 1; color: #fff; padding: 3px 7px; border-radius: 3px; white-space: nowrap; } /* Cột tự co: màn hẹp xuống 2 cột, màn rộng dàn hết một hàng — không cần media query. */ .cd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 16px; } .cd-fact { display: flex; flex-direction: column; min-width: 0; } .cd-k { font-size: 11px; color: var(--wf-text-3); line-height: 1.3; } .cd-v { font-size: 13px; color: var(--wf-text); line-height: 1.4; overflow-wrap: anywhere; } /* Hậu tố "/ trang" cho các số chỉ đếm được trên phần đã tải — nhỏ và mờ để không tranh chỗ với con số, nhưng đủ thấy để không ai tưởng nó tính trên cả tệp. */ .cp-stat-scope { color: var(--wf-text-3); font-weight: 400; } /* ── Giải thích ẩn theo yêu cầu "giao diện chỉ có số liệu/bảng/bộ lọc" ────────────────────── Mọi đoạn diễn giải/chú thích gắn class .page-help bị ẩn mặc định; nút "Giải thích" trên thanh trên bật class .help-on ở để hiện tất cả cùng lúc. Đặt trên documentElement (không phải body) để set được ngay trong , tránh nháy hiện-rồi-ẩn khi tải trang. */ .page-help { display: none !important; } html.help-on .page-help { display: revert !important; } /* Nút bật đang ở trạng thái ON: tô nổi để biết đang hiện giải thích. */ html.help-on .help-toggle { color: var(--wf-accent, #4f46e5); } /* ═══════════════════════════════════════════════════════════════════════ TRANG CHỦ v2 — dashboard phân tích (thay hero cũ) Bố cục kiểu HubSpot/Klaviyo: hàng scorecard (số + delta so kỳ trước + sparkline) → xu hướng + phễu → bảng chiến dịch + "cần chú ý"/onboarding. Dùng lại .card, .kpi-ico, .trend-chart, .rate-bar của hệ có sẵn. ═══════════════════════════════════════════════════════════════════════ */ [v-cloak] { display: none !important; } .hd-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .hd-sub { color: var(--wf-text-2); font-size: .85rem; } .badge-sim { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--wf-warning-soft); color: var(--wf-warning-fg); } /* Bộ chọn khoảng thời gian (segmented) */ .hd-range { display: inline-flex; background: var(--wf-surface); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-sm); padding: 3px; box-shadow: var(--wf-shadow-sm); } .hd-range button { border: none; background: none; padding: 6px 13px; border-radius: 7px; font: inherit; font-size: .83rem; font-weight: 600; color: var(--wf-text-2); cursor: pointer; } .hd-range button.on { background: var(--wf-primary-soft); color: var(--wf-primary-fg); } .hd-grid { display: grid; gap: 16px; } .hd-kpis { grid-template-columns: repeat(5, 1fr); } .hd-2col { grid-template-columns: 1.55fr 1fr; align-items: start; } @media (max-width: 1100px) { .hd-kpis { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .hd-kpis { grid-template-columns: repeat(2, 1fr); } .hd-2col { grid-template-columns: 1fr; } } /* Scorecard */ .hd-score { padding: 15px 16px 13px; } .hd-lab { display: flex; align-items: center; gap: 8px; color: var(--wf-text-2); font-size: .82rem; font-weight: 600; } .hd-val { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 9px 0 4px; font-variant-numeric: tabular-nums; } .hd-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; } .hd-delta { display: inline-flex; align-items: center; gap: 3px; font-size: .77rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; } .hd-delta.up { background: var(--wf-success-soft); color: var(--wf-success-fg); } .hd-delta.down { background: var(--wf-danger-soft); color: var(--wf-danger-fg); } .hd-delta.flat { background: var(--wf-surface-2); color: var(--wf-text-2); font-weight: 600; } .hd-spark { width: 66px; height: 26px; flex: none; } /* Thêm 2 biến thể màu cho .kpi-ico (info/success/warning/danger đã có) */ .kpi-teal { background: var(--wf-primary-soft); color: var(--wf-primary-fg); } .kpi-purple { background: #efe6fd; color: #7c3aed; } [data-theme="dark"] .kpi-purple { background: rgba(124, 58, 237, .22); color: #c4b5fd; } /* Header nhỏ trong card + segmented phụ */ .hd-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .hd-ch strong { font-size: .98rem; } .hd-seg { display: inline-flex; background: var(--wf-surface-2); border-radius: 8px; padding: 2px; } .hd-seg button { border: none; background: none; padding: 4px 11px; border-radius: 6px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--wf-text-2); cursor: pointer; } .hd-seg button.on { background: var(--wf-surface); color: var(--wf-text); box-shadow: var(--wf-shadow-sm); } /* Phễu chuyển đổi */ .hd-funnel { display: flex; flex-direction: column; gap: 10px; } .hd-fn-top { display: flex; justify-content: space-between; font-size: .83rem; margin-bottom: 4px; } .hd-fn-top .n { font-weight: 700; font-variant-numeric: tabular-nums; } .hd-fn-track { height: 26px; background: var(--wf-surface-2); border-radius: 7px; overflow: hidden; } .hd-fn-fill { height: 100%; border-radius: 7px; display: flex; align-items: center; padding-left: 10px; color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; transition: width .35s; } .hd-fn-drop { font-size: .72rem; color: var(--wf-danger-fg); font-weight: 600; margin-top: 3px; } /* Bảng chiến dịch nổi bật — thanh tỉ lệ mảnh (khác .rate-bar 22px của Báo cáo) */ .hd-lead { width: 100%; border-collapse: collapse; } .hd-lead th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wf-text-3); font-weight: 700; padding: 0 10px 8px; } .hd-lead td { padding: 11px 10px; border-top: 1px solid var(--wf-border); font-size: .87rem; vertical-align: middle; } .hd-cname { font-weight: 600; } .hd-ratecell { display: flex; align-items: center; gap: 8px; } .hd-ratecell .v { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 46px; } .hd-bar-track { height: 7px; background: var(--wf-surface-2); border-radius: 99px; overflow: hidden; flex: 1; min-width: 54px; } .hd-bar { height: 100%; border-radius: 99px; } .linklike { color: var(--wf-primary-fg); text-decoration: none; font-weight: 600; font-size: .83rem; white-space: nowrap; } .linklike:hover { text-decoration: underline; } .chip { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--wf-surface-2); color: var(--wf-text-2); } .chip.pause { background: var(--wf-warning-soft); color: var(--wf-warning-fg); } /* "Cần chú ý" */ .hd-att { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--wf-border); } .hd-att:first-child { border-top: none; padding-top: 2px; } .hd-att .d { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; } .hd-att .d svg { width: 17px; height: 17px; } .hd-att .t { flex: 1; } .hd-att .t b { font-size: .87rem; display: block; } .hd-att .t span { font-size: .79rem; color: var(--wf-text-2); } .hd-empty { color: var(--wf-text-2); font-size: .85rem; text-align: center; padding: 20px 0; }