/* ═══════════════════════════════════════════════════════════════════════════ erp-tcgd.css — TIÊU CHUẨN GIAO DIỆN STARDUCT (TCGD) cho module PDM 15/09/2026 ─────────────────────────────────────────────────────────────────────────── Alex 15/09: "Gọi nó là tiêu chuẩn giao diện Starduct nhé […] thay luôn vào modul PDM cho tôi." Tệp này thay `_shared/erp-mac.css` (giữ lại tệp cũ trong repo để quay lui, chỉ gỡ khỏi ). Nguồn tiêu chuẩn: `_dev/_tcgd.js` · bài thử `_tests/test_tcgd.js` (15/15) Mockup đã duyệt : `_mockups/TCGD_STARDUCT_V1_2026-09-15.html` Luật dự án : AGENTS.md / CLAUDE.md mục 0e 🔴 TỆP NÀY CHỈ ĐỔI ÁO. Không một dòng JS nào bị sửa, không một class nào của PDM bị đổi tên, không một hành vi nào đổi. Gỡ ra = xoá đúng MỘT dòng trong index.html. 🔴 MỌI SELECTOR BỌC TRONG #pdm-root. Module khác không đụng tới. Ngăn kéo #pdm-ngan và màn che #pdm-che nằm BÊN TRONG #pdm-root nên kế thừa đủ biến. ✅ ĐÃ KIỂM TRƯỚC KHI VIẾT — bốn thứ TCGD yêu cầu mà ERP ĐÃ ĐÚNG SẴN, không phải đụng vào (grep mã nguồn, không suy đoán): · `--fs-base` = 13px → đúng thang chữ nền của TCGD · `--radius` 6px / `--radius-lg` 8px → nằm trong thang bo 4·6·8·10 · `table.eu-tb th` ĐÃ `position:sticky; top:0` → tiêu đề bảng đã dính · `table.eu-tb` KHÔNG có `nth-child(even)` → đã không kẻ sọc · không có `backdrop-filter` nào trong PDM → vỏ đã đặc theme.css cấm đổi thang `--fs-*`; may là không cần đổi. VẬY TỆP NÀY LÀM SÁU VIỆC: ① thang xám TRUNG TÍNH → xám ẤM (stone) — đứng cạnh cam thì hoà ② sắc nhấn xanh → cam STARDUCT #C2410C (trắng trên nền này 5,18:1) ③ 🔴 SỬA LỖI TƯƠNG PHẢN đang chạy: mục thanh bên đang chọn ④ 🔴 SỬA LỖI MÀU: vàng cảnh báo #B45309 chỉ lệch cam 8,5° sắc độ ⑤ bóng có viền TÓC 0,5px thay viền 1px ⑥ font -apple-system đứng đầu → máy Mac ra SF Pro thật Cộng bốn quy tắc an toàn: chuyển động lò xo · ô chọn kiểu popup button · thanh cuộn mảnh · vòng focus cam. ─── ③ CHI TIẾT LỖI TƯƠNG PHẢN ĐÃ SỬA ───────────────────────────────────── `erp-mac.css` (bản chạy 15/09) đặt mục thanh bên đang chọn là NỀN CAM ĐẶC `--sb-active:#C2410C` nhưng để chữ `--sb-text-a:#1C1917` (mực đậm). Đo ra: Sáng: mực #1C1917 trên cam #C2410C = 3,38:1 ✗ DƯỚI AA Tối : #FAFAF9 trên #FB923C = 2,17:1 ✗ DƯỚI AA TCGD quy định mục đang chọn là VIÊN NỀN NHẠT + chữ màu nhấn. Sau khi sửa: Sáng: cam #C2410C trên #FFF7ED = 4,88:1 ✓ Tối : cam #FB923C trên #2A1508 = 7,67:1 ✓ ─── ④ CHI TIẾT LỖI MÀU ĐÃ SỬA ──────────────────────────────────────────── Bắt được khi soi ảnh render 15/09 — còn gần hơn cả lỗi đỏ 12° hôm trước: vàng cũ #B45309 lệch cam 8,5° → cùng hàng bảng thì mắt không tách nổi vàng mới #856600 lệch cam 28,5° → 5,21:1 trên #FEFCE8 ✓ tối mới #F2E75C lệch cam 28,6° → 13,34:1 trên #1F1C04 ✓ Bài thử `_tests/test_tcgd.js` cưỡng chế luật "cảnh báo lệch nhấn ≥25°". ─── ⚠ MỘT LUẬT TCGD CHƯA ÁP ĐƯỢC BẰNG LỚP ÁO ───────────────────────────── TCGD nói trạng thái "đang làm / đang sửa" phải dùng LAM, không dùng vàng. Trong PDM thật KHÔNG làm được bằng CSS: `NS.chip('warn', …)` sinh ra `.bg.warn`, và cùng một kiểu `warn` đang mang HAI nghĩa khác nhau — nghĩa A (đang làm) : 'cho_thu', 'đang mở Rev' nghĩa B (nháp/cũ) : 'Nháp', 'Lỗi thời', 'chưa xếp nhóm' Tô lam cả cụm thì 'Lỗi thời' hoá ra "đang làm" — sai nặng hơn. Muốn đúng phải sửa bảng ánh xạ trạng thái trong `pdm/js/*.js`, tức là SỬA MÃ NGUỒN chứ không phải thay áo. Đã nới sắc độ vàng ở ④ để giảm nhầm; phần còn lại để Alex quyết làm thành một lượt riêng. ═══════════════════════════════════════════════════════════════════════════ */ #pdm-root{ /* ① + ② — chỉ ĐỔI GIÁ TRỊ, giữ nguyên mọi tên biến của theme.css */ --b50:#FFF7ED; --b100:#FFEDD5; --b200:#FED7AA; --b300:#FB923C; --b400:#C2410C; --b500:#9A3412; --b600:#7C2D12; --info:#C2410C; --info2:#FFF7ED; --ok:#15803D; --ok2:#F0FDF4; --warn:#856600; --warn2:#FEFCE8; /* ④ lệch cam 28,5° · 5,21:1 */ --err:#BE123C; --err2:#FFF1F2; /* lệch cam 32,1° · 5,72:1 */ --surface:#FFFFFF; --surface-1:#FAFAF9; --surface-2:#F5F5F4; --surface-3:#EFEEEC; --border:#E0DEDB; --border-2:#D0CCC8; --border-strong:#A8A29E; --text:#1C1917; --text-2:#44403C; --text-3:#57534E; --text-4:#78716C; --text-5:#A8A29E; /* ③ mục đang chọn: VIÊN NỀN NHẠT + chữ màu nhấn, không phải nền cam đặc */ --sb-bg:transparent; --sb-hover:rgba(28,25,23,.06); --sb-active:#FFF7ED; --sb-border:#E0DEDB; --sb-text:#44403C; --sb-text-a:#C2410C; --sb-accent:#C2410C; --ink:#C2410C; --ink-hover:#9A3412; --ink-fg:#FFFFFF; /* ⑤ bóng mang theo viền tóc 0,5px — nét mảnh hơn hẳn 1px trên màn Retina */ --shadow:0 0 0 .5px rgba(28,25,23,.10), 0 1px 1px rgba(28,25,23,.05); --shadow-md:0 0 0 .5px rgba(28,25,23,.10), 0 1px 2px rgba(28,25,23,.06), 0 6px 16px -10px rgba(28,25,23,.16); --shadow-lg:0 0 0 .5px rgba(28,25,23,.12), 0 2px 4px rgba(28,25,23,.06), 0 16px 36px -16px rgba(28,25,23,.24); /* ⑥ trên máy Mac ra SF Pro thật; Windows rơi về Segoe/Inter như cũ */ --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter", "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif; --font-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace; --lo-xo:cubic-bezier(.32,.72,0,1); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; } /* ───────── chế độ Tối: xám ấm sâu, cam sáng lên ──────────────────────────── */ :root[data-theme="dark"] #pdm-root{ --b50:#2A1508; --b100:#3A1C09; --b200:#4A240B; --b300:#EA7C3C; --b400:#FB923C; --b500:#FDBA74; --b600:#FED7AA; --info:#FB923C; --info2:#2A1508; --ok:#4ADE80; --ok2:#0D2617; --warn:#F2E75C; --warn2:#1F1C04; /* ④ lệch cam 28,6° · 13,34:1 */ --err:#FB7185; --err2:#2A0D14; --surface:#292524; --surface-1:#1C1917; --surface-2:#332E2B; --surface-3:#44403C; --border:#3A3532; --border-2:#4A4441; --border-strong:#6B6360; --text:#FAFAF9; --text-2:#D6D3D1; --text-3:#B5AFAA; --text-4:#9A928C; --text-5:#78716C; --sb-hover:rgba(255,255,255,.07); --sb-active:#2A1508; --sb-border:#3A3532; --sb-text:#D6D3D1; --sb-text-a:#FB923C; --sb-accent:#FB923C; --ink:#FB923C; --ink-hover:#FDBA74; --ink-fg:#1C1917; --shadow:0 0 0 .5px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4); --shadow-md:0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.45), 0 6px 16px -10px rgba(0,0,0,.6); --shadow-lg:0 0 0 .5px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.5), 0 16px 36px -16px rgba(0,0,0,.7); } /* ───────── chuyển động lò xo, nhấn thì lún nhẹ ───────────────────────────── */ #pdm-root button,#pdm-root .btn,#pdm-root .plc-nd,#pdm-root .hoc{ transition:background-color .2s var(--lo-xo),border-color .2s var(--lo-xo), color .2s var(--lo-xo),box-shadow .2s var(--lo-xo),transform .2s var(--lo-xo)} #pdm-root button:active,#pdm-root .btn:active{transform:scale(.98)} /* ───────── vòng focus cam 3px — áp cho MỌI control, không bỏ sót ────────── */ #pdm-root button:focus-visible,#pdm-root input:focus-visible, #pdm-root select:focus-visible,#pdm-root textarea:focus-visible, #pdm-root input:focus,#pdm-root select:focus,#pdm-root textarea:focus{ outline:none;border-color:var(--b400); box-shadow:0 0 0 3px color-mix(in srgb,var(--b400) 40%,transparent)} /* ───────── Ô CHỌN kiểu popup button ─────────────────────────────────────── 🔴 HAI BẪY đã cắn khi làm cái này ở mockup: · SVG data URI phải nằm TRỌN MỘT DÒNG và mã hoá %23 cho dấu #. Dấu \ nối dòng trong chuỗi CSS làm hỏng URI — chevron biến mất, chỉ còn ô màu rỗng. · Trong background-image, ảnh ĐẦU TIÊN nằm TRÊN CÙNG. Xếp ô cam trước thì nó che mất chevron — chevron phải đứng đầu. */ #pdm-root select{ appearance:none;-webkit-appearance:none;padding-right:26px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 5 3.5 8 6.5M2 9.5 5 12.5 8 9.5'/%3E%3C/svg%3E"),linear-gradient(var(--b400),var(--b400)); background-repeat:no-repeat,no-repeat; background-position:right 6px center,right 0 center; background-size:10px 16px,22px 100%} #pdm-root select:disabled{opacity:.5} /* ───────── thanh cuộn overlay mảnh ───────────────────────────────────────── */ #pdm-root *::-webkit-scrollbar{width:12px;height:12px} #pdm-root *::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px; border:4px solid transparent;background-clip:content-box} #pdm-root *::-webkit-scrollbar-thumb:hover{background:var(--text-5);background-clip:content-box} #pdm-root *::-webkit-scrollbar-track{background:transparent} @media (prefers-reduced-motion:reduce){ #pdm-root button,#pdm-root .btn,#pdm-root .plc-nd,#pdm-root .hoc{transition:none} #pdm-root button:active,#pdm-root .btn:active{transform:none} }