/* AMANKONG WebApp — Phần 1 — PC-first * CC-33: AMANKONG_GLOBAL_DESIGN_SYSTEM_V1 * Rules: ONE_WEBAPP_ONE_DESIGN_SYSTEM · GLOBAL_CONSISTENCY_BY_DEFAULT · * TOKEN_FIRST_COMPONENT_SECOND_PAGE_THIRD. * Canonical tokens live in :root below. Older aliases (e.g. --bg, --card, --brand, --ok) * are kept as pointers to canonical tokens so legacy rules still work; new rules MUST * use canonical tokens. See 00_TÀI_LIỆU_HỆ_THỐNG/AMANKONG_GLOBAL_DESIGN_SYSTEM.md. */ :root { /* THEME_V1 = LIGHT_ONLY (WEBAPP05-GLOBAL-UI-DESIGN-LANGUAGE-REBASELINE-V1-01-C01). WebApp V1 CHỈ có giao diện sáng. Khai báo này báo cho trình duyệt đừng tự tô tối ô nhập, thanh cuộn, hộp chọn khi hệ điều hành để chế độ tối. KHÔNG thêm @media (prefers-color-scheme: dark) cục bộ ở bất kỳ module nào. */ color-scheme: light; /* ---------- Sidebar chrome (single-brand dark shell, kept) ---------- */ --sidebar-bg: #0b1d3a; --sidebar-bg-2: #0e2143; --sidebar-fg: #cbd5e1; --sidebar-fg-mute: #94a3b8; --sidebar-active: #1e3a8a; --sidebar-active-bar: #3b82f6; /* ================= CANONICAL TOKENS (CC-33 V1) ================= */ /* A. Backgrounds — calm, low-eye-fatigue, PC-first */ --bg-app: #f2f4f8; --bg-surface: #ffffff; --bg-surface-soft: #f8fafc; --bg-surface-raised: #ffffff; --bg-subtle: #f1f5f9; --bg-emphasis-soft: #fdf9ee; /* B. Text — deep navy scale (không pure black) */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-disabled: #94a3b8; --text-inverse: #ffffff; --text-link: #2563eb; /* C. Border */ --border-soft: #e2e8f0; --border-default: #e5e7eb; --border-strong: #cbd5e1; --border-focus: #3b82f6; /* D. Brand / accent */ --brand-primary: #2563eb; --brand-primary-hover: #1d4ed8; --brand-primary-soft: #eff6ff; --accent-primary: var(--brand-primary); /* E. Semantic status (info / success / warning / danger / ai) */ --status-info: #0369a1; --status-info-soft: #eff6ff; --status-success: #059669; --status-success-soft:#ecfdf5; --status-warning: #d97706; --status-warning-soft:#fef7e8; --status-danger: #dc2626; --status-danger-soft: #fef2f2; --status-ai: #5b21b6; --status-ai-soft: #ede9fe; /* CRM V1.2 · trạng thái "AI + nhân viên phối hợp" (họ xanh ngọc) — khác AI tự xử lý (tím) và nhân viên bình thường (xanh lá) */ --status-collab: #0f766e; --status-collab-soft: #ccfbf1; /* F. Typography */ --font-family-ui: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif; --text-xs: 11px; /* metadata dày đặc, không dùng cho human-facing chính */ --text-sm: 12.5px; /* metadata bình thường */ --text-md: 13.5px; /* label, table cell, body dense */ --text-lg: 15px; /* body chính, card title nhỏ */ --text-xl: 17px; /* section title */ --text-2xl: 20px; /* page title */ --text-metric: 28px; /* dominant metric value */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --line-tight: 1.2; --line-normal: 1.45; --line-relaxed: 1.6; /* G. Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* H. Radius — business system, không quá tròn */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; /* I. Shadow — dùng dè */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 4px 12px rgba(15,23,42,.08); --shadow-floating: 0 12px 30px rgba(15,23,42,.18); /* ================= DESIGN SYSTEM V1 — LỚP BỔ SUNG ================= FORM: WEBAPP-DESIGN-SYSTEM-V1-PRODUCT-UI-CONSOLIDATION-01 · 14/09/2026 Token màu/chữ/khoảng cách của CC-33 đã có và ĐƯỢC GIỮ NGUYÊN. Phần dưới bổ sung những nhóm CC-33 chưa đặt tên: vai trò chữ, chiều cao control, mật độ bảng, đệm thẻ, và chồng sticky. Có tên rồi thì không ai còn phải chế số mới ở từng màn hình. */ /* J. VAI TRÒ CHỮ — gọi theo VIỆC, không gọi theo cỡ. Ai cũng biết "tên sản phẩm" là gì; "15px" thì mỗi người đoán một kiểu. */ --font-page-title: var(--text-2xl); /* tiêu đề trang 20px/700 */ --font-section-title: var(--text-xl); /* tiêu đề khối 17px/700 */ --font-card-title: var(--text-lg); /* tiêu đề thẻ 15px/600 */ --font-body: var(--text-md); /* chữ thường 13.5px */ --font-label: var(--text-md); /* nhãn trường 13.5px/600 */ --font-meta: var(--text-sm); /* dữ liệu phụ 12.5px */ --font-table-head: var(--text-sm); /* đầu bảng 12.5px/700 */ --font-table-cell: var(--text-md); /* ô bảng 13.5px */ --font-button: var(--text-md); /* nút 13.5px/600 */ --font-badge: var(--text-sm); /* huy hiệu 12.5px/600 */ --font-help: var(--text-sm); /* chữ giải thích 12.5px */ /* SÀN ĐỌC ĐƯỢC: không chữ người-đọc nào dưới 12px. --text-xs (11px) chỉ dành cho mã kỹ thuật và chú thích cực phụ, KHÔNG dùng cho dữ liệu nghiệp vụ. */ --font-min-readable: var(--text-sm); /* K. CONTROL — mọi ô nhập/nút/select trên một hàng phải CÙNG chiều cao */ --control-h: 34px; --control-h-sm: 28px; --control-pad-x: var(--space-3); --control-radius: var(--radius-sm); /* L. MẬT ĐỘ BẢNG */ --table-row-h: 40px; --table-cell-pad-y: var(--space-2); --table-cell-pad-x: var(--space-3); /* M. THẺ / KHỐI */ --card-pad: var(--space-4); --card-pad-sm: var(--space-3); --section-gap: var(--space-5); --stack-gap: var(--space-3); /* N. CHỒNG STICKY — HỢP ĐỒNG DÙNG CHUNG, một nguồn sự thật duy nhất. SỬA 14/09/2026 (VISUAL-REFINEMENT-01): năm token cũ ở đây từng được khai báo nhưng KHÔNG chỗ nào dùng (đo được: 0 lần). CSS thật lại chạy bằng --topbar-height viết cứng và z-index rải rác 30/20/15. Token mà không ai dùng thì còn tệ hơn không có token: người sau đọc sẽ tin nhầm. Nay gộp về ĐÚNG cơ chế đang chạy. BA TẦNG DÍNH, theo đúng thứ tự từ trên xuống: 1. thanh trên cùng top: 0 z: 30 2. Trung tâm CSKH top: tầng 1 z: 20 3. vỏ module (KPI/SP) top: tầng 1 + tầng 2 z: 15 Tầng dưới LUÔN có z nhỏ hơn tầng trên: nếu chạm nhau thì tầng trên che tầng dưới, không bao giờ có mép nội dung thò ra. Module KHÔNG được tự chế offset riêng — dùng var(--sticky-module-top) là đủ. ⚠️ BẪY ĐÃ DẪM PHẢI MỘT LẦN, GHI LẠI ĐỂ KHÔNG AI DẪM LẠI: --care-sticky-height do app.js đo rồi ghi lên PHẦN TỬ #main, KHÔNG ghi lên :root. Nếu đặt phép cộng offset ở :root thì lúc tính, --care-sticky-height chưa tồn tại trong phạm vi đó nên rơi về 0 — vỏ module dính lên sát topbar và BỊ KHỐI CSKH ĐÈ LÊN (z thấp hơn), tức là thanh tab + bộ lọc biến mất khi cuộn. Vì vậy phép cộng PHẢI đặt ở #main, nơi cả hai biến đều có thật. Chỉ z-index mới đặt được ở :root. */ --sticky-z-topbar: 30; --sticky-z-care: 20; --sticky-z-module: 15; /* Viền dưới mềm của lớp dính — phân biệt phần đứng yên với phần đang cuộn, mà không dùng bóng nặng. */ --sticky-edge: 0 6px 10px -8px rgba(15, 23, 42, .28); /* ---------- Legacy aliases (kept so pre-CC-33 rules keep working) ---------- */ --bg: var(--bg-app); --card: var(--bg-surface); --border: var(--border-default); --text: var(--text-primary); --text-mute: var(--text-muted); --brand: var(--brand-primary); --brand-2: var(--border-focus); --ok: var(--status-success); --warn: var(--status-warning); --danger: var(--status-danger); --purple: var(--status-ai); --pink: #ec4899; --shadow: var(--shadow-md); --font: var(--font-family-ui); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font); background: var(--bg-app); color: var(--text-primary); font-size: 14px; line-height: 1.5; } button { font: inherit; color: inherit; } a { color: var(--brand); } code { font-family: ui-monospace, SF Mono, Consolas, monospace; background: #eef2ff; padding: 1px 6px; border-radius: 4px; } .app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } /* ================= SIDEBAR ================= */ .sidebar { background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%); color: var(--sidebar-fg); display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow: hidden; } .brand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 6px 14px; border-bottom: 1px solid rgba(255,255,255,.08); min-width: 0; } .brand-logo { width: 100%; max-width: 156px; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(239,15,26,.35)); } .brand-sub { font-size: var(--font-meta); font-weight: var(--weight-medium); color: var(--sidebar-fg-mute); letter-spacing: .2px; text-align: center; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: transparent; color: var(--sidebar-fg); border-radius: 10px; cursor: pointer; text-align: left; width: 100%; font-size: 14px; font-weight: 500; position: relative; transition: background .15s, color .15s; } .nav-item:hover { background: rgba(255,255,255,.04); color: #fff; } .nav-item.active { background: var(--sidebar-active); color: #fff; } .nav-item.active::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; background: var(--sidebar-active-bar); border-radius: 0 3px 3px 0; } .nav-icon { width: 22px; display: inline-grid; place-items: center; font-size: 15px; } .nav-label { flex: 1; } .nav-badge { background: var(--danger); color: var(--text-inverse); font-size: var(--text-xs); font-weight: 700; padding: 1px 6px; border-radius: 999px; } .nav-parent.expanded { color: #fff; } .nav-children { display: none; padding: 2px 0 6px 44px; flex-direction: column; gap: 0; } .nav-children.open { display: flex; } .nav-child { border: 0; background: transparent; color: var(--sidebar-fg-mute); text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; } .nav-child:hover { color: #fff; background: rgba(255,255,255,.04); } .nav-child.active { color: #fff; background: rgba(59,130,246,.14); font-weight: 600; } .nav-child .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--brand-2); display: inline-block; } .sidebar-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 10px; } .user-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.03); } .user-avatar { width: 36px; height: 36px; border-radius: 999px; background: #3b82f6; color: #fff; font-weight: 700; display: grid; place-items: center; } .user-name { color: #fff; font-weight: 600; } .user-role { font-size: var(--font-meta); color: var(--sidebar-fg-mute); } .chev { margin-left: auto; color: var(--sidebar-fg-mute); } .db-badge { font-size: var(--font-meta); padding: 6px 10px; border-radius: 999px; text-align: center; } .db-badge-ok { background: rgba(16,185,129,.12); color: #34d399; } .db-badge-warn { background: rgba(239,68,68,.12); color: #f87171; } .db-badge-unknown { background: rgba(148,163,184,.1); color: var(--sidebar-fg-mute); } /* ================= MAIN ================= */ .main { display: flex; flex-direction: column; min-height: 100vh; } .topbar { display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--border); padding: 14px 28px; gap: 20px; } .welcome { display: flex; align-items: center; gap: 12px; } .welcome-avatar { width: 40px; height: 40px; border-radius: 10px; background: #eff6ff; display: grid; place-items: center; font-size: 18px; } .welcome-title { font-weight: 700; } .welcome-sub { font-size: var(--font-meta); color: var(--text-mute); } .topbar-right { display: flex; align-items: center; gap: 14px; } .search { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border-radius: 10px; padding: 8px 12px; width: 320px; } .search input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; } .icon-btn { position: relative; border: 0; background: transparent; font-size: 16px; cursor: pointer; padding: 6px; } .icon-btn .pip { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--danger); border-radius: 999px; } .avatar { width: 34px; height: 34px; border-radius: 999px; background: #64748b; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: var(--font-meta); } .pill { padding: 4px 10px; border-radius: 999px; font-size: var(--font-badge); background: #eef2ff; color: #3730a3; } .view { padding: 22px 28px 40px; } /* ================= HOME ================= */ .hero { text-align: center; padding: 12px 0 22px; } .hero h1 { margin: 0; font-size: 24px; letter-spacing: .3px; } .hero p { margin: 6px 0 0; color: var(--text-mute); } .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .block { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; } .block-business { border-top: 4px solid #3b82f6; } .block-ops { border-top: 4px solid #10b981; } .block-header { display: flex; align-items: center; gap: 14px; } .block-header h2 { margin: 0; font-size: 18px; letter-spacing: .3px; } .block-header p { margin: 4px 0 0; color: var(--text-mute); font-size: 13px; } .block-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 22px; } .block-icon-business { background: #3b82f6; } .block-icon-ops { background: #10b981; } .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .tile { border-radius: 16px; padding: 22px 14px; text-align: center; cursor: pointer; border: 1px solid transparent; transition: transform .12s, box-shadow .15s; display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; } .tile:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,23,42,.08); } .tile-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; } .tile-title { font-weight: 700; font-size: 15px; } .tile-desc { font-size: var(--font-help); color: var(--text-mute); line-height: 1.35; } .tile-soon .tile-desc { color: var(--text-muted); font-style: italic; } .tile-soon { opacity: .95; } .tile-soon:hover { transform: none; box-shadow: var(--shadow-sm); cursor: default; } .block-cta { margin-top: 6px; padding: 12px; border-radius: 12px; border: 0; cursor: pointer; background: #eff6ff; color: #1d4ed8; font-weight: 600; } .block-cta-ops { background: #ecfdf5; color: #047857; } .block-cta:hover { filter: brightness(.98); } /* pastel tile bgs */ .tile.tile-crm { background: #eff6ff; } .tile.tile-content { background: #ecfdf5; } .tile.tile-post { background: #fef2f2; } .tile.tile-quote { background: #fffbeb; } .tile.tile-order { background: #f5f3ff; } .tile.tile-kpi { background: #ecfeff; } .tile.tile-ops { background: #f8fafc; } .tile-icon-crm { background: #3b82f6; } .tile-icon-content { background: #10b981; } .tile-icon-post { background: #ef4444; } .tile-icon-quote { background: #f59e0b; } .tile-icon-order { background: #8b5cf6; } .tile-icon-kpi { background: #06b6d4; } .tile-icon-ops { background: #64748b; } /* ================= CRM PAGE ================= */ .crm { display: flex; flex-direction: column; gap: 16px; } .crumbs { color: var(--text-secondary); font-size: var(--text-md); font-weight: var(--weight-medium); } .crumbs b { color: var(--text-primary); font-weight: var(--weight-bold); } .page-header { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: var(--shadow-sm); } .page-header-left { display: flex; align-items: center; gap: 14px; } .page-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--brand-primary-soft); display: grid; place-items: center; font-size: 22px; color: var(--brand-primary); } .page-header h1 { margin: 0; font-size: var(--text-2xl); color: var(--text-primary); font-weight: var(--weight-bold); } .page-header p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--text-md); font-weight: var(--weight-medium); } /* CC-33 button system — PRIMARY / SECONDARY / GHOST / DANGER / ICON_ONLY */ /* C01: .btn trần = NÚT TRUNG TÍNH canonical (cùng hình dạng .btn-secondary). Trước đây .btn không có nền nên trình duyệt tô xám mặc định rgb(240,240,240). Mọi biến thể (.btn-primary/-secondary/-ghost/-danger) khai SAU và vẫn đè đúng. */ .btn { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 9px 14px; cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: var(--line-tight); transition: background .12s, border-color .12s, color .12s; } /* C01: vòng tiêu điểm của .btn định nghĩa MỘT lần ở mục "10 · TIÊU ĐIỂM BÀN PHÍM". Bản quầng bóng ở đây từng chồng lên viền outline ⇒ hai vòng. Đã gỡ. */ .btn:where(:hover:not(:disabled)) { background-color: var(--bg-surface-soft); } .btn-primary { background: var(--brand-primary); color: var(--text-inverse); border-color: var(--brand-primary); } .btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); } .btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-surface-soft); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-soft); } .btn-ghost:hover { background: var(--bg-surface-soft); color: var(--text-primary); } /* WEBAPP05-GLOBAL-UI-DESIGN-LANGUAGE-REBASELINE-V1-01: nút NGUY HIỂM dùng chung = viền đỏ, nền trắng, CHỈ đậm khi rê chuột (luật B5). Trước đây .btn-danger là nền đỏ ĐẶC — nổi hơn nút chính, trái luật, và khác hẳn .pm-danger-btn của Product. Nay cùng một ngôn ngữ. */ .btn.btn-danger { background: var(--bg-surface); color: var(--status-danger); border-color: var(--status-danger-soft); font-weight: var(--weight-medium); } .btn.btn-danger:hover:not(:disabled) { background: var(--status-danger-soft); border-color: var(--status-danger); font-weight: var(--weight-semibold); } /* .btn:disabled định nghĩa MỘT lần duy nhất ở mục "10 · TIÊU ĐIỂM BÀN PHÍM" (cuối tệp). */ .crm-tabs { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 4px 12px 0; display: flex; gap: 4px; overflow-x: auto; } .tab { border: 0; background: transparent; padding: 12px 16px; cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--text-secondary); white-space: nowrap; border-bottom: 3px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color .12s, border-color .12s; } .tab:hover { color: var(--text-primary); } .tab.active { color: var(--brand-primary-hover); border-bottom-color: var(--brand-primary-hover); background: transparent; } .tab:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.35); } .crm-panel { display: flex; flex-direction: column; gap: 16px; } /* KPI cards */ .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .kpi { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .1s; } .kpi:hover { box-shadow: var(--shadow); } .kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #fff; flex-shrink: 0; } .kpi-label { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--weight-bold); letter-spacing: .1px; } .kpi-value { font-size: var(--text-metric); font-weight: var(--weight-extrabold); margin-top: 4px; line-height: var(--line-tight); letter-spacing: -0.5px; color: var(--text-primary); } .kpi-delta { font-size: var(--font-meta); margin-top: 4px; } .kpi-delta.up { color: var(--ok); } .kpi-delta.down { color: var(--danger); } .kpi.kpi-blue .kpi-icon { background: #3b82f6; } .kpi.kpi-green .kpi-icon { background: #10b981; } .kpi.kpi-orange .kpi-icon { background: #f59e0b; } .kpi.kpi-red .kpi-icon { background: #ef4444; } .kpi.kpi-purple .kpi-icon { background: #8b5cf6; } /* Split panels */ .split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; } .panel { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; } .panel-title { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; } .panel-title a { font-size: var(--text-sm); text-decoration: none; color: var(--text-link); font-weight: var(--weight-semibold); } /* CC-33 table system — dense business readability */ table.data { width: 100%; border-collapse: collapse; font-size: var(--text-md); color: var(--text-primary); } table.data th, table.data td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--bg-subtle); } /* ĐẦU BẢNG — SỬA 14/09/2026 (VISUAL-REFINEMENT-01). Trước: --text-xs (11px). Chính hệ thiết kế này ghi --text-xs "không dùng cho human-facing chính", nhưng đầu bảng LÀ human-facing: nó nói cột đó là dữ liệu gì. Đo được 7 đầu cột ở 11px trên tab Model. Nay dùng đúng vai trò --font-table-head. */ table.data th { color: var(--text-secondary); font-weight: var(--weight-bold); font-size: var(--font-table-head); text-transform: uppercase; letter-spacing: .4px; background: var(--bg-surface-soft); border-bottom: 1px solid var(--border-default); white-space: nowrap; } table.data tr:last-child td { border-bottom: 0; } table.data tbody tr:hover { background: var(--bg-surface-soft); } /* CC-33 badge/chip system — INFO / SUCCESS / WARNING / DANGER / AI / NEUTRAL, all pill-shaped */ .tag { padding: 3px 10px; border-radius: 999px; font-size: var(--text-sm); font-weight: var(--weight-semibold); display: inline-block; line-height: var(--line-tight); } .tag-info { background: var(--status-info-soft); color: var(--status-info); } .tag-ok { background: var(--status-success-soft); color: var(--status-success); } .tag-warn { background: var(--status-warning-soft); color: var(--status-warning); } .tag-danger { background: var(--status-danger-soft); color: var(--status-danger); } .tag-purple, .tag-ai { background: var(--status-ai-soft); color: var(--status-ai); } .tag-neutral { background: var(--bg-subtle); color: var(--text-secondary); } /* Activity feed */ .feed { display: flex; flex-direction: column; gap: 12px; } .feed-item { display: flex; gap: 10px; padding: 10px 8px; border-radius: 10px; } .feed-item:hover { background: #f8fafc; } .feed-dot { width: 34px; height: 34px; border-radius: 10px; background: #eff6ff; display: grid; place-items: center; } .feed-body { flex: 1; } .feed-title { font-weight: 600; } .feed-sub { color: var(--text-mute); font-size: var(--font-meta); margin-top: 2px; } .feed-time { font-size: var(--font-meta); color: var(--text-mute); } /* Soon */ .soon { display: grid; place-items: center; min-height: 60vh; } .soon-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px 44px; text-align: center; max-width: 520px; box-shadow: var(--shadow); } .soon-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fffbeb; color: #92400e; font-weight: 700; font-size: var(--font-badge); margin-bottom: 12px; } .soon-card h1 { margin: 8px 0; } .soon-card p { color: var(--text-mute); } /* Error/empty */ .empty { padding: 30px; text-align: center; color: var(--text-mute); } .error { padding: 16px; border-radius: 10px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } /* Row actions SỬA 14/09/2026 (VISUAL-REFINEMENT-01) — TRÙNG ĐỊNH NGHĨA ĐÃ GỠ. Ở đây từng có một bản .btn-ghost và .btn-danger THỨ HAI, viết cứng màu (#f1f5f9, #1f2937, #fef2f2), cỡ chữ 12px và border: 0. Vì nằm sau, nó ÂM THẦM ĐÈ bản dùng token ở khối nút CC-33 phía trên. Hậu quả: cùng một tên component mà ra hai hình dạng khác nhau tuỳ thứ tự nạp — đúng thứ hệ thiết kế sinh ra để dẹp. Nay chỉ còn MỘT định nghĩa duy nhất cho mỗi nút, ở khối nút CC-33. */ .row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* Modal */ .modal-root { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 100; display: grid; place-items: center; padding: var(--space-5); } /* [CC-25] `display: grid` above phủ CSS default cho attribute [hidden]. Nếu không có rule dưới đây, `modal-root.hidden = true` vẫn render backdrop → toàn WebApp bị phủ xám, không click được. */ .modal-root[hidden] { display: none !important; } body.modal-open { overflow: hidden; } .modal-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); width: 100%; max-width: 560px; box-shadow: var(--shadow-floating); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-soft); } .modal-header h2 { margin: 0; font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); } .modal-close { background: transparent; border: 0; font-size: var(--text-2xl); line-height: 1; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-sm); } .modal-form { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--stack-gap); overflow: auto; } .modal-form .row { display: flex; flex-direction: column; gap: 6px; } /* CC-33 form/input system — reusable across future modules */ .modal-form label, .form-label { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-secondary); } .modal-form input, .modal-form select, .modal-form textarea, .form-input { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: inherit; font-size: var(--text-md); background: var(--bg-surface); color: var(--text-primary); transition: border-color .12s, box-shadow .12s; } .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus, .form-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(59,130,246,.35); } .modal-form input::placeholder, .form-input::placeholder { color: var(--text-muted); } .identity-row { display: grid; grid-template-columns: 110px 120px 1fr auto; gap: 8px; margin-bottom: 8px; } .identity-row select, .identity-row input { padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; } .identity-row .del { background: #fef2f2; color: #991b1b; border: 0; border-radius: 8px; padding: 0 10px; cursor: pointer; } .modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-1); } .form-msg { min-height: 20px; font-size: var(--font-body); } /* SCA-B · SCA-16 — ghi chú hướng dẫn thuộc về phần ĐIỀN, nên nằm TRƯỚC hàng nút. Bản cũ đặt nó sau `.modal-actions` và sau `.form-msg` (cao sẵn 20px dù rỗng), nên nó rơi xuống dưới Huỷ/Lưu, cách một khoảng trống đo được 52px. */ .modal-form .modal-note { margin-top: 0; } .form-msg.err { color: var(--status-danger); } .form-msg.ok { color: var(--status-success); } @media (max-width: 1180px) { .app-shell { grid-template-columns: 220px 1fr; } .home-grid { grid-template-columns: 1fr; } .kpi-row { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } } /* CC-27: AI Cost widget (PC-first, mobile-compact) */ .block-ai-cost { background: linear-gradient(135deg, #f0f9ff 0%, #ede9fe 100%); border: 1px solid #ddd6fe; border-radius: 18px; padding: 20px 24px; margin-top: 20px; } .block-icon-ai { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; } /* WEBAPP05-AI-MANAGEMENT-VISUAL-HARMONIZATION-V1-01 · reuse shared card language. Previously .ai-cost-card wrote raw hex; .ai-cost-percent used a decorative purple gradient with no semantic meaning. Both violated the design-system rules (§B0/§B3/§B4/§4 of the FORM). We now derive from tokens; % ngân sách stays neutral by default and only escalates to a warning tone through .ai-cost-percent.warn. */ .ai-cost-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--stack-gap); margin-top: var(--space-3); } .ai-cost-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--card-pad-sm); text-align: center; } .ai-cost-label { font-size: var(--font-meta); font-weight: var(--weight-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: var(--space-1); } .ai-cost-value { font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); word-break: break-word; font-variant-numeric: tabular-nums; } .ai-cost-percent { background: var(--bg-surface-soft); } .ai-cost-percent.warn { background: var(--status-warning-soft); border-color: var(--status-warning); } .ai-cost-percent.warn .ai-cost-value { color: var(--status-warning); } .ai-cost-error { grid-column: 1 / -1; color: #b91c1c; background: #fef2f2; } @media (max-width: 900px) { .ai-cost-grid { grid-template-columns: 1fr 1fr; } .ai-cost-value { font-size: var(--font-body); } } @media (max-width: 480px) { .ai-cost-grid { grid-template-columns: 1fr; } .block-ai-cost { padding: 14px 12px; } } /* ===== CC-28 → CC-31 polished: Live Care Center on Home ===== */ .block-care-center { background: #ffffff; border: 1px solid var(--border-soft); border-top: 3px solid #b45309; border-radius: 14px; padding: 22px 24px; margin-top: 22px; box-shadow: 0 1px 3px rgba(15,23,42,.04); } .block-care-center .block-header h2 { color: var(--text-primary); font-size: 17px; letter-spacing: .3px; font-weight: 700; margin: 0; } .block-care-center .block-header p { color: var(--text-secondary); font-size: 13px; margin: 4px 0 0; font-weight: 500; } .block-icon-care { background: #b45309; color:#fff; box-shadow: 0 4px 10px rgba(180,83,9,.20); } .care-metric-strip { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; margin-top:14px; } /* WEBAPP-UI-PRE-UAT-01 · HOME-CARE-METRIC-01 Nhãn và số nằm CÙNG MỘT HÀNG. Trước đây nhãn tiếng Việt dài ("Khả năng chốt cao") xuống dòng rồi số nằm dòng dưới, thẻ cao ~86px và ăn hết chiều dọc của khu hội thoại. Vẫn giữ nguyên hệ màu ngữ nghĩa (viền trái + màu số) của Design System. */ .care-metric { background: var(--bg-surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--border-soft); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; } .care-metric-label { font-size: 13px; color: var(--text-primary); font-weight: 700; letter-spacing: 0.1px; text-transform: none; line-height: 1.25; min-width: 0; } .care-metric-value { font-size: 21px; font-weight: 800; color: var(--text-primary); line-height: 1.15; letter-spacing: -0.4px; flex: 0 0 auto; font-variant-numeric: tabular-nums; } /* semantic emphasis via left-border + tinted value color */ .care-metric[data-kind="info"] { border-left-color: var(--status-info); } .care-metric[data-kind="success"] { border-left-color: var(--status-success); } .care-metric[data-kind="success"] .care-metric-value { color: var(--status-success); } .care-metric[data-kind="warning"] { border-left-color: var(--status-warning); background: var(--status-warning-soft); } .care-metric[data-kind="warning"] .care-metric-value { color: var(--status-warning); } .care-metric[data-kind="highvalue"]{ border-left-color: var(--status-success); } .care-metric[data-kind="highvalue"] .care-metric-value { color: var(--status-success); } .care-metric[data-kind="attention"]{ border-left-color: var(--accent-primary); } .care-metric[data-kind="attention"] .care-metric-value { color: var(--accent-primary); } .care-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:16px; } .care-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: transform .12s, box-shadow .15s, border-color .15s; } .care-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.06); border-color: #cbd5e1; } .care-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; } .care-card-name { font-weight: 700; font-size: 14px; color: var(--text-primary); line-height: 1.3; } .care-card-channel { font-size: var(--font-badge); padding: 2px 8px; background: var(--status-info-soft); color: var(--status-info); border-radius: 999px; font-weight: 600; letter-spacing: .2px; } .care-card-row { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; } .care-card-row b { color: var(--text-primary); font-weight: 600; } .care-card-status { font-size: var(--font-badge); font-weight: 600; margin-top: 8px; padding: 3px 8px; display: inline-block; border-radius: 6px; background: #ede9fe; color: #5b21b6; } .care-card-preview { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; line-height: 1.45; } .care-card-time { font-size: var(--font-meta); color: var(--text-muted); margin-top: 8px; } .care-action-zone { background: var(--bg-surface); border-radius: 14px; margin-top: 16px; padding: 18px 20px; border: 1px solid var(--border-soft); } .care-action-zone h3 { margin: 0 0 12px; color: var(--text-primary); font-size: 15px; } .action-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; } .col-title { font-size: var(--font-meta); color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .action-col button { margin: 4px 6px 4px 0; } @media (max-width: 1180px) { .care-metric-strip { grid-template-columns: repeat(3, 1fr); } .care-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .care-metric-strip { grid-template-columns: 1fr 1fr; } .care-cards { grid-template-columns: 1fr; } .action-grid { grid-template-columns: 1fr; } } /* ===== CC-28: Global Customer Care Dock ===== */ .care-dock { position:fixed; right:16px; bottom:16px; z-index:9999; background:#fff; border:1px solid var(--border-soft); border-radius:14px; box-shadow: 0 12px 30px rgba(15,23,42,.18); overflow:hidden; } .care-dock-expanded { width:400px; max-height:60vh; } /* CC-30R2: COMPACT phải đủ chỗ 1-2 preview cards, không chỉ header. */ .care-dock-compact { width:360px; max-height:200px; } .care-dock-hidden { display:none !important; } .dock-header { display:flex; justify-content:space-between; align-items:center; padding:11px 14px; background:#0f2547; color:#fff; } .dock-title { font-weight:700; font-size:13.5px; letter-spacing:.2px; } .dock-icon { margin-right:6px; } .dock-badge { display:inline-block; margin-left:8px; background:var(--status-danger); color:var(--text-inverse); font-size:var(--text-xs); padding:1px 7px; border-radius:999px; font-weight:700; } /* CC-30: dock icon-only controls (no permanent text label) */ .dock-actions { display:flex; align-items:center; gap:2px; } .dock-icon-btn { background:transparent; border:0; color:#94a3b8; cursor:pointer; width:26px; height:26px; padding:0; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; transition:background .12s, color .12s; } .dock-icon-btn:hover, .dock-icon-btn:focus-visible { background:rgba(255,255,255,.12); color:#fff; outline:none; } .dock-icon-btn:focus-visible { box-shadow:0 0 0 2px rgba(59,130,246,.6); } .care-dock-expanded .dock-icon-btn[data-dock="expand"] { display:none; } .care-dock-compact .dock-icon-btn[data-dock="compact"] { display:none; } .dock-body { padding:10px 12px; max-height:calc(60vh - 44px); overflow-y:auto; background: var(--bg-surface); } .dock-item { padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:var(--font-meta); } .dock-item:first-child { padding-top:6px; } .dock-item:last-child { border-bottom:0; padding-bottom:4px; } .dock-item-head { display:flex; justify-content:space-between; align-items:center; gap:8px; } .dock-item-head b { color: var(--text-primary); font-weight:700; font-size:13.5px; } .dock-item-channel { font-size:var(--font-badge); background: var(--status-info-soft); color: var(--status-info); padding:2px 8px; border-radius:8px; font-weight:700; letter-spacing:.2px; } .dock-item-meta { color: var(--text-secondary); font-size:var(--font-meta); margin-top:5px; font-weight:500; } .dock-item-meta b { color: var(--text-primary); font-weight:700; } .dock-item-status { color:var(--status-ai); background:var(--status-ai-soft); font-size:var(--font-badge); font-weight:700; margin-top:6px; padding:3px 9px; border-radius:6px; display:inline-block; } .dock-item-preview { color: var(--text-primary); font-size:var(--font-meta); margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; } .dock-compact-summary { font-size:var(--font-meta); color: var(--text-muted); padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--border-soft); } .dock-compact-summary b { color: var(--text-primary); font-weight:700; } /* CC-30: reopen là small edge handle, không phải big button */ .dock-reopen-handle { position:fixed; right:16px; bottom:16px; z-index:80; width:44px; height:44px; padding:0; border:0; border-radius:22px; background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(59,130,246,.35); transition:transform .12s, box-shadow .15s; } /* CC-30R: fix — display:inline-flex ở trên override attribute [hidden] mặc định. Cùng lớp bug với CC-25 .modal-root. Ép ẩn khi có attribute hidden. */ .dock-reopen-handle[hidden] { display:none !important; } .care-dock[hidden] { display:none !important; } .dock-reopen-handle:hover, .dock-reopen-handle:focus-visible { transform:translateY(-1px); box-shadow:0 8px 22px rgba(59,130,246,.45); outline:none; } .dock-reopen-icon { font-size:18px; line-height:1; } .dock-reopen-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; background:#ef4444; color:#fff; border:2px solid #fff; border-radius:9px; font-size:var(--text-xs); font-weight:700; line-height:14px; text-align:center; } .dock-reopen-badge[data-critical="true"] { background:#dc2626; } .dock-reopen-badge[data-count="0"] { display:none; } /* ===== CC-32: GLOBAL CUSTOMER CARE — application-shell region ===== Rules: CUSTOMER_CARE_IS_GLOBAL_NOT_PAGE_LOCAL · PERSISTENT_VISIBILITY_ADAPTIVE_SIZE · ONE_CUSTOMER_CARE_COMPONENT_ONE_STATE_ONE_DATA_SOURCE. Layout: normal flow inside #main. Default sits between topbar and #view-root. On HOME (#main[data-route="home"]) it sits BELOW the workspace tiles (matches CC-32 §14). */ #main { display:flex; flex-direction:column; --topbar-height: 69px; /* Hai token dưới đây PHẢI nằm ở đây, không được đưa lên :root — xem ghi chú CHỒNG STICKY trong :root. --care-sticky-height do app.js đo và ghi lên chính phần tử này, nên phép cộng chỉ đúng khi tính tại đây. */ --sticky-topbar-h: var(--topbar-height, 69px); --sticky-care-h: var(--care-sticky-height, 0px); --sticky-module-top: calc(var(--sticky-topbar-h) + var(--sticky-care-h)); } #main > .topbar { order: 1; flex: 0 0 auto; } #main > #global-care { order: 2; flex: 0 0 auto; } #main > #view-root { order: 3; flex: 1 1 auto; min-height: 0; } #main[data-route="home"] > #global-care { order: 4; } /* CC-32R2: PERSISTENT_VISIBILITY_ADAPTIVE_SIZE — topbar sticky on every route so scrollY does not eat header; on non-HOME routes, Global Customer Care becomes sticky right below the topbar so it stays visibly available while user scrolls long workspaces (CRM tables, AI Admin lists, coming-soon pages). HOME stays clean — the large expanded Care lives in normal flow at the bottom of the HOME workspace, no sticky duplicate. Same #global-care component — no second DOM node, no second state, no second polling loop. */ #main > .topbar { position: sticky; top: 0; z-index: var(--sticky-z-topbar); background: var(--bg-app, #ffffff); } #main:not([data-route="home"]) > #global-care { position: sticky; top: var(--sticky-topbar-h); z-index: var(--sticky-z-care); margin-top: 0; } .global-care { background: #ffffff; border: 1px solid var(--border-soft); border-top: 3px solid #b45309; border-radius: 14px; margin: 12px 24px 20px; padding: 16px 20px; box-shadow: 0 1px 3px rgba(15,23,42,.04); } .global-care[hidden] { display:none !important; } .global-care[data-state="COMPACT"] { padding: 10px 18px; } .global-care[data-state="EXPANDED"] { padding: 16px 20px; } .global-care-header { display:flex; align-items:center; justify-content:space-between; gap:12px; } .global-care-title { display:flex; align-items:center; gap:10px; min-width:0; } .global-care-title h2 { margin:0; color: var(--text-primary); font-weight: 700; letter-spacing:.2px; font-size: 15px; } .global-care[data-state="EXPANDED"] .global-care-title h2 { font-size: 17px; } .global-care-icon { font-size: 18px; line-height: 1; } .global-care-badge { display:inline-block; margin-left:4px; background: var(--status-danger); color:#fff; font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: 999px; } .global-care-actions { display:flex; align-items:center; gap:4px; } .gc-icon-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary); cursor: pointer; width: 28px; height: 28px; border-radius: 7px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: background .12s, color .12s, border-color .12s; } .gc-icon-btn:hover, .gc-icon-btn:focus-visible { background: var(--bg-surface-soft); color: var(--text-primary); border-color: var(--border-soft); outline: none; } .gc-icon-btn:focus-visible { box-shadow: 0 0 0 2px rgba(59,130,246,.4); } /* Hide the state control matching the current state (one-way toggles). */ .global-care[data-state="EXPANDED"] .gc-icon-btn[data-gc="EXPANDED"] { display: none; } .global-care[data-state="COMPACT"] .gc-icon-btn[data-gc="COMPACT"] { display: none; } /* Metrics area — COMPACT summary line vs EXPANDED 5-metric strip. Reuses .care-metric* tokens from CC-31R. WEBAPP-UI-PRE-UAT-01: dải chỉ số chỉ còn 1 hàng chữ nên khoảng cách cũng thu lại, phần chiều dọc tiết kiệm được chuyển hết sang khu khách hàng/hội thoại bên dưới. */ .global-care[data-state="COMPACT"] #global-care-metrics { margin-top: 8px; } .global-care[data-state="EXPANDED"] #global-care-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; } .care-compact-summary { font-size: 13px; color: var(--text-primary); font-weight: 500; line-height: 1.4; } .care-compact-summary b { font-weight: 800; color: var(--text-primary); } /* Cards — COMPACT: horizontal 2 slim cards; EXPANDED: 3-4 rich cards grid. Reuses .care-card* tokens. */ .global-care[data-state="COMPACT"] #global-care-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 10px; } .global-care[data-state="EXPANDED"] #global-care-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 12px; /* CHAT_AREA_SPACE_IMPROVED: khu hội thoại nhận phần chiều dọc lấy lại từ dải chỉ số — luôn có tối thiểu 2 hàng thẻ khách hàng, cuộn trong chính nó thay vì đẩy dài cả trang. */ align-content: start; max-height: 44vh; overflow-y: auto; padding-right: 2px; } .global-care[data-state="EXPANDED"] #global-care-cards .empty { grid-column: 1 / -1; } .global-care .care-card { padding: 12px 14px; } .global-care[data-state="COMPACT"] .care-card { padding: 10px 12px; } .global-care[data-state="COMPACT"] .care-card-preview { -webkit-line-clamp: 1; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; } /* .care-card-meta: same treatment as .care-card-row (used inside #global-care cards). */ .care-card-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; font-weight: 500; } .care-card-meta b { color: var(--text-primary); font-weight: 700; } @media (max-width: 1180px) { .global-care[data-state="EXPANDED"] #global-care-metrics { grid-template-columns: repeat(3, 1fr); } .global-care[data-state="EXPANDED"] #global-care-cards { grid-template-columns: repeat(2, 1fr); } /* CC-32R2: keep COMPACT dense — 2 slim cards side-by-side even on narrower desktop, so sticky panel stays short. */ .global-care[data-state="COMPACT"] #global-care-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 720px) { .global-care[data-state="EXPANDED"] #global-care-metrics { grid-template-columns: repeat(2, 1fr); } .global-care[data-state="EXPANDED"] #global-care-cards { grid-template-columns: 1fr; } } /* CC-32 reopen handle (small edge floater, HIDDEN mode only). */ .care-reopen-handle { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(59,130,246,.35); transition: transform .12s, box-shadow .15s; } .care-reopen-handle[hidden] { display: none !important; } .care-reopen-handle:hover, .care-reopen-handle:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(59,130,246,.45); outline: none; } .care-reopen-icon { font-size: 18px; line-height: 1; } .care-reopen-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: #ef4444; color: #fff; border: 2px solid #fff; border-radius: 9px; font-size: var(--text-xs); font-weight: 700; line-height: 14px; text-align: center; } .care-reopen-badge[data-critical="true"] { background: #dc2626; } .care-reopen-badge[data-count="0"] { display: none; } /* ===== CC-33R2: label-with-technical-identifier pattern ===== Primary Vietnamese label + small secondary technical identifier below. Rule: HUMAN_PRIMARY_LABEL_VIETNAMESE, TECHNICAL_IDENTIFIER_SECONDARY. */ .label-primary { color: var(--text-primary); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--line-tight); } /* SỬA 14/09/2026: .label-secondary mang cả dữ liệu nghiệp vụ (ví dụ "chưa có giá"), không chỉ mã kỹ thuật — nên phải đạt sàn đọc được, không dùng --text-xs. */ .label-secondary { color: var(--text-muted); font-size: var(--font-meta); font-weight: var(--weight-medium); font-family: ui-monospace, SF Mono, Consolas, monospace; margin-top: 2px; letter-spacing: .2px; } /* ===== CC-28: AI Admin pages ===== */ .ai-admin-panel .panel { margin-bottom:14px; } .ai-version-group { margin-top:14px; padding:12px; background:#f8fafc; border-radius:10px; } .ai-version-group h4 { margin:0 0 8px; } .ai-admin-cards, .ai-health-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:10px; } .stat { background: var(--bg-surface-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } /* VISUAL-HARMONIZATION-V1: .stat-label bump 11px → 12.5px (var(--font-meta)) để đúng luật B1 của hệ thiết kế (11px chỉ cho mã kỹ thuật/badge đếm số). .stat được dùng duy nhất bởi AI Management renderers (đã grep xác nhận), không có cross-module regression. */ .stat-label { font-size: var(--font-meta); color: var(--text-secondary); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .4px; } .stat-value { font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); margin-top: var(--space-1); word-break: break-word; line-height: var(--line-tight); } /* ===== WEBAPP05-AI-MANAGEMENT-VISUAL-HARMONIZATION-V1-01 ===== Đây là bản refactor của khối CSS `AI-MANAGEMENT-CONSOLIDATION-V1-01` cũ. Toàn bộ giá trị viết cứng (radius, màu, font-size, letter-spacing, transform) đã được thay bằng token canonical đã có ở `:root`, và các thành phần trùng vai trò với hệ thống chung (empty state, badge, header trang) được hướng về `.ds-empty(-sm)` / `.tag-*` / `.crumbs` thay vì bespoke local. Không thêm token mới; không định nghĩa lại token có sẵn. */ /* Sáu thẻ domain đọc như MỘT selector nghiệp vụ (§5 FORM), không phải sáu widget. */ .ai-domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stack-gap); margin-top: var(--space-3); } .ai-domain-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); padding: var(--card-pad-sm) var(--card-pad); text-align: left; cursor: pointer; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: var(--text-primary); font: inherit; transition: border-color .12s ease, background .12s ease; } .ai-domain-card:hover { border-color: var(--border-focus); background: var(--brand-primary-soft); } .ai-domain-card:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.35); } .ai-domain-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-surface-soft); color: var(--text-secondary); display: grid; place-items: center; font-size: var(--text-lg); line-height: 1; } .ai-domain-name { font-size: var(--font-card-title); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--line-tight); } .ai-domain-meta { grid-column: 2 / -1; font-size: var(--font-meta); color: var(--text-secondary); font-weight: var(--weight-medium); margin-top: var(--space-1); } /* Header của một domain — dùng cùng khuôn với `.crumbs` + nút ghost, không tự chế viền. */ .ai-domain-header { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-3); } .ai-domain-header-title { font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); } /* Tab con — giữ khuôn "chip" nhưng dùng brand primary + soft, không hardcode #0f172a. */ .ai-subtabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-3); overflow-x: auto; } .ai-subtab { padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; color: var(--text-secondary); cursor: pointer; white-space: nowrap; font-size: var(--font-button); font-weight: var(--weight-semibold); line-height: var(--line-tight); position: relative; top: 1px; } .ai-subtab:hover { background: var(--bg-surface-soft); color: var(--text-primary); } .ai-subtab.active { background: var(--bg-surface); border-color: var(--border-soft); color: var(--brand-primary); box-shadow: inset 0 -3px 0 var(--brand-primary); } .ai-subpanel { padding-top: var(--space-2); } /* Section heading nội bộ của một tab (tương đương .panel-title thu nhỏ). */ .ai-subsection-title { font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); margin: 0 0 var(--space-2); } /* Ghi chú, hint dùng chung — thay cho các inline style="color:var(--text-mute)" rải rác. */ .ai-hint { color: var(--text-secondary); font-size: var(--font-help); } .ai-hint b { color: var(--text-primary); font-weight: var(--weight-semibold); } /* Quy tắc chung: list đọc dễ, không tự chế line-height. */ .ai-global-rules { margin: var(--space-2) 0 var(--space-3) var(--space-5); padding: 0; line-height: var(--line-relaxed); font-size: var(--font-body); color: var(--text-primary); } .ai-global-rules li { margin-bottom: var(--space-1); } /* Empty-state cũ `.ai-empty-state` giữ để backward-compat cho các trang khác nếu có tham chiếu, nhưng ánh xạ về cùng khuôn với `.ds-empty-sm` (dashed border-strong + bg-soft). */ .ai-empty-state { display: inline-block; padding: var(--space-2) var(--space-3); border: 1px dashed var(--border-strong); background: var(--bg-surface-soft); color: var(--text-muted); border-radius: var(--radius-sm); font-size: var(--font-help); font-style: normal; font-weight: var(--weight-medium); } /* Responsive: gói 3 → 2 → 1 cột theo breakpoint chung của WebApp. */ @media (max-width: 1100px) { .ai-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .ai-domain-grid { grid-template-columns: 1fr; } .ai-subtabs { gap: 2px; } .ai-subtab { padding: var(--space-2) var(--space-3); } } /* ===== WEBAPP-AI-MANAGEMENT-2WORKSPACE-UI-V1-01 ===== Quản trị AI tái cấu trúc về 2 workspace: Trung tâm AI + Agent & Điều khiển. Nguồn thiết kế: 2 ảnh reference IMAGE_A/IMAGE_B của FORM. Kích thước / màu / bo góc / khoảng cách đọc token canonical (:root); KHÔNG thêm token mới. Reuse tối đa `.panel`, `.stat`, `.tag`, `.ds-empty`, `.btn`, `.crumbs`. */ /* --- Workspace 1: TRUNG TÂM AI (giám sát toàn hệ) --- */ .ai-center-shell { display: flex; flex-direction: column; gap: var(--section-gap); } .ai-center-header-actions { display: flex; align-items: center; gap: var(--space-3); } .ai-center-timestamp { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-surface-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); font-size: var(--font-meta); color: var(--text-secondary); } .ai-center-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--stack-gap); } .ai-center-summary-card { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); align-items: center; padding: var(--card-pad-sm) var(--card-pad); background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); min-height: 76px; } .ai-center-summary-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 20px; line-height: 1; background: var(--bg-surface-soft); color: var(--text-secondary); } .ai-center-summary-icon.ok { background: var(--status-success-soft); color: var(--status-success); } .ai-center-summary-icon.warn { background: var(--status-warning-soft); color: var(--status-warning); } .ai-center-summary-icon.error { background: var(--status-danger-soft); color: var(--status-danger); } .ai-center-summary-icon.info { background: var(--status-info-soft); color: var(--status-info); } .ai-center-summary-icon.paused { background: var(--bg-subtle); color: var(--text-secondary); } .ai-center-summary-label { font-size: var(--font-meta); color: var(--text-secondary); font-weight: var(--weight-semibold); } .ai-center-summary-value { font-size: var(--text-metric); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--line-tight); margin-top: 2px; font-variant-numeric: tabular-nums; } .ai-center-summary-note { font-size: var(--font-help); color: var(--text-muted); margin-top: 2px; } /* Grid ba khối: Trạng thái AI · Chi phí · Phân bổ */ .ai-center-3col { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--stack-gap); } .ai-center-3col > .panel { margin: 0; } /* Donut trạng thái */ .ai-center-donut { display: grid; place-items: center; position: relative; width: 160px; height: 160px; margin: var(--space-2) auto; } .ai-center-donut svg { width: 160px; height: 160px; transform: rotate(-90deg); } .ai-center-donut-center { position: absolute; text-align: center; } .ai-center-donut-center .n { font-size: 26px; font-weight: var(--weight-bold); color: var(--text-primary); } .ai-center-donut-center .l { font-size: var(--font-meta); color: var(--text-secondary); } .ai-center-status-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .ai-center-status-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--font-body); color: var(--text-primary); } .ai-center-status-row .dot { width: 10px; height: 10px; border-radius: 50%; } /* Chi phí block */ .ai-center-cost-hero { text-align: left; } .ai-center-cost-value { font-size: 30px; font-weight: var(--weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; } .ai-center-cost-sub { font-size: var(--font-meta); color: var(--text-secondary); margin-top: 2px; } .ai-center-cost-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: var(--space-3); } .ai-center-cost-bars .bar { flex: 1; background: var(--brand-primary-soft); border-radius: 2px 2px 0 0; border-top: 3px solid var(--brand-primary); min-height: 4px; } .ai-center-cost-axis { display: flex; justify-content: space-between; font-size: var(--font-help); color: var(--text-muted); margin-top: var(--space-1); } /* Phân bổ chi phí theo Agent (bar list) */ .ai-center-alloc { display: flex; flex-direction: column; gap: var(--space-2); } .ai-center-alloc-row { display: grid; grid-template-columns: 12px 1fr 40px 60px; align-items: center; gap: var(--space-2); font-size: var(--font-meta); } .ai-center-alloc-row .dot { width: 10px; height: 10px; border-radius: 50%; } .ai-center-alloc-row .name { color: var(--text-primary); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-center-alloc-row .pct { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .ai-center-alloc-row .usd { text-align: right; color: var(--text-primary); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; } .ai-center-alloc-track { grid-column: 2 / 3; height: 4px; background: var(--bg-subtle); border-radius: 999px; margin-top: 4px; overflow: hidden; } .ai-center-alloc-track .fill { height: 100%; background: var(--brand-primary); border-radius: 999px; } /* 3 khối dưới: Cảnh báo, Tiến trình, Hoạt động */ .ai-center-lists { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--stack-gap); } .ai-center-list-item { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); } .ai-center-list-item:last-child { border-bottom: 0; } .ai-center-list-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-surface-soft); color: var(--text-secondary); display: grid; place-items: center; font-size: 16px; } .ai-center-list-icon.warn { background: var(--status-warning-soft); color: var(--status-warning); } .ai-center-list-icon.ok { background: var(--status-success-soft); color: var(--status-success); } .ai-center-list-icon.info { background: var(--status-info-soft); color: var(--status-info); } .ai-center-list-title { font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.3; } .ai-center-list-note { font-size: var(--font-meta); color: var(--text-secondary); margin-top: 2px; } .ai-center-list-when { font-size: var(--font-meta); color: var(--text-muted); text-align: right; white-space: nowrap; } /* Mini System Chat */ .ai-center-mini-chat { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-2); } .ai-center-mini-chat-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .ai-center-mini-chat-head h3 { margin: 0; font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); } .ai-center-mini-chat-note { font-size: var(--font-meta); color: var(--text-secondary); } .ai-center-mini-chat-prompts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); } .ai-center-mini-chat-prompt { padding: 6px var(--space-3); background: var(--bg-surface-soft); border: 1px solid var(--border-soft); border-radius: 999px; font-size: var(--font-meta); color: var(--text-secondary); cursor: pointer; } .ai-center-mini-chat-prompt:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); } .ai-center-mini-chat-prompt:disabled { opacity: .6; cursor: not-allowed; } .ai-center-mini-chat-input { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1); } .ai-center-mini-chat-input textarea { flex: 1; min-height: 44px; font: inherit; font-size: 15px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); resize: none; } .ai-center-mini-chat-input textarea:disabled { background: var(--bg-subtle); color: var(--text-muted); } .ai-center-mini-chat-input button { min-height: 44px; } .ai-center-mini-chat-gap { padding: var(--space-2) var(--space-3); background: var(--status-warning-soft); border: 1px solid var(--status-warning); color: var(--status-warning); border-radius: var(--radius-sm); font-size: var(--font-help); } /* --- Workspace 2: AGENT & ĐIỀU KHIỂN (3 cột) --- */ .ai-agents-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .ai-agents-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr) 380px; gap: var(--stack-gap); align-items: stretch; } .ai-agents-col { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); display: flex; flex-direction: column; min-height: 520px; overflow: hidden; } .ai-agents-col-head { padding: var(--space-3) var(--card-pad); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .ai-agents-col-head h3 { margin: 0; font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); } .ai-agents-col-body { flex: 1 1 auto; overflow-y: auto; } /* Left: agent list */ .ai-agents-list { list-style: none; margin: 0; padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; } .ai-agents-list-item { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s ease, border-color .12s ease; } .ai-agents-list-item:hover { background: var(--bg-surface-soft); } .ai-agents-list-item.active { background: var(--brand-primary-soft); border-color: var(--brand-primary); } .ai-agents-list-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-surface-soft); color: var(--text-secondary); display: grid; place-items: center; font-size: 18px; } .ai-agents-list-name { font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-primary); } .ai-agents-list-meta { font-size: var(--font-meta); color: var(--text-secondary); margin-top: 2px; } .ai-agents-list-count { text-align: right; font-size: var(--font-meta); color: var(--text-secondary); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; } .ai-agents-list-count .badge { display: inline-block; min-width: 22px; padding: 0 6px; height: 20px; line-height: 20px; background: var(--brand-primary); color: var(--text-inverse); border-radius: 999px; font-size: 11px; font-weight: var(--weight-bold); } .ai-agents-list-search { padding: var(--space-2) var(--card-pad); border-bottom: 1px solid var(--border-soft); } .ai-agents-list-search input { width: 100%; font: inherit; font-size: var(--font-body); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-surface-soft); } /* Center: agent detail */ .ai-agents-detail-head { padding: var(--card-pad); display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); align-items: center; border-bottom: 1px solid var(--border-soft); } .ai-agents-detail-icon { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--brand-primary-soft); color: var(--brand-primary); display: grid; place-items: center; font-size: 26px; } .ai-agents-detail-title { font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); } .ai-agents-detail-sub { font-size: var(--font-meta); color: var(--text-secondary); margin-top: 2px; } .ai-agents-detail-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .ai-agents-detail-tabs { display: flex; gap: var(--space-1); padding: 0 var(--card-pad); border-bottom: 1px solid var(--border-soft); overflow-x: auto; } .ai-agents-detail-tab { padding: var(--space-2) var(--space-3); background: transparent; border: 0; color: var(--text-secondary); font-size: var(--font-button); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; } .ai-agents-detail-tab:hover { color: var(--text-primary); } .ai-agents-detail-tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); } .ai-agents-detail-panel { padding: var(--card-pad); overflow-y: auto; } .ai-agents-detail-panel h4 { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); } .ai-agents-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--stack-gap); margin-top: var(--space-2); } .ai-agents-metric { padding: var(--space-3); background: var(--bg-surface-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-md); } .ai-agents-metric .l { font-size: var(--font-meta); color: var(--text-secondary); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .3px; } .ai-agents-metric .v { font-size: 20px; font-weight: var(--weight-bold); color: var(--text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; word-break: break-word; } .ai-agents-kv { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-2) var(--space-3); font-size: var(--font-body); } .ai-agents-kv dt { color: var(--text-secondary); font-weight: var(--weight-medium); } .ai-agents-kv dd { margin: 0; color: var(--text-primary); font-weight: var(--weight-semibold); } /* Right: agent chat */ .ai-agents-chat-head { padding: var(--card-pad); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .ai-agents-chat-title { font-size: var(--font-card-title); font-weight: var(--weight-bold); color: var(--text-primary); } .ai-agents-chat-sub { font-size: var(--font-meta); color: var(--text-secondary); margin-top: 2px; } .ai-agents-chat-body { flex: 1 1 auto; overflow-y: auto; padding: var(--card-pad); background: var(--bg-surface-soft); display: flex; flex-direction: column; gap: var(--space-2); } .ai-agents-chat-msg { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-soft); background: var(--bg-surface); max-width: 92%; font-size: var(--font-body); line-height: var(--line-normal); } .ai-agents-chat-msg.user { align-self: flex-end; background: var(--brand-primary-soft); border-color: var(--brand-primary); } .ai-agents-chat-msg.assistant { align-self: flex-start; } .ai-agents-chat-msg.system { align-self: stretch; background: var(--status-warning-soft); border-color: var(--status-warning); font-size: var(--font-help); } .ai-agents-chat-footer { padding: var(--space-3) var(--card-pad); border-top: 1px solid var(--border-soft); } .ai-agents-chat-input { display: flex; gap: var(--space-2); align-items: flex-end; } .ai-agents-chat-input textarea { flex: 1; min-height: 44px; font: inherit; font-size: 15px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); resize: vertical; max-height: 30vh; } .ai-agents-chat-input textarea:disabled { background: var(--bg-subtle); color: var(--text-muted); } .ai-agents-chat-gap { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--status-warning-soft); color: var(--status-warning); border: 1px solid var(--status-warning); border-radius: var(--radius-sm); font-size: var(--font-help); } /* Responsive 3-col → 2-col → 1-col */ @media (max-width: 1280px) { .ai-agents-shell { grid-template-columns: 280px minmax(0, 1fr); } .ai-agents-shell .ai-agents-col.chat { grid-column: 1 / -1; } .ai-center-3col { grid-template-columns: 1fr 1fr; } .ai-center-3col > .panel:nth-child(3) { grid-column: 1 / -1; } .ai-center-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ai-center-lists { grid-template-columns: 1fr 1fr; } .ai-center-lists > *:nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 900px) { .ai-agents-shell { grid-template-columns: 1fr; } .ai-center-3col { grid-template-columns: 1fr; } .ai-center-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-center-lists { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ai-center-summary-grid { grid-template-columns: 1fr; } .ai-agents-detail-head { grid-template-columns: 44px 1fr; } .ai-agents-detail-actions { grid-column: 1 / -1; } .ai-agents-kv { grid-template-columns: 1fr; } .ai-agents-kv dt { color: var(--text-muted); font-size: var(--font-help); } } /* ===== WEBAPP-AI-MANAGEMENT-VISUAL-POLISH-SHARED-V1-02 ===== Polish sau UAT Owner (2026-09-22). Áp dụng cho CẢ Trung tâm AI VÀ Agent & Điều khiển (visual language shared). KHÔNG thay đổi bố cục 3 vùng của Agent & Điều khiển. Đọc TOKEN canonical, không thêm token. */ /* --- Page header COMPACT (§3) — dùng chung cho ai-admin (cả 2 workspace) --- */ .ai-admin .page-header { padding: var(--space-3) 0; /* trước ~24 → 12 */ gap: var(--space-3); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: space-between; } .ai-admin .page-header-left { display: flex; align-items: center; gap: var(--space-3); } .ai-admin .page-icon { width: 40px; height: 40px; /* trước 48+ */ border-radius: var(--radius-sm); background: var(--brand-primary-soft); color: var(--brand-primary); display: grid; place-items: center; font-size: 18px; } .ai-admin .page-header h1 { font-size: 18px !important; /* Owner đề xuất §11: 18px / 600–650 */ font-weight: var(--weight-bold); line-height: var(--line-tight); margin: 0; color: var(--text-primary); } .ai-admin .page-header p { font-size: var(--font-meta); /* subtitle nhỏ hơn, sát body */ color: var(--text-secondary); margin: 2px 0 0; line-height: 1.4; } .ai-admin .crumbs { font-size: var(--font-help); color: var(--text-muted); margin-bottom: var(--space-2); font-weight: var(--weight-medium); } .ai-admin .crumbs b { color: var(--text-secondary); font-weight: var(--weight-semibold); } /* --- SIDEBAR active state polish (§4, §21 · V1-02, tinh chỉnh V1-05 §2) V1-02 dùng brand-primary-soft (#eff6ff) — nhưng trên nền sidebar navy (#0b1d3a) nó trông gần như trắng gắt (Owner phản hồi V1-05 §2). Nay đổi sang navy soft (rgba brand-primary 15%) → tint hoà với navy, text chuyển sang trắng/blue sáng. */ .nav-child.active { background: rgba(59, 130, 246, 0.18); color: var(--text-inverse); font-weight: var(--weight-semibold); position: relative; } .nav-child.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: #60a5fa; border-radius: 2px; } .nav-child.active span { color: #dbeafe; } .nav-child.active:hover { background: rgba(59, 130, 246, 0.26); } /* Hover trên các nav-child KHÔNG active giữ nhẹ hơn active. */ .nav-child:not(.active):hover { background: rgba(148, 163, 184, 0.10); } /* --- KPI STRIP compact (§5, §6) — 60–72px, số nổi, semantic color only ở icon+accent --- */ .ai-center-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); /* gap nhỏ hơn để 5 card cùng hàng */ margin-bottom: var(--space-4); } .ai-center-summary-card { grid-template-columns: 36px 1fr; /* icon nhỏ hơn */ gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 64px; /* target 60–72 */ border-left: 3px solid transparent; transition: border-color .12s ease; } .ai-center-summary-card.total { border-left-color: var(--brand-primary); } .ai-center-summary-card.active { border-left-color: var(--status-success); } .ai-center-summary-card.warn { border-left-color: var(--status-warning); } .ai-center-summary-card.error { border-left-color: var(--status-danger); } .ai-center-summary-card.paused { border-left-color: var(--text-disabled); } .ai-center-summary-icon { width: 36px; height: 36px; font-size: 16px; } .ai-center-summary-label { font-size: 12.5px; color: var(--text-secondary); font-weight: var(--weight-semibold); text-transform: none; letter-spacing: 0; line-height: 1.2; } .ai-center-summary-value { font-size: 22px; /* Owner §5: 20–24px */ font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.15; margin-top: 2px; } .ai-center-summary-note { /* §5: tối đa 1 dòng phụ ngắn NẾU thật sự hữu ích. Ẩn note dài technical. */ display: none; } .ai-center-summary-note.show { display: block; font-size: var(--font-help); color: var(--text-muted); margin-top: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- MAIN GRID density (§7, §8) — card header baseline aligned, empty compact --- */ .ai-center-3col { gap: var(--space-3); margin-bottom: var(--space-3); } .ai-center-3col > .panel { padding: var(--card-pad-sm); gap: var(--space-2); } .ai-center-3col > .panel .panel-title { font-size: var(--font-card-title); line-height: 1.3; } .ai-center-lists { gap: var(--space-3); margin-bottom: var(--space-4); } .ai-center-lists > .panel { padding: var(--card-pad-sm); gap: var(--space-2); } .ai-center-lists > .panel .panel-title { font-size: var(--font-card-title); line-height: 1.3; } .ai-center-list-item { padding: var(--space-2) 0; grid-template-columns: 28px 1fr auto; gap: var(--space-2); } .ai-center-list-icon { width: 28px; height: 28px; font-size: 14px; } .ai-center-list-title { font-size: var(--font-body); } .ai-center-list-note { font-size: var(--font-help); line-height: 1.35; margin-top: 1px; } /* Cost hero smaller */ .ai-center-cost-value { font-size: 24px; } .ai-center-cost-sub { font-size: var(--font-help); line-height: 1.35; } .ai-center-cost-bars { height: 60px; margin-top: var(--space-2); } .ai-center-donut { width: 130px; height: 130px; margin: var(--space-1) auto var(--space-2); } .ai-center-donut svg { width: 130px; height: 130px; } .ai-center-donut-center .n { font-size: 22px; } .ai-center-donut-center .l { font-size: var(--font-help); } .ai-center-status-list { gap: var(--space-1); margin-top: var(--space-2); } .ai-center-status-row { font-size: var(--font-help); } /* --- BACKEND GAP presentation compact (§9) — icon + short title, 1 line, tooltip cho tech --- */ .ai-backend-gap { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); font-size: var(--font-help); color: var(--text-secondary); line-height: 1.35; } .ai-backend-gap-icon { color: var(--text-muted); font-size: 14px; text-align: center; } .ai-backend-gap b { color: var(--text-primary); font-weight: var(--weight-semibold); } /* Empty state compact — CHỈ 1 dòng cho AI Center; không tạo khối trắng lớn (§8, §9) */ .ai-admin .ai-empty-state { display: block; padding: var(--space-2) var(--space-3); font-size: var(--font-help); border-radius: var(--radius-sm); } .ai-admin .ai-hint { font-size: var(--font-help); line-height: 1.4; color: var(--text-secondary); margin-top: var(--space-1); } /* --- MINI SYSTEM CHAT polish (§10) — compact, không thành block khổng lồ --- */ .ai-center-mini-chat { padding: var(--space-3) var(--card-pad); gap: var(--space-2); } .ai-center-mini-chat-head { gap: var(--space-2); } .ai-center-mini-chat-head h3 { font-size: var(--font-card-title); } .ai-center-mini-chat-note { font-size: var(--font-help); line-height: 1.4; } .ai-center-mini-chat-prompt { padding: 4px var(--space-3); font-size: var(--font-help); } .ai-center-mini-chat-input textarea { min-height: 40px; font-size: 14px; } .ai-center-mini-chat-gap { padding: var(--space-2) var(--space-3); background: var(--bg-subtle); border: 1px solid var(--border-soft); color: var(--text-secondary); border-radius: var(--radius-sm); font-size: var(--font-help); } /* --- AGENT & ĐIỀU KHIỂN shared polish (§14–20) — 0 layout change, chỉ visual --- */ .ai-agents-shell { gap: var(--space-3); } .ai-agents-col { min-height: 480px; border-radius: var(--radius-md); } .ai-agents-col-head { padding: var(--space-3) var(--space-4); } .ai-agents-col-head h3 { font-size: var(--font-card-title); } .ai-agents-list-item { padding: var(--space-2) var(--space-3); grid-template-columns: 36px 1fr auto; gap: var(--space-2); } .ai-agents-list-icon { width: 36px; height: 36px; font-size: 16px; } .ai-agents-list-name { font-size: var(--font-body); font-weight: var(--weight-semibold); } .ai-agents-list-meta { font-size: var(--font-help); margin-top: 1px; } .ai-agents-list-count { font-size: var(--font-help); } /* Agent detail — cùng visual language */ .ai-agents-detail-head { padding: var(--space-3) var(--space-4); grid-template-columns: 44px 1fr auto; gap: var(--space-3); } .ai-agents-detail-icon { width: 44px; height: 44px; font-size: 20px; border-radius: var(--radius-sm); } .ai-agents-detail-title { font-size: 15px; } .ai-agents-detail-sub { font-size: var(--font-help); } .ai-agents-detail-tabs { padding: 0 var(--space-4); } .ai-agents-detail-tab { padding: var(--space-2) var(--space-3); font-size: 13px; } .ai-agents-detail-panel { padding: var(--space-3) var(--space-4); } .ai-agents-detail-panel h4 { font-size: var(--font-card-title); margin: var(--space-3) 0 var(--space-1); } .ai-agents-metric { padding: var(--space-3); } .ai-agents-metric .l { font-size: 11.5px; } .ai-agents-metric .v { font-size: 18px; } .ai-agents-kv { font-size: 13px; grid-template-columns: 160px 1fr; gap: 4px var(--space-3); } .ai-agents-kv dt { font-size: var(--font-help); } .ai-agents-kv dd { font-size: 13px; } /* Agent chat — sync visual với AI Center chat */ .ai-agents-chat-head { padding: var(--space-3) var(--space-4); } .ai-agents-chat-title { font-size: var(--font-card-title); } .ai-agents-chat-sub { font-size: var(--font-help); } .ai-agents-chat-body { padding: var(--space-3) var(--space-4); gap: var(--space-2); } .ai-agents-chat-msg { font-size: 13px; line-height: 1.4; } .ai-agents-chat-footer { padding: var(--space-3) var(--space-4); } .ai-agents-chat-input textarea { font-size: 14px; min-height: 40px; } .ai-agents-chat-gap { background: var(--bg-subtle); border-color: var(--border-soft); color: var(--text-secondary); font-size: var(--font-help); } /* Badge unification: BACKEND_GAP không dùng warning gắt — dùng neutral. */ .tag-gap { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-soft); font-weight: var(--weight-medium); } /* Header status/timestamp chip (right side of ai-admin header) */ .ai-header-slot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-help); color: var(--text-secondary); } .ai-header-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-3); border-radius: 999px; background: var(--status-success-soft); color: var(--status-success); font-weight: var(--weight-semibold); font-size: 12px; } .ai-header-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-success); } .ai-header-status.warn { background: var(--status-warning-soft); color: var(--status-warning); } .ai-header-status.warn .dot { background: var(--status-warning); } /* --- Responsive polish --- */ @media (max-width: 1024px) { .ai-center-summary-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } } @media (max-width: 900px) { .ai-center-summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .ai-center-summary-card.paused { display: none; } .ai-admin .page-header { flex-wrap: wrap; } .ai-header-slot { order: 3; width: 100%; margin-top: var(--space-2); } } @media (max-width: 640px) { .ai-center-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .ai-center-summary-card.paused { display: grid; } .ai-admin .page-header h1 { font-size: 17px !important; } .ai-center-cost-value { font-size: 20px; } } @media (max-width: 420px) { .ai-center-summary-grid { grid-template-columns: 1fr; } } /* ===== WEBAPP-AI-CENTER-PROVIDER-PERFORMANCE-UI-V1-03 ===== Provider Performance là khối chính; 3-layer surface; pastel KPI; activity table; mini system chat 2-col với ops cards. Reuse token, KHÔNG thêm token mới. */ /* --- 3-layer surface (§25) --- */ .ai-admin { background: var(--bg-app); } .ai-admin .ai-center-shell { display: flex; flex-direction: column; gap: var(--space-4); } .ai-admin .panel { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: 0 1px 2px rgba(15,23,42,.04); } .ai-muted { color: var(--text-muted); font-style: normal; } .ai-panel-icon { display: inline-flex; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--brand-primary-soft); color: var(--brand-primary); align-items: center; justify-content: center; font-size: 14px; margin-right: 6px; vertical-align: -6px; } /* --- KPI STRIP pastel (§6) --- */ .ai-center-summary-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-3); margin-bottom: 0; } .ai-center-summary-card { grid-template-columns: 44px 1fr; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-soft); border-left: 4px solid transparent; min-height: 84px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .ai-center-summary-card .ai-center-summary-icon { width: 40px; height: 40px; font-size: 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,.6); } .ai-center-summary-card.kpi-total { background: linear-gradient(180deg, #eff6ff, #ffffff); border-left-color: #3b82f6; } .ai-center-summary-card.kpi-total .ai-center-summary-icon { background: #dbeafe; color: #1d4ed8; } .ai-center-summary-card.kpi-active { background: linear-gradient(180deg, #ecfdf5, #ffffff); border-left-color: #10b981; } .ai-center-summary-card.kpi-active .ai-center-summary-icon { background: #d1fae5; color: #047857; } .ai-center-summary-card.kpi-warn { background: linear-gradient(180deg, #fef7e8, #ffffff); border-left-color: #f59e0b; } .ai-center-summary-card.kpi-warn .ai-center-summary-icon { background: #fef3c7; color: #b45309; } .ai-center-summary-card.kpi-error { background: linear-gradient(180deg, #fef2f2, #ffffff); border-left-color: #ef4444; } .ai-center-summary-card.kpi-error .ai-center-summary-icon { background: #fee2e2; color: #b91c1c; } .ai-center-summary-card.kpi-paused { background: linear-gradient(180deg, #f1f5f9, #ffffff); border-left-color: #94a3b8; } .ai-center-summary-card.kpi-paused .ai-center-summary-icon { background: #e2e8f0; color: #475569; } .ai-center-summary-card .ai-center-summary-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; } .ai-center-summary-card .ai-center-summary-value { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.15; margin-top: 2px; } .ai-center-summary-card .ai-center-summary-note.show { font-size: 11.5px; color: var(--text-muted); font-style: normal; margin-top: 3px; white-space: normal; text-overflow: initial; overflow: visible; } /* --- PROVIDER TABLE (khối chính) --- */ /* V1-04 · Provider panel gọn hơn (§11–14). Header 1 hàng compact, table 7 cột, row height 44–50px, chi tiết chuyển sang expandable detail row. */ .ai-prov-panel { padding: var(--space-3) var(--card-pad); gap: var(--space-2); } .ai-prov-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-soft); } .ai-prov-head > div:first-child { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .ai-prov-head .ai-hint { font-size: 12.5px; } .ai-prov-table th, .ai-prov-table td { padding: 12px 12px; font-size: 13px; vertical-align: middle; } .ai-prov-table thead th { background: transparent; font-weight: 600; color: var(--text-secondary); font-size: 12.5px; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--border-soft); } .ai-prov-table tbody tr { transition: background .1s; } .ai-prov-row { cursor: pointer; } .ai-prov-row:hover { background: var(--bg-surface-soft); } .ai-prov-row:focus-visible { outline: none; background: var(--brand-primary-soft); } .ai-prov-row.is-open { background: var(--brand-primary-soft); } .ai-prov-row.is-open + .ai-prov-detail-row { background: var(--bg-surface-soft); } .ai-prov-row + tr { border-top: 0; } .ai-prov-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-primary); } .ai-prov-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: var(--bg-subtle); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; } .ai-prov-icon.prov-openai { background: #dcfce7; color: #059669; } .ai-prov-icon.prov-deepseek { background: #dbeafe; color: #2563eb; } .ai-prov-icon.prov-anthropic{ background: #fef3c7; color: #b45309; } .ai-prov-icon.prov-gemini { background: #f5f3ff; color: #7c3aed; } .ai-prov-name-primary { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.15; } .ai-prov-name-secondary { font-size: 12px; color: var(--text-muted); line-height: 1.2; margin-top: 1px; } /* Success cell với mini bar + số */ .ai-prov-succ-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 74px; } .ai-prov-succ-pct { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; } .ai-prov-succ-pct.tag-color-ok { color: var(--status-success); } .ai-prov-succ-pct.tag-color-warn { color: var(--status-warning); } .ai-prov-succ-pct.tag-color-danger { color: var(--status-danger); } .ai-prov-succ-pct.tag-color-muted { color: var(--text-muted); } .ai-prov-succ-bar { width: 60px; height: 4px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; } .ai-prov-succ-bar-fill { height: 100%; border-radius: 999px; } .ai-prov-succ-bar-fill.fill-ok { background: var(--status-success); } .ai-prov-succ-bar-fill.fill-warn { background: var(--status-warning); } .ai-prov-succ-bar-fill.fill-danger { background: var(--status-danger); } .ai-prov-succ-bar-fill.fill-muted { background: var(--text-disabled); } /* Cost prominent (§9) */ .ai-prov-cost { font-weight: 700; font-size: 13.5px; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* Usage cell — bar + % inline right-aligned */ .ai-prov-usage-cell { display: flex; align-items: center; gap: 8px; min-width: 130px; } .ai-prov-usage-bar { flex: 1; max-width: 90px; height: 6px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; } .ai-prov-usage-bar > div { height: 100%; background: linear-gradient(90deg, #3b82f6, #6366f1); border-radius: 999px; } .ai-prov-usage-pct { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; } /* Expandable detail row */ .ai-prov-detail { padding: var(--space-2) 0 var(--space-3); } .ai-prov-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); } .ai-prov-detail-item { display: flex; flex-direction: column; gap: 2px; } .ai-prov-detail-label { font-size: 12px; color: var(--text-muted); font-weight: 500; } .ai-prov-detail-value { font-size: 13.5px; color: var(--text-primary); font-weight: 600; } .ai-prov-detail-foot { margin-top: var(--space-2); } @media (max-width: 900px) { .ai-prov-detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .ai-prov-detail-grid { grid-template-columns: 1fr; } } .tag-danger { background: var(--status-danger-soft); color: var(--status-danger); } /* --- OPS 2-col grid (Vận hành + Mini chat) --- */ .ai-center-ops-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-3); } .ai-center-ops-grid > .panel { padding: var(--card-pad); } .ai-ops-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-2); } .ai-ops-card { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--bg-surface-soft); border: 1px solid var(--border-soft); } .ai-ops-card.kpi-active { background: linear-gradient(180deg, #ecfdf5, var(--bg-surface)); border-color: #a7f3d0; } .ai-ops-card.kpi-info { background: linear-gradient(180deg, #eff6ff, var(--bg-surface)); border-color: #bfdbfe; } .ai-ops-card.kpi-warn { background: linear-gradient(180deg, #fef7e8, var(--bg-surface)); border-color: #fde68a; } .ai-ops-card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(255,255,255,.65); display: grid; place-items: center; font-size: 16px; color: var(--text-secondary); } .ai-ops-card.kpi-active .ai-ops-card-icon { color: #059669; } .ai-ops-card.kpi-info .ai-ops-card-icon { color: #0369a1; } .ai-ops-card.kpi-warn .ai-ops-card-icon { color: #b45309; } .ai-ops-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; } .ai-ops-card-value { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.1; margin-top: 2px; } .ai-ops-card-note { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* --- Mini chat V1-03 panel (soft violet accent) --- */ .ai-mini-panel { background: linear-gradient(180deg, #f5f3ff, var(--bg-surface)); border-color: #ddd6fe; padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-2); } .ai-mini-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .ai-mini-panel .ai-panel-icon { background: #ede9fe; color: #6d28d9; } .ai-mini-panel .ai-center-mini-chat-prompt { background: var(--bg-surface); border-color: var(--border-soft); } /* --- Recent Activity grid --- */ .ai-center-activity-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); } .ai-center-activity-grid > .panel { padding: var(--card-pad); } .ai-activity-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); } .ai-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; } .ai-chip { padding: 4px 10px; border: 1px solid var(--border-soft); background: var(--bg-surface); border-radius: 999px; font-size: 12px; color: var(--text-secondary); cursor: pointer; } .ai-chip:hover { background: var(--bg-surface-soft); color: var(--text-primary); } .ai-chip.active { background: var(--brand-primary); color: var(--text-inverse); border-color: var(--brand-primary); } .ai-activity-table th, .ai-activity-table td { padding: 8px 12px; font-size: 12.5px; vertical-align: middle; } .ai-activity-table thead th { background: var(--bg-surface-soft); color: var(--text-secondary); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; } /* --- Tips panel --- */ .ai-tips-panel { background: linear-gradient(180deg, #fef3c7, var(--bg-surface)); border-color: #fde68a; } .ai-tips-panel .ai-panel-icon { background: #fef3c7; color: #b45309; } /* --- Header slot polish for V1-03 --- */ .ai-header-slot { align-items: center; } .ai-header-slot .btn-sm { padding: 5px 12px; font-size: 12.5px; } /* --- Responsive V1-03 (override cả V1-02 để cascade đúng) --- */ @media (max-width: 1180px) { .ai-center-ops-grid { grid-template-columns: 1fr; } .ai-ops-cards { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { .ai-center-summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .ai-center-summary-card.kpi-paused { display: none; } .ai-center-activity-grid { grid-template-columns: 1fr; } .ai-ops-cards { grid-template-columns: repeat(2, 1fr); } .ai-prov-table th:nth-child(7), .ai-prov-table td:nth-child(7) { display: none; } } @media (max-width: 640px) { .ai-center-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .ai-center-summary-card.kpi-paused { display: grid; } .ai-ops-cards { grid-template-columns: 1fr; } .ai-prov-table th, .ai-prov-table td { padding: 10px 8px; font-size: 12.5px; } /* V1-04 @640: giữ nguyên 7 cột chính; ẩn cột "Phản hồi TB" (5) nếu quá chật */ .ai-prov-table th:nth-child(5), .ai-prov-table td:nth-child(5) { display: none; } /* Cột 7 "Tỷ trọng" chuyển thành bar-only, ẩn số % để tiết kiệm chỗ */ .ai-prov-usage-pct { display: none; } } @media (max-width: 420px) { .ai-center-summary-grid { grid-template-columns: 1fr; } } /* ===== WEBAPP05-GLOBAL-AI-ASSISTANT-SHELL-PRODUCT-PILOT-V1-01 ===== Shared assistant shell (drawer trên desktop, bottom sheet trên mobile). Kích thước / màu / bo góc / khoảng cách đọc token canonical; nút "✨ Trợ lý AI" ở toolbar module CỐ Ý không dùng class .tab (đây KHÔNG phải tab nghiệp vụ). */ /* Nút Trợ lý AI trong toolbar Product (canonical, dùng lại được cho module khác). */ .pm-tab-assistant { margin-left: auto; /* đẩy nút về cuối hàng tabs */ align-self: center; /* SCA-B · SCA-06 — nhãn nút KHÔNG được xuống dòng và nút KHÔNG được co. Thiếu hai dòng này, hàng tab chật làm chữ "Trợ lý AI" gãy hai dòng: đo được nút cao 41px ở 1366 và 55px ở 1024 (một dòng là 28px), kéo cao cả hàng tab. */ flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px var(--space-3); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); border-radius: 999px; font-size: var(--font-button); font-weight: var(--weight-semibold); cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; line-height: 1; } .pm-tab-assistant:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); color: var(--brand-primary); } .pm-tab-assistant[aria-expanded="true"] { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--text-inverse); } .pm-tab-assistant:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.35); } .pm-tab-assistant .pm-tab-assistant-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--status-warning); color: var(--text-inverse); font-size: 11px; font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; margin-left: var(--space-1); } .pm-tab-assistant .pm-tab-assistant-badge[hidden] { display: none; } /* Shared shell: default HIDDEN via [hidden]; on desktop trở thành drawer bên phải, trên mobile thành bottom sheet. Vị trí `position: fixed` cấp app-shell — nổi trên mọi màn hình, mọi module. */ .ai-assistant { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--bg-surface); border-left: 1px solid var(--border-soft); box-shadow: var(--shadow-floating); display: flex; flex-direction: column; /* CONTINUATION-01: z-index canonical stack (§D2 rule 5 + tokens). Trước đây 1000 làm assistant che modal `.modal-root` (z=100) — sai. Nay 87 = trên CSKH sheet (85), CSKH backdrop (84), CSKH floating button (80), nhưng DƯỚI sidebar drawer backdrop (90), sidebar drawer (95) và modal (100). Modal luôn thắng. */ z-index: 87; transform: translateX(0); transition: transform .18s ease; } .ai-assistant[hidden] { display: none; } .ai-assistant-header { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--card-pad) var(--card-pad) var(--space-3); border-bottom: 1px solid var(--border-soft); } .ai-assistant-title-wrap { flex: 1; min-width: 0; } .ai-assistant-header h2 { margin: 0; font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); } .ai-assistant-context { margin: var(--space-1) 0 0; font-size: var(--font-meta); color: var(--text-secondary); line-height: var(--line-normal); word-break: break-word; } .ai-assistant-context b { color: var(--text-primary); } .ai-assistant-close { border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--text-secondary); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } .ai-assistant-close:hover { background: var(--bg-surface-soft); color: var(--text-primary); } .ai-assistant-close:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.35); } .ai-assistant-body { flex: 1 1 auto; overflow-y: auto; padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-body); color: var(--text-primary); background: var(--bg-surface-soft); } .ai-assistant-msg { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); max-width: 92%; word-break: break-word; line-height: var(--line-normal); border: 1px solid var(--border-soft); background: var(--bg-surface); } .ai-assistant-msg.user { align-self: flex-end; background: var(--brand-primary-soft); border-color: var(--brand-primary); } .ai-assistant-msg.assistant { align-self: flex-start; background: var(--bg-surface); } .ai-assistant-msg.system { align-self: stretch; background: var(--status-warning-soft); border-color: var(--status-warning); color: var(--text-primary); font-size: var(--font-help); } .ai-assistant-msg .ai-assistant-msg-meta { font-size: var(--font-help); color: var(--text-muted); margin-top: var(--space-1); } .ai-assistant-footer { padding: var(--space-3) var(--card-pad); border-top: 1px solid var(--border-soft); background: var(--bg-surface); } .ai-assistant-form { display: flex; gap: var(--space-2); align-items: flex-end; } #ai-assistant-input { flex: 1; min-width: 0; font: inherit; font-size: 16px; /* B1: >=16px trên iOS để không zoom khi focus */ padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); resize: vertical; min-height: 44px; max-height: 40vh; } #ai-assistant-input:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(59,130,246,.25); } .ai-assistant-send { min-height: 44px; } .ai-assistant-footer-note { margin: var(--space-2) 0 0; font-size: var(--font-help); color: var(--text-muted); line-height: var(--line-normal); } .ai-assistant-footer-note.gap { color: var(--status-warning); } /* Backdrop chỉ dùng trên mobile bottom sheet. */ .ai-assistant-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); /* CONTINUATION-01: 86 nằm trên CSKH sheet-backdrop (84) và CSKH sheet (85), dưới assistant panel (87). Modal (100) và sidebar drawer (90/95) vẫn thắng. */ z-index: 86; } .ai-assistant-backdrop[hidden] { display: none; } /* Mobile bottom sheet: chuyển drawer bên phải thành sheet đáy. */ @media (max-width: 640px) { .ai-assistant { top: auto; right: 0; left: 0; bottom: 0; width: 100vw; max-height: 82vh; border-left: 0; border-top: 1px solid var(--border-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .pm-tab-assistant { padding: 6px var(--space-2); } .pm-tab-assistant .pm-tab-assistant-label-full { display: none; } /* Đảm bảo input không kéo header trôi khi bàn phím ảo hiện. */ .ai-assistant-body { padding: var(--space-3); } } /* Screen-reader-only helper (không có sẵn trong stylesheet chung). */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ===== CC-28: Notifications ===== */ .notif-panel .panel { margin-bottom:14px; } .incident { padding:10px 12px; margin:8px 0; border-left:4px solid #ef4444; background:#fef2f2; border-radius:8px; } .incident-P0 { border-left-color:#dc2626; background:#fef2f2; } .incident-P1 { border-left-color:#ef4444; background:#fef2f2; } .incident-P2 { border-left-color:#f59e0b; background:#fffbeb; } .incident-P3 { border-left-color:#0ea5e9; background:#eff6ff; } /* VISUAL-HARMONIZATION-V1: 11px → var(--font-meta) 12.5px, đồng bộ B1. Consumer: AI Overview + Notifications, đều là business metadata. */ .incident-meta { font-size: var(--font-meta); color: var(--text-secondary); margin-top: var(--space-1); } /* ========================================================== WEBAPP-SECURITY-HARDENING-01 — login gate + logout control Uses the existing canonical tokens; no redesign of app views. ========================================================== */ .login-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%); } .login-overlay[hidden] { display: none !important; } .login-card { width: 380px; padding: 36px 34px 28px; background: var(--bg-surface); border-radius: 14px; box-shadow: 0 24px 60px rgba(2, 12, 32, .45); display: flex; flex-direction: column; } .login-logo { width: 132px; align-self: center; margin-bottom: 18px; } .login-title { margin: 0 0 22px; text-align: center; font-size: 19px; font-weight: 600; color: var(--text-primary); } .login-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .login-input { height: 40px; padding: 0 12px; margin-bottom: 16px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; color: var(--text-primary); background: var(--bg-surface); font-family: inherit; } .login-input:focus { outline: none; border-color: var(--sidebar-active-bar); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); } .login-btn { height: 42px; margin-top: 6px; border: 0; border-radius: 8px; cursor: pointer; background: var(--sidebar-active); color: var(--text-inverse); font-size: 14.5px; font-weight: 600; font-family: inherit; } .login-btn:hover:not(:disabled) { background: #1d4ed8; } .login-btn:disabled { opacity: .6; cursor: progress; } .login-msg { min-height: 20px; margin-top: 12px; text-align: center; font-size: 13px; color: #b91c1c; } .logout-btn { margin-left: auto; width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--sidebar-fg-mute); font-size: 15px; line-height: 1; } .logout-btn:hover { background: rgba(255, 255, 255, .1); color: var(--text-inverse); } /* ============================================================ WEBAPP-CRM-BULK-IMPORT-01 — Nhập khách hàng cũ Chỉ dùng token canonical CC-33. Không sửa component có sẵn. ============================================================ */ .import-mode { display: flex; gap: 6px; background: var(--bg-subtle); padding: 4px; border-radius: var(--radius-md); } .import-mode-opt { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); } .import-mode-opt:has(input:checked) { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); } .import-banner { border: 1px solid var(--border-soft); border-left-width: 4px; border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 14px; font-size: var(--text-md); color: var(--text-secondary); background: var(--bg-surface); } .import-banner code { background: var(--bg-subtle); padding: 1px 5px; border-radius: 4px; font-size: var(--text-sm); } .import-banner-test { border-left-color: var(--status-ai); background: var(--status-ai-soft); color: var(--status-ai); } .import-banner-prod { border-left-color: var(--status-warning); background: var(--status-warning-soft); color: var(--status-warning); } .import-form { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 2px; } .import-field { display: flex; flex-direction: column; gap: 6px; } .import-field > label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); } .import-textarea { width: 100%; min-height: 170px; resize: vertical; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; line-height: 1.55; color: var(--text-primary); background: var(--bg-surface-soft); } .import-textarea:focus, .import-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(59, 130, 246, .25); } .import-input { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 12px; font-size: var(--text-md); color: var(--text-primary); background: var(--bg-surface); } .import-input-sm { padding: 6px 10px; font-size: var(--text-sm); min-width: 220px; } .import-hint { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--line-normal); } .import-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .import-confirm { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); color: var(--text-primary); background: var(--status-warning-soft); border: 1px solid var(--status-warning); border-radius: var(--radius-md); padding: 10px 14px; } .import-table-wrap { max-height: 480px; overflow: auto; border-radius: var(--radius-md); } .import-table-wrap .data thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-surface-soft); } .imp-reason { font-size: var(--text-sm); color: var(--text-secondary); max-width: 420px; } .imp-warn { font-size: var(--text-sm); color: var(--status-warning); margin-top: 2px; } .imp-row-INVALID td { background: var(--status-danger-soft); } .imp-row-DUPLICATE_IN_BATCH td { background: var(--status-warning-soft); } .imp-row-IDENTITY_CONFLICT td { background: var(--status-ai-soft); } .import-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px 2px 14px; } .import-result > div { background: var(--bg-surface-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; } .import-result span { font-size: var(--text-sm); color: var(--text-muted); } .import-result b { font-size: var(--text-lg); color: var(--text-primary); } .import-assign-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 0 2px 12px; font-size: var(--text-sm); color: var(--text-secondary); } .import-assign-bar label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .import-assign-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 2px 2px 12px; } .import-skip-list { margin: 0; padding: 0 0 10px 22px; font-size: var(--text-sm); color: var(--status-warning); } .btn-link { border: 0; background: transparent; color: var(--text-link); font-weight: var(--weight-semibold); cursor: pointer; padding: 0; font-size: var(--text-md); } .btn-link:hover { text-decoration: underline; } .btn-sm { padding: 5px 10px; font-size: var(--text-sm); } /* ================= KPI-UI-POLISH-01 · trang KPI ================= ONE_WEBAPP_ONE_DESIGN_SYSTEM — dùng lại token :root, .panel, table.data, .tag, .btn*, .label-primary/.label-secondary. Thẻ chỉ số compact dùng CÙNG ngôn ngữ thị giác với .care-metric của Trung tâm chăm sóc: nhãn và số trên MỘT hàng, ngữ nghĩa thể hiện bằng viền trái + màu số. Không có style dùng một lần. */ .kpi-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .kpi-control { display: flex; flex-direction: column; gap: 4px; } .kpi-control-label { font-size: var(--font-meta); font-weight: var(--weight-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; } .kpi-controls .form-input { min-width: 150px; } .kpi-truthbar { background: var(--bg-surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--status-ai); border-radius: var(--radius-md); padding: 10px 14px; box-shadow: var(--shadow-sm); } .kpi-truthbar:empty { display: none; } .kpi-truthbar-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kpi-truth-text { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--weight-medium); } .kpi-truth-text code { font-size: var(--text-xs); } .kpi-truthbar-inner .btn-link { margin-left: auto; white-space: nowrap; } /* Thẻ chỉ số compact — nhãn + số CÙNG HÀNG (giống .care-metric). */ /* auto-fit: số cột theo bề rộng thực có, để nhãn tiếng Việt giữ được 1 hàng trên màn hình rộng thay vì bị bó thành 6 cột hẹp cố định. */ .kpic-row, .kpic-row-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 10px; } .kpic { background: var(--bg-surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: var(--shadow-sm); min-width: 0; } .kpic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .kpic-label { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-primary); line-height: 1.25; min-width: 0; } .kpic-value { font-size: 19px; font-weight: var(--weight-extrabold); color: var(--text-primary); line-height: 1.15; letter-spacing: -.3px; white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; } .kpic-sub { font-size: var(--font-meta); color: var(--text-muted); font-weight: var(--weight-medium); margin-top: 3px; } .kpic-delta { font-size: var(--font-meta); font-weight: var(--weight-bold); margin-top: 4px; } .kpic-delta[data-dir="up"] { color: var(--status-success); } .kpic-delta[data-dir="down"] { color: var(--status-danger); } .kpic-delta[data-dir="flat"] { color: var(--text-muted); } .kpic-delta-pct { font-weight: var(--weight-medium); color: var(--text-muted); } .kpic[data-kind="success"] { border-left-color: var(--status-success); } .kpic[data-kind="success"] .kpic-value { color: var(--status-success); } .kpic[data-kind="info"] { border-left-color: var(--status-info); } .kpic[data-kind="attention"] { border-left-color: var(--status-warning); background: var(--status-warning-soft); } .kpic[data-kind="attention"] .kpic-value { color: var(--status-warning); } .kpi-panel-note { font-size: var(--font-meta); font-weight: var(--weight-medium); color: var(--text-muted); font-family: ui-monospace, SF Mono, Consolas, monospace; } /* Trend — cột SVG, không thư viện ngoài. */ .kpi-trend { display: flex; flex-direction: column; gap: 6px; } .kpi-trend-svg { width: 100%; height: 120px; display: block; } .kpi-bar { fill: #bfdbfe; } .kpi-bar-current { fill: var(--brand-primary); } .kpi-bar-zero { fill: var(--border-strong); } .kpi-trend-ticks { display: grid; gap: 2px; } .kpi-trend-tick { text-align: center; min-width: 0; } .kpi-trend-tick-label { font-size: var(--font-meta); font-weight: var(--weight-bold); color: var(--text-secondary); } .kpi-trend-tick-value { font-size: var(--font-meta); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Funnel — đếm sự kiện canonical theo bước nghiệp vụ. */ .kpi-funnel { display: flex; flex-direction: column; gap: 6px; } .kpi-funnel-head, .kpi-funnel-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) 2fr 54px 54px; gap: 10px; align-items: center; } .kpi-funnel-head { font-size: var(--font-table-head); font-weight: var(--weight-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; } .kpi-funnel-head span:nth-child(3), .kpi-funnel-head span:nth-child(4) { text-align: right; } .kpi-funnel-row { padding: 4px 6px; border-radius: var(--radius-sm); } .kpi-funnel-row-worst { background: var(--status-warning-soft); } .kpi-funnel-name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); min-width: 0; } .kpi-funnel-code { display: block; font-size: var(--text-xs); color: var(--text-muted); font-family: ui-monospace, SF Mono, Consolas, monospace; } .kpi-funnel-track { background: var(--bg-subtle); border-radius: 999px; height: 10px; overflow: hidden; } .kpi-funnel-fill { background: var(--brand-primary); height: 100%; border-radius: 999px; } .kpi-funnel-row-worst .kpi-funnel-fill { background: var(--status-warning); } .kpi-funnel-n { text-align: right; font-weight: var(--weight-extrabold); font-size: var(--text-lg); color: var(--text-primary); font-variant-numeric: tabular-nums; } .kpi-funnel-drop { text-align: right; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Ghi chú — cùng một mẫu cho mọi cảnh báo diễn giải KPI. */ .kpi-note { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--line-normal); padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-surface-soft); } .kpi-note b { color: var(--text-primary); } .kpi-note-warn { background: var(--status-warning-soft); color: #7c4a03; } .kpi-note-muted { background: transparent; color: var(--text-muted); padding-left: 0; padding-right: 0; font-size: var(--font-meta); } table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; } table.data .kpi-col-sep { border-left: 2px solid var(--border-soft); } .kpi-people thead th { vertical-align: bottom; } .kpi-barcell { width: 120px; } .kpi-minibar { height: 8px; border-radius: 999px; background: var(--brand-primary); } .kpi-minibar-alt { background: var(--status-ai); } .kpi-drillbar { display: flex; align-items: center; gap: 12px; background: var(--brand-primary-soft); border: 1px solid #bfdbfe; border-radius: var(--radius-md); padding: 8px 12px; font-size: var(--text-md); color: var(--text-secondary); } .kpi-blocked { padding: 22px 6px; text-align: center; } .kpi-blocked h3 { margin: 0 0 8px; font-size: var(--text-xl); color: var(--text-primary); } .kpi-blocked p { margin: 0 auto 8px; color: var(--text-secondary); max-width: 620px; font-size: var(--text-md); } .kpi-ai-entry { display: flex; align-items: center; gap: 14px; background: var(--status-ai-soft); border: 1px solid #ddd6fe; border-radius: var(--radius-md); padding: 12px 14px; } .kpi-ai-entry-icon { font-size: 22px; line-height: 1; } .kpi-ai-entry-body { flex: 1; min-width: 0; } .kpi-ai-entry-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--status-ai); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .kpi-ai-entry-body p { margin: 4px 0 0; font-size: var(--text-md); color: var(--text-secondary); line-height: var(--line-normal); } .kpi-modal { max-width: 780px; } .kpi-modal-body { gap: 12px; } .kpi-modal-head { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .kpi-modal-strong { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); } .kpi-explain { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; } .kpi-explain-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 9px 12px; font-size: var(--text-md); border-bottom: 1px solid var(--bg-subtle); } .kpi-explain-row:last-child { border-bottom: 0; } .kpi-explain-row > span:first-child { color: var(--text-secondary); font-weight: var(--weight-semibold); } .kpi-explain-row code { font-size: var(--text-xs); word-break: break-all; } @media (max-width: 1180px) { .kpi-modal-head { grid-template-columns: repeat(2, minmax(0,1fr)); } .kpi-explain-row { grid-template-columns: 1fr; gap: 2px; } } @media (max-width: 720px) { .kpi-funnel-head, .kpi-funnel-row { grid-template-columns: minmax(90px, 1.2fr) 1fr 46px 44px; } } /* ========================================================== KPI-AI-WEBAPP-CONNECTION-01 — Hồ sơ KPI + AI Phân tích KPI Dùng lại đúng token của Design System hiện có; không thêm bảng màu mới. ========================================================== */ .kpi-ai-entry-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .kpi-ai-entry-actions .btn[disabled] { opacity: .5; cursor: not-allowed; } .tag-muted { background: var(--bg-subtle); color: var(--text-muted); } .kpi-case-table tbody tr.row-clickable { cursor: pointer; } .kpi-case-table tbody tr.row-clickable:hover { background: var(--bg-subtle); } /* --- một hồ sơ: đầu trang + chuỗi hội thoại dùng chung --- */ .kpi-case-head h3 { margin: 0 0 6px; font-size: var(--text-xl); color: var(--text-primary); } .kpi-case-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .kpi-case-decision { border-left: 3px solid var(--status-success); background: var(--status-success-soft); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-md); color: var(--text-primary); } .kpi-case-decision div { margin-top: 4px; color: var(--text-secondary); } .kpi-case-thread { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding-right: 4px; } .kpi-msg { border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: var(--radius-md); padding: 9px 12px; background: var(--bg-surface); } .kpi-msg-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: var(--text-md); } .kpi-msg-body { margin-top: 5px; font-size: var(--text-md); color: var(--text-secondary); line-height: var(--line-normal); white-space: normal; } /* Viền trái theo ngữ nghĩa người gửi — cùng quy ước với .care-* và data-kind. */ .kpi-msg-employee { border-left-color: var(--status-info); } .kpi-msg-ai { border-left-color: var(--status-ai); background: var(--status-ai-soft); } .kpi-msg-director { border-left-color: var(--status-success); } .kpi-msg-system { border-left-color: var(--border-strong); background: var(--bg-subtle); } .kpi-case-form { display: flex; flex-direction: column; gap: 10px; } .kpi-case-form .field { display: flex; flex-direction: column; gap: 5px; } .kpi-case-form .field > span { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-secondary); } .kpi-case-form input, .kpi-case-form select, .kpi-case-form textarea { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: inherit; font-size: var(--text-md); background: var(--bg-surface); color: var(--text-primary); } .kpi-case-form input:focus, .kpi-case-form select:focus, .kpi-case-form textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(59,130,246,.35); } .kpi-case-form .check { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); color: var(--text-secondary); font-weight: var(--weight-normal); } .kpi-case-form .modal-actions { justify-content: flex-start; } @media (max-width: 1180px) { .kpi-ai-entry { flex-wrap: wrap; } .kpi-ai-entry-actions { width: 100%; justify-content: flex-start; } } /* =================================================================== WEBAPP-GLOBAL-FILTER-SYSTEM-01 — ONE filter toolbar, every module. Design brief: SIMPLE · STANDARD · EFFECTIVE. The default bar is ONE compact row; everything else hides behind "+ Bộ lọc". The bar must not eat vertical space that belongs to the data. =================================================================== */ .fbar { margin: 0 0 12px; } .fbar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 10px; } .fbar-time, .fbar-src, .fbar-search, .fbar-time-extra { display: flex; align-items: center; gap: 6px; } .fbar-ico { font-size: 13px; line-height: 1; opacity: .65; } .fbar-dash { color: var(--text-muted); font-size: var(--font-meta); } .fbar-select, .fbar-input, .fbar-date { font-family: inherit; font-size: 13px; color: var(--text-primary); background: var(--bg-surface-soft); border: 1px solid var(--border-default); border-radius: 8px; padding: 6px 10px; height: 32px; max-width: 100%; } .fbar-select { cursor: pointer; } .fbar-input { width: 240px; } .fbar-select:focus, .fbar-input:focus, .fbar-date:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); } .fbar-btn { font-family: inherit; font-size: 13px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-surface-soft); color: var(--text-primary); cursor: pointer; white-space: nowrap; } .fbar-btn:hover:not(:disabled) { background: var(--bg-subtle); } .fbar-btn:disabled { opacity: .45; cursor: default; } .fbar-more-btn.is-open { border-color: var(--brand-primary); color: var(--brand-primary); } .fbar-clear { margin-left: auto; } .fbar-badge { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px; border-radius: 8px; background: var(--brand-primary); color: var(--text-inverse); font-size: var(--text-xs); line-height: 16px; text-align: center; } /* "+ Bộ lọc" drawer: module-specific controls, never shown by default. */ .fbar-drawer { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 12px; margin-top: 8px; padding: 12px; background: var(--bg-surface-soft); border: 1px solid var(--border-default); border-radius: 10px; } .fbar-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .fbar-field-label { font-size: var(--font-meta); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; } .fbar-field .fbar-select { background: #fff; width: 100%; } .fbar-note { grid-column: 1 / -1; font-size: var(--font-help); color: var(--text-muted); font-style: italic; } /* Active-filter chips. Compact, one line, each removable on its own. */ .fbar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .fbar-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-badge); padding: 3px 6px 3px 10px; border-radius: 999px; background: rgba(37, 99, 235, .08); color: var(--brand-primary); border: 1px solid rgba(37, 99, 235, .18); } .fbar-chip-x { border: 0; background: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 2px; } .fbar-chip-x:hover { opacity: .6; } /* Server-side pager. Rendered from the server's own total/limit/offset. */ .fbar-pager { display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; font-size: 13px; color: var(--text-muted); } .fbar-pager-info { margin-right: auto; } /* A filtered aggregate must say what it is filtered by, or the number lies. */ .fbar-scope-note { font-size: var(--font-help); color: var(--text-muted); margin: -4px 0 10px; } @media (max-width: 1100px) { .fbar-input { width: 180px; } .fbar-clear { margin-left: 0; } } @media (max-width: 760px) { .fbar-main { gap: 6px; padding: 8px; } .fbar-search { flex: 1 1 100%; } .fbar-input { width: 100%; flex: 1; } .fbar-drawer { grid-template-columns: 1fr 1fr; } } /* [hidden] must win over the display rules above — a flex/grid container with the hidden attribute would otherwise still paint (this is why the date range inputs showed up next to the "Tất cả thời gian" preset). */ .fbar [hidden] { display: none !important; } /* ================= WEBAPP-KPI-DIRECTOR-UX-REVISION-01 ================= Ba cửa của Giám đốc: Tổng quan công ty · Đội ngũ & Hiệu quả · Trao đổi & Phản hồi KPI. Dùng lại token canonical, không thêm bảng màu thứ hai. */ /* Cảnh báo lớn ở trang tổng quan — một dòng mỗi việc, có đường dẫn sang tab xử lý. */ .kpi-alerts { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 12px; } .kpi-alerts-title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; } .kpi-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 0; font-size: var(--text-md); color: var(--text-secondary); border-top: 1px dashed var(--border-default); } .kpi-alert:first-of-type { border-top: 0; } .kpi-alert[data-kind="warn"] { color: var(--text-primary); } .kpi-alert[data-kind="warn"] b { color: var(--status-warning); } .kpi-alerts-clear { background: var(--status-success-soft); border: 1px solid #a7f3d0; border-radius: var(--radius-md); padding: 9px 12px; margin-bottom: 12px; font-size: var(--text-md); color: var(--text-secondary); } /* WEBAPP-KPI-UI-RECOVERY-3T-ALIGNMENT-V1-01 — băng "chưa có số liệu KPI thật". Màu TRUNG TÍNH có chủ ý, KHÔNG dùng vàng: đây là tin trung tính về trạng thái dữ liệu, không phải một việc cần người xử lý (luật vàng ở PHẦN B mục B3). Viền trái đậm để tách khỏi thẻ số, không dùng nền cảnh báo. */ .kpi-alerts-nodata { border-left: 3px solid var(--border-strong); background: var(--bg-surface-soft); } .kpi-nodata-body p { margin: 0 0 6px; font-size: var(--font-body); color: var(--text-secondary); line-height: var(--line-normal); } .kpi-nodata-body p:last-child { margin-bottom: 0; } .kpi-nodata-body .label-secondary { font-size: var(--font-help); color: var(--text-muted); } /* Bảng đội ngũ gộp nhiều chiều — cho phép cuộn ngang TRONG bảng, không đẩy cả trang trượt ngang. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .kpi-team thead th { vertical-align: bottom; white-space: nowrap; } .kpi-team td { vertical-align: top; } .kpi-team .kpi-cell-mix { min-width: 170px; } .kpi-bw-val { color: var(--text-muted); font-weight: 400; } .kpi-trendchip { display: inline-block; font-size: var(--text-sm); font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .kpi-trendchip[data-dir="up"] { color: var(--status-success); background: var(--status-success-soft); } .kpi-trendchip[data-dir="down"] { color: var(--status-danger); background: var(--status-danger-soft); } .kpi-trendchip[data-dir="flat"] { color: var(--text-muted); background: var(--bg-subtle); } /* Đầu trang "xem trọn một nhân viên" */ .kpi-emp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; } .kpi-emp-who { font-size: 15px; color: var(--text-primary); } @media (max-width: 1100px) { .kpi-team .kpi-cell-mix { min-width: 150px; } } @media (max-width: 760px) { .kpi-alert { align-items: flex-start; flex-direction: column; gap: 4px; } .kpi-emp-head { flex-direction: column; gap: 2px; } } /* Bảng rộng phải cuộn TRONG khung của nó, không được kéo giãn cả khung ứng dụng. `#main`/`#view-root` là ô của lưới app-shell; mặc định `min-width:auto` nên chúng phình ra bằng min-content của nội dung (tiêu đề bảng không ngắt dòng), làm cả trang trượt ngang. Cho phép chúng co lại để `.table-scroll` làm đúng việc của mình. Đây là sửa lỗi layout, không đổi thiết kế màn hình nào. */ #main, #view-root { min-width: 0; } /* ================= WEBAPP-KPI-DIRECTOR-UX-POLISH-02 ================= Chủ sở hữu yêu cầu: DỄ NHÌN · DỄ CHỌN · DỄ QUẢN LÝ · KHÔNG RỐI. Chỉ chỉnh thanh lọc của trang KPI — các module khác giữ nguyên kích thước. */ /* Ô lọc chính của KPI: cao hơn, rộng đủ đọc hết giá trị đang chọn, chữ không bé. Vẫn dùng token canonical, không thêm bảng màu riêng. */ .kpi-page .fbar-select, .kpi-page .fbar-date { height: 38px; font-size: var(--text-md); padding: 7px 12px; background: var(--bg-surface); min-width: 170px; } .kpi-page .fbar-time .fbar-select { min-width: 190px; font-weight: var(--weight-bold); } .kpi-page .fbar-src .fbar-select { min-width: 200px; } .kpi-page .fbar-btn { height: 38px; font-size: var(--text-md); } /* Thanh lọc thoáng hơn nhưng KHÔNG cao thêm: một hàng, bọc xuống khi hẹp. */ .kpi-page .fbar-main { gap: 10px; padding: 10px 12px; align-items: center; } .kpi-page .fbar { margin-bottom: 10px; } /* Giá trị đang chọn phải nhìn thấy ngay: ô nào đang lọc thì viền + nền đổi. */ .kpi-page .fbar-select:not([data-empty="1"]) { border-color: var(--brand-primary); } .kpi-page .fbar-src .fbar-select:not([data-empty="1"]), .kpi-page .fbar-primary-extra .fbar-select:not([data-empty="1"]) { background: var(--brand-primary-soft); font-weight: var(--weight-bold); } /* Chip đang lọc: to hơn một chút cho dễ bấm bỏ. */ .kpi-page .fbar-chip { font-size: var(--text-md); padding: 4px 8px 4px 10px; } @media (max-width: 1100px) { .kpi-page .fbar-select, .kpi-page .fbar-date { min-width: 150px; } .kpi-page .fbar-time .fbar-select { min-width: 160px; } .kpi-page .fbar-src .fbar-select { min-width: 165px; } } /* ================= WEBAPP-UAT-02 · PHẦN ĐẦU MÀN KPI ================= Thông tin kỹ thuật/UAT gom vào MỘT control gấp lại, mặc định ĐÓNG, để vùng đầu màn KPI chỉ còn: tiêu đề → bộ lọc → điều hướng. Dùng lại token canonical. */ .kpi-info { background: var(--bg-surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--status-ai); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .kpi-info-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; cursor: pointer; list-style: none; font-size: var(--text-md); color: var(--text-secondary); } .kpi-info-summary::-webkit-details-marker { display: none; } .kpi-info-summary:hover { background: var(--bg-surface-soft); border-radius: var(--radius-md); } .kpi-info-title { font-weight: var(--weight-bold); color: var(--text-primary); } .kpi-info-caret { color: var(--text-muted); transition: transform .15s ease; display: inline-block; } .kpi-info[open] > .kpi-info-summary > .kpi-info-caret { transform: rotate(180deg); } .kpi-info-body { padding: 4px 14px 12px; border-top: 1px dashed var(--border-default); } .kpi-info-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 7px 0; font-size: var(--text-md); align-items: start; } .kpi-info-row + .kpi-info-row { border-top: 1px dashed var(--border-default); } .kpi-info-label { color: var(--text-muted); font-weight: var(--weight-bold); } .kpi-info-val { color: var(--text-secondary); min-width: 0; } .kpi-info-val code { word-break: break-all; } .kpi-info-val .form-input { height: 34px; min-width: 190px; margin-bottom: 4px; } .kpi-info-actions { padding-top: 8px; } /* Tab 4 — Chính sách & Định mức KPI */ .kpi-policy th { width: 220px; text-align: left; vertical-align: top; color: var(--text-muted); font-weight: var(--weight-bold); white-space: nowrap; } .kpi-policy td { vertical-align: top; } .kpi-policy-empty { background: var(--bg-surface-soft); border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; color: var(--text-secondary); font-size: var(--text-md); } .kpi-policy-empty-title { font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: 6px; } .kpi-policy-empty p { margin: 6px 0 0; } @media (max-width: 760px) { .kpi-info-row { grid-template-columns: 1fr; gap: 2px; } .kpi-policy th { width: auto; white-space: normal; } } /* Giá trị canonical trong tab Chính sách là tên bảng/view rất dài — cho phép ngắt dòng để bảng không kéo giãn khung, và bảng tự cuộn trong khung của nó. */ .kpi-policy code { word-break: break-all; } .kpi-policy { min-width: 0; } /* ================= WEBAPP-UAT-02B · KPI SHARED STICKY SHELL ================= MỘT vỏ dùng chung: context + 4 điều hướng + bộ lọc. Sticky NGAY DƯỚI Trung tâm CSKH (lớp sticky thứ 3): topbar top:0 z-30 #global-care top:var(--topbar-height) z-20 .kpi-shell top:topbar + care height z-15 ← lớp này Offset cộng bằng biến --care-sticky-height do app.js đo (ResizeObserver), vì chiều cao khối CSKH thay đổi theo trạng thái. z-index thấp hơn CSKH có chủ ý: nếu hai lớp có chạm nhau thì CSKH nằm trên, không có mép nội dung lọt ra. */ .kpi-shell { position: sticky; top: var(--sticky-module-top); z-index: var(--sticky-z-module); background: var(--bg-app); padding: 8px 0 10px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; /* Che mép nội dung cuộn qua phía dưới vỏ. */ box-shadow: var(--sticky-edge); } /* A · HÀNG ĐẦU KPI — MỘT HÀNG DUY NHẤT (FIX_02, 19/09/2026) [← Trang chủ] [KPI — Kết quả của tôi · kỳ] [3 tab] … [Đang xem: X] [↻] Trước đây tiêu đề và hàng tab là HAI hàng. ⛔ Đừng tách lại. `.kpi-shell-context` cũ giữ lại làm lớp tương thích, không còn ai dùng. */ .kpi-shell-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: 40px; } .kpi-home-btn { flex: 0 0 auto; padding: 4px 10px; font-size: var(--font-meta); white-space: nowrap; } .kpi-shell-bar .kpi-context { flex: 0 1 auto; gap: 6px; } .kpi-shell-bar .kpi-nav { flex: 0 1 auto; } /* "Đang xem" là mục DUY NHẤT được co: nó nhận phần trống còn lại và CẮT CHỮ, thay vì đẩy cả hàng vỡ xuống dòng. ⛔ Đừng đặt `flex-basis: 100%` cho nó ở màn hẹp — đã thử và ĐO ĐƯỢC: ở 1024px nó tự chiếm một dòng rồi đẩy nút ↻ xuống dòng thứ ba (hàng cao 122,8px), trong khi các mục không co chỉ chiếm 703/977px. */ .kpi-watching { flex: 1 1 0; min-width: 0; text-align: right; font-size: var(--font-meta); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-watching b { color: var(--text-primary); } .kpi-watching-label { color: var(--text-muted); } .kpi-shell-bar .kpi-controls { flex: 0 0 auto; margin-left: 0; align-items: center; } /* Số đo tại 1366 (có thanh bên): bề rộng hàng 1035px; các mục KHÔNG co chiếm 98+243+410+34 = 785px + 4 khe. Khe 12→8 giữ mọi thứ trên MỘT hàng. */ @media (max-width: 1440px) { .kpi-shell-bar { gap: var(--space-2); } } /* A-cũ · CONTEXT — đúng một dòng, không card cao */ .kpi-shell-context { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; } .kpi-context { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .kpi-context-who { font-size: 16px; font-weight: var(--weight-bold); color: var(--text-primary); } .kpi-context-scope, .kpi-context-label { font-size: var(--text-md); color: var(--text-muted); } .kpi-context-sep { color: var(--text-disabled); } .kpi-context-back { padding: 4px 10px; font-size: var(--text-md); } .kpi-shell-context .kpi-controls { margin-left: auto; } .kpi-refresh-btn { width: 34px; height: 34px; padding: 0; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* B · ĐIỀU HƯỚNG — nổi bật, nhận ra tab đang mở ngay, không chỉ một gạch mảnh */ .kpi-nav { padding: 5px; gap: 5px; border-radius: 12px; background: var(--bg-subtle); border-color: var(--border-default); } .kpi-nav .tab { font-size: 14.5px; font-weight: var(--weight-semibold); padding: 10px 16px; border-radius: 9px; color: var(--text-secondary); white-space: nowrap; } .kpi-nav .tab:hover { background: var(--bg-surface); color: var(--text-primary); } /* Tab đang mở: nền nổi + chữ đậm + viền dưới dày — ba dấu hiệu, không phụ thuộc riêng vào màu để người khó phân biệt màu vẫn nhận ra. */ .kpi-nav .tab.active { background: var(--bg-surface); color: var(--brand-primary); font-weight: var(--weight-bold); box-shadow: 0 1px 2px rgba(15, 23, 42, .10), inset 0 -3px 0 var(--brand-primary); } .kpi-nav .tab.active::after { display: none; } /* bỏ gạch chân mảnh cũ */ /* C · BỘ LỌC trong vỏ — chỉ đổi chỗ, không đổi logic */ .kpi-shell-filter .fbar { margin-bottom: 0; } @media (max-width: 1100px) { .kpi-nav .tab { padding: 9px 12px; font-size: 14px; } .kpi-shell { padding: 6px 0 8px; } } /* ========== WEBAPP-UAT-03A · Cài đặt · Danh mục nền tảng ========== */ .settings-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } /* Nền tảng đã tắt: mờ đi nhưng VẪN ĐỌC ĐƯỢC — nó là lịch sử, không phải rác. */ .settings-page .data tr.row-off td { opacity: .6; } /* WEBAPP-SETTINGS-UI-HIERARCHY-V1-02 · tiêu đề mục của một danh mục (bố cục dùng lại .pm-panel-head). Thanh cấp 2 dùng .ai-subtabs (display:flex) ⇒ phải ép [hidden] thì thuộc tính hidden mới có hiệu lực. */ #settings-subnav[hidden] { display: none; } .settings-section-head { margin-bottom: var(--space-2); } .settings-section-title { margin: 0; font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--line-tight); } .settings-section-desc { margin: 2px 0 0; font-size: var(--font-body); color: var(--text-secondary); } .settings-section-note { margin: 0 0 var(--space-2); font-size: var(--font-meta); } /* SCV2 · SYSTEM-CATALOG-UNIFIED-SPLITVIEW-V2-01 — Danh mục hệ thống: cây Nền tảng → Kênh (trái) + panel Thêm/Sửa (phải). Thay khối SETCAT (thẻ tổng quan + bảng). Chỉ token, không mã màu. Tiền tố .scv- ⇒ không va lớp module khác. */ /* Đầu trang workspace cùng khuôn gọn với "Người dùng & Tổ chức" (.org-head, đã LOCK) — chỉ chỉnh phía Danh mục hệ thống. */ .settings-page > .page-header { padding: 12px 18px; margin-bottom: var(--space-3); } /* .crm là flex-cột gap 16px ⇒ lề dưới dải vị trí không gộp như ở Tổ chức; ép về cùng khoảng 8px (đo: dải→đầu trang 28px ở cả hai). */ .settings-page > .settings-crumbs .crumbs { margin-bottom: 0; } .settings-page > .settings-crumbs + .page-header { margin-top: calc(var(--space-2) - 16px); } .settings-page > .page-header h1 { font-size: var(--text-xl); } .sc-tag-outline { background: var(--bg-surface); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-default); } .settings-page .tag { white-space: nowrap; } /* Bố cục chia đôi: trái gọn (~41%), phải rộng (~59%) — theo ảnh chốt. */ .scv { display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); gap: var(--space-3); align-items: start; } .scv > .panel { margin: 0; min-width: 0; } .scv-title { margin: 0; font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--line-tight); display: flex; align-items: center; gap: var(--space-2); } .scv-sub { color: var(--text-muted); font-size: var(--font-meta); } .scv-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; } .scv-warn { margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .scv-tree { display: flex; flex-direction: column; gap: var(--space-2); } .scv-group { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); } .scv-group.is-open { border-color: var(--border-default); } .scv-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 8px; border-radius: var(--radius-md); cursor: pointer; } .scv-row:hover { background: var(--bg-surface-soft); } .scv-row:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; } .scv-row.is-sel { background: var(--brand-primary-soft); box-shadow: inset 3px 0 0 var(--brand-primary); } /* SCVD: mũi tên là NÚT riêng (chỉ bung/thu); bấm phần còn lại của dòng = xem chi tiết. */ .scv-chev { width: 28px; height: 28px; flex: 0 0 28px; margin: -4px -4px -4px -6px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; transition: transform .15s; text-align: center; } .scv-chev:hover { background: var(--bg-subtle); color: var(--text-primary); } .scv-chev:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; } .scv-group.is-open .scv-chev { transform: rotate(90deg); } .scv-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-subtle); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; } .scv-crow .scv-ico { width: 26px; height: 26px; font-size: 14px; } .scv-ico-lg { width: 64px; height: 64px; font-size: 32px; border-radius: var(--radius-md); } .scv-name { flex: 1 1 auto; min-width: 0; font-weight: var(--weight-semibold); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scv-crow .scv-name { font-weight: var(--weight-medium); } .scv-count { flex: 0 0 auto; color: var(--text-muted); font-size: var(--font-meta); white-space: nowrap; } .scv-prow .scv-count { width: 56px; } .scv-prow .scv-status .tag { padding: 3px 8px; } .scv-off-inline { display: none; } .scv-status { flex: 0 0 auto; } .scv-edit { flex: 0 0 auto; } .scv-group.row-off > .scv-prow .scv-name, .scv-crow.row-off .scv-name { color: var(--text-muted); } .scv-children { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 10px 34px; } .scv-none { color: var(--text-muted); font-size: var(--font-meta); padding: 6px 10px; } .scv-add { display: block; width: 100%; text-align: left; margin-top: var(--space-1); padding: 8px 12px; border: 1px dashed var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-link); font-weight: var(--weight-semibold); font-size: var(--font-body); cursor: pointer; } .scv-add:hover { background: var(--brand-primary-soft); border-color: var(--brand-primary); } .scv-loose { margin-top: var(--space-3); border-top: 1px solid var(--border-soft); padding-top: var(--space-3); } .scv-loose-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--text-secondary); margin-bottom: var(--space-1); } .scv-loose .scv-children { padding-left: 0; padding-right: 0; } /* Panel phải: dính khi cuộn, cuộn nội bộ nếu dài. */ .scv-detail { position: sticky; top: calc(var(--sticky-module-top) + var(--space-2)); max-height: calc(100vh - var(--sticky-module-top) - var(--space-4)); overflow: auto; } .scv-dhead { display: flex; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); } .scv-dicon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-md); background: var(--bg-subtle); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .scv-dtitle { flex: 1 1 auto; min-width: 0; } .scv-dsub { margin-top: 4px; color: var(--text-secondary); font-size: var(--font-body); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .scv-dsub .scv-ico { width: 22px; height: 22px; font-size: 12px; } .scv-dhead .scv-back-list { display: none; } /* máy tính: chi tiết không có nút đóng — panel không bao giờ trống khi có dữ liệu */ /* CHI TIẾT (chỉ đọc) */ .scv-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); } .scv-dl-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .scv-dl-val { color: var(--text-primary); font-size: var(--font-body); min-height: 24px; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; } .scv-kid-list { display: flex; flex-direction: column; gap: 2px; } .scv-kid { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; padding: 6px 8px; border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; } .scv-kid:hover { background: var(--bg-surface-soft); } .scv-kid .scv-ico { width: 26px; height: 26px; font-size: 14px; } .scv-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text-link); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; } .scv-link:hover { text-decoration: underline; } .scv-link .scv-ico { width: 22px; height: 22px; font-size: 12px; } .scv-foot-detail { justify-content: flex-start; flex-wrap: wrap; } .scv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); } .scv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .scv-label { font-weight: var(--weight-semibold); color: var(--text-primary); font-size: var(--font-body); } .scv-req { color: var(--status-danger); } .scv-field input, .scv-field select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--font-body); } .scv-field input:focus, .scv-field select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); } .scv-field input[readonly] { background: var(--bg-subtle); color: var(--text-muted); } .scv-help { color: var(--text-muted); font-size: var(--font-meta); } .scv-iconbox { display: flex; align-items: center; gap: var(--space-3); } .scv-note { color: var(--text-secondary); font-size: var(--font-meta); background: var(--bg-surface-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 8px 10px; } .scv-ro { min-height: 36px; display: flex; align-items: center; } .scv-switch-row { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; } .scv-switch { position: relative; width: 44px; height: 24px; flex: 0 0 44px; border-radius: 999px; border: 0; padding: 0; background: var(--border-default); cursor: pointer; transition: background .15s; } .scv-switch > span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-sm); transition: left .15s; } .scv-switch.is-on { background: var(--status-success); } .scv-switch.is-on > span { left: 23px; } .scv-switch:disabled { opacity: .6; cursor: not-allowed; } .scv-switch:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .scv-kids { margin-top: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3); } .scv-kids-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); } .scv-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); } .scv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--bg-surface-soft); cursor: pointer; font-size: var(--font-body); color: var(--text-primary); } .scv-chip:hover { border-color: var(--brand-primary); } .scv-chip .scv-ico { width: 24px; height: 24px; font-size: 13px; } .scv-info { color: var(--status-info); background: var(--status-info-soft); border-radius: var(--radius-md); padding: 8px 10px; font-size: var(--font-meta); } .scv-ok { color: var(--status-success); background: var(--status-success-soft); border-radius: var(--radius-md); padding: 8px 10px; margin-top: var(--space-3); font-weight: var(--weight-semibold); } #scv-msg:not(:empty) { margin-top: var(--space-3); } .scv-foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); } .scv-foot .btn { min-width: 110px; } .scv-empty { text-align: center; color: var(--text-secondary); padding: var(--space-6, 48px) var(--space-4); } .scv-empty-ico { font-size: 36px; margin-bottom: var(--space-2); } .scv-empty p { margin: 0 0 var(--space-3); } /* ≤1024: vẫn chia đôi nhưng nhường thêm chỗ cho danh sách; ô trạng thái ở cây ẩn chữ đếm để không vỡ dòng. */ @media (max-width: 1024px) { .scv { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); } .scv-prow .scv-count { width: auto; } .scv-grid { gap: var(--space-3); } } /* Màn ≤1400 (đo: 1366 cắt tên “Facebook”): bỏ cột trạng thái ở cây; mục ĐÃ TẮT vẫn mang nhãn "Đã tắt" cạnh tên + làm mờ. */ @media (max-width: 1400px) { .scv-prow .scv-status { display: none; } .scv-off-inline { display: inline-block; } } /* ≤820: KHÔNG ép hai cột. Danh sách full width; chọn một mục ⇒ panel thay chỗ danh sách, nút "← Danh sách" để quay lại. */ @media (max-width: 820px) { .scv { grid-template-columns: minmax(0, 1fr); } /* Chỉ khi người dùng CHỦ ĐỘNG chọn (show-detail) panel mới thay danh sách; lựa chọn mặc định không đẩy khỏi danh sách. */ .scv.show-detail > .scv-list { display: none; } .scv:not(.show-detail) > .scv-detail { display: none; } .scv-detail { position: static; max-height: none; overflow: visible; } .scv-grid { grid-template-columns: minmax(0, 1fr); } .scv-dhead .scv-back-list { display: inline-flex; } .scv-edit, .scv-foot .btn { min-height: 36px; } .scv-prow .scv-status { display: block; } /* danh sách full width ⇒ đủ chỗ cho nhãn trạng thái */ .scv-off-inline { display: none; } } @media (max-width: 520px) { .scv-prow .scv-status { display: none; } .scv-off-inline { display: inline-block; } .scv-prow .scv-count { display: none; } } /* V1-03: luật hạ tiêu đề "Người dùng & Tổ chức" của V1-02 đã gỡ — nay nó là tiêu đề WORKSPACE (bậc trang), ngang "Danh mục hệ thống". */ /* CALWORK · WEBAPP-CALENDAR-WORK-2WORKSPACE-UI-V1-01 — Lịch & Công việc. Dùng lại vỏ chia đôi .scv (Danh mục hệ thống); chỉ token, không mã màu. Tiền tố .cw- ⇒ không va lớp module khác. */ .cw-page > .page-header { padding: 12px 18px; margin-bottom: 0; } .cw-page > .page-header h1 { font-size: var(--font-section-title); } .cw-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .cw-ws { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-subtle); border-radius: var(--radius-md); } .cw-ws-btn { border: 0; background: transparent; padding: 8px 20px; border-radius: var(--radius-sm); font: inherit; font-size: var(--text-lg, 15px); font-weight: var(--weight-bold); color: var(--text-secondary); cursor: pointer; white-space: nowrap; } .cw-ws-btn:hover { color: var(--text-primary); background: var(--bg-surface-soft); } .cw-ws-btn.active { background: var(--brand-primary); color: var(--bg-surface); box-shadow: var(--shadow-sm); } .cw-ws-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .cw-bar-actions { display: inline-flex; gap: var(--space-2); align-items: center; } .cw-split { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); } .cw-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); } .cw-view { display: inline-flex; gap: 4px; flex-wrap: wrap; } .cw-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--space-2); padding-bottom: 2px; } .cw-chips::-webkit-scrollbar { display: none; } .cw-chip { flex: 0 0 auto; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: var(--font-body); cursor: pointer; white-space: nowrap; } .cw-chip b { color: var(--text-primary); margin-left: 2px; } .cw-chip:hover { border-color: var(--brand-primary); color: var(--text-primary); } .cw-chip.active { background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--brand-primary); font-weight: var(--weight-semibold); } .cw-chip.active b { color: var(--brand-primary); } .cw-chip.is-danger b { color: var(--status-danger); } .cw-search { width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font: inherit; font-size: var(--font-body); margin-bottom: var(--space-2); background: var(--bg-surface); color: var(--text-primary); } .cw-search:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); } .cw-rows { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - var(--sticky-module-top) - 260px); overflow-y: auto; } .cw-day { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 8px 10px; margin-top: var(--space-1); background: var(--bg-surface-soft); border-radius: var(--radius-md); font-weight: var(--weight-semibold); color: var(--text-primary); position: sticky; top: 0; z-index: 1; } .cw-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: 10px; border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent; min-width: 0; } .cw-row:hover { background: var(--bg-surface-soft); } .cw-row:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; } .cw-row.is-sel { background: var(--brand-primary-soft); border-color: var(--brand-primary); box-shadow: inset 3px 0 0 var(--brand-primary); } .cw-time { flex: 0 0 48px; display: flex; flex-direction: column; font-size: var(--font-body); color: var(--text-primary); line-height: 1.35; } .cw-main { flex: 1 1 auto; min-width: 0; } .cw-title { font-weight: var(--weight-semibold); color: var(--text-primary); font-size: var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-meta { color: var(--text-muted); font-size: var(--font-meta); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-side { flex: 0 0 auto; } .cw-src { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--font-badge); font-weight: var(--weight-semibold); } .cw-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--status-info); } .cw-dot-ok { background: var(--status-success); } .cw-dot-neutral { background: var(--border-default); } .cw-empty { padding: 12px 10px; color: var(--text-secondary); font-size: var(--font-body); background: var(--bg-surface-soft); border-radius: var(--radius-md); } .cw-note { margin: var(--space-2) 0 0; font-size: var(--font-meta); color: var(--text-muted); } .cw-gap { margin: var(--space-3) 0; padding: 8px 10px; border-radius: var(--radius-md); background: var(--bg-surface-soft); border: 1px dashed var(--border-default); color: var(--text-muted); font-size: var(--font-meta); } .cw-sec { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 4px; } .cw-text { margin: 0; color: var(--text-primary); font-size: var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; } .cw-status-line { margin-bottom: 4px; } .cw-wide { grid-column: 1 / -1; } .cw-detail textarea { width: 100%; min-width: 0; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font: inherit; font-size: var(--font-body); resize: vertical; } .cw-detail .check { display: flex; align-items: center; gap: 6px; font-size: var(--font-body); } .cw-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .cw-mwd { text-align: center; font-size: var(--font-meta); color: var(--text-muted); font-weight: var(--weight-semibold); padding: 4px 0; } .cw-mcell { min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); font: inherit; font-size: var(--font-body); color: var(--text-primary); cursor: pointer; text-align: left; min-width: 0; } .cw-mcell:hover { border-color: var(--brand-primary); } .cw-mcell.is-pad { border: 0; background: transparent; cursor: default; } .cw-mcell.is-today { border-color: var(--brand-primary); background: var(--brand-primary-soft); font-weight: var(--weight-bold); } .cw-mcount { font-size: var(--font-badge); color: var(--brand-primary); font-weight: var(--weight-semibold); } /* ≤1024: vẫn chia đôi, nhường chỗ cho danh sách. ≤820: một cột — dùng luật show-detail của .scv (panel thay danh sách khi người dùng chọn). */ @media (max-width: 1024px) { .cw-split { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); } .cw-split .scv-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 820px) { .cw-split { grid-template-columns: minmax(0, 1fr); } .cw-rows { max-height: none; } .cw-ws { width: 100%; } .cw-ws-btn { flex: 1 1 0; padding: 8px 10px; } .cw-bar-actions { width: 100%; justify-content: flex-end; } .cw-mcell { min-height: 48px; padding: 4px; } .cw-mcount { font-size: var(--text-xs); } } /* ===== WEBAPP-IMPL-PRODUCT-UI-01 · Quản trị sản phẩm (nền đọc) ===== Chỉ THÊM class mới với tiền tố .pm-* / .product-* / .banner-* / .tag-official. Không sửa class dùng chung nào (.panel .data .tag-ok .table-scroll … giữ nguyên), nên không ảnh hưởng CRM / KPI / Cài đặt. Bảng rộng đã có .table-scroll lo cuộn ngang trong khung riêng — trang không bị tràn ngang. */ .product-page { min-width: 0; } /* Băng cảnh báo chuyển đổi: nghĩa nghiệp vụ đọc trước, kỹ thuật thu gọn phía sau. */ .product-banner { margin: 0 0 14px; } .banner { border-radius: 10px; padding: 12px 14px; font-size: var(--text-md); line-height: 1.55; } .banner-warn { background: #fff8e1; border: 1px solid #f0c36d; color: #6b4e00; } .banner-main { margin: 0; } .banner-more { margin-top: 8px; } .banner-more > summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); opacity: .85; } .banner-more-body { margin-top: 6px; font-size: var(--text-sm); opacity: .95; } .banner-more-body code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 4px; } /* Thẻ số đo — tự xuống dòng, không tràn ngang trên laptop hay điện thoại. */ .pm-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 14px; } .pm-card { background: #fff; border: 1px solid var(--line, #e3e7ee); border-radius: 10px; padding: 12px 14px; min-width: 0; } .pm-card-value { font-size: var(--text-metric); font-weight: 700; line-height: 1.1; } .pm-card-label { font-size: var(--text-sm); font-weight: 600; margin-top: 4px; } .pm-card-note { font-size: var(--text-sm); opacity: .7; margin-top: 3px; } .pm-card.pm-ok { border-color: #b7e1c4; background: #f4fbf6; } .pm-card.pm-warn { border-color: #f0c36d; background: #fffaf0; } .pm-two-col { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .pm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; } .pm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; } .pm-filters input[type="search"] { flex: 1 1 240px; min-width: 180px; padding: 7px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px; font: inherit; } .pm-filters select { padding: 7px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px; font: inherit; max-width: 100%; } .pm-rule { background: #f6f8fb; border: 1px solid var(--line, #e3e7ee); border-left: 3px solid #6c8cff; border-radius: 8px; padding: 10px 12px; font-size: var(--text-sm); line-height: 1.55; margin: 0 0 10px; } .pm-history > summary { cursor: pointer; font-size: var(--text-md); padding: 4px 0; } /* Nhãn tham quyền giá — phải phân biệt được ngay bằng mắt. */ .tag-official { background: #e6f6ec; color: #14713a; border: 1px solid #b7e1c4; font-weight: 700; } .tag-unofficial { background: #fdeaea; color: #a12626; border: 1px solid #f0b4b4; font-weight: 700; } /* Chi tiết model */ .pm-detail-panel { margin-top: 14px; } .pm-detail-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .pm-detail-name { font-size: var(--text-xl); } .pm-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pm-detail-sub { font-size: var(--text-sm); margin: 8px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pm-fields { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .pm-field { display: flex; gap: 8px; justify-content: space-between; border-bottom: 1px dashed var(--line, #e3e7ee); padding-bottom: 5px; min-width: 0; } .pm-field-label { font-size: var(--text-sm); opacity: .72; flex: 0 0 auto; } .pm-field-value { font-size: var(--text-md); font-weight: 600; text-align: right; word-break: break-word; min-width: 0; } /* Điện thoại: xếp dọc, không cố nhồi bảng vào màn hẹp. */ @media (max-width: 640px) { .pm-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .pm-card-value { font-size: var(--text-2xl); } .pm-detail-head { flex-direction: column; } .pm-field { flex-direction: column; gap: 2px; } .pm-field-value { text-align: left; } } /* ===== WEBAPP-UAT-PRODUCT-UI-FINAL-01 · cấu trúc lại UX Quản trị sản phẩm ===== Chỉ THÊM class mới (.pm-*). Không sửa class dùng chung nào. */ /* Đầu trang gọn: một dòng, thay cho header lớn + khối vàng cũ. */ .pm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; } .pm-head-left { display: flex; align-items: center; gap: 9px; min-width: 0; } .pm-head-icon { font-size: var(--text-2xl); line-height: 1; } .pm-head-title { font-size: var(--text-2xl); font-weight: 700; margin: 0; } .pm-head-badge { flex: 0 0 auto; } .pm-head-info > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; opacity: .8; padding: 4px 9px; border: 1px solid var(--line, #e3e7ee); border-radius: 999px; background: #fff; list-style: none; } .pm-head-info > summary::-webkit-details-marker { display: none; } .pm-head-info[open] > summary { background: #f2f5fa; } .pm-head-info-body { margin-top: 8px; padding: 11px 13px; background: #fff8e1; border: 1px solid #f0c36d; border-radius: 9px; font-size: var(--text-sm); line-height: 1.6; color: #6b4e00; max-width: 860px; } .pm-head-info-body p { margin: 0 0 7px; } .pm-head-info-body p:last-child { margin-bottom: 0; } .pm-head-info-body code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 4px; } .pm-tabs { margin-bottom: 8px; } /* Vỏ bộ lọc dùng chung — sống ngoài panel nên ngữ cảnh không mất khi đổi tab. */ .pm-filter-shell { margin: 0 0 12px; } .pm-fbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pm-fbar input[type="search"] { flex: 1 1 200px; min-width: 160px; padding: 7px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px; font: inherit; } .pm-fbar select, .pm-fbar-more select { padding: 7px 10px; border: 1px solid var(--line, #e3e7ee); border-radius: 8px; font: inherit; max-width: 260px; } .pm-fbar-more[hidden] { display: none; } .pm-fbar-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 9px 10px; background: #f6f8fb; border: 1px solid var(--line, #e3e7ee); border-radius: 9px; } .pm-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pm-chip { border: 1px solid #cfd8e8; background: #eef3fb; color: #2b4a7e; border-radius: 999px; padding: 3px 9px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .pm-chip:hover { background: #e2ebf9; } /* Thẻ số đo: đúng 4 cột trên desktop nên không có thẻ lẻ nằm một dòng riêng. */ .pm-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pm-cards-sub .pm-card-value { font-size: var(--text-2xl); } .pm-cards-sub .pm-card { background: #fbfcfe; } @media (max-width: 1100px) { .pm-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pm-cards-4 { grid-template-columns: minmax(0, 1fr); } } .pm-scope-note { font-size: var(--text-sm); background: #eef3fb; border: 1px solid #cfd8e8; color: #2b4a7e; border-radius: 8px; padding: 8px 11px; margin: 0 0 11px; } /* Dòng sản phẩm: gấp/mở cha → con, thay bảng phẳng kiểu cơ sở dữ liệu. */ .pm-fam-list { display: flex; flex-direction: column; gap: 8px; } .pm-fam { border: 1px solid var(--line, #e3e7ee); border-radius: 10px; background: #fff; overflow: hidden; } .pm-fam.open { border-color: #b9c8e4; box-shadow: 0 1px 4px rgba(20,40,80,.06); } .pm-fam-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; } .pm-fam-head:hover { background: #f7f9fc; } .pm-fam-caret { flex: 0 0 auto; width: 12px; opacity: .6; } .pm-fam-name { font-weight: 700; font-size: var(--text-lg); } .pm-fam-code { flex: 0 0 auto; font-size: var(--text-xs); opacity: .65; } .pm-fam-sum { margin-left: auto; font-size: var(--text-sm); opacity: .75; text-align: right; } .pm-fam-body { padding: 0 13px 12px; } .pm-fam-table { width: 100%; } .pm-fam-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 9px; } /* Chi tiết model: khu làm việc có 4 tab con, ngay trong module sản phẩm. */ .pm-detail-panel { border-left: 3px solid #6c8cff; } .pm-detail-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .pm-detail-id { min-width: 0; } .pm-detail-title { font-size: var(--text-xl); font-weight: 700; } .pm-detail-status { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 5px; } .pm-detail-tabs { margin: 0 0 11px; } .pm-detail-body { min-width: 0; } .pm-row-sel > td { background: #eef3fb !important; } @media (max-width: 640px) { .pm-head { flex-direction: column; align-items: flex-start; } .pm-fam-sum { margin-left: 0; text-align: left; width: 100%; } .pm-fam-head { flex-wrap: wrap; } .pm-detail-head { flex-direction: column; } } /* ===== WEBAPP-UAT-PRODUCT-UI-FINAL-02 · hoan tat chi tiet model ===== */ /* O du lieu CHUA CO: phai nhin ra ngay la chua co, khong duoc trong nhu mot thong so da duyet. Chu nghieng + mau nhat + khong dam. */ .pm-field-missing { font-style: italic; font-weight: 400; color: #9aa4b2; } /* Khoi "Gia hien hanh" — cau tra loi dau tien khi Chu so huu mo tab Gia. */ .pm-price-now { border: 1px solid var(--line, #e3e7ee); border-left: 3px solid #14713a; border-radius: 9px; padding: 10px 13px; margin: 0 0 11px; background: #f7fbf8; } .pm-price-now-label { font-size: var(--text-sm); font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .3px; } .pm-price-now-value { font-size: var(--text-metric); font-weight: 700; margin-top: 3px; } .pm-price-now-tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 6px; } .pm-price-now-why { font-size: var(--text-sm); color: #a12626; margin-top: 6px; } /* Khoi "chua cau hinh chinh sach thuong luong" — canh bao, khong phai so lieu. */ .pm-nego { border: 1px solid #f0c36d; background: #fff8e1; color: #6b4e00; border-radius: 9px; padding: 10px 13px; margin: 11px 0; font-size: var(--text-sm); line-height: 1.6; } .pm-nego-more { margin-top: 6px; } .pm-nego-more > summary { cursor: pointer; font-weight: 600; opacity: .85; } .pm-nego-more code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 4px; } /* FIX-01: dong phien ban giao dien trong [Thong tin] — de UAT sau biet ngay trang dang chay ma moi hay ma cu con trong bo nho. */ .pm-build { border-top: 1px dashed rgba(0,0,0,.15); padding-top: 6px; margin-top: 8px; font-size: var(--text-sm); } /* ===== WEBAPP-PRODUCT-UX-REFINE-01 ===== 1) Vỏ điều hướng sản phẩm DÍNH khi cuộn (chỉ trong module Quản trị sản phẩm). 2) Tab đang chọn nổi bật hơn. 3) "Đang chọn cái gì" phải thấy ngay — và PHẢI khác màu nhãn nghiệp vụ. NGUYÊN TẮC MÀU (quan trọng, đừng phá): · TRẠNG THÁI NGHIỆP VỤ = xanh lá (đã duyệt/đang dùng) · vàng (cần kiểm tra) · đỏ (không phải giá chính thức) · xám (ngừng dùng) · ĐANG CHỌN (selection) = XANH CHÀM/INDIGO, chỉ dùng cho việc "tôi đang xem cái này" Hai nhóm này không bao giờ dùng chung màu, để Chủ sở hữu không nhầm "đang chọn" với "đã duyệt". */ :root { --pm-select: #4f46e5; --pm-select-bg: #eef2ff; --pm-select-border: #c7d2fe; } /* --- 1 · STICKY SHELL --- */ .pm-shell { position: sticky; /* Đúng công thức của vỏ KPI: dưới topbar, rồi dưới Trung tâm CSKH (chiều cao do app.js đo bằng ResizeObserver qua --care-sticky-height). */ top: var(--sticky-module-top); z-index: var(--sticky-z-module); background: var(--bg-app); padding: 8px 0 10px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; /* Che mép nội dung cuộn qua phía dưới vỏ + phân biệt phần cố định với phần cuộn. */ box-shadow: var(--sticky-edge); } .pm-shell .pm-tabs { margin-bottom: 0; } .pm-shell .pm-filter-shell { margin: 0; } /* --- 2 · TAB ĐANG CHỌN RÕ HƠN --- */ .pm-tabs .tab { border-radius: 10px 10px 0 0; } .pm-tabs .tab.active { color: var(--pm-select); font-weight: 700; background: var(--pm-select-bg); border-bottom-color: var(--pm-select); box-shadow: inset 0 -3px 0 var(--pm-select); } .pm-tabs .tab.active::before { content: ''; } /* --- 3 · Ô LỌC ĐANG CÓ GIÁ TRỊ --- */ .pm-fbar .has-value { border-color: var(--pm-select-border); background: var(--pm-select-bg); font-weight: 600; } /* --- 4 · DÒNG SẢN PHẨM ĐANG MỞ --- */ .pm-fam.open { border-color: var(--pm-select-border); box-shadow: 0 1px 5px rgba(79,70,229,.12); } .pm-fam.open > .pm-fam-head { background: var(--pm-select-bg); } .pm-fam.open .pm-fam-name { color: var(--pm-select); } .pm-fam-caret { font-size: var(--text-md); opacity: .9; } .pm-fam.open .pm-fam-caret { color: var(--pm-select); } .pm-fam-openflag { flex: 0 0 auto; font-size: var(--text-xs); font-weight: 700; letter-spacing: .3px; color: var(--pm-select); background: #fff; border: 1px solid var(--pm-select-border); border-radius: 999px; padding: 1px 7px; text-transform: uppercase; } /* --- 5 · MODEL ĐANG XEM: chỉ báo ○ / ● + cả dòng sáng nhẹ --- */ .pm-model-btn { display: inline-flex; align-items: center; gap: 6px; } .pm-dot { font-size: var(--text-xs); line-height: 1; color: #b6bdc9; } .pm-model-btn.is-sel .pm-dot { color: var(--pm-select); } .pm-model-btn.is-sel code { font-weight: 700; color: var(--pm-select); } tr.pm-row-sel > td { background: var(--pm-select-bg) !important; } tr.pm-row-sel > td:first-child { box-shadow: inset 3px 0 0 var(--pm-select); } /* --- 6 · NÚT THÊM: rõ, không chìm, có khoá --- */ .pm-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .pm-panel-head .panel-title { margin: 0; } .pm-head-actions { display: flex; flex-wrap: wrap; gap: 8px; } .pm-add-btn { border: 1px dashed #b9c0cc; background: #fff; color: #55607a; font-weight: 600; white-space: nowrap; opacity: 1; } .pm-add-btn[disabled] { cursor: not-allowed; opacity: .95; } .pm-add-btn[disabled]:hover { border-color: #9aa4b2; } .pm-add-hint { font-size: var(--text-sm); color: var(--text-muted, #6b7280); margin: 0 0 10px; } .pm-fam-actions .pm-add-btn { padding: 4px 10px; font-size: var(--text-sm); } @media (max-width: 640px) { .pm-panel-head { flex-direction: column; } .pm-shell { padding-bottom: 8px; } } /* ===== WEBAPP-PRODUCT-P5B-POLICY-UI-01 — màn Chính sách thương mại ===== */ /* Cảnh báo vận hành quan trọng nhất của màn này: chính sách CHƯA được hệ thống tự áp vào báo giá. Phải nhìn thấy ngay, nhưng không được hét vào mặt người dùng. */ .pm-pol-warn { margin: 10px 0; padding: 10px 12px; border: 1px solid #fcd34d; border-left: 4px solid #f59e0b; border-radius: 8px; background: #fffbeb; color: #78350f; font-size: var(--text-md); line-height: 1.55; } .pm-pol-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 12px; } .pm-pol-filters input[type="search"] { min-width: 260px; flex: 1 1 260px; } .pm-pol-filters select { min-width: 150px; } .pm-pol-rule { max-width: 520px; } .pm-pol-prov { margin-top: 4px; } .pm-pol-actions { white-space: nowrap; } .pm-pol-actions .btn { margin: 2px 4px 2px 0; padding: 4px 10px; font-size: var(--text-sm); } /* Nhãn "Nhập từ dữ liệu cũ" — cố ý KHÁC màu với nhãn đã duyệt trong hệ thống, để không ai nhầm một dòng nhập từ Google Sheet là một lần duyệt có người. */ .tag-legacy { background: #f1f5f9; color: #475569; border: 1px dashed #94a3b8; } .pm-pol-sum { font-weight: 600; margin-bottom: 8px; } .pm-pol-quote { margin: 8px 0; padding: 10px 12px; border-left: 3px solid #cbd5e1; background: #f8fafc; border-radius: 0 6px 6px 0; white-space: pre-wrap; line-height: 1.55; } .pm-pol-uuid { font-size: var(--text-xs); color: #64748b; } .pm-pol-group { margin: 12px 0; } .pm-pol-group-title { font-weight: 600; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; } .pm-pol-item { padding: 8px 10px; margin-bottom: 6px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; line-height: 1.55; } .pm-pol-item-subject { display: flex; gap: 8px; align-items: center; font-weight: 600; margin-bottom: 4px; } /* LIGHT_ONLY_V1: khối @media (prefers-color-scheme: dark) cục bộ đã gỡ (C01). */ /* =================================================================== P6A-FAMILY-MODEL-UI — giao diện ghi Dòng sản phẩm + Model =================================================================== */ /* Nhóm nút hành động của một dòng/model. Nhỏ, xếp ngang, xuống dòng khi hẹp. */ .pm-fam-ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* NÚT NHỎ — SỬA 14/09/2026 (VISUAL-REFINEMENT-01). Trước: 11px. Đo được 34 nút ở 11px chỉ riêng tab Model ("Sửa" x20, "Duyệt" x10, "Ngừng sử dụng" x4). Đây là những nút Chủ sở hữu bấm hằng ngày, không phải chú thích kỹ thuật. Nay đạt sàn đọc được, và có chiều cao control thống nhất để các nút trên cùng một hàng không cao thấp so le. */ .btn-xs { padding: 0 10px; height: var(--control-h-sm); font-size: var(--font-badge); font-weight: var(--weight-semibold); line-height: 1; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; } /* Hàng đầu của một dòng sản phẩm: tiêu đề bấm được + nhóm nút, không chồng lên nhau. */ .pm-fam-ops { padding: 6px 12px 10px; } /* Lời nhắc mã bất biến — đặt NGAY DƯỚI ô nhập, không phải tooltip. */ .pm-immutable-hint { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--line-normal); } /* Trường chỉ đọc trong form sửa: nhìn khác hẳn ô nhập, để không ai thử gõ vào. */ .pm-readonly { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bg-surface-soft); color: var(--text-secondary); border: 1px dashed var(--border-subtle); } /* Lời nhắn sau khi ghi xong, hiện ở đầu tab cùng lúc với kết quả thật. */ .pm-notice { margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--status-success, #17803d); background: var(--status-success-soft, #e9f7ef); color: #14532d; font-size: var(--text-sm); line-height: var(--line-normal); } /* Lý do một model chưa có giá chính thức. Liệt kê từng lý do, không gom một câu. */ .pm-why { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--status-warning-soft); color: #7c4a03; font-size: var(--text-sm); } .pm-why ul { margin: 4px 0 0; padding-left: 18px; } .pm-why li { line-height: var(--line-normal); } /* Lý do model bị trả lại — phải đọc được ngay dưới tiêu đề chi tiết. */ .pm-reject-note { margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--status-danger-soft, #fdecec); color: #8a1c1c; font-size: var(--text-sm); line-height: var(--line-normal); } /* LIGHT_ONLY_V1: khối @media (prefers-color-scheme: dark) cục bộ đã gỡ (C01). */ /* =================================================================== P6B-PRICE-DRAFT-UI — khối Đề xuất giá trong Chi tiết model Mục đích của mọi luật màu ở đây: KHÔNG để ai đọc nhầm một đề xuất thành giá bán. Nền khác, viền khác, tiêu đề riêng. =================================================================== */ .pm-draft-panel { margin-top: 18px; padding: 12px 14px 14px; border: 1px dashed var(--border-strong, #c7ccd4); border-radius: var(--radius-md, 10px); background: var(--bg-surface-soft); } .pm-draft-panel .panel-title { margin-bottom: 0; } /* Câu cảnh báo "đây không phải bảng giá" — phải đọc được trước khi nhìn số tiền. */ .pm-draft-warn { margin: 8px 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); border-left: 3px solid var(--text-muted, #8a93a0); background: var(--bg-surface, #fff); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--line-normal); } .pm-draft-warn b { color: var(--text-primary); } .pm-draft-hint { margin-top: 10px; font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--line-normal); } /* Khối "Chưa thể duyệt giá". Không phải nút xám có tooltip — là lời giải thích đọc được trên mọi thiết bị, kể cả điện thoại không có con trỏ để rê. */ .pm-approval-lock { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border-left: 3px solid var(--status-warning, #b8770a); background: var(--status-warning-soft); color: #7c4a03; font-size: var(--text-sm); line-height: var(--line-normal); } .pm-approval-lock b { display: block; margin-bottom: 4px; } .pm-approval-lock div + div { margin-top: 4px; } .tag-bad { background: var(--status-danger-soft, #fdecec); color: #8a1c1c; border: 1px solid rgba(138,28,28,.25); } /* LIGHT_ONLY_V1: khối @media (prefers-color-scheme: dark) cục bộ đã gỡ (C01). */ /* ========================================================================== WEBAPP-PRODUCT-PRICE-UX-AND-DEACTIVATION-SAFETY-V1-01 Ba việc: (1) nói rõ đổi giá ở đâu · (2) tách hành động nguy hiểm khỏi hành động thường · (3) hiện ranh giới thương lượng đúng sự thật là CHƯA CÓ. Giữ nguyên tone WebApp — không thiết kế lại Product. ========================================================================== */ /* --- Hành động NGUY HIỂM: viền đỏ, KHÔNG phải nút chính, không đặc ruột --- Cố ý không dùng nền đỏ đặc: nền đặc trông như nút chính và mời người ta bấm. */ .pm-danger-btn { background: #fff; color: #a3231f; border: 1px solid #e0b4b2; font-weight: 600; } .pm-danger-btn:hover:not(:disabled) { background: var(--status-danger-soft, #fef2f2); border-color: #c9706c; } .pm-danger-btn:disabled { opacity: .5; cursor: not-allowed; } /* --- Khu hành động quản trị (cuối tab Thông tin chung) --- */ .pm-admin-zone { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line, #e3e7ee); } .pm-admin-zone-title { font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; } .pm-admin-zone-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* --- Vùng nguy hiểm: tách hẳn, phải cuộn tới mới thấy --- */ .pm-danger-zone { margin-top: 16px; padding: 12px 13px; border: 1px solid #e6c3c1; border-left: 3px solid #b4322c; border-radius: 8px; background: #fffaf9; } .pm-danger-zone-title { font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #a3231f; margin-bottom: 6px; } .pm-danger-zone-desc { font-size: var(--text-sm); color: #6f4a48; margin-bottom: 10px; line-height: 1.5; } .pm-danger-zone-acts { display: flex; flex-wrap: wrap; gap: 8px; } /* --- Hộp xác nhận: nói rõ đang dừng CÁI GÌ --- */ .pm-confirm-what { border: 1px solid var(--line, #e3e7ee); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #fbfcfe; } .pm-danger-note { border: 1px solid #e6c3c1; border-left: 3px solid #b4322c; border-radius: 8px; background: #fffaf9; color: #7a3f3c; padding: 10px 12px; margin-bottom: 12px; font-size: var(--text-md); line-height: 1.55; } /* --- Thẻ giá hiện hành: câu trả lời cho "đổi giá ở đâu?" --- */ .pm-price-now-howto { margin-top: 9px; font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary, #55627a); } .pm-price-now-cta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } /* --- Ranh giới thương lượng --- */ .pm-nego-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; } .pm-nego-title { font-weight: 700; font-size: var(--text-md); letter-spacing: .01em; } .pm-nego-say { font-size: var(--text-md); line-height: 1.55; margin-bottom: 9px; } .pm-nego-shape { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 2px 18px; background: rgba(255,255,255,.55); border: 1px solid rgba(240,195,109,.7); border-radius: 8px; padding: 9px 11px; margin-bottom: 9px; } .pm-nego-ai { font-size: var(--text-sm); line-height: 1.55; } /* LIGHT_ONLY_V1: khối @media (prefers-color-scheme: dark) cục bộ đã gỡ (C01). */ /* Huy hiệu trạng thái dòng sản phẩm — chỉ hiện khi KHÁC "đang dùng", để dòng tạm dừng không trông giống dòng bình thường. Tên dòng vẫn là cấp bậc chính. */ .pm-fam-st { flex: 0 0 auto; display: inline-flex; align-items: center; } /* ========================================================================== DESIGN SYSTEM V1 — THÀNH PHẦN DÙNG CHUNG FORM: WEBAPP-DESIGN-SYSTEM-V1-PRODUCT-UI-CONSOLIDATION-01 · 14/09/2026 Product là module ÁP DỤNG ĐẦU TIÊN. KPI/CRM chưa chuyển sang lớp này. Thang bậc chi phối: DỮ LIỆU NGHIỆP VỤ > TRẠNG THÁI > HÀNH ĐỘNG > CHỮ GIẢI THÍCH. ========================================================================== */ /* --- BĂNG THÔNG BÁO: một dòng, không chiếm chỗ hơn dữ liệu --- */ .ds-banner { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-soft); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface-soft); font-size: var(--font-help); line-height: var(--line-normal); margin: var(--space-3) 0; } .ds-banner-text { flex: 1 1 240px; color: var(--text-secondary); } .ds-banner-text b { color: var(--text-primary); } .ds-banner-info { border-left-color: var(--status-info); background: var(--status-info-soft); } .ds-banner-warn { border-left-color: var(--status-warning); background: var(--status-warning-soft); } .ds-banner-danger{ border-left-color: var(--status-danger); background: var(--status-danger-soft); } .ds-banner-link { flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-link); font-size: var(--font-help); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; } .ds-banner-link:hover { color: var(--brand-primary-hover); } /* --- KHỐI BUNG RA ĐỌC THÊM --- */ .ds-disclosure { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-surface-soft); padding: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--font-help); line-height: var(--line-relaxed); color: var(--text-secondary); } .ds-disclosure-item + .ds-disclosure-item { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border-soft); } .ds-disclosure b { color: var(--text-primary); } /* --- TRẠNG THÁI RỖNG: nói rõ và mời hành động, không bỏ mặc --- */ .ds-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface-soft); padding: var(--space-6) var(--space-4); text-align: center; margin: var(--space-3) 0; } .ds-empty-title { font-size: var(--font-card-title); font-weight: var(--weight-semibold); color: var(--text-primary); } .ds-empty-note { font-size: var(--font-help); color: var(--text-muted); margin-top: var(--space-2); line-height: var(--line-relaxed); } .ds-empty-sm { padding: var(--space-4); font-size: var(--font-help); color: var(--text-muted); } /* --- TRUNG TÂM TÀI LIỆU & MEDIA --- */ .pm-media-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .pm-media-title { font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); } .pm-media-head-acts { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .pm-media-blocked { color: var(--text-secondary); } .pm-media-blocked b { color: var(--status-warning); } .pm-media-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); } .pm-media-count { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-surface); padding: var(--space-2) var(--space-3); } .pm-media-count.is-warn { border-left: 3px solid var(--status-warning); } .pm-media-count.is-ok { border-left: 3px solid var(--status-success); } .pm-media-count-n { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--line-tight); color: var(--text-primary); } .pm-media-count-l { font-size: var(--font-meta); color: var(--text-muted); margin-top: 2px; } .pm-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .pm-media-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); padding: var(--card-pad-sm); box-shadow: var(--shadow-sm); } .pm-media-card.is-primary { border-left: 3px solid var(--status-success); } .pm-media-card-top { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .pm-media-card-title { font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-primary); } .pm-media-card-meta { font-size: var(--font-meta); color: var(--text-muted); margin-top: 2px; } .pm-media-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--space-2); } .pm-media-card-acts { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--font-meta); } .pm-media-row-acts { white-space: nowrap; } .pm-media-row-acts .btn-link + .btn-link, .pm-media-row-acts a + .btn-link { margin-left: var(--space-2); } .pm-danger-link { color: var(--status-danger); } .pm-scope-box { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .pm-scope-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-body); } /* --- Ô GIÁ: dữ liệu chính phải nổi hơn chữ quanh nó --- */ .pm-cell-price { font-weight: var(--weight-semibold); white-space: nowrap; } .pm-cell-eff { white-space: nowrap; } .pm-arrow { color: var(--text-disabled); padding: 0 2px; } /* LIGHT_ONLY_V1: khối @media (prefers-color-scheme: dark) cục bộ đã gỡ (C01). */ /* --- KÉO & THẢ TẢI TỆP LÊN DRIVE (OD-M1) --- */ .pm-drop { border: 2px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface-soft); padding: var(--space-6) var(--space-4); text-align: center; cursor: pointer; margin-bottom: var(--space-3); transition: background .12s, border-color .12s; } .pm-drop:hover, .pm-drop:focus-visible { border-color: var(--brand-primary); background: var(--brand-primary-soft); outline: none; } .pm-drop.is-over { border-color: var(--brand-primary); background: var(--brand-primary-soft); } .pm-drop.is-busy { opacity: .6; cursor: progress; } .pm-drop-title { font-size: var(--font-card-title); font-weight: var(--weight-semibold); color: var(--text-primary); } .pm-drop-note { font-size: var(--font-help); color: var(--text-muted); margin-top: var(--space-1); } .pm-drop-limits { opacity: .8; } .pm-upq { margin-bottom: var(--space-3); } .pm-upq-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-surface); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); font-size: var(--font-body); } .pm-upq-row.is-fail { border-left: 3px solid var(--status-danger); } .pm-upq-name { flex: 1 1 220px; font-weight: var(--weight-medium); color: var(--text-primary); } .pm-upq-size { color: var(--text-muted); font-size: var(--font-meta); } .pm-upq-err { color: var(--status-danger); font-size: var(--font-meta); } /* --- ẢNH XEM TRƯỚC --- */ .pm-media-thumb { height: 132px; margin: calc(var(--card-pad-sm) * -1) calc(var(--card-pad-sm) * -1) var(--space-2); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; } .pm-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pm-media-thumb.is-blank::after { content: 'Chưa có ảnh xem trước'; font-size: var(--font-meta); color: var(--text-disabled); } /* LIGHT_ONLY_V1: khối @media (prefers-color-scheme: dark) cục bộ đã gỡ (C01). */ /* ==================================================================== DESIGN SYSTEM V1 — LỚP TINH CHỈNH THỊ GIÁC FORM: WEBAPP-DESIGN-SYSTEM-V1-PRODUCT-VISUAL-REFINEMENT-01 · 14/09/2026 Nguyên tắc của cả khối này: · KHÔNG con số lạ. Mọi giá trị phải là token đã có tên. · Thang bậc thị giác: DỮ LIỆU NGHIỆP VỤ > TRẠNG THÁI > HÀNH ĐỘNG > CHỮ GIẢI THÍCH. · Mã/ID là hạng hai. Nó không bao giờ được to hoặc đậm bằng TÊN. · Nút nguy hiểm không bao giờ nổi bằng nút chính. · Vay mượn được thì dùng component chung, đừng đẻ biến thể riêng cho Product. ==================================================================== */ /* ---------- 0 · CHIỀU SÂU NỀN: app < khối < thẻ ---------- Trước đây gần như mọi mặt phẳng đều trắng, nên không phân biệt được đâu là nền, đâu là nội dung. Ba mức dưới đây đủ để mắt tách lớp mà không cần bóng nặng. */ .pm-fam, .pm-detail-panel, .pm-media-card, .pm-upq-row { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* ---------- 1 · DÒNG SẢN PHẨM — thang bậc rõ ---------- */ .pm-fam-list { gap: var(--space-2); } .pm-fam { overflow: hidden; transition: border-color .15s, box-shadow .15s; } .pm-fam:hover { border-color: var(--border-strong); } .pm-fam-head { gap: var(--space-3); padding: var(--space-3) var(--space-4); align-items: center; } .pm-fam-head:hover { background: var(--bg-surface-soft); } /* TÊN dòng sản phẩm = nhân vật chính của hàng này. */ .pm-fam-name { font-size: var(--font-card-title); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: -.01em; } /* MÃ = hạng hai. Đọc được, nhưng không tranh chỗ với tên. */ .pm-fam-code { font-size: var(--font-meta); font-weight: var(--weight-medium); color: var(--text-muted); background: var(--bg-subtle); border: 0; border-radius: var(--radius-sm); padding: 2px var(--space-2); opacity: 1; } /* Dữ liệu phụ (đếm model, ghi chú) = hạng ba. */ .pm-fam-sum { font-size: var(--font-meta); color: var(--text-muted); opacity: 1; font-variant-numeric: tabular-nums; } .pm-fam-caret { color: var(--text-disabled); opacity: 1; } .pm-fam.open { border-color: var(--pm-select-border); box-shadow: var(--shadow-sm); } .pm-fam.open > .pm-fam-head { background: var(--pm-select-bg); } .pm-fam-openflag { font-size: var(--font-badge); padding: 2px var(--space-2); } .pm-fam-body { padding: 0 var(--space-4) var(--space-4); } /* HÀNG HÀNH ĐỘNG của dòng sản phẩm: tách khỏi tiêu đề bằng một đường rất nhẹ, để nút không trôi lơ lửng giữa hai dòng dữ liệu. */ .pm-fam-ops { padding: var(--space-2) var(--space-4) var(--space-3); gap: var(--space-2); border-top: 1px solid var(--border-soft); background: var(--bg-surface-soft); } .pm-fam.open .pm-fam-ops { background: transparent; } /* ---------- 2 · THANG BẬC NÚT — nguy hiểm KHÔNG nổi hơn việc thường ---------- Trước: Sửa và Ngừng sử dụng cùng một sắc độ, cùng một độ nổi. Người dùng mệt thì bấm nhầm. Nay: việc thường = viền nhạt; việc nguy hiểm = chữ đỏ trên nền trắng, CHỈ đỏ đậm khi rê chuột vào (tức là khi đã có chủ đích). */ .pm-fam-ops .btn-xs:not(.btn-primary):not(.pm-danger-btn) { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border-default); } .pm-fam-ops .btn-xs:not(.btn-primary):not(.pm-danger-btn):hover { background: var(--bg-surface-soft); color: var(--text-primary); border-color: var(--border-strong); } .pm-danger-btn { background: var(--bg-surface); color: var(--status-danger); border-color: var(--status-danger-soft); font-weight: var(--weight-medium); } .pm-danger-btn:hover:not(:disabled) { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); font-weight: var(--weight-semibold); } /* ---------- 3 · BẢNG MODEL — đọc được, thẳng cột ---------- */ table.data td { font-size: var(--font-table-cell); } table.data tbody tr { transition: background .12s; } table.data tbody tr:hover { background: var(--brand-primary-soft); } /* Số tiền: canh phải + chữ số đều bề ngang, để mắt so hàng dọc được. */ table.data td.num, table.data th.num { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); } /* Ô hành động không bao giờ bị xuống dòng lệt bệt. */ table.data td .pm-fam-ops { padding: 0; border-top: 0; background: transparent; flex-wrap: nowrap; justify-content: flex-end; } /* Mã model trong bảng = hạng hai, nhưng vẫn phải bấm được và đọc được. */ .pm-model-btn code { font-size: var(--font-table-cell); font-weight: var(--weight-semibold); background: transparent; padding: 0; color: var(--text-link); } .pm-model-btn.is-sel code { color: var(--pm-select); } .pm-dot { font-size: var(--font-meta); } /* ---------- 4 · CHI TIẾT MODEL — tên trước, mã sau ---------- */ .pm-detail-panel { border-left: 3px solid var(--brand-primary); padding: var(--card-pad); } .pm-detail-head { margin-bottom: var(--space-3); gap: var(--space-3); } .pm-detail-title { font-size: var(--font-section-title); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--line-tight); } /* Mã model trong tiêu đề: hạng hai, không to bằng tên sản phẩm. */ .pm-detail-title code { font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-muted); background: var(--bg-subtle); padding: 2px var(--space-2); border-radius: var(--radius-sm); margin-right: var(--space-1); } .pm-detail-status { margin-top: var(--space-2); gap: var(--space-2); } /* Đóng là điều hướng, không phải hành động nghiệp vụ — giữ nó nhạt. */ #pm-detail-close { color: var(--text-muted); font-weight: var(--weight-medium); } #pm-detail-close:hover { color: var(--text-primary); } /* ---------- 5 · BỘ LỌC & Ô NHẬP — cùng chiều cao, đọc được ---------- Trước: nhãn trường 11px viết cứng, các control cao thấp so le. */ .fbar-field-label { font-size: var(--font-meta); color: var(--text-secondary); letter-spacing: .02em; } .fbar select, .fbar input, .fbar-select, .pm-filter-shell select, .pm-filter-shell input { height: var(--control-h); font-size: var(--font-body); border-radius: var(--control-radius); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); padding: 0 var(--control-pad-x); } .fbar select:focus, .fbar input:focus, .pm-filter-shell select:focus, .pm-filter-shell input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-primary-soft); } /* Chữ gợi ý không được nhạt tới mức không đọc nổi. */ .fbar input::placeholder, .pm-filter-shell input::placeholder { color: var(--text-disabled); } /* ---------- 6 · GIÁ & CHÍNH SÁCH — ba tầng thị giác ---------- Tầng 1 GIÁ CHÍNH THỨC nổi nhất · tầng 2 ĐỀ XUẤT · tầng 3 RANH GIỚI (nội bộ). */ .pm-price-card, .pm-nego { border-radius: var(--radius-md); } .pm-nego { background: var(--bg-surface-soft); border: 1px solid var(--border-soft); padding: var(--card-pad-sm); } .pm-nego-title { font-size: var(--font-card-title); font-weight: var(--weight-semibold); } .pm-nego-say { font-size: var(--font-help); color: var(--text-secondary); line-height: var(--line-normal); } /* Khối 8 mục sẽ phải quyết là tham khảo nội bộ — gọn lại thành lưới, không phải một danh sách dài chiếm nửa màn hình. */ .pm-nego-shape { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); } .pm-field-missing { color: var(--text-disabled); font-style: italic; } /* ---------- 7 · BĂNG THÔNG BÁO — không to hơn dữ liệu ---------- Màu vàng CHỈ dùng khi thật sự là cảnh báo cần hành động. Thông tin trung tính dùng nền xám, không dùng vàng. */ .ds-banner { padding: var(--space-2) var(--space-3); font-size: var(--font-help); line-height: var(--line-normal); border-radius: var(--radius-sm); } .ds-banner-neutral { border-left-color: var(--border-strong); background: var(--bg-surface-soft); } .ds-disclosure { font-size: var(--font-help); } /* ---------- 8 · TÀI LIỆU & MEDIA — nói rõ tải được cái gì ---------- */ .pm-drop { padding: var(--space-5); border-radius: var(--radius-md); } .pm-drop-note { font-size: var(--font-help); } /* Bốn nhóm tệp được phép — hiện thành hàng chip, để người dùng biết ngay được phép đưa loại nào lên, thay vì đọc một dòng chữ nhỏ. */ .pm-drop-kinds { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-3); } .pm-drop-kind { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-badge); font-weight: var(--weight-medium); color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 999px; padding: 3px var(--space-3); } .pm-drop-kind b { color: var(--text-primary); font-weight: var(--weight-semibold); } .pm-drop-kind-ext { color: var(--text-muted); font-weight: var(--weight-normal); } /* Đích đến của tệp mới — sự thật quan trọng, không giấu trong chữ tí hon. */ .pm-drop-dest { margin-top: var(--space-3); font-size: var(--font-help); color: var(--text-secondary); background: var(--status-info-soft); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); display: inline-block; } .pm-drop-dest b { color: var(--text-primary); } /* Khối kết nối Drive: gọn một hàng, không chiếm diện tích của dữ liệu. */ .pm-media-conn { padding: var(--space-2) var(--space-3); font-size: var(--font-help); } .pm-upq-row { padding: var(--space-2) var(--space-3); font-size: var(--font-body); } .pm-upq-state { margin-left: auto; } /* ---------- 9 · TRẠNG THÁI RỖNG — giải thích, không để trắng ---------- */ .empty { padding: var(--space-6); font-size: var(--font-help); color: var(--text-muted); } /* ---------- 10 · TIÊU ĐIỂM BÀN PHÍM — thấy được ở mọi nút ---------- Không chỉ dựa vào màu để báo trạng thái: nút vô hiệu có cả độ mờ lẫn con trỏ khác. */ .btn:focus-visible, .btn-link:focus-visible, .pm-fam-head:focus-visible, .tab:focus-visible, [data-ds-toggle]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } .btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; } /* ---------- 11 · MÀN HÌNH HẸP HƠN (1366x768) ---------- Không thu nhỏ chữ để nhét dữ liệu. Thay vào đó giảm đệm và cho bảng tự cuộn ngang. */ @media (max-width: 1400px) { .pm-fam-head { padding: var(--space-2) var(--space-3); } .pm-detail-panel { padding: var(--card-pad-sm); } .table-scroll { overflow-x: auto; } .pm-media-counts { gap: var(--space-2); } } /* ---------- KHO GOOGLE DRIVE — huy hiệu trạng thái + hành động nhẹ ---------- FORM: WEBAPP-PRODUCT-WEBAPP-FIRST-DRIVE-PROVISIONING-V1-01 · 14/09/2026 Mã thư mục Drive là metadata KỸ THUẬT, không phải thông tin nghiệp vụ. Người bán hàng không cần nhìn nó và nhìn cũng không làm gì được. Ô này hiện TRẠNG THÁI. */ .pm-drive-cell { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .pm-drive-retry { font-size: var(--font-meta); font-weight: var(--weight-semibold); } /* "Mở vị trí lưu trữ" là tiện ích cho quản trị kỹ thuật, KHÔNG phải luồng nghiệp vụ chính — nên nó phải nhạt hơn mọi thứ khác trong ô. */ .pm-drive-open { font-size: var(--font-meta); color: var(--text-muted); font-weight: var(--weight-normal); } .pm-drive-open:hover { color: var(--text-secondary); } /* Hàng tiêu đề dòng sản phẩm nay có thêm ô trạng thái kho, đặt sát mép phải cạnh nhóm nút — cùng hàng, không đẩy tên xuống. */ .pm-fam-drive { padding: 0 var(--space-4) var(--space-2); } .pm-fam.open .pm-fam-drive { padding-bottom: var(--space-1); } /* ===================================================================== WEBAPP05-C1B-ADMIN-CONTROL-PLANE-OBSERVE-V1-01 TRUNG TÂM QUẢN TRỊ — NGƯỜI DÙNG & TỔ CHỨC LUẬT TỰ ÁP CHO KHỐI NÀY (Design System V1 · PHẦN B): · CHỈ dùng token ở :root. Không một mã màu hay cỡ chữ viết cứng nào. · KHÔNG định nghĩa lại .panel .data .tag-* .btn-* — dùng nguyên lớp chung. (Hai bản của .btn-ghost/.btn-danger từng âm thầm đè nhau; không lặp lại.) · Sàn chữ nghiệp vụ 12.5px (--text-sm). --text-xs chỉ cho mã kỹ thuật. · Không tự cộng offset sticky — khối này không dính. Tiền tố .org- nên không va vào lớp của module nào khác. ===================================================================== */ /* Băng trạng thái chế độ — thứ người dùng phải đọc trước khi bấm bất cứ gì */ .org-banner { background: var(--status-warning-soft); border: 1px solid var(--status-warning); color: var(--text-primary); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-md); line-height: var(--line-normal); margin-bottom: var(--space-3); } .org-banner-info { background: var(--status-info-soft); border-color: var(--border-focus); } /* Dải số tổng quan */ .org-stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); } .org-stat { flex: 1 1 190px; min-width: 190px; } .org-stat-num { font-size: var(--text-metric); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--line-tight); } .org-stat-label { font-size: var(--text-md); color: var(--text-secondary); font-weight: var(--weight-medium); } .org-stat-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; } .org-stat-warn { border-color: var(--status-warning); background: var(--status-warning-soft); } /* ---- WEBAPP-SETTINGS-USERS-ORG-OVERVIEW-UI-V1-01 · đầu workspace + Tổng quan ---- Chỉ token sẵn có. Tiền tố .org-head / .org-ov- ⇒ không va lớp module khác. Khối @media của phần này nằm NGAY CUỐI khối, sau mọi quy tắc nó cần đè. */ .org-head { padding: 12px 18px; margin-bottom: var(--space-3); flex-wrap: nowrap; } .org-head > .page-header-left { flex: 1 1 auto; min-width: 0; } .org-head .pm-head-info > summary { white-space: nowrap; } .org-head-right { position: relative; } .org-head .pm-head-info-body { position: absolute; right: 0; top: 100%; z-index: 5; width: min(560px, calc(100vw - 32px)); max-width: none; box-shadow: var(--shadow-sm); } .org-head .pm-head-info-body code { white-space: normal; overflow-wrap: anywhere; } .org-head h1 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xl); } .org-head-badge { font-size: var(--text-sm); font-weight: var(--weight-medium); } .org-head-right { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 430px; min-width: 260px; } .org-head-note { flex: 1 1 auto; min-width: 0; background: var(--status-info-soft); color: var(--status-info); border: 1px solid var(--border-focus); border-radius: var(--radius-md); padding: 6px 10px; font-size: var(--text-sm); line-height: var(--line-normal); } .org-crumb-home { color: inherit; text-decoration: none; } .org-crumb-home:hover { text-decoration: underline; } .org-ov-banner { padding: 6px 10px; font-size: var(--text-sm); } .org-ov-cards { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .org-ov-card { margin: 0; padding: 12px 14px; min-width: 0; } .org-ov-card.is-warn { border-color: var(--status-warning); background: var(--status-warning-soft); } .org-ov-icon { width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 18px; background: var(--tone-bg, var(--bg-subtle)); color: var(--tone-fg, var(--text-secondary)); margin-bottom: 6px; } .org-ov-num { font-size: var(--text-metric); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--line-tight); } .org-ov-label { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--weight-semibold, 600); } .org-ov-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; } .org-ov-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; } .org-ov-side { display: grid; gap: var(--space-3); min-width: 0; } .org-ov-people, .org-ov-tree, .org-ov-rules { margin: 0; min-width: 0; } .org-ov-phead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); } .org-ov-ptitle { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); } .org-ov-psub { font-size: var(--text-sm); color: var(--text-muted); } .org-ov-tools { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .org-ov-seg, .org-ov-views { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; } .org-ov-segbtn, .org-ov-view { border: 0; background: var(--bg-surface); color: var(--text-secondary); padding: 4px 10px; font-size: var(--text-sm); cursor: pointer; min-height: 28px; } .org-ov-segbtn + .org-ov-segbtn, .org-ov-view + .org-ov-view { border-left: 1px solid var(--border-default); } .org-ov-segbtn.active, .org-ov-view.active { background: var(--brand-primary-soft); color: var(--brand-primary); font-weight: var(--weight-bold); } .org-ov-scroll { max-height: min(420px, 52vh); overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-md); } .org-ov-table { table-layout: fixed; width: 100%; margin: 0; } /* Lớp chung ở ≤1024 biến table.data thành khối tự cuộn (display:block) — bảng này đã có khung cuộn riêng nên giữ display:table (đặc hiệu cao hơn, không phụ thuộc thứ tự tệp). */ .org-ov-scroll table.data { display: table; max-width: none; overflow: visible; } .org-ov-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-subtle); } .org-ov-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .org-ov-code { font-weight: var(--weight-bold); color: var(--text-primary); } .org-ov-table .tag { padding: 1px 6px; } table.data.org-ov-table th, table.data.org-ov-table td { padding-left: 6px; padding-right: 6px; } .org-ov-person { display: flex; align-items: center; gap: 8px; min-width: 0; } .org-ov-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .org-ov-av { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-subtle); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-bold); } .org-ov-open { min-width: 28px; padding: 0 6px; } .org-ov-foot { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); } .org-ov-root { border: 1px solid var(--border-focus); background: var(--status-info-soft); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: var(--space-2); } .org-ov-rootlbl, .org-ov-branchlbl { font-weight: var(--weight-bold); color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .org-ov-rootnames { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; } .org-ov-count { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); background: var(--bg-subtle); border-radius: 999px; padding: 0 8px; white-space: nowrap; } .org-ov-muted { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-medium); } .org-ov-nodes { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border-soft); max-height: min(220px, 30vh); overflow: auto; } .org-ov-node { display: flex; align-items: center; gap: 8px; padding: 4px 6px; min-width: 0; } .org-ov-nname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); } .org-ov-nname small { color: var(--text-muted); margin-left: 6px; } .org-ov-gap { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); border-top: 1px dashed var(--border-soft); padding-top: 6px; } .org-ov-rulegrid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: var(--space-2); } .org-ov-rule { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 8px 10px; background: var(--bg-surface); } .org-ov-rule b { display: block; font-size: var(--text-md); color: var(--text-primary); } .org-ov-rule span { font-size: var(--text-sm); color: var(--text-muted); } @media (max-width: 1100px) { .org-ov-grid { grid-template-columns: minmax(0, 1fr); } .org-head { flex-wrap: wrap; } .org-head-right { flex-basis: 100%; min-width: 0; } } @media (max-width: 640px) { .org-ov-scroll { max-height: none; } .org-ov-table { table-layout: auto; } .org-ov-table td { white-space: normal; } } /* ---- WEBAPP-SETTINGS-USERS-ORG-2TAB-CORE-V2-01 · hai workspace Nhân sự & Tổ chức / Quyền & Ủy quyền ---- Bố cục chia đôi dùng NGUYÊN lớp .scv* của Danh mục hệ thống (đã LOCK). Khối này chỉ thêm phần riêng của Tổ chức, tiền tố .org-w- / .org-p-, chỉ token. @media của khối nằm CUỐI khối. */ .org-page .scv { margin-top: var(--space-1); } .org-w-sec { font-size: var(--font-meta); font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: var(--space-3) 0 var(--space-1); } .org-w-code { color: var(--text-muted); font-weight: var(--weight-medium); font-size: var(--font-meta); margin-left: 6px; } .org-w-thu { margin-left: 6px; padding: 1px 6px; } .org-w-nochev { visibility: hidden; cursor: default; } .org-w-search { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); font: inherit; margin-bottom: var(--space-2); } .org-w-search:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); } .org-w-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); } #org-w-list .scv-list-head, #org-p-list .scv-list-head { margin-bottom: var(--space-2); } .org-ov-card[data-wpv] { cursor: pointer; } .org-ov-card[data-wpv]:hover { border-color: var(--brand-primary); } .org-ov-card[data-wpv]:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* Panel lồng trong khung chi tiết: nhẹ hơn panel ngoài để không thành "hộp trong hộp". */ #org-w-detail .panel { box-shadow: none; border: 1px solid var(--border-soft); padding: 12px; margin: 0 0 var(--space-3); } #org-w-detail .org-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } #org-w-detail .org-half { min-width: 0; flex-basis: 260px; } .org-p-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; } .org-p-owner { margin: 0 0 var(--space-2); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px var(--space-4); } .org-p-owner li { font-size: var(--font-body); color: var(--text-secondary); } .org-w-audit { margin-top: var(--space-3); } /* COMPACT-HEADER-V2-PATCH-01 · đầu trang gọn + huy hiệu "Chế độ quan sát ⓘ" (dải tóm tắt → thẻ số gọn ở VISUAL-POLISH-V2-02). Khoá theo .org-head-v3 / .org-strip ⇒ không đụng đầu trang Danh mục hệ thống (.settings-page > .page-header). */ .org-head.org-head-v3 { padding: 8px 14px; margin-bottom: 0; flex-wrap: nowrap; align-items: center; } /* .crm là flex-cột gap 16px ⇒ lề riêng của vỏ tab cộng dồn; bỏ bớt, chỉ ở trang Tổ chức (#org-shell). */ .org-page > #org-shell { padding: 2px 0 4px; margin-bottom: 0; } .org-head.org-head-v3 h1 { font-size: var(--text-xl); margin: 0; line-height: var(--line-tight); } .org-head.org-head-v3 p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); } .org-head.org-head-v3 .org-head-right { flex: 0 0 auto; min-width: 0; } .org-obs > summary.org-head-badge { list-style: none; cursor: pointer; white-space: nowrap; border: 0; padding: 3px 10px; } .org-obs > summary.org-head-badge::-webkit-details-marker { display: none; } .org-obs > summary.org-head-badge:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .org-obs > .pm-head-info-body p { margin: 0 0 6px; } /* VISUAL-POLISH-V2-02 · thứ bậc chữ · thẻ số gọn · bộ lọc dạng nút phân đoạn · dòng cây 2 tầng · panel Quyền. Mọi quy tắc khoá trong .org-page / #org-w-* / #org-p-* ⇒ KHÔNG đổi .scv* dùng chung của Danh mục hệ thống (LOCK). Thứ bậc: tiêu đề trang 17/600 · tiêu đề khối 15/600 · tên người 13,5/600 · chữ thân 13,5 · chữ phụ 12,5 (sàn đọc 12,5px). */ .org-head.org-head-v3 h1 { font-weight: var(--weight-semibold); } .org-page .scv-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--line-normal); } .org-page .scv-dtitle .scv-title { font-weight: var(--weight-bold); } .org-sec-ico { font-size: var(--text-lg); margin-right: 6px; } .org-page .scv-list, .org-page .scv-detail { padding: 14px 16px; } .org-page .scv-dhead { align-items: center; } .org-dhead-right { margin-left: auto; flex: 0 0 auto; align-self: flex-start; } .org-page .scv-dl { gap: var(--space-3) var(--space-4); } .org-page .scv-dl .scv-label { font-size: var(--font-meta); font-weight: var(--weight-medium); color: var(--text-muted); } .org-page .scv-dl-val { line-height: var(--line-normal); } .org-page .scv-help { font-size: var(--font-meta); color: var(--text-muted); line-height: var(--line-normal); } /* Thẻ số gọn — một hàng khi đủ chỗ, cao ~62px */ .org-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); } .org-sc { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 58px; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font: inherit; color: inherit; text-align: left; } button.org-sc { cursor: pointer; } button.org-sc:hover { border-color: var(--brand-primary); } button.org-sc:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .org-sc.is-warn { border-color: var(--status-warning); } .org-sc-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--tone-bg); color: var(--tone-fg); } .org-sc-body { display: flex; flex-direction: column; min-width: 0; } .org-sc-label { font-size: var(--font-meta); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-sc-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .org-sc-num { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--line-tight); } .org-sc.is-warn .org-sc-num { color: var(--status-warning); } .org-sc-sub { font-size: var(--font-meta); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Hàng công cụ: ô tìm + bộ lọc cùng nhịp */ .org-w-tools { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .org-w-tools .org-w-search { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } .org-w-tools .org-ov-seg { flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: visible; } .org-w-tools .org-ov-segbtn { border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); padding: 4px 12px; min-height: 30px; font-size: var(--font-meta); font-weight: var(--weight-medium); cursor: pointer; } .org-w-tools .org-ov-segbtn + .org-ov-segbtn { border-left: 0; } .org-w-tools .org-ov-segbtn:hover { color: var(--text-primary); } .org-w-tools .org-ov-segbtn.active { background: var(--brand-primary-soft); color: var(--brand-primary); font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 1px var(--brand-primary); } .org-w-tools .org-ov-segbtn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; } /* Dòng cây / danh sách: tên đậm ở trên, vai · mã ở dưới */ .org-page .scv-tree .scv-row { padding: 8px 10px; gap: 10px; } .org-page .scv-tree .scv-row + .scv-row, .org-page .scv-tree .scv-group + .scv-group { margin-top: 2px; } .org-page .scv-name.org-nm { display: flex; flex-direction: column; gap: 1px; white-space: normal; } .org-nm-main { font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--line-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-page .scv-crow .org-nm-main { font-weight: var(--weight-medium); } .org-nm-meta { font-size: var(--font-meta); font-weight: var(--weight-normal); color: var(--text-muted); line-height: var(--line-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-pill { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--brand-primary-soft); color: var(--brand-primary); font-size: var(--font-meta); font-weight: var(--weight-semibold); } /* Panel Quyền: mục tách rõ, tiêu đề mục 15/600 có biểu tượng */ .org-p-sec { border-top: 1px solid var(--border-soft); padding-top: var(--space-4); margin-top: var(--space-4); } .org-p-h { display: flex; align-items: center; margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--line-normal); } .org-p-empty { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface-soft); } .org-p-empty strong { color: var(--text-primary); font-size: var(--font-body); } .org-p-empty .org-muted { font-size: var(--font-meta); margin-top: 2px; } .org-p-empty-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--bg-subtle); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .org-p-owner li { display: flex; align-items: baseline; gap: 6px; line-height: var(--line-normal); } .org-p-owner li::before { content: "🔒"; font-size: 12px; } .org-w-audit > summary { cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--space-2); padding: 6px 0; } .org-w-audit > summary .org-p-h { display: inline-flex; margin: 0; } .org-w-audit > summary .org-muted { font-size: var(--font-meta); } /* Quyền & Ủy quyền · nối API thật (SETTINGS-PERMISSION-DELEGATION-UI-INTEGRATION-V1-01): một thẻ / module + biểu mẫu tại chỗ */ .org-pm { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px 12px; background: var(--bg-surface); } .org-pm + .org-pm { margin-top: var(--space-2); } .org-pm.is-off { background: var(--bg-surface-soft); } .org-pm.is-off .org-pm-name, .org-pm.is-off .org-pm-eff { color: var(--text-muted); } .org-pm-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--space-2); } .org-pm-name { font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-primary); } .org-pm-eff { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--brand-primary-soft); color: var(--brand-primary); font-size: var(--font-meta); font-weight: var(--weight-semibold); white-space: nowrap; } .org-pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px var(--space-3); margin-top: 6px; font-size: var(--font-body); color: var(--text-secondary); } .org-pm-grid .scv-label { display: block; font-size: var(--font-meta); color: var(--text-muted); } .org-pm-note { margin-top: 6px; font-size: var(--font-meta); color: var(--text-muted); } .org-pm-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .org-pm-form { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border-default); } .org-pm-form-h { font-size: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: 4px; } .org-pm-form select, .org-pm-form textarea, .org-pm-form input[type="datetime-local"] { width: 100%; max-width: 420px; box-sizing: border-box; } .org-pm-exp { border: 0; margin: 0; padding: 0; min-width: 0; } .org-pm-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-3); font-size: var(--font-body); color: var(--text-secondary); } .org-pm-flash { margin-bottom: var(--space-2); padding: 6px 10px; border-radius: var(--radius-md); background: var(--status-success-soft); color: var(--status-success); font-size: var(--font-body); font-weight: var(--weight-medium); } .org-pm-hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .org-pm-hist { padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); } .org-pm-hist-top { font-size: var(--font-body); color: var(--text-primary); line-height: var(--line-normal); } .org-pm-hist .org-muted { font-size: var(--font-meta); margin-top: 2px; word-break: break-word; } @media (max-width: 1100px) { .org-head.org-head-v3 { flex-wrap: nowrap; } .org-head.org-head-v3 .org-head-right { flex-basis: auto; } } @media (max-width: 820px) { .org-w-actions .btn { min-height: 36px; } .org-head.org-head-v3 { flex-wrap: wrap; row-gap: 6px; } .org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .org-w-tools .org-ov-segbtn { min-height: 34px; } } @media (max-width: 520px) { .org-pm-acts .btn, .org-pm-form .btn { min-height: 40px; } .org-pm-eff { margin-left: 0; } .org-w-tools { flex-wrap: wrap; } .org-w-tools .org-w-search { flex-basis: 100%; } .org-sc { padding: 8px 10px; gap: 8px; } .org-sc-ico { flex-basis: 30px; width: 30px; height: 30px; font-size: 15px; } .org-sc-sub { display: none; } /* Đầu trang xuống dòng ⇒ huy hiệu nằm bên TRÁI; ô giải thích neo trái để không tràn ra ngoài màn (đo 375: left −179px). */ .org-head.org-head-v3 .pm-head-info-body { left: 0; right: auto; width: calc(100vw - 32px); } } /* Hai cột cạnh nhau — dùng cho HỒ SƠ vs TÀI KHOẢN, và cho các bảng đôi */ .org-two { display: flex; flex-wrap: wrap; gap: var(--space-4); } .org-half { flex: 1 1 320px; min-width: 300px; } .org-half-title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--space-2); } .org-muted { font-size: var(--text-sm); color: var(--text-muted); } .org-json { font-size: var(--text-sm); color: var(--text-secondary); max-width: 260px; word-break: break-word; } /* Cảnh báo tại chỗ: dùng đúng khi HỒ SƠ và TÀI KHOẢN nói hai điều khác nhau */ .org-warn-inline { font-size: var(--text-sm); color: var(--status-warning); font-weight: var(--weight-medium); margin-top: var(--space-1); } .org-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .org-list { margin: var(--space-2) 0 0; padding-left: 18px; font-size: var(--text-md); line-height: var(--line-normal); } .org-list li { margin-bottom: 2px; } /* Cây tổ chức — không giả lập cấp bậc nào ngoài quan hệ có thật trong dữ liệu */ .org-tree { margin: 0; padding-left: 18px; font-size: var(--text-md); line-height: var(--line-normal); } .org-tree ul { padding-left: 20px; margin: var(--space-1) 0 var(--space-2); } .org-tree li { margin-bottom: 3px; } /* Form đề xuất CTV */ .org-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); } .org-form input { font-family: inherit; font-size: var(--text-md); padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); min-width: 180px; color: var(--text-primary); background: var(--bg-surface); } .org-form input:focus { outline: 2px solid var(--border-focus); outline-offset: -1px; } @media (max-width: 1100px) { .org-half { flex-basis: 100%; } } /* CRM-CORE-V1 — dòng bảng bấm được để mở hồ sơ khách hàng. Dùng token của hệ thiết kế, không viết cứng màu (WEBAPP_DESIGN_SYSTEM_V1 mục A). */ .data tr.row-link { cursor: pointer; } .data tr.row-link:hover { background: var(--bg-surface-soft); } .data tr.row-link:focus-visible { outline: 2px solid var(--brand-primary-hover); outline-offset: -2px; } /* ===================================================================== WEBAPP05-GLOBAL-APP-SHELL-RESPONSIVE-V1-01 · KHUNG ỨNG DỤNG RESPONSIVE Chỉ lớp KHUNG + lớp dùng chung. Không đụng bố cục nghiệp vụ của module. BA MỐC — tên theo VIỆC, con số theo khung đang chạy: DESKTOP_LARGE > 1180px thanh bên đầy đủ 260px DESKTOP 1025–1180px thanh bên 220px (quy ước cũ, giữ nguyên) TABLET/MOBILE ≤ 1024px thanh bên thành NGĂN KÉO (off-canvas) mở bằng nút ☰ MOBILE ≤ 640px topbar gọn, đệm nội dung nhỏ hơn Thứ tự tầng: module 15 < CSKH 20 < topbar 30 < nút nổi CSKH 80 < nền mờ ngăn kéo 90 < ngăn kéo 95 < hộp thoại 100. (Hộp thoại luôn NỔI TRÊN menu; menu luôn nổi trên nội dung.) ===================================================================== */ :root { --shell-sidebar-w: 260px; --shell-sidebar-w-md: 220px; --shell-drawer-w: min(300px, 86vw); --z-shell-backdrop: 90; --z-shell-drawer: 95; } /* Ô nội dung được CO: minmax(0,1fr) thay cho 1fr — nội dung rộng không kéo giãn cả trang. */ .app-shell { grid-template-columns: var(--shell-sidebar-w) minmax(0, 1fr); } @media (max-width: 1180px) { .app-shell { grid-template-columns: var(--shell-sidebar-w-md) minmax(0, 1fr); } } /* Lưới dùng chung (.split · .home-grid · .kpi-row): ô lưới được CO dưới min-content. Không có dòng này, một bảng dài trong ô lưới kéo cả lưới rộng hơn màn hình (đo: CRM ở 390px rộng 493px). Trên máy tính không đổi gì vì nội dung vốn đã vừa. */ .split > *, .home-grid > *, .kpi-row > *, .panel { min-width: 0; } /* Thẻ người dùng cuối thanh bên: khối tên co giãn, nút đăng xuất không chiếm chỗ tên. */ .user-card > div:not(.user-avatar) { flex: 1 1 auto; min-width: 0; } .user-card .logout-btn { flex: 0 0 auto; } .user-name, .user-role { overflow-wrap: anywhere; } /* Topbar: mọi phần tử được co, ô tìm kiếm co giãn thay vì cứng 320px. */ .topbar { min-width: 0; } .welcome { min-width: 0; } .welcome > div:not(.welcome-avatar) { min-width: 0; } .welcome-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { min-width: 0; flex: 0 1 auto; } .search { width: clamp(180px, 24vw, 320px); min-width: 0; flex: 0 1 auto; } /* Nút mở menu + nền mờ: chỉ hiện ở ngăn kéo. */ .shell-menu-btn { display: none; flex: 0 0 auto; width: var(--control-h); height: var(--control-h); align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--control-radius); background: var(--bg-surface); color: var(--text-primary); font-size: var(--font-section-title); line-height: 1; cursor: pointer; } .shell-menu-btn:hover { background: var(--bg-surface-soft); } .shell-menu-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .shell-backdrop { display: none; } /* SCA-A · SCA-01 — ô CHỌN (radio/checkbox) KHÔNG phải ô NHẬP. Quy tắc .scv-field input (khối SCV2 đã KHOÁ) dựng ô nhập chữ (rộng 100%, cao 40px, đệm, viền bo) và từng áp NHẦM cả lên ô chọn ⇒ vòng tròn phình rộng 200–420px, chữ bị đẩy sang phải và gãy dòng (Lịch → Tạo lịch: "Có giờ/Cả ngày", "Yêu cầu người tham gia xác nhận OK"). Trả ô chọn về kích thước tự nhiên; chữ trong