/* ===== Achau Work Command Center — Clickflow-style design system (v17) ===== Visual language matched to Clickflow: pure-black icon rail, white canvas, near-black CTA buttons, blue/green/red functional status colors, 6px radii, system font stack, uppercase status chips. */ :root{ /* Canvas — true white content area like Clickflow */ --bg:#ffffff; --bg-subtle:#f8f8f8; --panel:#ffffff; --border:#e8e8e8; --border-strong:#d7d7d7; /* các họ màu phụ của ClickUp, cho ô vuông Space và tab view */ --cu-blue:#0091ff; --cu-purple:#6647f0; --cu-deep-blue:#4a2fff; --cu-pink:#ff02f0; --cu-orange:#fc6d2d; --cu-green:#078d3b; --cu-red:#f0382d; --cu-yellow:#ffc800; /* --text-3 nâng 8c8c8c → 767676: 8c trên nền trắng chỉ đạt 3.9:1, dưới AA 4.5:1 cho cỡ chữ 11-12px mà token này hay gánh (meta, hint). 767676 = 4.54:1, vừa đủ. */ --text:#292d34; --text-2:#656f7d; --text-3:#767676; --hover:#f4f5f7; /* Viền gradient + quầng sáng ô nhập Bộ não AI. Hai đầu pastel, KHÚC GIỮA trùng màu nền viền thường — màu chỉ chạm hai góc chéo, thân viền đọc như border bình thường. Đây là chỗ ClickUp Brain khác hẳn: quầng sáng nằm ở bóng đổ, không nằm ở nét viền. */ --brain-edge-1:#f0a6d8; --brain-edge-mid:#ececec; --brain-edge-2:#8fd9e8; --brain-halo-1:rgba(240,166,216,.34); --brain-halo-2:rgba(143,217,232,.30); /* Accent — chuyển sang tím ClickUp #7b68ee (thay xanh) cho link/focus/active/nút chọn; CTA vẫn đen (đã đúng chất ClickUp). --primary dùng cho fill/border/focus-ring (chỉ cần 3:1 theo WCAG cho thành phần UI); --primary-text ĐẬM HƠN dành riêng cho CHỮ (link, badge text) — #7b68ee trên nền trắng chỉ 4.15:1, hụt AA cho text thường. */ /* Bản sao ClickUp 14/08/2026: màu nhấn đổi từ tím #7b68ee (token CŨ của ClickUp) sang XANH #0091ff — chính là --Core-Accents-Blue đọc thẳng từ stylesheet đang chạy của clickup.com. --primary-text đậm hơn một bậc vì #0091ff trên nền trắng chỉ 3.0:1, hụt AA 4.5:1 cho chữ thường; #0077d6 đạt 4.6:1. */ --primary:#0091ff; --primary-text:#0077d6; --primary-hover:#0077d6; --primary-weak:#edf6fd; --primary-ring:rgba(0,145,255,.22); --cta:#202020; --cta-hover:#000000; /* Icon rail (pure black) — the signature Clickflow surface */ --rail:#000000; --rail-2:#0a0a0a; --rail-line:#242424; /* rail-muted 6e→8a: chữ nhóm 10px in hoa trên rail đen chỉ đạt ~4:1 với 6e6e6e. */ --rail-text:#b0b0b0; --rail-text-strong:#ffffff; --rail-muted:#8a8a8a; --rail-hover:rgba(255,255,255,.08); --rail-active:rgba(255,255,255,.12); --rail-accent:#ffffff; /* Status — sampled directly from the live Clickflow app (To Do gray / In Progress blue / Complete green) */ --st-backlog:#8c8c8c; --st-open:#87909e; --st-progress:#1090e0; --st-pending:#f59e0b; --st-done:#008844; --st-completed:#12a06a; --st-verified:#7b68ee; --st-returned:#e5484d; --st-blocked:#e2445c; /* Achievement accent (KPI/OKR): bản đạt-chuẩn-contrast của bộ st trên nền sáng. --st-pending #f59e0b trên track #ececef chỉ 1.8:1 (fail 3:1 non-text) và 2.2:1 làm chữ; --st-returned #e5484d làm chữ 3.5:1 (fail 4.5:1). Cùng họ màu chữ badge-flag/#b06000 và badge-danger/#b8283f đã dùng bên dưới. */ --ach-good:#008844; --ach-warn:#b06000; --ach-bad:#b8283f; /* Tiền vào/ra (Figma "Thu Chi — ĐỀ XUẤT UI/UX" 171:146) — CHỈ dùng cho CHỮ SỐ tiền, thanh/nền vẫn dùng --st-done/--st-blocked. Lý do: đo trên nền trắng --st-blocked #e2445c chỉ 4.03:1 (fail AA 4.5:1 cho chữ), và --st-done #008844 trên --panel tối #1a1a1a chỉ 3.82:1. Bộ dưới đây: 5.45:1 / 5.41:1 sáng, 5.19:1 / 6.36:1 tối. */ --money-in:#007a3d; --money-out:#c92a3f; --pr-urgent:#f50000; --pr-high:#f8ae00; --pr-medium:#6fddff; --pr-low:#d8d8d8; /* DESIGN.md "Luật Một Bậc Bo" + "Luật 44": ba bậc bo góc, không có bậc thứ tư; vùng bấm chính ≥44px. Bậc mặc định nâng 6→8px và --row-h 40→44px theo hướng "ấm hơn, dễ chạm hơn" chủ dự án chốt 12/08/2026 — đổi mật độ lấy vùng bấm, vì một đích bấm 30px hỏng lặng lẽ: không ai báo lỗi, họ chỉ bấm trượt. */ --radius:8px; --radius-sm:6px; --radius-lg:10px; --row-h:44px; --shadow:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 8px 24px -6px rgba(0,0,0,.18), 0 2px 6px -2px rgba(0,0,0,.08); --shadow-rail:0 0 0 1px rgba(0,0,0,.04); /* Bản sao ClickUp 14/08/2026: ĐẢO quyết định 03/08 «app không tải webfont nào». ClickUp dùng Plus Jakarta Sans; chủ dự án chốt nhận lại một request Google Fonts để khớp mặt chữ. Link nằm ở 4 template (index/saas/voucher/invite); bỏ link đi thì stack dưới đây tự rơi về Inter rồi system font, không vỡ. */ --font:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } *{box-sizing:border-box} /* Base fallback for every inline Lucide icon: without an explicit width/height, an SVG that only declares a viewBox collapses to 0×0 in a plain . Every icon-bearing container normally gets its own sizing rule (.nav-item svg, .btn svg, …) which — being a more specific selector — always wins over this; this is only a safety net for spots that don't. Found via audit: the activity-log row-icon span had no class and its icon was silently invisible. */ svg{width:16px;height:16px} html,body{margin:0;padding:0} html{ /* iOS xoay ngang máy rồi xoay lại sẽ TỰ phóng to cỡ chữ ("text inflation"), làm bố cục sau khi xoay khác trước khi xoay. 100% tắt hẳn hành vi đó. */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ font-family:var(--font); font-size:13px; line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"cv02","cv03","cv04","ss01"; } button{font-family:inherit} a{color:inherit;text-decoration:none} /* numeric displays align in columns — an ops-console detail */ .stat .v,.co-mini .n,.gd-counts .n,.ts-total-v,.kpi-vals .cur,.score .n,.chip .cv,.wl-count{ font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:#cdd4e0;border-radius:8px;border:2px solid var(--bg)} ::-webkit-scrollbar-thumb:hover{background:#b6bece} :focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-radius:4px} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ===== Dark mode ===== */ [data-theme="dark"]{ --bg:#0b0b0b; --bg-subtle:#141414; --panel:#1a1a1a; --hover:#232323; --border:#2e2e2e; --border-strong:#404040; --text:#f0f0f0; --text-2:#a8a8a8; --text-3:#8a8a8a; /* Nền tối: khúc giữa hạ về đúng --border, pastel hai đầu tối lại kẻo cháy sáng; halo mờ hơn vì bóng màu trên nền đen nổi mạnh hơn nhiều so với nền trắng. */ --brain-edge-1:#8c5f86; --brain-edge-mid:#2e2e2e; --brain-edge-2:#3f6b78; --brain-halo-1:rgba(200,120,180,.20); --brain-halo-2:rgba(110,190,210,.16); /* #a599f5 trên nền #0b0b0b đạt 7.94:1 — an toàn cho cả chữ, nên dark theme không cần token --primary-text riêng như bản sáng (primary tự nó đã đủ đậm/sáng để làm chữ). */ --primary:#a599f5; --primary-text:#a599f5; --primary-hover:#b6acf7; --primary-weak:#241f3d; --primary-ring:rgba(165,153,245,.28); --cta:#f0f0f0; --cta-hover:#ffffff; /* Nền tối: track thanh tiến độ tối nên bộ sáng-hơn mới đủ tương phản. */ --ach-good:#12a06a; --ach-warn:#f59e0b; --ach-bad:#ff6b7f; /* Tiền vào/ra trên nền tối: bản sáng #007a3d chỉ 1.5:1 trên --panel #1a1a1a. */ --money-in:#12a06a; --money-out:#ff6b7f; /* Nền đỏ mờ dùng chung cho .grp-tre/.kpi-card.kpi-bad. Trước là rgba(239,68,68,.09-.14) — kênh R/G/B gốc (239,68,68) tự nó đã sáng ~0.47, nên script dò tương phản (đọc backgroundColor thẳng, KHÔNG hoà alpha vào nền phía sau — cách duy nhất nó phân biệt được "chữ trắng trong nút xanh" với "chữ trắng trên nền trắng") chấm nền là gần bằng màu chữ đỏ nhạt (~0.47 so với chữ 0.60), dù mắt nhìn thật ra nền hoà với thẻ tối vẫn rất sẫm. Hạ kênh màu gốc xuống nâu-đỏ sẫm (127,29,29) — nền "đo được" tụt còn ~0.23, cách chữ ≥0.31; tương phản thật (hoà lên --bg/--panel) vẫn 6.1–5.3:1, dư AA 4.5:1. */ --danger-wash:rgba(127,29,29,.22); --rail:#000000; --rail-2:#0a0a0a; --rail-line:#242424; --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 16px 40px -10px rgba(0,0,0,.7),0 2px 10px -2px rgba(0,0,0,.5); } /* CTA buttons flip to light in dark mode (still "the opposite of canvas", Clickflow-authentic) */ [data-theme="dark"] .btn-primary,[data-theme="dark"] .cmdk-pill kbd{color:#0a0a0a} /* re-map the most visible hardcoded light surfaces so dark reads cleanly */ [data-theme="dark"] .row{border-bottom-color:#1c2740} [data-theme="dark"] .kanban .kcard-cells,[data-theme="dark"] .peek-sub,[data-theme="dark"] .kr, [data-theme="dark"] .report-item,[data-theme="dark"] .gd-kpi,[data-theme="dark"] .gd-kr, [data-theme="dark"] .peek-rel-row,[data-theme="dark"] .notif-item,[data-theme="dark"] .cmd-detail, [data-theme="dark"] .r-expand,[data-theme="dark"] .peek-cmt-h{border-color:#243049} [data-theme="dark"] .badge-muted,[data-theme="dark"] .subchip,[data-theme="dark"] .peek-tag, [data-theme="dark"] .due,[data-theme="dark"] .v-pending,[data-theme="dark"] .sp-draft, [data-theme="dark"] .grp-count,[data-theme="dark"] .nav-item .count,[data-theme="dark"] .wl-count, [data-theme="dark"] .cell-h,[data-theme="dark"] .mine-co,[data-theme="dark"] .row-tag.more{ background:#1c2740;color:var(--text-2)} [data-theme="dark"] .grp-h,[data-theme="dark"] .list-head,[data-theme="dark"] .tbl th, [data-theme="dark"] .cal-wd,[data-theme="dark"] .tl-head,[data-theme="dark"] .tl-corner, [data-theme="dark"] .tl-daycol.tl-today,[data-theme="dark"] .cal-cell.cal-blank{background:var(--bg-subtle)} [data-theme="dark"] .chk{background:var(--panel);border-color:var(--border-strong)} [data-theme="dark"] .toast{background:#1c2740} [data-theme="dark"] .cmd-pre,[data-theme="dark"] .peek-ai-body,[data-theme="dark"] .peek-cmt, [data-theme="dark"] .peek-kpi,[data-theme="dark"] .peek-3l-row,[data-theme="dark"] .gd-obj, [data-theme="dark"] .chip,[data-theme="dark"] .auto-pill,[data-theme="dark"] .wl-chip, [data-theme="dark"] .ext-link,[data-theme="dark"] .intg-ic{background:var(--bg-subtle);border-color:var(--border)} [data-theme="dark"] .stat .v.good{color:#34d399} [data-theme="dark"] .login-wrap{background:linear-gradient(180deg,#0b1018,#0f1626)} [data-theme="dark"] .theme-toggle .sun{display:none} .theme-toggle .moon{display:none} [data-theme="dark"] .theme-toggle .moon{display:inline-flex} /* ===== Buttons ===== */ .btn{ display:inline-flex;align-items:center;gap:6px;justify-content:center; height:34px;padding:0 14px;border-radius:var(--radius); border:1px solid var(--border-strong);background:var(--panel);color:var(--text); font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap; transition:background .12s,border-color .12s,box-shadow .12s; } .btn:hover{background:var(--hover);border-color:var(--border-strong)} .btn:active{transform:translateY(.5px)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn svg{width:15px;height:15px} .btn-primary{background:var(--cta);border-color:var(--cta);color:#fff} .btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)} .btn-sm{height:30px;padding:0 10px;font-size:12px} .btn-xs{height:26px;padding:0 8px;font-size:12px;border-radius:var(--radius-sm)} .btn-ghost{border-color:transparent;background:transparent} .btn-ghost:hover{background:var(--hover)} .btn-danger{color:#b91c1c} /* Nút chính của hành động KHÔNG hoàn tác (hộp confirmModal). Phải đứng SAU .btn-danger, nếu không quy tắc đó thắng `color` và cho chữ đỏ sẫm trên nền CTA. */ .btn-primary.btn-danger{background:#b91c1c;border-color:#b91c1c;color:#fff} .btn-primary.btn-danger:hover{background:#991b1b;border-color:#991b1b} .btn-block{width:100%} /* ===== Login ===== */ .login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,#f7f8fb,#eef1f8);padding:20px} .login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border); border-radius:10px;box-shadow:var(--shadow-md);padding:32px 28px} .login-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px} .login-brand .sq{width:30px;height:30px;border-radius:7px;background:var(--primary); color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px} .login-title{font-size:18px;font-weight:600;letter-spacing:-.2px} .login-sub{font-size:12px;color:var(--text-2);margin:2px 0 22px} .field{margin-bottom:14px} .field label{display:block;font-size:12px;font-weight:550;color:var(--text-2);margin-bottom:6px} .input{width:100%;height:40px;padding:0 12px;border:1px solid var(--border-strong); border-radius:var(--radius);font-size:13px;background:var(--panel);color:var(--text)} .input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-weak)} textarea.input{height:auto;min-height:64px;padding:8px 11px;resize:vertical;line-height:1.5} select.input{cursor:pointer;appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 9px center;padding-right:30px} .login-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12px; padding:8px 11px;border-radius:var(--radius);margin-bottom:14px} .login-hint{margin-top:16px;font-size:12px;color:var(--text-3);text-align:center;line-height:1.6} /* ===== App shell ===== */ /* 100dvh KHÔNG phải là làm đẹp: trên Safari/Chrome mobile, 100vh tính theo viewport khi thanh địa chỉ ĐANG ẨN, tức luôn CAO HƠN phần thật sự nhìn thấy. Hậu quả đo được: đáy khung (thanh hành động, nút Lưu) nằm khuất dưới thanh địa chỉ, và mỗi lần cuộn làm thanh đó ẩn/hiện thì chiều cao khung đổi theo — layout giật lên giật xuống. Giữ dòng 100vh phía trên làm dự phòng cho trình duyệt cũ chưa hiểu dvh. */ .app{display:flex;height:100vh;height:100dvh;overflow:hidden} /* ===== Vỏ ClickUp: rail đen 64px + cột điều hướng TRẮNG + thanh trên 56px ===== */ .appwrap{display:flex;flex-direction:column;height:100vh;min-height:0} .appwrap>.app{flex:1;min-height:0;height:auto} .topbar{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:12px;padding:0 14px; background:var(--panel);border-bottom:1px solid var(--border);position:relative;z-index:60} .topbar .tb-ws{display:flex;align-items:center;gap:9px;height:34px;padding:0 11px 0 8px; border-radius:8px;background:var(--hover);font-weight:700;font-size:15px;color:var(--text); border:none;cursor:pointer;max-width:280px} .topbar .tb-ws .sq{width:22px;height:22px;border-radius:6px;display:grid;place-items:center; color:#fff;font-size:12px;font-weight:800;flex:0 0 22px} .topbar .tb-ws .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Ô tìm căn giữa tuyệt đối theo cửa sổ, không theo dòng flex — đúng như ClickUp, và không bị đẩy lệch khi tên công ty dài ngắn khác nhau. */ .topbar .tb-search{position:absolute;left:50%;transform:translateX(-50%);width:min(520px,38vw); height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--border); border-radius:999px;background:var(--panel);color:var(--text-3);font-size:13.5px;cursor:pointer} .topbar .tb-search svg{width:16px;height:16px;flex:0 0 16px} .topbar .tb-search kbd{margin-left:auto;border:1px solid var(--border);border-radius:4px; padding:2px 5px;font:600 11px/1 var(--font);color:var(--text-3)} .topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:8px} @media(max-width:1080px){.topbar .tb-search{display:none}} .rail{width:64px;flex:0 0 64px;background:var(--rail);display:flex;flex-direction:column; align-items:center;gap:6px;padding:10px 0} .rail .rail-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(150deg,#2b2b45,#0d0d0d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); color:#fff;font-weight:800;font-size:15px;margin-bottom:8px} .rail .rail-item{width:38px;height:38px;border-radius:10px;display:grid;place-items:center; color:var(--rail-muted);background:none;border:none;cursor:pointer;transition:background .12s,color .12s} .rail .rail-item svg{width:18px;height:18px} .rail .rail-item:hover{background:var(--rail-hover);color:var(--rail-text)} .rail .rail-item.active{background:var(--rail-active);color:#fff} .rail .rail-sp{flex:1} @media(max-width:900px){.rail{display:none}} /* Ô vuông Space 18px trên mỗi mục điều hướng — dấu nhận biết của ClickUp. */ .nav-item .navsq{width:18px;height:18px;flex:0 0 18px;border-radius:5px;display:grid; place-items:center;color:#fff;font-size:10px;font-weight:800;line-height:1} .sidebar{width:300px;flex:0 0 300px;background:var(--panel);color:var(--text); display:flex;flex-direction:column;height:100vh;height:100dvh;position:relative} .main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)} /* Sidebar — command rail */ .ws-header{padding:14px 12px 8px;position:relative} .ws-btn{width:100%;display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius); cursor:pointer;border:1px solid transparent;background:transparent;transition:background .12s} .ws-btn:hover{background:var(--rail-hover)} .ws-btn .sq{width:28px;height:28px;border-radius:8px;color:#fff;display:flex;align-items:center; justify-content:center;font-weight:700;font-size:11px;flex:0 0 28px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.3)} .ws-meta{min-width:0;text-align:left;flex:1} .ws-name{font-weight:600;font-size:13.5px;color:var(--rail-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ws-role{font-size:11px;color:var(--rail-muted)} .ws-caret{color:var(--rail-muted);flex:0 0 auto} .switcher{position:absolute;top:52px;left:12px;right:12px;z-index:60;background:var(--panel); border:1px solid var(--border-strong);border-radius:8px;box-shadow:var(--shadow-md); padding:5px;max-height:60vh;overflow:auto} .switcher .sw-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--radius); cursor:pointer} .switcher .sw-item:hover{background:var(--hover)} .switcher .sw-item.active{background:var(--primary-weak)} .switcher .sq{width:22px;height:22px;border-radius:5px;color:#fff;display:flex;align-items:center; justify-content:center;font-weight:700;font-size:11px;flex:0 0 22px} .sw-all .sq{background:#1c1c1e} /* Thêm/Ngừng dùng công ty — HÀNH ĐỘNG, không phải lựa chọn công ty. Đường kẻ + chữ nhạt hơn để mắt tách được hai nhóm mà không cần đọc: bên trên bấm là ĐỔI chỗ làm việc, bên dưới bấm là MỞ một hộp thoại. Màu đỏ chỉ nằm trên Ô VUÔNG, không tô cả dòng: một dòng đỏ nguyên trong danh sách đọc như một cảnh báo đang xảy ra chứ không như một nút bấm được. Dùng `--text-2`/`--text` (có thật ở CẢ hai chủ đề, dòng 11 và 88) chứ không bịa `--text-dim`: một biến không tồn tại thì `color` không áp, chữ thừa hưởng màu cha, và ở chủ đề tối đó đúng là kiểu "chữ chìm vào nền" vừa phải đi sửa mấy lượt. Đỏ lấy đúng `#b91c1c` của `.btn-danger` thay vì một biến mới. */ .switcher .sw-sep{height:1px;background:var(--border);margin:5px 2px} .switcher .sw-item.sw-act .sw-name{color:var(--text-2)} .switcher .sw-item.sw-act:hover .sw-name{color:var(--text)} .sw-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav{flex:1;overflow:auto;padding:6px 8px} .nav-sec{display:flex;align-items:center;gap:4px;width:100%;font-size:11px;font-weight:700; letter-spacing:.7px;text-transform:uppercase;color:var(--rail-muted);padding:14px 8px 5px; border:none;background:none;cursor:pointer;text-align:left;font-family:inherit} .nav-sec:hover{color:var(--rail-text)} .nav-sec-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-sec-caret{flex:0 0 auto;font-size:9px;line-height:1;color:var(--rail-muted);transition:transform .15s} .nav-group.collapsed .nav-sec-caret{transform:rotate(-90deg)} .nav-group.collapsed .nav-items{display:none} /* Cột điều hướng nay là NỀN TRẮNG (chỉ rail 64px còn đen), nên mọi mực ở đây đổi từ họ --rail-* sang họ --text-*. Chiều cao mục 44→34px theo ClickUp; Luật 44 vẫn giữ cho vùng bấm trên màn cảm ứng (khối @media ở cuối tệp nâng lại 44px). */ .nav-item{display:flex;align-items:center;gap:10px;padding:0 8px;min-height:34px;border-radius:var(--radius-sm); cursor:pointer;color:var(--text);font-weight:500;font-size:14.5px;border:none;background:none;width:100%; text-align:left;position:relative;transition:background .12s,color .12s} .nav-item:hover{background:var(--hover);color:var(--text)} .nav-item.active{background:#eceef1;color:var(--text);font-weight:600} .nav-item.active svg{color:var(--text)} .nav-item svg{width:16px;height:16px;flex:0 0 16px;stroke-width:1.8;color:var(--text-3);transition:color .12s} .nav-item:hover svg{color:var(--text-2)} .nav-item .count{margin-left:auto;font-size:11px;color:var(--text-2);background:var(--hover); padding:1px 7px;border-radius:20px;font-weight:600} .side-user{border-top:1px solid var(--border);padding:11px 10px;display:flex;align-items:center;gap:10px} .avatar{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;flex:0 0 28px} .side-user .avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .side-user .meta{min-width:0;flex:1} .side-user .u-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side-user .u-role{font-size:11px;color:var(--text-3)} .side-user .icon-btn{background:transparent;border-color:var(--border);color:var(--text-3)} .side-user .icon-btn:hover{background:var(--rail-hover);color:var(--rail-text-strong)} /* Header bar — never let overflow wrap/overlap; crumbs truncate before anything breaks */ .header{min-height:52px;flex:0 0 auto;border-bottom:1px solid var(--border);display:flex; align-items:center;padding:8px 18px;gap:12px;background:var(--panel);flex-wrap:wrap;row-gap:6px} .crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2); min-width:110px;flex:2 1 180px;white-space:nowrap;overflow:hidden} .crumbs .sep{color:var(--text-3);flex:0 0 auto;margin:0 2px} .crumbs .crumb-link{color:var(--primary-text);cursor:pointer;text-decoration:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crumbs .crumb-link:hover{text-decoration:underline;color:var(--primary-hover)} .crumbs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crumbs .cur{color:var(--text);font-weight:600;letter-spacing:-.1px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .header-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 1 auto; flex-wrap:wrap;justify-content:flex-end;row-gap:6px} .hamburger{display:none} /* View toggle — Clickflow-style flat tabs with a bottom-border indicator (not a segmented pill) */ .seg{display:inline-flex;flex-wrap:wrap;border:none;border-radius:0;overflow:visible;gap:0; border-bottom:1px solid var(--border)} .seg button{height:30px;padding:0 8px;border:none;background:transparent;cursor:pointer; font-size:12px;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:5px; border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s; white-space:nowrap} .seg button:hover{color:var(--text)} .seg button + button{border-left:none} .seg button.active{background:transparent;color:var(--text);font-weight:600;border-bottom-color:var(--text)} .seg svg{width:14px;height:14px} /* Mỗi loại view một ô vuông màu riêng, như ClickUp — biểu tượng đơn sắc khiến sáu tab trông như một dãy chữ, mắt phải đọc mới phân biệt được. */ .seg .segsq{width:18px;height:18px;flex:0 0 18px;border-radius:5px;display:grid;place-items:center; margin-right:2px} .seg .segsq svg{width:11px;height:11px;color:#fff;stroke-width:2.2} .content{flex:1;overflow:auto;padding:20px 24px 40px} .page-title{font-size:19px;font-weight:700;letter-spacing:-.4px;margin:0 0 3px} .page-sub{font-size:12px;color:var(--text-2);margin:0 0 18px} .section-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3); margin:24px 0 11px;display:flex;align-items:center;gap:8px} /* ===== Cards / dashboard ===== */ /* UIUX fix: the generic ".card" wrapper (Social Growth's #1 layout primitive — context header, list rows, detail panels, settings sections: 300+ call sites) had NO rule at all in this file (verified back to the initial commit) — every el(..,{class:"card"}) rendered with zero border/background/ radius/shadow, relying on whatever ad hoc inline style the call site happened to add. Matches the sibling card-family classes below (.stat/.co-card/.kpi-card/.panel-card) so "card" finally looks like one. */ .card{background:var(--panel);border:1px solid var(--border);border-radius:8px; padding:14px 16px;box-shadow:var(--shadow)} /* Generic drag affordance for any .card used as a draggable/droppable tile outside the .kcard/.kcol kanban family (e.g. the Social Calendar's draggable day items + drop-target day cells) — same visual language as .kcard.drag / .kcol.dragover below, so drag feedback isn't kanban-only. */ .card.drag{opacity:.4} .card.dragover{outline:2px dashed var(--primary);outline-offset:-3px} .grid{display:grid;gap:14px} /* auto-fit (not auto-fill): auto-fill reserves phantom empty tracks past the item count, splitting the row's width across them too — cards stay pinned near the 155px min even when the row has plenty of spare width. auto-fit collapses those empty tracks so the real cards stretch to fill. */ .stat-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .stat{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px 16px; box-shadow:var(--shadow);transition:box-shadow .14s,border-color .14s} .stat:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)} .stat .k{font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--text-2);text-transform:uppercase;display:flex;align-items:center;gap:6px} .stat .v{font-size:26px;font-weight:750;letter-spacing:-.6px;margin-top:6px} .stat .v.warn{color:var(--st-progress)} .stat .v.bad{color:var(--st-blocked)} .stat .v.good{color:var(--st-done)} /* Figma Trang chủ 111:62 — thẻ cần hành động nhuộm cả card; giá trị 0 làm mờ */ .stat.stat-bad{background:#fef2f2;border-color:var(--st-blocked)} .stat.stat-warn{background:#fffbeb;border-color:var(--st-progress)} .stat.stat-dim .v{color:var(--text-3);font-weight:600} [data-theme="dark"] .stat.stat-bad{background:rgba(239,68,68,.09)} /* Kênh gốc (245,158,11) tự nó đọc ~0.66 sáng (script đo backgroundColor không hoà alpha vào nền phía sau — xem giải thích --danger-wash phía trên) — trùng khít độ sáng của CẢ HAI chữ bên trong thẻ: .stat .k dùng --text-2 (~0.66) và .stat .v.warn dùng --ach-warn (~0.66, xem đo 2026-08-03 ở dưới), nên "Báo cáo gửi (hôm nay)" đọc ra chữ trùng nền dù mắt nhìn thẻ vẫn tối. Hạ kênh gốc xuống nâu hổ phách sẫm để nền đo được tụt về ~0.31 (cách cả hai chữ ≥0.34); tương phản thật (hoà lên --bg) vẫn 7.3:1 (.k) và 8.1:1 (.v.warn). */ [data-theme="dark"] .stat.stat-warn{background:rgba(120,72,10,.22)} /* Figma Goal 156:517 — goal rủi ro (health badge-danger) nhuộm cả card, cùng ngữ nghĩa stat-bad */ .co-card.goal-risk{background:#fef2f2;border-color:var(--st-blocked)} [data-theme="dark"] .co-card.goal-risk{background:rgba(239,68,68,.09)} /* Skeleton thẻ số Trang chủ (Figma 107:2) */ .skel-stat{gap:12px} .co-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));align-items:stretch} .co-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:15px; cursor:pointer;box-shadow:var(--shadow);transition:box-shadow .12s,transform .12s,border-color .12s; min-height:180px;display:flex;flex-direction:column} .co-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-1px)} .co-top{display:flex;align-items:center;gap:10px;margin-bottom:12px} .co-top .sq{width:34px;height:34px;border-radius:8px;color:#fff;display:flex;align-items:center; justify-content:center;font-weight:700;font-size:13px;flex:0 0 34px} .co-name{font-weight:600;font-size:14px} .co-code{font-size:11px;color:var(--text-3)} .co-mini{display:flex;gap:14px;margin-bottom:10px} .co-mini .m .n{font-size:17px;font-weight:700} .co-mini .m .l{font-size:11px;color:var(--text-3)} .progress{height:6px;border-radius:6px;background:#ececef;overflow:hidden} .progress > span{display:block;height:100%;border-radius:6px} .co-foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--text-2); flex-wrap:wrap} /* Badges — Clickflow-style: 6px radius, uppercase functional-status chips */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700; padding:2px 8px;border-radius:6px;line-height:1.6;white-space:nowrap; text-transform:uppercase;letter-spacing:.3px} .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor} .badge-flag{background:#fff4e5;color:#8a5400} .badge-ok{background:#e7f6ee;color:#1a7d4f} .badge-muted{background:rgba(0,0,0,.06);color:var(--text-2)} /* badge-err / badge-warn: 22 chỗ trong app.js dùng hai lớp này (trạng thái lỗi webhook, request log 4xx/5xx, mức rủi ro lệnh AI, chiến dịch Marketing+) nhưng CSS chưa bao giờ định nghĩa chúng — badge rơi về mỗi `.badge` gốc, tức chữ đen IN HOA không nền, đọc như văn bản thường chứ không phải cảnh báo. Dùng lại đúng cặp màu đã đo tương phản của badge-danger (lỗi) và badge-flag (cảnh báo) thay vì bịa màu mới. */ .badge-err{background:#fdecec;color:#b8283f} [data-theme="dark"] .badge-err{background:rgba(226,68,92,.18);color:#ff6b7f} .badge-warn{background:#fff4e5;color:#8a5400} [data-theme="dark"] .badge-warn{background:rgba(176,96,0,.22);color:#f0b357} /* UIUX fix: badge text contrast measured against WCAG 2.1 AA (4.5:1, these badges are 10.5px bold — under the 18.66px-bold "large text" cutoff, so they need the full ratio, not the 3:1 large-text one). Original colors (kept as comments) measured BELOW 4.5:1 against their own badge background: badge-flag #b06000 -> 4.27:1, badge-ai #5237c9 (đổi từ #0880ea theo palette tím) -> 6.69:1, badge-danger (below) #e2445c -> 3.53:1 light / 3.58:1 dark. Same hue family, darkened just enough to clear 4.5:1 with margin; --primary/ --st-blocked themselves are untouched (used everywhere else — buttons, links, focus rings — outside this pass's scope). */ .badge-ai{background:var(--primary-weak);color:#5237c9} [data-theme="dark"] .badge-ai{color:var(--primary-text)} .btn-ai{background:var(--primary-weak);border-color:var(--primary-weak);color:#5237c9} .btn-ai:hover{background:var(--primary);border-color:var(--primary);color:#fff} [data-theme="dark"] .btn-ai{color:var(--primary-text)} [data-theme="dark"] .btn-ai:hover{color:#fff} /* ===== Task board (list) ===== */ .board{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden} .grp{border-bottom:1px solid var(--border)} .grp:last-child{border-bottom:none} /* Đầu nhóm theo ClickUp: viên thuốc ĐẶC màu trạng thái, không phải chấm tròn + chữ. Nền nhóm trả về trắng — dải xám cũ chia bảng thành từng khối rời, ClickUp để trôi liền một mạch và chỉ dùng viên thuốc làm mốc mắt. */ .grp-h{display:flex;align-items:center;gap:10px;padding:14px 14px 8px;cursor:pointer;background:var(--panel); user-select:none} .grp-h:hover{background:var(--panel)} .grp-h .chev{color:var(--text-3);transition:transform .15s} .grp-h.collapsed .chev{transform:rotate(-90deg)} .grp-dot{display:none} .grp-name{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-sm); color:#fff;font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px} .grp-count{font-size:13px;color:var(--text-3);background:none;padding:0;font-weight:600} .grp-add{margin-left:auto;color:var(--text-3);opacity:0;transition:opacity .1s} .grp-h:hover .grp-add{opacity:1} .list-head{display:flex;align-items:center;padding:6px 14px;font-size:11px;font-weight:600; text-transform:uppercase;letter-spacing:.3px;color:var(--text-3);border-bottom:1px solid var(--border); background:var(--panel)} .row{display:flex;align-items:center;gap:10px;min-height:var(--row-h);padding:6px 14px; border-bottom:1px solid #f0f0f2;transition:background .1s} .row:last-child{border-bottom:none} .row:hover{background:var(--hover)} /* Hàng trễ hạn: tín hiệu mức hàng (heuristic #8) — nền hồng nhạt + vạch đỏ trái, chip ngày .due.overdue vẫn là con số cụ thể. */ .row-overdue{background:#fff8f8;box-shadow:inset 3px 0 0 var(--st-blocked)} .row-overdue:hover{background:#fef2f2} [data-theme="dark"] .row-overdue{background:rgba(239,68,68,.07)} [data-theme="dark"] .row-overdue:hover{background:rgba(239,68,68,.12)} /* Đếm việc trễ trên header nhóm — cạnh .grp-count */ .grp-tre{font-size:11px;font-weight:600;color:#dc2626;background:#fef2f2;padding:1px 7px;border-radius:20px} /* Xem giải thích --danger-wash ở khối biến [data-theme="dark"] — chỉ báo trễ hạn cần nổi nhất bảng nên KHÔNG chấp nhận mức "tạm đọc được", phải đủ AA 4.5:1 thật. */ [data-theme="dark"] .grp-tre{background:var(--danger-wash);color:#f87171} /* Nút mở/gập cụm ô lọc ít dùng (Hick) */ .filter-more-btn{color:var(--text-2);border-style:dashed} .row .pri{flex:0 0 16px;display:flex;align-items:center;justify-content:center} .pri-bars{display:flex;align-items:flex-end;gap:1.5px;height:12px} .pri-bars i{width:3px;border-radius:1px;background:#d5d5d8;display:block} .pri-bars i.on{background:var(--c)} .pri-sq{width:13px;height:13px;border-radius:3px;display:flex;align-items:center;justify-content:center} .row .r-title{flex:1;min-width:0;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px} .row .r-title .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tag-ai{font-size:9.5px;font-weight:700;background:var(--primary-weak);color:var(--primary-text); padding:1px 5px;border-radius:4px;letter-spacing:.3px;flex:0 0 auto} .r-assignee{display:flex;align-items:center;gap:6px;flex:0 0 auto;width:150px;min-width:0;color:var(--text-2);font-size:12px} .r-assignee .avatar{width:20px;height:20px;font-size:9px} .r-assignee .an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .due{font-size:12px;color:var(--text-2);flex:0 0 auto;display:inline-flex;align-items:center;gap:4px; padding:2px 7px;border-radius:5px;background:#f1f1f3;width:96px;justify-content:center} .due.overdue{background:#fef2f2;color:#dc2626;font-weight:600} .due.none{color:var(--text-3);background:transparent} /* Three check cells */ .cells{display:flex;align-items:center;gap:6px;flex:0 0 auto} .cell{width:96px;display:flex;align-items:center;justify-content:center} .chk{width:18px;height:18px;border:1.6px solid var(--border-strong);border-radius:5px;cursor:pointer; display:flex;align-items:center;justify-content:center;background:var(--panel);transition:all .12s;flex:0 0 18px; position:relative} /* WCAG 2.2 target size: nới vùng bấm lên 24px mà không đổi hình vẽ 18px */ .chk::after{content:"";position:absolute;inset:-3px} .chk:hover:not(:disabled){border-color:var(--primary)} .chk.on{background:var(--st-done);border-color:var(--st-done);color:#fff} .chk.on.mgr{background:var(--primary);border-color:var(--primary)} .chk:disabled{cursor:not-allowed;opacity:.55} .chk svg{width:12px;height:12px} .ai-cell{display:flex;align-items:center;gap:5px} .verdict{font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;white-space:nowrap} .v-pending{background:#f1f1f3;color:var(--text-2)} .v-pass{background:#f0fdf4;color:#15803d} .v-warn{background:#fff7ed;color:#c2410c} .v-fail{background:#fef2f2;color:#dc2626} .icon-btn{width:24px;height:24px;border:1px solid var(--border-strong);border-radius:5px;background:var(--panel); cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:0 0 24px} .icon-btn:hover{background:var(--hover);color:var(--primary-text)} .icon-btn svg{width:13px;height:13px} /* Hàng thao tác trong bảng (Nhân sự…): 24px sát ngưỡng tối thiểu WCAG 2.2, nới 28px cho cụm 3 nút đứng cạnh nhau đỡ bấm nhầm. */ .icon-btn-lg{width:28px;height:28px;flex:0 0 28px;border-radius:6px} .icon-btn-lg svg{width:14px;height:14px} .cell-h{width:96px;text-align:center} .r-expand{padding:2px 14px 12px 56px;background:var(--bg-subtle);border-bottom:1px solid #f0f0f2; font-size:12px;color:var(--text-2);display:grid;gap:6px} .r-expand .lab{font-weight:600;color:var(--text);font-size:11px} .r-expand .box{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px 10px} /* ===== Kanban — Clickflow board: white canvas, chip column headers ===== */ .kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start} .kcol{flex:0 0 276px;width:276px;background:transparent;border:none;border-radius:8px; display:flex;flex-direction:column;max-height:100%} .kcol-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:11px; text-transform:uppercase;letter-spacing:.3px;padding:5px 10px;border-radius:6px; background:rgba(0,0,0,.045);width:fit-content;margin-bottom:10px} /* Figma CRM 157:280: badge đếm nằm CẠNH tên cột (không đẩy phải) — chỗ phải dành cho tổng tiền cột (marginLeft:auto inline trong crmPipeline). */ .kcol-h .grp-count{font-weight:700} .kcards{padding:0 2px 10px;display:flex;flex-direction:column;gap:8px;overflow:auto} .kcard{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 11px; box-shadow:none;cursor:grab;transition:box-shadow .12s,border-color .12s} .kcard:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)} /* DESIGN.md "Luật Không Viền Một Bên": dải 3px cạnh trái đổi thành viền đậm đủ bốn cạnh. Nghĩa giữ nguyên (thẻ này được nhấn), hình thì hết đọc như tab. */ .kcard-accent{border-color:var(--border-strong)} .kcard.drag{opacity:.4} .kcol.dragover{outline:2px dashed var(--primary);outline-offset:-3px;border-radius:8px} .kcard-title{font-size:12px;font-weight:550;margin-bottom:8px;display:flex;gap:6px;align-items:flex-start} .kcard-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .kcard-cells{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid #f0f0f2} .qadd-trigger{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;background:transparent; border:1px dashed transparent;border-radius:6px;color:var(--text-3);font-size:12px;font-weight:500; cursor:pointer;text-align:left;transition:background .12s,border-color .12s,color .12s} .qadd-trigger:hover{background:var(--hover);border-color:var(--border);color:var(--text-2)} .qadd-trigger svg{opacity:.7;flex:0 0 auto} .qadd-input{width:100%;height:30px;font-size:12px} .kanban-qadd{padding:0 2px;flex:0 0 auto} /* Hàng tạo tại chỗ ở cuối mỗi nhóm. Cơ chế đã có sẵn (quickAddRow) — pass này chỉ đổi dáng cho khớp ClickUp: cao 40px, kéo hết chiều ngang, viền dưới liền mạch với các dòng việc phía trên thay vì thụt vào như một nút lẻ. */ .list-qadd{padding:0} .list-qadd .qadd-trigger{min-height:40px;padding:0 14px;border:none;border-bottom:1px solid #f0f0f2; border-radius:0;font-size:14px;gap:9px} .list-qadd .qadd-trigger:hover{background:var(--hover);border-color:transparent; border-bottom:1px solid #f0f0f2;color:var(--text)} .kchk{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:700;letter-spacing:.2px;color:var(--text-3); background:var(--bg-subtle);padding:2px 6px;border-radius:5px;transition:background .12s,color .12s;white-space:nowrap} .kchk svg{width:10px;height:10px} .kchk.kchk-on{color:#15803d;background:#f0fdf4} .kchk.kchk-on.mgr{color:var(--primary-text);background:var(--primary-weak)} [data-theme="dark"] .kchk{background:rgba(255,255,255,.06)} [data-theme="dark"] .kchk.kchk-on{background:rgba(41,151,100,.18)} [data-theme="dark"] .kchk.kchk-on.mgr{background:rgba(8,128,234,.18)} /* ===== Tables ===== */ .tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:8px; overflow:hidden;font-size:12px} .tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-3); font-weight:600;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--bg-subtle)} .tbl td{padding:9px 12px;border-bottom:1px solid #f0f0f2} .tbl tr:last-child td{border-bottom:none} .tbl tr:hover td{background:var(--hover)} .tbl .tbl-user{display:flex;align-items:center;gap:8px} /* ===== KPI / OKR ===== */ .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .kpi-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px;box-shadow:var(--shadow)} /* KPI trượt chuẩn (<30%) nổi như .stat-bad Trang chủ; KPI chưa đo chìm xám — card đạt chuẩn giữ nền trắng yên tĩnh để rủi ro là thứ duy nhất hút mắt. */ .kpi-card.kpi-bad{background:#fef2f2;border-color:var(--st-blocked)} /* Xem giải thích --danger-wash ở khối biến [data-theme="dark"]: kênh gốc (239,68,68) đọc ~0.47, gần trùng DIV.muted "kỳ đo" và SPAN.tgt "/ chỉ tiêu" bên trong thẻ (cả hai dùng --text-3 ~0.54) — 12 chỗ bị chấm chữ chìm nền dù cùng một thẻ .kpi-bad. */ [data-theme="dark"] .kpi-card.kpi-bad{background:var(--danger-wash)} .kpi-card.kpi-dim .kpi-vals .cur{color:var(--text-3)} .kpi-name{font-weight:600;font-size:13px} .kpi-vals{display:flex;align-items:baseline;gap:6px;margin:8px 0 4px} .kpi-vals .cur{font-size:20px;font-weight:700} .kpi-vals .tgt{font-size:12px;color:var(--text-3)} /* float bị flex cha nuốt ⇒ % dính sát tên KPI ("Doanh thu tháng64%"); hàng cha giờ tự dàn space-between nên pill chỉ cần đứng yên. */ .kpi-ach{font-size:12px;font-weight:700;flex:0 0 auto} .okr{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:15px;margin-bottom:14px; box-shadow:var(--shadow)} .okr-h{display:flex;align-items:center;gap:10px;margin-bottom:12px} .okr-title{font-weight:600;font-size:14px;flex:1} .kr{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #f0f0f2} .kr-title{flex:1;font-size:12px} .kr-prog{width:130px} .kr-pct{font-size:12px;font-weight:600;width:42px;text-align:right} /* ===== AI Report ===== */ .airep{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:14px; box-shadow:var(--shadow)} .airep-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px} .airep-title{font-weight:600;font-size:14.5px;flex:1} .airep-period{font-size:12px;color:var(--text-3)} .chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .chip{background:var(--bg-subtle);border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:12px} .chip .cv{font-weight:700;font-size:14px;display:block} .chip .cl{color:var(--text-3);font-size:11px} .tpl-chip{background:var(--panel);border:1px solid var(--border-strong);border-radius:20px;padding:4px 12px;font-size:12px; font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s} .tpl-chip:hover{background:var(--hover)} .tpl-chip.active{background:var(--primary-weak);border-color:var(--primary);color:var(--primary-text);font-weight:600} .recs{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--text-2)} .recs li{margin:3px 0} .risk-low{background:#f0fdf4;color:#15803d} .risk-medium{background:#fff7ed;color:#c2410c} .risk-high{background:#fef2f2;color:#dc2626} .risk-critical{background:#fef2f2;color:#991b1b} /* ===== Integrations ===== */ .intg-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))} .intg{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:13px;box-shadow:var(--shadow)} .intg-top{display:flex;align-items:center;gap:9px;margin-bottom:9px} .intg-ic{width:32px;height:32px;border-radius:8px;background:var(--bg-subtle);border:1px solid var(--border); display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:0 0 32px} .intg-ic svg{width:17px;height:17px} .intg-name{font-weight:600;font-size:13px} .intg-cat{font-size:11px;color:var(--text-3)} /* UI/UX pass Kết nối (Figma 257:166): mô tả 1 dòng; connector chưa nối dim nhẹ; card cần uỷ quyền lại là tín hiệu đỏ duy nhất của trang; chip lọc nhóm. */ .intg-desc{font-size:12px;color:var(--text-2);margin:0 0 8px;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .intg-dim{opacity:.8} .intg-dim:hover,.intg-dim:focus-within{opacity:1} .intg-alert{border-color:#fca5a5;background:#fffafa} [data-theme="dark"] .intg-alert{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.06)} /* CTA card ≥24px (Fitts) — btn-xs 22px chỉ giữ cho chỗ khác */ .intg-actions .btn{height:26px} .intg-chipbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .intg-chip{font-size:12px;font-weight:500;color:var(--text-2);background:var(--bg-subtle); border:1px solid var(--border);border-radius:999px;padding:3px 10px;cursor:pointer;height:24px; transition:background .12s,border-color .12s,color .12s} .intg-chip:hover{border-color:var(--border-strong);color:var(--text)} .intg-chip.on{background:var(--primary-weak);border-color:var(--primary);color:var(--primary-text);font-weight:600} [data-theme="dark"] .intg-chip{background:var(--bg-subtle)} [data-theme="dark"] .intg-chip.on{background:rgba(123,104,238,.18)} /* ===== Daily report ===== */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px} .panel-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px; box-shadow:var(--shadow)} .status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 10px; border-radius:6px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap} .sp-draft{background:rgba(0,0,0,.06);color:var(--text-2)} .sp-submitted{background:var(--primary-weak);color:var(--primary-text)} .sp-ai{background:#f1edff;color:#7b68ee} .sp-approved{background:#e7f6ee;color:#1a7d4f} .sp-revise{background:#fff4e5;color:#b06000} .ai-review{background:linear-gradient(180deg,#faf7ff,#f4f0ff);border:1px solid #e9ddff;border-radius:8px; padding:13px;margin-top:12px} .ai-review-h{display:flex;align-items:center;gap:8px;font-weight:600;color:#7c3aed;margin-bottom:8px;font-size:12px} .score-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px} .score{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:6px 10px;text-align:center} .score .n{font-size:16px;font-weight:700} .score .l{font-size:11px;color:var(--text-3)} .report-item{display:flex;gap:10px;padding:8px 0;border-top:1px solid #f0f0f2;font-size:12px} .report-item .ri-res{color:var(--text-2)} /* ===== Modal ===== */ .overlay{position:fixed;inset:0;background:rgba(20,22,30,.4);z-index:100;display:flex;align-items:flex-start; justify-content:center;padding:60px 20px;overflow:auto;backdrop-filter:blur(1px);animation:overlayFade .15s ease} .modal{width:100%;max-width:520px;background:var(--panel);border-radius:10px;box-shadow:var(--shadow-md); border:1px solid var(--border);animation:modalPop .16s cubic-bezier(.2,.9,.32,1.1)} @keyframes overlayFade{from{opacity:0}to{opacity:1}} @keyframes modalPop{from{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}} .modal-h{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--border)} .modal-h .mt{font-weight:600;font-size:15px} .modal-h .x{margin-left:auto;cursor:pointer;color:var(--text-3);border:none;background:none;padding:4px} .modal-h .x:hover{color:var(--text)} .modal-b{padding:18px;max-height:70vh;overflow-y:auto} .modal-f{padding:13px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* ===== Toasts ===== */ /* Toast KHÔNG nhận chuột — cả khung lẫn từng cái. Nó là hộp position:fixed ở z-index 200 nằm đè lên góc dưới màn hình suốt 3,2–5 giây sau MỌI hành động, mà mọi hành động đều sinh toast. Chỗ nào nhận chuột thì cú bấm rơi vào đó bị nuốt: không điều hướng, không báo lỗi, không dấu vết gì để người dùng đoán ra. QA 05/08/2026 gặp đúng vậy — nút "Mở Tích hợp → MCP" "bấm lần đầu không có gì xảy ra", lần sau mới ăn (toast đã tự tắt). Ở breakpoint hẹp bên dưới khung còn kéo hết chiều ngang: vùng chết là cả đáy trang. `pointer-events:none` chỉ trên khung là CHƯA đủ — đo bằng elementFromPoint tại tâm nút: cú bấm rơi trúng bên trong toast (thừa kế `auto`), nút vẫn không nhận. Nên bỏ luôn cả bấm-để-tắt: toast không có hành động nào bên trong, tự tắt sau vài giây, và một thông báo thoáng qua thì không được phép cướp thao tác của người dùng — đó là cái giá đúng để trả. */ .toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:9px; pointer-events:none} .toast{background:#1c1c1e;color:#fff;padding:11px 15px;border-radius:8px;font-size:12px;box-shadow:var(--shadow-md); display:flex;align-items:center;gap:9px;max-width:340px;animation:slideIn .18s ease; pointer-events:none} .toast.err{background:#b91c1c} .toast.ok{background:#15803d} .toast.warn{background:#b45309} @keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}} /* ===== States ===== */ .loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px; color:var(--text-3);gap:12px} .spinner{width:26px;height:26px;border:3px solid #e6e6e8;border-top-color:var(--primary);border-radius:50%; animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .empty{text-align:center;padding:44px 20px;color:var(--text-3)} .empty svg{width:34px;height:34px;margin-bottom:10px;opacity:.5} .empty .et{font-size:13.5px;font-weight:600;color:var(--text-2)} .mt10{margin-top:10px}.mt16{margin-top:16px}.mb8{margin-bottom:8px} .muted{color:var(--text-3)} .hint{font-size:12px;color:var(--text-3);margin-top:4px} .agent-run-model{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:8px 11px;margin-bottom:12px} .agent-run-model svg{width:15px;height:15px;flex:0 0 auto;color:var(--primary-text)} /* Catalog admin — nút ẩn mẫu (hover mới hiện) */ .brain-tpl-card{position:relative} .tpl-hide-btn{position:absolute;top:6px;right:6px;width:20px;height:20px;border:none;border-radius:5px; background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .12s} .brain-tpl-card:hover .tpl-hide-btn,.ext-card:hover .tpl-hide-btn{opacity:1} .tpl-hide-btn:hover{background:var(--hover);color:var(--st-blocked)} .tpl-hide-btn svg{width:12px;height:12px} /* Billing — Figma Cài đặt·Gói & Thanh toán 241:146: gói đang dùng là tín hiệu số 1 của trang nên nhuộm cả nền primary-weak (cùng pattern stat-bad/stat-warn Trang chủ); badge "Đang dùng" đổi từ badge-ok xanh sang nền primary chữ trắng để không trộn ngữ nghĩa với badge trạng thái "ok". Token hoá nên dark theme tự ăn theo --primary-weak/--primary của [data-theme="dark"]. */ /* .ext-card.plan-current (2 class) chứ không phải .plan-current trần: .ext-card nằm SAU trong file và cũng đặt background/border/box-shadow, nên bản 1-class cũ bị đè theo source order — ring primary chưa bao giờ hiện. */ .ext-card.plan-current{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--primary-weak)} .stat.stat-accent{background:var(--primary-weak);border-color:var(--primary)} /* Nền badge dùng --primary-text (#6a56e0, 5.2:1 với chữ trắng) chứ không phải --primary (#7b68ee chỉ 4.15:1 — dưới AA 4.5:1 cho chữ 11px). Dark: primary là lavender sáng nên đảo sang chữ tối. */ .badge-plan{background:var(--primary-text);color:#fff} [data-theme="dark"] .badge-plan{background:var(--primary);color:#0b0b0b} /* Giá/quota là số so sánh dọc — tabular-nums cho mọi giá trị thẻ số */ .stat .v{font-variant-numeric:tabular-nums} /* ===== All Settings (đo trực tiếp từ Clickflow thật: sidebar 260px #fcfcfc, item 28px/14px, active rgba(0,0,0,.09) radius 7px, tiêu đề 16/600, content title 24/600) ===== */ .setx{display:flex;align-items:stretch;margin:-20px -24px -40px;height:calc(100vh - 52px);overflow:hidden} .setx-nav{flex:0 0 260px;width:260px;background:#fcfcfc;border-right:1px solid var(--border); padding:14px 10px 18px;overflow-y:auto;display:flex;flex-direction:column} [data-theme="dark"] .setx-nav{background:#111111} .setx-title{font-size:16px;font-weight:600;padding:2px 8px 10px;letter-spacing:-.2px} /* Nhãn nhóm dùng --text-2: 11px/600 trên nền #fcfcfc, --text-3 chỉ đạt ~4.5:1 sát ngưỡng */ .setx-sec{font-size:11px;font-weight:600;color:var(--text-2);margin:13px 8px 3px} .setx-item{position:relative;display:flex;align-items:center;gap:8px;height:28px;flex:0 0 28px;padding:0 7px; border-radius:7px;border:none;background:none;cursor:pointer;font-size:13.5px;color:var(--text-2); width:100%;text-align:left;white-space:nowrap;overflow:hidden;transition:background .1s,color .1s} /* setx-nav là flex column bị giới hạn chiều cao — không cho mục co lại khi màn thấp (flex-shrink mặc định 1 nén item còn ~12px; sidebar phải scroll thay vì nén) */ .setx-title,.setx-sec,.setx-foot{flex:0 0 auto} .setx-item:hover{background:var(--hover);color:var(--text)} .setx-item.active{background:rgba(0,0,0,.09);color:var(--text);font-weight:550} /* rgba(255,255,255,.12) hoà lên #111111 trông đúng là "xám nhạt hơn" bằng mắt thật, nhưng script dò tương phản đọc R/G/B thẳng từ backgroundColor (không hoà alpha vào nền phía sau) nên chấm nền = trắng nguyên (1.00) cạnh chữ 0.94 — coi mục đang chọn như còn TRẮNG ở chế độ Tối. Đổi sang nền đặc (token có sẵn, không alpha) để không còn kênh trắng nào lộ ra khi đo trực tiếp; #404040 cũng tương phản rõ hơn hover (#232323) nên vẫn thấy được mục nào đang mở. */ [data-theme="dark"] .setx-item.active{background:var(--border-strong)} /* Mục đang mở không chỉ dựa vào nền mờ: thêm vạch --primary bên trái (Figma 182:3790) */ .setx-item.active::before{content:"";position:absolute;left:1px;top:5px;width:2.5px;height:18px; border-radius:2px;background:var(--primary)} .setx-ic{display:inline-flex;flex:0 0 auto;color:inherit} .setx-ic svg{width:16px;height:16px} .setx-foot{border-top:1px solid var(--border);margin-top:14px;padding-top:10px} /* scroll-padding-bottom = chiều cao .set-bar dính đáy. Thiếu nó, Tab tới ô cuối thì trình duyệt cuộn ô vào sát mép dưới — đúng chỗ thanh Lưu đang che (WCAG 2.2 SC 2.4.11 Focus Not Obscured). */ .setx-main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;scroll-padding-bottom:84px} .setx-main-in{max-width:860px;padding:26px 30px 48px} /* 860px là bề rộng ĐỌC của form (line-length), không phải của bảng dữ liệu. Tab nào render bảng nhiều cột (Nhân sự 8 cột) thì 860 hẹp hơn min-content của bảng, mà .setx-main lại overflow-x:hidden — cột cuối (Đăng nhập cuối / Thao tác) bị CẮT MẤT, không cuộn được, không dấu hiệu nào báo còn cột. Nới khung cho các tab bảng + .tbl-scroll cho phần vẫn quá rộng. */ .setx-main-in.setx-wide{max-width:1400px} /* Thanh cuộn LUÔN hiện (styling ::-webkit-scrollbar tắt chế độ overlay của macOS): cuộn ẩn = cột bị giấu mà không dấu hiệu nào — đúng lỗi cũ chỉ đổi từ cắt sang giấu. */ .tbl-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .tbl-scroll::-webkit-scrollbar{height:8px} .tbl-scroll::-webkit-scrollbar-track{background:transparent} .tbl-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px} .setx-main-in .page-title{font-size:24px;font-weight:600;letter-spacing:-.3px} /* S0.1 — thanh tab con dùng chung của Settings (settingsTabGroup). Trước đây khai báo inline trong JS nên "component dùng chung" không có kiểu nào trong stylesheet; giờ là nơi DUY NHẤT định kiểu tab con cho mọi mục Settings. */ .setx-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px} @media (max-width:900px){ .setx{flex-direction:column;height:auto;overflow:visible;margin:-12px -12px -40px} .setx-nav{width:100%;flex:0 0 auto;max-height:none;border-right:none;border-bottom:1px solid var(--border)} .setx-main{overflow:visible} .setx-main-in{padding:18px 14px 40px} } /* Autopilot chip — nổi bật hơn chip thường (gradient nhẹ như brain-glow) */ .chip-autopilot{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,#ff6ec4,#7873f5,#4adede) border-box; font-weight:600} .chip-autopilot svg{width:13px;height:13px;color:#7873f5} /* .chip-autopilot là