/* * ========================================================================================== * PETPET UI - TOKEN CHUNG (sku.petpet = Master Data, master.petpet = Planogram + AURA) * ========================================================================================== * * Anh Quang chốt 05/10: hai app phải nhìn như CÙNG MỘT NHÀ - nút bấm và hiệu ứng giống nhau, * một phông Mona Sans, bỏ ký hiệu ₫ (viết "179.000 đ"). Tệp này là nguồn DUY NHẤT của màu, * phông, cỡ chữ, khoảng cách, bo góc, bóng và nhịp hiệu ứng. Hai app nhận nó qua `sync.sh` * (chép nguyên văn + tệp VERSION mang mã băm); mỗi app có một bài test so mã băm, nên không * app nào lặng lẽ sửa bản chép của mình rồi lệch dần. * * LUẬT VIẾT TỆP NÀY (tự kiểm bằng `node kiem.mjs`): * 1. Mọi tên bắt đầu `--pp-`. App giữ tên cũ của mình (`--yellow`, `--ink`...) bằng cách * trỏ về đây: `--yellow: var(--pp-vang)`. Không app nào khai lại giá trị `--pp-*`. * 2. Mỗi token MỘT dòng (kể cả bóng hai lớp): công cụ soi màu của Planogram chỉ miễn mã * màu trên dòng bắt đầu bằng `--ten:`. * 3. Khối tối có HAI bản giống hệt nhau (media query + `[data-theme='dark']`). `kiem.mjs` * đỏ nếu hai bản lệch một ký tự. * 4. Màu đặt theo VAI (nền, mặt, chữ phụ...) trỏ về thang; theme tối chỉ khai lại thang và * vài màu trạng thái, không vai nào phải biết mình đang ở theme nào. * * Tên tiếng Việt không dấu, ngắn: vang = vàng, than = xám than, tim = tím, do = đỏ, xam = xám, * mat = mặt (thẻ, nút, ô nhập), ke = kẻ (đường viền mảnh), muc = mực (chữ chính), co = cỡ chữ, * k = khoảng cách, bo = bo góc, bong = bóng, nhip = thời lượng hiệu ứng, em = đường cong. */ /* * ---------- Phông: Mona Sans, MỘT tệp biến thiên cho cả hai app ---------- * * Hai trục: rộng 75-125% (`font-stretch`), đậm 200-900 (`font-weight`). Khai đủ hai khoảng * ở đây thì trình duyệt dùng trục thật chứ không tự bóp/tự tô đậm giả. * * Thiếu ₫ (U+20AB) - đó là lý do cả hai app viết "đ". Có đủ chữ Việt dựng sẵn (ế ỗ ặ...), * có ✓ · … ×. Số `tabular-nums` (tnum) của Mona Sans có số 0 gạch chéo: cùng một dáng với * sku.petpet đang dùng, ghi ra để không ai tưởng là lỗi phông. * * Đường dẫn TƯƠNG ĐỐI: `sync.sh` chép phông nằm cạnh tệp này, nên Vite (Planogram) và * máy chủ tĩnh (Master Data) đều tìm thấy nó mà không phải sửa đường. */ @font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url('./MonaSans-VariableFont.woff2') format('woff2'); } :root { color-scheme: light; /* ---- 4 màu thương hiệu: KHÔNG đổi theo theme ---- */ --pp-vang: #fed519; --pp-than: #414545; --pp-tim: #7e00ec; --pp-do: #ed3201; /* Vàng: bệ / nền bấm của mặt vàng, nền rê của mặt vàng, và vàng làm CHỮ trên nền sáng (#FED519 trên trắng chỉ 1,35:1 - chữ vàng tươi trên giấy là chữ tàng hình). */ --pp-vang-dam: #e0b800; --pp-vang-re: #f6cb0a; --pp-vang-chu: #806400; /* Chữ đặt lên nền vàng: than thương hiệu ở CẢ HAI theme (7,1:1). */ --pp-tren-vang: #414545; /* Tím = nhấn thứ hai: viền chọn bằng phím, nền rê / bấm của thứ không viền. Nền tím mang chữ trắng thì không đảo theo theme (6,8:1); tím làm CHỮ/HÌNH thì theme tối sáng lên. Ba nền tint pha từ tím GỐC chứ không từ tím chữ: tím chữ theme tối là #B266FF, pha nó lên nền đen thì ngả hồng nhạt và chữ tím trên đó chỉ còn 4,1:1 (pha từ gốc: 4,7:1). */ --pp-tren-tim: #fff; --pp-tim-chu: #7e00ec; --pp-tim-re: color-mix(in srgb, var(--pp-tim) 7%, transparent); --pp-tim-bam: color-mix(in srgb, var(--pp-tim) 14%, transparent); --pp-tim-nen: color-mix(in srgb, var(--pp-tim) 12%, transparent); /* Đỏ = phá / lỗi. Nền đỏ đặc mang chữ trắng phải sẫm hơn đỏ thương hiệu (#ED3201 chữ trắng chỉ 3,9:1); đỏ làm chữ cũng vậy. */ --pp-tren-do: #fff; --pp-do-dac: #c22800; --pp-do-chu: #c22800; --pp-do-nen: color-mix(in srgb, var(--pp-do) 8%, var(--pp-mat)); --pp-do-ke: color-mix(in srgb, var(--pp-do) 32%, var(--pp-mat)); /* * ---- Thang xám TRUNG TÍNH 12 bậc (anh chốt: nền xám trung tính, không pha màu) ---- * * 1 mặt thẻ 2 mặt phụ 3 nền trang 4 RÊ 5 BẤM 6 kẻ mảnh 7 kẻ đậm / bệ nút * 8 viền ô nhập (>= 3:1 trên mặt phụ, WCAG 1.4.11) 9 chữ mờ 10 chữ phụ 11 than 12 mực * * Cùng sắc với than #414545 (xanh xám rất nhẹ, như #F4F5F5 của sku.petpet), độ sáng từng bậc * giữ đúng thang Planogram đã đo tương phản, nên mọi cặp chữ/nền cũ vẫn đạt. */ --pp-xam-1: #fff; --pp-xam-2: #f7f8f8; --pp-xam-3: #f3f4f4; --pp-xam-4: #edefef; --pp-xam-5: #e6e8e8; --pp-xam-6: #e0e2e2; --pp-xam-7: #cdd0d0; --pp-xam-8: #8a8e8e; --pp-xam-9: #666b6b; --pp-xam-10: #575c5c; --pp-xam-11: #414545; --pp-xam-12: #2b2e2e; /* ---- Vai (trỏ về thang, tự đúng ở theme tối) ---- */ --pp-nen: var(--pp-xam-3); --pp-mat: var(--pp-xam-1); --pp-mat-2: var(--pp-xam-2); --pp-ke: var(--pp-xam-6); --pp-ke-dam: var(--pp-xam-7); --pp-vien-o: var(--pp-xam-8); --pp-muc: var(--pp-xam-12); --pp-chu-phu: var(--pp-xam-10); --pp-chu-mo: var(--pp-xam-9); --pp-re: var(--pp-xam-4); --pp-bam: var(--pp-xam-5); /* Nền NHẤN MẠNH (nút đang chọn của nhóm phân đoạn, nhãn đặc): sáng = than, tối = gần trắng. Khác `--pp-thanh` (khung tối cố định: thanh trên, thông báo) - cái đó tối ở CẢ HAI theme. */ --pp-dam: var(--pp-xam-11); --pp-tren-dam: #fff; --pp-thanh: var(--pp-xam-11); --pp-tren-thanh: #fff; /* Lớp trắng trên mặt than: rê 12%, bấm và viền nút 22%. */ --pp-tren-thanh-re: rgb(255 255 255 / 12%); --pp-tren-thanh-bam: rgb(255 255 255 / 22%); /* Màn sau hộp thoại. */ --pp-man: rgb(43 46 46 / 45%); /* Viền chọn bằng phím: tím (6,8:1 trên trắng). Trên mặt than app đè lại bằng vàng. */ --pp-vong-phim: var(--pp-tim-chu); /* ---- Trạng thái ---- */ --pp-ok: #2e7d32; --pp-ok-nen: #eaf4ea; --pp-ok-ke: #c7e0c7; --pp-ok-dac: #2e7d32; --pp-tren-ok: #fff; /* Cảnh báo = hổ phách (KHÁC vàng thương hiệu: vàng chỉ để chọn / làm chính). Màu hình cho chấm, viền, dải; màu chữ sẫm hơn một nấc cho 4,5:1. */ --pp-canh-bao: #b07800; --pp-canh-bao-chu: #8f6100; --pp-canh-bao-nen: #fff6dc; --pp-canh-bao-ke: #eedca0; --pp-canh-bao-dac: #9c6a00; /* Xanh dương Sapo: từ 27/10 KHÔNG còn là màu nghĩa (anh Quang chốt: 5 nghĩa = thành công, cảnh báo, lỗi, chờ duyệt, trung tính). Biến giữ lại để CSS cũ của hai app còn đọc được (Planogram `--info`); không thành phần nào của bộ chung dùng nó làm trạng thái nữa: viên đồng bộ `.pp-dong-bo` là trung tính + icon, các đuôi `--sapo` về trung tính. */ --pp-sapo: #2f6fbf; --pp-sapo-chu: #2b66b0; --pp-sapo-nen: #e8f1fa; /* ---- Phông + chữ ---- */ --pp-chu: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* Thang cỡ chữ (anh Quang chốt 27/10, DESIGN.md Master Data mục 1.3 + 6.1): 12 / 13 / 14 / 16 / 20 / 24 px, KHÔNG chữ nào dưới 12px. Giữ đủ 7 tên cho hai app khỏi gãy: bậc 1 (trước 9,5) và bậc 2 (trước 11,5) cùng về 12px, bậc 3 (trước 12,5) lên 13px. 1 chip tí hon · 2 chữ phụ · 3 chữ điều khiển (nút, ô nhập, menu, ô bảng) · 4 thân · 5 tiêu đề panel · 6 tiêu đề trang · 7 số lớn. */ --pp-co-1: 12px; --pp-co-2: 12px; --pp-co-3: 13px; --pp-co-4: 14px; --pp-co-5: 16px; --pp-co-6: 20px; --pp-co-7: 24px; /* Khoảng dòng 3 vai: một dòng (nút, chip) · tiêu đề 2-3 dòng · đoạn văn. */ --pp-dong-1: 1.2; --pp-dong-2: 1.35; --pp-dong-3: 1.5; /* Đậm: thường · vừa · nút / nhãn · tiêu đề. Không có nấc thứ năm. */ --pp-dam-1: 400; --pp-dam-2: 500; --pp-dam-3: 600; --pp-dam-4: 700; /* ---- Khoảng cách 7 bậc, gốc 4px. 12 là nhịp mặc định giữa hai khối. ---- */ --pp-k-1: 4px; --pp-k-2: 8px; --pp-k-3: 12px; --pp-k-4: 16px; --pp-k-5: 24px; --pp-k-6: 32px; --pp-k-7: 48px; /* ---- Bo góc 3 mức (anh Quang chốt 27/10): 4px (ô nhập trong bảng, chip vuông, ô bảng) · 8px (nút, ô nhập, thẻ, menu, ngăn, hộp thoại) · tròn (viên, ảnh đại diện). Giữ đủ 6 tên để CSS cũ của hai app khỏi gãy: bậc 1 (trước 2px) về 4px, bậc 4 và 5 (trước 12 / 16px) về 8px. ---- */ --pp-bo-1: 4px; --pp-bo-2: 4px; --pp-bo-3: 8px; --pp-bo-4: 8px; --pp-bo-5: 8px; --pp-bo-tron: 999px; /* ---- 3 mức bóng: tấm nằm trên nền · tấm nổi (panel, thẻ đang kéo) · lớp trên cùng (hộp thoại, menu, thông báo). Hai lớp mỗi mức: lớp sát định hình cạnh, lớp toả nói độ cao. ---- */ --pp-bong-1: 0 1px 2px rgb(30 34 34 / 6%), 0 2px 6px rgb(30 34 34 / 5%); --pp-bong-2: 0 2px 8px rgb(30 34 34 / 8%), 0 10px 24px rgb(30 34 34 / 8%); --pp-bong-3: 0 6px 16px rgb(30 34 34 / 10%), 0 28px 60px rgb(30 34 34 / 18%); /* * ---- Hiệu ứng: 150 / 200 ms + một đường cong chung ---- * * --pp-nhip-1 150ms rê chuột, đổi màu, menu mở, màn tối sau hộp thoại, thông báo ra * --pp-nhip-2 200ms hộp thoại / thông báo vào, mở - khép một vùng * --pp-nhip-bam 100ms CHỈ cú bấm (lún, co, nền bấm): thứ bấm trăm lần một ngày phải trả * lời nhanh hơn cú rê, nếu không ngón tay đi trước con mắt. * --pp-em ra mạnh ở đầu, êm ở cuối: mọi thứ vào / ra / đổi màu * --pp-em-di thứ DI CHUYỂN trên màn (lún, trượt) * Giảm chuyển động (`prefers-reduced-motion`): `components.css` bỏ di chuyển, giữ đổi màu. */ --pp-nhip-bam: 100ms; --pp-nhip-1: 150ms; --pp-nhip-2: 200ms; --pp-em: cubic-bezier(0.23, 1, 0.32, 1); --pp-em-di: cubic-bezier(0.32, 0.72, 0, 1); /* Gói transition của cú BẤM - CSS không cộng dồn hai khai `transition`, nên thứ bấm được nào tự khai transition riêng thì phải đặt gói này vào cùng danh sách. */ --pp-tr-bam: transform var(--pp-nhip-bam) var(--pp-em-di), box-shadow var(--pp-nhip-bam) var(--pp-em-di), scale var(--pp-nhip-bam) var(--pp-em-di), opacity var(--pp-nhip-bam) linear; /* Dáng "trước khi có mặt" của hộp thoại, menu và thông báo (`@starting-style`). */ --pp-vao: scale(0.97) translateY(8px); --pp-vao-menu: scale(0.97); --pp-vao-bao: translateY(12px); /* Giãn chữ cho CHỮ HOA nhỏ (nhãn nhóm trong menu, đầu bảng). */ --pp-gian-hoa: 0.04em; /* Vòng chọn bằng phím: bề dày + khoảng cách ra khỏi mép. */ --pp-vong-day: 2px; --pp-vong-cach: 2px; /* * ---- NÚT: một bộ biến cho `.pp-btn` VÀ cho họ nút riêng của từng app ---- * * App không viết lại dáng nút: họ nút cũ của nó (`.nut`, `.btn`...) chỉ được đọc các biến * này. Nhờ vậy nút Lưu của Planogram và nút Tạo sản phẩm của sku.petpet là cùng một cái nút. * * Hình khối: mặt + viền 1px + BỆ đặc 2px dưới đáy (keycap). Bấm thì mặt lún đúng 2px và bệ * tắt, như bấm một phím thật. Bệ là `box-shadow` nên không đụng bố cục. */ --pp-nut-cao: 32px; --pp-nut-cao-nho: 26px; --pp-nut-dem: 13px; --pp-nut-dem-nho: 10px; --pp-nut-co: var(--pp-co-3); --pp-nut-co-nho: var(--pp-co-2); --pp-nut-dam: var(--pp-dam-3); --pp-nut-bo: var(--pp-bo-3); --pp-be: 2px; --pp-co-nhan: 0.97; --pp-mo-khoa: 0.45; /* phụ (mặc định) */ --pp-nut-nen: var(--pp-mat); --pp-nut-chu: var(--pp-muc); --pp-nut-vien: var(--pp-ke); --pp-nut-be: var(--pp-ke-dam); --pp-nut-re: var(--pp-re); --pp-nut-re-vien: var(--pp-dam); --pp-nut-bam: var(--pp-bam); /* chính (vàng): MỘT nút chốt cho mỗi vùng */ --pp-chinh-nen: var(--pp-vang); --pp-chinh-chu: var(--pp-tren-vang); --pp-chinh-vien: var(--pp-vang); --pp-chinh-be: var(--pp-vang-dam); --pp-chinh-re: var(--pp-vang-re); --pp-chinh-bam: var(--pp-vang-dam); /* nhẹ: không nền, không viền, không bệ - rê / bấm tím nhạt, bấm thì co lại */ --pp-nhe-chu: var(--pp-chu-phu); --pp-nhe-chu-re: var(--pp-muc); --pp-nhe-re: var(--pp-tim-re); --pp-nhe-bam: var(--pp-tim-bam); /* xoá: chữ đỏ trên mặt giấy (thanh công cụ); bản ĐẶC chỉ trong hộp xác nhận */ --pp-xoa-chu: var(--pp-do-chu); --pp-xoa-vien: var(--pp-do-ke); --pp-xoa-re: var(--pp-do-nen); --pp-xoa-re-vien: var(--pp-do); --pp-xoa-bam: color-mix(in srgb, var(--pp-do) 16%, var(--pp-mat)); --pp-xoa-dac: var(--pp-do-dac); --pp-xoa-dac-be: color-mix(in srgb, var(--pp-do-dac) 70%, #000); --pp-xoa-dac-re: color-mix(in srgb, var(--pp-do-dac) 92%, #000); --pp-xoa-dac-bam: color-mix(in srgb, var(--pp-do-dac) 86%, #000); /* Nút vuông (chỉ icon): vuông theo đúng chiều cao nút. */ --pp-nut-vuong: var(--pp-nut-cao); --pp-nut-vuong-nho: var(--pp-nut-cao-nho); /* Vòng xoay "đang chạy" trên nút: cỡ theo chữ, nét 2px, một vòng 0,7 giây. */ --pp-xoay-co: 12px; --pp-xoay-net: 2px; --pp-xoay-nhip: 700ms; /* Độ lún khi bấm = đúng bề cao bệ. Tách token để chế độ giảm chuyển động đặt về 0. */ --pp-lun: var(--pp-be); /* ---- CHIP: viên thuốc, cao bằng nút nhỏ ---- */ --pp-chip-cao: 26px; --pp-chip-dem: 11px; --pp-chip-co: var(--pp-co-3); --pp-chip-nen: var(--pp-mat); --pp-chip-chu: var(--pp-chu-phu); --pp-chip-vien: var(--pp-ke); /* ---- Ô NHẬP + Ô CHỌN ---- */ --pp-o-cao: 32px; --pp-o-cao-nho: 26px; --pp-o-dem: 10px; --pp-o-nen: var(--pp-mat); --pp-o-chu: var(--pp-muc); --pp-o-goi: var(--pp-chu-mo); --pp-o-vien: var(--pp-vien-o); --pp-o-bo: var(--pp-bo-3); --pp-o-mui-co: 12px; --pp-o-mui-cho: 28px; /* Mũi tên ô chọn: SVG nét than; theme tối khai lại màu nét. */ --pp-o-mui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23575c5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* ---- HỘP THOẠI ---- */ --pp-hop-nen: var(--pp-mat); --pp-hop-chan: var(--pp-mat-2); --pp-hop-bo: var(--pp-bo-5); --pp-hop-bong: var(--pp-bong-3); --pp-hop-rong: 460px; --pp-hop-dem: 20px; --pp-hop-cao: 90vh; /* Đầu hộp: mặc định cùng mặt giấy. App nào có khung tối (Planogram) đè hai biến này. */ --pp-hop-dau-nen: var(--pp-mat); --pp-hop-dau-chu: var(--pp-muc); /* ---- THÔNG BÁO GÓC: mặt than, chữ trắng, nút hành động chữ vàng ---- */ --pp-bao-nen: var(--pp-thanh); --pp-bao-chu: var(--pp-tren-thanh); --pp-bao-nut: var(--pp-vang); --pp-bao-loi: var(--pp-do-dac); --pp-bao-bo: var(--pp-bo-4); --pp-bao-rong: 420px; /* ---- MENU (chuột phải, ⋯) ---- */ --pp-menu-nen: var(--pp-mat); --pp-menu-vien: var(--pp-ke); --pp-menu-bo: var(--pp-bo-4); --pp-menu-muc-cao: var(--pp-nut-cao); --pp-menu-rong: 220px; /* ---- KÍNH MỜ .5 trên thẻ (sku.petpet: anh chốt độ đục <= .55, nền xám không pha màu) ---- */ --pp-kinh: rgb(255 255 255 / 50%); --pp-kinh-vien: rgb(65 69 69 / 12%); --pp-kinh-mo: 12px; /* * ========================================================================================== * v2 (06/10/2026): KHUNG "VÀNG LÀM KHE" - anh Quang chốt biến thể D * ========================================================================================== * * Màn TỔNG QUAN (Hôm nay, AURA, Tổng quát): khung vàng, thẻ trắng xếp cách nhau đúng một khe * 10px. Vàng chỉ lộ ở thanh trên và ở khe, khoảng 15% mặt màn: đủ thấy PETPET, không chói. * Màn LÀM VIỆC (lưới SKU, sơ đồ kệ, bảng): MỘT tờ trắng lớn trong cùng khung đó. * Theme tối: khung than, thanh trên tối, chữ PETPET vàng, tab đang mở vàng (biến thể B). * Luật cũ 17/09 "nền xám trung tính, không pha màu" được thay bằng luật này. */ --pp-khung: var(--pp-vang); --pp-tren-khung: var(--pp-tren-vang); --pp-khe: 10px; --pp-le: 12px; /* Thanh trên: nằm thẳng trên khung (sáng) hoặc là một dải tối (tối). */ --pp-dau-cao: 60px; --pp-dau-dem: 28px; --pp-dau-nen: transparent; /* Thanh trên DÍNH (màn cuộn cả trang) cần nền đặc: vàng (sáng), than (tối). */ --pp-dau-nen-dac: var(--pp-vang); --pp-dau-ten: var(--pp-tren-vang); --pp-dau-app-chu: var(--pp-tren-vang); --pp-co-logo: 22px; /* Logo THÚ CƯNG PETPET (30/10, tệp SVG / PNG của Marketing nằm trong bộ: petpet-chu.svg, petpet-ngang.svg...). CHỈ hai màu: than trên nền sáng / vàng, vàng trên nền tối (kiem.mjs giữ luật này ở cả hai theme). Thanh trên: bản chữ cao 20px cạnh tên app. Bản chữ không dưới 16px, bản ngang không hẹp hơn 100px (cao 37px). */ --pp-logo: var(--pp-than); --pp-logo-cao: 20px; --pp-dau-logo-cao: 20px; --pp-tab-cao: 36px; --pp-tab-dem: 14px; --pp-tab-chu: var(--pp-tren-vang); --pp-tab-re: rgb(255 255 255 / 40%); --pp-tab-bam: rgb(255 255 255 / 65%); --pp-tab-on: var(--pp-xam-1); --pp-tren-tab-on: var(--pp-muc); /* Ảnh đại diện ở góc thanh trên: than chữ vàng trên khung vàng; theme tối đảo lại. */ --pp-dau-avatar-nen: var(--pp-than); --pp-dau-avatar-chu: var(--pp-vang); /* Thẻ: mặt trắng bo 8 nằm trên khung; ô / thẻ việc BÊN TRONG thẻ cũng bo 8 trên nền lót (27/10: bo góc 3 mức, trước là 16 / 12). */ --pp-the-nen: var(--pp-mat); --pp-the-bo: var(--pp-bo-5); --pp-the-bo-trong: var(--pp-bo-4); --pp-the-dem-doc: 20px; --pp-the-dem-ngang: var(--pp-k-5); --pp-the-lot: var(--pp-xam-3); /* Màn tổng quan 2 cột lệch: cột chính 1,6 phần, cột phụ 1 phần. */ --pp-ti-chinh: 1.6fr; /* Thẻ tối ("Đêm qua máy đã làm"): than + số vàng. Cùng cặp với chip "quan trọng". */ --pp-the-toi: var(--pp-thanh); --pp-tren-the-toi: var(--pp-tren-thanh); --pp-qt-nen: var(--pp-thanh); --pp-qt-chu: var(--pp-vang); /* Bảng ở màn làm việc: đầu bảng vàng nhạt, dòng rê xám, dòng đang chọn vàng đậm hơn đầu bảng. */ --pp-bang-dau: #fff4c2; --pp-bang-dong-cao: 32px; --pp-dong-re: var(--pp-re); --pp-dong-chon: color-mix(in srgb, var(--pp-vang) 40%, var(--pp-mat)); --pp-dong-tre: color-mix(in srgb, var(--pp-do) 6%, var(--pp-mat)); /* Chữ HIỂN THỊ: chỉ tiêu đề màn tổng quan và số lớn. Mona Sans rộng 112%, đậm 850. */ --pp-co-8: 32px; --pp-co-9: 40px; --pp-co-10: 60px; --pp-dam-5: 800; --pp-dam-6: 850; --pp-dong-0: 1; --pp-rong-hien: 112%; --pp-gian-hien: -0.02em; --pp-gian-logo: -0.01em; --pp-gian-mat: 0.08em; /* Viên đếm (số việc trên tab, chuông). */ --pp-dem-cao: 18px; --pp-dem-dem: 6px; /* Ảnh đại diện tròn: người làm việc trên thẻ. */ --pp-avatar: 24px; --pp-avatar-to: 32px; /* Nhóm phân đoạn (Bảng / Squad / Danh sách / Lịch). */ --pp-doan-cao: 34px; /* Thanh tiến trình (nhập Excel, đồng bộ): ray than, phần chạy vàng (6,9:1; vàng trên nền lót chỉ 1,29:1). */ --pp-tien-trinh-cao: 8px; --pp-tien-trinh-ray: var(--pp-than); /* Viền đứt "từ ngoài vào" (Master Data gửi sang AURA). 27/10: viên đồng bộ Sapo thôi viền đứt (trung tính + icon). */ --pp-vien-dut: 1.5px; /* * ---- CHUYỂN ĐỘNG v2: thêm nhịp dài, so le, cú nảy ---- * --pp-nhip-3 280ms đổi trang, thẻ vào màn, ngăn bên trượt vào * --pp-nhip-dai 900ms vệt xanh "đã lưu" mờ dần * --pp-nhip-tho 1200ms khung xương đang tải thở chậm * --pp-so-le 30ms thẻ thứ n vào sau thẻ trước 30ms (tối đa 6 nấc) * --pp-em-nay chỉ cho cú ĐÁP: thả thẻ, viên đếm đổi số. Không dùng cho rê, mở, đóng. */ --pp-nhip-3: 280ms; --pp-nhip-dai: 900ms; --pp-nhip-tho: 1200ms; --pp-so-le: 30ms; --pp-em-nay: cubic-bezier(0.34, 1.56, 0.64, 1); /* Dáng "trước khi có mặt": trang mới nhích lên 6px, ngăn bên trượt từ phải 16px. */ --pp-vao-trang: translateY(6px); --pp-vao-ngan: translateX(16px); /* Thẻ bấm được nổi 2px khi rê. Thẻ đang kéo nghiêng 1,5 độ, to 2%. */ --pp-noi: -2px; --pp-keo-xoay: 1.5deg; --pp-keo-co: 1.02; --pp-nay-co: 1.18; --pp-lac: 3px; --pp-tho-mo: 0.55; --pp-mui-xoay: 90deg; /* * ========================================================================================== * v3 (27/10/2026): THÀNH PHẦN CHUNG GIAI ĐOẠN 2 (DESIGN.md Master Data) * ========================================================================================== * Dòng bảng 36px (tuỳ chọn "Thoáng" 44px) cho bảng và lưới kiểu mới; `--pp-bang-dong-cao` (32px) giữ cho bảng cũ * tới khi từng trang chuyển (Giai đoạn 3). Icon vẽ bằng mask: SVG chỉ cho HÌNH, màu là `currentColor` / token * của thành phần, nên một tệp icon đúng ở cả hai theme. */ --pp-dong-cao: 36px; --pp-dong-cao-thoang: 44px; --pp-cham-co: 8px; --pp-ico-co: 14px; --pp-ico-to: 32px; --pp-ico-dong-bo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"); --pp-ico-loi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6.5'/%3E%3Cpath d='M12 17v.01'/%3E%3C/svg%3E"); } /* * ========================================================================================== * THEME TỐI - HAI BẢN GIỐNG HỆT NHAU (kiem.mjs so từng ký tự) * ========================================================================================== * * Bản 1 theo hệ điều hành, trừ khi app đã ghi rõ `data-theme='light'`. Bản 2 theo app. * App CHƯA làm theme tối thì đặt ``: nếu không, máy để chế độ tối * sẽ nhận token tối trong khi CSS riêng của app vẫn sáng (nửa sáng nửa tối). * * Màu thương hiệu (`--pp-vang`, `--pp-tim`, `--pp-do`) không đổi. Chỉ đổi thang xám, các mức * CHỮ của màu (tối thì sáng lên cho đủ tương phản), màu trạng thái, bóng và kính. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --pp-xam-1: #1e2222; --pp-xam-2: #272b2b; --pp-xam-3: #141716; --pp-xam-4: #272c2c; --pp-xam-5: #2f3333; --pp-xam-6: #333838; --pp-xam-7: #454b4b; --pp-xam-8: #707777; --pp-xam-9: #8e9494; --pp-xam-10: #9aa0a0; --pp-xam-11: #c3c7c7; --pp-xam-12: #e6e7e4; --pp-vang-chu: #fed519; --pp-tim-chu: #b266ff; --pp-do-chu: #ff7d55; --pp-dam: var(--pp-xam-12); --pp-tren-dam: #1a1d1d; --pp-thanh: #0d0f0f; --pp-man: rgb(0 0 0 / 62%); --pp-ok: #6fbf74; --pp-ok-nen: #16291a; --pp-ok-ke: #2e4a32; --pp-canh-bao: #e0ae3c; --pp-canh-bao-chu: #e0ae3c; --pp-canh-bao-nen: #2c2410; --pp-canh-bao-ke: #4e3f17; --pp-sapo: #7fb0ea; --pp-sapo-chu: #7fb0ea; --pp-sapo-nen: #16222e; --pp-bong-1: 0 1px 2px rgb(0 0 0 / 50%); --pp-bong-2: 0 2px 8px rgb(0 0 0 / 50%), 0 10px 28px rgb(0 0 0 / 40%); --pp-bong-3: 0 8px 20px rgb(0 0 0 / 55%), 0 30px 70px rgb(0 0 0 / 50%); --pp-o-mui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --pp-kinh: rgb(30 34 34 / 50%); --pp-kinh-vien: rgb(255 255 255 / 10%); --pp-khung: var(--pp-xam-3); --pp-tren-khung: var(--pp-xam-12); --pp-dau-nen: var(--pp-thanh); --pp-dau-nen-dac: var(--pp-thanh); --pp-tien-trinh-ray: var(--pp-xam-7); --pp-dau-ten: var(--pp-vang); --pp-logo: var(--pp-vang); --pp-dau-app-chu: var(--pp-xam-11); --pp-tab-chu: var(--pp-xam-11); --pp-tab-re: rgb(255 255 255 / 10%); --pp-tab-bam: rgb(255 255 255 / 18%); --pp-tab-on: var(--pp-vang); --pp-tren-tab-on: var(--pp-tren-vang); --pp-dau-avatar-nen: var(--pp-vang); --pp-dau-avatar-chu: var(--pp-tren-vang); --pp-the-lot: var(--pp-xam-2); --pp-bang-dau: #2a2717; --pp-dong-chon: color-mix(in srgb, var(--pp-vang) 20%, var(--pp-mat)); --pp-dong-tre: color-mix(in srgb, var(--pp-do) 12%, var(--pp-mat)); } } :root[data-theme='dark'] { color-scheme: dark; --pp-xam-1: #1e2222; --pp-xam-2: #272b2b; --pp-xam-3: #141716; --pp-xam-4: #272c2c; --pp-xam-5: #2f3333; --pp-xam-6: #333838; --pp-xam-7: #454b4b; --pp-xam-8: #707777; --pp-xam-9: #8e9494; --pp-xam-10: #9aa0a0; --pp-xam-11: #c3c7c7; --pp-xam-12: #e6e7e4; --pp-vang-chu: #fed519; --pp-tim-chu: #b266ff; --pp-do-chu: #ff7d55; --pp-dam: var(--pp-xam-12); --pp-tren-dam: #1a1d1d; --pp-thanh: #0d0f0f; --pp-man: rgb(0 0 0 / 62%); --pp-ok: #6fbf74; --pp-ok-nen: #16291a; --pp-ok-ke: #2e4a32; --pp-canh-bao: #e0ae3c; --pp-canh-bao-chu: #e0ae3c; --pp-canh-bao-nen: #2c2410; --pp-canh-bao-ke: #4e3f17; --pp-sapo: #7fb0ea; --pp-sapo-chu: #7fb0ea; --pp-sapo-nen: #16222e; --pp-bong-1: 0 1px 2px rgb(0 0 0 / 50%); --pp-bong-2: 0 2px 8px rgb(0 0 0 / 50%), 0 10px 28px rgb(0 0 0 / 40%); --pp-bong-3: 0 8px 20px rgb(0 0 0 / 55%), 0 30px 70px rgb(0 0 0 / 50%); --pp-o-mui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --pp-kinh: rgb(30 34 34 / 50%); --pp-kinh-vien: rgb(255 255 255 / 10%); --pp-khung: var(--pp-xam-3); --pp-tren-khung: var(--pp-xam-12); --pp-dau-nen: var(--pp-thanh); --pp-dau-nen-dac: var(--pp-thanh); --pp-tien-trinh-ray: var(--pp-xam-7); --pp-dau-ten: var(--pp-vang); --pp-logo: var(--pp-vang); --pp-dau-app-chu: var(--pp-xam-11); --pp-tab-chu: var(--pp-xam-11); --pp-tab-re: rgb(255 255 255 / 10%); --pp-tab-bam: rgb(255 255 255 / 18%); --pp-tab-on: var(--pp-vang); --pp-tren-tab-on: var(--pp-tren-vang); --pp-dau-avatar-nen: var(--pp-vang); --pp-dau-avatar-chu: var(--pp-tren-vang); --pp-the-lot: var(--pp-xam-2); --pp-bang-dau: #2a2717; --pp-dong-chon: color-mix(in srgb, var(--pp-vang) 20%, var(--pp-mat)); --pp-dong-tre: color-mix(in srgb, var(--pp-do) 12%, var(--pp-mat)); }