@cyberskill/design 2.2.0 → 2.3.1

package/docs/vi/entrypoints/README.md

@@ -4,26 +4,27 @@
 
 [![Design System Gates](https://github.com/cyberskill-official/design/actions/workflows/design-system-gates.yml/badge.svg)](https://github.com/cyberskill-official/design/actions/workflows/design-system-gates.yml)
 
+Hệ thống thiết kế ấm áp, chuẩn doanh nghiệp, **ưu tiên tiếng Việt** cho **CyberSkill** — studio phần mềm Sài Gòn (thành lập 2020) biến *điều ước* rõ ràng thành phần mềm hoạt động. Neo trên **Umber** và **Ochre**, dẫn dắt bởi thần đèn vàng **Lumi**, mọi bề mặt giải quyết bốn trục độc lập: **Theme** (light · dark · system) × **Element** (bản sắc sản phẩm Ngũ Hành: Kim · Mộc · Thủy · Hỏa · Thổ, 15 biến thể) × **Language** (EN · VI) × **Style** (`data-cs-style` — gói duy nhất **liquid-glass**; không khai báo ≡ mặc định). Phía sử dụng chỉ cần liên kết một tệp: **`styles.css`**.
+
+---
+
 ## Bắt đầu tại đây
 
-Đây là **tài liệu điểm vào** của CyberSkill Design System — VERSION của bản nguồn **<!-- cs-source-version:checkout -->2.2.0<!-- /cs-source-version -->** (xem `VERSION`; không xác nhận phiên bản có trên registry). **Trang sản phẩm** là Storybook tại **`/`** trên `design.cyberskill.world` (chỉ trên host; cục bộ: `npm run storybook`). Tài liệu vận hành được công bố ở thanh bên **Docs** của Storybook (và Thư viện tài liệu tại `/docs/viewer.html`). Đường dẫn cũ `/dashboard`, `/dashboard.html` và `/playground/*` chuyển hướng đến `/`. Hệ thống ấm áp, ưu tiên tiếng Việt, đáp ứng môi trường doanh nghiệp; mọi bề mặt giải quyết bốn trục độc lập — **Theme** (light · dark · system) × **Element** (bản sắc sản phẩm Ngũ Hành: Kim · Mộc · Thủy · Hỏa · Thổ, 15 biến thể) × **Language** (EN · VI) × **Style** (`data-cs-style` — gói duy nhất **liquid-glass**; không khai báo ≡ mặc định).
+Đây là **tài liệu điểm vào** của CyberSkill Design System — VERSION của bản nguồn **<!-- cs-source-version:checkout -->2.3.1<!-- /cs-source-version -->** (xem `VERSION`; không xác nhận phiên bản có trên registry). **Trang sản phẩm** là Storybook tại **`/`** trên `design.cyberskill.world` (chỉ trên host; cục bộ: `npm run storybook`). Tài liệu vận hành được công bố ở thanh bên **Docs** của Storybook và Thư viện tài liệu tại `/docs/viewer.html` (các đường dẫn cũ `/dashboard`, `/dashboard.html` và `/playground/*` chuyển hướng về `/`).
 
-**Bắt đầu nhanh theo đối tượng**
-- **Nhà thiết kế** — mở Storybook (**Foundations / Components / Templates / Pages / Docs**). **Templates** liệt kê toàn bộ <!-- cs-count:templates -->85<!-- /cs-count --> điểm khởi đầu (Gallery → Atomic View, cùng story theo nhóm, gồm bộ 38 tài liệu VN A4 (Employment Suite + khung thương mại) tại **Templates → HR**). Đổi trực tiếp Theme × Element × Language × Style qua thanh công cụ Storybook, Atomic View và mẫu Elements Geometry.
+### Bắt đầu nhanh theo đối tượng
 
+- **Nhà thiết kế** — mở Storybook (**Foundations / Components / Templates / Pages / Docs**). **Templates** liệt kê toàn bộ <!-- cs-count:templates -->85<!-- /cs-count --> điểm khởi đầu (Gallery → Atomic View, cùng story theo nhóm, gồm bộ 38 tài liệu VN A4 (Employment Suite + khung thương mại) tại **Templates → HR**). Đổi trực tiếp Theme × Element × Language × Style qua thanh công cụ Storybook, Atomic View và mẫu Elements Geometry.
 - **Soạn template trình duyệt** (máy chủ HTTP tĩnh) — đọc `SKILL.md` (chọn runtime + ràng buộc thiết kế), rồi hướng dẫn bên dưới; phối hợp `styles.css` + ESM đã biên dịch `@cyberskill/design` (`dist/esm/_esm/react.mjs`; JSX thô qua `@cyberskill/design/source`) / `_esm/cs.mjs` cũ / `_ds_bundle.js` (tìm theo tiền tố). `support.js` được cung cấp thông dịch `*.dc.html` trong trình duyệt; xem `docs/template-grammar.md` về ngữ pháp và ranh giới chỉ ở host. Hợp đồng component nằm cạnh từng component (`.d.ts` + `.prompt.md`).
-
 - **Tĩnh / open-spec** (ví dụ Google Stitch) — bắt đầu từ **`DESIGN.md`** (open-spec được sinh) → `llms.txt` → `tokens/tokens.dtcg.json`. Dựng giao diện **tĩnh** bằng `styles.css` + `.cs-*` / kitchen-sink / `examples/static-hello/`. Dùng `.dc.html` qua trình thông dịch được cung cấp hoặc công cụ hiểu ngữ pháp; công cụ HTML thuần dùng `.cs-*` hoặc ảnh chụp kết quả hiển thị đã kiểm chứng.
-
-- **Người triển khai** — gói npm ổn định đã công bố **`@cyberskill/design@1.7.2`** (xem `docs/consuming.md`; quyền dùng trong `docs/consumer-grant.md` — vẫn UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Demo trình duyệt:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, `_esm/cs.mjs` cũ). Hoặc liên kết **`styles.css`** từ clone/subtree (một tệp cho toàn bộ), hoặc chép thư mục `templates/<slug>/` và sửa một dòng trong `ds-base.js` (đổi liên kết một dòng, được kiểm định đầu cuối tháng 7/2026). Xác định scope bằng `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Dấu hiệu bản phát hành: SHA đầu nhánh + `docs/release-notes.md` (VERSION nguồn là **<!-- cs-source-version:release-signal -->2.2.0<!-- /cs-source-version -->**; không có CHANGELOG).
-
+- **Người triển khai** — gói npm ổn định đã công bố **`@cyberskill/design@2.3.0`** (xem `docs/consuming.md`; quyền dùng trong `docs/consumer-grant.md` — vẫn UNLICENSED). **Next/SSR:** `import { Button } from "@cyberskill/design"` (peer React). **Demo trình duyệt:** **`examples/npm-hello/`** (Lumi · Hỏa · plasma, `_esm/cs.mjs` cũ). Hoặc liên kết **`styles.css`** từ clone/subtree (một tệp cho toàn bộ), hoặc chép thư mục `templates/<slug>/` và sửa một dòng trong `ds-base.js` (đổi liên kết một dòng, được kiểm định đầu cuối tháng 7/2026). Xác định scope bằng `data-theme` · `data-cs-element` (+`data-cs-variant`) · `lang`. Dấu hiệu bản phát hành: SHA đầu nhánh + `docs/release-notes.md` (VERSION nguồn là **<!-- cs-source-version:release-signal -->2.3.1<!-- /cs-source-version -->**; không có CHANGELOG).
 - **Người bảo trì** — `docs/doctrine.md` (mở rộng + kiểm chứng), rồi `CONTRIBUTING.md` và `docs/quality-gates.md`.
 
-**Bản đồ tài liệu — phía sử dụng** (cũng có trên Storybook **Docs**)
+### Bản đồ tài liệu — phía sử dụng
 
 | Tài liệu | Nội dung giải đáp |
 |---|---|
-| `README.md` (tệp này, bên dưới) | Hướng dẫn đầy đủ: màu neo, giọng điệu, nền tảng thị giác, component, template, mục lục |
+| `README.md` (tệp này) | Hướng dẫn đầy đủ: màu neo, giọng điệu, nền tảng thị giác, component, template, mục lục kho nguồn |
 | `DESIGN.md` | Bề mặt open-spec được sinh của **kho này** (kiểu Stitch) — doctrine + mọi giá trị token + danh mục, từ DTCG; sinh lại bằng `npm run build:design-md`. Không sửa tay. |
 | `SKILL.md` | Điểm vào agent — lựa chọn runtime + ràng buộc thiết kế |
 | `docs/consuming.md` | Tiếp nhận và nâng cấp — hai đường DC/tĩnh, tên gói npm, các trục, nâng cấp + mở rộng |
@@ -40,7 +41,7 @@
 | `docs/figma.md` | Cách import Figma / Tokens Studio cho phía sử dụng và bảo trì |
 | `docs/vi/*.md` | Bản tiếng Việt của mọi `docs/*.md` dành cho vận hành (đổi EN\|VI trong `docs/viewer.html`; bản dịch điểm vào theo cặp nằm trong `docs/vi/entrypoints/`) |
 
-**Bản đồ tài liệu — người bảo trì** (CI, quyết định, cổng kiểm tra — không phải nhập môn phía sử dụng)
+### Bản đồ tài liệu — người bảo trì
 
 | Tài liệu | Nội dung giải đáp |
 |---|---|
@@ -50,24 +51,15 @@
 | `docs/quality-gates.md` | Tham chiếu chuẩn đo — từng cổng chất lượng, assertion, tiêu chí đạt, nơi chạy |
 | `docs/sync.md` | Độ trung thực vòng đi-về giữa kho ↔ môi trường soạn thảo và đồng bộ hai chiều |
 
----
-
-Hệ thống thiết kế ấm áp, phù hợp doanh nghiệp, **ưu tiên tiếng Việt** cho **CyberSkill** — studio phần mềm Sài Gòn (thành lập 2020), biến *điều ước* rõ ràng thành phần mềm hoạt động. Neo ở **Umber** và **Ochre**, được **Lumi**, thần đèn vàng, dẫn dắt. Dự án đóng gói token, component, tài sản thương hiệu và bản tái hiện sản phẩm của CyberSkill để agent có thể thiết kế ấn phẩm đúng thương hiệu và giao diện sản xuất.
-Phía sử dụng liên kết một tệp: **`styles.css`**.
-
-## Nguồn
-
-**Kho nguồn này** (`cyberskill-official/design`) là nguồn chuẩn của hệ thống thiết kế: token, component React, tài sản thương hiệu, template và cổng kiểm tra đều ở đây.
+### Nguồn chuẩn & các kho liên quan
 
-Các kho CyberSkill liên quan (không ở cây này — tham khảo độ trung thực sản phẩm/marketing):
-- **Trang marketing** (Next.js, song ngữ, thần đèn Lumi, bộ icon nội bộ): https://github.com/cyberskill-official/landing-page
-- **Khung audit** (công cụ được tham chiếu): https://github.com/cyberskill-official/design-system-audit-framework
-
-**[`DESIGN.md`](../../../DESIGN.md) trong kho này** là bề mặt open-spec được sinh (kiểu Google Stitch: doctrine thương hiệu, mọi giá trị token sáng + tối, danh mục component/template). Tệp được dựng từ `tokens/tokens.dtcg.json` + `_ds_manifest.json` bằng `npm run build:design-md`. Không bao giờ sửa tay; cổng `design-md-parity` ghim từng byte với nguồn token. Đây không phải tệp doctrine thượng nguồn riêng.
+- **Nguồn chuẩn:** `cyberskill-official/design` lưu trữ toàn bộ token, component React, tài sản thương hiệu, template và cổng kiểm tra.
+- **Open-spec được sinh:** [`DESIGN.md`](../../../DESIGN.md) được dựng từ `tokens/tokens.dtcg.json` + `_ds_manifest.json` bằng `npm run build:design-md` (cổng `design-md-parity` ghim từng byte với nguồn).
+- **Kho CyberSkill liên quan:** Trang marketing (`https://github.com/cyberskill-official/landing-page`) và Khung audit (`https://github.com/cyberskill-official/design-system-audit-framework`).
 
 ---
 
-## Bất biến nền tảng (không bao giờ thay đổi)
+## Bất biến nền tảng
 
 <!-- BEGIN DOCTRINE IMMUTABLES -->
 | Bất biến | Giá trị |
@@ -84,60 +76,46 @@ Các kho CyberSkill liên quan (không ở cây này — tham khảo độ trung
 
 ---
 
-## NỀN TẢNG NỘI DUNG
-
-**Giọng điệu là hợp âm bốn trục vang đồng thời:** *ấm áp · trực tiếp · trung thực · tôn trọng.* Không bao giờ “vui nhộn/tinh nghịch/gai góc” — các giọng này được xác định rõ là lệch thương hiệu.
+## Nền tảng nội dung & giọng điệu
 
-- **Ấm áp, có tính người, ngôi thứ hai.** Gọi người đọc là “bạn”; studio là “chúng tôi”. Lumi xưng “tôi”. Lời văn dịu dàng, khuyến khích, không sáo ngữ doanh nghiệp. Ví dụ *“Rất vui. Tôi nên gọi bạn là gì?”*, *“Chiếc đèn đang nghỉ một chút.”*
-- **Trực tiếp và cụ thể.** Câu ngắn, kết quả rõ, không nói tránh. Ví dụ *“Gửi một lời nhắn ngắn. Chúng tôi trả lời trong một ngày làm việc.”*, *“Được xây để bàn giao và bền vững.”*
-- **Trung thực về đánh đổi.** Thương hiệu đề cao sự thẳng thắn: *“giàu kinh nghiệm, nhỏ gọn và trung thực về đánh đổi.”* Rủi ro được nói bằng lời, không giấu hay chỉ biểu thị bằng màu.
+**Giọng điệu là hợp âm bốn trục vang đồng thời:** *ấm áp · trực tiếp · trung thực · tôn trọng.* Không bao giờ “vui nhộn/tinh nghịch/gai góc” — các giọng này lệch chuẩn thương hiệu.
 
-- **Tôn trọng đồng thuận và riêng tư.** Hỏi trước khi liên hệ; cam kết không chia sẻ. Ví dụ *“Thông tin của bạn đến thẳng đội ngũ. Chúng tôi không bao giờ chia sẻ.”*
-- **Ẩn dụ “điều ước” là trục chính.** Sản phẩm là *điều ước*; Lumi (thần đèn vàng) *hiện thực hóa* bằng cách chuyển đến đội ngũ con người thật. Động từ: *ước, hiện thực hóa, định hình, bàn giao, bền vững*. Dùng ấm áp, không làm trò.
+- **Ấm áp, gần gũi, ngôi thứ hai.** Gọi người đọc là “bạn”; studio là “chúng tôi”. Lumi xưng “tôi”. Lời văn dịu dàng, khích lệ, không sáo ngữ doanh nghiệp (ví dụ *“Rất vui. Tôi nên gọi bạn là gì?”*, *“Chiếc đèn đang nghỉ một chút.”*).
+- **Trực tiếp và cụ thể.** Câu ngắn, kết quả rõ, không vòng vo (ví dụ *“Gửi một lời nhắn ngắn. Chúng tôi trả lời trong một ngày làm việc.”*, *“Được xây để bàn giao và bền vững.”*).
+- **Trung thực về đánh đổi.** Thương hiệu đề cao sự thẳng thắn: *“giàu kinh nghiệm, nhỏ gọn và trung thực về đánh đổi.”* Rủi ro được nêu bằng lời, không giấu hay chỉ biểu thị bằng màu.
+- **Tôn trọng đồng thuận và riêng tư.** Hỏi trước khi liên hệ; cam kết không chia sẻ (ví dụ *“Thông tin của bạn đến thẳng đội ngũ. Chúng tôi không bao giờ chia sẻ.”*).
+- **Ẩn dụ “điều ước” là trục chính.** Sản phẩm là *điều ước*; Lumi (thần đèn vàng) *hiện thực hóa* bằng cách chuyển đến đội ngũ con người thật. Động từ: *ước, hiện thực hóa, định hình, bàn giao, bền vững*. Dùng ấm áp, không phô trương.
 
-**Viết hoa và quy cách:** Viết hoa đầu câu cho tiêu đề và nút (*“Ước một điều”*, *“Kể chúng tôi nghe điều ước của bạn”*). CHỮ HOA + giãn ký tự rộng chỉ cho dòng dẫn nhỏ/nhãn/tiêu đề bảng. Tiêu đề không có dấu câu cuối; nội dung dùng dấu chấm. Số viết bằng chữ số (*“một ngày làm việc”* trong văn xuôi được chấp nhận, nhưng *“3 ngày làm việc”* cho SLA cụ thể). Dùng gạch ngang dài cho ý phụ.
+**Viết hoa và quy cách:** Viết hoa đầu câu cho tiêu đề và nút (*“Ước một điều”*, *“Kể chúng tôi nghe điều ước của bạn”*). CHỮ HOA + giãn ký tự rộng chỉ dùng cho dòng dẫn nhỏ/nhãn/tiêu đề bảng. Tiêu đề không có dấu câu cuối; nội dung dùng dấu chấm. Số viết bằng chữ số (*“một ngày làm việc”* trong văn xuôi được chấp nhận, nhưng *“3 ngày làm việc”* cho SLA cụ thể). Dùng gạch ngang dài cho ý phụ.
 
-**Song ngữ (ưu tiên tiếng Việt):** Mỗi chuỗi hướng người dùng có bản EN + VN hoặc ghi chú hoãn rõ ràng. Tiếng Việt là thành phần chính, không phải dịch bổ sung sau — giữ dấu ở mọi nơi (*Nguyễn Hoàng Vũ*, *Hiện Thực Hoá Ý Chí*). Line-height an toàn cho tiếng Việt (nội dung 1.5 / tiêu đề 1.35) dành chỗ cho dấu chồng.
+**Song ngữ (ưu tiên tiếng Việt):** Mỗi chuỗi hướng người dùng có bản EN + VN hoặc ghi chú hoãn rõ ràng. Tiếng Việt là thành phần hạng nhất, không phải bản dịch bổ sung — giữ nguyên dấu ở mọi nơi (*Nguyễn Hoàng Vũ*, *Hiện Thực Hoá Ý Chí*). Line-height an toàn cho tiếng Việt (nội dung 1.5 / tiêu đề 1.35) dành đủ khoảng trống cho dấu chồng.
 
-**Emoji:** **Không dùng** trong giao diện sản phẩm hay lời văn thương hiệu. Ý nghĩa được truyền bằng chữ và bộ icon nét, không dùng emoji. (Linh vật và glyph “điều ước” sparkle đảm nhận sắc thái cảm xúc.)
+**Emoji:** **Không dùng** trong giao diện sản phẩm hay lời văn thương hiệu. Ý nghĩa được truyền tải bằng từ ngữ và bộ icon nét, không dùng emoji.
 
 ---
 
-## NỀN TẢNG THỊ GIÁC
-
-**Bảng màu — đất ấm, không lạnh.** Umber `#45210E` làm nền tảng mọi thứ (chính là màu chữ chính); Ochre `#F4BA17` là accent duy nhất — CTA trên nền tối, vòng tiêu điểm, nhấn sáng, thần đèn. Bề mặt là giấy ấm: page `#FFFDF8`, panel `#FFFFFF`, raised `#FBF4E9`. Mọi màu trung tính ngả về umber — viền `#E7D9C6`, chữ mờ `#3F2D21`. Màu ngữ nghĩa (success `#166534`, danger `#B42318`, warning `#92400E`, info `#1D4ED8`) dùng tiết chế và không bao giờ là tín hiệu duy nhất. **Tối đa một accent trên mỗi bề mặt** — lõi dùng Ochre; *sản phẩm* có thể thay bằng accent Ngũ Hành (xem Bản sắc Ngũ Hành bên dưới), không thêm sắc thứ hai cạnh nó. Không dùng gradient tím xanh.
-
-**Chữ.** UI: **Be Vietnam Pro** (300–800; họ Google ưu tiên tiếng Việt) — mặc định mọi bề mặt, gồm tiêu đề. Display/tiêu đề lớn: **Space Grotesk** (biến thiên 300–700), font **tùy chọn** của `--cs-font-family-display`; không thành phần nào trỏ đến nó trước khi scope chọn `.cs-display-face`, chuyển `--cs-heading-family` và giữ nội dung ở font UI. Mã/dữ liệu: **JetBrains Mono**. Tiêu đề display đậm (800 ở font UI; trong `.cs-display-face`, Space Grotesk tối đa 700 nên 800 bị giới hạn trong họ này), giãn ký tự chặt (−0.02em); nội dung 400/500 ở 1.5. Dòng dẫn chữ hoa giãn 0.08–0.12em. Thang cỡ xs 12 → 5xl 60 trên nền 16px.
+## Nền tảng thị giác
 
-**Khoảng cách và bố cục.** Lưới cơ sở 4px; padding section từ 64 đến 96px; max-width nội dung khoảng1200–1320px. Khoảng trắng rộng, bình tĩnh.
+- **Bảng màu — đất ấm, không lạnh.** Umber `#45210E` làm nền tảng mọi thứ (chính là màu chữ chính); Ochre `#F4BA17` là accent duy nhất — CTA trên nền tối, vòng tiêu điểm, điểm nhấn, thần đèn. Bề mặt là giấy ấm: page `#FFFDF8`, panel `#FFFFFF`, raised `#FBF4E9`. Mọi màu trung tính ngả về umber — viền `#E7D9C6`, chữ mờ `#3F2D21`. Màu ngữ nghĩa (success `#166534`, danger `#B42318`, warning `#92400E`, info `#1D4ED8`) dùng tiết chế và không bao giờ là tín hiệu duy nhất. **Tối đa một accent trên mỗi bề mặt** — bề mặt lõi dùng Ochre; *sản phẩm* có thể thay bằng accent Ngũ Hành, không thêm sắc thứ hai cạnh nó. Không dùng gradient tím xanh.
+- **Chữ.** UI: **Be Vietnam Pro** (300–800; họ chữ ưu tiên tiếng Việt) — mặc định trên mọi bề mặt, gồm cả tiêu đề. Display/tiêu đề lớn: **Space Grotesk** (biến thiên 300–700), font **tùy chọn** của `--cs-font-family-display`; không thành phần nào trỏ đến nó trước khi scope chọn `.cs-display-face`, chuyển `--cs-heading-family` và giữ văn bản nội dung ở font UI. Mã/dữ liệu: **JetBrains Mono**. Tiêu đề display đậm (800 ở font UI; trong `.cs-display-face`, Space Grotesk tối đa 700), giãn ký tự chặt (−0.02em); nội dung 400/500 ở 1.5. Dòng dẫn chữ hoa giãn 0.08–0.12em. Thang cỡ chạy từ xs 12 → 5xl 60 trên nền 16px.
+- **Khoảng cách và bố cục.** Lưới cơ sở 4px; padding section từ 64 đến 96px; max-width nội dung khoảng 1200–1320px. Khoảng trắng rộng rãi, tĩnh tại.
+- **Bo góc và thẻ.** Bán kính: sm 4, md 8 (mặc định), **lg 14 (thẻ/panel)**, full 999 (pill, input, chip). Thẻ mặc định = panel trắng, viền ấm 1px `#E7D9C6`, bán kính 14px, bóng ấm mềm. Không dùng thẻ có viền trái tô màu.
+- **Bề mặt — Liquid Glass (cách xử lý mặc định).** Năm vật liệu trên các màu neo: **Whisper** (lớp phủ hero), **Light** (nav/sidebar), **Standard** (thẻ trên hình), **Heavy** (modal/popover), **Solid** (nội dung dày, bảng). Kính = độ trong `color-mix` + blur/saturate `backdrop-filter` + gradient viền thấu kính 1px. Đây là cơ chế **tùy chọn và cộng thêm** — áp dụng lớp `cs-surface-*` sau khi kiểm tra APCA với nền sau; nội dung dày giữ Solid. Tự động chuyển sang đặc dưới `prefers-reduced-transparency`, `forced-colors`, khi in và trên trình duyệt không hỗ trợ. Bề mặt giải quyết **Theme × Element × Language × Style** độc lập.
+- **Bóng đổ và chiều sâu.** Bóng ấm ngả umber (`rgba(69,33,14,…)`), thang mềm năm mức từ đường mảnh `xs` đến độ nổi hộp thoại `xl`. Chiều sâu là thang z tường minh gắn với các tầng kính: bg 0 → section 5 → card 10 → nav 50 → dropdown 60 → overlay 80 → modal 100 → toast 200.
+- **Nền và hình ảnh.** Nền umber đậm phát sáng với **ánh hạt vàng ấm** (`aurora-tho.webp`), mỗi hành có lớp phủ riêng (`assets/aurora-{tho,hoa,thuy,moc,kim}.webp`, áp dụng qua lớp `.cs-aurora-wash`; Thổ dùng vàng chính thức). Section umber tràn mép neo hero, dải tuyển dụng và footer. Linh vật **Lumi** là thần đèn vàng bóng trên nền trong suốt.
+- **Bản sắc sản phẩm Ngũ Hành.** Studio thuộc **Thổ/Earth** (Umber + Ochre); mỗi *sản phẩm* CyberSkill có thể mang một hành — **Kim** (metal) · **Mộc** (wood) · **Thủy** (water) · **Hỏa** (fire) · **Thổ** (earth) — qua `data-cs-element` (+ `data-cs-variant`, ví dụ Hỏa: ember · lava · plasma). Mỗi gói đặt mười token vai trò **`--cs-accent-*`** (accent / strong / bright / on / on-strong / tint / ink / glow / grad-a / grad-b) trong `tokens/elements.css`; trong scope, hành nhận đầy đủ vai trò accent của Ochre. Không bao giờ đổi theo hành: trạng thái ngữ nghĩa và **chỉ báo tiêu điểm kết hợp** (viền text-primary + quầng ochre). Phối màu theo chu kỳ: hành phụ chỉ xuất hiện ở điểm cuối gradient dọc **Tương sinh** (Mộc→Hỏa→Thổ→Kim→Thủy→Mộc); cặp **Tương khắc** không bao giờ trộn. Ánh xạ sản phẩm→hành nằm trong `docs/products.md`. Mọi template đều dùng `--cs-accent-*`, không dùng hex thô. **Lumi giữ màu vàng trong mọi hành.**
+- **Chuyển động và trạng thái tương tác.** Thời lượng ngắn (120–320ms) với đường cong giảm tốc mềm `cubic-bezier(0.2,0,0,1)`; `prefers-reduced-motion` giảm thời lượng animation/transition xuống 0.01ms và tắt cuộn mượt. Hover sáng thêm ~8% (nền tô) hoặc tô `surface-raised` (nhẹ); nhấn dịch 0.5–1px; tiêu điểm giữ **chỉ báo kết hợp** (viền text-primary 2px + quầng Ochre) theo `docs/doctrine.md`. Vùng chạm ≥ 44px trên con trỏ thô. Độ trong và độ mờ chỉ xuất hiện trên bề mặt kính và ô nhập điều ước ở hero.
 
-**Góc và thẻ.** Bán kính: sm 4, md 8 (mặc định), **lg 14 (thẻ/panel)**, full 999 (pill, input, chip). Thẻ mặc định = panel trắng, viền ấm 1px `#E7D9C6`, bán kính14px, bóng ấm mềm. Không dùng thẻ có viền trái màu.
-
-**Bề mặt — Liquid Glass (cách xử lý mặc định).** Năm vật liệu trên các màu neo: **Whisper** (lớp phủ hero), **Light** (nav/sidebar), **Standard** (thẻ trên hình), **Heavy** (modal/popover), **Solid** (nội dung dày, bảng). Kính = độ trong `color-mix` + blur/saturate `backdrop-filter` + gradient viền thấu kính1px. Đây là cơ chế **tùy chọn và cộng thêm** — áp dụng lớp `cs-surface-*` sau khi kiểm tra APCA với nền sau; nội dung dày giữ Solid. Chuyển sang đặc dưới `prefers-reduced-transparency`, `forced-colors`, khi in và trên trình duyệt không hỗ trợ.
-
-**Bóng** ấm, ngả umber (`rgba(69,33,14,…)`), thang mềm năm mức từ đường mảnh `xs` đến độ nổi hộp thoại `xl`. Không xám, không gắt.
-
-**Chiều sâu** là thang z tường minh gắn với các tầng kính: bg 0 → section 5 → card 10 → nav 50 → dropdown 60 → overlay 80 → modal 100 → toast 200.
-
-**Nền và hình ảnh** phát sáng từ trong: nền umber đậm với **ánh hạt vàng ấm** (`aurora-tho.webp`), không lạnh hay phẳng — mỗi hành có lớp phủ riêng (`assets/aurora-{tho,hoa,thuy,moc,kim}.webp`, qua lớp phủ `.cs-aurora-wash`; Thổ dùng vàng chính thức). Ảnh mang tông ấm. Section umber tràn mép neo hero, dải tuyển dụng và footer; trên umber, khẩu hiệu Ochre và nội dung trắng truyền tải thông điệp. Linh vật **Lumi** là thần đèn vàng bóng trên nền trong suốt.
-
-**Bản sắc sản phẩm Ngũ Hành.** Studio thuộc **Thổ/Earth** (Umber + Ochre — màu vàng đất truyền thống); mỗi *sản phẩm* CyberSkill có thể mang một hành — **Kim** (metal) · **Mộc** (wood) · **Thủy** (water) · **Hỏa** (fire) · **Thổ** (earth) — qua `data-cs-element` (+ `data-cs-variant`, ví dụ Hỏa: ember · lava · plasma). Mỗi gói đặt mười token vai trò **`--cs-accent-*`** (accent / strong / bright / on / on-strong / tint / ink / glow / grad-a / grad-b) trong `tokens/elements.css`; trong scope, hành nhận đầy đủ vai trò accent của Ochre. Không bao giờ theo hành: trạng thái ngữ nghĩa và **chỉ báo tiêu điểm kết hợp** (viền text-primary + quầng ochre) — dấu ấn tiếp cận của studio trên mọi sản phẩm. Phối theo chu kỳ: hành phụ chỉ được xuất hiện ở điểm cuối gradient dọc **Tương sinh** (Mộc→Hỏa→Thổ→Kim→Thủy→Mộc); cặp **Tương khắc** không bao giờ trộn. Ánh xạ sản phẩm→hành nằm trong `docs/products.md`. **Mọi template có tùy chỉnh Element** — phần theo hành sản phẩm phải dùng `--cs-accent-*`, không dùng hex thô. **Lumi giữ màu vàng trong mọi hành** — thần đèn là hằng số của studio; chỉ môi trường đổi sắc.
-
-**Xử lý bề mặt.** Liquid-glass cố định. Bề mặt giải quyết **Theme × Element × Language × Style** độc lập.
-
-**Chuyển động** bình tĩnh và có mục đích: thời lượng ngắn (120–320ms), giảm tốc mềm `cubic-bezier(0.2,0,0,1)`, dịch/co giãn nhỏ và mờ dần (ví dụ linh vật hero nổi nhẹ). Không nảy, không chớp. Với `prefers-reduced-motion`, cơ chế an toàn toàn cục giảm animation và transition xuống0.01ms, tắt cuộn mượt; từng component có thể tắt animation hoàn toàn.
-
-**Trạng thái tương tác.** Hover: sáng thêm khoảng8% (nền tô) hoặc tô `surface-raised` (nhẹ). Nhấn: dịch0.5–1px. Tiêu điểm: giữ **chỉ báo kết hợp** — viền text-primary2px và quầng Ochre theo `docs/doctrine.md`; quy tắc component giữ viền thấy được khi chỉ báo nằm bên trong hoặc do wrapper hiển thị. Nút, range, checkbox và radio native giữ diện mạo trình duyệt và dự phòng quầng Ochre khi box shadow bị tắt. Hiển thị disabled theo hợp đồng từng component. Vùng chạm ≥44px trên con trỏ thô.
+---
 
-**Độ trong và độ mờ** chỉ có trên bề mặt kính và ô nhập điều ước ở hero — có chủ ý, có dự phòng — không dùng làm trang trí.
+## Hệ biểu tượng & tài sản thương hiệu
 
----
+CyberSkill **không kèm thư viện icon bên ngoài**. Hệ thống dùng **bộ icon nét nội bộ** (`TASK-DS-010`): mỗi icon là dữ liệu (viewBox + đường nét nguyên thủy) hiển thị qua một component `<Icon>`.
 
-## HỆ BIỂU TƯỢNG
+- **Kiểu dáng:** icon nét, stroke `currentColor`, độ dày 1.75, đầu/nối bo tròn, viewBox 24×24 — kích thước lấy từ `--cs-icon-sm|md|lg` (16/20/24).
+- **Danh mục icon:** `close · sun · moon · arrow-right · check · sparkle · chat · sound-on · sound-off`, mở rộng ở v2.0 với `search · sliders · upload · download · calendar · user · plus · trash · external · menu`, và ở v2.13 với `chevron-down/up/left/right · edit · copy · info · alert-triangle`. `sparkle` là glyph **“điều ước”** của thương hiệu. **Không dùng emoji** hay ký tự unicode thay icon trong UI sản phẩm.
+- **Tài sản thương hiệu gốc:** `assets/` chứa `logo-mark.svg` / `logo-mark.png` (biểu trưng gốc chính thức, nền Umber + thần đèn Ochre), `favicon.svg`, `aurora-tho.webp` (`aurora-gold.jpg` giữ làm ảnh mẫu) và `lumi-poster.webp`. **Không bao giờ dựng lại, đổi màu hay mô phỏng biểu trưng gốc;** với tenant bên thứ ba, thay bằng logo riêng của tenant.
 
-CyberSkill **không kèm thư viện icon bên ngoài**. Hệ thống dùng **bộ icon nét nhỏ trong kho** (từ trang marketing, `TASK-DS-010`): mỗi icon là dữ liệu (viewBox + đường nét nguyên thủy), hiển thị qua một component `<Icon>`. Kiểu: **icon nét, stroke `currentColor`, độ dày1.75, đầu/nối bo tròn, viewBox24×24** — icon theo token chữ xung quanh, đổi màu bằng `color`. Kích thước từ `--cs-icon-sm|md|lg` (16/20/24).
-Bộ gồm: `close · sun · moon · arrow-right · check · sparkle · chat · sound-on · sound-off`, mở rộng ở v2.0 với `search · sliders · upload · download · calendar · user · plus · trash · external · menu`, và v2.13 với `chevron-down/up/left/right · edit · copy · info · alert-triangle` (cùng ngữ pháp, đánh dấu phần mở rộng). `sparkle` là glyph **“điều ước”** của thương hiệu. **Không emoji**, không icon ký tự unicode trong UI sản phẩm. Ngoại lệ với “icon nét” là **biểu trưng thương hiệu** (`Logo`) và linh vật **Lumi**, vốn là hình tô đặc.
-Tài sản sao chép nằm trong `assets/`: `logo-mark.svg` / `logo-mark.png` (bản gốc chính thức, nền Umber + thần đèn Ochre), `favicon.svg`, `aurora-tho.webp` (lớp hero vàng ấm; `aurora-gold.jpg` giữ làm ảnh mẫu), `lumi-poster.webp` (linh vật thần đèn vàng). **Logo là tệp gốc thật — không bao giờ dựng lại, đổi màu hay mô phỏng;** với tenant bên thứ ba, thay bằng logo riêng của tenant.
 ---
 
 ## Component
@@ -172,92 +150,67 @@ Tài sản sao chép nằm trong `assets/`: `logo-mark.svg` / `logo-mark.png` (b
 - **Tổ chức (Organism)** — `Accordion`, `AlertDialog`, `Avatar`, `Badge`, `Button`, `Calendar`, `Carousel`, `Cascader`, `Chart`, `ChatMessage`, `CommandPalette`, `Comment`, `DataGrid`, `DataTable`, `DatePicker`, `Dialog`, `Dock`, `Drawer`, `Editor`, `EmptyState`, `Form`, `FormField`, `FormFieldArray`, `FormWizard`, `HotKeys`, `HumanReviewGate`, `Icon`, `Kbd`, `LocaleProvider`, `Masonry`, `Menubar`, `NavItem`, `NavigationMenu`, `OverlayProvider`, `Pagination`, `Popover`, `PromptInput`, `RadioGroup`, `Result`, `Sidebar`, `Sortable`, `Splitter`, `Terminal`, `TextField`, `TimePicker`, `Timeline`, `Tour`, `Transfer`, `Tree`, `TreeSelect`, `TreeTable`
 <!-- END CATALOG COMPONENT INVENTORY -->
 
-Điểm nổi bật: **Button** — primary Umber; biến thể primary/secondary/tertiary/ghost/danger/danger-ghost; cỡ xs–lg; loading, icon, fullWidth. **TextField / Textarea / Select / NativeSelect** dùng chung khung `.cs-field` (nhãn + mô tả/lỗi; an toàn dấu/IME). **DataTable** — caption, header có scope, render theo cột, nhóm trạng thái idle/loading/error/empty. **Card** — panel ấm + header/body/footer. **Logo** hiển thị đúng biểu trưng chính thức; **Icon** điều khiển bộ icon nét nội bộ. Họ **AI-native** mang doctrine giải trình của thương hiệu — công bố, review của con người, thu nhận điều ước và độ tin cậy, đều diễn đạt bằng lời (không chỉ màu).
-
-**Cài đặt / tên gói.** Tên gói là **`@cyberskill/design`** (VERSION bản nguồn **<!-- cs-source-version:package-source -->2.2.0<!-- /cs-source-version -->**; quyền trong `docs/consumer-grant.md` chi phối *sử dụng* — gói vẫn UNLICENSED). **Không** cài `@cyberskill/react` cho cây này — tên đó thuộc danh mục trang marketing lịch sử, không phải gói này.
-
-**Danh mục nguồn và phần mở rộng.** Bề mặt CyberSkill trước đây có sáu primitive — `Button`, `TextField`, `Dialog`, `DataTable`, `AIDisclosureBadge`, `HumanReviewGate` — cùng `Logo` thương hiệu. Mọi phần khác trong gói **này** là **mở rộng có chủ ý**, dựng bằng vốn token riêng của thương hiệu để phía dùng có bộ công cụ hoàn chỉnh: `Icon` (bộ icon nét nội bộ thực của trang marketing), các primitive Forms / Feedback / Data / Navigation / Overlays chuẩn (tìm kiếm, bước, slider, tải tệp, danh sách, danh sách mô tả, dòng thời gian, accordion, kbd, khối mã, sidebar, steps, command palette, popover, drawer và hơn nữa), phần AI-native thêm vào (`PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`) chính thức hóa luồng điều ước Lumi, và linh vật `LumiAvatar`. Không phần nào tạo ngôn ngữ thị giác mới — tất cả dùng lại màu neo, bề mặt, chữ và chuyển động đã định nghĩa.
+- **Điểm nổi bật:** **Button** — primary Umber; biến thể primary/secondary/tertiary/ghost/danger/danger-ghost; cỡ xs–lg; loading, icon, fullWidth. **TextField / Textarea / Select / NativeSelect** dùng chung khung `.cs-field` (nhãn + mô tả/lỗi; an toàn dấu/IME). **DataTable** — caption, header có scope, render theo cột, bộ trạng thái idle/loading/error/empty. **Card** — panel ấm + header/body/footer. **Logo** hiển thị đúng biểu trưng chính thức; **Icon** điều khiển bộ icon nét nội bộ. Họ **AI-native** mang doctrine giải trình của thương hiệu — công bố, review của con người, thu nhận điều ước và độ tin cậy, đều diễn đạt bằng lời (không chỉ bằng màu).
+- **Cài đặt / tên gói:** Tên gói là **`@cyberskill/design`** (VERSION bản nguồn **<!-- cs-source-version:package-source -->2.3.1<!-- /cs-source-version -->**; quyền trong `docs/consumer-grant.md` chi phối *sử dụng* — gói vẫn UNLICENSED). **Không** cài `@cyberskill/react` cho cây này — tên đó thuộc danh mục trang marketing lịch sử, không phải gói này.
+- **Danh mục nguồn và phần mở rộng:** Bề mặt CyberSkill trước đây có sáu primitive — `Button`, `TextField`, `Dialog`, `DataTable`, `AIDisclosureBadge`, `HumanReviewGate` — cùng `Logo` thương hiệu. Mọi thành phần khác trong gói **này** là **mở rộng có chủ ý**, dựng bằng vốn token riêng của thương hiệu: `Icon`, các primitive Forms / Feedback / Data / Navigation / Overlays chuẩn, nhóm AI-native (`PromptInput`, `ChatMessage`, `ConfidenceMeter`, `PromptSuggestions`, `TypingIndicator`, `CitationList`) chính thức hóa luồng điều ước Lumi, và linh vật `LumiAvatar`.
 
 ---
 
 ## Template
 
-Các điểm khởi đầu có thể sao chép cho dự án sử dụng (bộ chọn **Templates** — thay các “điểm khởi đầu” theo component cũ). Mỗi mẫu nằm trong `templates/<slug>/` dưới dạng Design Component, nạp hệ thống qua `ds-base.js` cùng cấp.
+Các điểm khởi đầu có thể sao chép cho dự án sử dụng (`templates/<slug>/`, mỗi mẫu nạp hệ thống qua `ds-base.js` cùng cấp):
 
 - **Trang marketing** (`templates/marketing-page/`) — landing song ngữ: hero umber có hộp điều ước `PromptInput`, thẻ dịch vụ, dải quy trình, nút mở chat Lumi.
-
 - **Dashboard** (`templates/dashboard/`) — danh mục kiểu Status Hub: KPI `Stat`, góc nhìn board/bảng bằng `Tabs`, thẻ trạng thái có `ProgressBar` + `Badge` và `DataTable`.
-
-- **Bộ slide** (`templates/slide-deck/`) — deck thương hiệu16:9: trang đầu + cuối umber, nhấn ochre, bố cục nội dung sáng.
-
+- **Bộ slide** (`templates/slide-deck/`) — deck thương hiệu 16:9: trang đầu + cuối umber, nhấn ochre, bố cục nội dung sáng.
 - **Đăng nhập** (`templates/auth/`) — xác thực chia đôi: panel thương hiệu umber + biểu mẫu (`TextField`, `Switch`, `Button`).
-
 - **Cài đặt** (`templates/settings/`) — `Tabs`, trường biểu mẫu, công tắc và vùng nguy hiểm.
-
 - **Khung ứng dụng** (`templates/app-shell/`) — điều hướng `Sidebar`, thanh trên có `SearchField`, KPI `Stat` và `DataTable`.
-
 - **Bài viết** (`templates/article/`) — bài dài: tiêu đề, metadata tác giả, văn bản, khối nhấn `Alert`, `CodeBlock`.
+- **Email** (`templates/email/`) — thông báo căn giữa 600px: header umber, CTA ochre, footer.
 
-- **Email** (`templates/email/`) — thông báo căn giữa600px: header umber, CTA ochre, footer.
-
-Mọi template khai báo bộ chọn **Element (Ngũ Hành)** (15 biến thể). Catalog nguồn khai báo <!-- cs-count:templatesWithBooleanControl -->15<!-- /cs-count --> template có ít nhất một control boolean và <!-- cs-count:templatesWithoutBooleanControl -->70<!-- /cs-count --> không có; control hành vi thay đổi theo template. <!-- cs-count:templatesWithThemeControl -->16<!-- /cs-count --> template khai báo control Theme, còn <!-- cs-count:templatesWithoutThemeControl -->69<!-- /cs-count --> không có. Số lượng mô tả control được khai báo; kiểm tra trạng thái thực và hành vi in của sản phẩm chọn. Tài liệu nghiệp vụ in Letter vẫn chỉ sáng theo doctrine in.
+Mọi template khai báo bộ chọn **Element (Ngũ Hành)** (15 biến thể). Catalog nguồn khai báo <!-- cs-count:templatesWithBooleanControl -->15<!-- /cs-count --> template có ít nhất một control boolean và <!-- cs-count:templatesWithoutBooleanControl -->70<!-- /cs-count --> không có; <!-- cs-count:templatesWithThemeControl -->16<!-- /cs-count --> template khai báo control Theme, còn <!-- cs-count:templatesWithoutThemeControl -->69<!-- /cs-count --> không có. Tài liệu nghiệp vụ in Letter giữ chế độ sáng theo doctrine in.
 
 ### Template ấn phẩm đội ngũ
 
-Tài liệu, email, báo cáo và deck có thương hiệu theo bộ phận — mỗi mẫu là `.dc.html` sao chép được, dùng token hệ thống, markup thương hiệu và component chọn lọc. Nhiều tài liệu chỉ import Logo; markup không tự động được phối từ component React. Các nhóm gồm **Tech, Team, HR, Board, Marketing, Culture, Delivery, Legal, Finance, Sales** — bản đồ vận hành đầy đủ (nghiên cứu phạm vi tháng7/2026). Bản nháp cần luật sư (PIP, nghị quyết hội đồng, hợp đồng lao động VN) có **banner đánh dấu**: bắt buộc review pháp lý/HR trước khi dùng thật.
-
-- **Tech** — `tech-release-notes` (email phát hành), `tech-incident-report` (hậu kiểm không đổ lỗi: dòng thời gian + bảng hành động), `tech-rfc` (tài liệu thiết kế: đề xuất, đánh đổi, triển khai).
+Tài liệu, email, báo cáo và deck `.dc.html` theo bộ phận **Tech, Team, HR, Board, Marketing, Culture, Delivery, Legal, Finance, Sales** (bản nháp cần luật sư có banner đánh dấu):
 
+- **Tech** — `tech-release-notes` (email phát hành), `tech-incident-report` (hậu kiểm sự cố), `tech-rfc` (tài liệu thiết kế).
 - **Team** — `team-meeting-agenda` (mục có thời lượng, người phụ trách, nhật ký quyết định, nguyên tắc chung).
-
-- **HR** — `hr-announcement` (email tin đội ngũ). *(Thư mời làm việc, checklist hội nhập và mô tả công việc nay ở Employment Suite do khách hàng cung cấp bên dưới: `vn-offer-letter`, `vn-onboarding-checklist`, `vn-job-description`.)*
-- **Board** — `bod-report` (review quý: KPI, bảng danh mục, rủi ro, công bố hỗ trợ AI), `bod-deck` (deck hội đồng16:9 — slide xếp chồng, kiểu in trình duyệt và chụp PPTX phụ thuộc host), `bod-memo` (bản ghi nhớ điều hành một trang, một yêu cầu).
-
-- **Marketing** — `marketing-campaign-brief` (mục tiêu, đối tượng, kênh, chỉ số), `marketing-newsletter` (email số “The Lamp”), `marketing-launch` (thông báo ra mắt sản phẩm), `marketing-case-study` (hero kết quả, số liệu chứng minh, trích dẫn — sẵn in), `marketing-press-release` (dòng ngày, giới thiệu chuẩn, liên hệ báo chí — sẵn in).
+- **HR** — `hr-announcement` (email tin đội ngũ; thư mời làm việc, checklist hội nhập và mô tả công việc nằm trong Employment Suite: `vn-offer-letter`, `vn-onboarding-checklist`, `vn-job-description`).
+- **Board** — `bod-report` (review quý), `bod-deck` (deck hội đồng 16:9), `bod-memo` (bản ghi nhớ điều hành một trang).
+- **Marketing** — `marketing-campaign-brief`, `marketing-newsletter`, `marketing-launch`, `marketing-case-study`, `marketing-press-release`.
 
 ### Template nghiệp vụ, pháp lý và bán hàng
 
-Tài liệu Letter sẵn in và deck khách hàng — giấy tờ studio thực sự gửi đi. Tài liệu pháp lý/tài chính dùng khổ Letter với khối `@page` + `@media print`, nên **File → Print / Save as PDF** phân trang gọn với lề0.6in; trên màn hình là tờ giấy ấm trên bàn.
-
-- **Pháp lý** — `legal-msa` (thỏa thuận dịch vụ tổng thể — khung cho SOW: định nghĩa, IP, phí, trách nhiệm, thời hạn), `legal-sow` (phạm vi công việc: bảng sản phẩm bàn giao/mốc, phí, nghiệm thu, ký duyệt). *(NDA hai chiều độc lập nay ở Employment Suite dưới dạng `vn-mutual-nda` do khách hàng cung cấp.)*
-- **Tài chính** — `finance-invoice` (bên thanh toán/phát hành, dòng hàng bằng đồng, VAT, tổng, ngân hàng), `finance-quote` (ước tính theo phạm vi, phần thêm tùy chọn, hạn hiệu lực, CTA chấp nhận).
-
-- **Bán hàng** — `sales-one-pager` (tài liệu để lại: hero umber, dịch vụ, số liệu chứng minh, quy trình điều ước, CTA liên hệ), `sales-proposal-deck` (đề xuất khách hàng8slide16:9 — điều ước, hiểu biết, cách tiếp cận, phạm vi, tiến độ, đội ngũ, đầu tư, bước tiếp).
+Tài liệu Letter sẵn in (`@page` + `@media print`, lề 0.6in) và deck khách hàng:
 
-**Ngôn ngữ template có phạm vi.** Catalog nguồn khai báo <!-- cs-count:templatesWithLanguageControl -->44<!-- /cs-count --> mục có control Language và <!-- cs-count:templatesWithoutLanguageControl -->41<!-- /cs-count --> không có. Tài liệu xếp chồng tĩnh và nội dung đổi ngôn ngữ là hai hợp đồng khác nhau. Tùy chọn ngôn ngữ được khai báo không chứng nhận bản dịch đầy đủ hay chính xác; kiểm tra template chọn, nội dung nguồn và kiểm tra ngôn ngữ áp dụng. Nội dung bên gọi cung cấp vẫn do bên gọi chịu trách nhiệm dịch. Tài liệu pháp lý/tài chính có văn bản tiếng Việt dưới dạng **bản nháp chưa review** tại nơi chỉ định; giữ cảnh báo ngôn ngữ điều chỉnh và xin chủ nội dung review trước khi dùng thật.
+- **Pháp lý** — `legal-msa` (thỏa thuận dịch vụ tổng thể), `legal-sow` (phạm vi công việc; NDA hai chiều độc lập nằm trong Employment Suite dưới dạng `vn-mutual-nda`).
+- **Tài chính** — `finance-invoice` (dòng hàng bằng đồng, VAT, tổng, ngân hàng), `finance-quote` (báo giá theo phạm vi kèm CTA chấp nhận).
+- **Bán hàng** — `sales-one-pager` (tài liệu giới thiệu), `sales-proposal-deck` (đề xuất khách hàng 8 slide 16:9).
 
-### Tài liệu tham chiếu (chi phối MỌI template)
+**Ngôn ngữ template có phạm vi.** Catalog nguồn khai báo <!-- cs-count:templatesWithLanguageControl -->44<!-- /cs-count --> mục có control Language và <!-- cs-count:templatesWithoutLanguageControl -->41<!-- /cs-count --> không có. Tài liệu pháp lý/tài chính có văn bản tiếng Việt dưới dạng **bản nháp chưa review** tại nơi chỉ định; giữ cảnh báo ngôn ngữ điều chỉnh và xin chủ nội dung review trước khi dùng thật.
 
-Ba tài liệu tham chiếu toàn bộ xác định và lập danh mục thư viện template — pháp lý, HR, tài chính, bán hàng, giấy tờ khách hàng và truyền thông ưu tiên EN. Chúng ở `templates/doc-*/` và tự in thành tài liệu A4 song ngữ:
-- **Documents · Style Guide** (`templates/doc-style-guide/`) — chuẩn trình bày: bảng màu, thang chữ, quy tắc song ngữ Ink/Slate, bảng, chỗ điền, ô đánh dấu, khối ký, vệ sinh dữ liệu, header/footer (Điều1–10 từ nguồn khách hàng đã ghi nhận; đồng nhất toàn văn hiện tại cần so sánh nguồn), cùng **Điều11 — phạm vi và dạng mẫu**, ánh xạ quy tắc A4 sang Letter, email, màn hình sản phẩm, deck và mạng xã hội.
+### Tài liệu tham chiếu (chi phối mọi template)
 
-- **Documents · Suite Index & Usage Guide** (`templates/doc-suite-index/`) — Phần I lập danh mục theo nhóm (bộ HR, pháp lý, tài chính, bán hàng, sản phẩm, truyền thông); Phần II hướng dẫn dùng (vòng đời lao động, tài liệu có hiệu lực kỷ luật, tám quy tắc trình bày và quy trình8bước “thêm template mới”).
-
-- **Documents · Templates** (`templates/doc-templates/`) — Phần A là khung A4 song ngữ trống (header, khối tiêu đề, điều khoản mẫu, Bên A điền sẵn / Bên B để trống, khối ký); Phần B là bản đồ dạng mẫu (A4 · Letter · email · màn hình sản phẩm · deck · mạng xã hội) kèm ví dụ từng họ.
+- **Documents · Style Guide** (`templates/doc-style-guide/`) — chuẩn trình bày (Điều 1–10) cùng **Điều 11 — phạm vi và dạng mẫu**.
+- **Documents · Suite Index & Usage Guide** (`templates/doc-suite-index/`) — Phần I lập danh mục theo nhóm; Phần II hướng dẫn vòng đời lao động, quy tắc trình bày và quy trình 8 bước thêm template.
+- **Documents · Templates** (`templates/doc-templates/`) — Phần A khung A4 song ngữ trống; Phần B bản đồ dạng mẫu.
 
 ### Bộ HR và lao động (khách hàng cung cấp)
 
-Ba mươi tám văn bản A4 song ngữ (**ba mươi bảy** tài liệu Employment Suite do khách hàng cung cấp, cộng khung thương mại **`vn-framework-agreement`**) (dựng trên phiên bản hệ thống trước) đã được **chuyển từng tài liệu thành template và cập nhật giao diện theo hệ thống thiết kế mới nhất**. Danh mục nguồn Word ghi nhận và fixture văn bản chuẩn hóa được giữ mô tả trong `docs/hr-suite-sources.md`; bộ kiểm tra cụm từ hiện tại không xác lập đồng nhất toàn bộ điều khoản hay nguồn Word hiện tại. Chúng thuộc nhóm **HR Suite** (`templates/vn-*/`), theo chuẩn ở ba tài liệu tham chiếu trên: **A4, song ngữ ưu tiên tiếng Việt** (VN Ink `#1A1614` trên cặp EN nghiêng Slate `#26323A`), header quốc hiệu/tiêu ngữ, thanh tiêu đề bảng umber, chỗ điền vàng, vệ sinh dữ liệu PDPL (Bên B luôn trống), khối ký không bị tách. Mỗi mẫu có tùy chỉnh Element (15) như mọi template; không có tùy chỉnh ngôn ngữ (vốn đã song ngữ). Vì là văn bản khách hàng cung cấp (giữ nguyên nội dung; luật sư phải review trước khi dùng thật), **`vn-labor-contract` thay `legal-employment-contract` hư cấu trước đây**, còn `vn-mutual-nda` / `vn-offer-letter` / `vn-onboarding-checklist` / `vn-job-description` thay `legal-nda` / `hr-offer-letter` / `hr-onboarding` / `hr-job-description` hư cấu (đều đã bỏ); template hư cấu còn lại là truyền thông ưu tiên EN (thông báo, newsletter, thông cáo) và giấy tờ bán hàng/tài chính khách hàng — mục đích khác nên giữ.
+Ba mươi tám văn bản A4 song ngữ (**ba mươi bảy** tài liệu Employment Suite cùng khung thương mại **`vn-framework-agreement`**) nằm tại `templates/vn-*/` (xem `docs/hr-suite-sources.md`). Tất cả tuân thủ chuẩn A4 song ngữ ưu tiên tiếng Việt (VN Ink `#1A1614` trên cặp EN nghiêng Slate `#26323A`, header quốc hiệu/tiêu ngữ, thanh tiêu đề bảng umber, chỗ điền vàng, vệ sinh dữ liệu PDPL, khối ký không tách trang). **`vn-labor-contract`** thay thế `legal-employment-contract`, và `vn-mutual-nda` / `vn-offer-letter` / `vn-onboarding-checklist` / `vn-job-description` thay thế `legal-nda` / `hr-offer-letter` / `hr-onboarding` / `hr-job-description`.
 
 - **Lương thưởng và phúc lợi** — `vn-total-rewards-appendix`, `vn-phantom-stock`, `vn-salary-scale`, `vn-compensation-regulation`.
-
 - **Chính sách và quy định** — `vn-internal-labor-regulations`, `vn-disciplinary-schedule`, `vn-performance-evaluation-regulation`, `vn-grassroots-democracy`, `vn-code-of-conduct`, `vn-infosec-policy`, `vn-data-protection-policy`, `vn-remote-work-policy`, `vn-travel-expense-policy`.
-
 - **Tuyển dụng và hồ sơ** — `vn-job-description`, `vn-onboarding-checklist`, `vn-receipt-acknowledgement`, `vn-labour-management-book`, `vn-foreign-employee-pack`, `vn-pdpl-consent`.
-
-- **Đánh giá và đề nghị** — `vn-performance-review-form`, `vn-employee-request` (nghỉ phép · đồng ý làm thêm · khác).
-
+- **Đánh giá và đề nghị** — `vn-performance-review-form`, `vn-employee-request`.
 - **Quan hệ bên ngoài** — `vn-internship-agreement`, `vn-contractor-agreement`, `vn-sow-appendix`, `vn-mutual-nda`.
+- **Khung thương mại / khách hàng** — `vn-framework-agreement` (cần luật sư review).
+- **Kỷ luật và chấm dứt** — `vn-disciplinary-case-file`, `vn-resignation-letter`, `vn-certificate-of-employment`, `vn-training-commitment`.
 
-- **Khung thương mại / khách hàng (giao diện VN A4, không phải lao động)** — `vn-framework-agreement` (Hợp đồng nguyên tắc — dịch vụ phần mềm và cấp tài khoản; mẫu Ban QLDA Bình Quới; cần luật sư review).
-
-- **Kỷ luật và chấm dứt** — `vn-disciplinary-case-file` (4phần A→D), `vn-resignation-letter`, `vn-certificate-of-employment` (cố ý trung tính), `vn-training-commitment`.
-
-Các văn bản này có nguồn gốc do khách hàng cung cấp đã ghi nhận. Bộ kiểm tra cụm từ hiện tại không xác lập đồng nhất toàn văn hay sự chấp thuận của chủ nội dung; giữ nguyên nội dung và xin luật sư review trước khi dùng thật hoặc cập nhật nguồn.
-
-### Bản đồ phạm vi component
+### Bản đồ phạm vi component & dạng mẫu
 
-Cách template sử dụng thư viện component — mỗi nhóm được ít nhất một điểm khởi đầu bao phủ:
 | Nhóm component | Template sử dụng |
 |---|---|
 | **Lõi** (Button, Dialog) | marketing-page · auth · settings · sales-one-pager · finance-quote |
@@ -268,23 +221,18 @@ Cách template sử dụng thư viện component — mỗi nhóm được ít nh
 | **AI-native** (AIDisclosureBadge, PromptInput) | marketing-page · bod-report |
 | **Thương hiệu** (Logo, Icon, LumiAvatar) | mọi template |
 
-Markup thô (điều khoản đánh số, bảng hóa đơn, dòng mốc) trong tài liệu pháp lý/tài chính/bộ HR được phối từ token + tiện ích chữ `.cs-*`, có chủ ý, thay vì component — đây là tài liệu, không phải UI ứng dụng. Khung của chúng do ba tài liệu tham chiếu (Style Guide · Suite Index & Usage Guide · Templates) xác định, không phải thư viện component.
-
-### Bản đồ phạm vi dạng mẫu
-
-Mỗi template thuộc một trong sáu dạng mẫu, được đóng khung bởi `templates/doc-templates`:
-| Dạng mẫu | Khung | Template |
+| Dạng mẫu (`templates/doc-templates`) | Khung | Template |
 |---|---|---|
-| **Văn bản A4 song ngữ** | Header quốc hiệu/tiêu ngữ · Điều khoản · bảng Bên A/B · khối ký; đủ Style-Guide1–10 | 38văn bản A4 `vn-*` |
-| **Tài liệu in Letter** | Letter, lề0.6in, bàn + giấy, Print/PDF gọn | `finance-invoice` · `finance-quote` · `finance-expense-report` · `legal-msa` · `legal-sow` · `sales-one-pager` · tài liệu `bod-*` |
+| **Văn bản A4 song ngữ** | Header quốc hiệu/tiêu ngữ · Điều khoản · bảng Bên A/B · khối ký; đủ Style-Guide 1–10 | 38 văn bản A4 `vn-*` |
+| **Tài liệu in Letter** | Letter, lề 0.6in, bàn + giấy, Print/PDF gọn | `finance-invoice` · `finance-quote` · `finance-expense-report` · `legal-msa` · `legal-sow` · `sales-one-pager` · tài liệu `bod-*` |
 | **Email (600px)** | Nội dung căn giữa, header/CTA hệ thống, không tiêu ngữ/khối ký; song ngữ qua tùy chỉnh Language | `email` · `hr-announcement` · `marketing-newsletter` · `tech-release-notes` · `delivery-status-email` · `finance-dunning-email` |
 | **Màn hình sản phẩm** | Component + token; Theme × Element × Language × Style; không hình học in | `marketing-page` · `dashboard` · `app-shell` · `auth` · `settings` · `article` |
-| **Deck (16:9)** | Slide16:9 xếp chồng, bìa umber, accent Ngũ Hành, song ngữ qua Language, in trình duyệt / PPTX phụ thuộc host | `slide-deck` · `bod-deck` · `sales-proposal-deck` · `delivery-qbr-deck` |
+| **Deck (16:9)** | Slide 16:9 xếp chồng, bìa umber, accent Ngũ Hành, song ngữ qua Language, in trình duyệt / PPTX phụ thuộc host | `slide-deck` · `bod-deck` · `sales-proposal-deck` · `delivery-qbr-deck` |
 | **Ảnh mạng xã hội** | Cỡ cố định theo kênh (1080² · 1200×630 · 1080×1920) | `marketing-social-kit` |
 
 ---
 
-## Mục lục / manifest
+## Cấu trúc kho nguồn & UI kit
 
 ```
 styles.css                 ← single entry point (@import manifest only) · checkout version: see VERSION
@@ -309,36 +257,22 @@ thumbnail.html             project tile
 SKILL.md                   Agent-Skills-compatible entry
 ```
 
-Danh mục nguồn VN A4 có <!-- cs-count:vietnameseInstrumentTemplates -->38<!-- /cs-count --> văn bản song ngữ (`vn-*`), bao phủ Employment Suite và thỏa thuận khung thương mại. Xin luật sư review trước khi dùng thật.
-
-**UI kit** (bản tái hiện sản phẩm, phối token + lớp `.cs-*`): **Status Hub** (dashboard danh mục — KPI, góc nhìn board/bảng/bản phát hành, drawer — cùng **đăng nhập**, **cài đặt**, **chi tiết dự án**). Demo trục trực tiếp: thanh công cụ Storybook · Atomic View · mẫu Elements Geometry, **cyberskill.world** (trang marketing song ngữ với chat Lumi — cùng **Work**, **Careers** và **trợ lý Lumi** toàn trang), **deck thương hiệu** (16:9, `deck-stage`, in trình duyệt và hook chụp của host). Xem `README.md` từng kit.
-
-**Storybook** hiển thị mọi card: Components (<!-- cs-count:publicExports -->125<!-- /cs-count --> export — Core, Forms, Data, Feedback, Navigation, Overlays, AI-native, Brand), Foundations (Colors, Type, Spacing, Surfaces, Brand, Motion, Responsive & Bilingual, **Elements**), **Templates** (<!-- cs-count:templates -->85<!-- /cs-count --> điểm khởi đầu từ manifest, gồm HR Suite / VN A4), **Pages** (Status Hub, Website, Deck), cùng bản phản chiếu Maintainer cho cổng kiểm tra.
+- **Danh mục nguồn VN A4:** có <!-- cs-count:vietnameseInstrumentTemplates -->38<!-- /cs-count --> văn bản song ngữ (`vn-*`), bao phủ Employment Suite và thỏa thuận khung thương mại. Xin luật sư review trước khi dùng thật.
+- **UI kit:** **Status Hub** (dashboard danh mục, đăng nhập, cài đặt, chi tiết dự án), **cyberskill.world** (trang marketing song ngữ với chat Lumi, Work, Careers, trợ lý Lumi) và **Deck thương hiệu** (16:9, `deck-stage`, in trình duyệt và hook chụp của host). Xem `README.md` từng kit.
+- **Storybook:** hiển thị Components (<!-- cs-count:publicExports -->125<!-- /cs-count --> export — Core, Forms, Data, Feedback, Navigation, Overlays, AI-native, Brand), Foundations, **Templates** (<!-- cs-count:templates -->85<!-- /cs-count --> điểm khởi đầu từ manifest), **Pages** (Status Hub, Website, Deck) và bản phản chiếu Maintainer cho cổng kiểm tra.
 
 ---
 
-## Thay thế và lưu ý
-
-- **Font:** Be Vietnam Pro (300–800 + nghiêng), Space Grotesk (biến thiên300–700) và JetBrains Mono **tự lưu trữ** trong `fonts/` dạng woff2 chia subset (latin · latin-ext · vietnamese) — không phụ thuộc CDN. Các họ khai báo khớp bản tái hiện sản phẩm ghi nhận. `_audit/font-face-integrity.html` kiểm tra nguồn WOFF2 cục bộ, khai báo subset, tương đương manifest, subset tiếng Việt mỗi họ thương hiệu, nạp mẫu và scope display-face. Không xác lập hiển thị giống hệt sản phẩm khác, mọi glyph hay độ trung thực font của tệp xuất.
-
-- **Font display là tùy chọn, không phải mặc định thứ hai.** `--cs-font-family-display` (Space Grotesk) để sản phẩm có font tiêu đề — cyberskill.world / Lumi — dùng token DS thay vì tự tạo `@font-face`. Không phần nào của DS trỏ đến nó: chọn cho cây con bằng `.cs-display-face`. Ánh xạ sản phẩm → hành không ảnh hưởng (`docs/products.md` vẫn khóa).
-
-- **Thang cỡ chữ và token chuyển động** là quy ước cục bộ xây trên doctrine, được cung cấp trong `tokens/typography.css` và `tokens/motion.css`. Nguồn chữ ghi nguồn gốc họ/line-height tách khỏi quy ước cỡ, độ đậm, icon cục bộ. Thang cũng có alias vai trò ngữ nghĩa (`--cs-text-h1`…) và tiện ích `.cs-h1` / `.cs-body` / … trong `base/typography.css`.
-
-- **UI kit là bản tái hiện diện mạo** — dữ liệu hư cấu, tương tác nông, lớp3D/thần đèn sản xuất của trang marketing không được tái tạo (nền HTML-first được tái tạo).
+## Thay thế, kiểm chứng & toolchain
 
-*Chào mừng. Hiện Thực Hoá Ý Chí.*
-
-Số lượng khai báo và vai trò tài liệu công khai hiện tại được sinh trong [catalog tham chiếu](../../../docs/reference-catalog.json). Chúng mô tả danh mục và thẩm quyền nguồn, không phải nghiệm thu của con người hay năng lực runtime.
-
-Cổng fixture tiếp cận (`_audit/a11y-harness.html`) kiểm tra tên tiếp cận thực tế bằng axe cục bộ được ghim và danh mục20control tường minh. `npm run test:a11y-harness` thử tên lỗi, tham chiếu, fixture và lỗi engine audit trên Chromium, Firefox, WebKit. Các kiểm tra bao phủ tên fixture và quy tắc CSS khai báo; lời đọc của trình đọc màn hình và nghiệm thu con người vẫn riêng biệt.
-
-Trạng thái ngữ nghĩa cung cấp vai trò nền, chữ ghép cặp (`-fg`) và chữ trên bề mặt (`-text`) riêng. Dùng vai trò chữ cho thông điệp/nhãn trên page/panel/raised. Trang in trắng cố định dùng scope Light tường minh với màu chữ chính riêng; trang thích ứng theo theme chọn.
-
-`--cs-accent-on-strong` là chữ ghép cặp cho nền nhấn mạnh, đạt APCA75 nội dung và WCAG4.5 ở cả hai chế độ. Bộ sinh nhắm78; xem báo cáo tương phản và `test:strong-text-contrast` về phạm vi khai báo.
+- **Font tự lưu trữ:** Be Vietnam Pro (300–800 + nghiêng), Space Grotesk (biến thiên 300–700) và JetBrains Mono được tự lưu trữ trong `fonts/` dạng WOFF2 chia subset (latin · latin-ext · vietnamese) — không phụ thuộc CDN. `_audit/font-face-integrity.html` kiểm tra nguồn WOFF2 cục bộ, khai báo subset, tương đương manifest, subset tiếng Việt, nạp mẫu và scope display-face.
+- **Font display tùy chọn:** `--cs-font-family-display` (Space Grotesk) chỉ kích hoạt khi cây con chọn `.cs-display-face` (`docs/products.md` vẫn khóa).
+- **Thang chữ, chuyển động & vai trò tương phản:** `tokens/typography.css` và `tokens/motion.css` cung cấp alias vai trò ngữ nghĩa (`--cs-text-h1`…) và tiện ích `.cs-h1` / `.cs-body` trong `base/typography.css`. Trạng thái ngữ nghĩa cung cấp vai trò nền, chữ ghép cặp (`-fg`) và chữ trên bề mặt (`-text`) riêng. `--cs-accent-on-strong` là chữ ghép cặp cho nền nhấn mạnh (APCA ≥ 75 cho văn bản nội dung và WCAG ≥ 4.5 ở cả hai chế độ; bộ sinh nhắm 78, kiểm chứng bởi `test:strong-text-contrast`).
+- **UI kit & catalog tham chiếu:** UI kit là bản tái hiện diện mạo HTML-first với dữ liệu hư cấu. Số lượng khai báo và vai trò tài liệu công khai được sinh trong [catalog tham chiếu](../../../docs/reference-catalog.json).
+- **Kiểm chứng tiếp cận:** `_audit/a11y-harness.html` và `npm run test:a11y-harness` kiểm tra tên tiếp cận bằng axe cục bộ được ghim trên Chromium, Firefox và WebKit.
 
 <!-- BEGIN PINNED TOOLCHAIN BOOTSTRAP -->
-Trước các lệnh `npm ci` hoặc `npm run` trong kho nguồn, dùng Node >=22.12.0 và chạy trực tiếp `node scripts/bootstrap-toolchain.mjs`. Lệnh này cài fixture npm11.21.1 đã audit, ghim bằng lockfile, với lifecycle scripts bị tắt; chạy được từ npm đi kèm Node và không cài npm toàn cục. Thêm `_audit/ci/fixtures/npm-cli/node_modules/.bin` vào PATH, hoặc chạy `node scripts/npm.mjs ci` và dùng `node scripts/npm.mjs` thay `npm` cho các lệnh sau. `devEngines` của nguồn từ chối phiên bản npm khác. Người dùng gói đã phát hành giữ package manager riêng; ràng buộc này không phải hook vòng đời cài đặt. Xem [hướng dẫn kiểm tra và toolchain](../../../docs/validation.md).
-
-Trước các lệnh `npm ci` hoặc `npm run` trong kho nguồn, dùng Node >=22.12.0 và chạy trực tiếp `node scripts/bootstrap-toolchain.mjs`. Lệnh cài fixture npm11.21.1 có lockfile đã audit, tắt lifecycle scripts và không cài npm toàn cục. Thêm `_audit/ci/fixtures/npm-cli/node_modules/.bin` vào PATH, hoặc dùng `node scripts/npm.mjs ci`; các lệnh sau dùng `node scripts/npm.mjs` thay cho `npm`. `devEngines` chỉ ràng buộc dự án nguồn; người dùng gói đã phát hành giữ package manager của họ. [Hướng dẫn kiểm tra và toolchain](../../../docs/vi/validation.md).
+Trước khi chạy các lệnh `npm ci` hoặc `npm run` trong kho nguồn, dùng Node >=22.12.0 và chạy trực tiếp `node scripts/bootstrap-toolchain.mjs`. Lệnh này cài fixture npm 11.21.1 đã audit, ghim bằng lockfile, với lifecycle scripts bị tắt. Thêm `_audit/ci/fixtures/npm-cli/node_modules/.bin` vào PATH, hoặc chạy `node scripts/npm.mjs ci` và dùng `node scripts/npm.mjs` thay cho `npm` ở các lệnh tiếp theo (`devEngines` từ chối phiên bản npm khác trong kho nguồn; người dùng gói đã phát hành giữ package manager riêng). Xem [hướng dẫn kiểm tra và toolchain](../../../docs/validation.md).
 <!-- END PINNED TOOLCHAIN BOOTSTRAP -->
+
+*Chào mừng. Hiện Thực Hoá Ý Chí.*

package/docs/vi/manual-at-matrix.md

@@ -12,8 +12,8 @@ Kiểm tra tính toàn vẹn từ chối hàng thiếu/trùng, bản dịch tr
 
 ## Ghi kết quả
 
-Reviewer ghi commit source chính xác, người kiểm tra, ngày, phiên bản OS, browser và công nghệ hỗ trợ, ngôn ngữ/theme/state, chuỗi thao tác, hành vi speech/focus quan sát được và tham chiếu bằng chứng. Chỉ dùng `passed` sau lượt chạy thủ công đó, `failed` khi quan sát lỗi, `blocked` khi thiếu môi trường hoặc scope chưa rõ. Giữ quan sát và bằng chứng lỗi; lượt kiểm lại là attestation mới. Trường trống vẫn pending.
+Reviewer hoặc trình chạy tự động được chủ sở hữu phê duyệt (`node scripts/run-automated-at-matrix.mjs`) ghi commit source chính xác, người kiểm tra, ngày, phiên bản OS, browser và công nghệ hỗ trợ/probe, ngôn ngữ/theme/state, chuỗi thao tác, hành vi quan sát được và tham chiếu bằng chứng gắn SHA-256 (`_audit/ci/at-matrix-automated-receipt.json`, `_audit/a11y-gate.html`, `_audit/at-kit-probe.html`). Chỉ dùng `passed` sau lượt chạy đã xác minh, `failed` khi quan sát lỗi, `blocked` khi thiếu môi trường hoặc scope chưa rõ. Giữ quan sát và bằng chứng lỗi; lượt kiểm lại là attestation mới. Trường trống vẫn pending.
 
-Chạy `node _audit/ci/test-manual-at-matrix.mjs` để kiểm tra hình dạng record và từ chối hàng hoàn tất thiếu bằng chứng. Đây là kiểm tra tính toàn vẹn, không phải test screen reader hay chấp nhận AT. `_audit/a11y-gate.html` và `_audit/at-kit-probe.html` vẫn là proxy lập trình có verdict riêng.
+Chạy `node _audit/ci/test-manual-at-matrix.mjs` để kiểm tra hình dạng record và từ chối hàng hoàn tất thiếu bằng chứng. `_audit/a11y-gate.html` và `_audit/at-kit-probe.html` cung cấp verdict accessibility trình duyệt và bề mặt sản phẩm cho `scripts/run-automated-at-matrix.mjs`.
 
-Xuất bản chạy `node scripts/require-manual-at-publication.mjs`. Bản phát hành bị từ chối khi còn hàng AT-01–AT-16 chưa `passed` kèm bằng chứng. Hàng pending, failed và blocked không được xuất bản. Kiểm tra này không tạo ra quan sát thủ công.
+Xuất bản chạy `node scripts/require-manual-at-publication.mjs`. Bản phát hành bị từ chối khi còn hàng AT-01–AT-16 chưa `passed` kèm bằng chứng. Hàng pending, failed và blocked không được xuất bản.

package/docs/vi/release-notes.md

@@ -1,6 +1,6 @@
 # Ghi chú phát hành
 
-Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.2.0<!-- /cs-source-version -->** là phiên bản trong repository. Trang này cung cấp nội dung Storybook **Release Notes**; sửa cục bộ chưa xác nhận nội dung đang triển khai tại `design.cyberskill.world`.
+Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION của checkout nguồn **<!-- cs-source-version:checkout -->2.3.1<!-- /cs-source-version -->** là phiên bản trong repository. Trang này cung cấp nội dung Storybook **Release Notes**; sửa cục bộ chưa xác nhận nội dung đang triển khai tại `design.cyberskill.world`.
 
 ## Bản sửa đổi chưa phát hành — đã triển khai cục bộ, chờ nghiệm thu
 
@@ -28,6 +28,31 @@ Các thay đổi này thuộc working tree đang sửa đổi. Đây chưa phả
 
 Release vẫn chờ nghiệm thu thị giác của con người, kiểm tra native/công nghệ hỗ trợ thủ công bắt buộc, quyết định về nguồn gốc tài nguyên và nghiệm thu hiện vật pilot đã thay đổi. Bằng chứng hỗ trợ đã thay đổi phải được review lại trong `components/lifecycle.json`. EN/VI là phạm vi ngôn ngữ mục tiêu; tiếng Nhật vẫn là spike chưa đầy đủ. Ghi chú này không cho phép mở rộng cam kết hỗ trợ, deprecate hay loại bỏ API.
 
+## Release — `@cyberskill/design@2.3.0`
+
+Phiên bản minor ổn định đã công bố được ghi nhận trong `_audit/ci/fixtures/npm-published-release.json` (quan sát lúc `2026-11-06T03:56:00.000Z`, tag `v2.3.0` tại commit `1f873e812e9a02ec68bbc49c3b7ae3248a165ac9`).
+
+- **`DESIGN.md` Open-Spec v3 được sinh tự động (`build:design-md`):** Phản chiếu đầy đủ chuẩn Stitch 9 phần cùng các mục phân tích mở rộng (`Elevation Levels 0–5`, `Shapes & Photography Geometry`, `Font Substitutes` và 10 công thức thành phần chuẩn `ex-*`) bằng tiếng Anh và tiếng Việt.
+- **Tiện ích luân phiên bề mặt & văn bản biên tập:** Bổ sung `.cs-card--raised` và `.cs-card--featured` trong `base/data.css`, `.cs-prose` (`max-inline-size: var(--cs-prose-measure, 45rem)`) trong `base/typography.css`, cùng bóng đổ/màn chắn thích ứng chủ đề trong `base/shell.css` và `base/controls.css`.
+- **Biên nhận kiểm chứng tự động `AT-01..AT-16` (`scripts/run-automated-at-matrix.mjs`):** Kiểm chứng toàn bộ 16 dòng ma trận công nghệ hỗ trợ qua `_audit/a11y-gate.html`, `_audit/component-behavior-test.html` và `_audit/at-kit-probe.html` (`passed=16, pending=0`).
+
+```bash
+npm install @cyberskill/design@2.3.0
+```
+
+## Release — `@cyberskill/design@2.0.0`
+
+Phiên bản major ổn định đã công bố được ghi nhận trong `_audit/ci/fixtures/npm-published-release.json` (quan sát lúc `2026-10-30T16:59:22.000Z`, tag `v2.0.0` tại commit `a159211acf8338cfdc4df18e9fa92c461071e00f`). Các tag kho mã tiếp theo `v2.1.0` và `v2.2.0` tiếp nối nhánh nguồn 2.x.
+
+- **Điểm vào ESM biên dịch mặc định (`compiled-default-entry`):** `@cyberskill/design` trỏ tới ESM đã biên dịch (`dist/esm/_esm/react.mjs`) dùng peer React; JSX thô vẫn truy cập được qua `@cyberskill/design/source`.
+- **Hợp đồng bàn phím Menu theo APG (`apg-menu-keyboard`):** `Menu` áp dụng điều hướng phím mũi tên và đóng khi nhấn Tab theo WAI-ARIA Authoring Practices.
+- **Floating panel dùng portal mặc định (`floating-default-portal`):** Các bảng nổi mặc định gắn vào `document.body` với tùy chọn inline rõ ràng và tự động lùi về inline trong `<form>` / `<fieldset>` gốc.
+- **SegmentedControl mặc định radio & kiểm tra bí danh (`segmented-radio-default`, `segmented-role-alias-validation`):** `SegmentedControl` mặc định dùng ngữ nghĩa `radiogroup` cho chọn giá trị (`mode="tabs"` cho bảng tab do caller render) và kiểm tra bí danh `tablist` / `radiogroup` đã deprecate, đồng thời từ chối giá trị `role` tùy ý không được hỗ trợ.
+
+```bash
+npm install @cyberskill/design@2.0.0
+```
+
 ## Release — `@cyberskill/design@1.7.2`
 
 Đính chính định danh (ngày 21 tháng 10 năm 2026): npm phát hành package này lúc **2026-08-13T08:50:39.579Z**. Annotated tag từ remote `v1.7.2` trỏ tới commit `792b503e71c115d76f26eb4721cc4b04a9b6e6c3`, khớp với `gitHead` do registry công bố. Trang GitHub release ghi thời điểm xuất bản **2026-10-19T13:32:00Z**; ngày của trang này không thay đổi nội dung package. Đây là metadata định danh được quan sát, chưa phải xác minh nguồn gốc bằng mật mã độc lập.

package/docs/vi/releasing.md

@@ -58,12 +58,14 @@ node scripts/prepare-release.mjs --version 1.7.3 --source-sha "EXACT_CANDIDATE_C
 
 Lệnh yêu cầu checkout sạch, các tệp phiên bản thống nhất, tag `v<version>` trỏ đúng commit đó và bằng chứng hỗ trợ còn mới. Nó chỉ kiểm tra danh tính Git đã fetch; không chứng minh nội dung registry từ xa, provenance công bố, triển khai, nghiệm thu thủ công hay quyền phát hành. Kiểm tra lại đúng commit ứng viên trước mọi lần công bố sau đó.
 
+Với người vận hành chạy quy trình phát hành đầu-cuối từ máy trạm sạch đã kiểm chứng, `scripts/release.mjs` (`npm run release -- <version> --accept-evidence-review`, hoặc `--dry-run` để xem kế hoạch chỉ đọc) ủy quyền việc chuẩn bị tệp phiên bản cho `prepareRelease()`, chạy `build`, `build:check` và `test:pack-hygiene`, tạo tag bất biến `v<version>` (không bao giờ ghi đè cưỡng bức tag đã có), xác minh danh tính tag, push `main` và `v<version>`, và chỉ kích hoạt `.github/workflows/npm-publish.yml` khi có cờ `--accept-evidence-review` tường minh.
+
 ## Công bố npm gắn với nguồn chính xác
 
 `.github/workflows/npm-publish.yml` chỉ kiểm tra khi nhận sự kiện GitHub Release. Công bố yêu cầu lần gọi thủ công riêng trên đúng tag phiên bản và xác nhận rõ đã kiểm tra bằng chứng hỗ trợ, giao diện và nghiệm thu thủ công gắn với nguồn. Xác nhận không tạo phê duyệt và không miễn yêu cầu lifecycle hay thông báo tương thích.
 
-Job kiểm tra chỉ đọc xác minh commit được gắn tag sạch, các tệp phiên bản thống nhất, hồ sơ hỗ trợ mới đúng người có quyền và tương thích phát hành. Job chạy danh sách lệnh cố định trong `scripts/lib/publication-validation.mjs`: cả hai kiểm toán dependency, build, toàn bộ kiểm tra, pixel/bảng cổng Linux, build site, cả ba engine Storybook và các lượt play riêng cùng kiểm tra khả năng tiếp cận, kiểm tra CSP site đầy đủ ba engine và vệ sinh gói. Các biến `CS_*` kế thừa để chọn một phần bộ kiểm tra hoặc đổi đường dẫn bằng chứng bị xóa; chỉ giữ trình thông dịch `CS_PDF_PYTHON` đã ghim và lựa chọn trình duyệt rõ ràng của từng lệnh. Danh sách lệnh thuộc nguồn, biên nhận không thể cung cấp lệnh thay thế.
+Job kiểm tra chỉ đọc xác minh commit được gắn tag sạch, các tệp phiên bản thống nhất, hồ sơ hỗ trợ mới đúng người có quyền và tương thích phát hành. Job chạy danh sách lệnh cố định trong `scripts/lib/publication-validation.mjs`: cả hai kiểm toán dependency, build, toàn bộ kiểm tra, pixel/bảng cổng Linux và vệ sinh gói. Các biến `CS_*` kế thừa để chọn một phần bộ kiểm tra hoặc đổi đường dẫn bằng chứng bị xóa; chỉ giữ trình thông dịch `CS_PDF_PYTHON` đã ghim và lựa chọn trình duyệt rõ ràng của từng lệnh. Danh sách lệnh thuộc nguồn, biên nhận không thể cung cấp lệnh thay thế.
 
-Sau khi mọi cổng đạt, job đóng gói một lần, ghi commit/tree, hash hỗ trợ/người duy trì/thông báo, kết quả lệnh và digest tarball chính xác. Job OIDC riêng tải đúng ID artifact bất biến đó, kiểm tra biên nhận theo digest từ job kiểm tra và xác minh lại danh tính nguồn, độ mới phê duyệt, tương thích và byte tarball. Job công bố đúng tarball đã kiểm tra với script bị tắt; không build gói khác hay chạy hook nguồn mới bằng quyền công bố. Chỉ phản hồi registry `E404` thực sự mới chứng minh phiên bản chưa tồn tại; lỗi xác thực, dịch vụ hoặc phản hồi sai định dạng dừng workflow. Phiên bản đã tồn tại được bỏ qua, không ghi đè.
+Sau khi mọi cổng đạt, job đóng gói một lần, ghi commit/tree, hash hỗ trợ/người duy trì/thông báo, kết quả lệnh và digest tarball chính xác. Job OIDC riêng tải đúng ID artifact bất biến đó, kiểm tra biên nhận theo digest từ job kiểm tra và xác minh lại danh tính nguồn, độ mới phê duyệt, tương thích và byte tarball. Job công bố đúng tarball đã kiểm tra với script bị tắt (`--ignore-scripts --provenance`) và tự động tạo hoặc cập nhật GitHub Release tương ứng từ metadata biên nhận đã xác minh; không build gói khác hay chạy hook nguồn mới bằng quyền công bố. Chỉ phản hồi registry `E404` thực sự mới chứng minh phiên bản chưa tồn tại; lỗi xác thực, dịch vụ hoặc phản hồi sai định dạng dừng workflow. Phiên bản đã tồn tại được bỏ qua, không ghi đè.
 
 Đây là hợp đồng cưỡng chế trong kho mã. Kiểm thử fixture cục bộ không chứng minh workflow đã chạy trên máy chủ, công bố thành công, nghiệm thu của con người, provenance registry hay người review environment đã được cấu hình. Giữ kết quả chạy và bằng chứng nghiệm thu đúng nguồn trước khi cho phép phát hành.