/* ============================================================================ Bàn làm việc dùng chung — Finance & Accounting OS · Purchasing · Sales OS MagnoliaX DS v2, hồ sơ "Cobalt-mono board" (primary #2563EB, thẻ r16). ⚠ Vì sao scope theo CLASS `.dsk` chứ không theo `#workspace-xxx` như mọi file CSS khác của repo: module này gắn vào BA nơi khác nhau (#workspace-finance- accounting, #workspace-purchasing, và #blv-container trong tab Sales OS). Bọc theo id thì phải chép ba lần cùng một bộ rule — ba bản đó sẽ lệch nhau sau vài lần sửa, đúng bài học "hai bản luật trạng thái" đã có trong repo. Đổi lại, tiền tố `dsk-` phải là duy nhất: đã soát toàn bộ public/css — không file nào dùng tiền tố này, và KHÔNG có rule trần (.btn/.card/.pill/.board) ở đây. Host muốn đổi màu nhấn thì chỉ cần đặt --dsk-accent trong scope của mình (vd Purchasing dùng #0073EA cho khớp thanh tab sẵn có) — không sửa file này. ============================================================================ */ .dsk { --dsk-ink: #18181B; --dsk-muted: #6B6B72; --dsk-soft: #A1A1AA; --dsk-bg: #F1F1F3; --dsk-card: #FFFFFF; --dsk-line: #ECECEE; --dsk-line-2: #E0E0E4; --dsk-accent: #2563EB; --dsk-accent-h: #1D4ED8; --dsk-tint: #E5EDFF; --dsk-tint-2: #F4F6FF; --dsk-focus: rgba(37, 99, 235, .30); --dsk-done: #00C875; --dsk-done-bg: #E5F9F0; --dsk-work: #FDAB3D; --dsk-work-bg: #FFF4E5; --dsk-stuck: #E2445C; --dsk-stuck-bg: #FCE8EB; --dsk-info: #579BFC; --dsk-info-bg: #E9F2FF; --dsk-purple: #A25DDC; --dsk-purple-bg: #F3EAFB; --dsk-dark: #333333; --dsk-dark-bg: #EDEDEF; /* Ghim. Dùng amber ĐẬM #B4730F chứ không phải amber gốc #FDAB3D: #FDAB3D không đủ tương phản để làm nền cho chữ/biểu tượng nhỏ theo cả hai chiều. #B4730F trên nền trắng đạt AA cho chữ, và làm NỀN với biểu tượng trắng vẫn qua ngưỡng 3:1 của thành phần phi-văn-bản. */ --dsk-pin: #B4730F; --dsk-pin-bg: #FFF7E8; --dsk-r: 16px; --dsk-r-ctl: 8px; --dsk-r-sm: 4px; --dsk-r-pill: 99px; --dsk-sh: 0 2px 18px rgba(20, 20, 25, .05); --dsk-sh-pop: 0 18px 50px rgba(22, 32, 51, .16); --dsk-font: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, -apple-system, sans-serif; font-family: var(--dsk-font); font-size: 14px; line-height: 1.5; color: var(--dsk-ink); background: var(--dsk-bg); padding: 16px 20px 40px; } .dsk * { box-sizing: border-box; } .dsk--embed { background: transparent; padding: 0; } /* Sprite icon — .ic của repo bị scope theo workspace nên workspace mới phải khai lại (luật 7). Ở đây khai riêng `.dsk-ic` để không phụ thuộc host nào. */ .dsk-ic { width: 16px; height: 16px; flex: none; stroke-width: 1.75; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } .dsk-ic.s14 { width: 14px; height: 14px; } .dsk-ic.s18 { width: 18px; height: 18px; } .dsk-ic.s20 { width: 20px; height: 20px; } .dsk-ic.s40 { width: 40px; height: 40px; stroke-width: 1.4; } /* ── Đầu trang ───────────────────────────────────────────────────────────── */ .dsk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .dsk-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; } .dsk-head .tico { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: var(--dsk-r-ctl); background: var(--dsk-tint); color: var(--dsk-accent); } .dsk-eyebrow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dsk-soft); } .dsk-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--dsk-ink); } .dsk-head .sub { font-size: 12.5px; color: var(--dsk-muted); } .dsk-head-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Ô «Bàn của» — chỉ quản trị thấy. Cố ý KHÔNG tô như nút chính: đây là bộ lọc phạm vi, để nó nổi ngang nút "Việc mới" là hai khối màu cạnh nhau, mắt đọc thành hai nút. */ .dsk-deskof { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 11px; border: 1px solid var(--dsk-line-2); border-radius: var(--dsk-r-ctl); background: var(--dsk-card); color: var(--dsk-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; } .dsk-deskof:hover { border-color: var(--dsk-accent); color: var(--dsk-accent); } .dsk-deskof:focus-within { border-color: var(--dsk-accent); box-shadow: 0 0 0 3px var(--dsk-focus); } .dsk-deskof > span { white-space: nowrap; } .dsk-deskof select { max-width: 200px; height: 26px; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--dsk-ink); cursor: pointer; padding: 0 2px; } .dsk-deskof select:focus { outline: none; } /* ── Nút ─────────────────────────────────────────────────────────────────── */ .dsk-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--dsk-line-2); border-radius: var(--dsk-r-ctl); background: var(--dsk-card); color: var(--dsk-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .12s; } .dsk-btn:hover { background: var(--dsk-tint-2); border-color: var(--dsk-accent); color: var(--dsk-accent); } .dsk-btn:active { transform: scale(.96); } .dsk-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dsk-focus); } .dsk-btn.primary { background: var(--dsk-accent); border-color: var(--dsk-accent); color: #fff; } .dsk-btn.primary:hover { background: var(--dsk-accent-h); border-color: var(--dsk-accent-h); color: #fff; } .dsk-btn.ghost { background: transparent; border-color: transparent; color: var(--dsk-muted); font-weight: 600; } .dsk-btn.ghost:hover { background: var(--dsk-tint-2); color: var(--dsk-accent); } .dsk-btn.danger { border-color: var(--dsk-stuck); color: var(--dsk-stuck); } .dsk-btn.danger:hover { background: var(--dsk-stuck-bg); border-color: var(--dsk-stuck); color: var(--dsk-stuck); } .dsk-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; } .dsk-btn[disabled] { opacity: .5; cursor: not-allowed; } /* ── Thẻ số liệu ─────────────────────────────────────────────────────────── */ .dsk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .dsk-kpi { background: var(--dsk-card); border: 1px solid var(--dsk-line); border-left: 4px solid var(--kpi, var(--dsk-accent)); border-radius: var(--dsk-r-ctl); padding: 12px 14px; box-shadow: var(--dsk-sh); } .dsk-kpi .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dsk-soft); margin-bottom: 4px; } .dsk-kpi .val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--dsk-ink); font-variant-numeric: tabular-nums; } /* ── Thanh công cụ ───────────────────────────────────────────────────────── */ .dsk-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .dsk-seg { display: inline-flex; gap: 2px; background: var(--dsk-card); border: 1px solid var(--dsk-line); border-radius: var(--dsk-r-pill); padding: 3px; } .dsk-seg button { border: 0; background: transparent; color: var(--dsk-muted); font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: var(--dsk-r-pill); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .dsk-seg button:hover:not(.active) { color: var(--dsk-accent); } .dsk-seg button.active { background: var(--dsk-accent); color: #fff; } .dsk-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; min-width: 0; max-width: 460px; } .dsk-search .dsk-ic { position: absolute; left: 10px; color: var(--dsk-soft); pointer-events: none; } .dsk-search input { width: 100%; min-width: 0; height: 34px; padding: 0 30px 0 32px; border: 1px solid var(--dsk-line-2); border-radius: var(--dsk-r-pill); background: var(--dsk-card); font: inherit; font-size: 13px; color: var(--dsk-ink); } .dsk-search input::placeholder { color: var(--dsk-soft); } .dsk-search input:focus { outline: none; border-color: var(--dsk-accent); box-shadow: 0 0 0 3px var(--dsk-focus); } .dsk-search .clr { position: absolute; right: 6px; border: 0; background: transparent; color: var(--dsk-soft); cursor: pointer; padding: 2px 4px; line-height: 1; font-size: 14px; } .dsk-spacer { flex: 1 1 auto; } .dsk-hint { font-size: 12px; color: var(--dsk-muted); font-variant-numeric: tabular-nums; } /* Hàng chip lọc đang áp (lớp filter thứ 3 — luật 15c) */ .dsk-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .dsk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 11px; border: 1px solid var(--dsk-accent); border-radius: var(--dsk-r-pill); background: var(--dsk-tint); color: var(--dsk-accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .dsk-chip:hover { background: #D8E4FF; } /* Chip "đang xem bàn của người khác": tím, KHÔNG đỏ. Đỏ trên bàn này đã có nghĩa cố định là trễ hạn / vướng; mượn nó cho một trạng thái không phải lỗi là làm loãng đúng cái tín hiệu cần giữ sắc. Khai sau .dsk-chip nên thắng ở cùng độ đặc hiệu. */ .dsk-chip.alt { border-color: var(--dsk-purple); background: var(--dsk-purple-bg); color: #6B34A0; } .dsk-chip.alt:hover { background: #E9DAF7; } /* ── Kỳ (Tất cả / Ngày / Tuần / Tháng) ───────────────────────────────────── */ .dsk-duebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--dsk-card); border: 1px solid var(--dsk-line); border-radius: var(--dsk-r-ctl); padding: 7px 10px; margin-bottom: 12px; } .dsk-duenav { display: inline-flex; align-items: center; gap: 4px; } .dsk-duenav button { width: 26px; height: 26px; border: 1px solid var(--dsk-line-2); background: var(--dsk-card); border-radius: var(--dsk-r-sm); color: var(--dsk-muted); cursor: pointer; display: inline-grid; place-items: center; } .dsk-duenav button:hover { border-color: var(--dsk-accent); color: var(--dsk-accent); } .dsk-duelbl { font-size: 12.5px; font-weight: 700; color: var(--dsk-ink); min-width: 118px; text-align: center; font-variant-numeric: tabular-nums; } /* ── Nhóm theo hạn ───────────────────────────────────────────────────────── */ .dsk-grp { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 14px 0 8px; background: var(--dsk-tint-2); border-left: 3px solid var(--grp, var(--dsk-accent)); border-radius: 0 var(--dsk-r-sm) var(--dsk-r-sm) 0; cursor: pointer; } .dsk-grp .nm { font-size: 13px; font-weight: 800; color: var(--dsk-ink); } .dsk-grp .cnt { min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--dsk-r-pill); background: color-mix(in srgb, var(--grp, var(--dsk-accent)) 16%, transparent); color: var(--grp, var(--dsk-accent)); font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; } .dsk-grp .tog { margin-left: auto; color: var(--dsk-soft); transition: transform .15s; } .dsk-grp.closed .tog { transform: rotate(-90deg); } /* ── Dòng việc ───────────────────────────────────────────────────────────── */ .dsk-list { display: flex; flex-direction: column; gap: 8px; } .dsk-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--dsk-card); border: 1px solid var(--dsk-line); border-left: 3px solid var(--acc, var(--dsk-line-2)); border-radius: var(--dsk-r-ctl); box-shadow: var(--dsk-sh); transition: box-shadow .15s, transform .15s; } .dsk-row:hover { box-shadow: 0 6px 22px rgba(20, 20, 25, .08); } .dsk-row.overdue { --acc: var(--dsk-stuck); } .dsk-row.blocked { --acc: var(--dsk-stuck); background: var(--dsk-stuck-bg); } /* ⚠ PHẢI khai SAU .overdue/.blocked: cùng độ đặc hiệu thì cái viết sau thắng, đặt trước là nền ghim bị hai luật trên đè câm. Và ghim KHÔNG cướp dải màu bên trái của việc quá hạn / vướng — đỏ là tín hiệu gấp hơn, nhường nó. */ .dsk-row.pinned { background: var(--dsk-pin-bg); } .dsk-row.pinned:not(.overdue):not(.blocked) { --acc: var(--dsk-pin); } .dsk-row.blocked.pinned { background: var(--dsk-stuck-bg); } .dsk-row-main { flex: 1 1 auto; min-width: 0; } .dsk-row-nm { font-size: 14px; font-weight: 700; color: var(--dsk-ink); word-break: break-word; } .dsk-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--dsk-muted); } .dsk-row-meta b { font-variant-numeric: tabular-nums; } .dsk-row-meta .od { color: var(--dsk-stuck); font-weight: 800; } .dsk-row-note { margin-top: 6px; font-size: 12.5px; color: var(--dsk-muted); background: var(--dsk-tint-2); border-radius: var(--dsk-r-sm); padding: 6px 9px; white-space: pre-wrap; word-break: break-word; } .dsk-row-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; } /* ── Ô trạng thái tô đầy (luật 9 + 16) ───────────────────────────────────── */ .dsk-st { height: 30px; min-width: 116px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--dsk-r-sm); font: inherit; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; appearance: none; background-image: none; text-align: center; } .dsk-st:focus { outline: none; box-shadow: 0 0 0 3px var(--dsk-focus); } .dsk-st option { color: var(--dsk-ink); background: #fff; } .dsk-st--todo { background: var(--dsk-dark); } .dsk-st--doing { background: var(--dsk-work); } .dsk-st--review { background: var(--dsk-info); } .dsk-st--done { background: var(--dsk-done); } .dsk-st--blocked { background: var(--dsk-stuck); } .dsk-st--handover { background: var(--dsk-purple); } /* ── Nút ghim ────────────────────────────────────────────────────────────── */ .dsk-pin { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--dsk-line-2); border-radius: var(--dsk-r-sm); background: var(--dsk-card); color: var(--dsk-soft); cursor: pointer; padding: 0; transition: background .15s, border-color .15s, color .15s, transform .12s; } .dsk-pin:hover { border-color: var(--dsk-pin); background: var(--dsk-pin-bg); color: var(--dsk-pin); } .dsk-pin:active { transform: scale(.92); } .dsk-pin:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(180, 115, 15, .30); } .dsk-pin.on { border-color: var(--dsk-pin); background: var(--dsk-pin); color: #fff; } .dsk-pin.on:hover { background: #96600C; border-color: #96600C; color: #fff; } .dsk-note-in { height: 30px; width: 190px; max-width: 42vw; padding: 0 9px; border: 1px solid var(--dsk-line-2); border-radius: var(--dsk-r-sm); font: inherit; font-size: 12.5px; color: var(--dsk-ink); background: var(--dsk-card); } .dsk-note-in:focus { outline: none; border-color: var(--dsk-accent); box-shadow: 0 0 0 3px var(--dsk-focus); } /* ── Pill ────────────────────────────────────────────────────────────────── */ .dsk-ps { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 9px; border-radius: var(--dsk-r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; } .dsk-ps--urgent { background: var(--dsk-stuck-bg); color: #C32E43; } .dsk-ps--high { background: var(--dsk-work-bg); color: #B4730F; } .dsk-ps--medium { background: var(--dsk-info-bg); color: #1C5FB8; } .dsk-ps--low { background: var(--dsk-dark-bg); color: var(--dsk-muted); } .dsk-ps--late { background: var(--dsk-stuck); color: #fff; } .dsk-ps--src { background: var(--dsk-tint); color: var(--dsk-accent); } .dsk-ps--pin { background: var(--dsk-pin-bg); color: var(--dsk-pin); } .dsk-ps--pin .dsk-ic { width: 12px; height: 12px; vertical-align: -2px; } /* ── Bảng Kanban ─────────────────────────────────────────────────────────── */ .dsk-board { display: grid; grid-template-columns: repeat(var(--kl, 5), minmax(0, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; } .dsk-lane { background: var(--dsk-card); border: 1px solid var(--dsk-line); border-radius: var(--dsk-r-ctl); padding: 8px; min-height: 120px; display: flex; flex-direction: column; } .dsk-lane.drop { background: var(--dsk-tint-2); box-shadow: inset 0 0 0 2px var(--dsk-accent); } .dsk-lane-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; margin-bottom: 8px; border-radius: var(--dsk-r-sm); background: var(--lb, var(--dsk-dark-bg)); color: var(--lc, var(--dsk-muted)); } .dsk-lane-h .n { margin-left: auto; font-variant-numeric: tabular-nums; } .dsk-lane-body { display: flex; flex-direction: column; gap: 7px; max-height: 620px; overflow-y: auto; padding-right: 2px; } .dsk-kcard { background: var(--dsk-card); border: 1px solid var(--dsk-line); border-left: 3px solid var(--acc, var(--dsk-line-2)); border-radius: var(--dsk-r-ctl); padding: 9px 10px; cursor: grab; } .dsk-kcard:active { cursor: grabbing; } .dsk-kcard.dragging { opacity: .45; } .dsk-kcard.overdue { --acc: var(--dsk-stuck); } .dsk-kcard.pinned { background: var(--dsk-pin-bg); } .dsk-kcard.pinned:not(.overdue) { --acc: var(--dsk-pin); } .dsk-kcard .kh { display: flex; align-items: flex-start; gap: 6px; } .dsk-kcard .kh .nm { flex: 1 1 auto; min-width: 0; } .dsk-kcard .kh .dsk-pin { width: 24px; height: 24px; margin-top: -1px; } .dsk-kcard .nm { font-size: 12.5px; font-weight: 700; color: var(--dsk-ink); word-break: break-word; } .dsk-kcard .mt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: var(--dsk-muted); font-variant-numeric: tabular-nums; } /* Cột "Đã bàn giao": chỉ để XEM (không data-lane ⇒ không nhận thả). Nền chìm một bậc để mắt đọc ra ngay là cột này không kéo–thả vào được, thay vì thử rồi tưởng lỗi. */ .dsk-lane.nodrop { background: #FBFAFC; } @media (max-width: 1100px) { .dsk-board { grid-template-columns: repeat(var(--kl, 5), 236px); } } /* ── Lịch ────────────────────────────────────────────────────────────────── */ .dsk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--dsk-line-2); border: 1px solid var(--dsk-line-2); border-radius: var(--dsk-r-ctl); overflow: hidden; } .dsk-cal .dow { background: #F7F7F9; color: var(--dsk-soft); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; text-align: center; padding: 7px 0; } .dsk-cal .day { background: var(--dsk-card); min-height: 104px; padding: 6px; } .dsk-cal .day.out { background: #FAFAFB; } .dsk-cal .day.today { background: var(--dsk-tint-2); box-shadow: inset 0 0 0 2px var(--dsk-accent); } .dsk-cal .dn { font-size: 11.5px; font-weight: 700; color: var(--dsk-muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .dsk-cal .day.today .dn { color: var(--dsk-accent); } .dsk-cchip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--acc, var(--dsk-accent)); background: var(--dsk-tint-2); border-radius: var(--dsk-r-sm); padding: 3px 6px; margin-bottom: 3px; font: inherit; font-size: 11px; font-weight: 600; color: var(--dsk-ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dsk-cchip:hover { background: var(--dsk-tint); } .dsk-cchip.pinned { background: var(--dsk-pin-bg); font-weight: 700; } /* ── Trống / lỗi / nạp ───────────────────────────────────────────────────── */ .dsk-empty { text-align: center; padding: 40px 20px; color: var(--dsk-soft); border: 1px dashed var(--dsk-line-2); border-radius: var(--dsk-r-ctl); background: var(--dsk-card); } .dsk-empty h4 { margin: 10px 0 6px; font-size: 15px; font-weight: 700; color: var(--dsk-muted); } .dsk-empty p { margin: 0; font-size: 12.5px; color: var(--dsk-soft); } .dsk-err { border: 1px solid var(--dsk-stuck); background: var(--dsk-stuck-bg); color: #C32E43; border-radius: var(--dsk-r-ctl); padding: 12px 14px; font-size: 13px; font-weight: 600; } .dsk-skel { height: 64px; border-radius: var(--dsk-r-ctl); margin-bottom: 8px; background: linear-gradient(90deg, #EDEDEF 25%, #F6F6F8 50%, #EDEDEF 75%); background-size: 200% 100%; animation: dsk-shimmer 1.3s linear infinite; } @keyframes dsk-shimmer { to { background-position: -200% 0; } } /* ── Toast ───────────────────────────────────────────────────────────────── */ .dsk-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 6000; max-width: min(560px, 92vw); background: var(--dsk-ink); color: #fff; border-radius: var(--dsk-r-ctl); padding: 11px 16px; font-family: var(--dsk-font); font-size: 13px; font-weight: 600; box-shadow: var(--dsk-sh-pop); } .dsk-toast.err { background: var(--dsk-stuck); } /* ── Modal (portal ra body ⇒ khai lại token, không dựa .dsk cha) ──────────── */ .dsk-overlay { position: fixed; inset: 0; z-index: 5200; background: rgba(15, 23, 42, .52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif; } .dsk-modal { width: min(620px, 100%); max-height: 90vh; overflow: auto; background: #F1F1F3; border-radius: 16px; box-shadow: 0 18px 50px rgba(22, 32, 51, .28); border-top: 3px solid #2563EB; } .dsk-modal .mh { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: #fff; border-bottom: 1px solid #ECECEE; border-radius: 13px 13px 0 0; position: sticky; top: 0; z-index: 2; } .dsk-modal .mh .hico { width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; border-radius: 8px; background: #E5EDFF; color: #2563EB; } .dsk-modal .mh h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #18181B; } .dsk-modal .mh .x { margin-left: auto; width: 32px; height: 32px; border: 1px solid #E0E0E4; background: #fff; border-radius: 8px; color: #6B6B72; cursor: pointer; font-size: 17px; line-height: 1; } .dsk-modal .mh .x:hover { background: #FCE8EB; border-color: #E2445C; color: #E2445C; } .dsk-modal .mb { padding: 16px 20px; display: grid; gap: 12px; } .dsk-modal .mf { display: flex; gap: 8px; justify-content: flex-end; padding: 0 20px 18px; } .dsk-fld { display: grid; gap: 5px; background: #fff; border: 1px solid #ECECEE; border-radius: 8px; padding: 10px 12px; } .dsk-fld > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #A1A1AA; } .dsk-fld input, .dsk-fld select, .dsk-fld textarea { width: 100%; border: 1px solid #E0E0E4; border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 13px; color: #18181B; background: #fff; } .dsk-fld input:focus, .dsk-fld select:focus, .dsk-fld textarea:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); } /* Ô tick "Ghim". PHẢI gỡ width:100% + padding của luật .dsk-fld input ngay trên, nếu không cái checkbox nở hết chiều ngang thẻ và trông như một ô nhập rỗng. */ .dsk-chk { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 12.5px; line-height: 1.45; color: #18181B; } .dsk-fld input[type="checkbox"] { width: 17px; height: 17px; flex: none; margin: 1px 0 0; padding: 0; accent-color: #B4730F; cursor: pointer; } .dsk-chk b { font-weight: 800; color: #B4730F; } .dsk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .dsk-grid2 { grid-template-columns: 1fr; } } /* ── Bản nhúng trên Sales OS ▸ Bàn làm việc ▸ thẻ "📋 Việc từ Marketing OS" ── Khung bám theo thẻ "Action" nằm cùng màn đó (.blv-cp-* trong js/ban-lam-viec.js): một hàng đầu có gạch chân, rồi bảng cột nền chìm với đầu cột viền trên màu trạng thái. ⚠ Mọi var(--blv-*) ở đây PHẢI có giá trị dự phòng. Bộ biến đó do thẻ chủ (.blv-dcard bên Sales OS) đặt; module này còn gắn ở hai workspace khác không có nó, mà "border: 1px solid var(--x)" khi --x rỗng là khai báo HỎNG — trình duyệt bỏ luôn cả dòng, không cảnh báo gì. */ .dsk--embed .dsk-list { gap: 6px; } .dsk--embed .dsk-row { padding: 9px 11px; border-radius: var(--dsk-r-sm); box-shadow: none; } .dsk--embed .dsk-row-nm { font-size: 13px; } .dsk--embed .dsk-empty { padding: 20px 12px; } /* Hàng đầu: tiêu đề · huy hiệu · ô tìm · chip đếm. Gạch chân chuyển từ

sang CHÍNH hàng này — để trên h4 thì vạch chỉ dài bằng chữ tiêu đề, gãy giữa hàng. Độ đặc hiệu 2 lớp (.dsk--embed .dsk-ehead h4) là BẮT BUỘC: rule .blv-dcard h4 nằm trong thẻ