diff --git a/.claude/agents/ba-gate-auditor.md b/.claude/agents/ba-gate-auditor.md
index 098e9e5..c279715 100644
--- a/.claude/agents/ba-gate-auditor.md
+++ b/.claude/agents/ba-gate-auditor.md
@@ -20,8 +20,9 @@ Bạn là **kiểm toán viên độc lập** của quy trình BA. Bạn **khôn
    - ☐ chưa bắt đầu.
    **Đừng suy ra trạng thái từ tên file** — mở file, đọc `Status` và kiểm mục bắt buộc có nội dung thật.
 3. **Blocker:** gate thấp nhất chưa ✅ là vị trí hiện tại. Blocker cứng (artifact thiếu/chưa ký), blocker mềm (`OQ` chưa trả lời, `CR` chưa quyết, `RISK` cao chưa có phương án). Grep `OQ-[0-9]|TBD|TODO|❓`; `OQ` quá 5 ngày làm việc (so với ngày trong prompt) ⇒ quá hạn, nêu người phải trả lời.
-4. **Traceability (ba-traceability):** trích ID từ mọi artifact; chạy 6 phép kiểm coverage (RQ→US, US→AC, AC→test case, BR→AC/test, US không có nguồn = scope creep, RQ không có US) và 6 phép kiểm nhất quán (tham chiếu gãy/version lệch, ràng buộc SRS↔API, mã lỗi SRS↔API, trạng thái BR↔SRS/RBAC, **thành phần SRS↔WF hai chiều** và **quy ước SRS↔UICONV** — hai phép cuối chỉ khi `PRODUCT = screen`). Báo **con số** (VD "RQ→US 18/20 = 90%", "C-id lệch: C07 chỉ có trong WF") và danh sách ID lệch. Theo skill, coverage thiếu có quyền **chặn G2, G3, G4** — ghi rõ kết luận chặn.
+4. **Traceability (ba-traceability):** trích ID từ mọi artifact; chạy 6 phép kiểm coverage (RQ→US, US→AC, AC→test case, BR→AC/test, US không có nguồn = scope creep, RQ không có US) và 6 phép kiểm nhất quán (tham chiếu gãy/version lệch, ràng buộc SRS↔API, mã lỗi SRS↔API, trạng thái BR↔SRS/RBAC, **thành phần SRS↔WF↔HIFI hai chiều**, **quy ước SRS↔UICONV**, **text HIFI↔SRS §4.2** và **token HIFI/SVG↔DS** — bốn phép cuối chỉ khi `PRODUCT = screen`, hai phép cuối chỉ khi đã có artifact của `ba-design`). Báo **con số** (VD "RQ→US 18/20 = 90%", "C-id lệch: C07 chỉ có trong WF") và danh sách ID lệch. Theo skill, coverage thiếu có quyền **chặn G2, G3, G4** — ghi rõ kết luận chặn.
    Với `screen` ở G3 còn phải mở `00-index/UICONV_*.md` (tồn tại? còn ô "chọn một" chưa chọn? có chữ ký Designer hoặc DEC "không có Designer"?) và `03-specification/WF_*.md` (phủ mọi SCR của SRS? §5 có điền không? còn dòng Tồn tại/Hành vi ☐ không? chế độ 🎨 hay ✏️, ✏️ đã có Designer ký chưa?). WF thiếu §5 ⇒ báo "chưa đối chiếu prototype", **không** báo "không lệch".
+   Ba dòng *(screen · design)* của G3 (`standard`+): mở `00-index/DS_*.md` (§0 độ tin cậy, §6 tương phản có số, chữ ký), `03-specification/design/DSPEC_*.md` (§1 phủ mọi SCR? §6 điền chưa? có kết quả `design-check` chép vào chưa?), kiểm `HIFI_*.html` và `FIGMA_*/` (≥1 SVG desktop + mobile mỗi SCR) tồn tại. Bạn không có Bash ⇒ tự kiểm bằng Grep: tập `data-[cf]="[CF]\d\d"` trong HIFI vs `[CF]\d\d` trong SRS (hai chiều), `#[0-9a-fA-F]{6}` trong markup HIFI ngoài `<style>`, `<section class="hf-frame" id="SCR-` vs bảng SRS §2.1. DSPEC không có kết quả `design-check` ⇒ báo "chưa kiểm bằng máy", **không** ✅ dòng design. Dự án không có Designer ⇒ phải có `DEC` và PO ký thay; thiếu cả hai ⇒ 🟠.
 5. **Cảnh báo bắt buộc:** `RIGOR = light` nhưng đã có người dùng thật ⇒ đề xuất nâng `standard` và chạy bù G1–G3. US có trong BACKLOG nhưng chưa có SRS. SRS tham chiếu `BR` không tồn tại.
 
 ## Không được làm
diff --git a/.claude/agents/ba-stage-runner.md b/.claude/agents/ba-stage-runner.md
index 895037d..dd96c56 100644
--- a/.claude/agents/ba-stage-runner.md
+++ b/.claude/agents/ba-stage-runner.md
@@ -28,6 +28,13 @@ Bạn là **người thực thi một bước của quy trình BA** theo đúng
   - `wf`: chạy sau `part2` + `errors` của cùng US. Ghi **hai file** `03-specification/WF_<US>_v1.0.md` (từ `templates/wireframe.md`) và `WF_<US>_v1.0.html` (từ `templates/wireframe.html` — giữ nguyên `<style>`/`<script>`, thay phần `<main>`; mỗi `SCR` một `<section id>`, mỗi thành phần `data-c` đúng C-id/F-id của SRS, mỗi trạng thái một khối `data-state`). Header ghi rõ chế độ 🎨 (có prototype trong prompt hoặc tự tìm được) hay ✏️. **Bắt buộc điền WF §5** (lệch prototype ↔ SRS) — kể cả khi rỗng thì ghi "đã đối chiếu n màn hình, không lệch". Không thêm thành phần vào SRS vì prototype có.
   - Tự kiểm sau `wf`: trích tập `[CF][0-9]{2}` từ SRS và từ WF (.md + `data-c` trong .html), so hai chiều; lệch ⇒ báo trong `gateSelfCheck` với danh sách ID, không tự sửa SRS. Đếm dòng WF §5 theo loại và số dòng chưa có người quyết ⇒ `summary`.
 - `ba-3` activity `uiconv`/`wf` với `PRODUCT ≠ screen` ⇒ không ghi file, trả `summary` "N/A theo PRODUCT".
+- **`ba-design` (stage `design`, chỉ `PRODUCT = screen`)** — theo `.claude/skills/ba-design/SKILL.md`; `PRODUCT ≠ screen` ⇒ không ghi file, "N/A theo PRODUCT". Preflight riêng: `SRS_<US>` + `WF_<US>` (md + html) + `UICONV` phải có; thiếu WF ⇒ `blocked=true` trừ khi prompt có ngoại lệ.
+  - `ds` (một lần/project): chưa có `00-index/DS_<PROJECT>_v*.md` ⇒ tạo từ `templates/design-system.md` + `00-index/ds/{tokens.json, tokens.css, components.html}` từ `templates/`. `tokens.json` giữ nguyên cấu trúc/tên token; `breakpoint.*`, `size.content-max` khớp `UICONV` §1. `tokens.css` viết tay đúng quy tắc `--ds-<đường dẫn nối '-'>` (không có Bash để `--emit-css`). `components.html`: thay khối `:root`, **giữ nguyên khối `ds-components … BEGIN/END`**. Không có brand ⇒ giữ token placeholder, `DS` §0 độ tin cậy 🔴 + `OQ`; **không tự chọn màu brand**. Đã có DS ⇒ chỉ bổ sung §3 (badge ↔ trạng thái BR), §8, version +0.1.
+  - `hifi`: từ `templates/hifi.html` → `03-specification/design/HIFI_<US>_v1.0.html`. `<style>` = `:root` của `ds/tokens.css` + khối `ds-components` của `ds/components.html` **nguyên văn** + phần "Khung xem HIFI" giữ nguyên. Mỗi `SCR` SRS §2.1 → `<section class="hf-frame" id="SCR-xx">`; vùng theo WF §3.x.1 (`data-zone`); `data-c`/`data-f` khớp hai chiều SRS §2.3.1/§2.3.3; **mọi** text → `data-key` + nguyên văn SRS §4.2; trạng thái → `data-state`; W7 → `data-vis` (+ `title` khi disabled); thành phần chỉ có ở prototype → `hf-proto-only`, không `data-c`. Chỉ lớp `.ds-*`/biến `--ds-*`, không mã màu thô, không emoji.
+  - `proto`: thêm `data-nav` theo SRS §2.2 (kể cả cạnh quay lại) lên HIFI hiện có, version +0.1.
+  - `figma`: tạo `03-specification/design/FIGMA_<US>_v1.0/`: SVG mỗi `SCR × {desktop, mobile}` (+ tablet nếu UICONV §1 có) từ `templates/figma-package/SCR-xx.desktop.svg` — màu là **mã nguyên văn** từ `tokens.json` kèm `data-token`, layer `<g id="Zn">`/`<g id="Cnn">`; `tokens.dtcg.json` = bản sao `ds/tokens.json`; `README-import.md` từ template. Thư mục `png/` để trống và ghi `humanInputNeeded` "chạy render-figma.sh".
+  - `dspec`: từ `templates/design-spec.md`; §6 **bắt buộc** kể cả rỗng; chỗ dành cho kết quả `design-check` ghi "chưa chạy — người điều phối chạy" nếu prompt không kèm kết quả.
+  - Tự kiểm sau `hifi`/`figma` (thay cho script): trích tập `[CF][0-9]{2}` từ SRS và từ `data-[cf]=` trong HIFI, so hai chiều; so từng `data-key` với SRS §4.2; grep `#[0-9a-fA-F]{6}` trong markup HIFI ngoài `<style>`; đếm `SCR` của SRS §2.1 có `<section>`. Báo vào `gateSelfCheck`, không tự sửa SRS.
 - Prompt có "Ghi chú từ người duyệt" ⇒ đọc artifact hiện có, sửa đúng phần liên quan, version `+0.1` (hoặc `+1.0` nếu đổi phạm vi/tái cấu trúc), Change Log ghi rõ.
 
 ## Header, ID, version
@@ -52,4 +59,4 @@ Chỉ sửa header/Change Log/INDEX, không đổi nội dung:
 - Sơ đồ Mermaid luôn kèm bảng (W13); sequence ở GĐ3 phải có nhánh lỗi.
 
 ## Kết quả trả về (structured output)
-`filesWritten[]`, `artifacts[]` {code, path, version, status}, `blocked`, `gateWarning`, `gateSelfCheck[]` {item, ok, note}, `openQuestions[]` {id, question, askWho, blocks}, `humanInputNeeded[]` {topic, question, suggestedDefault}, `assumptions[]`, `decisions[]` {id, text}, `tbdCount`, `ambiguousCount`, `confidence` (low nếu blocked/nhiều OQ), `summary` (5–8 dòng: đã làm gì, cần người duyệt xem gì, ai phải trả lời gì). Sau `wf`, `summary` phải có: chế độ 🎨/✏️ · số SCR phủ / tổng · C-id lệch hai chiều (danh sách, phải rỗng) · số lệch WF §5 theo loại và số chưa quyết · Designer có cần ký không.
+`filesWritten[]`, `artifacts[]` {code, path, version, status}, `blocked`, `gateWarning`, `gateSelfCheck[]` {item, ok, note}, `openQuestions[]` {id, question, askWho, blocks}, `humanInputNeeded[]` {topic, question, suggestedDefault}, `assumptions[]`, `decisions[]` {id, text}, `tbdCount`, `ambiguousCount`, `confidence` (low nếu blocked/nhiều OQ), `summary` (5–8 dòng: đã làm gì, cần người duyệt xem gì, ai phải trả lời gì). Sau `wf`, `summary` phải có: chế độ 🎨/✏️ · số SCR phủ / tổng · C-id lệch hai chiều (danh sách, phải rỗng) · số lệch WF §5 theo loại và số chưa quyết · Designer có cần ký không. Sau `ds`/`hifi`/`figma`/`dspec`: độ tin cậy visual (🟢/🟡/🔴 + nguồn) · số SCR × trạng thái × khung nhìn phủ / tổng · ID lệch hai chiều · số `data-key` lệch SRS §4.2 · số mã màu thô · nhắc người điều phối chạy `design-check.mjs` và `render-figma.sh` · Designer/PO cần ký gì.
diff --git a/.claude/skills/README-BA.md b/.claude/skills/README-BA.md
index e42b408..573ef89 100644
--- a/.claude/skills/README-BA.md
+++ b/.claude/skills/README-BA.md
@@ -42,8 +42,11 @@ sống còn. Chi tiết và cách chọn khi lưỡng lự: [`ba-lifecycle/refer
 | 4 | `ba-4-delivery-support` | Đồng hành dev | "Câu hỏi/thay đổi/UAT xử lý ra sao?" | `QLOG`, `CR`, `TCREVIEW`, `UAT` | **G4** |
 | 5 | `ba-5-post-release` | Sau release | "Có đạt mục tiêu không, cải tiến gì?" | `RELNOTE`, `MANUAL`, `BENEFIT` | **G5** |
 | ⊕ | `ba-traceability` | *Xuyên suốt* | "Có sót yêu cầu nào không?" | `RTM`, báo cáo coverage | Chặn G2–G4 |
+| ⊕ | `ba-design` | *Song song GĐ3 (screen)* | "Giao diện trông thế nào, Dev FE dựng theo gì, Designer sửa ở đâu?" | `DS`, `HIFI`, `FIGMA`, `DSPEC` | Ký cùng G3 |
 
-`ba-lifecycle` và `ba-traceability` không phải giai đoạn — chúng chạy **ở mọi lúc**.
+`ba-lifecycle` và `ba-traceability` không phải giai đoạn — chúng chạy **ở mọi lúc**. `ba-design` là **vai Design**
+của bộ skill: chạy sau `wf` của ba-3 khi `PRODUCT = screen`, sinh design system, mockup hi-fi, gói nhập Figma
+(SVG + token + PNG + HTML — không có `.fig`) và redline bàn giao; dự án không có Designer thì nó đóng vai đề xuất, PO ký thay.
 
 ```mermaid
 flowchart LR
@@ -66,6 +69,8 @@ flowchart LR
     GD2 -.-> RTM
     GD3 -.-> RTM
     GD4 -.-> RTM
+    GD3 -.->|screen, sau wf| DSN(["ba-design — DS · HIFI · FIGMA · DSPEC"])
+    DSN -.->|ký cùng G3| GD3
 ```
 
 ---
@@ -100,7 +105,12 @@ D:\Kakao\Docs\.claude\skills\
 │       └── wireframe.md · wireframe.html  ← (screen) bố cục từng màn hình + render low-fi, đối chiếu prototype
 ├── ba-4-delivery-support/  …
 ├── ba-5-post-release/      …
-└── ba-traceability/        …
+├── ba-traceability/        …
+└── ba-design/              ← (screen) vai Design: chạy sau wf
+    ├── SKILL.md · GUIDE.md
+    ├── templates/  design-system.md · tokens.json (DTCG) · tokens.css · ds-components.css · components.html
+    │               hifi.html · design-spec.md · figma-package/{SCR-xx.desktop.svg, README-import.md}
+    └── scripts/    design-check.mjs (kiểm token/C-id/text/màu/SVG) · render-figma.sh (chụp PNG bằng Chrome headless)
 ```
 
 **SKILL.md** = quy trình Claude thực thi, viết trung lập về ngành. **GUIDE.md** = tài liệu
@@ -116,10 +126,11 @@ Mặc định mọi artifact ghi vào thư mục làm việc hiện tại:
 
 ```
 ba-output/<PROJECT>/
-├── 00-index/            PROFILE, RTM, glossary, decision log, open questions, UICONV (screen)
+├── 00-index/            PROFILE, RTM, glossary, decision log, open questions, UICONV (screen), DS + ds/{tokens.json,tokens.css,components.html} (screen)
 ├── 01-discovery/        BRIEF, STAKEHOLDER, ELICITATION, RISK
 ├── 02-analysis/         PROCESS, BACKLOG, BR, RBAC, IMPACT
 ├── 03-specification/    SRS, AC, API, NFR, WF (.md + .html, screen)
+│   └── design/          HIFI_<US>.html, FIGMA_<US>/ (svg, tokens.dtcg.json, png/, README-import.md), DSPEC_<US>.md (screen)
 ├── 04-delivery/         QLOG, CR, TCREVIEW, UAT
 └── 05-post-release/     RELNOTE, MANUAL, BENEFIT
 ```
@@ -175,6 +186,8 @@ ID **không bao giờ tái sử dụng**. Yêu cầu bị bỏ ⇒ đánh dấu
 /ba-4-delivery-support US059          # xử lý câu hỏi dev / CR / UAT
 /ba-5-post-release Settlement 2026-09 # review sau release
 /ba-traceability Settlement           # kiểm tra coverage, tìm yêu cầu bị sót
+/ba-design Settlement ds              # (screen) design system một lần cho project
+/ba-design US059 hifi                 # (screen) mockup hi-fi sau khi WF xong; rồi figma, dspec
 ```
 
 Không nhớ tên skill thì cứ mô tả việc cần làm — skill tự kích hoạt theo mô tả.
diff --git a/.claude/skills/ba-3-specification/SKILL.md b/.claude/skills/ba-3-specification/SKILL.md
index d4f38aa..839cda2 100644
--- a/.claude/skills/ba-3-specification/SKILL.md
+++ b/.claude/skills/ba-3-specification/SKILL.md
@@ -282,6 +282,11 @@ thắng Bố cục. Lệch Tồn tại/Hành vi chưa có người quyết ⇒ 
 Điều **không** làm ở bước này: chọn màu, font, icon, khoảng cách chính xác, motion — ghi vào
 §6 "Designer còn phải làm". Có prototype phủ hết ⇒ ghi "Không".
 
+🔴 Việc ở §6 là **input của skill `../ba-design`** (activity `ds` → `hifi` → `figma` → `dspec`): chạy nó ngay sau
+khi WF xong để ra `DS` (design system, một lần/project), `HIFI` (mockup hi-fi), `FIGMA` (gói nhập Figma) và
+`DSPEC` (redline bàn giao). Dự án không có Designer ⇒ `ba-design` đóng vai đề xuất, PO ký thay theo `DEC-nn` —
+**không** chuyển §6 cho Dev FE nữa.
+
 ## Trước khi kết thúc
 
 In năm thứ (sáu khi `PRODUCT = screen`):
@@ -306,6 +311,9 @@ số dòng §5 của WF theo loại và số dòng chưa có người quyết ·
 thứ đã có trong `UICONV` mà không có dòng ở `UICONV` §12 · WF đang ở chế độ 🎨 hay ✏️ và
 Designer đã ký chưa.
 
+Với `PRODUCT = screen`, nhắc thêm: G3 còn ba dòng *(screen · design)* do `/ba-design` đảm nhiệm — chưa có
+`DS`/`HIFI`/`DSPEC` thì G3 chưa đủ điều kiện ở `standard`+.
+
 Nhắc chữ ký theo `RIGOR` (`../ba-lifecycle/references/workflow.md` §2 — G3):
 `light` không cần chữ ký QA · `standard` cần **PO + Tech Lead + QA** · `strict` thêm
 **Bảo mật/Pháp chế**, và API **phải do BE xác nhận**, không chấp nhận contract BA tự đề xuất.
diff --git a/.claude/skills/ba-3-specification/templates/wireframe.md b/.claude/skills/ba-3-specification/templates/wireframe.md
index 19b0b90..57278a6 100644
--- a/.claude/skills/ba-3-specification/templates/wireframe.md
+++ b/.claude/skills/ba-3-specification/templates/wireframe.md
@@ -177,7 +177,7 @@ Lệch loại *Tồn tại* hoặc *Hành vi* chưa được quyết ⇒ 🔴 **
 
 | | |
 |---|---|
-| **Designer còn phải làm** | *(visual: màu, typography, icon, minh hoạ trạng thái rỗng, motion… — hoặc "Không: prototype đã phủ toàn bộ")* |
+| **Designer còn phải làm** | *(visual: màu, typography, icon, minh hoạ trạng thái rỗng, motion… — hoặc "Không: prototype đã phủ toàn bộ")* — **phạm vi của `ba-design`**: `DS_<PROJECT>` + `HIFI_<US>` + `FIGMA_<US>` + `DSPEC_<US>` |
 | **Dev dùng WF để** | Dựng layout và chọn component theo §3.x.2; **không** suy ra hành vi từ WF |
 | **Không được suy ra từ WF** | Khoảng cách/kích thước chính xác nếu chưa có design system; màu; font |
 | **Khi prototype thay đổi** | Design báo BA ⇒ cập nhật §1, §5 và version WF; SRS chỉ đổi nếu lệch loại Tồn tại/Hành vi |
diff --git a/.claude/skills/ba-design/GUIDE.md b/.claude/skills/ba-design/GUIDE.md
new file mode 100644
index 0000000..159b08b
--- /dev/null
+++ b/.claude/skills/ba-design/GUIDE.md
@@ -0,0 +1,72 @@
+# ba-design — Hướng dẫn sử dụng
+
+## Dùng khi nào
+
+Dự án có giao diện (`PRODUCT = screen`), đã có `SRS` + `WF` + `UICONV` của US, và bạn cần một trong:
+
+- **Design system** cho project: token màu/chữ/khoảng cách, component sheet đủ trạng thái.
+- **Mockup hi-fi** của US: mọi màn hình × trạng thái × breakpoint, mở bằng trình duyệt, bấm điều hướng thử.
+- **Gói nhập Figma**: SVG từng màn hình, token, ảnh chụp, hướng dẫn nhập.
+- **Redline bàn giao Dev FE**: con số cụ thể, ánh xạ component, checklist truy cập.
+
+Dự án **không có Designer** vẫn dùng được — skill đóng vai Designer đề xuất, PO ký thay kèm `DEC-nn`.
+
+## Cần chuẩn bị
+
+| Có | Tốt hơn nếu có |
+|---|---|
+| `SRS_<US>`, `WF_<US>` (md + html), `UICONV_<PROJECT>` từ ba-3 | Brand guideline (màu, font, logo) hoặc design system đã chọn |
+| `node` ≥ 18 để chạy phép kiểm | Chrome/Edge để chụp PNG cho gói Figma |
+| Biết dự án có Designer hay không | Link Figma/prototype đã có để đối chiếu |
+
+## Cách gọi
+
+```
+/ba-design <PROJECT> ds                  # sinh design system (một lần)
+/ba-design US-002 hifi                   # mockup hi-fi cho US-002
+/ba-design US-002 proto                  # bật điều hướng bấm được trên HIFI
+/ba-design US-002 figma                  # gói nhập Figma
+/ba-design US-002 dspec                  # redline + bàn giao
+/ba-design US-002 --brand brand/guide.pdf go   # chạy liền, không dừng Bước 0
+```
+
+Qua pipeline có duyệt: `/ba-pipeline` → stage `design`, activity tương ứng.
+
+## Đọc kết quả
+
+- Mở `HIFI_<US>_v1.0.html`, dùng toolbar: chọn màn hình, khung nhìn, trạng thái; tick **C-id/F-id** và
+  **Vùng Zn** để đối chiếu với SRS/WF; chọn **Prototype** để bấm điều hướng.
+- Chạy phép kiểm:
+
+  ```bash
+  node .claude/skills/ba-design/scripts/design-check.mjs \
+    --tokens ba-output/<P>/00-index/ds/tokens.json --css ba-output/<P>/00-index/ds/tokens.css \
+    --components ba-output/<P>/00-index/ds/components.html \
+    --html ba-output/<P>/03-specification/design/HIFI_<US>_v1.0.html \
+    --srs ba-output/<P>/03-specification/SRS_<US>_v1.0.md --wf ba-output/<P>/03-specification/WF_<US>_v1.0.md \
+    --svg-dir ba-output/<P>/03-specification/design/FIGMA_<US>_v1.0
+  ```
+
+  Mọi dòng phải `✅`. `🔴 H3` = thành phần lệch SRS; `🔴 H4` = text bị sửa; `🔴 T2` = màu không đủ tương phản.
+- Chụp ảnh cho gói Figma:
+
+  ```bash
+  .claude/skills/ba-design/scripts/render-figma.sh ba-output/<P>/03-specification/design/HIFI_<US>_v1.0.html \
+    ba-output/<P>/03-specification/design/FIGMA_<US>_v1.0/png
+  ```
+
+## Nhập vào Figma
+
+Đọc `FIGMA_<US>_v1.0/README-import.md`. Tóm tắt: token trước (Tokens Studio), rồi component sheet
+(html.to.design), rồi kéo SVG từng màn hình vào frame. **Không có file `.fig`** — Figma không cho tạo
+file bằng API; gói này là các định dạng Figma nhập được và giữ layer.
+
+## Lỗi thường gặp
+
+| Triệu chứng | Nguyên nhân | Sửa |
+|---|---|---|
+| `🔴 H1 khối :root không trùng` | Sửa tay tokens.css hoặc HIFI thay vì sửa tokens.json | `--emit-css` sinh lại, chép vào HIFI |
+| `🔴 H3 chỉ có trong HIFI: C07` | HIFI vẽ nút prototype có mà SRS không có | Bọc `hf-proto-only`, ghi WF §5 |
+| `🔴 H4 text khác SRS` | Design "làm gọn" nhãn | Chép lại nguyên văn; muốn đổi ⇒ OQ cho BA/PO |
+| HIFI đẹp nhưng Dev hỏi "màu này là gì" | DS §0 ghi độ tin cậy 🔴 mà không ai chốt | Đưa OQ brand lên PO trước G3 |
+| Figma báo *Missing fonts* | Máy không có font brand | Cài font hoặc đổi `font.family.base` |
diff --git a/.claude/skills/ba-design/SKILL.md b/.claude/skills/ba-design/SKILL.md
new file mode 100644
index 0000000..422ac4b
--- /dev/null
+++ b/.claude/skills/ba-design/SKILL.md
@@ -0,0 +1,181 @@
+---
+name: ba-design
+description: Vai trò Design trong quy trình BA — chạy song song GĐ3 khi PRODUCT = screen, sau khi ba-3 đã có SRS + WF + UICONV. Sinh design system cấp project (DS - token chuẩn W3C DTCG, tokens.css, component sheet đủ trạng thái hover/focus/disabled/error), mockup hi-fi tự chứa cho từng US (HIFI - mọi màn hình × trạng thái × breakpoint, có chế độ prototype bấm được), gói nhập Figma (FIGMA - SVG mỗi màn hình, token DTCG, PNG chụp bằng Chrome headless, hướng dẫn nhập; không sinh được .fig) và đặc tả thiết kế/redline bàn giao Dev FE (DSPEC). Mọi thứ truy vết về SRS/WF/UICONV và được kiểm bằng máy - C-id hai chiều, text nguyên văn theo SRS §4.2, chỉ dùng token, tương phản WCAG AA. Kích hoạt khi người dùng nói "thiết kế giao diện", "mockup", "hi-fi", "design system", "token", "chọn màu/font/khoảng cách", "prototype bấm được", "xuất Figma", "file Figma", "redline", "bàn giao dev FE", "component sheet", "kiểm tra tương phản", "dự án không có Designer". Output vào ba-output/<PROJECT>/00-index/ds/ và 03-specification/design/; ký cùng Gate G3 bởi Designer, hoặc PO + DEC khi dự án không có Designer.
+---
+
+# ⊕ DESIGN — Vai trò Design trong bộ BA
+
+Mục tiêu: **biến SRS + WF + UICONV thành thiết kế giao diện hoàn chỉnh mà Dev FE dựng được không phải
+đoán, Designer sửa được trong Figma, và máy kiểm được là không lệch đặc tả.**
+
+Skill này **đóng vai Designer khi dự án không có Designer**, và **làm phần chuẩn bị cho Designer**
+khi có. Nó không thay đổi ranh giới của `ba-3`: `WF` vẫn là low-fi và dừng ở bố cục; phần "Designer
+còn phải làm" ở `WF` §6 chính là việc của skill này.
+
+Output — chỉ khi `PRODUCT = screen`; loại khác trả "N/A theo PRODUCT", không ghi file:
+
+| Mã | Ở đâu | Tần suất |
+|---|---|---|
+| `DS` | `00-index/DS_<PROJECT>_v1.0.md` + `00-index/ds/{tokens.json, tokens.css, components.html}` | Một lần / project, bồi đắp dần |
+| `HIFI` | `03-specification/design/HIFI_<US>_v1.0.html` | Mỗi US, sau `wf` |
+| `FIGMA` | `03-specification/design/FIGMA_<US>_v1.0/` (`*.svg`, `tokens.dtcg.json`, `png/`, `README-import.md`) | Mỗi US |
+| `DSPEC` | `03-specification/design/DSPEC_<US>_v1.0.md` | Mỗi US |
+
+## Bốn nguyên tắc bất di bất dịch
+
+1. **Không bịa yêu cầu** — ở đây là *không bịa visual*: thiếu brand guideline ⇒ dùng token trung tính
+   của template, ghi độ tin cậy 🔴 ở `DS` §0 và `OQ`, không viết như thể đã có nhận diện.
+2. **Không quyết định thay PO** — và **không quyết hành vi thay SRS**: HIFI *chép* thành phần, trạng
+   thái, text từ SRS. Muốn thêm nút, đổi nhãn ⇒ ghi lệch ở `DSPEC` §6 / `WF` §5, PO quyết.
+3. **Mọi phát biểu truy vết được** — mỗi `data-c`/`data-f` về SRS §2.3, mỗi `data-key` về SRS §4.2,
+   mỗi màu về một token, mỗi token về brand/prototype/`OQ`.
+4. **Không ghi đè tài liệu đã qua gate** — `DS` đã Baselined chỉ sửa qua `CR`; đổi token là đổi mọi HIFI.
+
+🔴 **Nguyên tắc riêng: skill này không tự duyệt.** Mọi artifact sinh ra là `🟡 Draft` chờ **Designer**
+ký; dự án không có Designer ⇒ PO ký thay và tham chiếu `DEC-nn` (theo `../ba-lifecycle/references/workflow.md` §3).
+
+Nạp bắt buộc trước khi làm: `../ba-lifecycle/references/{domain-profiles,workflow,artifact-map,writing-rules}.md`
+· `templates/` của skill này · `scripts/design-check.mjs` (đọc phần đầu để biết phép kiểm nào sẽ chạy).
+
+## Bước 0 — Chốt input rồi dừng lại
+
+**Chưa được ghi file.** Làm bảy việc rồi **dừng chờ trả lời**:
+
+1. **Profile** — `PRODUCT` phải là `screen`. Không phải ⇒ nói "N/A theo PRODUCT" và dừng.
+2. **Input từ ba-3 đã có chưa** — bảng `File | Version | Status` cho `UICONV_<PROJECT>`, `SRS_<US>`,
+   `WF_<US>` (md + html). Thiếu `WF` ⇒ HIFI không có nguồn bố cục ⇒ đề nghị chạy `/ba-3-specification`
+   activity `wf` trước; người dùng vẫn muốn ⇒ làm, ghi `OQ` và độ tin cậy 🔴.
+3. **`DS` đã có chưa** — có ⇒ chỉ đọc và bồi đắp §3 (badge ↔ trạng thái BR), §8 (ngoại lệ); chưa có ⇒
+   lần chạy này phải sinh `DS` trước (activity `ds`).
+4. **Nguồn visual**, tìm theo thứ tự và trình bảng `Nguồn | Định dạng | Phủ gì | Độ tin cậy`:
+   tham số `--brand` · thư mục `design/`, `brand/`, `prototype/` · link Figma người dùng đưa · `UICONV` §0
+   (design system đã chọn) · `SAD` §7 · `DEC-nn` của Tech Lead về design system. **Không có ⇒ token trung
+   tính của template, độ tin cậy 🔴, nói rõ điều đó.**
+5. **Dự án có Designer không** — có ⇒ Designer ký `DS`, `HIFI`, `DSPEC`; không ⇒ tìm `DEC-nn` "không có
+   Designer" (ví dụ `DEC-01` của e-commerce); chưa có ⇒ đề xuất ghi, PO ký thay.
+6. **Phạm vi lần chạy** — đích danh `US` (≤ 3) và activity: `ds` · `hifi` · `proto` · `figma` · `dspec`.
+7. **Công cụ** — `node` để chạy `scripts/design-check.mjs`; Chrome/Edge để chạy `scripts/render-figma.sh`.
+   Không có Chrome ⇒ `FIGMA/png/` bỏ trống và ghi hướng dẫn chụp tay trong `README-import.md`.
+
+Rồi **hỏi xác nhận** bảy điểm trên. Bỏ qua khi lệnh có `go`.
+
+## Thực hiện — 5 activity
+
+Thứ tự bắt buộc trong một US: `ds` (nếu chưa có) → `hifi` → `proto` (tuỳ chọn) → `figma` → `dspec`.
+`figma` và `dspec` đọc HIFI, nên HIFI đổi ⇒ chạy lại cả hai.
+
+### Activity `ds` — Design system cấp project
+
+Dùng `templates/design-system.md` → `00-index/DS_<PROJECT>_v1.0.md`, và ba tệp kèm trong `00-index/ds/`:
+
+1. **`tokens.json`** — chép `templates/tokens.json`, điền theo nguồn ở Bước 0. Giữ đúng cấu trúc và tên
+   token (HIFI/CSS phụ thuộc tên). Ba thứ **phải khớp `UICONV`**: `breakpoint.*` với §1, `size.content-max`
+   với §1, `size.control.touch ≥ 44px`. Điền `$extensions.ba.contrastPairs` cho **mọi** cặp chữ/nền dùng
+   trong components.html. Thiếu brand ⇒ giữ giá trị placeholder, ghi `"source": "… — OQ-nnn"`.
+2. **`tokens.css`** — sinh từ json theo quy tắc `--ds-<đường dẫn nối bằng '-'>`. Có Bash ⇒
+   `node scripts/design-check.mjs --tokens tokens.json --emit-css > tokens.css`; không có ⇒ viết tay
+   đúng quy tắc, phép kiểm T1 sẽ bắt sai lệch.
+3. **`components.html`** — chép `templates/components.html`, **thay khối `:root`** bằng tokens.css, **giữ
+   nguyên khối `ds-components … BEGIN/END`**. Chỉ sửa CSS component khi có dòng `DS` §8 và sửa đồng thời
+   ở mọi HIFI. Bổ sung component nếu `UICONV` §11 có kiểu trình bày chưa có lớp `.ds-*`.
+4. **`DS_<PROJECT>.md`** — §3 ánh xạ ba chiều *(UICONV §11 · lớp DS · component design system tham chiếu)*
+   phải phủ **mọi** kiểu trình bày xuất hiện trong các `WF` hiện có; §4 trạng thái đủ default/hover/focus/
+   disabled, component nhập liệu thêm error; §6 chép kết quả T2 nguyên văn.
+
+🔴 **Không chọn màu brand thay khách.** Placeholder xanh trung tính trong template là để HIFI *chạy được*,
+không phải đề xuất nhận diện. `DS` §0 phải ghi độ tin cậy và ai sẽ chốt.
+
+### Activity `hifi` — Mockup hi-fi từng US
+
+Dùng `templates/hifi.html` → `03-specification/design/HIFI_<US>_v1.0.html`. Làm **sau** `wf` của ba-3.
+
+1. **`<style>`** = khối `:root` của `ds/tokens.css` + khối `ds-components` của `ds/components.html`
+   **nguyên văn** + phần "Khung xem HIFI" của template giữ nguyên. Phép kiểm H1 so từng ký tự.
+2. **Mỗi `SCR` của SRS §2.1** một `<section class="hf-frame" id="SCR-xx">` — kể cả modal và trang trạng
+   thái. Bố cục theo bảng vùng `WF` §3.x.1: mỗi vùng `data-zone="Zn" data-name`. Thứ tự DOM = thứ tự focus
+   `WF` §3.x.6.
+3. **Mỗi thành phần** SRS §2.3.1 → `data-c`; mỗi field §2.3.3 → `data-f`; kiểu trình bày → lớp `.ds-*`
+   theo `DS` §3. Tập ID **khớp hai chiều** với SRS (H3). Thành phần chỉ có ở prototype ⇒
+   `<span class="hf-proto-only" data-ref="WF §5 #n">`, **không** gán `data-c`.
+4. **Mọi chuỗi hiển thị** → `data-key` + text **nguyên văn** SRS §4.2 (W5, phép kiểm H4). Message lỗi
+   dùng `data-key="E-<DOMAIN>-nnnn"`. Không "làm gọn" câu chữ — text là của BA, không phải của Design.
+5. **Trạng thái** SRS §2.3.6 / `WF` §3.x.3 → khối `data-state` trong cùng vùng: `default · loading ·
+   empty-none · empty-filter · error · submitting · invalid`. Hai trạng thái rỗng **trông khác nhau**
+   (`.ds-empty` có minh hoạ + nút chính · `.ds-empty--filter` không minh hoạ + nút phụ).
+6. **Ẩn/khoá/read-only** (W7) → `data-vis`, disabled **bắt buộc `title`** nêu lý do.
+7. **Responsive** — mọi SCR phải xem được ở `desktop` và `mobile` (bảng → card qua `.ds-table-wrap`/
+   `.ds-cards`; `.ds-hide-m`/`.ds-hide-d`); `tablet` nếu `UICONV` §1 có.
+8. **Cấm** mã màu/px thô trong markup (trừ độ rộng cột theo SRS §2.3.2), emoji thay icon, font ngoài token.
+
+Sau khi ghi: chạy `design-check.mjs --tokens … --components … --html HIFI --srs SRS --wf WF`; H1–H5 phải
+`✅`. Không có Bash ⇒ tự kiểm bằng grep tập `[CF][0-9]{2}` hai phía và báo trong kết quả.
+
+### Activity `proto` — Prototype bấm được *(tuỳ chọn)*
+
+Không tạo file mới. Trên HIFI: mỗi cạnh của sơ đồ điều hướng SRS §2.2 → `data-nav="SCR-yy"` trên đúng
+thành phần gây điều hướng, **kể cả cạnh quay lại** (Huỷ, Đóng, Back). Mở `?mode=proto` để thử. Ghi bảng
+luồng vào `DSPEC` §4; cạnh có trong HIFI mà SRS không có ⇒ `DSPEC` §6.
+
+### Activity `figma` — Gói nhập Figma
+
+Tạo `03-specification/design/FIGMA_<US>_v1.0/`:
+
+1. **SVG** — từ `templates/figma-package/SCR-xx.desktop.svg`, một file mỗi `SCR × {desktop, mobile}`
+   (+ `tablet` nếu UICONV có; + trạng thái `empty-none`/`error` là hậu tố). Layer `<g id="Zn">` theo WF,
+   `<g id="Cnn">` theo SRS. **Màu là mã nguyên văn từ tokens.json** kèm `data-token` — Figma không đọc
+   biến CSS. Text nguyên văn SRS §4.2.
+2. **`tokens.dtcg.json`** — bản sao `00-index/ds/tokens.json`.
+3. **`README-import.md`** — từ template, điền tên US/project, font brand, danh sách file.
+4. **`png/`** — người điều phối (có Bash) chạy `scripts/render-figma.sh HIFI… FIGMA…/png`; runner không
+   có Bash ⇒ để trống thư mục và ghi việc này vào `humanInputNeeded`.
+
+🔴 **Nói thẳng với người dùng:** không có file `.fig`; gói này là những định dạng Figma **nhập được** và
+giữ được layer/token. Designer sửa trong Figma ⇒ link Figma quay lại làm `--proto` cho vòng sau.
+
+### Activity `dspec` — Đặc tả thiết kế & bàn giao
+
+Dùng `templates/design-spec.md` → `03-specification/design/DSPEC_<US>_v1.0.md`. Điền §1 bản đồ tệp cho
+**mọi** SCR, §2 redline (token, kích thước — không viết "xem hình"), §3 ánh xạ trạng thái BR → badge,
+§5 khả năng truy cập, **§6 lệch** (bắt buộc kể cả rỗng), §7 bàn giao. Chép kết quả `design-check.mjs`
+vào §6 nguyên văn.
+
+## Trước khi kết thúc
+
+In bốn thứ:
+
+**① Kết quả `design-check.mjs`** nguyên văn (T1, T2, H1–H5, S1). Còn 🔴 ⇒ nói thẳng G3 phần design
+chưa đạt, liệt kê ID/khoá/mã màu lệch. Không chạy được ⇒ nói rõ phép kiểm nào chưa chạy.
+
+**② Bảng tự chấm G3 — phần design** (`../ba-lifecycle/references/workflow.md` §2, các dòng *(screen · design)*)
+dạng ☐/✅.
+
+**③ Độ tin cậy visual** (🟢/🟡/🔴 theo `DS` §0) và **`OQ` mở** — cái nào chặn G3 đánh 🔴.
+
+**④ Chữ ký cần** — Designer cho `DS`, `HIFI`, `DSPEC`; không có Designer ⇒ PO + `DEC-nn`. `RIGOR = light`
+⇒ `HIFI` không bắt buộc (xem workflow.md); `strict` ⇒ thêm tương phản AA cho **mọi** cặp và đủ tablet.
+
+## Bẫy thường gặp
+
+**Chép prototype vào HIFI.** Prototype có nút mà SRS không có ⇒ `hf-proto-only`, không `data-c`. Thêm
+thẳng vào là scope creep bằng hình ảnh (W11).
+
+**Sửa text cho "đẹp".** "Tạo mới" thành "Tạo" là vi phạm W5 và H4 sẽ bắt. Text là của BA; muốn đổi ⇒ `OQ`.
+
+**Chọn màu brand rồi coi là chốt.** Placeholder trung tính không phải đề xuất nhận diện; `DS` §0 phải ghi
+🔴 và ai chốt.
+
+**Mã màu thô trong markup.** `style="color:#333"` là chỗ HIFI lệch DS im lặng. H2 bắt; sửa bằng biến.
+
+**Chỉ vẽ desktop.** Bảng → card ở mobile là quyết định thiết kế thật (cột nào ưu tiên — `UICONV` §3), không
+phải "responsive tự lo".
+
+**Quên trạng thái rỗng thứ hai, hoặc vẽ giống nhau.** Đây là lỗi kinh điển kế thừa từ ba-3.
+
+**Disabled không có tooltip.** Nút mờ mà không nói vì sao khiến người dùng tưởng mất quyền (W7).
+
+**Emoji thay icon.** Không scale, không đổi màu được, mỗi hệ điều hành một hình.
+
+**Tưởng xuất được `.fig`.** Không có API tạo file Figma; hãy nói rõ ngay từ Bước 0.
+
+**HIFI lệch WF về vị trí mà không ghi.** Đổi bố cục là quyền của Designer, nhưng phải có dòng ở `DSPEC` §6
+để BA cập nhật WF — không thì hai tài liệu kể hai câu chuyện.
diff --git a/.claude/skills/ba-design/scripts/design-check.mjs b/.claude/skills/ba-design/scripts/design-check.mjs
new file mode 100755
index 0000000..fe8f834
--- /dev/null
+++ b/.claude/skills/ba-design/scripts/design-check.mjs
@@ -0,0 +1,195 @@
+#!/usr/bin/env node
+// design-check.mjs — phép kiểm máy cho artifact của skill ba-design (DS / HIFI / FIGMA).
+// Chỉ dùng Node ≥ 18, không phụ thuộc gói ngoài. Không sửa file. Exit 1 khi có 🔴.
+//
+//   node design-check.mjs --tokens 00-index/ds/tokens.json [--css 00-index/ds/tokens.css]
+//        [--components 00-index/ds/components.html] [--html 03-specification/design/HIFI_US-002_v1.0.html]
+//        [--srs 03-specification/SRS_US-002_v1.0.md] [--wf 03-specification/WF_US-002_v1.0.md]
+//        [--svg-dir 03-specification/design/FIGMA_US-002_v1.0] [--emit-css] [--json]
+//
+// Phép kiểm:  T1 tokens.json ↔ tokens.css   T2 tương phản WCAG theo $extensions.ba.contrastPairs
+//             H1 :root + khối ds-components trong HTML trùng nguồn   H2 mã màu thô trong markup
+//             H3 C-id/F-id SRS ↔ HIFI hai chiều   H4 text data-key ↔ SRS §4.2   H5 SCR SRS §2.1 ↔ HIFI
+//             S1 SVG: màu ⊆ token · mỗi SCR có desktop+mobile · id Cnn ⊆ HIFI
+import fs from 'node:fs'
+import path from 'node:path'
+
+const args = process.argv.slice(2)
+const opt = { html: [] }
+for (let i = 0; i < args.length; i++) {
+  const a = args[i]
+  if (a === '--html') opt.html.push(args[++i])
+  else if (a.startsWith('--')) { const k = a.slice(2); const nxt = args[i + 1]; if (nxt && !nxt.startsWith('--')) { opt[k] = nxt; i++ } else opt[k] = true }
+}
+if (!opt.tokens) { console.error('Thiếu --tokens <tokens.json>'); process.exit(2) }
+
+const out = []
+let red = 0
+const ok = (id, msg, details) => out.push({ id, status: '✅', msg, details })
+const warn = (id, msg, details) => out.push({ id, status: '🟠', msg, details })
+const bad = (id, msg, details) => { red++; out.push({ id, status: '🔴', msg, details }) }
+const read = (p) => fs.readFileSync(p, 'utf8')
+const norm = (s) => s.replace(/\s+/g, ' ').trim()
+
+// ---------- Token ----------
+const tokens = JSON.parse(read(opt.tokens))
+const flat = {} // 'color.bg.canvas' -> {type, value}
+;(function walk(node, pth) {
+  for (const [k, v] of Object.entries(node)) {
+    if (k.startsWith('$')) continue
+    if (v && typeof v === 'object' && '$value' in v) flat[[...pth, k].join('.')] = { type: v.$type, value: v.$value }
+    else if (v && typeof v === 'object') walk(v, [...pth, k])
+  }
+})(tokens, [])
+const cssName = (p) => '--ds-' + p.replace(/\./g, '-')
+const cssVal = (t) => {
+  const v = t.value
+  if (Array.isArray(v)) return v.map((f) => (/\s/.test(f) || /[A-Z]/.test(f) ? `"${f}"` : f)).join(',')
+  if (t.type === 'shadow' && v && typeof v === 'object') return `${v.offsetX} ${v.offsetY} ${v.blur} ${v.spread} ${v.color}`
+  return String(v)
+}
+const expectedRoot = ':root{\n' + Object.entries(flat).map(([p, t]) => `  ${cssName(p)}:${cssVal(t)};`).join('\n') + '\n}'
+if (opt['emit-css']) { console.log(expectedRoot); process.exit(0) }
+const tokenHex = new Set(Object.values(flat).filter((t) => t.type === 'color').map((t) => String(t.value).toUpperCase().slice(0, 7)))
+ok('T0', `tokens.json: ${Object.keys(flat).length} token, ${tokenHex.size} màu`)
+
+// T1
+if (opt.css) {
+  const css = read(opt.css)
+  const m = css.match(/:root\{[\s\S]*?\n\}/)
+  if (!m) bad('T1', 'tokens.css không có khối :root')
+  else {
+    const have = Object.fromEntries([...m[0].matchAll(/(--ds-[\w-]+):([^;]+);/g)].map((x) => [x[1], norm(x[2])]))
+    const want = Object.fromEntries(Object.entries(flat).map(([p, t]) => [cssName(p), norm(cssVal(t))]))
+    const missing = Object.keys(want).filter((k) => !(k in have))
+    const extra = Object.keys(have).filter((k) => !(k in want))
+    const diff = Object.keys(want).filter((k) => k in have && have[k] !== want[k]).map((k) => `${k}: css=${have[k]} json=${want[k]}`)
+    if (missing.length || extra.length || diff.length) bad('T1', 'tokens.css lệch tokens.json', { missing, extra, diff })
+    else ok('T1', 'tokens.css khớp tokens.json')
+  }
+}
+
+// T2 contrast
+function lum(hex) {
+  const h = hex.replace('#', '').slice(0, 6)
+  const c = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255).map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4))
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+}
+const ratio = (a, b) => { const [l1, l2] = [lum(a), lum(b)].sort((x, y) => y - x); return (l1 + 0.05) / (l2 + 0.05) }
+const pairs = tokens.$extensions?.ba?.contrastPairs || []
+const contrast = []
+for (const p of pairs) {
+  const fg = flat[p.fg]?.value, bg = flat[p.bg]?.value
+  if (!fg || !bg) { bad('T2', `Cặp tương phản tham chiếu token không tồn tại: ${p.fg} / ${p.bg}`); continue }
+  const r = Math.round(ratio(fg, bg) * 100) / 100
+  const pass = r >= (p.min || 4.5)
+  contrast.push({ fg: p.fg, bg: p.bg, ratio: r, min: p.min || 4.5, pass, use: p.use })
+  if (!pass) bad('T2', `Tương phản ${p.fg} / ${p.bg} = ${r} < ${p.min || 4.5} (${p.use || ''})`)
+}
+if (pairs.length && contrast.every((c) => c.pass)) ok('T2', `Tương phản: ${contrast.length}/${contrast.length} cặp đạt`, contrast.map((c) => `${c.fg} / ${c.bg} = ${c.ratio} (≥${c.min})`))
+if (!pairs.length) warn('T2', 'tokens.json không khai $extensions.ba.contrastPairs — không kiểm được tương phản')
+
+// ---------- HTML ----------
+const idsOf = (s) => new Set([...s.matchAll(/\b([CF][0-9]{2})\b/g)].map((m) => m[1]))
+const attrIds = (html) => new Set([...html.matchAll(/data-[cf]="([CF][0-9]{2})"/g)].map((m) => m[1]))
+const srcComponents = opt.components ? read(opt.components) : null
+const compBlock = (s) => { const m = s.match(/\/\* ds-components v[\d.]+ — BEGIN[\s\S]*?\/\* ds-components v[\d.]+ — END \*\//); return m ? norm(m[0]) : null }
+
+let srs = opt.srs ? read(opt.srs) : null
+let srsIds = srs ? idsOf(srs.replace(/```[\s\S]*?```/g, '')) : null
+let srsScr = srs ? new Set([...srs.matchAll(/^\|\s*(SCR-\d{2})\s*\|/gm)].map((m) => m[1])) : null
+let srsText = null
+if (srs) {
+  const sec = srs.split(/^### 4\.2[^\n]*\n/m)[1]?.split(/^##+ /m)[0] || ''
+  const rows = sec.split('\n').filter((l) => /^\|/.test(l) && !/^\|\s*-+/.test(l))
+  if (rows.length > 1) {
+    const hdr = rows[0].split('|').map((c) => c.trim())
+    const ki = hdr.findIndex((h) => /^Khoá|^Khóa|^Key/i.test(h)), ti = hdr.findIndex((h) => /^(Text \(VI\)|Text VI|Text|VI)$/i.test(h))
+    if (ki >= 0 && ti >= 0) { srsText = {}; for (const r of rows.slice(1)) { const c = r.split('|').map((x) => x.trim()); if (c[ki + 0]) srsText[c[ki].replace(/`/g, '')] = c[ti].replace(/^"|"$/g, '') } }
+  }
+}
+let hifiIds = new Set(), hifiScr = new Set()
+for (const f of opt.html) {
+  const html = read(f), tag = path.basename(f)
+  // H1
+  const m = html.match(/:root\{[\s\S]*?\n\}/)
+  if (!m || norm(m[0]) !== norm(expectedRoot)) bad('H1', `${tag}: khối :root không trùng tokens.json (chạy --emit-css để lấy khối chuẩn)`)
+  else ok('H1', `${tag}: khối :root khớp tokens.json`)
+  if (srcComponents && path.resolve(f) !== path.resolve(opt.components)) {
+    const a = compBlock(html), b = compBlock(srcComponents)
+    if (!a || !b) bad('H1', `${tag}: không tìm thấy khối "ds-components … BEGIN/END" trong HTML hoặc components.html`)
+    else if (a !== b) bad('H1', `${tag}: khối ds-components lệch components.html — chép lại nguyên văn`)
+    else ok('H1', `${tag}: khối ds-components khớp components.html`)
+  }
+  // H2 raw colors in markup (outside <style>)
+  const markup = html.replace(/<style[\s\S]*?<\/style>/g, '').replace(/<!--[\s\S]*?-->/g, '')
+  const raw = [...markup.matchAll(/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g)].map((x) => x[0].toUpperCase())
+  const nonToken = [...new Set(raw.filter((h) => h.length === 7 && !tokenHex.has(h)))]
+  const inStyleAttr = [...markup.matchAll(/style="[^"]*#[0-9a-fA-F]{3,6}[^"]*"/g)].length
+  if (nonToken.length) bad('H2', `${tag}: ${nonToken.length} mã màu thô ngoài tập token trong markup`, nonToken)
+  else if (inStyleAttr) warn('H2', `${tag}: ${inStyleAttr} style="" có mã màu — nên dùng var(--ds-*)`)
+  else ok('H2', `${tag}: không có mã màu thô trong markup`)
+  // ids / scr
+  const isHifi = /class="hf-frame"/.test(html)
+  if (isHifi) {
+    attrIds(html).forEach((x) => hifiIds.add(x))
+    ;[...html.matchAll(/class="hf-frame"[^>]*\bid="(SCR-\d{2})"/g)].forEach((x) => hifiScr.add(x[1]))
+    // H4 text
+    if (srsText) {
+      const mism = [], unknown = []
+      for (const m2 of html.matchAll(/<(\w+)([^>]*?)\sdata-key="([^"]+)"([^>]*)>/g)) {
+        const [, tagName, pre, key, post] = m2
+        const attrs = pre + post
+        let text
+        if (/^(input|select|textarea)$/i.test(tagName)) text = (attrs.match(/placeholder="([^"]*)"/) || attrs.match(/value="([^"]*)"/) || [])[1]
+        else { const rest = html.slice(m2.index + m2[0].length); const close = rest.indexOf(`</${tagName}>`); text = rest.slice(0, close < 0 ? 0 : close).replace(/<[^>]+>/g, '') }
+        text = norm(text || '').replace(/\s*\*$/, '')
+        if (!(key in srsText)) { unknown.push(key); continue }
+        if (norm(srsText[key]) !== text) mism.push(`${key}: HIFI="${text}" SRS="${srsText[key]}"`)
+      }
+      if (mism.length) bad('H4', `${tag}: ${mism.length} data-key có text khác SRS §4.2 (W5)`, mism); else ok('H4', `${tag}: text data-key khớp SRS §4.2`)
+      if (unknown.length) warn('H4', `${tag}: ${unknown.length} data-key không có trong SRS §4.2`, [...new Set(unknown)])
+    } else if (srs) warn('H4', `${tag}: không đọc được bảng SRS §4.2 (cần cột "Khoá" và "Text (VI)") — bỏ phép kiểm H4`)
+  }
+}
+if (srsIds && hifiIds.size) {
+  const onlySrs = [...srsIds].filter((x) => !hifiIds.has(x)), onlyHifi = [...hifiIds].filter((x) => !srsIds.has(x))
+  if (onlySrs.length || onlyHifi.length) bad('H3', 'C-id/F-id lệch hai chiều SRS ↔ HIFI', { chiCoTrongSRS: onlySrs, chiCoTrongHIFI: onlyHifi })
+  else ok('H3', `C-id/F-id khớp hai chiều (${hifiIds.size} ID)`)
+  if (opt.wf) { const wfIds = idsOf(read(opt.wf)); const d = [...hifiIds].filter((x) => !wfIds.has(x)); if (d.length) warn('H3', 'ID có trong HIFI nhưng không có trong WF', d) }
+}
+if (srsScr && hifiScr.size) {
+  const miss = [...srsScr].filter((s) => !hifiScr.has(s)), extra = [...hifiScr].filter((s) => !srsScr.has(s))
+  if (miss.length) bad('H5', `HIFI thiếu màn hình của SRS §2.1`, miss); else ok('H5', `HIFI phủ ${hifiScr.size}/${srsScr.size} SCR của SRS §2.1`)
+  if (extra.length) warn('H5', 'HIFI có SCR không có trong SRS §2.1', extra)
+}
+
+// ---------- SVG ----------
+if (opt['svg-dir']) {
+  const dir = opt['svg-dir']
+  const files = fs.existsSync(dir) ? fs.readdirSync(dir).filter((f) => f.endsWith('.svg')) : []
+  if (!files.length) bad('S1', `${dir}: không có file .svg`)
+  const views = {}, badColor = {}, badIds = {}
+  for (const f of files) {
+    const s = read(path.join(dir, f))
+    const m = f.match(/^(SCR-\d{2})\.(desktop|tablet|mobile)(?:\.([\w-]+))?\.svg$/)
+    if (!m) { warn('S1', `${f}: tên không theo mẫu SCR-xx.<view>[.<state>].svg`); continue }
+    ;(views[m[1]] ||= new Set()).add(m[2])
+    const cols = [...new Set([...s.matchAll(/(?:fill|stroke)="(#[0-9a-fA-F]{6})/g)].map((x) => x[1].toUpperCase()))].filter((h) => !tokenHex.has(h))
+    if (cols.length) badColor[f] = cols
+    if (hifiIds.size) { const ids = [...s.matchAll(/\bid="([CF][0-9]{2})"/g)].map((x) => x[1]).filter((x) => !hifiIds.has(x)); if (ids.length) badIds[f] = ids }
+  }
+  if (Object.keys(badColor).length) bad('S1', 'SVG dùng mã màu ngoài tập token', badColor); else if (files.length) ok('S1', `SVG: ${files.length} file, màu ⊆ token`)
+  if (Object.keys(badIds).length) bad('S1', 'SVG có id Cnn/Fnn không có trong HIFI', badIds)
+  const need = srsScr ? [...srsScr] : Object.keys(views)
+  const lack = need.filter((s) => !(views[s]?.has('desktop') && views[s]?.has('mobile')))
+  if (lack.length) bad('S1', 'SCR chưa đủ desktop + mobile trong SVG', lack); else if (need.length) ok('S1', `SVG phủ desktop+mobile cho ${need.length} SCR`)
+}
+
+// ---------- Report ----------
+if (opt.json) console.log(JSON.stringify({ red, results: out, contrast }, null, 2))
+else {
+  for (const r of out) { console.log(`${r.status} ${r.id}  ${r.msg}`); if (r.details) console.log('     ' + (Array.isArray(r.details) ? r.details.join('\n     ') : JSON.stringify(r.details))) }
+  console.log(red ? `\n🔴 ${red} lỗi — chưa đạt` : '\nok — không có lỗi 🔴')
+}
+process.exit(red ? 1 : 0)
diff --git a/.claude/skills/ba-design/scripts/render-figma.sh b/.claude/skills/ba-design/scripts/render-figma.sh
new file mode 100755
index 0000000..540abd3
--- /dev/null
+++ b/.claude/skills/ba-design/scripts/render-figma.sh
@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# render-figma.sh — chụp PNG từng màn hình × khung nhìn × trạng thái của HIFI bằng Chrome/Edge headless sẵn có (không cài thêm).
+#   render-figma.sh <HIFI.html> <out-dir> [--scr SCR-01,SCR-03] [--views desktop,tablet,mobile] [--states default,loading,...]
+# Mặc định: mọi SCR có trong file · desktop+mobile · mọi trạng thái xuất hiện trong file (data-state). Ảnh: <out-dir>/SCR-xx.<view>.<state>.png
+set -euo pipefail
+HIFI="${1:?Thiếu đường dẫn HIFI.html}"; OUT="${2:?Thiếu thư mục output}"; shift 2
+SCRS=""; VIEWS="desktop,mobile"; STATES=""
+while [ $# -gt 0 ]; do case "$1" in --scr) SCRS="$2"; shift 2;; --views) VIEWS="$2"; shift 2;; --states) STATES="$2"; shift 2;; *) echo "Tham số lạ: $1" >&2; exit 2;; esac; done
+BROWSER=""
+for b in google-chrome google-chrome-stable chromium chromium-browser microsoft-edge microsoft-edge-stable msedge; do command -v "$b" >/dev/null 2>&1 && { BROWSER="$b"; break; }; done
+for p in "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge" "/c/Program Files/Google/Chrome/Application/chrome.exe" "/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"; do [ -z "$BROWSER" ] && [ -x "$p" ] && BROWSER="$p"; done
+[ -z "$BROWSER" ] && { echo "blocked: không tìm thấy Chrome/Edge — chụp tay: mở HIFI với ?scr=&view=&state= rồi lưu ảnh vào $OUT" >&2; exit 3; }
+[ -z "$SCRS" ] && SCRS=$(grep -oE 'class="hf-frame"[^>]*id="SCR-[0-9]+"' "$HIFI" | grep -oE 'SCR-[0-9]+' | paste -sd, -)
+[ -z "$STATES" ] && STATES=$(grep -oE 'data-state="[a-z-]+"' "$HIFI" | grep -oE '"[a-z-]+"' | tr -d '"' | sort -u | paste -sd, -)
+mkdir -p "$OUT"
+ABS=$(cd "$(dirname "$HIFI")" && pwd)/$(basename "$HIFI")
+n=0
+for scr in ${SCRS//,/ }; do for view in ${VIEWS//,/ }; do
+  case "$view" in desktop) W=1440; H=900;; tablet) W=834; H=1112;; mobile) W=390; H=844;; *) echo "view lạ: $view" >&2; exit 2;; esac
+  for st in ${STATES//,/ }; do
+    f="$OUT/$scr.$view.$st.png"
+    "$BROWSER" --headless=new --disable-gpu --no-first-run --no-default-browser-check --disable-extensions --hide-scrollbars \
+      --allow-file-access-from-files --virtual-time-budget=3000 --window-size="$W,$H" --screenshot="$f" \
+      "file://$ABS?scr=$scr&view=$view&state=$st&mode=mockup" >/dev/null 2>&1 && n=$((n+1)) || echo "lỗi: $scr $view $st" >&2
+  done
+done; done
+echo "ok: $n ảnh → $OUT (khung: desktop 1440×900 · tablet 834×1112 · mobile 390×844; nội dung dài hơn khung bị cắt — ghi chú trong DSPEC §1)"
diff --git a/.claude/skills/ba-design/templates/components.html b/.claude/skills/ba-design/templates/components.html
new file mode 100644
index 0000000..91c2d11
--- /dev/null
+++ b/.claude/skills/ba-design/templates/components.html
@@ -0,0 +1,303 @@
+<!--
+  components.html — component sheet của DS_<PROJECT>, sinh bởi skill ba-design (activity ds). Tự chứa, mở bằng trình duyệt.
+  QUY TẮC: <style> = tokens.css (khối :root) + ds-components.css NGUYÊN VĂN. Mỗi component có data-component và data-uiconv (khớp UICONV §11).
+  Đủ trạng thái: default · hover (mô tả) · focus · disabled (+ tooltip lý do) · loading · error. Không mã màu thô ngoài biến --ds-*.
+  Kiểm: node .claude/skills/ba-design/scripts/design-check.mjs --tokens tokens.json --css tokens.css --html components.html
+-->
+<!doctype html>
+<html lang="vi">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>DS — <PROJECT> — Components</title>
+<style>
+:root{
+  --ds-color-bg-canvas:#F6F7F9;
+  --ds-color-bg-surface:#FFFFFF;
+  --ds-color-bg-subtle:#EEF1F5;
+  --ds-color-border-default:#D5DAE1;
+  --ds-color-border-strong:#767F8C;
+  --ds-color-text-primary:#1B1F24;
+  --ds-color-text-secondary:#5B6472;
+  --ds-color-text-disabled:#9AA3AF;
+  --ds-color-text-inverse:#FFFFFF;
+  --ds-color-brand-primary:#2456A6;
+  --ds-color-brand-primary-hover:#1C468A;
+  --ds-color-brand-primary-subtle:#E7EEF9;
+  --ds-color-status-danger:#B42318;
+  --ds-color-status-danger-subtle:#FDECEA;
+  --ds-color-status-success:#1E7B45;
+  --ds-color-status-success-subtle:#E6F4EC;
+  --ds-color-status-warning:#B7791F;
+  --ds-color-status-warning-subtle:#FFF4DE;
+  --ds-color-focus-ring:#2456A6;
+  --ds-font-family-base:"Segoe UI","Roboto","Helvetica Neue","Arial",sans-serif;
+  --ds-font-family-mono:"SFMono-Regular","Consolas","Menlo",monospace;
+  --ds-font-size-xs:12px;
+  --ds-font-size-sm:14px;
+  --ds-font-size-md:16px;
+  --ds-font-size-lg:20px;
+  --ds-font-size-xl:24px;
+  --ds-font-size-2xl:32px;
+  --ds-font-weight-regular:400;
+  --ds-font-weight-semibold:600;
+  --ds-font-line-height-tight:1.25;
+  --ds-font-line-height-normal:1.5;
+  --ds-space-1:4px;
+  --ds-space-2:8px;
+  --ds-space-3:12px;
+  --ds-space-4:16px;
+  --ds-space-6:24px;
+  --ds-space-8:32px;
+  --ds-space-12:48px;
+  --ds-radius-sm:4px;
+  --ds-radius-md:8px;
+  --ds-radius-pill:999px;
+  --ds-shadow-sm:0px 1px 2px 0px #1B1F2414;
+  --ds-shadow-md:0px 4px 12px 0px #1B1F2426;
+  --ds-size-control-desktop:36px;
+  --ds-size-control-touch:44px;
+  --ds-size-icon:20px;
+  --ds-size-content-max:1200px;
+  --ds-breakpoint-tablet:768px;
+  --ds-breakpoint-desktop:1024px;
+}
+/* ds-components v1.1 — BEGIN
+   CSS component của DS_<PROJECT>. Chỉ dùng biến --ds-* (tokens.css); cấm mã màu/px thô ngoài khối này.
+   Từ vựng lớp = cột "Kiểu trình bày" của UICONV §11 (xem DS §3). Khối này được chép NGUYÊN VĂN vào
+   components.html và mọi HIFI_*.html — kiểm khớp bằng scripts/design-check.mjs. */
+*,*::before,*::after{box-sizing:border-box}
+html{font-family:var(--ds-font-family-base);font-size:var(--ds-font-size-sm);line-height:var(--ds-font-line-height-normal);color:var(--ds-color-text-primary);background:var(--ds-color-bg-canvas);-webkit-font-smoothing:antialiased}
+body{margin:0}
+h1,h2,h3{margin:0;line-height:var(--ds-font-line-height-tight);font-weight:var(--ds-font-weight-semibold)}
+h1{font-size:var(--ds-font-size-xl)}h2{font-size:var(--ds-font-size-lg)}h3{font-size:var(--ds-font-size-md)}
+a,.ds-link{color:var(--ds-color-brand-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
+a:hover,.ds-link:hover{color:var(--ds-color-brand-primary-hover)}
+:focus-visible{outline:2px solid var(--ds-color-focus-ring);outline-offset:2px}
+.ds-muted{color:var(--ds-color-text-secondary)}
+.ds-small{font-size:var(--ds-font-size-xs)}
+.ds-icon{width:var(--ds-size-icon);height:var(--ds-size-icon);flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
+.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+
+/* Layout */
+.ds-page{max-width:var(--ds-size-content-max);margin:0 auto;padding:var(--ds-space-6) var(--ds-space-4);display:grid;gap:var(--ds-space-4)}
+.ds-row{display:flex;gap:var(--ds-space-2);align-items:center;flex-wrap:wrap}
+.ds-row--between{justify-content:space-between}.ds-row--end{justify-content:flex-end}
+.ds-stack{display:grid;gap:var(--ds-space-3)}
+.ds-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--ds-space-4);align-items:start}
+.ds-header{position:sticky;top:0;z-index:5;background:var(--ds-color-bg-surface);border-bottom:1px solid var(--ds-color-border-default);padding:var(--ds-space-3) var(--ds-space-4);display:flex;align-items:center;gap:var(--ds-space-4);min-height:56px}
+.ds-breadcrumb{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-breadcrumb a{text-decoration:none}
+
+/* Nút — UICONV §11: nút chính / nút phụ / nút nguy hiểm / liên kết */
+.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);height:var(--ds-size-control-desktop);padding:0 var(--ds-space-4);border-radius:var(--ds-radius-sm);border:1px solid transparent;font:inherit;font-weight:var(--ds-font-weight-semibold);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s}
+.ds-btn--primary{background:var(--ds-color-brand-primary);color:var(--ds-color-text-inverse)}
+.ds-btn--primary:hover{background:var(--ds-color-brand-primary-hover)}
+.ds-btn--secondary{background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);border-color:var(--ds-color-border-strong)}
+.ds-btn--secondary:hover{background:var(--ds-color-bg-subtle)}
+.ds-btn--danger{background:var(--ds-color-status-danger);color:var(--ds-color-text-inverse)}
+.ds-btn--ghost{background:transparent;color:var(--ds-color-brand-primary)}
+.ds-btn--icon{width:var(--ds-size-control-desktop);padding:0}
+.ds-btn[aria-disabled="true"],.ds-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
+.ds-btn.is-loading{pointer-events:none}
+.ds-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .8s linear infinite;flex:none}
+@keyframes ds-spin{to{transform:rotate(360deg)}}
+
+/* Field — UICONV §4: nhãn trên field, * sau nhãn, lỗi dưới field thay hint */
+.ds-field{display:grid;gap:var(--ds-space-1)}
+.ds-field__label{font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);color:var(--ds-color-text-primary)}
+.ds-field__label .ds-req{color:var(--ds-color-status-danger);margin-left:2px}
+.ds-field__hint{font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-field__error{font-size:var(--ds-font-size-xs);color:var(--ds-color-status-danger);display:flex;gap:var(--ds-space-1);align-items:center}
+.ds-input,.ds-select,.ds-textarea{width:100%;height:var(--ds-size-control-desktop);padding:0 var(--ds-space-3);border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);font:inherit}
+.ds-textarea{height:auto;min-height:88px;padding:var(--ds-space-2) var(--ds-space-3)}
+.ds-input::placeholder{color:var(--ds-color-text-secondary)}
+.ds-input:hover,.ds-select:hover{border-color:var(--ds-color-text-secondary)}
+.ds-input:focus,.ds-select:focus{border-color:var(--ds-color-brand-primary);outline:2px solid var(--ds-color-focus-ring);outline-offset:0}
+.ds-input.is-invalid,.ds-select.is-invalid{border-color:var(--ds-color-status-danger)}
+.ds-input[disabled],.ds-select[disabled]{background:var(--ds-color-bg-subtle);color:var(--ds-color-text-disabled);cursor:not-allowed}
+.ds-input[readonly]{border-color:transparent;background:transparent;padding-left:0}
+.ds-input-wrap{position:relative}
+.ds-input-wrap .ds-icon{position:absolute;left:var(--ds-space-3);top:50%;transform:translateY(-50%);color:var(--ds-color-text-secondary)}
+.ds-input-wrap .ds-input{padding-left:calc(var(--ds-space-3) + var(--ds-size-icon) + var(--ds-space-2))}
+.ds-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6472' stroke-width='1.75'><path d='m4 6 4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right var(--ds-space-3) center;padding-right:calc(var(--ds-space-3) + 24px)}
+.ds-check{display:inline-flex;align-items:center;gap:var(--ds-space-2);cursor:pointer;min-height:var(--ds-size-control-desktop)}
+.ds-check input{width:18px;height:18px;margin:0;accent-color:var(--ds-color-brand-primary)}
+.ds-switch{position:relative;width:40px;height:22px;border-radius:var(--ds-radius-pill);background:var(--ds-color-border-strong);display:inline-block;flex:none}
+.ds-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ds-color-bg-surface)}
+.ds-switch[aria-checked="true"]{background:var(--ds-color-brand-primary)}
+.ds-switch[aria-checked="true"]::after{left:20px}
+.ds-stepper{display:inline-flex;border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);height:var(--ds-size-control-desktop);overflow:hidden}
+.ds-stepper button{width:var(--ds-size-control-desktop);border:0;background:var(--ds-color-bg-surface);font:inherit;cursor:pointer;color:var(--ds-color-text-primary)}
+.ds-stepper input{width:48px;text-align:center;border:0;border-left:1px solid var(--ds-color-border-default);border-right:1px solid var(--ds-color-border-default);font:inherit}
+
+/* Bảng / Card — UICONV §3, §11 */
+.ds-table-wrap{overflow-x:auto;border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-surface)}
+.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-font-size-sm)}
+.ds-table th,.ds-table td{padding:var(--ds-space-3) var(--ds-space-4);text-align:left;border-bottom:1px solid var(--ds-color-border-default);vertical-align:middle}
+.ds-table th{background:var(--ds-color-bg-subtle);font-weight:var(--ds-font-weight-semibold);font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary);white-space:nowrap}
+.ds-table th[aria-sort]{cursor:pointer}
+.ds-table tbody tr:hover{background:var(--ds-color-bg-canvas)}
+.ds-table tbody tr[aria-selected="true"]{background:var(--ds-color-brand-primary-subtle)}
+.ds-table tbody tr:last-child td{border-bottom:0}
+.ds-table td.ds-num{text-align:right;font-variant-numeric:tabular-nums}
+.ds-card{background:var(--ds-color-bg-surface);border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);padding:var(--ds-space-4);display:grid;gap:var(--ds-space-2)}
+.ds-cards{display:grid;gap:var(--ds-space-3)}
+.ds-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--ds-space-2);border-radius:var(--ds-radius-pill);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);background:var(--ds-color-bg-subtle);color:var(--ds-color-text-primary)}
+.ds-badge--info{background:var(--ds-color-brand-primary-subtle)}
+.ds-badge--success{background:var(--ds-color-status-success-subtle);color:var(--ds-color-status-success)}
+.ds-badge--warning{background:var(--ds-color-status-warning-subtle);color:var(--ds-color-status-warning)}
+.ds-badge--danger{background:var(--ds-color-status-danger-subtle);color:var(--ds-color-status-danger)}
+.ds-tabs{display:flex;gap:var(--ds-space-4);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-tab{padding:var(--ds-space-2) 0;border-bottom:2px solid transparent;color:var(--ds-color-text-secondary);cursor:pointer;font-weight:var(--ds-font-weight-semibold)}
+.ds-tab[aria-selected="true"]{color:var(--ds-color-brand-primary);border-bottom-color:var(--ds-color-brand-primary)}
+.ds-pagination{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-price{font-variant-numeric:tabular-nums;font-weight:var(--ds-font-weight-semibold)}
+.ds-thumb{width:64px;height:64px;border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-subtle);border:1px solid var(--ds-color-border-default);display:grid;place-items:center;color:var(--ds-color-text-secondary);flex:none}
+
+/* Phản hồi hệ thống — UICONV §5, §6 */
+.ds-toast{position:fixed;top:var(--ds-space-4);right:var(--ds-space-4);z-index:20;min-width:280px;max-width:420px;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);background:var(--ds-color-text-primary);color:var(--ds-color-text-inverse);box-shadow:var(--ds-shadow-md);display:flex;gap:var(--ds-space-3);align-items:flex-start}
+.ds-toast--error{background:var(--ds-color-status-danger)}
+.ds-banner{display:flex;gap:var(--ds-space-3);align-items:flex-start;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-default);background:var(--ds-color-bg-subtle)}
+.ds-banner--error{background:var(--ds-color-status-danger-subtle);border-color:var(--ds-color-status-danger);color:var(--ds-color-status-danger)}
+.ds-banner--warning{background:var(--ds-color-status-warning-subtle);border-color:var(--ds-color-status-warning)}
+.ds-empty{display:grid;justify-items:center;text-align:center;gap:var(--ds-space-3);padding:var(--ds-space-12) var(--ds-space-4);color:var(--ds-color-text-secondary)}
+.ds-empty__illus{width:120px;height:88px;color:var(--ds-color-border-strong)}
+.ds-empty--filter{padding:var(--ds-space-8) var(--ds-space-4)}
+.ds-skeleton{height:14px;border-radius:var(--ds-radius-sm);background:linear-gradient(90deg,var(--ds-color-bg-subtle),var(--ds-color-bg-canvas),var(--ds-color-bg-subtle));background-size:200% 100%;animation:ds-shimmer 1.2s infinite}
+@keyframes ds-shimmer{to{background-position:-200% 0}}
+.ds-modal-backdrop{position:fixed;inset:0;background:#1B1F2480;display:grid;place-items:center;z-index:10;padding:var(--ds-space-4)}
+.ds-modal{width:100%;max-width:520px;background:var(--ds-color-bg-surface);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md);display:grid}
+.ds-modal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--ds-space-4) var(--ds-space-6);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-modal__body{padding:var(--ds-space-6);display:grid;gap:var(--ds-space-4)}
+.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--ds-space-2);padding:var(--ds-space-4) var(--ds-space-6);border-top:1px solid var(--ds-color-border-default)}
+.ds-status-page{display:grid;justify-items:center;gap:var(--ds-space-3);padding:var(--ds-space-12);text-align:center}
+
+/* Trạng thái ẩn/khoá/read-only — W7 */
+[data-vis="hidden"]{display:none!important}
+[data-vis="disabled"]{opacity:.45;pointer-events:none}
+[data-vis="readonly"] .ds-input{border-color:transparent;background:transparent}
+
+/* Responsive — breakpoint theo UICONV §1; body[data-view] ép khung nhìn khi xem trong HIFI */
+@media (max-width:1023px){.ds-cols{grid-template-columns:1fr}}
+@media (max-width:767px){
+  .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+  .ds-btn{height:var(--ds-size-control-touch)}
+  .ds-input,.ds-select{height:var(--ds-size-control-touch)}
+  .ds-table-wrap{display:none}.ds-cards{display:grid}
+  .ds-hide-m{display:none!important}
+}
+@media (min-width:768px){.ds-cards{display:none}.ds-hide-d{display:none!important}}
+body[data-view="mobile"] .ds-cols{grid-template-columns:1fr}
+body[data-view="mobile"] .ds-table-wrap{display:none}body[data-view="mobile"] .ds-cards{display:grid}
+body[data-view="mobile"] .ds-hide-m{display:none!important}body[data-view="mobile"] .ds-hide-d{display:revert}
+body[data-view="mobile"] .ds-btn,body[data-view="mobile"] .ds-input,body[data-view="mobile"] .ds-select{height:var(--ds-size-control-touch)}
+body[data-view="mobile"] .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+body[data-view="tablet"] .ds-cols{grid-template-columns:1fr}
+/* Tiện ích xếp chồng ở mobile: phần tử trong .ds-row chiếm trọn hàng (nhóm nút thao tác của một dòng danh sách/CartItem…) */
+.ds-m-full{}
+@media (max-width:767px){.ds-m-full{flex-basis:100%;min-width:0}}
+body[data-view="mobile"] .ds-m-full{flex-basis:100%;min-width:0}
+/* ds-components v1.1 — END */
+</style>
+</head>
+<body>
+<header class="ds-header">
+  <h1 style="font-size:var(--ds-font-size-md)">DS_&lt;PROJECT&gt; · Component sheet v1.0</h1>
+  <span class="ds-muted ds-small">Mỗi component = một dòng UICONV §11 · đủ trạng thái default / hover / focus / disabled / loading / error · chỉ dùng biến <code>--ds-*</code></span>
+</header>
+<main class="ds-page">
+
+<section class="ds-card" data-component="Nút" data-uiconv="Nút chính · Nút phụ · Nút nguy hiểm · Liên kết">
+  <h2>Nút</h2>
+  <div class="ds-row">
+    <button class="ds-btn ds-btn--primary">Tạo mới</button>
+    <button class="ds-btn ds-btn--secondary">Huỷ</button>
+    <button class="ds-btn ds-btn--danger">Xoá</button>
+    <button class="ds-btn ds-btn--ghost">Xoá lọc</button>
+    <a class="ds-link" href="#">Chi tiết</a>
+  </div>
+  <div class="ds-row">
+    <button class="ds-btn ds-btn--primary" aria-disabled="true" title="Chọn ít nhất 1 dòng để bật">Disabled + tooltip lý do (UICONV §7)</button>
+    <button class="ds-btn ds-btn--primary is-loading"><span class="ds-spinner"></span>Đang lưu…</button>
+    <button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Đóng"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+  </div>
+  <p class="ds-small ds-muted">Hover: nền tối hơn một bậc (<code>--ds-color-brand-primary-hover</code>). Focus: viền 2px <code>--ds-color-focus-ring</code>. Chiều cao 36px desktop / 44px mobile.</p>
+</section>
+
+<section class="ds-card" data-component="Field" data-uiconv="Ô nhập · Ô nhập số · Chọn 1 · Chọn nhiều · Chọn ngày · Công tắc">
+  <h2>Field</h2>
+  <div class="ds-cols" style="grid-template-columns:1fr 1fr">
+    <label class="ds-field"><span class="ds-field__label">Mã <b class="ds-req">*</b></span><input class="ds-input" placeholder="3–20 ký tự, A–Z 0–9 -"><span class="ds-field__hint">Không trùng với mã đã có</span></label>
+    <label class="ds-field"><span class="ds-field__label">Mã <b class="ds-req">*</b></span><input class="ds-input is-invalid" value="ab"><span class="ds-field__error"><svg class="ds-icon" style="width:14px;height:14px" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>Mã phải có từ 3 đến 20 ký tự.</span></label>
+    <label class="ds-field"><span class="ds-field__label">Loại</span><select class="ds-select"><option>Thường</option></select></label>
+    <label class="ds-field"><span class="ds-field__label">Tên (read-only)</span><input class="ds-input" readonly value="Cửa hàng A"></label>
+    <label class="ds-field"><span class="ds-field__label">Tên (disabled)</span><input class="ds-input" disabled value="Cửa hàng A"></label>
+    <div class="ds-field"><span class="ds-field__label">Tìm kiếm</span><div class="ds-input-wrap"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input class="ds-input" placeholder="Nhập mã hoặc tên…"></div></div>
+  </div>
+  <div class="ds-row">
+    <label class="ds-check"><input type="checkbox" checked> Chọn nhiều</label>
+    <label class="ds-check"><input type="radio" name="r" checked> Chọn 1 (≤ 7 lựa chọn)</label>
+    <span class="ds-row"><span class="ds-switch" role="switch" aria-checked="true"></span> Công tắc</span>
+    <span class="ds-stepper"><button aria-label="Giảm">−</button><input value="2" aria-label="Số lượng"><button aria-label="Tăng">+</button></span>
+  </div>
+</section>
+
+<section class="ds-card" data-component="Bảng / Card" data-uiconv="Bảng · Card · Badge trạng thái">
+  <h2>Bảng (desktop) → Card (mobile)</h2>
+  <div class="ds-table-wrap"><table class="ds-table">
+    <thead><tr><th aria-sort="ascending">Mã ▲</th><th>Tên</th><th>Trạng thái</th><th class="ds-num">Số tiền</th><th></th></tr></thead>
+    <tbody>
+      <tr><td>STR-001</td><td>Cửa hàng A</td><td><span class="ds-badge">Nháp</span></td><td class="ds-num ds-price">1.234.567 ₫</td><td><a class="ds-link">Chi tiết</a></td></tr>
+      <tr aria-selected="true"><td>STR-002</td><td>Cửa hàng B</td><td><span class="ds-badge ds-badge--success">Đã duyệt</span></td><td class="ds-num ds-price">890.000 ₫</td><td><a class="ds-link">Chi tiết</a></td></tr>
+      <tr><td>STR-003</td><td>Cửa hàng C</td><td><span class="ds-badge ds-badge--danger">Từ chối</span></td><td class="ds-num ds-price">—</td><td><a class="ds-link">Chi tiết</a></td></tr>
+    </tbody></table></div>
+  <div class="ds-cards" style="display:grid"><div class="ds-card"><div class="ds-row ds-row--between"><b>STR-001</b><span class="ds-badge">Nháp</span></div><div>Cửa hàng A</div><div class="ds-small ds-muted">30/08/2026</div></div></div>
+  <div class="ds-row"><span class="ds-badge">Mặc định</span><span class="ds-badge ds-badge--info">Thông tin</span><span class="ds-badge ds-badge--success">Thành công</span><span class="ds-badge ds-badge--warning">Cảnh báo</span><span class="ds-badge ds-badge--danger">Lỗi</span></div>
+  <div class="ds-row ds-row--between"><div class="ds-tabs"><span class="ds-tab" aria-selected="true">Tất cả</span><span class="ds-tab">Nháp</span><span class="ds-tab">Đã duyệt</span></div><div class="ds-pagination"><button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Trang trước">‹</button><span>1 / 7</span><button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Trang sau">›</button></div></div>
+</section>
+
+<section class="ds-card" data-component="Trạng thái chuẩn" data-uiconv="Skeleton · Toast · Banner · Trang trạng thái">
+  <h2>Trạng thái chuẩn (UICONV §6) — hai trạng thái rỗng phải trông khác nhau</h2>
+  <div class="ds-cols" style="grid-template-columns:1fr 1fr">
+    <div class="ds-card"><b class="ds-small">Đang tải</b><div class="ds-skeleton"></div><div class="ds-skeleton" style="width:85%"></div><div class="ds-skeleton" style="width:60%"></div></div>
+    <div class="ds-card"><b class="ds-small">Lỗi tải (banner trong vùng)</b><div class="ds-banner ds-banner--error"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg><span>Không tải được dữ liệu.</span><button class="ds-btn ds-btn--secondary" style="margin-left:auto;height:32px">Thử lại</button></div></div>
+    <div class="ds-card"><b class="ds-small">Rỗng — chưa có dữ liệu (minh hoạ + nút chính)</b><div class="ds-empty"><svg class="ds-empty__illus" viewBox="0 0 120 88" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="16" y="20" width="88" height="56" rx="6"/><path d="M16 36h88M32 52h28M32 62h44"/></svg><span>Chưa có cửa hàng nào.</span><button class="ds-btn ds-btn--primary">Tạo mới</button></div></div>
+    <div class="ds-card"><b class="ds-small">Rỗng — bộ lọc không khớp (không minh hoạ + nút phụ)</b><div class="ds-empty ds-empty--filter"><span>Không tìm thấy kết quả phù hợp với bộ lọc.</span><button class="ds-btn ds-btn--secondary">Xoá lọc</button></div></div>
+  </div>
+  <div class="ds-row">
+    <div class="ds-toast" style="position:static"><svg class="ds-icon" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></svg><span>Đã lưu cửa hàng STR-004.</span><button class="ds-btn ds-btn--ghost ds-btn--icon" aria-label="Đóng" style="color:inherit;height:24px;width:24px;margin-left:auto">✕</button></div>
+    <div class="ds-toast ds-toast--error" style="position:static"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg><span>Không lưu được. Thử lại sau.</span></div>
+  </div>
+</section>
+
+<section class="ds-card" data-component="Modal" data-uiconv="Modal · Drawer · Bottom-sheet">
+  <h2>Modal xác nhận (UICONV §5) — nút chính bên phải, hành động nguy hiểm dùng nút nguy hiểm</h2>
+  <div class="ds-modal" style="box-shadow:var(--ds-shadow-sm)">
+    <div class="ds-modal__head"><h3>Xoá cửa hàng STR-001?</h3><button class="ds-btn ds-btn--ghost ds-btn--icon" aria-label="Đóng"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
+    <div class="ds-modal__body"><p style="margin:0">Hành động này không hoàn tác được.</p><label class="ds-field"><span class="ds-field__label">Lý do <b class="ds-req">*</b></span><textarea class="ds-textarea" placeholder="Tối đa 200 ký tự"></textarea></label></div>
+    <div class="ds-modal__foot"><button class="ds-btn ds-btn--secondary">Huỷ</button><button class="ds-btn ds-btn--danger">Xoá</button></div>
+  </div>
+</section>
+
+<section class="ds-card" data-component="Icon" data-uiconv="—">
+  <h2>Icon — inline SVG 24 grid, stroke 1.75, không emoji</h2>
+  <div class="ds-row" style="gap:var(--ds-space-4)">
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="search"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="plus"><path d="M12 5v14M5 12h14"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="close"><path d="M6 6l12 12M18 6 6 18"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="chevron-down"><path d="m6 9 6 6 6-6"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="back"><path d="M19 12H5m7-7-7 7 7 7"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="check"><path d="m5 12 4 4L19 6"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="alert"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="trash"><path d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="filter"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="cart"><path d="M3 4h2l2.4 11h11.2L21 7H6"/><circle cx="9" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="user"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="menu"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
+  </div>
+</section>
+
+</main>
+</body>
+</html>
diff --git a/.claude/skills/ba-design/templates/design-spec.md b/.claude/skills/ba-design/templates/design-spec.md
new file mode 100644
index 0000000..76fc8dc
--- /dev/null
+++ b/.claude/skills/ba-design/templates/design-spec.md
@@ -0,0 +1,128 @@
+# DSPEC — Đặc tả thiết kế & bàn giao — <US-id>
+
+| | |
+|---|---|
+| **Version** | 1.0 |
+| **Date** | YYYY-MM-DD |
+| **Author** | <BA/Design> (skill ba-design, activity `dspec`) |
+| **Status** | 🟡 Draft |
+| **Approved by** | Designer: — · PO: — |
+| **Source** | SRS_<US> v1.0 · WF_<US> v1.0 · UICONV_<PROJECT> v1.0 · DS_<PROJECT> v1.0 · prototype: <đường dẫn / "không có"> |
+| **Scope** | US-0nn · SCR-01, SCR-02, … |
+| **Tệp kèm** | `HIFI_<US>_v1.0.html` · `FIGMA_<US>_v1.0/` |
+| **Prototype bấm được** | ✅ có (`HIFI…html?mode=proto`) / ❌ không |
+
+## Change Log
+
+| Version | Date | Người sửa | Thay đổi | CR |
+|---|---|---|---|---|
+| 1.0 | | | Bản đầu | — |
+
+> **Quy ước đọc** *(W11)*. `SRS` quyết định phần tử **có tồn tại không** và **hành xử thế nào**; `WF` quyết định
+> **nằm ở đâu**; `DS` quyết định **trông thế nào** (token, component); tài liệu này ghi **con số cụ thể** để Dev FE dựng
+> đúng HIFI mà không phải đo bằng mắt. Mâu thuẫn ⇒ SRS > WF > DS > HIFI, và mâu thuẫn phải ghi ở §6.
+
+---
+
+## 0. Nguồn bố cục và độ tin cậy
+
+| | |
+|---|---|
+| **HIFI dựng từ** | `WF` §3 (bố cục) + `DS` (visual) + `SRS` §2.3 / §4.2 (thành phần, text) |
+| **Prototype tham chiếu** | *(Figma/HTML/SAD §7 · phiên bản · mức phủ n/m màn hình — theo `WF` §0)* |
+| **Độ tin cậy visual** | 🟢 DS có brand thật · 🟡 DS suy từ prototype · 🔴 DS placeholder trung tính (`DS` §0) — *HIFI mang độ tin cậy của DS* |
+
+## 1. Bản đồ màn hình → tệp
+
+| SCR | Tên | HIFI (`#id`) | Trạng thái có trong HIFI | SVG (FIGMA) | PNG | Khớp WF §3.x |
+|---|---|---|---|---|---|---|
+| SCR-01 | | `HIFI_<US>_v1.0.html#SCR-01` | default · loading · empty-none · empty-filter · error | `SCR-01.desktop.svg` · `SCR-01.mobile.svg` | `png/SCR-01.desktop.default.png` … | ✅ |
+
+*Mọi `SCR` của `SRS` §2.1 phải có một dòng. Trạng thái phải khớp `SRS` §2.3.6 / `WF` §3.x.3 — thiếu trạng thái nào ghi rõ và lý do.*
+
+## 2. Redline từng màn hình
+
+### 2.1 SCR-01 — <Tên màn hình>
+
+| Vùng (WF) | Kích thước desktop | Kích thước mobile | Padding | Gap | Token nền / viền |
+|---|---|---|---|---|---|
+| Z1 Header màn hình | full × auto | full × auto | `space.6` `space.4` | `space.2` | `bg.canvas` |
+| Z3 Dữ liệu | full | full | 0 | — | `bg.surface` + `border.default`, `radius.md` |
+
+| C-id | Thành phần | Lớp DS | Kích thước | Token chữ | Token màu | Trạng thái thể hiện trong HIFI |
+|---|---|---|---|---|---|---|
+| C01 | lbl_title | h1 | auto | `size.xl / semibold` | `text.primary` | — |
+| C02 | btn_create | `.ds-btn--primary` | auto × 36 (44 mobile) | `size.sm / semibold` | `brand.primary` | hover · focus · disabled(+tooltip) |
+
+**Khác biệt so với `WF` §3.1:** *(không có / liệt kê — mọi khác biệt về vị trí phải có lý do và Designer duyệt)*
+
+### 2.2 SCR-02 — …
+
+*(lặp 2.1)*
+
+## 3. Ánh xạ trạng thái nghiệp vụ → hiển thị
+
+| Trạng thái (BR §3) | Badge (DS §3) | Nhãn nguyên văn (SRS §4.2) | Hành động bị khoá (W7, SRS §2.3.1) |
+|---|---|---|---|
+
+## 4. Luồng prototype *(chỉ khi có prototype bấm được)*
+
+*Mỗi cạnh khớp `SRS` §2.2; cạnh có trong HIFI mà SRS không có ⇒ §6.*
+
+| Từ | Thành phần (`data-nav`) | Đến | Có trong SRS §2.2 |
+|---|---|---|---|
+| SCR-01 | C02 btn_create | SCR-03 | ✅ |
+
+## 5. Khả năng truy cập
+
+| Kiểm tra | Kết quả | Bằng chứng |
+|---|---|---|
+| Tương phản chữ (AA ≥ 4.5) trên mọi cặp dùng trong HIFI | ☐/✅ | `design-check.mjs` T2 |
+| Hit target mobile ≥ 44 px cho mọi nút/ô nhập | | `size.control.touch` áp qua `body[data-view="mobile"]` |
+| Thứ tự focus khớp `WF` §3.x.6 | | thứ tự DOM trong HIFI |
+| Mọi ô nhập có nhãn; mọi icon-button có `aria-label` | | grep `aria-label` |
+| Không truyền nghĩa chỉ bằng màu (badge có chữ, lỗi có icon + text) | | |
+| Tắt motion khi `prefers-reduced-motion` | | DS §7 |
+
+## 6. Lệch HIFI ↔ WF / SRS / DS
+
+*Bắt buộc, kể cả rỗng ("đã đối chiếu n màn hình, không lệch"). Lệch với `SRS` về Tồn tại/Hành vi/Text ⇒ 🔴 chặn G3; lệch với `WF` về bố cục ⇒ Designer quyết; lệch với `DS` ⇒ phải có dòng `DS` §8.*
+
+| # | Màn hình | HIFI có | Tài liệu nói | Loại | Bên thắng | Xử lý | Ai quyết | Trạng thái |
+|---|---|---|---|---|---|---|---|---|
+
+**Kết quả `design-check.mjs`:** C-id lệch hai chiều: *(rỗng)* · data-key text lệch SRS §4.2: *(rỗng)* · mã màu thô ngoài token: *(0)* · SCR thiếu: *(0)*.
+
+## 7. Bàn giao cho Dev FE
+
+| | |
+|---|---|
+| **Lấy từ HIFI** | Bố cục, khoảng cách, token, trạng thái thị giác, thứ tự DOM/focus. Mở `?ids=1&zones=1` để thấy C-id và vùng |
+| **Lấy từ SRS** | Hành vi, điều kiện ẩn/khoá, validation, mã lỗi, text (HIFI chỉ *chép* text từ SRS §4.2) |
+| **Lấy từ DS** | `tokens.json` → biến CSS/theme của stack đã chọn; lớp `.ds-*` → component tương ứng (DS §3 cột 3) |
+| **Không được suy ra từ HIFI** | Dữ liệu mẫu (số liệu, tên) · độ dài/khoảng giá trị (ở SRS §2.3.3) · hành vi khi lỗi (SRS §2.3.5) |
+| **Khi Designer sửa trong Figma** | Báo BA ⇒ chạy lại `hifi` + `figma` với `--proto <link>`; `SRS` chỉ đổi nếu lệch Tồn tại/Hành vi được PO chấp nhận |
+| **Ảnh tham chiếu** | `FIGMA_<US>_v1.0/png/` — chụp từ HIFI, dùng để đối chiếu pixel khi review giao diện đã build (ba-4) |
+
+## 8. Open Questions
+
+| ID | Câu hỏi | Hỏi ai | Từ ngày | Chặn gì | 🔴 chặn G3? |
+|---|---|---|---|---|---|
+
+---
+
+## Tự chấm
+
+| # | Tiêu chí | ☐/✅ | Ghi chú |
+|---|---|---|---|
+| 1 | Mọi `SCR` của `SRS` §2.1 có mặt trong HIFI (`#SCR-xx`) và §1 | | design-check H5 |
+| 2 | Tập `data-c`/`data-f` trong HIFI khớp **hai chiều** với `SRS` §2.3.1 / §2.3.3 | | design-check H3 |
+| 3 | Mọi `data-key` có text **nguyên văn** bằng `SRS` §4.2 (W5) | | design-check H4 |
+| 4 | Mọi trạng thái `SRS` §2.3.6 có khối `data-state` tương ứng; hai trạng thái rỗng trông khác nhau | | |
+| 5 | HIFI chỉ dùng biến `--ds-*` và lớp `.ds-*`; không mã màu thô trong markup | | design-check H2 |
+| 6 | Khối `:root` và khối `ds-components` trong HIFI **trùng nguyên văn** với `ds/tokens.css` + `ds/components.html` | | design-check H1 |
+| 7 | Mỗi SCR có ≥ 2 khung nhìn (desktop + mobile) trong HIFI **và** trong `FIGMA/*.svg` | | design-check S1 |
+| 8 | Mã màu trong SVG ⊆ tập token | | design-check S1 |
+| 9 | §5 tương phản đạt AA cho mọi cặp chữ | | design-check T2 |
+| 10 | §6 đã điền; không còn lệch Tồn tại/Hành vi/Text với SRS | | |
+| 11 | Có chữ ký Designer (hoặc PO + `DEC-nn`) | | |
diff --git a/.claude/skills/ba-design/templates/design-system.md b/.claude/skills/ba-design/templates/design-system.md
new file mode 100644
index 0000000..52fd147
--- /dev/null
+++ b/.claude/skills/ba-design/templates/design-system.md
@@ -0,0 +1,196 @@
+# DS — Design System — <PROJECT>
+
+| | |
+|---|---|
+| **Version** | 1.0 |
+| **Date** | YYYY-MM-DD |
+| **Author** | <BA/Design> (skill ba-design, activity `ds`) |
+| **Status** | 🟡 Draft |
+| **Approved by** | Designer: — · PO: — |
+| **Source** | UICONV_<PROJECT> v1.0 · brand guideline: <đường dẫn / "chưa có — OQ-nnn"> · design system tham chiếu: <tên + version / "chưa có"> · SAD §7 (nếu có) |
+| **Scope** | Toàn project — mọi `HIFI`, `FIGMA`, `DSPEC` có `PRODUCT = screen` |
+| **Profile** | `screen · … · …` |
+| **Tệp kèm** | `00-index/ds/tokens.json` (nguồn sự thật) · `ds/tokens.css` (sinh từ json) · `ds/components.html` (component sheet, mở bằng trình duyệt) |
+
+## Change Log
+
+| Version | Date | Người sửa | Thay đổi | CR |
+|---|---|---|---|---|
+| 1.0 | | | Bản đầu | — |
+
+> **Vai trò của tài liệu này.** `UICONV` nói *hành xử thế nào* (phân trang, vị trí toast, validate lúc nào);
+> tài liệu này nói *trông thế nào* (màu, chữ, khoảng cách, bo góc, đổ bóng, trạng thái hover/focus/disabled).
+> `HIFI` và `FIGMA` chỉ dùng token và component ở đây; muốn khác phải có dòng ở §8.
+>
+> **Thứ tự ưu tiên khi lệch:** Brand guideline của khách > Design system tham chiếu (nếu dự án đã chọn) >
+> `DS` này > `HIFI` từng US. Thiếu brand ⇒ giá trị ở đây là **đề xuất trung tính** chờ Designer/PO chốt — ghi `OQ`, không tự coi là đã duyệt.
+
+---
+
+## 0. Nguồn và độ tin cậy
+
+| | |
+|---|---|
+| **Brand guideline** | *(file/URL + version, hoặc "Chưa có" ⇒ mọi giá trị màu/chữ ở §1 là placeholder trung tính, `OQ-nnn`)* |
+| **Design system tham chiếu** | *(Material 3 / Ant Design / nội bộ… + version — theo `OQ` ở UICONV §0 hoặc quyết định của Tech Lead `DEC-nn`)* |
+| **Prototype đã có** | *(Figma / HTML / SAD §7 — token được trích từ đây nếu có)* |
+| **Ai sở hữu** | BA/Design đề xuất · **Designer duyệt** visual · PO duyệt giọng văn/nhận diện · Dev FE xác nhận khả năng hiện thực với stack đã chọn |
+| **Độ tin cậy** | 🟢 Trích từ brand/DS thật · 🟡 Suy từ prototype · 🔴 Đề xuất trung tính, chưa có nguồn — *(chọn một, ghi lý do)* |
+
+## 1. Token
+
+*Bảng này tóm tắt; giá trị chuẩn ở `ds/tokens.json`. Sửa ⇒ sửa json, sinh lại css, chạy `design-check.mjs`.*
+
+### 1.1 Màu
+
+| Token | Giá trị | Dùng cho | Nguồn |
+|---|---|---|---|
+| `color.bg.canvas` | | Nền trang | |
+| `color.bg.surface` | | Card, bảng, modal | |
+| `color.bg.subtle` | | Header bảng, vùng phụ | |
+| `color.border.default` / `.strong` | | Viền chia / viền ô nhập | |
+| `color.text.primary` / `.secondary` / `.disabled` / `.inverse` | | Chữ chính / phụ / vô hiệu / trên nền đậm | |
+| `color.brand.primary` / `-hover` / `-subtle` | | Nút chính, liên kết, focus / hover / nền chọn | |
+| `color.status.danger` / `success` / `warning` (+ `-subtle`) | | Lỗi / thành công / cảnh báo | |
+
+### 1.2 Chữ
+
+| Token | Giá trị | Dùng cho |
+|---|---|---|
+| `font.family.base` | | Toàn hệ thống — *(font brand hay system stack? nguồn)* |
+| `font.size.xs / sm / md / lg / xl / 2xl` | 12 / 14 / 16 / 20 / 24 / 32 px | Hint, nhãn / body / nhãn field lớn, h3 / h2 / h1 / số KPI |
+| `font.weight.regular / semibold` | 400 / 600 | |
+| `font.line-height.tight / normal` | 1.25 / 1.5 | Tiêu đề / body |
+
+### 1.3 Khoảng cách, bo góc, đổ bóng, kích thước
+
+| Token | Giá trị | Ghi chú |
+|---|---|---|
+| `space.1 … 12` | 4 · 8 · 12 · 16 · 24 · 32 · 48 px | Thang 4px; không dùng số ngoài thang |
+| `radius.sm / md / pill` | 4 / 8 / 999 px | Nút, ô nhập / card, modal / badge |
+| `shadow.sm / md` | | Card nổi / modal, toast |
+| `size.control.desktop / touch` | 36 / 44 px | Chiều cao nút, ô nhập; **mobile ≥ 44px** (hit target) |
+| `size.icon` | 20 px | Icon inline |
+| `size.content-max` | 1200 px | Khớp UICONV §1 max-width |
+| `breakpoint.tablet / desktop` | 768 / 1024 px | **Phải khớp UICONV §1** |
+
+## 2. Thang chữ áp dụng
+
+| Cấp | Token size / weight / line-height | Dùng ở |
+|---|---|---|
+| H1 — tiêu đề màn hình | xl / semibold / tight | `C01` kiểu "Tiêu đề cấp 1" |
+| H2 — tiêu đề vùng, modal | lg / semibold / tight | |
+| H3 — tiêu đề card | md / semibold / tight | |
+| Body | sm / regular / normal | Bảng, form, câu dẫn |
+| Nhãn field, hint, header bảng | xs / semibold hoặc regular / normal | |
+
+## 3. Từ vựng component — ánh xạ ba chiều
+
+*Cột 1 = UICONV §11 (BA) · cột 2 = lớp CSS trong `ds/components.html` (HIFI dùng) · cột 3 = component của design system tham chiếu (Dev FE dùng). Mọi kiểu trình bày xuất hiện trong `WF` phải có dòng ở đây.*
+
+| Kiểu trình bày (UICONV §11) | Lớp DS | Component DS tham chiếu | Ghi chú |
+|---|---|---|---|
+| Nút chính | `.ds-btn.ds-btn--primary` | | Một nút chính mỗi màn hình |
+| Nút phụ | `.ds-btn.ds-btn--secondary` | | |
+| Nút nguy hiểm | `.ds-btn.ds-btn--danger` | | Luôn kèm modal xác nhận |
+| Liên kết | `.ds-link` | | |
+| Ô nhập / Ô nhập số | `.ds-field` + `.ds-input` | | Nhãn trên field, `*` sau nhãn |
+| Chọn 1 (≤7) / (>7) | `.ds-check` radio / `.ds-select` | | |
+| Chọn nhiều | `.ds-check` checkbox | | |
+| Công tắc | `.ds-switch` | | |
+| Bộ đếm số lượng | `.ds-stepper` | | |
+| Bảng / Card | `.ds-table-wrap` / `.ds-cards > .ds-card` | | Bảng desktop → card mobile (UICONV §3) |
+| Badge trạng thái | `.ds-badge[--info/--success/--warning/--danger]` | | Ánh xạ trạng thái BR §3 → biến thể: *(bảng riêng bên dưới)* |
+| Tab | `.ds-tabs > .ds-tab` | | |
+| Modal / Drawer / Bottom-sheet | `.ds-modal-backdrop > .ds-modal` | | Nút chính bên phải |
+| Toast | `.ds-toast[--error]` | | Vị trí, thời lượng theo UICONV §5 |
+| Banner trong vùng | `.ds-banner[--error/--warning]` | | |
+| Skeleton | `.ds-skeleton` | | |
+| Trạng thái rỗng (2 loại) | `.ds-empty` (có minh hoạ) / `.ds-empty.ds-empty--filter` (không) | | 🔴 Hai loại phải trông khác nhau |
+| Trang trạng thái | `.ds-status-page` | | 404 / 403 / lỗi toàn trang |
+
+**Ánh xạ trạng thái nghiệp vụ → badge** *(từ `BR` §3 của từng module; bổ sung dần)*:
+
+| Trạng thái (BR) | Biến thể badge | Nhãn nguyên văn (SRS §4.2) |
+|---|---|---|
+| | | |
+
+## 4. Trạng thái component
+
+*Mỗi ô ghi thay đổi thị giác (token nào đổi). "—" = không có trạng thái đó. Ô trống = chưa thiết kế.*
+
+| Component | Default | Hover | Focus | Disabled | Loading | Error / Invalid | Selected |
+|---|---|---|---|---|---|---|---|
+| Nút chính | `brand.primary` | `brand.primary-hover` | ring 2px `focus.ring` | opacity .45 + **tooltip lý do** | spinner + nhãn "Đang …" | — | — |
+| Nút phụ | surface + `border.strong` | `bg.subtle` | ring | opacity .45 + tooltip | spinner | — | — |
+| Ô nhập | `border.strong` | `text.secondary` | `brand.primary` + ring | `bg.subtle`, chữ disabled | — | `status.danger` + message dưới | — |
+| Dòng bảng | surface | `bg.canvas` | ring | — | skeleton | — | `brand.primary-subtle` |
+| Tab | `text.secondary` | | ring | | | | `brand.primary` + gạch dưới 2px |
+| Card | | | | | | | |
+
+## 5. Icon
+
+| | |
+|---|---|
+| **Bộ icon** | *(tên bộ + version / "inline SVG tự vẽ theo mẫu components.html")* |
+| **Quy cách** | Lưới 24, stroke 1.75, `stroke-linecap: round`, hiển thị 20px (`size.icon`), màu `currentColor` |
+| **Cấm** | Emoji, ký hiệu ✓✕▲ dạng chữ thay icon (trừ mũi tên phân trang `‹ ›`), icon tô đặc trộn với icon nét |
+| **Danh sách dùng** | search · plus · close · chevron-down · back · check · alert · trash · filter · *(bổ sung theo WF)* |
+
+## 6. Tương phản và khả năng truy cập
+
+*Kết quả chạy `node scripts/design-check.mjs --tokens ds/tokens.json` — chép nguyên văn, không sửa tay.*
+
+| Cặp (fg / bg) | Dùng cho | Tỷ lệ | Ngưỡng | ☐/✅ |
+|---|---|---|---|---|
+| `text.primary` / `bg.surface` | Chữ thường | | 4.5 | |
+| `text.secondary` / `bg.surface` | Hint, chữ phụ | | 4.5 | |
+| `text.inverse` / `brand.primary` | Nhãn nút chính | | 4.5 | |
+| `text.inverse` / `status.danger` | Nhãn nút nguy hiểm | | 4.5 | |
+| `brand.primary` / `bg.surface` | Liên kết | | 4.5 | |
+| `status.danger` / `bg.surface` | Message lỗi | | 4.5 | |
+| `border.strong` / `bg.surface` | Viền ô nhập (non-text) | | 3.0 | |
+
+| Quy tắc | Giá trị | Nguồn |
+|---|---|---|
+| Hit target tối thiểu trên mobile | 44 × 44 px | WCAG 2.5.8 / `size.control.touch` |
+| Focus luôn thấy được | ring 2px `focus.ring`, offset 2px | WCAG 2.4.7 |
+| Không truyền nghĩa chỉ bằng màu | Badge luôn có nhãn chữ; lỗi luôn có icon + text | WCAG 1.4.1 |
+| Mọi ô nhập có nhãn | `<label>` bao ngoài hoặc `aria-label` | WCAG 1.3.1 |
+| Thứ tự focus | Theo `WF` §3.x.6 của từng US | |
+
+## 7. Motion
+
+| Việc | Thời lượng | Easing | Ghi chú |
+|---|---|---|---|
+| Hover nút / dòng | 120 ms | ease | |
+| Toast vào/ra | 200 ms | ease-out | Thời gian hiển thị theo UICONV §5 |
+| Modal mở | 160 ms | ease-out | Không dùng bounce |
+| Skeleton shimmer | 1.2 s lặp | linear | Tắt khi `prefers-reduced-motion` |
+
+## 8. Ngoại lệ đã duyệt
+
+*`HIFI`/`FIGMA` lệch DS ⇒ phải có dòng ở đây. Không có dòng ⇒ lệch là lỗi.*
+
+| # | Tài liệu | Token/component lệch | DS nói | Thực tế | Vì sao | Ai duyệt | Ngày |
+|---|---|---|---|---|---|---|---|
+
+## 9. Open Questions
+
+| ID | Câu hỏi | Hỏi ai | Từ ngày | Chặn gì |
+|---|---|---|---|---|
+
+---
+
+## Tự chấm
+
+| # | Tiêu chí | ☐/✅ |
+|---|---|---|
+| 1 | `tokens.json` parse được; `tokens.css` sinh khớp (design-check T1 = ok) | |
+| 2 | Mọi cặp tương phản ở §6 đạt ngưỡng (design-check T2 = ok) | |
+| 3 | §3: mọi kiểu trình bày của UICONV §11 có lớp DS **và** có mặt trong `components.html` | |
+| 4 | §4: mọi component có đủ default / hover / focus / disabled; component nhập liệu có Error | |
+| 5 | `breakpoint.*` khớp UICONV §1; `size.content-max` khớp UICONV §1 | |
+| 6 | Hai trạng thái rỗng trong `components.html` trông khác nhau | |
+| 7 | §0 ghi rõ độ tin cậy; giá trị placeholder có `OQ` | |
+| 8 | Có chữ ký Designer (hoặc PO ký thay + `DEC-nn` "không có Designer") | |
diff --git a/.claude/skills/ba-design/templates/ds-components.css b/.claude/skills/ba-design/templates/ds-components.css
new file mode 100644
index 0000000..fc76455
--- /dev/null
+++ b/.claude/skills/ba-design/templates/ds-components.css
@@ -0,0 +1,137 @@
+/* ds-components v1.1 — BEGIN
+   CSS component của DS_<PROJECT>. Chỉ dùng biến --ds-* (tokens.css); cấm mã màu/px thô ngoài khối này.
+   Từ vựng lớp = cột "Kiểu trình bày" của UICONV §11 (xem DS §3). Khối này được chép NGUYÊN VĂN vào
+   components.html và mọi HIFI_*.html — kiểm khớp bằng scripts/design-check.mjs. */
+*,*::before,*::after{box-sizing:border-box}
+html{font-family:var(--ds-font-family-base);font-size:var(--ds-font-size-sm);line-height:var(--ds-font-line-height-normal);color:var(--ds-color-text-primary);background:var(--ds-color-bg-canvas);-webkit-font-smoothing:antialiased}
+body{margin:0}
+h1,h2,h3{margin:0;line-height:var(--ds-font-line-height-tight);font-weight:var(--ds-font-weight-semibold)}
+h1{font-size:var(--ds-font-size-xl)}h2{font-size:var(--ds-font-size-lg)}h3{font-size:var(--ds-font-size-md)}
+a,.ds-link{color:var(--ds-color-brand-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
+a:hover,.ds-link:hover{color:var(--ds-color-brand-primary-hover)}
+:focus-visible{outline:2px solid var(--ds-color-focus-ring);outline-offset:2px}
+.ds-muted{color:var(--ds-color-text-secondary)}
+.ds-small{font-size:var(--ds-font-size-xs)}
+.ds-icon{width:var(--ds-size-icon);height:var(--ds-size-icon);flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
+.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+
+/* Layout */
+.ds-page{max-width:var(--ds-size-content-max);margin:0 auto;padding:var(--ds-space-6) var(--ds-space-4);display:grid;gap:var(--ds-space-4)}
+.ds-row{display:flex;gap:var(--ds-space-2);align-items:center;flex-wrap:wrap}
+.ds-row--between{justify-content:space-between}.ds-row--end{justify-content:flex-end}
+.ds-stack{display:grid;gap:var(--ds-space-3)}
+.ds-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--ds-space-4);align-items:start}
+.ds-header{position:sticky;top:0;z-index:5;background:var(--ds-color-bg-surface);border-bottom:1px solid var(--ds-color-border-default);padding:var(--ds-space-3) var(--ds-space-4);display:flex;align-items:center;gap:var(--ds-space-4);min-height:56px}
+.ds-breadcrumb{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-breadcrumb a{text-decoration:none}
+
+/* Nút — UICONV §11: nút chính / nút phụ / nút nguy hiểm / liên kết */
+.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);height:var(--ds-size-control-desktop);padding:0 var(--ds-space-4);border-radius:var(--ds-radius-sm);border:1px solid transparent;font:inherit;font-weight:var(--ds-font-weight-semibold);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s}
+.ds-btn--primary{background:var(--ds-color-brand-primary);color:var(--ds-color-text-inverse)}
+.ds-btn--primary:hover{background:var(--ds-color-brand-primary-hover)}
+.ds-btn--secondary{background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);border-color:var(--ds-color-border-strong)}
+.ds-btn--secondary:hover{background:var(--ds-color-bg-subtle)}
+.ds-btn--danger{background:var(--ds-color-status-danger);color:var(--ds-color-text-inverse)}
+.ds-btn--ghost{background:transparent;color:var(--ds-color-brand-primary)}
+.ds-btn--icon{width:var(--ds-size-control-desktop);padding:0}
+.ds-btn[aria-disabled="true"],.ds-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
+.ds-btn.is-loading{pointer-events:none}
+.ds-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .8s linear infinite;flex:none}
+@keyframes ds-spin{to{transform:rotate(360deg)}}
+
+/* Field — UICONV §4: nhãn trên field, * sau nhãn, lỗi dưới field thay hint */
+.ds-field{display:grid;gap:var(--ds-space-1)}
+.ds-field__label{font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);color:var(--ds-color-text-primary)}
+.ds-field__label .ds-req{color:var(--ds-color-status-danger);margin-left:2px}
+.ds-field__hint{font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-field__error{font-size:var(--ds-font-size-xs);color:var(--ds-color-status-danger);display:flex;gap:var(--ds-space-1);align-items:center}
+.ds-input,.ds-select,.ds-textarea{width:100%;height:var(--ds-size-control-desktop);padding:0 var(--ds-space-3);border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);font:inherit}
+.ds-textarea{height:auto;min-height:88px;padding:var(--ds-space-2) var(--ds-space-3)}
+.ds-input::placeholder{color:var(--ds-color-text-secondary)}
+.ds-input:hover,.ds-select:hover{border-color:var(--ds-color-text-secondary)}
+.ds-input:focus,.ds-select:focus{border-color:var(--ds-color-brand-primary);outline:2px solid var(--ds-color-focus-ring);outline-offset:0}
+.ds-input.is-invalid,.ds-select.is-invalid{border-color:var(--ds-color-status-danger)}
+.ds-input[disabled],.ds-select[disabled]{background:var(--ds-color-bg-subtle);color:var(--ds-color-text-disabled);cursor:not-allowed}
+.ds-input[readonly]{border-color:transparent;background:transparent;padding-left:0}
+.ds-input-wrap{position:relative}
+.ds-input-wrap .ds-icon{position:absolute;left:var(--ds-space-3);top:50%;transform:translateY(-50%);color:var(--ds-color-text-secondary)}
+.ds-input-wrap .ds-input{padding-left:calc(var(--ds-space-3) + var(--ds-size-icon) + var(--ds-space-2))}
+.ds-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6472' stroke-width='1.75'><path d='m4 6 4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right var(--ds-space-3) center;padding-right:calc(var(--ds-space-3) + 24px)}
+.ds-check{display:inline-flex;align-items:center;gap:var(--ds-space-2);cursor:pointer;min-height:var(--ds-size-control-desktop)}
+.ds-check input{width:18px;height:18px;margin:0;accent-color:var(--ds-color-brand-primary)}
+.ds-switch{position:relative;width:40px;height:22px;border-radius:var(--ds-radius-pill);background:var(--ds-color-border-strong);display:inline-block;flex:none}
+.ds-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ds-color-bg-surface)}
+.ds-switch[aria-checked="true"]{background:var(--ds-color-brand-primary)}
+.ds-switch[aria-checked="true"]::after{left:20px}
+.ds-stepper{display:inline-flex;border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);height:var(--ds-size-control-desktop);overflow:hidden}
+.ds-stepper button{width:var(--ds-size-control-desktop);border:0;background:var(--ds-color-bg-surface);font:inherit;cursor:pointer;color:var(--ds-color-text-primary)}
+.ds-stepper input{width:48px;text-align:center;border:0;border-left:1px solid var(--ds-color-border-default);border-right:1px solid var(--ds-color-border-default);font:inherit}
+
+/* Bảng / Card — UICONV §3, §11 */
+.ds-table-wrap{overflow-x:auto;border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-surface)}
+.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-font-size-sm)}
+.ds-table th,.ds-table td{padding:var(--ds-space-3) var(--ds-space-4);text-align:left;border-bottom:1px solid var(--ds-color-border-default);vertical-align:middle}
+.ds-table th{background:var(--ds-color-bg-subtle);font-weight:var(--ds-font-weight-semibold);font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary);white-space:nowrap}
+.ds-table th[aria-sort]{cursor:pointer}
+.ds-table tbody tr:hover{background:var(--ds-color-bg-canvas)}
+.ds-table tbody tr[aria-selected="true"]{background:var(--ds-color-brand-primary-subtle)}
+.ds-table tbody tr:last-child td{border-bottom:0}
+.ds-table td.ds-num{text-align:right;font-variant-numeric:tabular-nums}
+.ds-card{background:var(--ds-color-bg-surface);border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);padding:var(--ds-space-4);display:grid;gap:var(--ds-space-2)}
+.ds-cards{display:grid;gap:var(--ds-space-3)}
+.ds-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--ds-space-2);border-radius:var(--ds-radius-pill);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);background:var(--ds-color-bg-subtle);color:var(--ds-color-text-primary)}
+.ds-badge--info{background:var(--ds-color-brand-primary-subtle)}
+.ds-badge--success{background:var(--ds-color-status-success-subtle);color:var(--ds-color-status-success)}
+.ds-badge--warning{background:var(--ds-color-status-warning-subtle);color:var(--ds-color-status-warning)}
+.ds-badge--danger{background:var(--ds-color-status-danger-subtle);color:var(--ds-color-status-danger)}
+.ds-tabs{display:flex;gap:var(--ds-space-4);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-tab{padding:var(--ds-space-2) 0;border-bottom:2px solid transparent;color:var(--ds-color-text-secondary);cursor:pointer;font-weight:var(--ds-font-weight-semibold)}
+.ds-tab[aria-selected="true"]{color:var(--ds-color-brand-primary);border-bottom-color:var(--ds-color-brand-primary)}
+.ds-pagination{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-price{font-variant-numeric:tabular-nums;font-weight:var(--ds-font-weight-semibold)}
+.ds-thumb{width:64px;height:64px;border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-subtle);border:1px solid var(--ds-color-border-default);display:grid;place-items:center;color:var(--ds-color-text-secondary);flex:none}
+
+/* Phản hồi hệ thống — UICONV §5, §6 */
+.ds-toast{position:fixed;top:var(--ds-space-4);right:var(--ds-space-4);z-index:20;min-width:280px;max-width:420px;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);background:var(--ds-color-text-primary);color:var(--ds-color-text-inverse);box-shadow:var(--ds-shadow-md);display:flex;gap:var(--ds-space-3);align-items:flex-start}
+.ds-toast--error{background:var(--ds-color-status-danger)}
+.ds-banner{display:flex;gap:var(--ds-space-3);align-items:flex-start;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-default);background:var(--ds-color-bg-subtle)}
+.ds-banner--error{background:var(--ds-color-status-danger-subtle);border-color:var(--ds-color-status-danger);color:var(--ds-color-status-danger)}
+.ds-banner--warning{background:var(--ds-color-status-warning-subtle);border-color:var(--ds-color-status-warning)}
+.ds-empty{display:grid;justify-items:center;text-align:center;gap:var(--ds-space-3);padding:var(--ds-space-12) var(--ds-space-4);color:var(--ds-color-text-secondary)}
+.ds-empty__illus{width:120px;height:88px;color:var(--ds-color-border-strong)}
+.ds-empty--filter{padding:var(--ds-space-8) var(--ds-space-4)}
+.ds-skeleton{height:14px;border-radius:var(--ds-radius-sm);background:linear-gradient(90deg,var(--ds-color-bg-subtle),var(--ds-color-bg-canvas),var(--ds-color-bg-subtle));background-size:200% 100%;animation:ds-shimmer 1.2s infinite}
+@keyframes ds-shimmer{to{background-position:-200% 0}}
+.ds-modal-backdrop{position:fixed;inset:0;background:#1B1F2480;display:grid;place-items:center;z-index:10;padding:var(--ds-space-4)}
+.ds-modal{width:100%;max-width:520px;background:var(--ds-color-bg-surface);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md);display:grid}
+.ds-modal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--ds-space-4) var(--ds-space-6);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-modal__body{padding:var(--ds-space-6);display:grid;gap:var(--ds-space-4)}
+.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--ds-space-2);padding:var(--ds-space-4) var(--ds-space-6);border-top:1px solid var(--ds-color-border-default)}
+.ds-status-page{display:grid;justify-items:center;gap:var(--ds-space-3);padding:var(--ds-space-12);text-align:center}
+
+/* Trạng thái ẩn/khoá/read-only — W7 */
+[data-vis="hidden"]{display:none!important}
+[data-vis="disabled"]{opacity:.45;pointer-events:none}
+[data-vis="readonly"] .ds-input{border-color:transparent;background:transparent}
+
+/* Responsive — breakpoint theo UICONV §1; body[data-view] ép khung nhìn khi xem trong HIFI */
+@media (max-width:1023px){.ds-cols{grid-template-columns:1fr}}
+@media (max-width:767px){
+  .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+  .ds-btn{height:var(--ds-size-control-touch)}
+  .ds-input,.ds-select{height:var(--ds-size-control-touch)}
+  .ds-table-wrap{display:none}.ds-cards{display:grid}
+  .ds-hide-m{display:none!important}
+}
+@media (min-width:768px){.ds-cards{display:none}.ds-hide-d{display:none!important}}
+body[data-view="mobile"] .ds-cols{grid-template-columns:1fr}
+body[data-view="mobile"] .ds-table-wrap{display:none}body[data-view="mobile"] .ds-cards{display:grid}
+body[data-view="mobile"] .ds-hide-m{display:none!important}body[data-view="mobile"] .ds-hide-d{display:revert}
+body[data-view="mobile"] .ds-btn,body[data-view="mobile"] .ds-input,body[data-view="mobile"] .ds-select{height:var(--ds-size-control-touch)}
+body[data-view="mobile"] .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+body[data-view="tablet"] .ds-cols{grid-template-columns:1fr}
+/* Tiện ích xếp chồng ở mobile: phần tử trong .ds-row chiếm trọn hàng (nhóm nút thao tác của một dòng danh sách/CartItem…) */
+.ds-m-full{}
+@media (max-width:767px){.ds-m-full{flex-basis:100%;min-width:0}}
+body[data-view="mobile"] .ds-m-full{flex-basis:100%;min-width:0}
+/* ds-components v1.1 — END */
diff --git a/.claude/skills/ba-design/templates/figma-package/README-import.md b/.claude/skills/ba-design/templates/figma-package/README-import.md
new file mode 100644
index 0000000..c7c3ff1
--- /dev/null
+++ b/.claude/skills/ba-design/templates/figma-package/README-import.md
@@ -0,0 +1,39 @@
+# FIGMA_<US-id>_v1.0 — Gói nhập vào Figma
+
+| | |
+|---|---|
+| **Sinh bởi** | skill `ba-design`, activity `figma` |
+| **Nguồn** | `HIFI_<US-id>_v1.0.html` · `DS_<PROJECT>_v1.0.md` (`00-index/ds/tokens.json`) · `WF_<US-id>_v1.0.md` · `SRS_<US-id>_v1.0.md` |
+| **Vì sao không có file `.fig`** | `.fig` là định dạng nhị phân độc quyền; REST API của Figma không cho tạo node thiết kế. Gói này gồm các định dạng Figma **nhập được** và giữ được layer/text/token. |
+
+## Nội dung gói
+
+| File | Định dạng | Nhập vào Figma bằng | Sửa được trong Figma |
+|---|---|---|---|
+| `SCR-xx.<view>[.<state>].svg` | SVG, một file mỗi màn hình × khung nhìn (× trạng thái khác default) | Kéo thả vào canvas, hoặc **File → Place image / Import** | ✅ Layer vector, text, tên layer = `Zn`/`Cnn` |
+| `tokens.dtcg.json` | Design token chuẩn W3C DTCG (bản sao `00-index/ds/tokens.json`) | Plugin **Tokens Studio for Figma** → Import → JSON; hoặc **Variables → Import** nếu tài khoản có API variables | ✅ Thành Figma Variables / Styles |
+| `png/SCR-xx.<view>.<state>.png` | Ảnh chụp HIFI bằng Chrome headless (`scripts/render-figma.sh`) | Kéo thả | ❌ Chỉ để tham chiếu và đối chiếu pixel |
+| `../HIFI_<US-id>_v1.0.html` | HTML tự chứa | Plugin **html.to.design** (divRIOTS) → *Import from file* hoặc *from URL* khi host tạm bằng `python3 -m http.server` | ✅ Layer đầy đủ theo DOM, auto-layout |
+
+## Thứ tự nhập khuyến nghị
+
+1. **Token trước:** nhập `tokens.dtcg.json` bằng Tokens Studio → *Create Styles / Variables* để có bảng màu, chữ, khoảng cách trùng tên `--ds-*`.
+2. **Component sheet:** nhập `../../00-index/ds/components.html` bằng html.to.design vào page *Components*; hoặc dựng component từ SVG và gán style vừa tạo.
+3. **Màn hình:** kéo các file SVG vào page *Screens*, mỗi khung nhìn một frame (Desktop 1440×900 · Tablet 834×1112 · Mobile 390×844). Đổi tên frame theo `SCR-xx · <Tên màn hình> · <view>`.
+4. **Trạng thái:** đặt các SVG `.<state>.svg` cạnh frame default, hoặc dùng Variants.
+5. **Đối chiếu:** mở `png/` cạnh frame để kiểm tra khoảng cách và màu khớp HIFI.
+
+## Lưu ý
+
+- **Font:** SVG ghi font `<tên font base trong tokens.json>`; máy không có font ⇒ Figma thay bằng font gần nhất và báo *Missing fonts*. Cài font brand trước khi nhập.
+- **Màu trong SVG là mã nguyên văn** từ `tokens.json` (Figma không đọc biến CSS); thuộc tính `data-token` ghi tên token để tra ngược. Sửa màu ⇒ sửa `tokens.json` rồi chạy lại `figma`, không sửa tay SVG.
+- **Hành vi không nằm trong Figma.** Prototype link trong Figma chỉ mô phỏng điều hướng theo SRS §2.2; điều kiện, validation, mã lỗi đọc ở `SRS`. Khi Figma và SRS lệch: SRS thắng về tồn tại/hành vi/text, Figma thắng về bố cục (W11) — ghi lệch vào `WF §5`.
+- **Không dùng gói này để thay `HIFI`.** HIFI là nguồn sự thật về visual đã duyệt; Figma là bản làm việc của Designer. Designer sửa trong Figma ⇒ báo BA để chạy lại `hifi` + `figma` với `--proto <link Figma>`.
+
+## Kiểm tra trước khi giao
+
+```bash
+node .claude/skills/ba-design/scripts/design-check.mjs --tokens 00-index/ds/tokens.json --svg-dir 03-specification/design/FIGMA_<US-id>_v1.0
+```
+
+Phải in `ok` cho: mọi mã màu trong SVG thuộc tập token · mọi `SCR` của SRS §2.1 có ít nhất `desktop` + `mobile` · tập `id="Cnn"` trong SVG ⊆ tập `data-c` của HIFI.
diff --git a/.claude/skills/ba-design/templates/figma-package/SCR-xx.desktop.svg b/.claude/skills/ba-design/templates/figma-package/SCR-xx.desktop.svg
new file mode 100644
index 0000000..5e5d1da
--- /dev/null
+++ b/.claude/skills/ba-design/templates/figma-package/SCR-xx.desktop.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  FIGMA_<US-id>_v1.0/SCR-xx.desktop.svg — khung màn hình để KÉO THẢ VÀO FIGMA (Figma nhập SVG thành layer vector + text sửa được).
+  QUY TẮC:
+  · Một file cho mỗi SCR × khung nhìn: SCR-xx.desktop.svg (1440×900) · SCR-xx.tablet.svg (834×1112) · SCR-xx.mobile.svg (390×844). Trạng thái ≠ default ⇒ thêm hậu tố: SCR-xx.mobile.empty-none.svg.
+  · Figma KHÔNG hiểu biến CSS ⇒ dùng mã màu NGUYÊN VĂN từ tokens.json và ghi tên token trong data-token để design-check.mjs đối chiếu (mã màu không có trong tokens.json = lỗi).
+  · Cấu trúc layer = bảng vùng WF §3.x.1: <g id="Zn" data-name="…"> chứa <g id="Cnn"> cho mỗi thành phần. Tên id chính là tên layer trong Figma.
+  · Font: font-family lấy từ font.family.base; Figma sẽ thay bằng font gần nhất nếu máy không có — ghi rõ ở README-import.md.
+  · Text NGUYÊN VĂN theo SRS §4.2. Không vẽ hành vi; hành vi ở SRS.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900" font-family="Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" font-size="14" data-scr="SCR-xx" data-view="desktop" data-state="default" data-source="HIFI_US-xxx_v1.0.html#SCR-xx">
+  <title>SCR-xx · [Tên màn hình] · desktop · default</title>
+  <!-- Nền trang -->
+  <rect id="canvas" width="1440" height="900" fill="#F6F7F9" data-token="color.bg.canvas"/>
+
+  <g id="Z0" data-name="Header toàn site">
+    <rect width="1440" height="56" fill="#FFFFFF" data-token="color.bg.surface"/>
+    <line x1="0" y1="56.5" x2="1440" y2="56.5" stroke="#D5DAE1" data-token="color.border.default"/>
+    <text x="24" y="34" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Tên hệ thống</text>
+  </g>
+
+  <g id="Z1" data-name="Header màn hình" transform="translate(120 80)">
+    <g id="C01"><text x="0" y="28" font-size="24" font-weight="600" fill="#1B1F24" data-token="color.text.primary" data-key="scr01.title">Danh sách cửa hàng</text></g>
+    <g id="C02" data-name="Nút chính">
+      <rect x="1096" y="0" width="104" height="36" rx="4" fill="#2456A6" data-token="color.brand.primary"/>
+      <text x="1148" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.create">Tạo mới</text>
+    </g>
+  </g>
+
+  <g id="Z2" data-name="Thanh lọc" transform="translate(120 140)">
+    <g id="C03" data-name="Ô nhập có icon tìm">
+      <rect width="320" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
+      <text x="40" y="23" fill="#5B6472" data-token="color.text.secondary" data-key="scr01.search.ph">Nhập mã hoặc tên…</text>
+    </g>
+    <g id="C04" data-name="Chọn 1" transform="translate(328 0)">
+      <rect width="200" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
+      <text x="12" y="23" fill="#1B1F24" data-token="color.text.primary" data-key="scr01.filter.status">Trạng thái: Tất cả</text>
+    </g>
+  </g>
+
+  <g id="Z3" data-name="Dữ liệu" transform="translate(120 200)">
+    <g id="C05" data-name="Bảng">
+      <rect width="1200" height="180" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
+      <rect x="1" y="1" width="1198" height="40" rx="8" fill="#EEF1F5" data-token="color.bg.subtle"/>
+      <text x="16" y="26" font-size="12" font-weight="600" fill="#5B6472" data-token="color.text.secondary">MÃ</text>
+      <text x="216" y="26" font-size="12" font-weight="600" fill="#5B6472">TÊN</text>
+      <text x="616" y="26" font-size="12" font-weight="600" fill="#5B6472">TRẠNG THÁI</text>
+      <text x="816" y="26" font-size="12" font-weight="600" fill="#5B6472">NGÀY TẠO</text>
+      <line x1="0" y1="88" x2="1200" y2="88" stroke="#D5DAE1"/>
+      <text x="16" y="70" fill="#1B1F24">STR-001</text><text x="216" y="70" fill="#1B1F24">Cửa hàng A</text>
+      <rect x="616" y="54" width="52" height="22" rx="11" fill="#EEF1F5" data-token="color.bg.subtle"/><text x="642" y="69" text-anchor="middle" font-size="12" font-weight="600" fill="#1B1F24">Nháp</text>
+      <text x="816" y="70" fill="#1B1F24">30/08/2026</text>
+      <text x="1120" y="70" fill="#2456A6" text-decoration="underline" data-token="color.brand.primary" data-key="btn.detail">Chi tiết</text>
+    </g>
+  </g>
+
+  <g id="Z4" data-name="Phân trang" transform="translate(120 400)">
+    <g id="C06" data-name="Phân trang">
+      <text x="1140" y="22" text-anchor="end" font-size="12" fill="#5B6472" data-token="color.text.secondary">1 / 7</text>
+    </g>
+  </g>
+</svg>
diff --git a/.claude/skills/ba-design/templates/hifi.html b/.claude/skills/ba-design/templates/hifi.html
new file mode 100644
index 0000000..aa0049a
--- /dev/null
+++ b/.claude/skills/ba-design/templates/hifi.html
@@ -0,0 +1,358 @@
+<!--
+  HIFI_<US-id>_v1.0.html — mockup hi-fi tự chứa, sinh bởi skill ba-design (activity hifi / proto).
+
+  QUY TẮC SINH FILE NÀY:
+  · <style> = khối :root của 00-index/ds/tokens.css + khối ds-components.css NGUYÊN VĂN (kiểm bằng scripts/design-check.mjs) + phần "Khung xem HIFI" giữ nguyên.
+  · Mỗi màn hình SCR-xx của SRS §2.1 → một <section class="hf-frame" id="SCR-xx" data-scr data-title>, bố cục theo WF §3.x.1 (mỗi vùng Zn → data-zone="Zn" data-name).
+  · Mỗi thành phần SRS §2.3.1 → data-c="Cnn"; mỗi field SRS §2.3.3 → data-f="Fnn". Tập ID phải KHỚP HAI CHIỀU với SRS.
+  · Mọi chuỗi hiển thị → data-key="<khoá i18n SRS §4.2>" và text NGUYÊN VĂN theo SRS (W5). Message lỗi → data-key="E-<DOMAIN>-nnnn".
+  · Trạng thái WF §3.x.3 / SRS §2.3.6 → khối data-state="default|loading|empty-none|empty-filter|error|submitting|invalid" trong cùng vùng.
+  · Ẩn/khoá/read-only (W7) → data-vis="hidden|disabled|readonly" kèm title nêu lý do khi disabled.
+  · Điều hướng theo SRS §2.2 → data-nav="SCR-yy" (chỉ có tác dụng ở chế độ Prototype).
+  · Thành phần CHỈ CÓ Ở PROTOTYPE (WF §5 loại Tồn tại chưa quyết) → bọc <span class="hf-proto-only" data-ref="WF §5 #n">, KHÔNG gán data-c.
+  · Chỉ dùng lớp .ds-* và biến --ds-*. Cấm mã màu/px thô trong markup (trừ width cột theo SRS §2.3.2). Icon = inline SVG, không emoji.
+  · Chụp ảnh từng trạng thái bằng Chrome headless: scripts/render-figma.sh (dùng query ?scr=&view=&state=).
+-->
+<!doctype html>
+<html lang="vi">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>HIFI — <US-id> — <Tên US></title>
+<style>
+:root{
+  --ds-color-bg-canvas:#F6F7F9;
+  --ds-color-bg-surface:#FFFFFF;
+  --ds-color-bg-subtle:#EEF1F5;
+  --ds-color-border-default:#D5DAE1;
+  --ds-color-border-strong:#767F8C;
+  --ds-color-text-primary:#1B1F24;
+  --ds-color-text-secondary:#5B6472;
+  --ds-color-text-disabled:#9AA3AF;
+  --ds-color-text-inverse:#FFFFFF;
+  --ds-color-brand-primary:#2456A6;
+  --ds-color-brand-primary-hover:#1C468A;
+  --ds-color-brand-primary-subtle:#E7EEF9;
+  --ds-color-status-danger:#B42318;
+  --ds-color-status-danger-subtle:#FDECEA;
+  --ds-color-status-success:#1E7B45;
+  --ds-color-status-success-subtle:#E6F4EC;
+  --ds-color-status-warning:#B7791F;
+  --ds-color-status-warning-subtle:#FFF4DE;
+  --ds-color-focus-ring:#2456A6;
+  --ds-font-family-base:"Segoe UI","Roboto","Helvetica Neue","Arial",sans-serif;
+  --ds-font-family-mono:"SFMono-Regular","Consolas","Menlo",monospace;
+  --ds-font-size-xs:12px;
+  --ds-font-size-sm:14px;
+  --ds-font-size-md:16px;
+  --ds-font-size-lg:20px;
+  --ds-font-size-xl:24px;
+  --ds-font-size-2xl:32px;
+  --ds-font-weight-regular:400;
+  --ds-font-weight-semibold:600;
+  --ds-font-line-height-tight:1.25;
+  --ds-font-line-height-normal:1.5;
+  --ds-space-1:4px;
+  --ds-space-2:8px;
+  --ds-space-3:12px;
+  --ds-space-4:16px;
+  --ds-space-6:24px;
+  --ds-space-8:32px;
+  --ds-space-12:48px;
+  --ds-radius-sm:4px;
+  --ds-radius-md:8px;
+  --ds-radius-pill:999px;
+  --ds-shadow-sm:0px 1px 2px 0px #1B1F2414;
+  --ds-shadow-md:0px 4px 12px 0px #1B1F2426;
+  --ds-size-control-desktop:36px;
+  --ds-size-control-touch:44px;
+  --ds-size-icon:20px;
+  --ds-size-content-max:1200px;
+  --ds-breakpoint-tablet:768px;
+  --ds-breakpoint-desktop:1024px;
+}
+/* ds-components v1.1 — BEGIN
+   CSS component của DS_<PROJECT>. Chỉ dùng biến --ds-* (tokens.css); cấm mã màu/px thô ngoài khối này.
+   Từ vựng lớp = cột "Kiểu trình bày" của UICONV §11 (xem DS §3). Khối này được chép NGUYÊN VĂN vào
+   components.html và mọi HIFI_*.html — kiểm khớp bằng scripts/design-check.mjs. */
+*,*::before,*::after{box-sizing:border-box}
+html{font-family:var(--ds-font-family-base);font-size:var(--ds-font-size-sm);line-height:var(--ds-font-line-height-normal);color:var(--ds-color-text-primary);background:var(--ds-color-bg-canvas);-webkit-font-smoothing:antialiased}
+body{margin:0}
+h1,h2,h3{margin:0;line-height:var(--ds-font-line-height-tight);font-weight:var(--ds-font-weight-semibold)}
+h1{font-size:var(--ds-font-size-xl)}h2{font-size:var(--ds-font-size-lg)}h3{font-size:var(--ds-font-size-md)}
+a,.ds-link{color:var(--ds-color-brand-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
+a:hover,.ds-link:hover{color:var(--ds-color-brand-primary-hover)}
+:focus-visible{outline:2px solid var(--ds-color-focus-ring);outline-offset:2px}
+.ds-muted{color:var(--ds-color-text-secondary)}
+.ds-small{font-size:var(--ds-font-size-xs)}
+.ds-icon{width:var(--ds-size-icon);height:var(--ds-size-icon);flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
+.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+
+/* Layout */
+.ds-page{max-width:var(--ds-size-content-max);margin:0 auto;padding:var(--ds-space-6) var(--ds-space-4);display:grid;gap:var(--ds-space-4)}
+.ds-row{display:flex;gap:var(--ds-space-2);align-items:center;flex-wrap:wrap}
+.ds-row--between{justify-content:space-between}.ds-row--end{justify-content:flex-end}
+.ds-stack{display:grid;gap:var(--ds-space-3)}
+.ds-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--ds-space-4);align-items:start}
+.ds-header{position:sticky;top:0;z-index:5;background:var(--ds-color-bg-surface);border-bottom:1px solid var(--ds-color-border-default);padding:var(--ds-space-3) var(--ds-space-4);display:flex;align-items:center;gap:var(--ds-space-4);min-height:56px}
+.ds-breadcrumb{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-breadcrumb a{text-decoration:none}
+
+/* Nút — UICONV §11: nút chính / nút phụ / nút nguy hiểm / liên kết */
+.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);height:var(--ds-size-control-desktop);padding:0 var(--ds-space-4);border-radius:var(--ds-radius-sm);border:1px solid transparent;font:inherit;font-weight:var(--ds-font-weight-semibold);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s}
+.ds-btn--primary{background:var(--ds-color-brand-primary);color:var(--ds-color-text-inverse)}
+.ds-btn--primary:hover{background:var(--ds-color-brand-primary-hover)}
+.ds-btn--secondary{background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);border-color:var(--ds-color-border-strong)}
+.ds-btn--secondary:hover{background:var(--ds-color-bg-subtle)}
+.ds-btn--danger{background:var(--ds-color-status-danger);color:var(--ds-color-text-inverse)}
+.ds-btn--ghost{background:transparent;color:var(--ds-color-brand-primary)}
+.ds-btn--icon{width:var(--ds-size-control-desktop);padding:0}
+.ds-btn[aria-disabled="true"],.ds-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
+.ds-btn.is-loading{pointer-events:none}
+.ds-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .8s linear infinite;flex:none}
+@keyframes ds-spin{to{transform:rotate(360deg)}}
+
+/* Field — UICONV §4: nhãn trên field, * sau nhãn, lỗi dưới field thay hint */
+.ds-field{display:grid;gap:var(--ds-space-1)}
+.ds-field__label{font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);color:var(--ds-color-text-primary)}
+.ds-field__label .ds-req{color:var(--ds-color-status-danger);margin-left:2px}
+.ds-field__hint{font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-field__error{font-size:var(--ds-font-size-xs);color:var(--ds-color-status-danger);display:flex;gap:var(--ds-space-1);align-items:center}
+.ds-input,.ds-select,.ds-textarea{width:100%;height:var(--ds-size-control-desktop);padding:0 var(--ds-space-3);border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);font:inherit}
+.ds-textarea{height:auto;min-height:88px;padding:var(--ds-space-2) var(--ds-space-3)}
+.ds-input::placeholder{color:var(--ds-color-text-secondary)}
+.ds-input:hover,.ds-select:hover{border-color:var(--ds-color-text-secondary)}
+.ds-input:focus,.ds-select:focus{border-color:var(--ds-color-brand-primary);outline:2px solid var(--ds-color-focus-ring);outline-offset:0}
+.ds-input.is-invalid,.ds-select.is-invalid{border-color:var(--ds-color-status-danger)}
+.ds-input[disabled],.ds-select[disabled]{background:var(--ds-color-bg-subtle);color:var(--ds-color-text-disabled);cursor:not-allowed}
+.ds-input[readonly]{border-color:transparent;background:transparent;padding-left:0}
+.ds-input-wrap{position:relative}
+.ds-input-wrap .ds-icon{position:absolute;left:var(--ds-space-3);top:50%;transform:translateY(-50%);color:var(--ds-color-text-secondary)}
+.ds-input-wrap .ds-input{padding-left:calc(var(--ds-space-3) + var(--ds-size-icon) + var(--ds-space-2))}
+.ds-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6472' stroke-width='1.75'><path d='m4 6 4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right var(--ds-space-3) center;padding-right:calc(var(--ds-space-3) + 24px)}
+.ds-check{display:inline-flex;align-items:center;gap:var(--ds-space-2);cursor:pointer;min-height:var(--ds-size-control-desktop)}
+.ds-check input{width:18px;height:18px;margin:0;accent-color:var(--ds-color-brand-primary)}
+.ds-switch{position:relative;width:40px;height:22px;border-radius:var(--ds-radius-pill);background:var(--ds-color-border-strong);display:inline-block;flex:none}
+.ds-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ds-color-bg-surface)}
+.ds-switch[aria-checked="true"]{background:var(--ds-color-brand-primary)}
+.ds-switch[aria-checked="true"]::after{left:20px}
+.ds-stepper{display:inline-flex;border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);height:var(--ds-size-control-desktop);overflow:hidden}
+.ds-stepper button{width:var(--ds-size-control-desktop);border:0;background:var(--ds-color-bg-surface);font:inherit;cursor:pointer;color:var(--ds-color-text-primary)}
+.ds-stepper input{width:48px;text-align:center;border:0;border-left:1px solid var(--ds-color-border-default);border-right:1px solid var(--ds-color-border-default);font:inherit}
+
+/* Bảng / Card — UICONV §3, §11 */
+.ds-table-wrap{overflow-x:auto;border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-surface)}
+.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-font-size-sm)}
+.ds-table th,.ds-table td{padding:var(--ds-space-3) var(--ds-space-4);text-align:left;border-bottom:1px solid var(--ds-color-border-default);vertical-align:middle}
+.ds-table th{background:var(--ds-color-bg-subtle);font-weight:var(--ds-font-weight-semibold);font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary);white-space:nowrap}
+.ds-table th[aria-sort]{cursor:pointer}
+.ds-table tbody tr:hover{background:var(--ds-color-bg-canvas)}
+.ds-table tbody tr[aria-selected="true"]{background:var(--ds-color-brand-primary-subtle)}
+.ds-table tbody tr:last-child td{border-bottom:0}
+.ds-table td.ds-num{text-align:right;font-variant-numeric:tabular-nums}
+.ds-card{background:var(--ds-color-bg-surface);border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);padding:var(--ds-space-4);display:grid;gap:var(--ds-space-2)}
+.ds-cards{display:grid;gap:var(--ds-space-3)}
+.ds-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--ds-space-2);border-radius:var(--ds-radius-pill);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);background:var(--ds-color-bg-subtle);color:var(--ds-color-text-primary)}
+.ds-badge--info{background:var(--ds-color-brand-primary-subtle)}
+.ds-badge--success{background:var(--ds-color-status-success-subtle);color:var(--ds-color-status-success)}
+.ds-badge--warning{background:var(--ds-color-status-warning-subtle);color:var(--ds-color-status-warning)}
+.ds-badge--danger{background:var(--ds-color-status-danger-subtle);color:var(--ds-color-status-danger)}
+.ds-tabs{display:flex;gap:var(--ds-space-4);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-tab{padding:var(--ds-space-2) 0;border-bottom:2px solid transparent;color:var(--ds-color-text-secondary);cursor:pointer;font-weight:var(--ds-font-weight-semibold)}
+.ds-tab[aria-selected="true"]{color:var(--ds-color-brand-primary);border-bottom-color:var(--ds-color-brand-primary)}
+.ds-pagination{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-price{font-variant-numeric:tabular-nums;font-weight:var(--ds-font-weight-semibold)}
+.ds-thumb{width:64px;height:64px;border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-subtle);border:1px solid var(--ds-color-border-default);display:grid;place-items:center;color:var(--ds-color-text-secondary);flex:none}
+
+/* Phản hồi hệ thống — UICONV §5, §6 */
+.ds-toast{position:fixed;top:var(--ds-space-4);right:var(--ds-space-4);z-index:20;min-width:280px;max-width:420px;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);background:var(--ds-color-text-primary);color:var(--ds-color-text-inverse);box-shadow:var(--ds-shadow-md);display:flex;gap:var(--ds-space-3);align-items:flex-start}
+.ds-toast--error{background:var(--ds-color-status-danger)}
+.ds-banner{display:flex;gap:var(--ds-space-3);align-items:flex-start;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-default);background:var(--ds-color-bg-subtle)}
+.ds-banner--error{background:var(--ds-color-status-danger-subtle);border-color:var(--ds-color-status-danger);color:var(--ds-color-status-danger)}
+.ds-banner--warning{background:var(--ds-color-status-warning-subtle);border-color:var(--ds-color-status-warning)}
+.ds-empty{display:grid;justify-items:center;text-align:center;gap:var(--ds-space-3);padding:var(--ds-space-12) var(--ds-space-4);color:var(--ds-color-text-secondary)}
+.ds-empty__illus{width:120px;height:88px;color:var(--ds-color-border-strong)}
+.ds-empty--filter{padding:var(--ds-space-8) var(--ds-space-4)}
+.ds-skeleton{height:14px;border-radius:var(--ds-radius-sm);background:linear-gradient(90deg,var(--ds-color-bg-subtle),var(--ds-color-bg-canvas),var(--ds-color-bg-subtle));background-size:200% 100%;animation:ds-shimmer 1.2s infinite}
+@keyframes ds-shimmer{to{background-position:-200% 0}}
+.ds-modal-backdrop{position:fixed;inset:0;background:#1B1F2480;display:grid;place-items:center;z-index:10;padding:var(--ds-space-4)}
+.ds-modal{width:100%;max-width:520px;background:var(--ds-color-bg-surface);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md);display:grid}
+.ds-modal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--ds-space-4) var(--ds-space-6);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-modal__body{padding:var(--ds-space-6);display:grid;gap:var(--ds-space-4)}
+.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--ds-space-2);padding:var(--ds-space-4) var(--ds-space-6);border-top:1px solid var(--ds-color-border-default)}
+.ds-status-page{display:grid;justify-items:center;gap:var(--ds-space-3);padding:var(--ds-space-12);text-align:center}
+
+/* Trạng thái ẩn/khoá/read-only — W7 */
+[data-vis="hidden"]{display:none!important}
+[data-vis="disabled"]{opacity:.45;pointer-events:none}
+[data-vis="readonly"] .ds-input{border-color:transparent;background:transparent}
+
+/* Responsive — breakpoint theo UICONV §1; body[data-view] ép khung nhìn khi xem trong HIFI */
+@media (max-width:1023px){.ds-cols{grid-template-columns:1fr}}
+@media (max-width:767px){
+  .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+  .ds-btn{height:var(--ds-size-control-touch)}
+  .ds-input,.ds-select{height:var(--ds-size-control-touch)}
+  .ds-table-wrap{display:none}.ds-cards{display:grid}
+  .ds-hide-m{display:none!important}
+}
+@media (min-width:768px){.ds-cards{display:none}.ds-hide-d{display:none!important}}
+body[data-view="mobile"] .ds-cols{grid-template-columns:1fr}
+body[data-view="mobile"] .ds-table-wrap{display:none}body[data-view="mobile"] .ds-cards{display:grid}
+body[data-view="mobile"] .ds-hide-m{display:none!important}body[data-view="mobile"] .ds-hide-d{display:revert}
+body[data-view="mobile"] .ds-btn,body[data-view="mobile"] .ds-input,body[data-view="mobile"] .ds-select{height:var(--ds-size-control-touch)}
+body[data-view="mobile"] .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+body[data-view="tablet"] .ds-cols{grid-template-columns:1fr}
+/* Tiện ích xếp chồng ở mobile: phần tử trong .ds-row chiếm trọn hàng (nhóm nút thao tác của một dòng danh sách/CartItem…) */
+.ds-m-full{}
+@media (max-width:767px){.ds-m-full{flex-basis:100%;min-width:0}}
+body[data-view="mobile"] .ds-m-full{flex-basis:100%;min-width:0}
+/* ds-components v1.1 — END */
+  /* ===== Khung xem HIFI (không thuộc DS, không chép vào sản phẩm) ===== */
+  .hf-toolbar{position:sticky;top:0;z-index:30;background:var(--ds-color-text-primary);color:var(--ds-color-text-inverse);padding:6px 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}
+  .hf-toolbar h1{font-size:13px;margin:0 8px 0 0;font-weight:600}
+  .hf-toolbar label{display:flex;gap:4px;align-items:center;opacity:.9}
+  .hf-toolbar select,.hf-toolbar input{font:inherit;font-size:12px}
+  .hf-legend{margin-left:auto;opacity:.8}
+  .hf-stage{padding:24px 12px;display:grid;gap:40px;justify-items:center;background:#e9ebef}
+  .hf-frame{width:100%;max-width:1440px;background:var(--ds-color-bg-canvas);border:1px solid var(--ds-color-border-strong);box-shadow:var(--ds-shadow-md);overflow:hidden;position:relative}
+  .hf-frame>.hf-cap{font:600 11px/1 var(--ds-font-family-mono);padding:6px 10px;background:#1B1F24;color:#fff;letter-spacing:.02em}
+  .hf-frame>.hf-cap small{font-weight:400;margin-left:8px;opacity:.75}
+  body[data-view="tablet"] .hf-frame{max-width:834px}
+  body[data-view="mobile"] .hf-frame{max-width:390px}
+  body[data-only] .hf-frame{display:none}
+  body[data-only] .hf-frame[data-active="true"]{display:block}
+  [data-state]{display:none}[data-state="default"]{display:block}
+  body.hf-ids [data-c],body.hf-ids [data-f]{outline:1px dashed #B42318;outline-offset:1px;position:relative}
+  body.hf-ids [data-c]::after,body.hf-ids [data-f]::after{content:attr(data-c) attr(data-f);position:absolute;top:-9px;right:-2px;z-index:3;font:600 9px/14px var(--ds-font-family-mono);background:#B42318;color:#fff;padding:0 4px;border-radius:3px;pointer-events:none}
+  body.hf-zones [data-zone]{outline:1px dashed #2456A6;outline-offset:-1px;position:relative}
+  body.hf-zones [data-zone]::before{content:attr(data-zone);position:absolute;top:0;left:0;z-index:3;font:600 9px/14px var(--ds-font-family-mono);background:#2456A6;color:#fff;padding:0 4px}
+  body[data-mode="proto"] [data-nav]{cursor:pointer;box-shadow:0 0 0 2px #B7791F80}
+  .hf-proto-only{outline:2px dashed var(--ds-color-status-danger);outline-offset:2px;position:relative}
+  .hf-proto-only::before{content:"chỉ ở prototype — " attr(data-ref);position:absolute;top:-16px;left:0;font:600 9px/14px var(--ds-font-family-mono);color:var(--ds-color-status-danger)}
+  .hf-note{padding:12px;font-size:12px;color:#5B6472;text-align:center}
+</style>
+</head>
+<body data-view="desktop" data-mode="mockup">
+
+<header class="hf-toolbar">
+  <h1>HIFI — &lt;US-id&gt; · &lt;Tên US&gt;</h1>
+  <label>Màn hình <select id="hf-scr"><option value="">Tất cả</option></select></label>
+  <label>Khung nhìn <select id="hf-view"><option value="desktop">Desktop ≥1024</option><option value="tablet">Tablet 768–1023</option><option value="mobile">Mobile &lt;768</option></select></label>
+  <label>Trạng thái <select id="hf-state">
+    <option value="default">Mặc định (có dữ liệu)</option><option value="loading">Đang tải</option>
+    <option value="empty-none">Rỗng — chưa có dữ liệu nào</option><option value="empty-filter">Rỗng — bộ lọc không khớp</option>
+    <option value="error">Lỗi tải dữ liệu</option><option value="submitting">Đang gửi</option><option value="invalid">Validation lỗi</option>
+  </select></label>
+  <label>Chế độ <select id="hf-mode"><option value="mockup">Mockup</option><option value="proto">Prototype (bấm điều hướng)</option></select></label>
+  <label><input type="checkbox" id="hf-ids"> C-id/F-id</label>
+  <label><input type="checkbox" id="hf-zones"> Vùng Zn</label>
+  <span class="hf-legend">Hành vi xem SRS · bố cục xem WF · token xem DS · URL: ?scr=SCR-01&amp;view=mobile&amp;state=empty-none&amp;ids=1</span>
+</header>
+
+<main class="hf-stage">
+
+<!-- ============ SCR-01 (mẫu: danh sách) — mỗi SCR một .hf-frame, id = SCR-id, data-c/data-f/data-key khớp SRS, data-zone khớp WF ============ -->
+<section class="hf-frame" id="SCR-01" data-scr="SCR-01" data-title="Danh sách cửa hàng">
+  <div class="hf-cap">SCR-01 · Danh sách cửa hàng <small>WF §3.1 · vai trò ROLE-01, ROLE-02 · vào từ Menu</small></div>
+  <header class="ds-header" data-zone="Z0" data-name="Header toàn site">
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="menu"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
+    <b>Tên hệ thống</b>
+    <nav class="ds-breadcrumb ds-hide-m"><a data-key="nav.home">Trang chủ</a><span>/</span><span data-key="scr01.title">Danh sách cửa hàng</span></nav>
+    <span style="margin-left:auto" class="ds-row"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></span>
+  </header>
+  <div class="ds-page">
+    <div class="ds-row ds-row--between" data-zone="Z1" data-name="Header màn hình">
+      <h1 data-c="C01" data-key="scr01.title">Danh sách cửa hàng</h1>
+      <button class="ds-btn ds-btn--primary" data-c="C02" data-key="btn.create" data-nav="SCR-03"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Tạo mới</button>
+    </div>
+    <div class="ds-row" data-zone="Z2" data-name="Thanh lọc">
+      <div class="ds-input-wrap" style="width:320px;max-width:100%"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input class="ds-input" data-c="C03" data-key="scr01.search.ph" placeholder="Nhập mã hoặc tên…"></div>
+      <select class="ds-select ds-hide-m" style="width:200px" data-c="C04" data-key="scr01.filter.status"><option>Trạng thái: Tất cả</option></select>
+      <button class="ds-btn ds-btn--secondary ds-hide-d" data-key="btn.filter"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></svg>Lọc</button>
+    </div>
+    <div data-zone="Z3" data-name="Dữ liệu">
+      <div data-state="default">
+        <div class="ds-table-wrap"><table class="ds-table" data-c="C05">
+          <thead><tr><th aria-sort="ascending">Mã ▲</th><th>Tên</th><th>Trạng thái</th><th>Ngày tạo</th><th></th></tr></thead>
+          <tbody>
+            <tr><td>STR-001</td><td>Cửa hàng A</td><td><span class="ds-badge">Nháp</span></td><td>30/08/2026</td><td><a class="ds-link" data-nav="SCR-02" data-key="btn.detail">Chi tiết</a></td></tr>
+            <tr><td>STR-002</td><td>Cửa hàng B</td><td><span class="ds-badge ds-badge--success">Đã duyệt</span></td><td>29/08/2026</td><td><a class="ds-link" data-nav="SCR-02" data-key="btn.detail">Chi tiết</a></td></tr>
+          </tbody></table></div>
+        <div class="ds-cards" data-c="C05">
+          <div class="ds-card" data-nav="SCR-02"><div class="ds-row ds-row--between"><b>STR-001</b><span class="ds-badge">Nháp</span></div><div>Cửa hàng A</div><div class="ds-small ds-muted">30/08/2026</div></div>
+          <div class="ds-card" data-nav="SCR-02"><div class="ds-row ds-row--between"><b>STR-002</b><span class="ds-badge ds-badge--success">Đã duyệt</span></div><div>Cửa hàng B</div><div class="ds-small ds-muted">29/08/2026</div></div>
+        </div>
+      </div>
+      <div data-state="loading"><div class="ds-card"><div class="ds-skeleton"></div><div class="ds-skeleton" style="width:85%"></div><div class="ds-skeleton" style="width:92%"></div><div class="ds-skeleton" style="width:70%"></div></div></div>
+      <div data-state="empty-none"><div class="ds-card"><div class="ds-empty"><svg class="ds-empty__illus" viewBox="0 0 120 88" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="16" y="20" width="88" height="56" rx="6"/><path d="M16 36h88M32 52h28M32 62h44"/></svg><span data-key="empty.none">Chưa có cửa hàng nào. Tạo cửa hàng đầu tiên?</span><button class="ds-btn ds-btn--primary" data-key="btn.create" data-nav="SCR-03">Tạo mới</button></div></div></div>
+      <div data-state="empty-filter"><div class="ds-card"><div class="ds-empty ds-empty--filter"><span data-key="empty.filter">Không tìm thấy kết quả phù hợp với bộ lọc.</span><button class="ds-btn ds-btn--secondary" data-key="btn.clearFilter">Xoá lọc</button></div></div></div>
+      <div data-state="error"><div class="ds-banner ds-banner--error"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg><span data-key="error.load">Không tải được dữ liệu.</span><button class="ds-btn ds-btn--secondary" style="margin-left:auto;height:32px" data-key="btn.retry">Thử lại</button></div></div>
+    </div>
+    <div class="ds-row ds-row--between" data-zone="Z4" data-name="Phân trang">
+      <span class="hf-proto-only" data-ref="WF §5 #1"><button class="ds-btn ds-btn--secondary">Xuất Excel</button></span>
+      <div class="ds-pagination" data-c="C06"><button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Trang trước">‹</button><span>1 / 7</span><button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Trang sau">›</button><select class="ds-select ds-hide-m" style="width:110px;height:32px"><option>20 dòng</option></select></div>
+    </div>
+  </div>
+</section>
+
+<!-- ============ SCR-03 (mẫu: form trong modal) ============ -->
+<section class="hf-frame" id="SCR-03" data-scr="SCR-03" data-title="Tạo cửa hàng">
+  <div class="hf-cap">SCR-03 · Tạo cửa hàng <small>Modal · mở từ C02 · WF §3.3</small></div>
+  <div style="min-height:560px;position:relative">
+    <div class="ds-modal-backdrop" style="position:absolute">
+      <div class="ds-modal" role="dialog" aria-labelledby="scr03-title">
+        <div class="ds-modal__head" data-zone="Z1" data-name="Tiêu đề modal"><h3 id="scr03-title" data-c="C01" data-key="scr03.title">Tạo cửa hàng</h3><button class="ds-btn ds-btn--ghost ds-btn--icon" data-c="C08" data-key="btn.close" data-nav="SCR-01" aria-label="Đóng"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
+        <div class="ds-modal__body" data-zone="Z2" data-name="Form">
+          <label class="ds-field"><span class="ds-field__label" data-key="f01.label">Mã <b class="ds-req">*</b></span>
+            <span data-state="default"><input class="ds-input" data-f="F01" data-key="f01.ph" placeholder="3–20 ký tự, A–Z 0–9 -"><span class="ds-field__hint" data-key="f01.hint">Không trùng với mã đã có</span></span>
+            <span data-state="invalid"><input class="ds-input is-invalid" data-f="F01" value="ab"><span class="ds-field__error" data-key="E-XXX-0001">Mã phải có từ 3 đến 20 ký tự.</span></span>
+          </label>
+          <label class="ds-field"><span class="ds-field__label" data-key="f02.label">Loại <b class="ds-req">*</b></span><select class="ds-select" data-f="F02"><option>Thường</option></select></label>
+          <label class="ds-field"><span class="ds-field__label" data-key="f03.label">Tên</span><input class="ds-input" data-f="F03" data-key="f03.ph" placeholder="Tên hiển thị"></label>
+        </div>
+        <div class="ds-modal__foot" data-zone="Z3" data-name="Hành động">
+          <button class="ds-btn ds-btn--secondary" data-c="C07" data-key="btn.cancel" data-nav="SCR-01">Huỷ</button>
+          <span data-state="default" style="display:inline"><button class="ds-btn ds-btn--primary" data-c="C09" data-key="btn.save">Lưu</button></span>
+          <span data-state="submitting"><button class="ds-btn ds-btn--primary is-loading" data-c="C09" aria-disabled="true"><span class="ds-spinner"></span>Đang lưu…</button></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+</main>
+<p class="hf-note">Mockup hi-fi · token và component theo DS_&lt;PROJECT&gt; · hành vi theo SRS_&lt;US-id&gt; · bố cục theo WF_&lt;US-id&gt; · khung đứt đỏ = chỉ có ở prototype, chưa có trong SRS (WF §5)</p>
+
+<script>
+(function(){
+  var q=new URLSearchParams(location.search), b=document.body;
+  var scr=document.getElementById('hf-scr'),view=document.getElementById('hf-view'),state=document.getElementById('hf-state'),mode=document.getElementById('hf-mode'),ids=document.getElementById('hf-ids'),zones=document.getElementById('hf-zones');
+  document.querySelectorAll('.hf-frame').forEach(function(f){var o=document.createElement('option');o.value=f.id;o.textContent=f.id+' · '+(f.dataset.title||'');scr.appendChild(o);});
+  if(q.get('scr'))scr.value=q.get('scr');if(q.get('view'))view.value=q.get('view');if(q.get('state'))state.value=q.get('state');if(q.get('mode'))mode.value=q.get('mode');ids.checked=q.get('ids')==='1';zones.checked=q.get('zones')==='1';
+  function apply(){
+    b.setAttribute('data-view',view.value);b.setAttribute('data-mode',mode.value);
+    b.classList.toggle('hf-ids',ids.checked);b.classList.toggle('hf-zones',zones.checked);
+    if(scr.value){b.setAttribute('data-only','1');}else{b.removeAttribute('data-only');}
+    document.querySelectorAll('.hf-frame').forEach(function(f){f.setAttribute('data-active',String(!scr.value||f.id===scr.value));});
+    var s=state.value;
+    document.querySelectorAll('[data-state]').forEach(function(el){
+      var st=el.getAttribute('data-state'),on;
+      if(s==='submitting')on=st==='submitting'||(st==='default'&&!el.closest('.ds-modal__foot'));
+      else if(s==='invalid')on=st==='invalid'||(st==='default'&&!el.closest('.ds-field'));
+      else on=st===s||(st==='default'&&s!=='default'&&!el.parentElement.querySelector('[data-state="'+s+'"]'));
+      el.style.display=on?(el.tagName==='SPAN'?'inline':'block'):'none';
+    });
+  }
+  [scr,view,state,mode,ids,zones].forEach(function(el){el.addEventListener('change',apply);});
+  document.addEventListener('click',function(e){
+    if(b.getAttribute('data-mode')!=='proto')return;
+    var t=e.target.closest('[data-nav]');if(!t)return;e.preventDefault();
+    var to=document.getElementById(t.getAttribute('data-nav'));if(!to)return;
+    scr.value=to.id;state.value='default';apply();to.scrollIntoView();
+  });
+  apply();
+})();
+</script>
+</body>
+</html>
diff --git a/.claude/skills/ba-design/templates/tokens.css b/.claude/skills/ba-design/templates/tokens.css
new file mode 100644
index 0000000..e54ca72
--- /dev/null
+++ b/.claude/skills/ba-design/templates/tokens.css
@@ -0,0 +1,54 @@
+/* tokens.css — SINH TỪ tokens.json, không sửa tay.
+   Quy tắc tên: --ds-<đường dẫn token nối bằng '-'>. Kiểm khớp: node scripts/design-check.mjs --tokens tokens.json --css tokens.css
+   Khối :root này được chép nguyên văn vào <style> của mọi HIFI_*.html và components.html (file tự chứa). */
+:root{
+  --ds-color-bg-canvas:#F6F7F9;
+  --ds-color-bg-surface:#FFFFFF;
+  --ds-color-bg-subtle:#EEF1F5;
+  --ds-color-border-default:#D5DAE1;
+  --ds-color-border-strong:#767F8C;
+  --ds-color-text-primary:#1B1F24;
+  --ds-color-text-secondary:#5B6472;
+  --ds-color-text-disabled:#9AA3AF;
+  --ds-color-text-inverse:#FFFFFF;
+  --ds-color-brand-primary:#2456A6;
+  --ds-color-brand-primary-hover:#1C468A;
+  --ds-color-brand-primary-subtle:#E7EEF9;
+  --ds-color-status-danger:#B42318;
+  --ds-color-status-danger-subtle:#FDECEA;
+  --ds-color-status-success:#1E7B45;
+  --ds-color-status-success-subtle:#E6F4EC;
+  --ds-color-status-warning:#B7791F;
+  --ds-color-status-warning-subtle:#FFF4DE;
+  --ds-color-focus-ring:#2456A6;
+  --ds-font-family-base:"Segoe UI","Roboto","Helvetica Neue","Arial",sans-serif;
+  --ds-font-family-mono:"SFMono-Regular","Consolas","Menlo",monospace;
+  --ds-font-size-xs:12px;
+  --ds-font-size-sm:14px;
+  --ds-font-size-md:16px;
+  --ds-font-size-lg:20px;
+  --ds-font-size-xl:24px;
+  --ds-font-size-2xl:32px;
+  --ds-font-weight-regular:400;
+  --ds-font-weight-semibold:600;
+  --ds-font-line-height-tight:1.25;
+  --ds-font-line-height-normal:1.5;
+  --ds-space-1:4px;
+  --ds-space-2:8px;
+  --ds-space-3:12px;
+  --ds-space-4:16px;
+  --ds-space-6:24px;
+  --ds-space-8:32px;
+  --ds-space-12:48px;
+  --ds-radius-sm:4px;
+  --ds-radius-md:8px;
+  --ds-radius-pill:999px;
+  --ds-shadow-sm:0px 1px 2px 0px #1B1F2414;
+  --ds-shadow-md:0px 4px 12px 0px #1B1F2426;
+  --ds-size-control-desktop:36px;
+  --ds-size-control-touch:44px;
+  --ds-size-icon:20px;
+  --ds-size-content-max:1200px;
+  --ds-breakpoint-tablet:768px;
+  --ds-breakpoint-desktop:1024px;
+}
diff --git a/.claude/skills/ba-design/templates/tokens.json b/.claude/skills/ba-design/templates/tokens.json
new file mode 100644
index 0000000..2435182
--- /dev/null
+++ b/.claude/skills/ba-design/templates/tokens.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "DS_<PROJECT> — design token theo chuẩn W3C DTCG. Nguồn sự thật duy nhất về màu/chữ/khoảng cách; tokens.css và khối :root trong HIFI_*.html phải sinh từ file này (kiểm bằng scripts/design-check.mjs). Giá trị bên dưới là PLACEHOLDER trung tính — thay theo brand guideline; thiếu brand ⇒ giữ và ghi OQ trong DS §0.",
+  "color": {
+    "bg": {
+      "canvas":  { "$type": "color", "$value": "#F6F7F9", "$description": "Nền trang" },
+      "surface": { "$type": "color", "$value": "#FFFFFF", "$description": "Nền card/bảng/modal" },
+      "subtle":  { "$type": "color", "$value": "#EEF1F5", "$description": "Header bảng, vùng phụ" }
+    },
+    "border": {
+      "default": { "$type": "color", "$value": "#D5DAE1" },
+      "strong":  { "$type": "color", "$value": "#767F8C" }
+    },
+    "text": {
+      "primary":   { "$type": "color", "$value": "#1B1F24" },
+      "secondary": { "$type": "color", "$value": "#5B6472" },
+      "disabled":  { "$type": "color", "$value": "#9AA3AF", "$description": "Miễn kiểm tương phản (WCAG 1.4.3 loại trừ thành phần vô hiệu)" },
+      "inverse":   { "$type": "color", "$value": "#FFFFFF" }
+    },
+    "brand": {
+      "primary":        { "$type": "color", "$value": "#2456A6", "$description": "Nút chính, liên kết, focus ring" },
+      "primary-hover":  { "$type": "color", "$value": "#1C468A" },
+      "primary-subtle": { "$type": "color", "$value": "#E7EEF9", "$description": "Nền badge/hàng được chọn" }
+    },
+    "status": {
+      "danger":         { "$type": "color", "$value": "#B42318" },
+      "danger-subtle":  { "$type": "color", "$value": "#FDECEA" },
+      "success":        { "$type": "color", "$value": "#1E7B45" },
+      "success-subtle": { "$type": "color", "$value": "#E6F4EC" },
+      "warning":        { "$type": "color", "$value": "#B7791F" },
+      "warning-subtle": { "$type": "color", "$value": "#FFF4DE" }
+    },
+    "focus": { "ring": { "$type": "color", "$value": "#2456A6" } }
+  },
+  "font": {
+    "family": {
+      "base": { "$type": "fontFamily", "$value": ["Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"], "$description": "PLACEHOLDER — thay bằng font brand; giữ fallback stack" },
+      "mono": { "$type": "fontFamily", "$value": ["SFMono-Regular", "Consolas", "Menlo", "monospace"] }
+    },
+    "size": {
+      "xs":  { "$type": "dimension", "$value": "12px" },
+      "sm":  { "$type": "dimension", "$value": "14px" },
+      "md":  { "$type": "dimension", "$value": "16px" },
+      "lg":  { "$type": "dimension", "$value": "20px" },
+      "xl":  { "$type": "dimension", "$value": "24px" },
+      "2xl": { "$type": "dimension", "$value": "32px" }
+    },
+    "weight": {
+      "regular":  { "$type": "fontWeight", "$value": 400 },
+      "semibold": { "$type": "fontWeight", "$value": 600 }
+    },
+    "line-height": {
+      "tight":  { "$type": "number", "$value": 1.25 },
+      "normal": { "$type": "number", "$value": 1.5 }
+    }
+  },
+  "space": {
+    "1": { "$type": "dimension", "$value": "4px" },
+    "2": { "$type": "dimension", "$value": "8px" },
+    "3": { "$type": "dimension", "$value": "12px" },
+    "4": { "$type": "dimension", "$value": "16px" },
+    "6": { "$type": "dimension", "$value": "24px" },
+    "8": { "$type": "dimension", "$value": "32px" },
+    "12": { "$type": "dimension", "$value": "48px" }
+  },
+  "radius": {
+    "sm":   { "$type": "dimension", "$value": "4px" },
+    "md":   { "$type": "dimension", "$value": "8px" },
+    "pill": { "$type": "dimension", "$value": "999px" }
+  },
+  "shadow": {
+    "sm": { "$type": "shadow", "$value": { "color": "#1B1F2414", "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px" } },
+    "md": { "$type": "shadow", "$value": { "color": "#1B1F2426", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "0px" } }
+  },
+  "size": {
+    "control": {
+      "desktop": { "$type": "dimension", "$value": "36px", "$description": "Chiều cao nút/ô nhập desktop" },
+      "touch":   { "$type": "dimension", "$value": "44px", "$description": "Chiều cao tối thiểu trên mobile (hit target ≥ 44px)" }
+    },
+    "icon": { "$type": "dimension", "$value": "20px" },
+    "content-max": { "$type": "dimension", "$value": "1200px" }
+  },
+  "breakpoint": {
+    "tablet":  { "$type": "dimension", "$value": "768px",  "$description": "Khớp UICONV §1" },
+    "desktop": { "$type": "dimension", "$value": "1024px", "$description": "Khớp UICONV §1" }
+  },
+  "$extensions": {
+    "ba": {
+      "project": "<PROJECT>",
+      "version": "1.0",
+      "source": "UICONV_<PROJECT> v1.0 · brand guideline: <đường dẫn / 'chưa có — OQ-nnn'>",
+      "contrastPairs": [
+        { "fg": "color.text.primary",   "bg": "color.bg.surface",        "min": 4.5, "use": "Chữ thường trên nền card" },
+        { "fg": "color.text.primary",   "bg": "color.bg.canvas",         "min": 4.5, "use": "Chữ thường trên nền trang" },
+        { "fg": "color.text.secondary", "bg": "color.bg.surface",        "min": 4.5, "use": "Chữ phụ, hint" },
+        { "fg": "color.text.inverse",   "bg": "color.brand.primary",     "min": 4.5, "use": "Nhãn nút chính" },
+        { "fg": "color.text.inverse",   "bg": "color.status.danger",     "min": 4.5, "use": "Nhãn nút nguy hiểm" },
+        { "fg": "color.brand.primary",  "bg": "color.bg.surface",        "min": 4.5, "use": "Liên kết" },
+        { "fg": "color.status.danger",  "bg": "color.bg.surface",        "min": 4.5, "use": "Message lỗi dưới field" },
+        { "fg": "color.text.primary",   "bg": "color.brand.primary-subtle", "min": 4.5, "use": "Chữ trên badge/hàng chọn" },
+        { "fg": "color.border.strong",  "bg": "color.bg.surface",        "min": 3.0, "use": "Viền ô nhập (WCAG 1.4.11 non-text)" }
+      ]
+    }
+  }
+}
diff --git a/.claude/skills/ba-lifecycle/SKILL.md b/.claude/skills/ba-lifecycle/SKILL.md
index bcd038e..c2a701a 100644
--- a/.claude/skills/ba-lifecycle/SKILL.md
+++ b/.claude/skills/ba-lifecycle/SKILL.md
@@ -72,7 +72,10 @@ file tồn tại nhưng các mục còn `TBD` ⇒ **chưa đạt**, không đư
 tồn tại và có chữ ký Designer · `WF` phủ mọi SCR, `C-id` khớp hai chiều · `WF` §5 không còn lệch
 Tồn tại/Hành vi chưa quyết · WF ✏️ có Designer ký) chỉ áp cho `PRODUCT = screen`. Loại khác
 dùng tiêu chí ghi ở đầu file `ba-3-specification/templates/srs-part2/<loại>.md`.
-Khi chấm G3 cho `screen`, mở cả `00-index/UICONV_*.md` và `03-specification/WF_*.md`.
+Khi chấm G3 cho `screen`, mở cả `00-index/UICONV_*.md` và `03-specification/WF_*.md`; ba dòng *(screen · design)*
+đọc `00-index/DS_*.md`, `03-specification/design/DSPEC_*.md` (§6 có kết quả `design-check`) và kiểm `HIFI_*.html`,
+`FIGMA_*/` tồn tại. Chạy được `node .claude/skills/ba-design/scripts/design-check.mjs …` thì chép kết quả thật;
+không chạy được ⇒ ghi "chưa kiểm bằng máy", không đoán ✅.
 
 Ba trạng thái, không có trạng thái thứ tư:
 
@@ -135,6 +138,7 @@ G3 vì thiếu bảng mã lỗi và 3 OQ chưa trả lời."*
 1. Trả lời OQ-012, OQ-013 (chờ PO)          → /ba-4-delivery-support US059
 2. Bổ sung bảng mã lỗi vào SRS §1.A.4       → /ba-3-specification US059
 3. Chạy kiểm tra coverage trước khi trình G3 → /ba-traceability US059
+4. (screen) Sinh DS/HIFI/FIGMA sau khi WF xong      → /ba-design US059 hifi
 ```
 
 **④ Cảnh báo** — OQ quá hạn, artifact lệch version, US có trong backlog nhưng chưa có SRS,
diff --git a/.claude/skills/ba-lifecycle/references/artifact-map.md b/.claude/skills/ba-lifecycle/references/artifact-map.md
index 92cbbc7..a5c681f 100644
--- a/.claude/skills/ba-lifecycle/references/artifact-map.md
+++ b/.claude/skills/ba-lifecycle/references/artifact-map.md
@@ -19,6 +19,10 @@
 | `NFR` | Yêu cầu phi chức năng | `03-specification/` | ba-3 | Dev, Ops, QA |
 | `WF` | Wireframe & bố cục (`.md` bảng vùng/thành phần/lệch + `.html` low-fi) — chỉ `PRODUCT = screen` | `03-specification/` | ba-3 (activity `wf`) | Dev FE, Designer, PO |
 | `UICONV` | Quy ước giao diện cấp project — chỉ `PRODUCT = screen`, sinh một lần | `00-index/` | ba-3 (activity `uiconv`) | Dev FE, Designer, mọi SRS/WF |
+| `DS` | Design system cấp project (`.md` + `ds/tokens.json` chuẩn W3C DTCG, `ds/tokens.css`, `ds/components.html`) — chỉ `PRODUCT = screen`, sinh một lần | `00-index/` | ba-design (activity `ds`) | Dev FE, Designer, mọi HIFI/FIGMA |
+| `HIFI` | Mockup hi-fi tự chứa (`.html`: mọi `SCR` × trạng thái × breakpoint, chế độ prototype bấm được) — chỉ `screen` | `03-specification/design/` | ba-design (`hifi`, `proto`) | Dev FE, Designer, PO |
+| `FIGMA` | Gói nhập Figma (thư mục: SVG mỗi `SCR` × khung nhìn, `tokens.dtcg.json`, `png/`, `README-import.md`) — chỉ `screen`; **không có `.fig`** | `03-specification/design/` | ba-design (`figma`) | Designer |
+| `DSPEC` | Đặc tả thiết kế & bàn giao (redline, ánh xạ component, truy cập, bảng lệch HIFI ↔ WF/SRS/DS) — chỉ `screen` | `03-specification/design/` | ba-design (`dspec`) | Dev FE, QA (review giao diện) |
 | `QLOG` | Clarification log | `04-delivery/` | ba-4 | Dev, QA |
 | `CR` | Change Request | `04-delivery/` | ba-4 | PO, PM, Dev |
 | `TCREVIEW` | Biên bản review test case | `04-delivery/` | ba-4 | QA |
@@ -56,6 +60,10 @@ Mọi file `.md` sinh ra phải mở đầu bằng khối này. Thiếu một d
 | 1.0 | 2026-08-30 | … | Bản đầu | — |
 ```
 
+Artifact **không phải `.md`** (`WF_*.html`, `HIFI_*.html`, thư mục `FIGMA_*/`, `ds/*`) không có header riêng:
+trạng thái duyệt của chúng nằm ở artifact `.md` đi kèm (`WF.md` cho `WF.html`; `DSPEC` cho `HIFI` và `FIGMA`;
+`DS.md` cho `ds/*`). Gate chấm file `.md` đó, và kiểm file kèm có tồn tại + qua `design-check`.
+
 **Ý nghĩa `Status`** — đây là thứ gate đọc, không phải tên file:
 
 | Status | Nghĩa | Ai được sửa file |
@@ -134,17 +142,31 @@ flowchart LR
     SRS --> WF
     PROTO[["Prototype / design system (ngoài bộ BA)"]] -.-> UICONV
     PROTO -.-> WF
+    UICONV --> DS["DS"]
+    BRAND[["Brand guideline (ngoài bộ BA)"]] -.-> DS
+    PROTO -.-> DS
+    DS --> HIFI["HIFI"]
+    WF --> HIFI
+    SRS --> HIFI
+    HIFI --> FIGMA["FIGMA"]
+    HIFI --> DSPEC["DSPEC"]
+    DS --> FIGMA
     AC --> UAT["UAT"]
     UAT --> BENEFIT["BENEFIT"]
     UAT --> RELNOTE["RELNOTE"]
     UAT --> MANUAL["MANUAL"]
 ```
 
-**RTM đọc:** `BRIEF`(RQ) · `BACKLOG`(US) · `SRS`+`AC`(AC, field, mã lỗi) · `WF`(C-id, SCR) · `UAT`(test case) · `CR`
+**RTM đọc:** `BRIEF`(RQ) · `BACKLOG`(US) · `SRS`+`AC`(AC, field, mã lỗi) · `WF`(C-id, SCR) · `HIFI`(`data-c`, `data-key`, `SCR`) · `DS`(token) · `UAT`(test case) · `CR`
 
 `WF` và `UICONV` chỉ tồn tại khi `PRODUCT = screen`. `WF` **không** là nguồn sự thật về hành
 vi — nó tham chiếu ngược về `SRS`; đổi prototype ⇒ đổi `WF`, `SRS` chỉ đổi khi lệch loại
 Tồn tại/Hành vi được PO chấp nhận (qua `CR` nếu SRS đã Baselined).
 
+`DS`, `HIFI`, `FIGMA`, `DSPEC` cũng chỉ tồn tại khi `PRODUCT = screen` và do `ba-design` sinh **sau** `WF`.
+`HIFI` **không** là nguồn sự thật về hành vi hay text — nó *chép* từ `SRS` (`design-check` H3/H4 kiểm); `DS` là
+nguồn sự thật về visual (token). Đổi brand ⇒ đổi `DS` ⇒ chạy lại mọi `HIFI`/`FIGMA`; đổi `SRS`/`WF` ⇒ chạy lại
+`HIFI` → `FIGMA` → `DSPEC` của US đó.
+
 Đọc xuôi mũi tên để biết **sửa cái này thì phải sửa tiếp cái nào**. Ví dụ sửa một `BR` ⇒
 phải rà lại `SRS`, `AC`, test case, và cập nhật `RTM`.
diff --git a/.claude/skills/ba-lifecycle/references/domain-profiles.md b/.claude/skills/ba-lifecycle/references/domain-profiles.md
index 5dad9bc..e3f063d 100644
--- a/.claude/skills/ba-lifecycle/references/domain-profiles.md
+++ b/.claude/skills/ba-lifecycle/references/domain-profiles.md
@@ -66,6 +66,7 @@ Trục quan trọng nhất. Nó quyết định **GĐ3 viết cái gì**.
 | **GĐ3** PART 2 | Màn hình, field | Endpoint, schema | Luồng dữ liệu, data contract | Bài toán, metric, ngưỡng | Job, lịch, chạy lại | ❌ N/A |
 | **GĐ3** `AC` | 4 nhóm đầy đủ | 4 nhóm đầy đủ | 4 nhóm + **đối soát nguồn–đích** | 🔴 Chỉ áp cho hệ thống bao quanh; phần dự đoán dùng **ngưỡng metric** | 4 nhóm + **chạy lại** | Tiêu chí quy trình |
 | **GĐ3** text hiển thị | Bắt buộc | N/A | N/A | Chỉ phần hiển thị cho người | N/A | N/A |
+| **GĐ3** design (`ba-design`: `DS`, `HIFI`, `FIGMA`, `DSPEC`) | Bắt buộc ở `standard`+ | ❌ N/A | ❌ N/A | Chỉ phần màn hình cho người (nếu có) | ❌ N/A | ❌ N/A |
 | **GĐ4** UAT | Người dùng thao tác | Team tiêu thụ tích hợp thử | Đối soát số liệu song song | 🔴 Đánh giá trên tập giữ lại + shadow mode | Chạy song song với cách cũ | Chạy thử quy trình |
 | **GĐ5** `MANUAL` | Cho người dùng cuối | **Tài liệu tích hợp** cho dev | Từ điển dữ liệu + hướng dẫn đọc số | Hướng dẫn diễn giải kết quả | Sổ tay vận hành | Quy trình mới |
 
@@ -116,7 +117,7 @@ Quyết định **gate chặt tới đâu và ai phải ký**. `standard` là ba
 | Giá trị | Dùng khi | Ký gate |
 |---|---|---|
 | `light` | POC, thử nghiệm, công cụ nội bộ ≤ 2 tuần, không đụng tiền/dữ liệu cá nhân | Chỉ PO |
-| `standard` | Mặc định — sản phẩm thật, có người dùng thật | PO + Tech Lead + QA (theo từng gate); `PRODUCT = screen` thêm **Designer ở G3** (`UICONV`, `WF`) |
+| `standard` | Mặc định — sản phẩm thật, có người dùng thật | PO + Tech Lead + QA (theo từng gate); `PRODUCT = screen` thêm **Designer ở G3** (`UICONV`, `WF`, và `DS`/`HIFI`/`DSPEC` do `ba-design` sinh) |
 | `strict` | Có tiền, dữ liệu cá nhân, yêu cầu pháp lý, chịu kiểm toán (tài chính, y tế, bảo hiểm) | Như standard **+ Bảo mật/Pháp chế ở G2 và G3** |
 
 Chi tiết tiêu chí bớt/thêm theo từng gate: [workflow.md §2.0](workflow.md).
diff --git a/.claude/skills/ba-lifecycle/references/workflow.md b/.claude/skills/ba-lifecycle/references/workflow.md
index 28ac206..4f0cec9 100644
--- a/.claude/skills/ba-lifecycle/references/workflow.md
+++ b/.claude/skills/ba-lifecycle/references/workflow.md
@@ -28,6 +28,9 @@ flowchart TD
 
 `ba-traceability` chạy song song, cập nhật RTM sau mỗi giai đoạn và **có quyền chặn G2, G3, G4**.
 
+`ba-design` (vai Design của bộ skill) chạy **song song GĐ3** khi `PRODUCT = screen`, sau activity `wf` của ba-3:
+sinh `DS` (một lần/project), `HIFI`, `FIGMA`, `DSPEC` cho từng US. Artifact của nó **ký cùng G3**, không có gate riêng.
+
 ## 2.0 Mức nghiêm ngặt — đọc trước §2
 
 Checklist ở §2 là **baseline của mức `standard`**. Hai mức còn lại là delta so với nó:
@@ -103,16 +106,20 @@ giải quyết được pain point đã ghi ở G1.
 - [ ] *(screen)* `WF_<US>` (md + html) phủ **mọi** `SCR` của SRS; tập `C-id` khớp **hai chiều** với bảng thành phần
 - [ ] *(screen)* `WF` §5 (lệch prototype ↔ SRS) đã điền; không còn lệch **Tồn tại/Hành vi** chưa có người quyết
 - [ ] *(screen)* `WF` chế độ ✏️ (BA tự dựng) có chữ ký Designer; chế độ 🎨 (prototype tham chiếu) có PO xác nhận §1 và §5
+- [ ] *(screen · design)* `DS_<PROJECT>` tồn tại; `design-check` T1/T2 đạt (token ↔ `tokens.css` khớp, mọi cặp chữ/nền ≥ 4.5); §0 ghi độ tin cậy visual; có chữ ký Designer (hoặc PO + `DEC-nn`)
+- [ ] *(screen · design)* `HIFI_<US>` phủ **mọi** `SCR` × trạng thái SRS §2.3.6 × (desktop + mobile); `design-check` H1–H5 đạt: `data-c`/`data-f` khớp **hai chiều** SRS, text `data-key` **nguyên văn** SRS §4.2, không mã màu thô
+- [ ] *(screen · design)* `FIGMA_<US>/` có SVG desktop + mobile cho mọi `SCR`, màu ⊆ token (`design-check` S1); `DSPEC_<US>` §6 đã điền, không còn lệch Tồn tại/Hành vi/Text với SRS
 - [ ] QA xác nhận **mọi AC đều test được** — AC không test được là AC chưa viết xong
 - [ ] Không còn `OQ` mở nào ảnh hưởng tới hành vi hệ thống
 - [ ] `ba-traceability` báo coverage US→AC và AC→test case ≥ 100%, và *(screen)* SRS↔WF `C-id` lệch = 0
 
 **Chặn:** còn bất kỳ `TBD` nào trong bảng field hoặc bảng mã lỗi. Còn `OQ` mở về hành vi.
-*(screen)* Còn lệch Tồn tại/Hành vi giữa prototype và SRS chưa quyết.
+*(screen)* Còn lệch Tồn tại/Hành vi giữa prototype và SRS chưa quyết. *(screen · design)* `HIFI` có thành phần
+không có trong SRS mà không bọc `hf-proto-only`, hoặc text `data-key` khác SRS §4.2.
 **Đây là gate nghiêm nhất** — một chỗ mơ hồ lọt qua G3 sẽ thành một bug hoặc một CR.
 
-> Checklist trên viết theo `PRODUCT = screen`. Loại khác thì dòng "bảng field" và bốn dòng
-> *(screen)* được thay bằng tiêu chí tương ứng của biến thể PART 2 — xem đầu file
+> Checklist trên viết theo `PRODUCT = screen`. Loại khác thì dòng "bảng field", bốn dòng *(screen)*
+> và ba dòng *(screen · design)* được thay bằng tiêu chí tương ứng của biến thể PART 2 — xem đầu file
 > `ba-3-specification/templates/srs-part2/<loại>.md`.
 
 | Bớt ở `light` | Thêm ở `strict` |
@@ -121,6 +128,7 @@ giải quyết được pain point đã ghi ở G1.
 | `NFR` chỉ bắt buộc nhóm áp dụng rõ ràng; các nhóm khác ghi "N/A — POC" | Mọi mã lỗi phải có bản dịch đủ mọi ngôn ngữ hỗ trợ, không được để sau |
 | `API` được phép là phác thảo, không cần bảng đối chiếu mã lỗi | `API` phải do BE xác nhận, **không chấp nhận contract BA tự đề xuất** |
 | *(screen)* `WF` chỉ cần bảng vùng + bảng lệch, không cần HTML; `UICONV` chỉ cần §3–§6, §8 | *(screen)* `WF` phải có responsive đủ mọi breakpoint của `UICONV` §1 và thứ tự focus cho mọi form |
+| *(screen · design)* `HIFI`/`FIGMA` không bắt buộc; `DS` chỉ cần §1 token + §3 ánh xạ; `DSPEC` bỏ | *(screen · design)* `HIFI` đủ cả tablet; tương phản AA cho **mọi** cặp kể cả badge/trạng thái; `DSPEC` §5 mọi dòng có bằng chứng; `FIGMA` có PNG mọi trạng thái |
 | Không cần chữ ký QA; Designer không bắt buộc (PO ký `WF`) | Ký: PO + Tech Lead + QA + Designer + Bảo mật/Pháp chế |
 
 ### G4 — UAT pass · duyệt bởi **PO**
@@ -167,17 +175,19 @@ cách một POC mang theo mọi thiếu sót của nó vào sản phẩm thật.
 | **PO / Khách hàng** | Quyết ưu tiên và scope. Ký G1, G4, G5. Trả lời `OQ` nghiệp vụ |
 | **Tech Lead** | Ký G2, G3 về mặt khả thi. Quyết kiến trúc. Trả lời `OQ` kỹ thuật |
 | **QA** | Ký G3 về tính test được. Viết test case từ AC. Chủ trì thực thi UAT |
-| **Designer** *(khi `PRODUCT = screen`)* | Sở hữu prototype, design system, visual. Ký `UICONV` và `WF` ở G3. Trả lời lệch loại *Bố cục* ở `WF` §5. Nhận từ BA: kho thành phần, text nguyên văn, trạng thái, phân quyền hiển thị — **không phải đi hỏi lại nghiệp vụ** |
+| **Designer** *(khi `PRODUCT = screen`)* | Sở hữu prototype, design system, visual. Ký `UICONV`, `WF`, `DS`, `HIFI`, `DSPEC` ở G3. Trả lời lệch loại *Bố cục* ở `WF` §5 và `DSPEC` §6. Nhận từ BA: kho thành phần, text nguyên văn, trạng thái, phân quyền hiển thị — **không phải đi hỏi lại nghiệp vụ**. Nhận từ `ba-design`: `DS`/`HIFI`/`FIGMA` làm **đề xuất** để sửa trong Figma, không dựng lại từ đầu |
+| **`ba-design`** *(vai Design của bộ skill, `screen`)* | Sinh `DS`, `HIFI`, `FIGMA`, `DSPEC` từ `SRS`+`WF`+`UICONV` (+ brand). **Đề xuất**, không duyệt: mọi artifact 🟡 Draft chờ Designer ký. Không quyết hành vi/text (chép từ SRS), không bịa brand (thiếu ⇒ token trung tính + `OQ`, độ tin cậy 🔴) |
 | **Dev** | Tiêu thụ SRS + WF + UICONV. Đặt `OQ` qua `QLOG` |
 | **PM** | Tiến độ, nguồn lực. Không ký gate nội dung |
 
 BA **không** thay PO quyết ưu tiên, **không** thay Tech Lead chọn kiến trúc, **không** thay
 PM quản tiến độ, **không** thay Designer quyết visual — nhưng phải cung cấp đủ thông tin để
-cả bốn ra quyết định. Riêng phần **bố cục và trạng thái**, BA làm được khi có prototype tham
+cả bốn ra quyết định. Riêng visual: `ba-design` **đề xuất** (token, HIFI), Designer **quyết**. Riêng phần **bố cục và trạng thái**, BA làm được khi có prototype tham
 chiếu (chế độ 🎨 của `WF`); không có thì BA đề xuất, Designer quyết (chế độ ✏️).
 
-**Dự án không có Designer:** ghi `DEC-nn`, PO ký thay `UICONV`/`WF`, và mục §6 của `WF`
-("Designer còn phải làm") chuyển thành việc của dev FE — nêu đích danh.
+**Dự án không có Designer:** ghi `DEC-nn`, PO ký thay `UICONV`/`WF`/`DS`/`HIFI`/`DSPEC`, và mục §6 của `WF`
+("Designer còn phải làm") là **việc của `ba-design`** (sinh `DS` + `HIFI` + `FIGMA` + `DSPEC`) — không đẩy sang
+dev FE. Dev FE chỉ nhận phần `DSPEC` §7 "Bàn giao".
 
 ## 4. Khi nào được bỏ giai đoạn
 
diff --git a/.claude/skills/ba-pipeline/SKILL.md b/.claude/skills/ba-pipeline/SKILL.md
index d365c56..d460504 100644
--- a/.claude/skills/ba-pipeline/SKILL.md
+++ b/.claude/skills/ba-pipeline/SKILL.md
@@ -13,11 +13,12 @@ Engine: `Workflow({ scriptPath: "<abs>/.claude/workflows/ba-pipeline.js", args }
 | Tham số | Bắt buộc | Ý nghĩa |
 |---|---|---|
 | `project`, `date` | luôn | tên project (1 project/lần), ngày hôm nay `YYYY-MM-DD` (header) |
-| `stage` | luôn | `init` · `audit` · `discovery` · `analysis` · `specification` · `delivery` · `post-release` · `sign` · `sync` |
-| `activity` | nên dùng | 1 hoạt động của stage (mặc định cả stage): discovery `stakeholder|elicitation|requirements|goals-scope|risks` · analysis `process|backlog|rules|rbac|impact` · specification `uiconv|srs|part2|ac|errors|nfr|api|wf` (`uiconv`/`wf` chỉ khi `PRODUCT = screen`; `uiconv` chạy một lần đầu project) · delivery `clarification|cr|testcase-review|uat` · post-release `release-note|manual|feedback|benefit` |
-| `scope` | specification/delivery | `US-012,US-013` (≤3 US) · `CR-004` · câu hỏi cụ thể |
+| `stage` | luôn | `init` · `audit` · `discovery` · `analysis` · `specification` · `design` · `delivery` · `post-release` · `sign` · `sync` |
+| `activity` | nên dùng | 1 hoạt động của stage (mặc định cả stage): discovery `stakeholder|elicitation|requirements|goals-scope|risks` · analysis `process|backlog|rules|rbac|impact` · specification `uiconv|srs|part2|ac|errors|nfr|api|wf` (`uiconv`/`wf` chỉ khi `PRODUCT = screen`; `uiconv` chạy một lần đầu project) · design `ds|hifi|proto|figma|dspec` (chỉ `screen`, sau `wf` của cùng US; `ds` chạy một lần đầu project; thứ tự `ds → hifi → proto → figma → dspec`) · delivery `clarification|cr|testcase-review|uat` · post-release `release-note|manual|feedback|benefit` |
+| `scope` | specification/design/delivery | `US-012,US-013` (≤3 US) · `CR-004` · câu hỏi cụ thể |
 | `profile` | init | `{product, lifecycle, rigor}` đã được người dùng xác nhận |
 | `proto` | specification (screen) | Prototype tham chiếu: đường dẫn thư mục/file/URL hoặc mục SAD (`docs/sections/07-giao-dien.md`). Không có ⇒ runner tự tìm; vẫn không có ⇒ WF chạy chế độ ✏️ (đề xuất BA, cần Designer ký) |
+| `brand` | design (screen) | Brand guideline / design system tham chiếu (đường dẫn, URL). Không có ⇒ runner tự tìm; vẫn không có ⇒ `DS` dùng token trung tính, độ tin cậy 🔴 + OQ |
 | `inputs[]`, `answers`, `notes`, `override` | tuỳ | file người dùng đưa · trả lời OQ · ghi chú sửa · khẳng định chạy dù gate trước chưa qua |
 | `approvals[]`, `gate`, `decisions[]` | sign | `{artifact, decision: approve|baseline|revise, approver, role, note}` · gate được ký · DEC-nn |
 
@@ -26,7 +27,7 @@ Hỏi bằng `AskUserQuestion` (≤4 câu/lượt), không hỏi lại điều 
 1. Project & phạm vi lần này (cả module hay US nào).
 2. Profile: `PRODUCT` (screen | api-service | data-pipeline | ml-model | batch-job | process-only) · `LIFECYCLE` (greenfield | brownfield | enhancement) · `RIGOR` (light | standard | strict). Chưa có PROFILE ⇒ suy đoán từ tài liệu, nêu rõ là suy đoán, hỏi xác nhận.
 3. Thư mục output: mặc định `ba-output/<PROJECT>/`; nếu repo đã có thư mục BA khác ⇒ hỏi dùng cái nào, **không tạo cấu trúc song song**.
-4. Input đã tìm thấy (Glob `docs/`, `ba-output/`, `sa-output/`, `design/`, `prototype/`, file người dùng đưa) — trình bảng `File | Vai trò | Giai đoạn`. Với `screen` trước stage `specification`: hỏi **prototype/design system tham chiếu** là gì (→ `proto`) và **dự án có Designer không** (không có ⇒ PO ký thay `UICONV`/`WF`, ghi DEC).
+4. Input đã tìm thấy (Glob `docs/`, `ba-output/`, `sa-output/`, `design/`, `prototype/`, file người dùng đưa) — trình bảng `File | Vai trò | Giai đoạn`. Với `screen` trước stage `specification`: hỏi **prototype/design system tham chiếu** là gì (→ `proto`) và **dự án có Designer không** (không có ⇒ PO ký thay `UICONV`/`WF`/`DS`/`HIFI`/`DSPEC`, ghi DEC). Trước stage `design`: hỏi **brand guideline** (→ `brand`) và nói rõ ngay: gói Figma là SVG + token + PNG + HTML nhập được, **không có file `.fig`**.
 Lấy ngày hôm nay từ ngữ cảnh → `date`.
 
 ## Vòng lặp chuẩn cho mỗi bước
@@ -36,11 +37,13 @@ Lấy ngày hôm nay từ ngữ cảnh → `date`.
    - Duyệt ⇒ hỏi **tên + vai trò người duyệt** ⇒ `sign` với `decision: approve` cho từng artifact. Không có tên người ⇒ không sign.
    - Sửa ⇒ `notes` → chạy lại đúng activity. Trả lời ⇒ gom `answers` (`OQ-012: …`) → chạy lại.
    - `blocked` ⇒ trình `gateWarning`; hỏi có **khẳng định chạy ngoại lệ** không; có ⇒ chạy lại với `override: true` và ghi `decisions: ["DEC: chạy <stage> khi <gate> chưa qua vì …"]` ở lần `sign` kế.
-4. **Ký gate** khi mọi artifact của stage đã 🔵 Approved: `audit` ⇒ gate 🟠 chỉ còn thiếu chữ ký và coverage đạt ⇒ hỏi **ai ký** đúng vai trò (G1 PO · G2 PO + Tech Lead · G3 PO + Tech Lead + QA, `screen` thêm Designer cho `UICONV`/`WF` · G4 PO · G5 PO + BA Lead; `strict` thêm Bảo mật/Pháp chế) ⇒ `sign` với `gate` + `decision: baseline` ⇒ `sync` ⇒ `audit` xác nhận ✅. Coverage fail / còn TBD / `refused[]` không rỗng ⇒ **không ký**, quay lại bước 2.
+4. **Ký gate** khi mọi artifact của stage đã 🔵 Approved: `audit` ⇒ gate 🟠 chỉ còn thiếu chữ ký và coverage đạt ⇒ hỏi **ai ký** đúng vai trò (G1 PO · G2 PO + Tech Lead · G3 PO + Tech Lead + QA, `screen` thêm Designer cho `UICONV`/`WF`/`DS`/`HIFI`/`DSPEC` · G4 PO · G5 PO + BA Lead; `strict` thêm Bảo mật/Pháp chế) ⇒ `sign` với `gate` + `decision: baseline` ⇒ `sync` ⇒ `audit` xác nhận ✅. Coverage fail / còn TBD / `refused[]` không rỗng ⇒ **không ký**, quay lại bước 2.
 5. Kết thúc mỗi lượt: tóm tắt gate ✅/🟠/☐, OQ mở (ai, quá hạn?), việc kế tiếp.
 
 ## Đặc thù
 - `specification`: ≤3 US mỗi lần; QA phải xác nhận "mọi AC test được" trước G3 (`standard`+). Với `screen`: lần đầu của project chạy `uiconv` trước; `wf` chạy sau `part2` + `errors` của cùng US, truyền `proto`; trình riêng **bảng lệch WF §5** (Tồn tại/Hành vi chưa quyết = blocker) và chế độ 🎨/✏️ để người dùng biết cần Designer ký hay không.
+- `design` (chỉ `screen`): chạy sau `wf` của cùng US, `≤3 US`; lần đầu project chạy `ds` trước. **Sau mỗi activity bạn (gatekeeper, có Bash) chạy phép kiểm máy** và trình kết quả nguyên văn cùng `summary`:
+  `node .claude/skills/ba-design/scripts/design-check.mjs --tokens <ds/tokens.json> --css <ds/tokens.css> --components <ds/components.html> --html <HIFI> --srs <SRS> --wf <WF> --svg-dir <FIGMA/>` (bỏ tham số của artifact chưa có). Sau `figma` chạy thêm `.claude/skills/ba-design/scripts/render-figma.sh <HIFI> <FIGMA>/png` để có PNG. Còn 🔴 ⇒ chạy lại activity với `notes` trích đúng dòng lỗi, không ký. Trình riêng: **độ tin cậy visual** (`DS` §0), **bảng lệch `DSPEC` §6**, và Designer có cần ký không.
 - `delivery`: chạy theo từng câu hỏi/CR; CR phải qua 6 bước của ba-4, không sửa artifact Baselined trực tiếp.
 - `post-release`: `benefit` cần KPI baseline từ G1 — không có ⇒ ghi bài học, không lấp liếm.
 - **Liên kết SA:** G2 cần `AG1` của `sa-pipeline` (Tech Lead ký "khả thi" dựa trên OPT/ARISK). SA báo lệch `NFR↔QAS`, `API↔ICD`, `RBAC↔SEC` ⇒ chạy lại `specification` activity liên quan với `notes` (QAS/ICD thắng).
diff --git a/.claude/skills/ba-traceability/SKILL.md b/.claude/skills/ba-traceability/SKILL.md
index 9e12ac1..78adf57 100644
--- a/.claude/skills/ba-traceability/SKILL.md
+++ b/.claude/skills/ba-traceability/SKILL.md
@@ -95,9 +95,9 @@ một phần".
 🔴 **Phép kiểm bị bỏ vì profile phải được ghi ra trong báo cáo**, kèm lý do — đừng lặng lẽ
 tính coverage trên tập nhỏ hơn rồi báo 100%.
 
-### Bước 3 — Sáu phép kiểm nhất quán
+### Bước 3 — Tám phép kiểm nhất quán
 
-Ngoài coverage, kiểm tra tài liệu có mâu thuẫn nhau không:
+Ngoài coverage, kiểm tra tài liệu có mâu thuẫn nhau không (6 phép cho mọi loại + 2 phép riêng cho design, `screen`):
 
 | # | Phép kiểm | Cách kiểm | Ví dụ lỗi bắt được |
 |---|---|---|---|
@@ -105,8 +105,10 @@ Ngoài coverage, kiểm tra tài liệu có mâu thuẫn nhau không:
 | 2 | **Ràng buộc lệch** | Bảng field trong `SRS` vs. bảng ràng buộc trong `API` | UI chặn 20 ký tự, API chặn 50 |
 | 3 | **Mã lỗi lệch** | Mã trong `SRS` §4.1 vs. mã trong `API` §4 | Mã lỗi không endpoint nào sinh ra |
 | 4 | **Trạng thái lệch** | Trạng thái trong `BR` vs. trạng thái dùng trong `SRS`/`RBAC` | RBAC phân quyền cho trạng thái không tồn tại |
-| 5 | **Thành phần lệch** *(screen)* | Tập `C-id`/`F-id` trong `SRS` §2.3.1/§2.3.3 vs. `WF` §3.x.2 và `data-c` trong `WF.html` — **hai chiều** | Nút có trong WF (từ prototype) mà SRS không đặc tả hành vi; hoặc SRS có nút mà WF không đặt chỗ |
+| 5 | **Thành phần lệch** *(screen)* | Tập `C-id`/`F-id` trong `SRS` §2.3.1/§2.3.3 vs. `WF` §3.x.2, `data-c` trong `WF.html` **và** `data-c`/`data-f` trong `HIFI.html` — **hai chiều** | Nút có trong WF (từ prototype) mà SRS không đặc tả hành vi; hoặc SRS có nút mà WF không đặt chỗ |
 | 6 | **Quy ước lệch** *(screen)* | `SRS` §2.3.2/§2.3.6/§4.3 định nghĩa phân trang, trạng thái, định dạng khác `UICONV` mà `UICONV` §12 không có dòng | Hai SRS hai kiểu phân trang; múi giờ hiển thị khác nhau |
+| 7 | **Text lệch** *(screen · design)* | Text của mọi `data-key` trong `HIFI.html` vs. bảng `SRS` §4.2 — phải **nguyên văn** (W5) | Design "làm gọn" nhãn: SRS "Tạo mới", HIFI "Tạo"; message lỗi viết lại |
+| 8 | **Token lệch** *(screen · design)* | Khối `:root`/`ds-components` trong `HIFI` vs. `00-index/ds/`; mã màu thô trong markup HIFI; màu trong `FIGMA/*.svg` ∉ `tokens.json`; `SCR` của SRS §2.1 thiếu trong HIFI/SVG | HIFI dùng `#333` không có trong DS; SVG còn màu cũ sau khi đổi token; màn hình lỗi không có mockup |
 
 Phép 1 chạy được bằng máy: so `Source:` trong header với version thật của file được trích dẫn.
 Phép 5 cũng vậy:
@@ -117,6 +119,19 @@ grep -oE "\b[CF][0-9]{2}\b|data-c=\"[CF][0-9]{2}\"" WF_<US>*.md WF_<US>*.html |
 comm -3 /tmp/srs_ids /tmp/wf_ids     # phải rỗng
 ```
 
+Phép 5 (phần `HIFI`), 7 và 8 chạy bằng script của `ba-design` — chép kết quả nguyên văn vào RTM §4:
+
+```bash
+node .claude/skills/ba-design/scripts/design-check.mjs \
+  --tokens ba-output/<P>/00-index/ds/tokens.json --css ba-output/<P>/00-index/ds/tokens.css \
+  --components ba-output/<P>/00-index/ds/components.html \
+  --html ba-output/<P>/03-specification/design/HIFI_<US>_v1.0.html \
+  --srs ba-output/<P>/03-specification/SRS_<US>_v1.0.md --wf ba-output/<P>/03-specification/WF_<US>_v1.0.md \
+  --svg-dir ba-output/<P>/03-specification/design/FIGMA_<US>_v1.0
+```
+
+Không chạy được ⇒ ghi "chưa kiểm bằng máy" cho phép 7–8, không báo "không lệch". H3/H4 🔴 ⇒ **chặn G3**.
+
 Ngoài ra với `screen`: đọc `WF` §5 — mỗi dòng loại **Tồn tại/Hành vi** có trạng thái ☐ là một
 blocker G3, liệt kê đích danh. `WF` không có §5 hoặc §5 trống không ghi "đã đối chiếu" ⇒ báo
 "chưa đối chiếu prototype", không phải "không lệch".
@@ -165,7 +180,7 @@ Phép kiểm thêm: đối soát nguồn–đích · lưu vết mọi hành đ
    Sửa bằng: /ba-2-analysis Settlement --only br
 ```
 
-**③ Bảng nhất quán** — bốn phép kiểm ở Bước 3, mỗi mâu thuẫn một dòng.
+**③ Bảng nhất quán** — tám phép kiểm ở Bước 3, mỗi mâu thuẫn một dòng; phép 7–8 kèm dòng kết quả `design-check`.
 
 **④ `OQ`/`CR` tồn đọng** — sắp theo số ngày quá hạn giảm dần.
 
diff --git a/.claude/skills/ba-traceability/templates/rtm.md b/.claude/skills/ba-traceability/templates/rtm.md
index ff6b767..c5130d0 100644
--- a/.claude/skills/ba-traceability/templates/rtm.md
+++ b/.claude/skills/ba-traceability/templates/rtm.md
@@ -95,6 +95,8 @@ quyết**. Đó là cách một business rule bốc hơi khỏi sản phẩm.
 | 4 | **Trạng thái lệch** — BR vs. SRS/RBAC | RBAC phân quyền cho trạng thái `LOCKED` không có trong BR | 🔴 | |
 | 5 | **Thành phần lệch** *(screen)* — SRS §2.3.1 vs. WF §3.x.2 / `data-c` | `C07` có trong WF (prototype vẽ nút Xuất) nhưng SRS không đặc tả | 🔴 G3 | PO quyết ở WF §5 |
 | 6 | **Quy ước lệch** *(screen)* — SRS vs. UICONV không có dòng §12 | SRS_US011 phân trang cursor, UICONV §3 offset | 🟠 | Sửa SRS hoặc thêm UICONV §12 |
+| 7 | **Text lệch** *(screen · design)* — `data-key` HIFI vs. SRS §4.2 | `btn.create`: HIFI "Tạo", SRS "Tạo mới" (`design-check` H4) | 🔴 G3 | Chép lại nguyên văn; muốn đổi ⇒ OQ cho BA/PO |
+| 8 | **Token lệch** *(screen · design)* — HIFI/SVG vs. `ds/tokens.json` | HIFI có `#333333` ngoài token; `SCR-05.mobile.svg` thiếu (`design-check` H2/S1) | 🔴 G3 | `/ba-design <US> hifi` rồi `figma` |
 
 **Lệch prototype ↔ SRS còn mở** *(screen — đọc từ `WF` §5, chỉ loại Tồn tại/Hành vi)*
 
diff --git a/.claude/workflows/ba-pipeline.js b/.claude/workflows/ba-pipeline.js
index e7001c9..0d98f1c 100644
--- a/.claude/workflows/ba-pipeline.js
+++ b/.claude/workflows/ba-pipeline.js
@@ -7,7 +7,8 @@ export const meta = {
     { title: 'Audit', detail: 'ba-gate-auditor: chấm G1–G5 + coverage RTM (chỉ đọc)' },
     { title: 'Discovery', detail: 'ba-1: stakeholder, elicitation, RQ, BRIEF, risk' },
     { title: 'Analysis', detail: 'ba-2: process, backlog US, BR, RBAC, impact' },
-    { title: 'Specification', detail: 'ba-3: SRS, PART 2, AC, mã lỗi, NFR, API (≤3 US)' },
+    { title: 'Specification', detail: 'ba-3: SRS, PART 2, AC, mã lỗi, NFR, API, UICONV, WF (≤3 US)' },
+    { title: 'Design', detail: 'ba-design (screen, sau wf): DS, HIFI, proto, FIGMA, DSPEC (≤3 US)' },
     { title: 'Delivery', detail: 'ba-4: clarification, CR, review test case, UAT' },
     { title: 'Post-release', detail: 'ba-5: release note, manual, feedback, benefit' },
     { title: 'Sign', detail: 'Ghi quyết định duyệt/baseline/revise của con người' },
@@ -30,13 +31,17 @@ const TRACK = {
       activities: ['process', 'backlog', 'rules', 'rbac', 'impact'] },
     specification: { phase: 'Specification', skill: 'ba-3-specification', dir: '03-specification', gate: 'G3', prevGate: 'G2',
       activities: ['uiconv', 'srs', 'part2', 'ac', 'errors', 'nfr', 'api', 'wf'], scopeHint: 'danh sách US (tối đa 3); uiconv/wf chỉ khi PRODUCT=screen, kèm args.proto nếu có prototype' },
+    design: { phase: 'Design', skill: 'ba-design', dir: '03-specification/design', gate: 'G3', prevGate: 'G2',
+      activities: ['ds', 'hifi', 'proto', 'figma', 'dspec'], orderedPrefix: ['ds', 'hifi'],
+      externalPrereq: 'PRODUCT = screen và đã có SRS + WF (+ UICONV) của US từ stage specification; activity ds ghi vào 00-index/ (DS_*.md + ds/), các activity khác ghi vào 03-specification/design/',
+      scopeHint: 'danh sách US (tối đa 3); kèm args.brand nếu có brand guideline/design system tham chiếu' },
     delivery: { phase: 'Delivery', skill: 'ba-4-delivery-support', dir: '04-delivery', gate: 'G4', prevGate: 'G3',
       activities: ['clarification', 'cr', 'testcase-review', 'uat'], scopeHint: 'US / câu hỏi / CR-nnn cụ thể' },
     'post-release': { phase: 'Post-release', skill: 'ba-5-post-release', dir: '05-post-release', gate: 'G5', prevGate: 'G4',
       activities: ['release-note', 'manual', 'feedback', 'benefit'] },
   },
   gates: {
-    G1: 'PO', G2: 'PO + Tech Lead', G3: 'PO + Tech Lead + QA (+ Designer khi PRODUCT=screen: UICONV, WF)', G4: 'PO', G5: 'PO + BA Lead',
+    G1: 'PO', G2: 'PO + Tech Lead', G3: 'PO + Tech Lead + QA (+ Designer khi PRODUCT=screen: UICONV, WF, DS, HIFI, DSPEC — hoặc PO ký thay kèm DEC khi không có Designer)', G4: 'PO', G5: 'PO + BA Lead',
   },
   profileFields: ['product', 'lifecycle', 'rigor'],
 }
@@ -48,6 +53,7 @@ const TRACK = {
 //   scope         : phạm vi (VD US-012,US-013 · CR-004 · --focus)
 //   inputs[]      : file/nguồn người dùng cung cấp (ưu tiên cao nhất)
 //   proto         : (specification, PRODUCT=screen) prototype/design system tham chiếu cho uiconv/wf — đường dẫn, URL, hoặc mục SAD
+//   brand         : (design, PRODUCT=screen) brand guideline / design system tham chiếu cho ba-design (token, font, component) — đường dẫn hoặc URL
 //   answers       : trả lời của người dùng cho OQ / humanInputNeeded
 //   notes         : ghi chú người duyệt (Revise)
 //   override      : true = người dùng khẳng định chạy dù gate trước chưa qua
@@ -135,6 +141,11 @@ else if (TRACK.profileFields.length) lines.push(`Profile: đọc ${root}/${TRACK
 if (Array.isArray(a.inputs) && a.inputs.length) lines.push(`Input bổ sung do người dùng cung cấp (ưu tiên cao nhất):\n${a.inputs.map((i) => `- ${i}`).join('\n')}`)
 if (a.proto) lines.push(`## Prototype / design system tham chiếu (cho UICONV và WF, PRODUCT=screen)\n${a.proto}\nĐây là nguồn sự thật về BỐ CỤC: WF chạy chế độ 🎨 (ghi lại + đối chiếu với SRS, ghi mọi lệch vào WF §5). Thành phần có trong prototype mà SRS không có ⇒ KHÔNG tự thêm vào SRS, ghi lệch loại Tồn tại cho PO quyết.`)
 else lines.push(`Prototype tham chiếu: không được cung cấp. Với PRODUCT=screen, tự tìm theo thứ tự design/, prototype/, docs/sections/07-*.md, docs/SAD.md §7; vẫn không có ⇒ WF chạy chế độ ✏️ (đề xuất của BA, cần Designer ký) và nói rõ trong summary.`)
+if (stage === 'design') {
+  if (a.brand) lines.push(`## Brand guideline / design system tham chiếu (cho ba-design)\n${a.brand}\nĐây là nguồn sự thật về VISUAL (token màu/chữ/khoảng cách, component). Trích token từ đây, ghi độ tin cậy 🟢 ở DS §0.`)
+  else lines.push(`Brand guideline: không được cung cấp. Tự tìm theo thứ tự design/, brand/, prototype/, UICONV §0, SAD §7, DEC của Tech Lead về design system; vẫn không có ⇒ dùng token trung tính của template, ghi độ tin cậy 🔴 ở DS §0 + OQ, và nói rõ trong summary. Không tự chọn màu brand.`)
+  lines.push(`Công cụ: runner không có Bash — tokens.css viết tay theo quy tắc --ds-<đường dẫn nối '-'>; phép kiểm design-check.mjs và chụp PNG (render-figma.sh) do người điều phối chạy sau, ghi vào humanInputNeeded nếu cần.`)
+}
 if (a.answers) lines.push(`## Câu trả lời của người dùng cho OQ / humanInputNeeded vòng trước\n${a.answers}`)
 if (a.notes) lines.push(`## Ghi chú từ người duyệt (bắt buộc xử lý trước, version +0.1 và Change Log)\n${a.notes}`)
 if (a.override) lines.push(`## Ngoại lệ gate\nNgười dùng đã được cảnh báo gate trước chưa ✅ Baselined và KHẲNG ĐỊNH LẠI muốn tiếp tục. Làm tiếp, ghi ngoại lệ vào Open Questions + DEC-nn của artifact.`)
diff --git a/ba-output/e-commerce/00-index/DECISION_e-commerce.md b/ba-output/e-commerce/00-index/DECISION_e-commerce.md
index d4c3e0d..52eca64 100644
--- a/ba-output/e-commerce/00-index/DECISION_e-commerce.md
+++ b/ba-output/e-commerce/00-index/DECISION_e-commerce.md
@@ -2,12 +2,12 @@
 
 | | |
 |---|---|
-| **Version** | 1.3 |
+| **Version** | 1.4 |
 | **Date** | 2026-09-08 |
-| **Author** | BA (qua skill ba-lifecycle / ba-2-analysis / ba-3-specification) |
+| **Author** | BA (qua skill ba-lifecycle / ba-2-analysis / ba-3-specification / ba-design) |
 | **Status** | 🟡 Draft |
 | **Approved by** | — *(sổ quyết định, cập nhật liên tục, không cần baseline riêng)* |
-| **Source** | Ghi chú từ người duyệt trong prompt khởi tạo dự án; `references/workflow.md` §3 "Dự án không có Designer"; prompt điều phối GĐ2 (ngoại lệ gate, trả lời `OQ-004`/`OQ-008`); ghi chú từ người duyệt trong prompt điều phối GĐ3 (sửa DEC-01, chốt chế độ WF); prompt điều phối GĐ3 (ngoại lệ gate G2); prompt điều phối GĐ3 lần chạy US-002/US-003 (ngoại lệ gate G2 nối tiếp) |
+| **Source** | Ghi chú từ người duyệt trong prompt khởi tạo dự án; `references/workflow.md` §3 "Dự án không có Designer"; prompt điều phối GĐ2 (ngoại lệ gate, trả lời `OQ-004`/`OQ-008`); ghi chú từ người duyệt trong prompt điều phối GĐ3 (sửa DEC-01, chốt chế độ WF); prompt điều phối GĐ3 (ngoại lệ gate G2); prompt điều phối GĐ3 lần chạy US-002/US-003 (ngoại lệ gate G2 nối tiếp); prompt điều phối `ba-design` lần chạy US-002/US-003 (ngoại lệ gate G2 nối tiếp lần ba) |
 | **Scope** | Toàn dự án e-commerce |
 
 ## Change Log
@@ -18,6 +18,7 @@
 | 1.1 | 2026-09-08 | BA (qua skill ba-2-analysis) | Thêm DEC-02 (ngoại lệ gate G1 khi chạy GĐ2), DEC-03 (xác nhận điểm tích hợp Khuyến mãi/Loyalty — trả lời `OQ-004`), DEC-04 (thứ tự ưu tiên khi cắt phạm vi — trả lời `OQ-008`) | — |
 | 1.2 | 2026-09-08 | BA (qua skill ba-3-specification, activity `uiconv`) | Sửa nội dung `DEC-01` theo ghi chú người duyệt: dự án **CÓ** prototype tham chiếu dạng văn bản (`e-commerce/docs/sections/07-giao-dien.md`, SAD §7, status approved) — `WF` sẽ chạy chế độ 🎨 (mức phủ khác nhau theo từng màn hình) thay vì ✏️ hoàn toàn như ghi trước đây; phần PO ký thay Designer giữ nguyên. Thêm `DEC-05` (ngoại lệ gate G2 khi chạy GĐ3 `uiconv`) | — |
 | 1.3 | 2026-09-08 | BA (qua skill ba-3-specification, activity `srs`/`ac`/`nfr`/`api`/`wf`) | Thêm `DEC-06` (ngoại lệ gate G2 nối tiếp khi viết `SRS`/`AC`/`NFR`/`API`/`WF` của US-002/US-003) | — |
+| 1.4 | 2026-09-08 | BA/Design (qua skill ba-design, activity `ds`/`hifi`/`figma`/`dspec`) | Thêm `DEC-07` (ngoại lệ gate G2 nối tiếp lần ba khi chạy `ba-design` cho US-002/US-003 — sinh `DS_e-commerce_v1.0.md`, `HIFI_US002-003_v1.0.html`, `FIGMA_US002-003_v1.0/`, `DSPEC_US002-003_v1.0.md`) | — |
 
 ## Danh sách quyết định
 
@@ -29,3 +30,4 @@
 | DEC-03 | Xác nhận điểm nối với module Khuyến mãi & Loyalty (trả lời `OQ-004`, mở từ GĐ1): áp dụng mã coupon (FR-13) và điểm thưởng (FR-14) là **điểm tích hợp**, không thuộc phạm vi module Giỏ hàng & Checkout. Module Khuyến mãi/Loyalty **sở hữu logic tính toán**; module Giỏ hàng & Checkout **chỉ hiển thị kết quả đã tính và gọi API áp dụng**. | PO sàn (trả lời qua người điều phối) | 2026-09-08 | Phạm vi §5.2 của `BRIEF` được xác nhận đúng như đề xuất ban đầu của BA; `BACKLOG_CartCheckout_v1.0.md` không có US riêng cho coupon/loyalty; `IMPACT_CartCheckout_v1.0.md` §1.5 ghi nhận đây là một điểm tích hợp cần API contract trước GĐ3 (`OQ-017` mới phát sinh: xử lý khi API này lỗi/chậm) | `BRIEF_CartCheckout_v1.0.md` §5.2, `OQ-004`; trả lời của người dùng trong prompt điều phối GĐ2 |
 | DEC-06 | Chạy `ba-3-specification` các activity `srs`/`part2`/`ac`/`errors`/`nfr`/`api`/`wf` để đặc tả US-002 (Xem giỏ hàng nhóm theo seller) và US-003 (Sửa số lượng / xoá sản phẩm trong giỏ) — sinh `SRS_US002-003_v1.0.md`, `AC_US-002_v1.0.md`, `AC_US-003_v1.0.md`, `NFR_US002-003_v1.0.md`, `API_US002-003_v1.0.md`, `WF_US002-003_v1.0.md`+`.html` — **trong khi Gate G2 của module Giỏ hàng & Checkout vẫn chưa được PO + Tech Lead ký chính thức** (nối tiếp `DEC-02`, `DEC-05`). Đây là ngoại lệ gate nối tiếp, chấp nhận cho mục đích đánh giá bộ skill BA. Rủi ro cao hơn `DEC-05` (UICONV cấp project) vì `SRS`/`AC` lần này bám trực tiếp vào `BACKLOG`/`BR` của module — nếu `BACKLOG_CartCheckout`/`BR_CartCheckout` đổi khi G2 ký thật, phần bị ảnh hưởng nhiều nhất là §1.3 (hiện chưa có `BR-CART-nn` áp dụng trực tiếp cho US-002/US-003) và mọi AC nhóm 1 dựa trên "không có BR ràng buộc". | Người điều phối, xác nhận rõ ràng và khẳng định lại sau khi được cảnh báo rủi ro | 2026-09-08 | `SRS_US002-003_v1.0.md` và các artifact phụ thuộc giữ `Status: 🟡 Draft`, không thể `✅ Baselined` cho tới khi G2 module được ký thật; đã ghi 7 `OQ` mới (`OQ-028`…`OQ-034`) vào `OQ_e-commerce.md` | Prompt điều phối GĐ3 (lần chạy US-002/US-003) "Ngoại lệ gate"; `DEC-02`, `DEC-05` |
 | DEC-04 | Xác nhận thứ tự ưu tiên khi phải cắt phạm vi (trả lời `OQ-008`, mở từ GĐ1): giữ **RQ-001 (giỏ hàng đa seller) và RQ-002 (tách đơn theo seller)** làm ưu tiên trước; **RQ-003 phần thanh toán ví điện tử (VNPay/Momo) có thể lùi triển khai sau COD** nếu thiếu thời gian. | PO sàn (trả lời qua người điều phối) | 2026-09-08 | `BACKLOG_CartCheckout_v1.0.md` §8 (đề xuất thứ tự thực hiện): US-001…US-006 (giỏ hàng + checkout + Guest) và US-007 (COD) ưu tiên đợt 1–3; US-008 (VNPay/Momo) xếp đợt 4, có thể lùi tiếp nếu `ASM-01` chưa xác minh kịp | `BRIEF_CartCheckout_v1.0.md` §6, `OQ-008`; trả lời của người dùng trong prompt điều phối GĐ2 |
+| DEC-07 | Chạy skill `ba-design` (activity `ds`, `hifi`, `figma`, `dspec`) cho US-002 (Xem giỏ hàng nhóm theo seller) và US-003 (Sửa số lượng / xoá sản phẩm trong giỏ) — sinh `00-index/DS_e-commerce_v1.0.md` (+ `ds/tokens.json`, `ds/tokens.css`, `ds/components.html`), `03-specification/design/HIFI_US002-003_v1.0.html`, `03-specification/design/FIGMA_US002-003_v1.0/`, `03-specification/design/DSPEC_US002-003_v1.0.md` — **trong khi Gate G2 của module Giỏ hàng & Checkout vẫn chưa được PO + Tech Lead ký chính thức** (nối tiếp `DEC-02`, `DEC-05`, `DEC-06`). Người dùng đã được cảnh báo rủi ro gate G2 chưa qua và **khẳng định lại rõ ràng** muốn tiếp tục, cho mục đích đánh giá bộ skill BA. Rủi ro riêng của lần chạy này: `HIFI` chép trực tiếp thành phần/text từ `SRS_US002-003_v1.0.md` (vốn đã mang rủi ro của `DEC-06`) — nếu `SRS` phải viết lại khi G2 ký thật, `DS`/`HIFI`/`FIGMA`/`DSPEC` của `SCR-04` phải chạy lại toàn bộ theo đúng chuỗi phụ thuộc `artifact-map.md` §5 (`SRS`→`HIFI`→`FIGMA`→`DSPEC`). Rủi ro thấp hơn ở phần `DS` (token cấp project, không phụ thuộc trực tiếp `BACKLOG`/`BR` của module) trừ bảng ánh xạ badge ở `DS` §3 (tham chiếu `BR_CartCheckout` §3). | Người điều phối, xác nhận rõ ràng và khẳng định lại sau khi được cảnh báo rủi ro | 2026-09-08 | `DS_e-commerce_v1.0.md`, `HIFI_US002-003_v1.0.html`, `FIGMA_US002-003_v1.0/`, `DSPEC_US002-003_v1.0.md` giữ `Status: 🟡 Draft`, không thể `✅ Baselined` cho tới khi G2 module được ký thật **và** G3 tự nó được ký; đã ghi ngoại lệ vào Open Questions của `DSPEC_US002-003_v1.0.md` §8 (dòng `DS-EX-01`) | Prompt điều phối `ba-design` (lần chạy US-002/US-003) "Ngoại lệ gate"; `DEC-02`, `DEC-05`, `DEC-06` |
diff --git a/ba-output/e-commerce/00-index/DS_e-commerce_v1.0.md b/ba-output/e-commerce/00-index/DS_e-commerce_v1.0.md
new file mode 100644
index 0000000..365e393
--- /dev/null
+++ b/ba-output/e-commerce/00-index/DS_e-commerce_v1.0.md
@@ -0,0 +1,254 @@
+# DS — Design System — e-commerce
+
+| | |
+|---|---|
+| **Version** | 1.1 |
+| **Date** | 2026-09-09 |
+| **Author** | BA/Design (skill ba-design, activity `ds`) |
+| **Status** | 🟡 Draft |
+| **Approved by** | Designer: — · PO: — *(dự án chưa có Designer riêng — PO ký thay, `DEC-01`)* |
+| **Source** | `00-index/UICONV_e-commerce_v1.0.md` v1.1 (§0, §1, §8, §11, §11.1) · brand guideline: chưa có — `e-commerce/docs/sections/07-giao-dien.md` §7.0 xác nhận "không có brand guideline cố định" · design system tham chiếu: chưa chọn (`OQ-022`) · `02-analysis/BR_CartCheckout_v1.0.md` §3 (vòng đời `CART`/`ORDER_SELLER`/`PAYMENT`, nguồn bảng badge §3 bên dưới) · `03-specification/WF_US002-003_v1.0.md` (§3.1.2 — nguồn các kiểu trình bày cần phủ ở §3) |
+| **Scope** | Toàn project — mọi `HIFI`, `FIGMA`, `DSPEC` có `PRODUCT = screen`. Lần chạy này lập bản đầu, dùng dữ liệu vào là US-002/US-003 (`SCR-04` Giỏ hàng) — token/component sẽ bồi đắp dần khi các US khác chạy `ba-design` |
+| **Profile** | `screen · greenfield · standard` |
+| **Tệp kèm** | `00-index/ds/tokens.json` (nguồn sự thật) · `ds/tokens.css` (sinh từ json) · `ds/components.html` (component sheet, mở bằng trình duyệt) |
+
+## Change Log
+
+| Version | Date | Người sửa | Thay đổi | CR |
+|---|---|---|---|---|
+| 1.0 | 2026-09-08 | BA/Design (qua skill ba-design, activity `ds`) | Bản đầu — token placeholder trung tính của template (chưa có brand), §3 ánh xạ 12 kiểu trình bày dùng trong `WF_US002-003`, bảng badge từ `BR_CartCheckout` §3 (qua `UICONV` §11.1), tự chấm | — |
+| 1.1 | 2026-09-09 | BA/Design (qua skill ba-design, theo ghi chú người duyệt sau khi chạy `design-check.mjs`/`render-figma.sh`) | Nâng khối `ds-components` lên **v1.1** (thêm tiện ích `.ds-m-full` — sửa lỗi bố cục mobile của `HIFI_US002-003` §2.1); chép kết quả `design-check.mjs` nguyên văn vào §6 (T1/T2 đều ✅, 10/10 cặp tương phản đạt); cập nhật Tự chấm #1, #2 | — |
+
+> **Vai trò của tài liệu này.** `UICONV` nói *hành xử thế nào* (phân trang, vị trí toast, validate lúc nào);
+> tài liệu này nói *trông thế nào* (màu, chữ, khoảng cách, bo góc, đổ bóng, trạng thái hover/focus/disabled).
+> `HIFI` và `FIGMA` chỉ dùng token và component ở đây; muốn khác phải có dòng ở §8.
+>
+> **Thứ tự ưu tiên khi lệch:** Brand guideline của khách > Design system tham chiếu (nếu dự án đã chọn) >
+> `DS` này > `HIFI` từng US. Thiếu brand ⇒ giá trị ở đây là **đề xuất trung tính** chờ Designer/PO chốt — ghi `OQ`, không tự coi là đã duyệt.
+
+> ⚠️ **Ngoại lệ gate G2** — tài liệu này (và `HIFI`/`FIGMA`/`DSPEC` phụ thuộc nó) được sinh trong khi
+> Gate G2 (Solution sign-off) của module Giỏ hàng & Checkout **chưa được PO + Tech Lead ký chính thức**
+> (nối tiếp `DEC-02`, `DEC-05`, `DEC-06` — xem `00-index/DECISION_e-commerce.md`). Ngoại lệ đã được người
+> điều phối xác nhận rõ ràng lần nữa — xem `DEC-07`. Rủi ro riêng của `DS`: thấp hơn `SRS`/`AC` vì `DS` là
+> token cấp **project** (không phụ thuộc trực tiếp `BACKLOG`/`BR` của module) — nhưng bảng badge ở §3 tham
+> chiếu `BR_CartCheckout_v1.0.md` §3, nếu BR đổi khi G2 ký thật thì bảng đó phải rà lại.
+
+---
+
+## 0. Nguồn và độ tin cậy
+
+| | |
+|---|---|
+| **Brand guideline** | Chưa có — `e-commerce/docs/sections/07-giao-dien.md` §7.0 xác nhận rõ "không có brand guideline cố định". Mọi giá trị màu/chữ ở §1 là **placeholder trung tính của template `ba-design`**, không phải đề xuất nhận diện thương hiệu. `OQ-022` (đã mở ở `UICONV`, chưa đóng) |
+| **Design system tham chiếu** | Chưa chọn. `UICONV` §0 dẫn NFR-07: "sử dụng design system chuẩn (VD Material Design hoặc Ant Design)" nhưng ghi rõ "dev chọn, chưa chốt" → `OQ-022`, hỏi Tech Lead |
+| **Prototype đã có** | `e-commerce/docs/sections/07-giao-dien.md` §7.1.1 SCR-04 — mô tả **văn bản có cấu trúc**, không có mã màu/khoảng cách chính xác (không phải Figma/ảnh) — không trích được token từ đây, chỉ trích được bố cục (đã dùng ở `WF`) |
+| **Ai sở hữu** | BA/Design đề xuất · **Designer duyệt** visual (dự án không có Designer ⇒ **PO ký thay**, `DEC-01`) · PO duyệt giọng văn/nhận diện · Dev FE xác nhận khả năng hiện thực với stack đã chọn khi `OQ-022` được trả lời |
+| **Độ tin cậy** | 🔴 **Đề xuất trung tính, chưa có nguồn** — toàn bộ bảng màu/chữ/khoảng cách ở §1 là giá trị mặc định của `templates/tokens.json` trong bộ skill `ba-design`, không suy ra từ brand hay prototype (prototype chỉ có bố cục, không có visual). Mọi `HIFI`/`FIGMA` sinh từ `DS` này **mang cùng độ tin cậy 🔴** cho tới khi `OQ-022` (design system) và brand guideline được PO/Tech Lead xác nhận |
+
+---
+
+## 1. Token
+
+*Bảng này tóm tắt; giá trị chuẩn ở `ds/tokens.json`. Sửa ⇒ sửa json, sinh lại css, chạy `design-check.mjs`.*
+
+### 1.1 Màu
+
+| Token | Giá trị | Dùng cho | Nguồn |
+|---|---|---|---|
+| `color.bg.canvas` | `#F6F7F9` | Nền trang | 🔴 Placeholder template — `OQ-022` |
+| `color.bg.surface` | `#FFFFFF` | Card, bảng, modal | 🔴 Placeholder template |
+| `color.bg.subtle` | `#EEF1F5` | Header bảng, vùng phụ | 🔴 Placeholder template |
+| `color.border.default` / `.strong` | `#D5DAE1` / `#767F8C` | Viền chia / viền ô nhập (F01) | 🔴 Placeholder template |
+| `color.text.primary` / `.secondary` / `.disabled` / `.inverse` | `#1B1F24` / `#5B6472` / `#9AA3AF` / `#FFFFFF` | Chữ chính (tên sản phẩm C04) / phụ (biến thể C05, hint) / vô hiệu (F01/C07 khi đang xử lý) / trên nền đậm (nhãn nút chính C11) | 🔴 Placeholder template |
+| `color.brand.primary` / `-hover` / `-subtle` | `#2456A6` / `#1C468A` / `#E7EEF9` | Nút chính (C11), liên kết, focus / hover / nền chọn | 🔴 Placeholder — chưa có màu thương hiệu thật |
+| `color.status.danger` / `success` / `warning` (+ `-subtle`) | `#B42318` / `#1E7B45` / `#B7791F` (+ nền nhạt) | Nút nguy hiểm (C07), banner lỗi (C12, E-CART-0003/0006), message lỗi F01 (E-CART-0002) | 🔴 Placeholder template |
+
+### 1.2 Chữ
+
+| Token | Giá trị | Dùng cho |
+|---|---|---|
+| `font.family.base` | Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif | Toàn hệ thống — *system stack, giữ nguyên theo chỉ đạo (không có font brand)* |
+| `font.size.xs / sm / md / lg / xl / 2xl` | 12 / 14 / 16 / 20 / 24 / 32 px | Hint, nhãn phụ (C05, C08, C09) / body (C04, C06) / — / — / C01 (tiêu đề Giỏ hàng) / — |
+| `font.weight.regular / semibold` | 400 / 600 | Text thường / tiêu đề, nút, tên gian hàng (C02) |
+| `font.line-height.tight / normal` | 1.25 / 1.5 | Tiêu đề / body |
+
+### 1.3 Khoảng cách, bo góc, đổ bóng, kích thước
+
+| Token | Giá trị | Ghi chú |
+|---|---|---|
+| `space.1 … 12` | 4 · 8 · 12 · 16 · 24 · 32 · 48 px | Thang 4px; không dùng số ngoài thang |
+| `radius.sm / md / pill` | 4 / 8 / 999 px | Nút, ô nhập (F01) / card (nhóm seller), modal / badge |
+| `shadow.sm / md` | — | Card nổi / modal xác nhận xoá |
+| `size.control.desktop / touch` | 36 / 44 px | Chiều cao nút (C07, C10, C11, C13), bộ đếm F01; **mobile ≥ 44px** (hit target) |
+| `size.icon` | 20 px | Icon inline (spinner, alert) |
+| `size.content-max` | 1200 px | 🔴 Placeholder — `UICONV` §1 chưa chốt số thật (`OQ-018`), giữ giá trị template cho tới khi có câu trả lời |
+| `breakpoint.tablet / desktop` | 768 / 1024 px | 🔴 Placeholder — `UICONV` §1 chưa chốt (`OQ-018`); `WF_US002-003` chỉ hiện thực desktop/mobile (không có công tắc tablet trong toolbar), `HIFI`/`FIGMA` lần này theo đúng phạm vi đó |
+
+## 2. Thang chữ áp dụng
+
+| Cấp | Token size / weight / line-height | Dùng ở |
+|---|---|---|
+| H1 — tiêu đề màn hình | xl / semibold / tight | C01 "Giỏ hàng của bạn" |
+| H2 — tiêu đề vùng, modal | lg / semibold / tight | Tiêu đề modal xác nhận xoá |
+| H3 — tiêu đề card | md / semibold / tight | C02 tên gian hàng |
+| Body | sm / regular / normal | C04, C06, form |
+| Nhãn field, hint, header bảng | xs / semibold hoặc regular / normal | C05 (biến thể), C08/C09 (nhãn tạm tính/tổng) |
+
+## 3. Từ vựng component — ánh xạ ba chiều
+
+*Cột 1 = UICONV §11 (BA) · cột 2 = lớp CSS trong `ds/components.html` (HIFI dùng) · cột 3 = component của design system tham chiếu (Dev FE dùng, để trống vì `OQ-022` chưa chốt). Bảng dưới phủ đủ mọi kiểu trình bày xuất hiện trong `WF_US002-003_v1.0.md` §3.1.2 (đánh dấu ✅ "dùng ở SCR-04") cộng các dòng còn lại của template (chưa dùng ở US này, giữ cho các US sau).*
+
+| Kiểu trình bày (UICONV §11 / SRS "Loại") | Lớp DS | Component DS tham chiếu | Dùng ở SCR-04 | Ghi chú |
+|---|---|---|---|---|
+| Tiêu đề cấp 1 | `<h1>` (mặc định `ds-components.css`) | chưa chọn (`OQ-022`) | ✅ | C01 |
+| Nhãn | text thường / `.ds-muted`, `.ds-small` cho phụ | chưa chọn (`OQ-022`) | ✅ | C02 (tên gian hàng, `<b>`/H3), C04 (tên SP), C05 (biến thể), C06 (đơn giá), C08 (tạm tính nhóm), C09 (tổng cộng) |
+| Ảnh | `.ds-thumb` | chưa chọn (`OQ-022`) | ✅ | C03 — ô xám khi lỗi tải (theo `UICONV` §1) |
+| Nút chính | `.ds-btn.ds-btn--primary` | chưa chọn (`OQ-022`) | ✅ | C11 "Tiến hành Checkout" — một nút chính mỗi màn hình |
+| Nút phụ | `.ds-btn.ds-btn--secondary` | chưa chọn (`OQ-022`) | ✅ | C10 "Tiếp tục mua sắm", C13 "Thử lại", nút "Huỷ" trong modal xác nhận xoá |
+| Nút nguy hiểm | `.ds-btn.ds-btn--danger` | chưa chọn (`OQ-022`) | ✅ | C07 "Xoá" + nút xác nhận trong modal — luôn kèm modal xác nhận (`UICONV` §5) |
+| Liên kết | `.ds-link` | chưa chọn (`OQ-022`) | ❌ | Không dùng ở SCR-04 (§1.5 dòng 7 của SRS: không điều hướng từ dòng CartItem) |
+| Ô nhập / Ô nhập số | `.ds-field` + `.ds-input` / `.ds-stepper` | chưa chọn (`OQ-022`) | ✅ | F01 — bộ đếm +/- (`.ds-stepper`), có ô nhập tay giữa bộ đếm |
+| Chọn 1 (≤7) / (>7) | `.ds-check` radio / `.ds-select` | chưa chọn (`OQ-022`) | ❌ | Chưa dùng ở SCR-04 |
+| Chọn nhiều | `.ds-check` checkbox | chưa chọn (`OQ-022`) | ❌ | Checkbox chọn dòng chỉ có ở **prototype**, chưa vào SRS (`WF §5 #1`, `OQ-031`) — **không** vẽ trong HIFI với `data-c` |
+| Công tắc | `.ds-switch` | chưa chọn (`OQ-022`) | ❌ | Chưa dùng ở SCR-04 |
+| Bộ đếm số lượng | `.ds-stepper` | chưa chọn (`OQ-022`) | ✅ | F01 (trùng dòng Ô nhập số) |
+| Bảng / Card | `.ds-table-wrap` / `.ds-cards > .ds-card` | chưa chọn (`OQ-022`) | ✅ (Card) | Mỗi nhóm seller (Z2) và khối tổng kết (Z3) dùng `.ds-card`; không dùng `.ds-table` (Guest/Customer không có bảng dữ liệu — `UICONV` §1) |
+| Badge trạng thái | `.ds-badge[--info/--success/--warning/--danger]` | chưa chọn (`OQ-022`) | ❌ | **Không** hiển thị badge trạng thái `Cart`/`Order`/`Payment` ở SCR-04 — US-002/US-003 chỉ thao tác trên `Cart.status=active` (SRS §1.4), badge để dành cho US khác (checkout, quản lý đơn) — xem bảng ánh xạ bên dưới |
+| Tab | `.ds-tabs > .ds-tab` | chưa chọn (`OQ-022`) | ❌ | Chưa dùng ở SCR-04 |
+| Modal / Drawer / Bottom-sheet | `.ds-modal-backdrop > .ds-modal` | chưa chọn (`OQ-022`) | ✅ (Modal) | Xác nhận xoá `CartItem` (hành vi của C07, theo `UICONV` §5 mặc định — `WF §5 #5`, đã xử lý) |
+| Toast | `.ds-toast[--error]` | chưa chọn (`OQ-022`) | ❌ | `UICONV` §5/§11 chưa chốt vị trí/thời lượng (`OQ-020`) — SCR-04 không dùng toast, cập nhật C08/C09 tại chỗ (`WF` §3.1.5) |
+| Banner trong vùng | `.ds-banner[--error/--warning]` | chưa chọn (`OQ-022`) | ✅ | C12 (lỗi tải `GET /v1/cart`), banner tại dòng cho `E-CART-0003`/`0006` |
+| Skeleton | `.ds-skeleton` | chưa chọn (`OQ-022`) | ✅ | Trạng thái "Đang tải lần đầu" (SRS §2.A.3.6) |
+| Trạng thái rỗng (2 loại) | `.ds-empty` (có minh hoạ) / `.ds-empty.ds-empty--filter` (không) | chưa chọn (`OQ-022`) | 🟠 (chỉ 1/2 loại) | SCR-04 chỉ có loại "chưa có dữ liệu" (`.ds-empty`, C10) — **không có** loại "bộ lọc không khớp" (giỏ hàng không có bộ lọc, đã ghi ở `WF` §3.1.3, không phải thiếu sót) |
+| Trang trạng thái | `.ds-status-page` | chưa chọn (`OQ-022`) | ❌ | Chưa dùng ở SCR-04 (E-CART-0005 hiển thị "trang trạng thái" theo SRS §4.1 nhưng nằm ngoài SCR-04 — điều hướng sang trang khác) |
+| `LanguageSwitcher` | *(chưa có class riêng — dự án chưa dựng)* | chưa chọn (`OQ-022`) | ❌ | Thuộc header toàn site (SCR-01), không thuộc SCR-04 |
+| `CurrencyToggle` / `PriceDisplay` | *(chưa có class riêng — dự án chưa dựng)* | chưa chọn (`OQ-022`) | 🟠 | C06/C08/C09 hiển thị VND theo `UICONV` §8 (`#,##0 ₫`) — chưa có giá quy đổi tham khảo ở SCR-04 (SRS không yêu cầu), `PriceDisplay` dùng nguyên `.ds-price` |
+
+**Ánh xạ trạng thái nghiệp vụ → badge** *(từ `BR_CartCheckout_v1.0.md` §3, qua `UICONV` §11.1 — chưa có US nào ở SCR-04 hiển thị các badge này; giữ ở đây để `HIFI` của US-004 trở đi dùng lại đúng token, không định nghĩa lại)*:
+
+| Trạng thái (BR) | Biến thể badge | Nhãn nguyên văn (SRS §4.2 — chờ US tương ứng) | Nhóm ý nghĩa màu (UICONV §11.1) |
+|---|---|---|---|
+| `CART.active` | `.ds-badge` (mặc định, trung tính) | "Đang hoạt động" | Trung tính |
+| `CART.converted` | `.ds-badge--success` | "Đã chuyển thành đơn" | Thành công |
+| `CART.abandoned` | `.ds-badge` (mặc định) hoặc `.ds-badge--warning` *(chưa chốt — trung tính/cảnh báo nhẹ theo `UICONV`, để Dev FE/Designer chọn khi US dùng tới)* | "Bỏ quên" | Trung tính/cảnh báo nhẹ |
+| `ORDER_SELLER.pending` *(khởi tạo)* | `.ds-badge--warning` | "Chờ thanh toán" | Cảnh báo |
+| `ORDER_SELLER.confirmed` *(khởi tạo)* | `.ds-badge--success` | "Đã xác nhận" | Thành công |
+| `ORDER_SELLER.cancelled` *(khởi tạo)* | `.ds-badge--danger` | "Đã huỷ" | Lỗi/trung tính |
+| `PAYMENT.pending` | `.ds-badge--warning` | "Chờ xử lý" | Cảnh báo |
+| `PAYMENT.success` | `.ds-badge--success` | "Thành công" | Thành công |
+| `PAYMENT.failed` | `.ds-badge--danger` | "Thất bại" | Lỗi |
+
+**Tiện ích bố cục mới (v1.1):** `.ds-m-full` — ở mobile (`body[data-view="mobile"]` hoặc `max-width:767px`), phần tử mang lớp này chiếm trọn hàng (`flex-basis:100%`). Dùng để nhóm nút thao tác (VD F01 + nút Xoá của một dòng `CartItem`) rơi xuống hàng riêng thay vì chồng lên khối text khi hàng `.ds-row` không đủ chỗ — xem `HIFI_US002-003_v1.0.html` §Minh hoạ dòng CartItem và `DSPEC_US002-003_v1.0.md` §2.1. Không phải một "kiểu trình bày" theo UICONV §11 (không cần dòng riêng trong bảng trên) — là tiện ích kỹ thuật chung của `ds-components.css`.
+
+🔴 Bảng trên **chưa đủ để US ngoài SCR-04 dùng trực tiếp** — vòng đời đầy đủ `ORDER_SELLER` sau `confirmed` (packed/shipped/delivered/returned…) chưa có badge tương ứng (ngoài phạm vi module Giỏ hàng & Checkout, xem `UICONV` §11.1). Không có màu hex cụ thể theo nhóm ý nghĩa (chỉ có biến thể lớp) vì chưa chọn design system — `OQ-022`.
+
+## 4. Trạng thái component
+
+*Mỗi ô ghi thay đổi thị giác (token nào đổi). "—" = không có trạng thái đó. Ô trống = chưa thiết kế.*
+
+| Component | Default | Hover | Focus | Disabled | Loading | Error / Invalid | Selected |
+|---|---|---|---|---|---|---|---|
+| Nút chính (C11) | `brand.primary` | `brand.primary-hover` | ring 2px `focus.ring` | opacity .45 + **tooltip lý do** (giỏ 0 CartItem) | — | — | — |
+| Nút phụ (C10, C13) | surface + `border.strong` | `bg.subtle` | ring | opacity .45 + tooltip | spinner (C13 khi đang thử lại — không bắt buộc theo SRS, tuỳ Dev FE) | — | — |
+| Nút nguy hiểm (C07) | `status.danger` | tối hơn *(chưa có token `-hover` riêng cho danger — 🔴 để trống, DS §9)* | ring | opacity .45 + tooltip ("đang xử lý") | spinner (khi DELETE đang chạy) | — | — |
+| Bộ đếm F01 | `border.strong` | `text.secondary` | `brand.primary` + ring | `bg.subtle`, chữ disabled (khi đang gửi PATCH) | spinner cục bộ tại dòng (theo SRS §2.A.3.6) | `status.danger` + message dưới (E-CART-0002) | — |
+| Card nhóm seller (Z2) | surface + `border.default` | — | — | — | skeleton (khi loading) | banner lỗi tại dòng (E-CART-0003/0006) | — |
+| Banner (C12) | `status.danger-subtle` + `status.danger` | — | — | — | — | luôn ở trạng thái lỗi khi hiện | — |
+| Modal xác nhận xoá | — | — | focus trap trong modal (chưa xác nhận cụ thể — mức thấp) | — | nút "Xoá" trong modal chuyển `is-loading` khi đang gửi | — | — |
+
+## 5. Icon
+
+| | |
+|---|---|
+| **Bộ icon** | Inline SVG tự vẽ theo mẫu `components.html` (lưới 24, stroke 1.75) — chưa chọn bộ icon thư viện ngoài (`OQ-022`) |
+| **Quy cách** | Lưới 24, stroke 1.75, `stroke-linecap: round`, hiển thị 20px (`size.icon`), màu `currentColor` |
+| **Cấm** | Emoji, ký hiệu ✓✕▲ dạng chữ thay icon (trừ mũi tên phân trang `‹ ›`), icon tô đặc trộn với icon nét |
+| **Danh sách dùng ở SCR-04** | trash (nút Xoá C07 — tuỳ chọn kèm nhãn chữ), alert (banner lỗi C12, message F01), close (đóng modal), spinner (đang gửi) |
+| **Danh sách chung dự án** | search · plus · close · chevron-down · back · check · alert · trash · filter · cart · user · menu — *(bổ sung theo WF các US sau)* |
+
+## 6. Tương phản và khả năng truy cập
+
+*Kết quả chạy `node scripts/design-check.mjs --tokens ds/tokens.json --css ds/tokens.css --components ds/components.html` — **đã chạy bởi người điều phối ngày 2026-09-09**, chép nguyên văn:*
+
+```
+✅ T0  tokens.json: 49 token, 17 màu
+✅ T1  tokens.css khớp tokens.json
+✅ T2  Tương phản: 10/10 cặp đạt
+     color.text.primary / color.bg.surface = 16.56 (≥4.5)
+     color.text.primary / color.bg.canvas = 15.45 (≥4.5)
+     color.text.secondary / color.bg.surface = 5.98 (≥4.5)
+     color.text.inverse / color.brand.primary = 7.1 (≥4.5)
+     color.text.inverse / color.status.danger = 6.57 (≥4.5)
+     color.brand.primary / color.bg.surface = 7.1 (≥4.5)
+     color.status.danger / color.bg.surface = 6.57 (≥4.5)
+     color.status.danger / color.status.danger-subtle = 5.75 (≥4.5)
+     color.text.primary / color.brand.primary-subtle = 14.19 (≥4.5)
+     color.border.strong / color.bg.surface = 4.05 (≥3)
+✅ H1  components.html: khối :root khớp tokens.json
+✅ H2  components.html: không có mã màu thô trong markup
+ok — không có lỗi 🔴
+```
+
+| Cặp (fg / bg) | Dùng cho | Tỷ lệ (design-check) | Ngưỡng | ☐/✅ |
+|---|---|---|---|---|
+| `text.primary` / `bg.surface` | Chữ thường (C04, C05, C06) | 16.56 | 4.5 | ✅ |
+| `text.primary` / `bg.canvas` | Chữ thường trên nền trang | 15.45 | 4.5 | ✅ |
+| `text.secondary` / `bg.surface` | Hint, chữ phụ | 5.98 | 4.5 | ✅ |
+| `text.inverse` / `brand.primary` | Nhãn nút chính (C11) | 7.1 | 4.5 | ✅ |
+| `text.inverse` / `status.danger` | Nhãn nút nguy hiểm (C07) | 6.57 | 4.5 | ✅ |
+| `brand.primary` / `bg.surface` | Liên kết | 7.1 | 4.5 | ✅ |
+| `status.danger` / `bg.surface` | Message lỗi (E-CART-0002 dưới F01) | 6.57 | 4.5 | ✅ |
+| `status.danger` / `status.danger-subtle` | Banner lỗi (C12, E-CART-0003/0006) | 5.75 | 4.5 | ✅ |
+| `text.primary` / `brand.primary-subtle` | Chữ trên badge/hàng chọn | 14.19 | 4.5 | ✅ |
+| `border.strong` / `bg.surface` | Viền F01 (non-text) | 4.05 | 3.0 | ✅ |
+
+✅ **T1/T2 đã xác nhận bằng máy** (2026-09-09) — 10/10 cặp tương phản đạt, `tokens.css` khớp `tokens.json`. Kết quả trên là nguồn sự thật cho §6, thay cho bảng tính tay ở v1.0.
+
+| Quy tắc | Giá trị | Nguồn |
+|---|---|---|
+| Hit target tối thiểu trên mobile | 44 × 44 px | WCAG 2.5.8 / `size.control.touch` — áp dụng cho F01 (+/-), C07, C10, C11, C13 ở mobile |
+| Focus luôn thấy được | ring 2px `focus.ring`, offset 2px | WCAG 2.4.7 |
+| Không truyền nghĩa chỉ bằng màu | Banner lỗi luôn có icon + text (C12); không có badge màu-only ở SCR-04 | WCAG 1.4.1 |
+| Mọi ô nhập có nhãn | F01 có `aria-label="Số lượng"` (không có `<label>` hiển thị riêng theo bố cục compact — chấp nhận theo mẫu `.ds-stepper` của template) | WCAG 1.3.1 |
+| Thứ tự focus | F01 dòng đầu tiên trước (`WF` §3.1.6) — 🔴 chưa xác nhận với PO/Dev FE, mức thấp không chặn G3 | `WF_US002-003_v1.0.md` §3.1.6 |
+
+## 7. Motion
+
+| Việc | Thời lượng | Easing | Ghi chú |
+|---|---|---|---|
+| Hover nút / dòng | 120 ms | ease | |
+| Spinner cục bộ tại dòng CartItem (F01/C07 đang gửi) | liên tục tới khi có phản hồi | linear | Theo `WF` §3.1.5 |
+| Toast vào/ra | 200 ms | ease-out | Không dùng ở SCR-04 (chưa chốt toast toàn site — `OQ-020`) |
+| Modal mở (xác nhận xoá) | 160 ms | ease-out | Không dùng bounce |
+| Skeleton shimmer | 1.2 s lặp | linear | Tắt khi `prefers-reduced-motion` |
+
+## 8. Ngoại lệ đã duyệt
+
+*`HIFI`/`FIGMA` lệch DS ⇒ phải có dòng ở đây. Không có dòng ⇒ lệch là lỗi.*
+
+| # | Tài liệu | Token/component lệch | DS nói | Thực tế | Vì sao | Ai duyệt | Ngày |
+|---|---|---|---|---|---|---|---|
+| 1 | `HIFI_US002-003_v1.0.html` | Trạng thái hover cho `.ds-btn--danger` | §4 ghi "chưa có token `-hover` riêng cho danger" | `HIFI` dùng `filter: brightness(.92)` inline qua class phụ (không phải mã màu thô) để mô phỏng hover, chờ DS bổ sung token `color.status.danger-hover` chính thức | Component sheet gốc (`ds-components.css`) chưa định nghĩa `.ds-btn--danger:hover`; HIFI cần thể hiện đủ hover cho nút Xoá C07 | PO (thay Designer, `DEC-01`) — cần Designer/Tech Lead xác nhận khi có | 2026-09-08 |
+
+## 9. Open Questions
+
+| ID | Câu hỏi | Hỏi ai | Từ ngày | Chặn gì |
+|---|---|---|---|---|
+| OQ-022 | *(nhắc lại từ `UICONV`)* Chọn design system tham chiếu — Material Design hay Ant Design? | Tech Lead | 2026-09-08 | §0, §3 (cột "Component DS tham chiếu" toàn bộ để trống) |
+| OQ-018 | *(nhắc lại từ `UICONV`)* Breakpoint/`content-max` thật (px) | Dev FE / Tech Lead | 2026-09-08 | §1.3 `breakpoint.*`, `size.content-max` |
+| OQ-035 | Token `color.status.danger-hover` chưa tồn tại trong `tokens.json`/`ds-components.css` — cần bổ sung chính thức hay giữ giải pháp tạm (`filter: brightness`) ở `HIFI`? | Tech Lead / Dev FE | 2026-09-08 | DS §4, §8 dòng #1; mọi `HIFI` có nút nguy hiểm |
+
+---
+
+## Tự chấm
+
+| # | Tiêu chí | ☐/✅ |
+|---|---|---|
+| 1 | `tokens.json` parse được; `tokens.css` sinh khớp (design-check T1 = ok) | ✅ — xác nhận bằng máy 2026-09-09, xem §6 |
+| 2 | Mọi cặp tương phản ở §6 đạt ngưỡng (design-check T2 = ok) | ✅ — 10/10 cặp đạt, xác nhận bằng máy 2026-09-09, xem §6 |
+| 3 | §3: mọi kiểu trình bày của UICONV §11 có lớp DS **và** có mặt trong `components.html` | ✅ — 21 dòng phủ toàn bộ từ vựng UICONV §11 (kể cả các dòng chưa dùng ở SCR-04, giữ nguyên lớp cho US sau) |
+| 4 | §4: mọi component có đủ default / hover / focus / disabled; component nhập liệu có Error | ☐ — Nút nguy hiểm thiếu token hover riêng (xem §8 #1, `OQ-035`); các component còn lại đủ |
+| 5 | `breakpoint.*` khớp UICONV §1; `size.content-max` khớp UICONV §1 | 🔴 — UICONV §1 chưa chốt số thật (`OQ-018`), giữ nguyên giá trị template theo đúng chỉ đạo, không tự đặt số |
+| 6 | Hai trạng thái rỗng trong `components.html` trông khác nhau | ✅ — kế thừa nguyên văn từ template (minh hoạ+nút chính / không minh hoạ+nút phụ) |
+| 7 | §0 ghi rõ độ tin cậy; giá trị placeholder có `OQ` | ✅ — 🔴, ghi rõ `OQ-022` |
+| 8 | Có chữ ký Designer (hoặc PO ký thay + `DEC-nn` "không có Designer") | ☐ — chưa ký thật, chờ PO tại G3 (`DEC-01`) |
diff --git a/ba-output/e-commerce/00-index/ds/components.html b/ba-output/e-commerce/00-index/ds/components.html
new file mode 100644
index 0000000..1d8d55a
--- /dev/null
+++ b/ba-output/e-commerce/00-index/ds/components.html
@@ -0,0 +1,332 @@
+<!--
+  components.html — component sheet của DS_e-commerce, sinh bởi skill ba-design (activity ds). Tự chứa, mở bằng trình duyệt.
+  QUY TẮC: <style> = tokens.css (khối :root) + ds-components.css NGUYÊN VĂN. Mỗi component có data-component và data-uiconv (khớp UICONV §11).
+  Đủ trạng thái: default · hover (mô tả) · focus · disabled (+ tooltip lý do) · loading · error. Không mã màu thô ngoài biến --ds-*.
+  Kiểm: node .claude/skills/ba-design/scripts/design-check.mjs --tokens tokens.json --css tokens.css --html components.html
+  Nguồn: DS_e-commerce_v1.1.md · UICONV_e-commerce_v1.0.md v1.1 §11 (chưa chốt design system tham chiếu — OQ-022, chưa chốt brand — SAD §7.0)
+  v1.1: nâng khối ds-components lên v1.1 (thêm .ds-m-full — tiện ích xếp chồng thao tác ở mobile, dùng để sửa lỗi bố cục HIFI_US002-003 mobile).
+-->
+<!doctype html>
+<html lang="vi">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>DS — e-commerce — Components</title>
+<style>
+:root{
+  --ds-color-bg-canvas:#F6F7F9;
+  --ds-color-bg-surface:#FFFFFF;
+  --ds-color-bg-subtle:#EEF1F5;
+  --ds-color-border-default:#D5DAE1;
+  --ds-color-border-strong:#767F8C;
+  --ds-color-text-primary:#1B1F24;
+  --ds-color-text-secondary:#5B6472;
+  --ds-color-text-disabled:#9AA3AF;
+  --ds-color-text-inverse:#FFFFFF;
+  --ds-color-brand-primary:#2456A6;
+  --ds-color-brand-primary-hover:#1C468A;
+  --ds-color-brand-primary-subtle:#E7EEF9;
+  --ds-color-status-danger:#B42318;
+  --ds-color-status-danger-subtle:#FDECEA;
+  --ds-color-status-success:#1E7B45;
+  --ds-color-status-success-subtle:#E6F4EC;
+  --ds-color-status-warning:#B7791F;
+  --ds-color-status-warning-subtle:#FFF4DE;
+  --ds-color-focus-ring:#2456A6;
+  --ds-font-family-base:"Segoe UI","Roboto","Helvetica Neue","Arial",sans-serif;
+  --ds-font-family-mono:"SFMono-Regular","Consolas","Menlo",monospace;
+  --ds-font-size-xs:12px;
+  --ds-font-size-sm:14px;
+  --ds-font-size-md:16px;
+  --ds-font-size-lg:20px;
+  --ds-font-size-xl:24px;
+  --ds-font-size-2xl:32px;
+  --ds-font-weight-regular:400;
+  --ds-font-weight-semibold:600;
+  --ds-font-line-height-tight:1.25;
+  --ds-font-line-height-normal:1.5;
+  --ds-space-1:4px;
+  --ds-space-2:8px;
+  --ds-space-3:12px;
+  --ds-space-4:16px;
+  --ds-space-6:24px;
+  --ds-space-8:32px;
+  --ds-space-12:48px;
+  --ds-radius-sm:4px;
+  --ds-radius-md:8px;
+  --ds-radius-pill:999px;
+  --ds-shadow-sm:0px 1px 2px 0px #1B1F2414;
+  --ds-shadow-md:0px 4px 12px 0px #1B1F2426;
+  --ds-size-control-desktop:36px;
+  --ds-size-control-touch:44px;
+  --ds-size-icon:20px;
+  --ds-size-content-max:1200px;
+  --ds-breakpoint-tablet:768px;
+  --ds-breakpoint-desktop:1024px;
+}
+/* ds-components v1.1 — BEGIN
+   CSS component của DS_<PROJECT>. Chỉ dùng biến --ds-* (tokens.css); cấm mã màu/px thô ngoài khối này.
+   Từ vựng lớp = cột "Kiểu trình bày" của UICONV §11 (xem DS §3). Khối này được chép NGUYÊN VĂN vào
+   components.html và mọi HIFI_*.html — kiểm khớp bằng scripts/design-check.mjs. */
+*,*::before,*::after{box-sizing:border-box}
+html{font-family:var(--ds-font-family-base);font-size:var(--ds-font-size-sm);line-height:var(--ds-font-line-height-normal);color:var(--ds-color-text-primary);background:var(--ds-color-bg-canvas);-webkit-font-smoothing:antialiased}
+body{margin:0}
+h1,h2,h3{margin:0;line-height:var(--ds-font-line-height-tight);font-weight:var(--ds-font-weight-semibold)}
+h1{font-size:var(--ds-font-size-xl)}h2{font-size:var(--ds-font-size-lg)}h3{font-size:var(--ds-font-size-md)}
+a,.ds-link{color:var(--ds-color-brand-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
+a:hover,.ds-link:hover{color:var(--ds-color-brand-primary-hover)}
+:focus-visible{outline:2px solid var(--ds-color-focus-ring);outline-offset:2px}
+.ds-muted{color:var(--ds-color-text-secondary)}
+.ds-small{font-size:var(--ds-font-size-xs)}
+.ds-icon{width:var(--ds-size-icon);height:var(--ds-size-icon);flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
+.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+
+/* Layout */
+.ds-page{max-width:var(--ds-size-content-max);margin:0 auto;padding:var(--ds-space-6) var(--ds-space-4);display:grid;gap:var(--ds-space-4)}
+.ds-row{display:flex;gap:var(--ds-space-2);align-items:center;flex-wrap:wrap}
+.ds-row--between{justify-content:space-between}.ds-row--end{justify-content:flex-end}
+.ds-stack{display:grid;gap:var(--ds-space-3)}
+.ds-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--ds-space-4);align-items:start}
+.ds-header{position:sticky;top:0;z-index:5;background:var(--ds-color-bg-surface);border-bottom:1px solid var(--ds-color-border-default);padding:var(--ds-space-3) var(--ds-space-4);display:flex;align-items:center;gap:var(--ds-space-4);min-height:56px}
+.ds-breadcrumb{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-breadcrumb a{text-decoration:none}
+
+/* Nút — UICONV §11: nút chính / nút phụ / nút nguy hiểm / liên kết */
+.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);height:var(--ds-size-control-desktop);padding:0 var(--ds-space-4);border-radius:var(--ds-radius-sm);border:1px solid transparent;font:inherit;font-weight:var(--ds-font-weight-semibold);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s}
+.ds-btn--primary{background:var(--ds-color-brand-primary);color:var(--ds-color-text-inverse)}
+.ds-btn--primary:hover{background:var(--ds-color-brand-primary-hover)}
+.ds-btn--secondary{background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);border-color:var(--ds-color-border-strong)}
+.ds-btn--secondary:hover{background:var(--ds-color-bg-subtle)}
+.ds-btn--danger{background:var(--ds-color-status-danger);color:var(--ds-color-text-inverse)}
+.ds-btn--ghost{background:transparent;color:var(--ds-color-brand-primary)}
+.ds-btn--icon{width:var(--ds-size-control-desktop);padding:0}
+.ds-btn[aria-disabled="true"],.ds-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
+.ds-btn.is-loading{pointer-events:none}
+.ds-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .8s linear infinite;flex:none}
+@keyframes ds-spin{to{transform:rotate(360deg)}}
+
+/* Field — UICONV §4: nhãn trên field, * sau nhãn, lỗi dưới field thay hint */
+.ds-field{display:grid;gap:var(--ds-space-1)}
+.ds-field__label{font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);color:var(--ds-color-text-primary)}
+.ds-field__label .ds-req{color:var(--ds-color-status-danger);margin-left:2px}
+.ds-field__hint{font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-field__error{font-size:var(--ds-font-size-xs);color:var(--ds-color-status-danger);display:flex;gap:var(--ds-space-1);align-items:center}
+.ds-input,.ds-select,.ds-textarea{width:100%;height:var(--ds-size-control-desktop);padding:0 var(--ds-space-3);border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);font:inherit}
+.ds-textarea{height:auto;min-height:88px;padding:var(--ds-space-2) var(--ds-space-3)}
+.ds-input::placeholder{color:var(--ds-color-text-secondary)}
+.ds-input:hover,.ds-select:hover{border-color:var(--ds-color-text-secondary)}
+.ds-input:focus,.ds-select:focus{border-color:var(--ds-color-brand-primary);outline:2px solid var(--ds-color-focus-ring);outline-offset:0}
+.ds-input.is-invalid,.ds-select.is-invalid{border-color:var(--ds-color-status-danger)}
+.ds-input[disabled],.ds-select[disabled]{background:var(--ds-color-bg-subtle);color:var(--ds-color-text-disabled);cursor:not-allowed}
+.ds-input[readonly]{border-color:transparent;background:transparent;padding-left:0}
+.ds-input-wrap{position:relative}
+.ds-input-wrap .ds-icon{position:absolute;left:var(--ds-space-3);top:50%;transform:translateY(-50%);color:var(--ds-color-text-secondary)}
+.ds-input-wrap .ds-input{padding-left:calc(var(--ds-space-3) + var(--ds-size-icon) + var(--ds-space-2))}
+.ds-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6472' stroke-width='1.75'><path d='m4 6 4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right var(--ds-space-3) center;padding-right:calc(var(--ds-space-3) + 24px)}
+.ds-check{display:inline-flex;align-items:center;gap:var(--ds-space-2);cursor:pointer;min-height:var(--ds-size-control-desktop)}
+.ds-check input{width:18px;height:18px;margin:0;accent-color:var(--ds-color-brand-primary)}
+.ds-switch{position:relative;width:40px;height:22px;border-radius:var(--ds-radius-pill);background:var(--ds-color-border-strong);display:inline-block;flex:none}
+.ds-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ds-color-bg-surface)}
+.ds-switch[aria-checked="true"]{background:var(--ds-color-brand-primary)}
+.ds-switch[aria-checked="true"]::after{left:20px}
+.ds-stepper{display:inline-flex;border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);height:var(--ds-size-control-desktop);overflow:hidden}
+.ds-stepper button{width:var(--ds-size-control-desktop);border:0;background:var(--ds-color-bg-surface);font:inherit;cursor:pointer;color:var(--ds-color-text-primary)}
+.ds-stepper input{width:48px;text-align:center;border:0;border-left:1px solid var(--ds-color-border-default);border-right:1px solid var(--ds-color-border-default);font:inherit}
+
+/* Bảng / Card — UICONV §3, §11 */
+.ds-table-wrap{overflow-x:auto;border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-surface)}
+.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-font-size-sm)}
+.ds-table th,.ds-table td{padding:var(--ds-space-3) var(--ds-space-4);text-align:left;border-bottom:1px solid var(--ds-color-border-default);vertical-align:middle}
+.ds-table th{background:var(--ds-color-bg-subtle);font-weight:var(--ds-font-weight-semibold);font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary);white-space:nowrap}
+.ds-table th[aria-sort]{cursor:pointer}
+.ds-table tbody tr:hover{background:var(--ds-color-bg-canvas)}
+.ds-table tbody tr[aria-selected="true"]{background:var(--ds-color-brand-primary-subtle)}
+.ds-table tbody tr:last-child td{border-bottom:0}
+.ds-table td.ds-num{text-align:right;font-variant-numeric:tabular-nums}
+.ds-card{background:var(--ds-color-bg-surface);border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);padding:var(--ds-space-4);display:grid;gap:var(--ds-space-2)}
+.ds-cards{display:grid;gap:var(--ds-space-3)}
+.ds-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--ds-space-2);border-radius:var(--ds-radius-pill);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);background:var(--ds-color-bg-subtle);color:var(--ds-color-text-primary)}
+.ds-badge--info{background:var(--ds-color-brand-primary-subtle)}
+.ds-badge--success{background:var(--ds-color-status-success-subtle);color:var(--ds-color-status-success)}
+.ds-badge--warning{background:var(--ds-color-status-warning-subtle);color:var(--ds-color-status-warning)}
+.ds-badge--danger{background:var(--ds-color-status-danger-subtle);color:var(--ds-color-status-danger)}
+.ds-tabs{display:flex;gap:var(--ds-space-4);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-tab{padding:var(--ds-space-2) 0;border-bottom:2px solid transparent;color:var(--ds-color-text-secondary);cursor:pointer;font-weight:var(--ds-font-weight-semibold)}
+.ds-tab[aria-selected="true"]{color:var(--ds-color-brand-primary);border-bottom-color:var(--ds-color-brand-primary)}
+.ds-pagination{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-price{font-variant-numeric:tabular-nums;font-weight:var(--ds-font-weight-semibold)}
+.ds-thumb{width:64px;height:64px;border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-subtle);border:1px solid var(--ds-color-border-default);display:grid;place-items:center;color:var(--ds-color-text-secondary);flex:none}
+
+/* Phản hồi hệ thống — UICONV §5, §6 */
+.ds-toast{position:fixed;top:var(--ds-space-4);right:var(--ds-space-4);z-index:20;min-width:280px;max-width:420px;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);background:var(--ds-color-text-primary);color:var(--ds-color-text-inverse);box-shadow:var(--ds-shadow-md);display:flex;gap:var(--ds-space-3);align-items:flex-start}
+.ds-toast--error{background:var(--ds-color-status-danger)}
+.ds-banner{display:flex;gap:var(--ds-space-3);align-items:flex-start;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-default);background:var(--ds-color-bg-subtle)}
+.ds-banner--error{background:var(--ds-color-status-danger-subtle);border-color:var(--ds-color-status-danger);color:var(--ds-color-status-danger)}
+.ds-banner--warning{background:var(--ds-color-status-warning-subtle);border-color:var(--ds-color-status-warning)}
+.ds-empty{display:grid;justify-items:center;text-align:center;gap:var(--ds-space-3);padding:var(--ds-space-12) var(--ds-space-4);color:var(--ds-color-text-secondary)}
+.ds-empty__illus{width:120px;height:88px;color:var(--ds-color-border-strong)}
+.ds-empty--filter{padding:var(--ds-space-8) var(--ds-space-4)}
+.ds-skeleton{height:14px;border-radius:var(--ds-radius-sm);background:linear-gradient(90deg,var(--ds-color-bg-subtle),var(--ds-color-bg-canvas),var(--ds-color-bg-subtle));background-size:200% 100%;animation:ds-shimmer 1.2s infinite}
+@keyframes ds-shimmer{to{background-position:-200% 0}}
+.ds-modal-backdrop{position:fixed;inset:0;background:#1B1F2480;display:grid;place-items:center;z-index:10;padding:var(--ds-space-4)}
+.ds-modal{width:100%;max-width:520px;background:var(--ds-color-bg-surface);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md);display:grid}
+.ds-modal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--ds-space-4) var(--ds-space-6);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-modal__body{padding:var(--ds-space-6);display:grid;gap:var(--ds-space-4)}
+.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--ds-space-2);padding:var(--ds-space-4) var(--ds-space-6);border-top:1px solid var(--ds-color-border-default)}
+.ds-status-page{display:grid;justify-items:center;gap:var(--ds-space-3);padding:var(--ds-space-12);text-align:center}
+
+/* Trạng thái ẩn/khoá/read-only — W7 */
+[data-vis="hidden"]{display:none!important}
+[data-vis="disabled"]{opacity:.45;pointer-events:none}
+[data-vis="readonly"] .ds-input{border-color:transparent;background:transparent}
+
+/* Responsive — breakpoint theo UICONV §1; body[data-view] ép khung nhìn khi xem trong HIFI */
+@media (max-width:1023px){.ds-cols{grid-template-columns:1fr}}
+@media (max-width:767px){
+  .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+  .ds-btn{height:var(--ds-size-control-touch)}
+  .ds-input,.ds-select{height:var(--ds-size-control-touch)}
+  .ds-table-wrap{display:none}.ds-cards{display:grid}
+  .ds-hide-m{display:none!important}
+}
+@media (min-width:768px){.ds-cards{display:none}.ds-hide-d{display:none!important}}
+body[data-view="mobile"] .ds-cols{grid-template-columns:1fr}
+body[data-view="mobile"] .ds-table-wrap{display:none}body[data-view="mobile"] .ds-cards{display:grid}
+body[data-view="mobile"] .ds-hide-m{display:none!important}body[data-view="mobile"] .ds-hide-d{display:revert}
+body[data-view="mobile"] .ds-btn,body[data-view="mobile"] .ds-input,body[data-view="mobile"] .ds-select{height:var(--ds-size-control-touch)}
+body[data-view="mobile"] .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+body[data-view="tablet"] .ds-cols{grid-template-columns:1fr}
+/* Tiện ích xếp chồng ở mobile: phần tử trong .ds-row chiếm trọn hàng (nhóm nút thao tác của một dòng danh sách/CartItem…) */
+.ds-m-full{}
+@media (max-width:767px){.ds-m-full{flex-basis:100%;min-width:0}}
+body[data-view="mobile"] .ds-m-full{flex-basis:100%;min-width:0}
+/* ds-components v1.1 — END */
+</style>
+</head>
+<body>
+<header class="ds-header">
+  <h1 style="font-size:var(--ds-font-size-md)">DS_e-commerce · Component sheet v1.1</h1>
+  <span class="ds-muted ds-small">Mỗi component = một dòng UICONV §11 · đủ trạng thái default / hover / focus / disabled / loading / error · chỉ dùng biến <code>--ds-*</code> · design system tham chiếu chưa chọn (OQ-022)</span>
+</header>
+<main class="ds-page">
+
+<section class="ds-card" data-component="Nút" data-uiconv="Nút chính · Nút phụ · Nút nguy hiểm · Liên kết">
+  <h2>Nút</h2>
+  <div class="ds-row">
+    <button class="ds-btn ds-btn--primary">Tạo mới</button>
+    <button class="ds-btn ds-btn--secondary">Huỷ</button>
+    <button class="ds-btn ds-btn--danger">Xoá</button>
+    <button class="ds-btn ds-btn--ghost">Xoá lọc</button>
+    <a class="ds-link" href="#">Chi tiết</a>
+  </div>
+  <div class="ds-row">
+    <button class="ds-btn ds-btn--primary" aria-disabled="true" title="Chọn ít nhất 1 dòng để bật">Disabled + tooltip lý do (UICONV §7)</button>
+    <button class="ds-btn ds-btn--primary is-loading"><span class="ds-spinner"></span>Đang lưu…</button>
+    <button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Đóng"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+  </div>
+  <p class="ds-small ds-muted">Hover: nền tối hơn một bậc (<code>--ds-color-brand-primary-hover</code>). Focus: viền 2px <code>--ds-color-focus-ring</code>. Chiều cao 36px desktop / 44px mobile.</p>
+</section>
+
+<section class="ds-card" data-component="Field" data-uiconv="Ô nhập · Ô nhập số · Chọn 1 · Chọn nhiều · Chọn ngày · Công tắc · Bộ đếm số lượng">
+  <h2>Field</h2>
+  <div class="ds-cols" style="grid-template-columns:1fr 1fr">
+    <label class="ds-field"><span class="ds-field__label">Mã <b class="ds-req">*</b></span><input class="ds-input" placeholder="3–20 ký tự, A–Z 0–9 -"><span class="ds-field__hint">Không trùng với mã đã có</span></label>
+    <label class="ds-field"><span class="ds-field__label">Số lượng (F01) <b class="ds-req">*</b></span>
+      <span class="ds-input is-invalid" style="display:flex;align-items:center;padding:0">
+        <span class="ds-stepper" style="border:0"><button aria-label="Giảm">−</button><input value="0" aria-label="Số lượng"><button aria-label="Tăng">+</button></span>
+      </span>
+      <span class="ds-field__error"><svg class="ds-icon" style="width:14px;height:14px" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>Số lượng phải là số nguyên từ 1 trở lên.</span>
+    </label>
+    <label class="ds-field"><span class="ds-field__label">Loại</span><select class="ds-select"><option>Thường</option></select></label>
+    <label class="ds-field"><span class="ds-field__label">Tên (read-only)</span><input class="ds-input" readonly value="Cửa hàng A"></label>
+    <label class="ds-field"><span class="ds-field__label">Tên (disabled)</span><input class="ds-input" disabled value="Cửa hàng A"></label>
+    <div class="ds-field"><span class="ds-field__label">Tìm kiếm</span><div class="ds-input-wrap"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input class="ds-input" placeholder="Nhập mã hoặc tên…"></div></div>
+  </div>
+  <div class="ds-row">
+    <label class="ds-check"><input type="checkbox" checked> Chọn nhiều</label>
+    <label class="ds-check"><input type="radio" name="r" checked> Chọn 1 (≤ 7 lựa chọn)</label>
+    <span class="ds-row"><span class="ds-switch" role="switch" aria-checked="true"></span> Công tắc</span>
+    <span class="ds-stepper"><button aria-label="Giảm">−</button><input value="2" aria-label="Số lượng"><button aria-label="Tăng">+</button></span>
+    <span class="ds-stepper"><button aria-label="Giảm" disabled>−</button><input value="1" aria-label="Số lượng" disabled><button aria-label="Tăng" disabled></button></span>
+  </div>
+  <p class="ds-small ds-muted">Bộ đếm số lượng (dùng cho F01 — CartItem): nút "−" disable khi giá trị = ngưỡng dưới (theo OQ-028, chưa chốt hành vi); ô nhập giữa cho nhập tay.</p>
+</section>
+
+<section class="ds-card" data-component="Ảnh / Card sản phẩm" data-uiconv="Ảnh · Card">
+  <h2>Ảnh (thumbnail) và Card — dùng cho ProductCard/CartItem</h2>
+  <div class="ds-row">
+    <div class="ds-thumb">ảnh</div>
+    <div class="ds-card" style="max-width:360px">
+      <div class="ds-row ds-row--between"><b>Shop mẫu</b></div>
+      <div class="ds-row">
+        <div class="ds-thumb"></div>
+        <div>
+          <div>Tên sản phẩm</div>
+          <div class="ds-small ds-muted">Biến thể (VD Size M, Đỏ)</div>
+          <div class="ds-small ds-muted">100.000 ₫</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p class="ds-small ds-muted">Ảnh lỗi tải hoặc chưa có: ô xám <code>.ds-thumb</code> (theo UICONV §1 "ô xám mặc định").</p>
+</section>
+
+<section class="ds-card" data-component="Bảng / Card" data-uiconv="Bảng · Card · Badge trạng thái">
+  <h2>Bảng (desktop) → Card (mobile)</h2>
+  <div class="ds-table-wrap"><table class="ds-table">
+    <thead><tr><th aria-sort="ascending">Mã ▲</th><th>Tên</th><th>Trạng thái</th><th class="ds-num">Số tiền</th><th></th></tr></thead>
+    <tbody>
+      <tr><td>STR-001</td><td>Cửa hàng A</td><td><span class="ds-badge">Nháp</span></td><td class="ds-num ds-price">1.234.567 ₫</td><td><a class="ds-link">Chi tiết</a></td></tr>
+      <tr aria-selected="true"><td>STR-002</td><td>Cửa hàng B</td><td><span class="ds-badge ds-badge--success">Đã duyệt</span></td><td class="ds-num ds-price">890.000 ₫</td><td><a class="ds-link">Chi tiết</a></td></tr>
+      <tr><td>STR-003</td><td>Cửa hàng C</td><td><span class="ds-badge ds-badge--danger">Từ chối</span></td><td class="ds-num ds-price">—</td><td><a class="ds-link">Chi tiết</a></td></tr>
+    </tbody></table></div>
+  <div class="ds-cards" style="display:grid"><div class="ds-card"><div class="ds-row ds-row--between"><b>STR-001</b><span class="ds-badge">Nháp</span></div><div>Cửa hàng A</div><div class="ds-small ds-muted">30/08/2026</div></div></div>
+  <div class="ds-row"><span class="ds-badge">Mặc định</span><span class="ds-badge ds-badge--info">Thông tin</span><span class="ds-badge ds-badge--success">Thành công</span><span class="ds-badge ds-badge--warning">Cảnh báo</span><span class="ds-badge ds-badge--danger">Lỗi</span></div>
+  <p class="ds-small ds-muted">Ánh xạ trạng thái nghiệp vụ (CART/ORDER_SELLER/PAYMENT) → biến thể badge: xem DS_e-commerce_v1.0.md §3.</p>
+  <div class="ds-row ds-row--between"><div class="ds-tabs"><span class="ds-tab" aria-selected="true">Tất cả</span><span class="ds-tab">Nháp</span><span class="ds-tab">Đã duyệt</span></div><div class="ds-pagination"><button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Trang trước">‹</button><span>1 / 7</span><button class="ds-btn ds-btn--secondary ds-btn--icon" aria-label="Trang sau">›</button></div></div>
+</section>
+
+<section class="ds-card" data-component="Trạng thái chuẩn" data-uiconv="Skeleton · Toast · Banner · Trang trạng thái">
+  <h2>Trạng thái chuẩn (UICONV §6) — hai trạng thái rỗng phải trông khác nhau</h2>
+  <div class="ds-cols" style="grid-template-columns:1fr 1fr">
+    <div class="ds-card"><b class="ds-small">Đang tải</b><div class="ds-skeleton"></div><div class="ds-skeleton" style="width:85%"></div><div class="ds-skeleton" style="width:60%"></div></div>
+    <div class="ds-card"><b class="ds-small">Lỗi tải (banner trong vùng)</b><div class="ds-banner ds-banner--error"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg><span>Không tải được dữ liệu, thử lại.</span><button class="ds-btn ds-btn--secondary" style="margin-left:auto;height:32px">Thử lại</button></div></div>
+    <div class="ds-card"><b class="ds-small">Rỗng — chưa có dữ liệu (minh hoạ + nút chính)</b><div class="ds-empty"><svg class="ds-empty__illus" viewBox="0 0 120 88" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="16" y="20" width="88" height="56" rx="6"/><path d="M16 36h88M32 52h28M32 62h44"/></svg><span>Giỏ hàng trống</span><button class="ds-btn ds-btn--primary">Tiếp tục mua sắm</button></div></div>
+    <div class="ds-card"><b class="ds-small">Rỗng — bộ lọc không khớp (không minh hoạ + nút phụ)</b><div class="ds-empty ds-empty--filter"><span>Không tìm thấy kết quả phù hợp với bộ lọc.</span><button class="ds-btn ds-btn--secondary">Xoá lọc</button></div></div>
+  </div>
+  <div class="ds-row">
+    <div class="ds-toast" style="position:static"><svg class="ds-icon" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></svg><span>Đã lưu cửa hàng STR-004.</span><button class="ds-btn ds-btn--ghost ds-btn--icon" aria-label="Đóng" style="color:inherit;height:24px;width:24px;margin-left:auto">✕</button></div>
+    <div class="ds-toast ds-toast--error" style="position:static"><svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg><span>Không lưu được. Thử lại sau.</span></div>
+  </div>
+</section>
+
+<section class="ds-card" data-component="Modal" data-uiconv="Modal · Drawer · Bottom-sheet">
+  <h2>Modal xác nhận (UICONV §5) — nút chính bên phải, hành động nguy hiểm dùng nút nguy hiểm</h2>
+  <div class="ds-modal" style="box-shadow:var(--ds-shadow-sm)">
+    <div class="ds-modal__head"><h3>Xoá sản phẩm khỏi giỏ hàng?</h3><button class="ds-btn ds-btn--ghost ds-btn--icon" aria-label="Đóng"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
+    <div class="ds-modal__body"><p style="margin:0">Sản phẩm sẽ được xoá khỏi giỏ hàng của bạn.</p></div>
+    <div class="ds-modal__foot"><button class="ds-btn ds-btn--secondary">Huỷ</button><button class="ds-btn ds-btn--danger">Xoá</button></div>
+  </div>
+</section>
+
+<section class="ds-card" data-component="Icon" data-uiconv="—">
+  <h2>Icon — inline SVG 24 grid, stroke 1.75, không emoji</h2>
+  <div class="ds-row" style="gap:var(--ds-space-4)">
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="search"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="plus"><path d="M12 5v14M5 12h14"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="close"><path d="M6 6l12 12M18 6 6 18"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="chevron-down"><path d="m6 9 6 6 6-6"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="back"><path d="M19 12H5m7-7-7 7 7 7"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="check"><path d="m5 12 4 4L19 6"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="alert"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="trash"><path d="M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="filter"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="cart"><path d="M3 4h2l2.4 11h11.2L21 7H6"/><circle cx="9" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="user"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
+    <svg class="ds-icon" viewBox="0 0 24 24" aria-label="menu"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
+  </div>
+</section>
+
+</main>
+</body>
+</html>
diff --git a/ba-output/e-commerce/00-index/ds/tokens.css b/ba-output/e-commerce/00-index/ds/tokens.css
new file mode 100644
index 0000000..b44fa3f
--- /dev/null
+++ b/ba-output/e-commerce/00-index/ds/tokens.css
@@ -0,0 +1,56 @@
+/* tokens.css — SINH TỪ tokens.json, không sửa tay.
+   Quy tắc tên: --ds-<đường dẫn token nối bằng '-'>. Kiểm khớp: node scripts/design-check.mjs --tokens tokens.json --css tokens.css
+   Khối :root này được chép nguyên văn vào <style> của mọi HIFI_*.html và components.html (file tự chứa).
+   Dự án e-commerce: giá trị vẫn là placeholder trung tính của template ba-design (chưa có brand guideline —
+   SAD §7.0; chưa chọn design system — OQ-022; breakpoint/content-max chưa chốt — OQ-018). Xem DS_e-commerce_v1.0.md §0. */
+:root{
+  --ds-color-bg-canvas:#F6F7F9;
+  --ds-color-bg-surface:#FFFFFF;
+  --ds-color-bg-subtle:#EEF1F5;
+  --ds-color-border-default:#D5DAE1;
+  --ds-color-border-strong:#767F8C;
+  --ds-color-text-primary:#1B1F24;
+  --ds-color-text-secondary:#5B6472;
+  --ds-color-text-disabled:#9AA3AF;
+  --ds-color-text-inverse:#FFFFFF;
+  --ds-color-brand-primary:#2456A6;
+  --ds-color-brand-primary-hover:#1C468A;
+  --ds-color-brand-primary-subtle:#E7EEF9;
+  --ds-color-status-danger:#B42318;
+  --ds-color-status-danger-subtle:#FDECEA;
+  --ds-color-status-success:#1E7B45;
+  --ds-color-status-success-subtle:#E6F4EC;
+  --ds-color-status-warning:#B7791F;
+  --ds-color-status-warning-subtle:#FFF4DE;
+  --ds-color-focus-ring:#2456A6;
+  --ds-font-family-base:"Segoe UI","Roboto","Helvetica Neue","Arial",sans-serif;
+  --ds-font-family-mono:"SFMono-Regular","Consolas","Menlo",monospace;
+  --ds-font-size-xs:12px;
+  --ds-font-size-sm:14px;
+  --ds-font-size-md:16px;
+  --ds-font-size-lg:20px;
+  --ds-font-size-xl:24px;
+  --ds-font-size-2xl:32px;
+  --ds-font-weight-regular:400;
+  --ds-font-weight-semibold:600;
+  --ds-font-line-height-tight:1.25;
+  --ds-font-line-height-normal:1.5;
+  --ds-space-1:4px;
+  --ds-space-2:8px;
+  --ds-space-3:12px;
+  --ds-space-4:16px;
+  --ds-space-6:24px;
+  --ds-space-8:32px;
+  --ds-space-12:48px;
+  --ds-radius-sm:4px;
+  --ds-radius-md:8px;
+  --ds-radius-pill:999px;
+  --ds-shadow-sm:0px 1px 2px 0px #1B1F2414;
+  --ds-shadow-md:0px 4px 12px 0px #1B1F2426;
+  --ds-size-control-desktop:36px;
+  --ds-size-control-touch:44px;
+  --ds-size-icon:20px;
+  --ds-size-content-max:1200px;
+  --ds-breakpoint-tablet:768px;
+  --ds-breakpoint-desktop:1024px;
+}
diff --git a/ba-output/e-commerce/00-index/ds/tokens.json b/ba-output/e-commerce/00-index/ds/tokens.json
new file mode 100644
index 0000000..3402aa4
--- /dev/null
+++ b/ba-output/e-commerce/00-index/ds/tokens.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "DS_e-commerce — design token theo chuẩn W3C DTCG. Nguồn sự thật duy nhất về màu/chữ/khoảng cách; tokens.css và khối :root trong HIFI_*.html phải sinh từ file này (kiểm bằng scripts/design-check.mjs). Giá trị bên dưới là PLACEHOLDER trung tính của template ba-design — dự án chưa có brand guideline (SAD §7.0: 'không có brand guideline cố định') và chưa chọn design system tham chiếu (OQ-022). KHÔNG coi đây là đề xuất nhận diện đã duyệt — xem DS_e-commerce_v1.0.md §0.",
+  "color": {
+    "bg": {
+      "canvas":  { "$type": "color", "$value": "#F6F7F9", "$description": "Nền trang" },
+      "surface": { "$type": "color", "$value": "#FFFFFF", "$description": "Nền card/bảng/modal" },
+      "subtle":  { "$type": "color", "$value": "#EEF1F5", "$description": "Header bảng, vùng phụ" }
+    },
+    "border": {
+      "default": { "$type": "color", "$value": "#D5DAE1" },
+      "strong":  { "$type": "color", "$value": "#767F8C" }
+    },
+    "text": {
+      "primary":   { "$type": "color", "$value": "#1B1F24" },
+      "secondary": { "$type": "color", "$value": "#5B6472" },
+      "disabled":  { "$type": "color", "$value": "#9AA3AF", "$description": "Miễn kiểm tương phản (WCAG 1.4.3 loại trừ thành phần vô hiệu)" },
+      "inverse":   { "$type": "color", "$value": "#FFFFFF" }
+    },
+    "brand": {
+      "primary":        { "$type": "color", "$value": "#2456A6", "$description": "Nút chính, liên kết, focus ring — placeholder trung tính, chưa có brand guideline (OQ-022)" },
+      "primary-hover":  { "$type": "color", "$value": "#1C468A" },
+      "primary-subtle": { "$type": "color", "$value": "#E7EEF9", "$description": "Nền badge/hàng được chọn" }
+    },
+    "status": {
+      "danger":         { "$type": "color", "$value": "#B42318" },
+      "danger-subtle":  { "$type": "color", "$value": "#FDECEA" },
+      "success":        { "$type": "color", "$value": "#1E7B45" },
+      "success-subtle": { "$type": "color", "$value": "#E6F4EC" },
+      "warning":        { "$type": "color", "$value": "#B7791F" },
+      "warning-subtle": { "$type": "color", "$value": "#FFF4DE" }
+    },
+    "focus": { "ring": { "$type": "color", "$value": "#2456A6" } }
+  },
+  "font": {
+    "family": {
+      "base": { "$type": "fontFamily", "$value": ["Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"], "$description": "PLACEHOLDER — system stack giữ nguyên theo chỉ đạo (không có font brand); ZH/KO/JA cần rà lại fallback font khi có bản dịch (OQ-023)" },
+      "mono": { "$type": "fontFamily", "$value": ["SFMono-Regular", "Consolas", "Menlo", "monospace"] }
+    },
+    "size": {
+      "xs":  { "$type": "dimension", "$value": "12px" },
+      "sm":  { "$type": "dimension", "$value": "14px" },
+      "md":  { "$type": "dimension", "$value": "16px" },
+      "lg":  { "$type": "dimension", "$value": "20px" },
+      "xl":  { "$type": "dimension", "$value": "24px" },
+      "2xl": { "$type": "dimension", "$value": "32px" }
+    },
+    "weight": {
+      "regular":  { "$type": "fontWeight", "$value": 400 },
+      "semibold": { "$type": "fontWeight", "$value": 600 }
+    },
+    "line-height": {
+      "tight":  { "$type": "number", "$value": 1.25 },
+      "normal": { "$type": "number", "$value": 1.5 }
+    }
+  },
+  "space": {
+    "1": { "$type": "dimension", "$value": "4px" },
+    "2": { "$type": "dimension", "$value": "8px" },
+    "3": { "$type": "dimension", "$value": "12px" },
+    "4": { "$type": "dimension", "$value": "16px" },
+    "6": { "$type": "dimension", "$value": "24px" },
+    "8": { "$type": "dimension", "$value": "32px" },
+    "12": { "$type": "dimension", "$value": "48px" }
+  },
+  "radius": {
+    "sm":   { "$type": "dimension", "$value": "4px" },
+    "md":   { "$type": "dimension", "$value": "8px" },
+    "pill": { "$type": "dimension", "$value": "999px" }
+  },
+  "shadow": {
+    "sm": { "$type": "shadow", "$value": { "color": "#1B1F2414", "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px" } },
+    "md": { "$type": "shadow", "$value": { "color": "#1B1F2426", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "0px" } }
+  },
+  "size": {
+    "control": {
+      "desktop": { "$type": "dimension", "$value": "36px", "$description": "Chiều cao nút/ô nhập desktop" },
+      "touch":   { "$type": "dimension", "$value": "44px", "$description": "Chiều cao tối thiểu trên mobile (hit target ≥ 44px)" }
+    },
+    "icon": { "$type": "dimension", "$value": "20px" },
+    "content-max": { "$type": "dimension", "$value": "1200px", "$description": "PLACEHOLDER — UICONV §1 chưa chốt max-width thật (OQ-018), giữ giá trị template" }
+  },
+  "breakpoint": {
+    "tablet":  { "$type": "dimension", "$value": "768px",  "$description": "PLACEHOLDER — UICONV §1 chưa chốt ngưỡng thật (OQ-018), giữ giá trị template" },
+    "desktop": { "$type": "dimension", "$value": "1024px", "$description": "PLACEHOLDER — UICONV §1 chưa chốt ngưỡng thật (OQ-018), giữ giá trị template" }
+  },
+  "$extensions": {
+    "ba": {
+      "project": "e-commerce",
+      "version": "1.0",
+      "source": "UICONV_e-commerce_v1.0.md v1.1 §0/§1/§8/§11 (chưa chốt design system — OQ-022; chưa chốt breakpoint/grid — OQ-018) · brand guideline: chưa có (SAD §7.0) — placeholder trung tính của templates/tokens.json",
+      "contrastPairs": [
+        { "fg": "color.text.primary",   "bg": "color.bg.surface",        "min": 4.5, "use": "Chữ thường trên nền card (VD tên sản phẩm C04, biến thể C05)" },
+        { "fg": "color.text.primary",   "bg": "color.bg.canvas",         "min": 4.5, "use": "Chữ thường trên nền trang" },
+        { "fg": "color.text.secondary", "bg": "color.bg.surface",        "min": 4.5, "use": "Hint, tên gian hàng phụ" },
+        { "fg": "color.text.inverse",   "bg": "color.brand.primary",     "min": 4.5, "use": "Nhãn nút chính (C11 Tiến hành Checkout)" },
+        { "fg": "color.text.inverse",   "bg": "color.status.danger",     "min": 4.5, "use": "Nhãn nút nguy hiểm (C07 Xoá)" },
+        { "fg": "color.brand.primary",  "bg": "color.bg.surface",        "min": 4.5, "use": "Liên kết" },
+        { "fg": "color.status.danger",  "bg": "color.bg.surface",        "min": 4.5, "use": "Message lỗi dưới field (E-CART-0002)" },
+        { "fg": "color.status.danger",  "bg": "color.status.danger-subtle", "min": 4.5, "use": "Banner lỗi tải/cập nhật (C12, E-CART-0003/0006)" },
+        { "fg": "color.text.primary",   "bg": "color.brand.primary-subtle", "min": 4.5, "use": "Chữ trên badge/hàng chọn" },
+        { "fg": "color.border.strong",  "bg": "color.bg.surface",        "min": 3.0, "use": "Viền ô nhập / bộ đếm F01 (WCAG 1.4.11 non-text)" }
+      ]
+    }
+  }
+}
diff --git a/ba-output/e-commerce/03-specification/design/DSPEC_US002-003_v1.0.md b/ba-output/e-commerce/03-specification/design/DSPEC_US002-003_v1.0.md
new file mode 100644
index 0000000..c0fc9a4
--- /dev/null
+++ b/ba-output/e-commerce/03-specification/design/DSPEC_US002-003_v1.0.md
@@ -0,0 +1,178 @@
+# DSPEC — Đặc tả thiết kế & bàn giao — US-002, US-003 (SCR-04 Giỏ hàng)
+
+| | |
+|---|---|
+| **Version** | 1.1 |
+| **Date** | 2026-09-09 |
+| **Author** | BA/Design (skill ba-design, activity `dspec`) |
+| **Status** | 🟡 Draft |
+| **Approved by** | Designer: — · PO: — *(dự án chưa có Designer riêng — PO ký thay, `DEC-01`)* |
+| **Source** | `SRS_US002-003_v1.0.md` v1.0 · `WF_US002-003_v1.0.md` v1.0 · `UICONV_e-commerce_v1.0.md` v1.1 · `DS_e-commerce_v1.0.md` v1.1 · prototype: `e-commerce/docs/sections/07-giao-dien.md` §7.1.1 SCR-04 (qua `WF`, không đọc trực tiếp) · kết quả `design-check.mjs` và `render-figma.sh` do người điều phối chạy ngày 2026-09-09 (ghi chú người duyệt) |
+| **Scope** | US-002, US-003 · `SCR-04` |
+| **Tệp kèm** | `HIFI_US002-003_v1.0.html` · `FIGMA_US002-003_v1.0/` |
+| **Prototype bấm được** | ❌ không — activity `proto` không nằm trong phạm vi lần chạy này (chỉ `ds`, `hifi`, `figma`, `dspec`); `HIFI` chưa gắn `data-nav` |
+
+## Change Log
+
+| Version | Date | Người sửa | Thay đổi | CR |
+|---|---|---|---|---|
+| 1.0 | 2026-09-08 | BA/Design (qua skill ba-design, activity `dspec`) | Bản đầu — redline SCR-04, ánh xạ badge (N/A ở US này), accessibility (tính tay, chưa chạy máy), 5 dòng lệch HIFI↔WF/SRS/DS, bàn giao Dev FE | — |
+| 1.1 | 2026-09-09 | BA/Design (qua skill ba-design, theo ghi chú người duyệt) | Sửa lỗi bố cục mobile HIFI (nâng `ds-components` v1.1, thêm `.ds-m-full`, bọc khối thao tác F01+C07 xuống hàng riêng — §2.1); chép kết quả `design-check.mjs` thật vào §6 (ok, không lỗi 🔴); §1 điền 8 file PNG thật; bổ sung component còn thiếu (F01/C07 dòng "Balo du lịch") vào `SCR-04.desktop.svg`; cập nhật `SCR-04.mobile.svg` theo bố cục mobile mới; README-import.md bỏ ghi chú "png trống" | — |
+
+> **Quy ước đọc** *(W11)*. `SRS` quyết định phần tử **có tồn tại không** và **hành xử thế nào**; `WF` quyết định
+> **nằm ở đâu**; `DS` quyết định **trông thế nào** (token, component); tài liệu này ghi **con số cụ thể** để Dev FE dựng
+> đúng HIFI mà không phải đo bằng mắt. Mâu thuẫn ⇒ SRS > WF > DS > HIFI, và mâu thuẫn phải ghi ở §6.
+
+> ⚠️ **Ngoại lệ gate G2** — tài liệu này (và `HIFI`/`FIGMA` nó mô tả) được sinh trong khi Gate G2
+> (Solution sign-off) của module Giỏ hàng & Checkout **chưa được PO + Tech Lead ký chính thức**
+> (nối tiếp `DEC-02`, `DEC-05`, `DEC-06`). Người dùng đã được cảnh báo và **khẳng định lại** muốn
+> tiếp tục vì mục đích đánh giá bộ skill BA — xem `DEC-07` (`00-index/DECISION_e-commerce.md`).
+> Rủi ro riêng của bộ `ba-design` này: nếu `BACKLOG_CartCheckout`/`BR_CartCheckout`/`SRS_US002-003`
+> đổi khi G2 ký thật, phải chạy lại `hifi` → `figma` → `dspec` cho `SCR-04` (xem `artifact-map.md` §5).
+> Ghi nhận ở Open Questions §8 dòng đầu.
+
+---
+
+## 0. Nguồn bố cục và độ tin cậy
+
+| | |
+|---|---|
+| **HIFI dựng từ** | `WF_US002-003_v1.0.md` §3.1 (bố cục) + `DS_e-commerce_v1.0.md` (visual) + `SRS_US002-003_v1.0.md` §2.A.3 / §4.2 (thành phần, text) |
+| **Prototype tham chiếu** | `e-commerce/docs/sections/07-giao-dien.md` §7.1.1 SCR-04 — mô tả **văn bản có cấu trúc** (không phải Figma/ảnh), mức phủ 1/1 màn hình của US-002/US-003, đã dùng ở `WF` §0–§1, **không đọc lại trực tiếp** ở bước `dspec` này (chỉ đọc qua `WF`, đúng chuỗi phụ thuộc `artifact-map.md` §5) |
+| **Độ tin cậy visual** | 🔴 `DS` §0 ghi "Đề xuất trung tính, chưa có nguồn" — toàn bộ token màu/chữ là placeholder của template `ba-design`, không suy ra brand thật. `HIFI`/`FIGMA` mang **cùng độ tin cậy 🔴** cho tới khi `OQ-022` (design system) và brand guideline được xác nhận |
+
+## 1. Bản đồ màn hình → tệp
+
+| SCR | Tên | HIFI (`#id`) | Trạng thái có trong HIFI | SVG (FIGMA) | PNG | Khớp WF §3.x |
+|---|---|---|---|---|---|---|
+| SCR-04 | Giỏ hàng | `HIFI_US002-003_v1.0.html#SCR-04` | `default` (+ 3 micro-state minh hoạ tại dòng: đang gửi, validation lỗi, lỗi hệ thống) · `loading` · `empty-none` · `error` | `SCR-04.desktop.svg` · `SCR-04.mobile.svg` (chỉ trạng thái `default`) | `png/SCR-04.desktop.default.png` · `png/SCR-04.desktop.loading.png` · `png/SCR-04.desktop.empty-none.png` · `png/SCR-04.desktop.error.png` · `png/SCR-04.mobile.default.png` · `png/SCR-04.mobile.loading.png` · `png/SCR-04.mobile.empty-none.png` · `png/SCR-04.mobile.error.png` (8 file, chụp 2026-09-09, khung 1440×900/390×844) | ✅ |
+
+*`SRS` §2.A.1 chỉ có 1 `SCR` (`SCR-04`) — dòng trên phủ đủ. Không có "empty-filter" (giỏ hàng không có bộ lọc, theo `WF` §3.1.3 — không phải thiếu, là N/A) và không có "submitting"/"invalid" ở cấp toàn màn hình — hai trạng thái này được minh hoạ **tại dòng CartItem** trong khối `default` (xem HIFI §"Minh hoạ dòng…") vì đây là hành vi cục bộ theo `SRS` §2.A.3.6, không phải trạng thái toàn trang.*
+
+## 2. Redline từng màn hình
+
+### 2.1 SCR-04 — Giỏ hàng
+
+| Vùng (WF) | Kích thước desktop | Kích thước mobile | Padding | Gap | Token nền / viền |
+|---|---|---|---|---|---|
+| Z1 Header màn hình | full × auto | full × auto | `space.6` `space.4` (kế thừa `.ds-page`) | `space.2` giữa tiêu đề và số lượng | `bg.canvas` |
+| Z2 Danh sách nhóm seller | 2/3 chiều rộng (`.ds-cols` cột trái, `minmax(0,2fr)`) | full | `space.4` mỗi card | `space.3` giữa các card, `space.2` trong card | `bg.surface` + `border.default`, `radius.md` mỗi card nhóm seller |
+| Z3 Tổng kết | 1/3 chiều rộng (`.ds-cols` cột phải, `minmax(0,1fr)`), `position: sticky; top: space.4` | full width, **sticky đáy màn hình** (`position: sticky; bottom: 0`, không phải cố định tuyệt đối — tự cuộn hết trang mới dừng ở đáy) | `space.3` `space.4` (mobile) | `space.2` giữa C09 và C11 | `bg.surface`; mobile thêm `border-top: border.default` + `shadow.md` |
+| Z4 Trạng thái đặc biệt | thay chỗ Z2 khi kích hoạt | thay chỗ Z2 khi kích hoạt | theo `.ds-empty`/`.ds-banner` mặc định | — | `bg.surface` (empty) / `status.danger-subtle` (error) |
+
+| C-id | Thành phần | Lớp DS | Kích thước | Token chữ | Token màu | Trạng thái thể hiện trong HIFI |
+|---|---|---|---|---|---|---|
+| C01 | lbl_header_title | `<h1>` + span phụ | auto | `size.xl/semibold` (tiêu đề) + `size.md/regular` (số lượng) | `text.primary` + `text.secondary` | — (tĩnh) |
+| C02 | grp_seller_header | `<h3>` trong `.ds-card` | auto | `size.md/semibold` | `text.primary` | — |
+| C03 | img_cart_item | `.ds-thumb` | 64×64 desktop / 56×56 mobile *(đề xuất — chưa có nguồn SRS/WF chính xác, mức thấp)* | — | `bg.subtle` (ô xám khi lỗi tải) | — |
+| C04 | lbl_product_name | text thường | auto | `size.sm/regular` | `text.primary` | — |
+| C05 | lbl_variant | `.ds-small.ds-muted` | auto | `size.xs/regular` | `text.secondary` | — |
+| C06 | lbl_unit_price | `.ds-small.ds-muted` | auto | `size.xs/regular` | `text.secondary` | 🟠 nguồn giá trị chưa chốt (`OQ-029`) — bố cục/token không đổi dù snapshot hay real-time |
+| F01 | input_quantity | `.ds-stepper`, bọc trong `.ds-row.ds-m-full.ds-row--end` cùng C07 (mobile) | 96px desktop (đề xuất) / auto mobile, cao `size.control.desktop`=36 (44 mobile) | `size.sm/regular` | `border.strong`; `status.danger` khi invalid | default · disabled+spinner (đang gửi) · invalid (viền đỏ + `.ds-field__error`) |
+| C07 | btn_delete_item | `.ds-btn.ds-btn--danger` | auto × 36 (44 mobile) | `size.sm/semibold` | `status.danger` nền, `text.inverse` chữ | default · hover (`filter:brightness(.92)`, xem `DS` §8 #1) · disabled+tooltip (đang xử lý) |
+| C08 | lbl_seller_subtotal | text thường, căn phải | auto | `size.sm/regular` | `text.primary` | — |
+| C09 | lbl_cart_total | text đậm | auto | `size.lg/semibold` | `text.primary` | default · rỗng (hiện "0 ₫") |
+| C10 | btn_continue_shopping | `.ds-btn.ds-btn--primary` (trong `.ds-empty`) | auto × 36 (44 mobile) | `size.sm/semibold` | `brand.primary` | chỉ hiện ở `empty-none` |
+| C11 | btn_checkout | `.ds-btn.ds-btn--primary`, `width:100%` | full-width × 36 (44 mobile) | `size.sm/semibold` | `brand.primary`; opacity .45 khi disabled | default (enabled) · rỗng (disabled + tooltip) |
+| C12 | banner_error_load | `.ds-banner.ds-banner--error` | 100% | `size.sm/regular` | `status.danger-subtle` nền, `status.danger` chữ/icon | chỉ hiện ở `error` |
+| C13 | btn_retry_load | `.ds-btn.ds-btn--secondary`, cao 32px (biến thể nhỏ, không phải token chuẩn — 🟠 ghi nhận) | auto | `size.sm/semibold` | `bg.surface` + `border.strong` | chỉ hiện ở `error` |
+
+**Redline mobile (v1.1) — nhóm thao tác mỗi dòng `CartItem`:** ở mobile (<768px), khối text (C04–C06, `flex:1 1 160px;min-width:0`) và khối thao tác (F01 + C07, + message lỗi `E-CART-0002` hoặc spinner khi đang gửi) **rơi xuống hàng riêng, căn phải** — khối thao tác bọc trong `<div class="ds-row ds-m-full ds-row--end">` (tiện ích `.ds-m-full` mới ở `DS` §3/`ds-components` v1.1: `flex-basis:100%` dưới 768px). Desktop giữ nguyên một hàng ngang. *Nguồn: không có trong `WF` §3.1.4 (chỉ ghi "Tablet/Mobile: giữ danh sách dạng dọc", không xuống mức chi tiết trong-một-dòng) ⇒ đây là đề xuất Design để sửa lỗi vỡ layout phát hiện qua `png/SCR-04.mobile.default.png`, Designer/PO xác nhận ở G3, không đổi hành vi/text.*
+
+**Khác biệt so với `WF` §3.1:** *(bắt buộc liệt kê — xem §6 để có đầy đủ lý do/người quyết; ở đây chỉ tóm số dòng)* 6 dòng — 3 dòng bố cục (Z3 dùng 1 markup responsive thay vì 2 khối desktop/mobile riêng như `WF`; C13 cao 32px không đúng `size.control.desktop`; nhóm thao tác F01+C07 xuống hàng riêng ở mobile — mới, xem trên), 1 dòng token thiếu (hover nút nguy hiểm), 1 dòng text (nhãn "Huỷ" trong modal xác nhận), 1 dòng dữ liệu minh hoạ (số liệu mẫu khác `WF` để tự nhất quán số học — xem §6.
+
+## 3. Ánh xạ trạng thái nghiệp vụ → hiển thị
+
+| Trạng thái (BR §3) | Badge (DS §3) | Nhãn nguyên văn (SRS §4.2) | Hành động bị khoá (W7, SRS §2.3.1) |
+|---|---|---|---|
+| *(không áp dụng ở SCR-04)* | — | — | — |
+
+**Vì sao rỗng:** US-002/US-003 chỉ thao tác trên `Cart.status = active` (`SRS` §1.4) và **không hiển thị badge trạng thái** `Cart`/`Order`/`Payment` nào ở màn hình này (`SRS` §2.A.3.1 không có thành phần badge). Bảng ánh xạ badge ↔ trạng thái nghiệp vụ (từ `BR_CartCheckout` §3) đã được lập sẵn ở cấp project tại `DS_e-commerce_v1.0.md` §3 để các `US` sau (checkout, quản lý đơn) dùng lại đúng token, không định nghĩa lại ở đây.
+
+## 4. Luồng prototype
+
+*N/A — activity `proto` không chạy ở lần này (ngoài phạm vi được giao: chỉ `ds`, `hifi`, `figma`, `dspec`). `HIFI_US002-003_v1.0.html` chưa gắn `data-nav`. Sơ đồ điều hướng hành vi đã có ở `SRS` §2.A.2 (mermaid) — không lặp lại ở đây. Khi chạy `proto` sau này: 3 cạnh cần gắn `data-nav` là SCR-01→SCR-04 (icon giỏ hàng), SCR-04→SCR-05 (C11 Checkout, ngoài phạm vi hành vi SRS này), SCR-04→SCR-01 (C10, giỏ rỗng).*
+
+## 5. Khả năng truy cập
+
+| Kiểm tra | Kết quả | Bằng chứng |
+|---|---|---|
+| Tương phản chữ (AA ≥ 4.5) trên mọi cặp dùng trong HIFI | ✅ Đạt — xác nhận bằng máy | `design-check.mjs` T2: 10/10 cặp đạt (chạy 2026-09-09, người điều phối), xem `DS_e-commerce_v1.0.md` §6 |
+| Hit target mobile ≥ 44 px cho mọi nút/ô nhập | ✅ | `size.control.touch` áp qua `body[data-view="mobile"]` cho `.ds-btn`, `.ds-stepper button` (kế thừa `.ds-btn` height rule qua CSS chung — riêng `.ds-stepper` dùng `size.control.desktop` cố định 36px cả hai khung nhìn, 🔴 chưa có rule mobile riêng cho `.ds-stepper`, xem §6) |
+| Thứ tự focus khớp `WF` §3.x.6 | 🟡 | `WF` §3.1.6 chỉ xác nhận "F01 dòng đầu tiên" ở mức thấp, chưa xác nhận với PO/Dev FE — thứ tự DOM trong HIFI đặt F01 dòng 1 trước, khớp đề xuất |
+| Mọi ô nhập có nhãn; mọi icon-button có `aria-label` | ✅ | F01 dùng `aria-label="Số lượng"` trên input của `.ds-stepper`; nút đóng modal có `aria-label="Đóng"` |
+| Không truyền nghĩa chỉ bằng màu (badge có chữ, lỗi có icon + text) | ✅ | Banner C12 và message F01 đều có icon + text; không dùng badge màu-only ở SCR-04 |
+| Tắt motion khi `prefers-reduced-motion` | ☐ | Chưa thêm rule `@media (prefers-reduced-motion: reduce)` cho `.ds-spinner`/`.ds-skeleton` trong `HIFI` — kế thừa từ `ds-components.css` gốc (cũng chưa có) — ghi nhận nợ chung ở `DS` §7, không riêng US này |
+
+## 6. Lệch HIFI ↔ WF / SRS / DS
+
+| # | Màn hình | HIFI có | Tài liệu nói | Loại | Bên thắng | Xử lý | Ai quyết | Trạng thái |
+|---|---|---|---|---|---|---|---|---|
+| 1 | SCR-04 | Z3 (Tổng kết) dùng **một** khối markup duy nhất, đổi vị trí bằng CSS responsive (`position: sticky`, đổi `top`/`bottom` theo `body[data-view]`) | `WF_US002-003_v1.0.html` dựng **hai** khối DOM riêng cho desktop (sidebar) và mobile (footer), ẩn/hiện bằng `d-hide`/`m-hide` | Bố cục | HIFI (kỹ thuật hiện thực hợp lệ hơn, cùng kết quả thị giác với `WF`) | Không cần sửa `WF` — đây là chi tiết dựng HTML, không đổi vị trí/nội dung nhìn thấy. Dev FE được phép chọn 1-DOM hoặc 2-DOM tuỳ stack, miễn giữ đúng vị trí/kết quả thị giác đã tả ở §2.1 | Designer/Dev FE (không chặn G3) | ✅ Đã xử lý — ghi nhận để không ai tưởng khác biệt |
+| 2 | SCR-04 | Nút "Xoá" (C07) dùng `.ds-btn--danger:hover{filter:brightness(.92)}` (giải pháp tạm) | `DS_e-commerce_v1.0.md` §4 ghi "chưa có token `color.status.danger-hover` riêng" | Component/Token | Chưa quyết | Bổ sung token `color.status.danger-hover` chính thức vào `tokens.json` rồi thay `filter` bằng biến — xem `DS` §8 #1, `OQ-035` | Tech Lead / Dev FE | ☐ (`OQ-035`) |
+| 3 | *(modal minh hoạ)* | Nút "Huỷ" trong modal xác nhận xoá không có `data-key` (không có khoá ở `SRS` §4.2) | `SRS_US002-003_v1.0.md` §4.2 không liệt kê nhãn "Huỷ" cho modal này (chỉ có `cart.delete.confirm.title`/`.body`) | Text | Chưa quyết | BA bổ sung khoá `cart.delete.confirm.cancel` = "Huỷ" vào `SRS` §4.2 ở version sau; hiện tại `HIFI` dùng nhãn "Huỷ" theo quy ước chung `UICONV` §9 (nhãn nút = động từ) — không đổi hành vi | BA (khi cập nhật `SRS`), không chặn G3 vì rủi ro thấp (từ phổ biến, không mơ hồ) | ☐ (mức thấp) |
+| 4 | SCR-04 | C13 "Thử lại" cao 32px (`height:32px` inline) thay vì `size.control.desktop`=36px | `DS_e-commerce_v1.0.md` §1.3 quy định chiều cao control chuẩn là 36px desktop | Token | Chưa quyết | Đây là biến thể "nút nhỏ trong banner" — cần `DS` bổ sung token `size.control.compact` chính thức nếu muốn dùng lại, hoặc đổi về 36px cho nhất quán | Designer/Tech Lead | ☐ (mức thấp, không chặn G3) |
+| 5 | SCR-04 | Số liệu minh hoạ trong `HIFI`/SVG (Shop A 250.000₫ + Shop B 260.000₫ = 510.000₫) khác số liệu minh hoạ trong `WF_US002-003_v1.0.html` (250.000₫ + 200.000₫ hiển thị nhưng tổng ghi 585.000₫ — vốn đã sai số học trong `WF`) | `WF` không có bảng dữ liệu mẫu chính thức (chỉ minh hoạ bố cục); `AC-US002-01` có bộ dữ liệu mẫu riêng (585.000₫, 3+2 dòng) | Dữ liệu minh hoạ | HIFI (tự sửa lỗi số học nội bộ của `WF`, không phải dữ liệu nghiệp vụ) | Không cần sửa `SRS`/`AC` (không phải nguồn sự thật về số liệu — chỉ là ví dụ minh hoạ bố cục); khuyến nghị BA sửa số ở `WF` khi có dịp cập nhật để ba nơi (WF/HIFI/AC) không mỗi nơi một bộ số, tránh Dev FE nhầm là dữ liệu thật | BA (không chặn G3 — không phải dữ liệu quy định hành vi) | ☐ (mức thấp) |
+| 6 | SCR-04 | *(v1.0)* `SCR-04.desktop.svg` không vẽ `F01`/`C07` cho dòng "Balo du lịch" (Shop B) — thiếu component so với `HIFI` | `HIFI_US002-003_v1.0.html` có đủ F01/C07 cho mọi dòng `CartItem` hiển thị | SVG thiếu component | FIGMA phải khớp HIFI | **Đã sửa ở v1.1** — bổ sung `<g id="F01">`/`<g id="C07">` cho dòng "Balo du lịch" trong `SCR-04.desktop.svg` | BA/Design | ✅ Đã xử lý (2026-09-09) |
+| 7 | SCR-04 | *(v1.0)* `HIFI` mobile (390px): khối text (C04–C06) và khối thao tác (F01+C07) cùng một hàng `.ds-row` không đủ chỗ ⇒ tên sản phẩm bị bẻ từng chữ, stepper chồng lên text (phát hiện qua `png/SCR-04.mobile.default.png`) | `DS` §1.3 chỉ quy định chiều cao control, không quy định hành vi xuống hàng ở mobile cho nhóm nhiều thành phần trong một `.ds-row` | Bố cục (lỗi) | HIFI phải sửa | **Đã sửa ở v1.1** — nâng `ds-components` lên v1.1 (thêm `.ds-m-full`), bọc khối thao tác trong `.ds-row.ds-m-full.ds-row--end` để xuống hàng riêng ở mobile; cập nhật `SCR-04.mobile.svg` theo bố cục mới; xem redline mobile ở §2.1 | BA/Design (đã xử lý, Designer/PO xác nhận thêm ở G3 nếu cần) | ✅ Đã xử lý (2026-09-09) |
+
+**Kết quả `design-check.mjs`** (chạy bởi người điều phối, 2026-09-09):
+
+```
+✅ T0  tokens.json: 49 token, 17 màu
+✅ T1  tokens.css khớp tokens.json
+✅ T2  Tương phản: 10/10 cặp đạt
+✅ H1  components.html: khối :root khớp tokens.json
+✅ H2  components.html: không có mã màu thô trong markup
+✅ H1  HIFI_US002-003_v1.0.html: khối :root khớp tokens.json
+✅ H1  HIFI_US002-003_v1.0.html: khối ds-components khớp components.html
+✅ H2  HIFI_US002-003_v1.0.html: không có mã màu thô trong markup
+✅ H4  HIFI_US002-003_v1.0.html: text data-key khớp SRS §4.2
+✅ H3  C-id/F-id khớp hai chiều (14 ID)
+✅ H5  HIFI phủ 1/1 SCR của SRS §2.1
+✅ S1  SVG: 2 file, màu ⊆ token
+✅ S1  SVG phủ desktop+mobile cho 1 SCR
+ok — không có lỗi 🔴
+```
+
+*(Kết quả trên chạy trên bản HIFI **trước** khi sửa mobile ở §6 dòng #7 — cấu trúc DOM đổi (bọc thêm `<div class="ds-row ds-m-full ds-row--end">`) không đổi tập `data-c`/`data-f`/`data-key` nên H1–H5 vẫn đúng; khuyến nghị người điều phối chạy lại một lần nữa sau bản v1.1 để có phiên bản kết quả khớp chính xác file mới nhất — xem `humanInputNeeded`.)* C-id lệch hai chiều: rỗng (14/14) · data-key text lệch SRS §4.2: rỗng · mã màu thô ngoài token: 0 · SCR thiếu: 0.
+
+## 7. Bàn giao cho Dev FE
+
+| | |
+|---|---|
+| **Lấy từ HIFI** | Bố cục, khoảng cách, token, trạng thái thị giác, thứ tự DOM/focus. Mở `HIFI_US002-003_v1.0.html?ids=1&zones=1` để thấy `C-id`/`F-id` và vùng `Zn`; dùng dropdown "Trạng thái" để xem `loading`/`empty-none`/`error` |
+| **Lấy từ SRS** | Hành vi, điều kiện ẩn/khoá, validation, mã lỗi, text (`HIFI` chỉ *chép* text từ `SRS_US002-003_v1.0.md` §4.2). **5 `OQ` còn chặn G3** (`OQ-028`…`OQ-030`, `OQ-032`, `OQ-033`) — Dev FE **không** code phần phụ thuộc các câu hỏi này cho tới khi có câu trả lời |
+| **Lấy từ DS** | `00-index/ds/tokens.json` → biến CSS/theme của stack đã chọn (khi `OQ-022` được trả lời); lớp `.ds-*` → component tương ứng (`DS` §3 cột 3, hiện để trống) |
+| **Không được suy ra từ HIFI** | Dữ liệu mẫu (số liệu, tên sản phẩm — xem §6 dòng #5) · giới hạn trên số lượng F01 (`OQ-030`) · nguồn giá C06 (`OQ-029`) · hành vi khi số lượng về 0 (`OQ-028`) |
+| **Khi Designer sửa trong Figma** | Báo BA ⇒ chạy lại `hifi` + `figma` với `--proto <link>`; `SRS` chỉ đổi nếu lệch Tồn tại/Hành vi được PO chấp nhận |
+| **Ảnh tham chiếu** | `FIGMA_US002-003_v1.0/png/` — 8 file đã có (chụp 2026-09-09, xem §1). **Lưu ý:** ảnh mobile chụp từ bản HIFI trước khi sửa lỗi bố cục §6 #7 — người điều phối nên chạy lại `render-figma.sh` sau bản v1.1 để có ảnh khớp bố cục mobile mới, xem `humanInputNeeded` |
+| **Về màu/token** | 🔴 Toàn bộ màu là placeholder trung tính — **không lập trình cứng các mã hex trong SVG/HIFI vào code sản phẩm**; chờ `OQ-022` (design system) trước khi coi bảng màu là chính thức, nếu không sẽ phải đổi lại toàn bộ khi có brand thật |
+
+## 8. Open Questions
+
+| ID | Câu hỏi | Hỏi ai | Từ ngày | Chặn gì | 🔴 chặn G3? |
+|---|---|---|---|---|---|
+| DS-EX-01 | **Ngoại lệ gate G2** (nhắc lại, không phải câu hỏi nghiệp vụ mới) — `DS`/`HIFI`/`FIGMA`/`DSPEC` của `SCR-04` được sinh khi G2 module Giỏ hàng & Checkout chưa ký chính thức (`DEC-02`, `DEC-05`, `DEC-06`, `DEC-07`). Nếu `BACKLOG`/`BR`/`SRS` đổi khi G2 ký thật, bốn tệp này phải chạy lại toàn bộ (không chỉ rà một phần) vì `HIFI` chép trực tiếp thành phần/text từ `SRS` | PO, Tech Lead | 2026-09-08 | Baseline `DS`/`HIFI`/`FIGMA`/`DSPEC` của `SCR-04` | `DECISION_e-commerce.md` `DEC-07` |
+| OQ-035 | *(nhắc lại từ `DS` §9)* Token `color.status.danger-hover` chưa tồn tại — bổ sung chính thức hay giữ `filter: brightness()` tạm thời? | Tech Lead / Dev FE | 2026-09-08 | §6 dòng #2 | ☐ (không chặn G3) |
+| DS-EX-02 | Nhãn "Huỷ" cho nút huỷ trong modal xác nhận xoá `CartItem` chưa có khoá i18n ở `SRS` §4.2 — BA có cần bổ sung khoá riêng (VD `cart.delete.confirm.cancel`) ở lần cập nhật `SRS` tiếp theo không, hay dùng chung một nhãn "Huỷ" cho mọi modal xác nhận toàn hệ thống (không cần khoá riêng theo màn hình)? | BA / PO | 2026-09-08 | §6 dòng #3 | ☐ (không chặn G3, mức thấp) |
+
+*Năm `OQ` chặn G3 về mặt hành vi (`OQ-028`…`OQ-030`, `OQ-032`, `OQ-033`) đã có ở `SRS_US002-003_v1.0.md` §8 — không lặp lại ở đây; chúng không phải OQ của riêng `ba-design` nhưng **chặn** `HIFI` hoàn thiện các micro-state liên quan (đặc biệt `OQ-028` ảnh hưởng trực tiếp hành vi khi F01 về 0, hiện `HIFI` chỉ minh hoạ trạng thái "invalid" chung chung, không vẽ nhánh cụ thể theo phương án (a)/(b) của `OQ-028`).*
+
+---
+
+## Tự chấm
+
+| # | Tiêu chí | ☐/✅ | Ghi chú |
+|---|---|---|---|
+| 1 | Mọi `SCR` của `SRS` §2.1 có mặt trong HIFI (`#SCR-xx`) và §1 | ✅ | 1/1 `SCR-04` |
+| 2 | Tập `data-c`/`data-f` trong HIFI khớp **hai chiều** với `SRS` §2.3.1 / §2.3.3 | ✅ | `design-check.mjs` H3: khớp hai chiều (14 ID), xác nhận bằng máy 2026-09-09 |
+| 3 | Mọi `data-key` có text **nguyên văn** bằng `SRS` §4.2 (W5) | ✅ | `design-check.mjs` H4: text data-key khớp SRS §4.2, xác nhận bằng máy 2026-09-09 |
+| 4 | Mọi trạng thái `SRS` §2.3.6 có khối `data-state` tương ứng; hai trạng thái rỗng trông khác nhau | 🟡 | Đủ `default`/`loading`/`empty-none`/`error`; SCR-04 chỉ có 1 loại rỗng (đúng theo `WF` §3.1.3, không phải thiếu) |
+| 5 | HIFI chỉ dùng biến `--ds-*` và lớp `.ds-*`; không mã màu thô trong markup | ✅ | `design-check.mjs` H2: không có mã màu thô, xác nhận bằng máy 2026-09-09 |
+| 6 | Khối `:root` và khối `ds-components` trong HIFI **trùng nguyên văn** với `ds/tokens.css` + `ds/components.html` | ✅ | `design-check.mjs` H1: khối `:root` và `ds-components` khớp, xác nhận bằng máy 2026-09-09 (bản v1.1 nâng cùng lúc lên `ds-components` v1.1 ở cả hai file, giữ khớp nguyên văn) |
+| 7 | Mỗi SCR có ≥ 2 khung nhìn (desktop + mobile) trong HIFI **và** trong `FIGMA/*.svg` | ✅ | HIFI: toolbar `desktop`/`mobile`; FIGMA: `SCR-04.desktop.svg` + `SCR-04.mobile.svg`; `design-check.mjs` S1 xác nhận |
+| 8 | Mã màu trong SVG ⊆ tập token | ✅ | `design-check.mjs` S1: màu ⊆ token, xác nhận bằng máy 2026-09-09 |
+| 9 | §5 tương phản đạt AA cho mọi cặp chữ | ✅ | `design-check.mjs` T2: 10/10 cặp đạt, xác nhận bằng máy 2026-09-09 |
+| 10 | §6 đã điền; không còn lệch Tồn tại/Hành vi/Text với SRS | ✅ | 7 dòng lệch (2 dòng mới #6/#7 đã xử lý), **không có dòng nào loại Tồn tại/Hành vi** (chỉ Bố cục/Token/Text mức thấp, 2 dòng đã Đã xử lý) — phù hợp vì `HIFI` chỉ chép từ `SRS`, không tự thêm hành vi |
+| 11 | Có chữ ký Designer (hoặc PO + `DEC-nn`) | ☐ | Chưa ký thật — chờ PO tại G3 (`DEC-01`) |
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/README-import.md b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/README-import.md
new file mode 100644
index 0000000..33c9f84
--- /dev/null
+++ b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/README-import.md
@@ -0,0 +1,58 @@
+# FIGMA_US002-003_v1.0 — Gói nhập vào Figma
+
+| | |
+|---|---|
+| **Sinh bởi** | skill `ba-design`, activity `figma` |
+| **US / màn hình** | US-002 (Xem giỏ hàng nhóm theo seller), US-003 (Sửa số lượng / xoá sản phẩm trong giỏ) — cùng `SCR-04` Giỏ hàng |
+| **Nguồn** | `../HIFI_US002-003_v1.0.html` (bố cục v1.1, 2026-09-09) · `00-index/DS_e-commerce_v1.0.md` (v1.1, `00-index/ds/tokens.json`) · `03-specification/WF_US002-003_v1.0.md` · `03-specification/SRS_US002-003_v1.0.md` |
+| **Vì sao không có file `.fig`** | `.fig` là định dạng nhị phân độc quyền; REST API của Figma không cho tạo node thiết kế. Gói này gồm các định dạng Figma **nhập được** và giữ được layer/text/token. |
+| **Độ tin cậy visual** | 🔴 — token trong `tokens.dtcg.json` là placeholder trung tính của template `ba-design` (dự án chưa có brand guideline — SAD §7.0, chưa chọn design system — `OQ-022`). Designer/PO cần chốt trước khi coi các file SVG này là visual cuối cùng |
+| **v1.1 (2026-09-09)** | Bổ sung `F01`/`C07` còn thiếu cho dòng "Balo du lịch" ở `SCR-04.desktop.svg`; cập nhật `SCR-04.mobile.svg` theo bố cục mobile mới (nhóm thao tác F01+C07 xuống hàng riêng — theo `ds-components` v1.1, tiện ích `.ds-m-full`); `png/` đã có 8 ảnh (xem bên dưới) |
+
+## Nội dung gói
+
+| File | Định dạng | Nhập vào Figma bằng | Sửa được trong Figma |
+|---|---|---|---|
+| `SCR-04.desktop.svg` | SVG (1440×900), trạng thái mặc định — đủ `F01`/`C07` cho **mọi** dòng `CartItem` (kể cả "Balo du lịch", bổ sung ở v1.1) | Kéo thả vào canvas, hoặc **File → Place image / Import** | ✅ Layer vector, text, tên layer = `Z1`/`Z2`/`Z3`/`C02`/`C03`/`C04`/`C05`/`C06`/`F01`/`C07`/`C08`/`C09`/`C11` |
+| `SCR-04.mobile.svg` | SVG (390×844), trạng thái mặc định — cập nhật v1.1: nhóm thao tác (F01+C07) nằm hàng riêng dưới khối text, khớp `.ds-m-full` trong HIFI | Kéo thả | ✅ Layer vector — `Z3` là footer sticky đáy màn hình (khác desktop: sidebar bên phải) theo `WF` §2 |
+| `tokens.dtcg.json` | Design token chuẩn W3C DTCG (bản sao `00-index/ds/tokens.json`) | Plugin **Tokens Studio for Figma** → Import → JSON; hoặc **Variables → Import** nếu tài khoản có API variables | ✅ Thành Figma Variables / Styles |
+| `png/` | 8 ảnh chụp `HIFI_US002-003_v1.0.html` bằng Chrome headless (`scripts/render-figma.sh`, chụp 2026-09-09): `SCR-04.{desktop,mobile}.{default,loading,empty-none,error}.png` | Kéo thả | ❌ Chỉ để tham chiếu và đối chiếu pixel — **ảnh mobile chụp từ bản HIFI trước khi sửa lỗi bố cục §"v1.1" ở trên, nên chụp lại** (xem "Việc còn lại") |
+| `../HIFI_US002-003_v1.0.html` | HTML tự chứa | Plugin **html.to.design** (divRIOTS) → *Import from file* hoặc *from URL* khi host tạm bằng `python3 -m http.server` | ✅ Layer đầy đủ theo DOM, auto-layout |
+
+## Thứ tự nhập khuyến nghị
+
+1. **Token trước:** nhập `tokens.dtcg.json` bằng Tokens Studio → *Create Styles / Variables* để có bảng màu, chữ, khoảng cách trùng tên `--ds-*`. Vì token còn placeholder (🔴), đặt tên style rõ ràng kiểu "e-commerce/placeholder/…" để không nhầm là bảng màu chính thức.
+2. **Component sheet:** nhập `../../00-index/ds/components.html` bằng html.to.design vào page *Components*; hoặc dựng component từ SVG và gán style vừa tạo.
+3. **Màn hình:** kéo `SCR-04.desktop.svg` và `SCR-04.mobile.svg` vào page *Screens*, đổi tên frame thành `SCR-04 · Giỏ hàng · desktop` / `SCR-04 · Giỏ hàng · mobile`.
+4. **Trạng thái khác** (đang tải, rỗng, lỗi tải — xem `HIFI_US002-003_v1.0.html?scr=SCR-04&state=…`): gói này **chưa có SVG riêng cho từng trạng thái** (chỉ có `default`) — Designer dựng thêm trong Figma dựa trên `HIFI` (mở với `?state=loading`/`empty-none`/`error` để xem) nếu cần, hoặc yêu cầu chạy lại `figma` với các hậu tố trạng thái.
+5. **Đối chiếu:** mở `png/` cạnh frame để kiểm tra khoảng cách và màu khớp HIFI — đã có 8 ảnh (2026-09-09); **ảnh mobile nên chụp lại** sau bản HIFI v1.1 (xem "Việc còn lại").
+
+## Lưu ý
+
+- **Font:** SVG ghi font `Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif` (system stack, chưa có font brand); máy không có font ⇒ Figma thay bằng font gần nhất. Không cần cài thêm font đặc biệt ở lần chạy này.
+- **Màu trong SVG là mã nguyên văn** từ `tokens.dtcg.json` (Figma không đọc biến CSS); thuộc tính `data-token` ghi tên token để tra ngược. Sửa màu ⇒ sửa `00-index/ds/tokens.json` rồi chạy lại `ds` + `hifi` + `figma`, không sửa tay SVG.
+- **Hành vi không nằm trong Figma.** Prototype link trong Figma chỉ mô phỏng điều hướng theo `SRS` §2.A.2; điều kiện, validation, mã lỗi đọc ở `SRS_US002-003_v1.0.md`. Khi Figma và SRS lệch: SRS thắng về tồn tại/hành vi/text, Figma thắng về bố cục (W11) — ghi lệch vào `WF_US002-003_v1.0.md` §5 (đã có 4 dòng chờ PO/Tech Lead quyết, xem đó trước khi sửa SVG theo ý riêng).
+- **Không dùng gói này để thay `HIFI`.** `HIFI_US002-003_v1.0.html` là nguồn sự thật về visual đã đề xuất (🔴 chưa duyệt); Figma là bản làm việc của Designer. Designer sửa trong Figma ⇒ báo BA để chạy lại `hifi` + `figma` với `--proto <link Figma>`.
+- **Số liệu trong SVG là dữ liệu minh hoạ** (VD "Áo thun basic", "250.000 ₫") để hình dung bố cục thật — không phải dữ liệu SRS quy định (SRS không có ví dụ số cụ thể ngoài `AC_US-002_v1.0.md` §Dữ liệu mẫu, vốn dùng bộ số khác). Không suy ra số liệu nghiệp vụ từ SVG/HIFI.
+
+## Việc còn lại — cần người điều phối (có Bash/Chrome)
+
+| # | Việc | Lệnh |
+|---|---|---|
+| 1 | Chụp lại PNG mobile sau bản HIFI v1.1 (sửa lỗi bố cục §"v1.1" ở trên) — desktop không đổi cấu trúc DOM, không bắt buộc chụp lại nhưng chụp lại toàn bộ cho đồng bộ cũng được | `.claude/skills/ba-design/scripts/render-figma.sh 03-specification/design/HIFI_US002-003_v1.0.html 03-specification/design/FIGMA_US002-003_v1.0/png` |
+| 2 | Chạy lại phép kiểm máy đầy đủ (T1/T2/H1–H5/S1) trên bản HIFI/SVG v1.1 mới nhất — lần chạy 2026-09-09 (chép ở `DSPEC` §6) thực hiện trên bản trước khi sửa mobile | xem lệnh ở `DSPEC_US002-003_v1.0.md` §6 |
+
+## Kiểm tra trước khi giao
+
+```bash
+node .claude/skills/ba-design/scripts/design-check.mjs --tokens 00-index/ds/tokens.json --svg-dir 03-specification/design/FIGMA_US002-003_v1.0
+```
+
+Kết quả chạy 2026-09-09 (người điều phối, trên bản SVG trước khi bổ sung F01/C07 dòng "Balo du lịch"):
+
+```
+✅ S1  SVG: 2 file, màu ⊆ token
+✅ S1  SVG phủ desktop+mobile cho 1 SCR
+```
+
+Tự kiểm tay bản v1.1 (sau khi bổ sung component còn thiếu): 9 mã màu dùng trong hai SVG đều khớp `tokens.json` (`#F6F7F9`, `#1B1F24`, `#5B6472`, `#FFFFFF`, `#D5DAE1`, `#EEF1F5`, `#767F8C`, `#B42318`, `#2456A6`); tập id `C02, C03, C04, C05, C06, F01, C07, C08, C09, C11` ⊆ tập `data-c`/`data-f` của `HIFI_US002-003_v1.0.html` (14 ID: `C01`…`C13`, `F01`) — **khuyến nghị chạy lại lệnh trên bằng máy để có kết quả chính thức cho bản v1.1**.
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/SCR-04.desktop.svg b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/SCR-04.desktop.svg
new file mode 100644
index 0000000..d24a939
--- /dev/null
+++ b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/SCR-04.desktop.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  SCR-04.desktop.svg — khung Giỏ hàng (US-002/US-003), trạng thái default, khung nhìn desktop (1440×900).
+  Nguồn: HIFI_US002-003_v1.0.html#SCR-04 · SRS_US002-003_v1.0.md §2.A.3.1/§4.2 · WF_US002-003_v1.0.md §3.1.1/§3.1.2 · 00-index/ds/tokens.json
+  Màu là mã nguyên văn từ tokens.json (Figma không đọc biến CSS) kèm data-token để tra ngược.
+  Layer <g id="Zn"> theo WF §3.1.1; <g id="Cnn"> theo SRS §2.A.3.1. Text nguyên văn SRS §4.2 (số liệu minh hoạ không phải một phần khoá i18n).
+  Độ tin cậy visual: 🔴 (DS_e-commerce §0 — token placeholder trung tính, chưa có brand/design system, OQ-022).
+  v1.1 (2026-09-09): bổ sung F01/C07 còn thiếu cho dòng "Balo du lịch" (Shop B) — theo ghi chú người duyệt, SVG phải phản chiếu đủ C-id của HIFI cho mỗi dòng hiển thị.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900" font-family="Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" font-size="14" data-scr="SCR-04" data-view="desktop" data-state="default" data-source="HIFI_US002-003_v1.0.html#SCR-04">
+  <title>SCR-04 · Giỏ hàng · desktop · default</title>
+
+  <rect id="canvas" width="1440" height="900" fill="#F6F7F9" data-token="color.bg.canvas"/>
+
+  <g id="Z1" data-name="Header màn hình" transform="translate(120 48)">
+    <text x="0" y="28" font-size="24" font-weight="600" fill="#1B1F24" data-token="color.text.primary" data-key="cart.title">Giỏ hàng của bạn</text>
+    <text x="230" y="28" font-size="16" fill="#5B6472" data-token="color.text.secondary" data-key="cart.itemCount">(5 sản phẩm — minh hoạ)</text>
+  </g>
+
+  <g id="Z2" data-name="Danh sách nhóm seller" transform="translate(120 104)">
+
+    <!-- Nhóm seller Shop A -->
+    <g data-name="Card nhóm seller">
+      <rect width="800" height="164" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
+      <g id="C02"><text x="16" y="30" font-size="16" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Shop A</text></g>
+
+      <g data-name="CartItem 1" transform="translate(16 44)">
+        <g id="C03"><rect width="64" height="64" rx="4" fill="#EEF1F5" stroke="#D5DAE1" data-token="color.bg.subtle"/></g>
+        <g transform="translate(76 4)">
+          <text id="C04" y="16" fill="#1B1F24" data-token="color.text.primary">Áo thun basic</text>
+          <text id="C05" y="36" font-size="12" fill="#5B6472" data-token="color.text.secondary">Size M, Đỏ</text>
+          <text id="C06" y="54" font-size="12" fill="#5B6472" data-token="color.text.secondary">100.000 ₫</text>
+        </g>
+        <g id="F01" transform="translate(560 12)">
+          <rect width="112" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
+          <text x="20" y="23" fill="#1B1F24" data-token="color.text.primary">− 2 +</text>
+        </g>
+        <g id="C07" transform="translate(690 12)">
+          <rect width="80" height="36" rx="4" fill="#B42318" data-token="color.status.danger"/>
+          <text x="40" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.delete">Xoá</text>
+        </g>
+      </g>
+
+      <g id="C08" transform="translate(600 132)"><text text-anchor="end" x="184" fill="#1B1F24" data-token="color.text.primary">Tạm tính: 250.000 ₫</text></g>
+    </g>
+
+    <!-- Nhóm seller Shop B -->
+    <g transform="translate(0 180)" data-name="Card nhóm seller">
+      <rect width="800" height="164" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
+      <g id="C02"><text x="16" y="30" font-size="16" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Shop B</text></g>
+      <g data-name="CartItem 2" transform="translate(16 44)">
+        <g id="C03"><rect width="64" height="64" rx="4" fill="#EEF1F5" stroke="#D5DAE1" data-token="color.bg.subtle"/></g>
+        <g transform="translate(76 4)">
+          <text id="C04" y="16" fill="#1B1F24" data-token="color.text.primary">Balo du lịch</text>
+          <text id="C05" y="36" font-size="12" fill="#5B6472" data-token="color.text.secondary">Đen</text>
+          <text id="C06" y="54" font-size="12" fill="#5B6472" data-token="color.text.secondary">200.000 ₫</text>
+        </g>
+        <g id="F01" transform="translate(560 12)">
+          <rect width="112" height="36" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
+          <text x="20" y="23" fill="#1B1F24" data-token="color.text.primary">− 1 +</text>
+        </g>
+        <g id="C07" transform="translate(690 12)">
+          <rect width="80" height="36" rx="4" fill="#B42318" data-token="color.status.danger"/>
+          <text x="40" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.delete">Xoá</text>
+        </g>
+      </g>
+      <g id="C08" transform="translate(600 132)"><text text-anchor="end" x="184" fill="#1B1F24" data-token="color.text.primary">Tạm tính: 260.000 ₫</text></g>
+    </g>
+
+  </g>
+
+  <g id="Z3" data-name="Tổng kết (sidebar desktop / footer mobile)" transform="translate(960 104)">
+    <rect width="360" height="120" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
+    <g id="C09"><text x="16" y="36" font-size="20" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Tổng cộng: 510.000 ₫</text></g>
+    <g id="C11" transform="translate(16 56)">
+      <rect width="328" height="36" rx="4" fill="#2456A6" data-token="color.brand.primary"/>
+      <text x="164" y="23" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.checkout">Tiến hành Checkout</text>
+    </g>
+  </g>
+
+</svg>
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/SCR-04.mobile.svg b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/SCR-04.mobile.svg
new file mode 100644
index 0000000..4c36542
--- /dev/null
+++ b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/SCR-04.mobile.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  SCR-04.mobile.svg — khung Giỏ hàng (US-002/US-003), trạng thái default, khung nhìn mobile (390×844).
+  Z3 (Tổng kết) hiển thị dạng footer sticky đáy màn hình theo WF §2/§3.1.1 (khác desktop: sidebar bên phải).
+  Nguồn/quy tắc màu — xem SCR-04.desktop.svg. Độ tin cậy visual: 🔴 (OQ-022).
+  v1.1 (2026-09-09): bổ sung F01/C07 còn thiếu cho dòng "Balo du lịch" (Shop B), đặt ở hàng riêng dưới khối text
+  (khớp bản sửa lỗi bố cục mobile của HIFI — ds-components v1.1, .ds-m-full — xem DSPEC §2.1).
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844" font-family="Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" font-size="13" data-scr="SCR-04" data-view="mobile" data-state="default" data-source="HIFI_US002-003_v1.0.html#SCR-04">
+  <title>SCR-04 · Giỏ hàng · mobile · default</title>
+
+  <rect id="canvas" width="390" height="844" fill="#F6F7F9" data-token="color.bg.canvas"/>
+
+  <g id="Z1" data-name="Header màn hình" transform="translate(16 20)">
+    <text x="0" y="24" font-size="18" font-weight="600" fill="#1B1F24" data-token="color.text.primary" data-key="cart.title">Giỏ hàng của bạn</text>
+    <text x="0" y="42" font-size="12" fill="#5B6472" data-token="color.text.secondary" data-key="cart.itemCount">(5 sản phẩm — minh hoạ)</text>
+  </g>
+
+  <g id="Z2" data-name="Danh sách nhóm seller" transform="translate(16 76)">
+
+    <g data-name="Card nhóm seller">
+      <rect width="358" height="164" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
+      <g id="C02"><text x="12" y="26" font-size="14" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Shop A</text></g>
+      <g data-name="CartItem 1" transform="translate(12 38)">
+        <g id="C03"><rect width="56" height="56" rx="4" fill="#EEF1F5" stroke="#D5DAE1" data-token="color.bg.subtle"/></g>
+        <g transform="translate(64 2)">
+          <text id="C04" y="14" fill="#1B1F24" data-token="color.text.primary">Áo thun basic</text>
+          <text id="C05" y="32" font-size="11" fill="#5B6472" data-token="color.text.secondary">Size M, Đỏ</text>
+          <text id="C06" y="48" font-size="11" fill="#5B6472" data-token="color.text.secondary">100.000 ₫</text>
+        </g>
+      </g>
+      <g id="F01" transform="translate(12 104)">
+        <rect width="100" height="44" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
+        <text x="18" y="27" fill="#1B1F24" data-token="color.text.primary">− 2 +</text>
+      </g>
+      <g id="C07" transform="translate(246 104)">
+        <rect width="100" height="44" rx="4" fill="#B42318" data-token="color.status.danger"/>
+        <text x="50" y="27" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.delete">Xoá</text>
+      </g>
+    </g>
+
+    <g id="C08" transform="translate(174 250)"><text text-anchor="end" x="184" fill="#1B1F24" data-token="color.text.primary">Tạm tính: 250.000 ₫</text></g>
+
+    <g transform="translate(0 280)" data-name="Card nhóm seller">
+      <rect width="358" height="164" rx="8" fill="#FFFFFF" stroke="#D5DAE1" data-token="color.border.default"/>
+      <g id="C02"><text x="12" y="26" font-size="14" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Shop B</text></g>
+      <g data-name="CartItem 2" transform="translate(12 38)">
+        <g id="C03"><rect width="56" height="56" rx="4" fill="#EEF1F5" stroke="#D5DAE1" data-token="color.bg.subtle"/></g>
+        <g transform="translate(64 2)">
+          <text id="C04" y="14" fill="#1B1F24" data-token="color.text.primary">Balo du lịch</text>
+          <text id="C05" y="32" font-size="11" fill="#5B6472" data-token="color.text.secondary">Đen</text>
+          <text id="C06" y="48" font-size="11" fill="#5B6472" data-token="color.text.secondary">200.000 ₫</text>
+        </g>
+      </g>
+      <g id="F01" transform="translate(12 104)">
+        <rect width="100" height="44" rx="4" fill="#FFFFFF" stroke="#767F8C" data-token="color.border.strong"/>
+        <text x="18" y="27" fill="#1B1F24" data-token="color.text.primary">− 1 +</text>
+      </g>
+      <g id="C07" transform="translate(246 104)">
+        <rect width="100" height="44" rx="4" fill="#B42318" data-token="color.status.danger"/>
+        <text x="50" y="27" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.delete">Xoá</text>
+      </g>
+    </g>
+    <g id="C08" transform="translate(174 530)"><text text-anchor="end" x="184" fill="#1B1F24" data-token="color.text.primary">Tạm tính: 260.000 ₫</text></g>
+  </g>
+
+  <!-- Z3 — footer sticky đáy màn hình (mobile khác desktop: nằm dưới thay vì sidebar phải) -->
+  <g id="Z3" data-name="Tổng kết (footer mobile)" transform="translate(0 764)">
+    <rect width="390" height="80" fill="#FFFFFF" data-token="color.bg.surface"/>
+    <line x1="0" y1="0.5" x2="390" y2="0.5" stroke="#D5DAE1" data-token="color.border.default"/>
+    <g id="C09"><text x="16" y="30" font-size="16" font-weight="600" fill="#1B1F24" data-token="color.text.primary">Tổng cộng: 510.000 ₫</text></g>
+    <g id="C11" transform="translate(16 40)">
+      <rect width="358" height="30" rx="4" fill="#2456A6" data-token="color.brand.primary"/>
+      <text x="179" y="20" text-anchor="middle" font-weight="600" fill="#FFFFFF" data-token="color.text.inverse" data-key="btn.checkout">Tiến hành Checkout</text>
+    </g>
+  </g>
+
+</svg>
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.default.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.default.png
new file mode 100644
index 0000000..94fcdab
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.default.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.empty-none.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.empty-none.png
new file mode 100644
index 0000000..8ca5bba
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.empty-none.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.error.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.error.png
new file mode 100644
index 0000000..210df96
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.error.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.loading.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.loading.png
new file mode 100644
index 0000000..40fa66c
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.desktop.loading.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.default.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.default.png
new file mode 100644
index 0000000..96f9839
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.default.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.empty-none.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.empty-none.png
new file mode 100644
index 0000000..7f345f9
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.empty-none.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.error.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.error.png
new file mode 100644
index 0000000..a867be2
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.error.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.loading.png b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.loading.png
new file mode 100644
index 0000000..3234eac
Binary files /dev/null and b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/png/SCR-04.mobile.loading.png differ
diff --git a/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/tokens.dtcg.json b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/tokens.dtcg.json
new file mode 100644
index 0000000..3402aa4
--- /dev/null
+++ b/ba-output/e-commerce/03-specification/design/FIGMA_US002-003_v1.0/tokens.dtcg.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$description": "DS_e-commerce — design token theo chuẩn W3C DTCG. Nguồn sự thật duy nhất về màu/chữ/khoảng cách; tokens.css và khối :root trong HIFI_*.html phải sinh từ file này (kiểm bằng scripts/design-check.mjs). Giá trị bên dưới là PLACEHOLDER trung tính của template ba-design — dự án chưa có brand guideline (SAD §7.0: 'không có brand guideline cố định') và chưa chọn design system tham chiếu (OQ-022). KHÔNG coi đây là đề xuất nhận diện đã duyệt — xem DS_e-commerce_v1.0.md §0.",
+  "color": {
+    "bg": {
+      "canvas":  { "$type": "color", "$value": "#F6F7F9", "$description": "Nền trang" },
+      "surface": { "$type": "color", "$value": "#FFFFFF", "$description": "Nền card/bảng/modal" },
+      "subtle":  { "$type": "color", "$value": "#EEF1F5", "$description": "Header bảng, vùng phụ" }
+    },
+    "border": {
+      "default": { "$type": "color", "$value": "#D5DAE1" },
+      "strong":  { "$type": "color", "$value": "#767F8C" }
+    },
+    "text": {
+      "primary":   { "$type": "color", "$value": "#1B1F24" },
+      "secondary": { "$type": "color", "$value": "#5B6472" },
+      "disabled":  { "$type": "color", "$value": "#9AA3AF", "$description": "Miễn kiểm tương phản (WCAG 1.4.3 loại trừ thành phần vô hiệu)" },
+      "inverse":   { "$type": "color", "$value": "#FFFFFF" }
+    },
+    "brand": {
+      "primary":        { "$type": "color", "$value": "#2456A6", "$description": "Nút chính, liên kết, focus ring — placeholder trung tính, chưa có brand guideline (OQ-022)" },
+      "primary-hover":  { "$type": "color", "$value": "#1C468A" },
+      "primary-subtle": { "$type": "color", "$value": "#E7EEF9", "$description": "Nền badge/hàng được chọn" }
+    },
+    "status": {
+      "danger":         { "$type": "color", "$value": "#B42318" },
+      "danger-subtle":  { "$type": "color", "$value": "#FDECEA" },
+      "success":        { "$type": "color", "$value": "#1E7B45" },
+      "success-subtle": { "$type": "color", "$value": "#E6F4EC" },
+      "warning":        { "$type": "color", "$value": "#B7791F" },
+      "warning-subtle": { "$type": "color", "$value": "#FFF4DE" }
+    },
+    "focus": { "ring": { "$type": "color", "$value": "#2456A6" } }
+  },
+  "font": {
+    "family": {
+      "base": { "$type": "fontFamily", "$value": ["Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"], "$description": "PLACEHOLDER — system stack giữ nguyên theo chỉ đạo (không có font brand); ZH/KO/JA cần rà lại fallback font khi có bản dịch (OQ-023)" },
+      "mono": { "$type": "fontFamily", "$value": ["SFMono-Regular", "Consolas", "Menlo", "monospace"] }
+    },
+    "size": {
+      "xs":  { "$type": "dimension", "$value": "12px" },
+      "sm":  { "$type": "dimension", "$value": "14px" },
+      "md":  { "$type": "dimension", "$value": "16px" },
+      "lg":  { "$type": "dimension", "$value": "20px" },
+      "xl":  { "$type": "dimension", "$value": "24px" },
+      "2xl": { "$type": "dimension", "$value": "32px" }
+    },
+    "weight": {
+      "regular":  { "$type": "fontWeight", "$value": 400 },
+      "semibold": { "$type": "fontWeight", "$value": 600 }
+    },
+    "line-height": {
+      "tight":  { "$type": "number", "$value": 1.25 },
+      "normal": { "$type": "number", "$value": 1.5 }
+    }
+  },
+  "space": {
+    "1": { "$type": "dimension", "$value": "4px" },
+    "2": { "$type": "dimension", "$value": "8px" },
+    "3": { "$type": "dimension", "$value": "12px" },
+    "4": { "$type": "dimension", "$value": "16px" },
+    "6": { "$type": "dimension", "$value": "24px" },
+    "8": { "$type": "dimension", "$value": "32px" },
+    "12": { "$type": "dimension", "$value": "48px" }
+  },
+  "radius": {
+    "sm":   { "$type": "dimension", "$value": "4px" },
+    "md":   { "$type": "dimension", "$value": "8px" },
+    "pill": { "$type": "dimension", "$value": "999px" }
+  },
+  "shadow": {
+    "sm": { "$type": "shadow", "$value": { "color": "#1B1F2414", "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px" } },
+    "md": { "$type": "shadow", "$value": { "color": "#1B1F2426", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "0px" } }
+  },
+  "size": {
+    "control": {
+      "desktop": { "$type": "dimension", "$value": "36px", "$description": "Chiều cao nút/ô nhập desktop" },
+      "touch":   { "$type": "dimension", "$value": "44px", "$description": "Chiều cao tối thiểu trên mobile (hit target ≥ 44px)" }
+    },
+    "icon": { "$type": "dimension", "$value": "20px" },
+    "content-max": { "$type": "dimension", "$value": "1200px", "$description": "PLACEHOLDER — UICONV §1 chưa chốt max-width thật (OQ-018), giữ giá trị template" }
+  },
+  "breakpoint": {
+    "tablet":  { "$type": "dimension", "$value": "768px",  "$description": "PLACEHOLDER — UICONV §1 chưa chốt ngưỡng thật (OQ-018), giữ giá trị template" },
+    "desktop": { "$type": "dimension", "$value": "1024px", "$description": "PLACEHOLDER — UICONV §1 chưa chốt ngưỡng thật (OQ-018), giữ giá trị template" }
+  },
+  "$extensions": {
+    "ba": {
+      "project": "e-commerce",
+      "version": "1.0",
+      "source": "UICONV_e-commerce_v1.0.md v1.1 §0/§1/§8/§11 (chưa chốt design system — OQ-022; chưa chốt breakpoint/grid — OQ-018) · brand guideline: chưa có (SAD §7.0) — placeholder trung tính của templates/tokens.json",
+      "contrastPairs": [
+        { "fg": "color.text.primary",   "bg": "color.bg.surface",        "min": 4.5, "use": "Chữ thường trên nền card (VD tên sản phẩm C04, biến thể C05)" },
+        { "fg": "color.text.primary",   "bg": "color.bg.canvas",         "min": 4.5, "use": "Chữ thường trên nền trang" },
+        { "fg": "color.text.secondary", "bg": "color.bg.surface",        "min": 4.5, "use": "Hint, tên gian hàng phụ" },
+        { "fg": "color.text.inverse",   "bg": "color.brand.primary",     "min": 4.5, "use": "Nhãn nút chính (C11 Tiến hành Checkout)" },
+        { "fg": "color.text.inverse",   "bg": "color.status.danger",     "min": 4.5, "use": "Nhãn nút nguy hiểm (C07 Xoá)" },
+        { "fg": "color.brand.primary",  "bg": "color.bg.surface",        "min": 4.5, "use": "Liên kết" },
+        { "fg": "color.status.danger",  "bg": "color.bg.surface",        "min": 4.5, "use": "Message lỗi dưới field (E-CART-0002)" },
+        { "fg": "color.status.danger",  "bg": "color.status.danger-subtle", "min": 4.5, "use": "Banner lỗi tải/cập nhật (C12, E-CART-0003/0006)" },
+        { "fg": "color.text.primary",   "bg": "color.brand.primary-subtle", "min": 4.5, "use": "Chữ trên badge/hàng chọn" },
+        { "fg": "color.border.strong",  "bg": "color.bg.surface",        "min": 3.0, "use": "Viền ô nhập / bộ đếm F01 (WCAG 1.4.11 non-text)" }
+      ]
+    }
+  }
+}
diff --git a/ba-output/e-commerce/03-specification/design/HIFI_US002-003_v1.0.html b/ba-output/e-commerce/03-specification/design/HIFI_US002-003_v1.0.html
new file mode 100644
index 0000000..f39b9c5
--- /dev/null
+++ b/ba-output/e-commerce/03-specification/design/HIFI_US002-003_v1.0.html
@@ -0,0 +1,468 @@
+<!--
+  HIFI_US002-003_v1.0.html — mockup hi-fi tự chứa, sinh bởi skill ba-design (activity `hifi`), US-002 (xem) + US-003 (sửa/xoá).
+
+  Nguồn hành vi: SRS_US002-003_v1.0.md §2.A.3 (SCR-04 Giỏ hàng) · Nguồn bố cục: WF_US002-003_v1.0.md §3.1 (+ .html)
+  Nguồn token/component: 00-index/DS_e-commerce_v1.0.md + ds/tokens.css + ds/components.html
+  Độ tin cậy visual: 🔴 (DS §0 — token placeholder trung tính, chưa có brand/design system — OQ-022)
+
+  <style> = khối :root của ds/tokens.css + khối ds-components.css NGUYÊN VĂN (bắt buộc, kiểm bằng design-check.mjs H1)
+  + phần "Khung xem HIFI" giữ nguyên từ template + một khối CSS phụ nhỏ riêng cho bố cục Giỏ hàng (chỉ dùng biến --ds-*,
+  không phải một phần của khối ds-components nên không ảnh hưởng phép kiểm H1).
+
+  Thành phần chỉ có ở prototype mà SRS chưa có (checkbox chọn dòng, badge hết hàng, badge giá đổi — xem WF §5 #1-#3)
+  KHÔNG được vẽ ở đây (khác WF, HIFI không cần minh hoạ lại phần "chỉ ở prototype" vì đó không phải hi-fi của SRS).
+
+  v1.1 (2026-09-09) — sửa theo ghi chú người duyệt sau khi chạy render-figma.sh: bố cục mobile 390px làm vỡ dòng
+  CartItem (tên sản phẩm bị bẻ chữ, stepper chồng lên text) — nâng khối ds-components lên v1.1 (thêm tiện ích
+  .ds-m-full) và bọc khối text (C04–C06) trong flex:1 1 160px, bọc khối thao tác (F01+C07+lỗi/spinner của dòng)
+  trong <div class="ds-row ds-m-full ds-row--end"> để rơi xuống hàng riêng ở mobile. Xem DSPEC §2 (redline mobile).
+-->
+<!doctype html>
+<html lang="vi">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>HIFI — US-002, US-003 — Giỏ hàng (SCR-04)</title>
+<style>
+:root{
+  --ds-color-bg-canvas:#F6F7F9;
+  --ds-color-bg-surface:#FFFFFF;
+  --ds-color-bg-subtle:#EEF1F5;
+  --ds-color-border-default:#D5DAE1;
+  --ds-color-border-strong:#767F8C;
+  --ds-color-text-primary:#1B1F24;
+  --ds-color-text-secondary:#5B6472;
+  --ds-color-text-disabled:#9AA3AF;
+  --ds-color-text-inverse:#FFFFFF;
+  --ds-color-brand-primary:#2456A6;
+  --ds-color-brand-primary-hover:#1C468A;
+  --ds-color-brand-primary-subtle:#E7EEF9;
+  --ds-color-status-danger:#B42318;
+  --ds-color-status-danger-subtle:#FDECEA;
+  --ds-color-status-success:#1E7B45;
+  --ds-color-status-success-subtle:#E6F4EC;
+  --ds-color-status-warning:#B7791F;
+  --ds-color-status-warning-subtle:#FFF4DE;
+  --ds-color-focus-ring:#2456A6;
+  --ds-font-family-base:"Segoe UI","Roboto","Helvetica Neue","Arial",sans-serif;
+  --ds-font-family-mono:"SFMono-Regular","Consolas","Menlo",monospace;
+  --ds-font-size-xs:12px;
+  --ds-font-size-sm:14px;
+  --ds-font-size-md:16px;
+  --ds-font-size-lg:20px;
+  --ds-font-size-xl:24px;
+  --ds-font-size-2xl:32px;
+  --ds-font-weight-regular:400;
+  --ds-font-weight-semibold:600;
+  --ds-font-line-height-tight:1.25;
+  --ds-font-line-height-normal:1.5;
+  --ds-space-1:4px;
+  --ds-space-2:8px;
+  --ds-space-3:12px;
+  --ds-space-4:16px;
+  --ds-space-6:24px;
+  --ds-space-8:32px;
+  --ds-space-12:48px;
+  --ds-radius-sm:4px;
+  --ds-radius-md:8px;
+  --ds-radius-pill:999px;
+  --ds-shadow-sm:0px 1px 2px 0px #1B1F2414;
+  --ds-shadow-md:0px 4px 12px 0px #1B1F2426;
+  --ds-size-control-desktop:36px;
+  --ds-size-control-touch:44px;
+  --ds-size-icon:20px;
+  --ds-size-content-max:1200px;
+  --ds-breakpoint-tablet:768px;
+  --ds-breakpoint-desktop:1024px;
+}
+/* ds-components v1.1 — BEGIN
+   CSS component của DS_<PROJECT>. Chỉ dùng biến --ds-* (tokens.css); cấm mã màu/px thô ngoài khối này.
+   Từ vựng lớp = cột "Kiểu trình bày" của UICONV §11 (xem DS §3). Khối này được chép NGUYÊN VĂN vào
+   components.html và mọi HIFI_*.html — kiểm khớp bằng scripts/design-check.mjs. */
+*,*::before,*::after{box-sizing:border-box}
+html{font-family:var(--ds-font-family-base);font-size:var(--ds-font-size-sm);line-height:var(--ds-font-line-height-normal);color:var(--ds-color-text-primary);background:var(--ds-color-bg-canvas);-webkit-font-smoothing:antialiased}
+body{margin:0}
+h1,h2,h3{margin:0;line-height:var(--ds-font-line-height-tight);font-weight:var(--ds-font-weight-semibold)}
+h1{font-size:var(--ds-font-size-xl)}h2{font-size:var(--ds-font-size-lg)}h3{font-size:var(--ds-font-size-md)}
+a,.ds-link{color:var(--ds-color-brand-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
+a:hover,.ds-link:hover{color:var(--ds-color-brand-primary-hover)}
+:focus-visible{outline:2px solid var(--ds-color-focus-ring);outline-offset:2px}
+.ds-muted{color:var(--ds-color-text-secondary)}
+.ds-small{font-size:var(--ds-font-size-xs)}
+.ds-icon{width:var(--ds-size-icon);height:var(--ds-size-icon);flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
+.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+
+/* Layout */
+.ds-page{max-width:var(--ds-size-content-max);margin:0 auto;padding:var(--ds-space-6) var(--ds-space-4);display:grid;gap:var(--ds-space-4)}
+.ds-row{display:flex;gap:var(--ds-space-2);align-items:center;flex-wrap:wrap}
+.ds-row--between{justify-content:space-between}.ds-row--end{justify-content:flex-end}
+.ds-stack{display:grid;gap:var(--ds-space-3)}
+.ds-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--ds-space-4);align-items:start}
+.ds-header{position:sticky;top:0;z-index:5;background:var(--ds-color-bg-surface);border-bottom:1px solid var(--ds-color-border-default);padding:var(--ds-space-3) var(--ds-space-4);display:flex;align-items:center;gap:var(--ds-space-4);min-height:56px}
+.ds-breadcrumb{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-breadcrumb a{text-decoration:none}
+
+/* Nút — UICONV §11: nút chính / nút phụ / nút nguy hiểm / liên kết */
+.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);height:var(--ds-size-control-desktop);padding:0 var(--ds-space-4);border-radius:var(--ds-radius-sm);border:1px solid transparent;font:inherit;font-weight:var(--ds-font-weight-semibold);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s}
+.ds-btn--primary{background:var(--ds-color-brand-primary);color:var(--ds-color-text-inverse)}
+.ds-btn--primary:hover{background:var(--ds-color-brand-primary-hover)}
+.ds-btn--secondary{background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);border-color:var(--ds-color-border-strong)}
+.ds-btn--secondary:hover{background:var(--ds-color-bg-subtle)}
+.ds-btn--danger{background:var(--ds-color-status-danger);color:var(--ds-color-text-inverse)}
+.ds-btn--ghost{background:transparent;color:var(--ds-color-brand-primary)}
+.ds-btn--icon{width:var(--ds-size-control-desktop);padding:0}
+.ds-btn[aria-disabled="true"],.ds-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
+.ds-btn.is-loading{pointer-events:none}
+.ds-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-spin .8s linear infinite;flex:none}
+@keyframes ds-spin{to{transform:rotate(360deg)}}
+
+/* Field — UICONV §4: nhãn trên field, * sau nhãn, lỗi dưới field thay hint */
+.ds-field{display:grid;gap:var(--ds-space-1)}
+.ds-field__label{font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);color:var(--ds-color-text-primary)}
+.ds-field__label .ds-req{color:var(--ds-color-status-danger);margin-left:2px}
+.ds-field__hint{font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-field__error{font-size:var(--ds-font-size-xs);color:var(--ds-color-status-danger);display:flex;gap:var(--ds-space-1);align-items:center}
+.ds-input,.ds-select,.ds-textarea{width:100%;height:var(--ds-size-control-desktop);padding:0 var(--ds-space-3);border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-surface);color:var(--ds-color-text-primary);font:inherit}
+.ds-textarea{height:auto;min-height:88px;padding:var(--ds-space-2) var(--ds-space-3)}
+.ds-input::placeholder{color:var(--ds-color-text-secondary)}
+.ds-input:hover,.ds-select:hover{border-color:var(--ds-color-text-secondary)}
+.ds-input:focus,.ds-select:focus{border-color:var(--ds-color-brand-primary);outline:2px solid var(--ds-color-focus-ring);outline-offset:0}
+.ds-input.is-invalid,.ds-select.is-invalid{border-color:var(--ds-color-status-danger)}
+.ds-input[disabled],.ds-select[disabled]{background:var(--ds-color-bg-subtle);color:var(--ds-color-text-disabled);cursor:not-allowed}
+.ds-input[readonly]{border-color:transparent;background:transparent;padding-left:0}
+.ds-input-wrap{position:relative}
+.ds-input-wrap .ds-icon{position:absolute;left:var(--ds-space-3);top:50%;transform:translateY(-50%);color:var(--ds-color-text-secondary)}
+.ds-input-wrap .ds-input{padding-left:calc(var(--ds-space-3) + var(--ds-size-icon) + var(--ds-space-2))}
+.ds-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6472' stroke-width='1.75'><path d='m4 6 4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right var(--ds-space-3) center;padding-right:calc(var(--ds-space-3) + 24px)}
+.ds-check{display:inline-flex;align-items:center;gap:var(--ds-space-2);cursor:pointer;min-height:var(--ds-size-control-desktop)}
+.ds-check input{width:18px;height:18px;margin:0;accent-color:var(--ds-color-brand-primary)}
+.ds-switch{position:relative;width:40px;height:22px;border-radius:var(--ds-radius-pill);background:var(--ds-color-border-strong);display:inline-block;flex:none}
+.ds-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ds-color-bg-surface)}
+.ds-switch[aria-checked="true"]{background:var(--ds-color-brand-primary)}
+.ds-switch[aria-checked="true"]::after{left:20px}
+.ds-stepper{display:inline-flex;border:1px solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);height:var(--ds-size-control-desktop);overflow:hidden}
+.ds-stepper button{width:var(--ds-size-control-desktop);border:0;background:var(--ds-color-bg-surface);font:inherit;cursor:pointer;color:var(--ds-color-text-primary)}
+.ds-stepper input{width:48px;text-align:center;border:0;border-left:1px solid var(--ds-color-border-default);border-right:1px solid var(--ds-color-border-default);font:inherit}
+
+/* Bảng / Card — UICONV §3, §11 */
+.ds-table-wrap{overflow-x:auto;border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-surface)}
+.ds-table{width:100%;border-collapse:collapse;font-size:var(--ds-font-size-sm)}
+.ds-table th,.ds-table td{padding:var(--ds-space-3) var(--ds-space-4);text-align:left;border-bottom:1px solid var(--ds-color-border-default);vertical-align:middle}
+.ds-table th{background:var(--ds-color-bg-subtle);font-weight:var(--ds-font-weight-semibold);font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary);white-space:nowrap}
+.ds-table th[aria-sort]{cursor:pointer}
+.ds-table tbody tr:hover{background:var(--ds-color-bg-canvas)}
+.ds-table tbody tr[aria-selected="true"]{background:var(--ds-color-brand-primary-subtle)}
+.ds-table tbody tr:last-child td{border-bottom:0}
+.ds-table td.ds-num{text-align:right;font-variant-numeric:tabular-nums}
+.ds-card{background:var(--ds-color-bg-surface);border:1px solid var(--ds-color-border-default);border-radius:var(--ds-radius-md);padding:var(--ds-space-4);display:grid;gap:var(--ds-space-2)}
+.ds-cards{display:grid;gap:var(--ds-space-3)}
+.ds-badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--ds-space-2);border-radius:var(--ds-radius-pill);font-size:var(--ds-font-size-xs);font-weight:var(--ds-font-weight-semibold);background:var(--ds-color-bg-subtle);color:var(--ds-color-text-primary)}
+.ds-badge--info{background:var(--ds-color-brand-primary-subtle)}
+.ds-badge--success{background:var(--ds-color-status-success-subtle);color:var(--ds-color-status-success)}
+.ds-badge--warning{background:var(--ds-color-status-warning-subtle);color:var(--ds-color-status-warning)}
+.ds-badge--danger{background:var(--ds-color-status-danger-subtle);color:var(--ds-color-status-danger)}
+.ds-tabs{display:flex;gap:var(--ds-space-4);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-tab{padding:var(--ds-space-2) 0;border-bottom:2px solid transparent;color:var(--ds-color-text-secondary);cursor:pointer;font-weight:var(--ds-font-weight-semibold)}
+.ds-tab[aria-selected="true"]{color:var(--ds-color-brand-primary);border-bottom-color:var(--ds-color-brand-primary)}
+.ds-pagination{display:flex;gap:var(--ds-space-2);align-items:center;font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary)}
+.ds-price{font-variant-numeric:tabular-nums;font-weight:var(--ds-font-weight-semibold)}
+.ds-thumb{width:64px;height:64px;border-radius:var(--ds-radius-sm);background:var(--ds-color-bg-subtle);border:1px solid var(--ds-color-border-default);display:grid;place-items:center;color:var(--ds-color-text-secondary);flex:none}
+
+/* Phản hồi hệ thống — UICONV §5, §6 */
+.ds-toast{position:fixed;top:var(--ds-space-4);right:var(--ds-space-4);z-index:20;min-width:280px;max-width:420px;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);background:var(--ds-color-text-primary);color:var(--ds-color-text-inverse);box-shadow:var(--ds-shadow-md);display:flex;gap:var(--ds-space-3);align-items:flex-start}
+.ds-toast--error{background:var(--ds-color-status-danger)}
+.ds-banner{display:flex;gap:var(--ds-space-3);align-items:flex-start;padding:var(--ds-space-3) var(--ds-space-4);border-radius:var(--ds-radius-md);border:1px solid var(--ds-color-border-default);background:var(--ds-color-bg-subtle)}
+.ds-banner--error{background:var(--ds-color-status-danger-subtle);border-color:var(--ds-color-status-danger);color:var(--ds-color-status-danger)}
+.ds-banner--warning{background:var(--ds-color-status-warning-subtle);border-color:var(--ds-color-status-warning)}
+.ds-empty{display:grid;justify-items:center;text-align:center;gap:var(--ds-space-3);padding:var(--ds-space-12) var(--ds-space-4);color:var(--ds-color-text-secondary)}
+.ds-empty__illus{width:120px;height:88px;color:var(--ds-color-border-strong)}
+.ds-empty--filter{padding:var(--ds-space-8) var(--ds-space-4)}
+.ds-skeleton{height:14px;border-radius:var(--ds-radius-sm);background:linear-gradient(90deg,var(--ds-color-bg-subtle),var(--ds-color-bg-canvas),var(--ds-color-bg-subtle));background-size:200% 100%;animation:ds-shimmer 1.2s infinite}
+@keyframes ds-shimmer{to{background-position:-200% 0}}
+.ds-modal-backdrop{position:fixed;inset:0;background:#1B1F2480;display:grid;place-items:center;z-index:10;padding:var(--ds-space-4)}
+.ds-modal{width:100%;max-width:520px;background:var(--ds-color-bg-surface);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-md);display:grid}
+.ds-modal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--ds-space-4) var(--ds-space-6);border-bottom:1px solid var(--ds-color-border-default)}
+.ds-modal__body{padding:var(--ds-space-6);display:grid;gap:var(--ds-space-4)}
+.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--ds-space-2);padding:var(--ds-space-4) var(--ds-space-6);border-top:1px solid var(--ds-color-border-default)}
+.ds-status-page{display:grid;justify-items:center;gap:var(--ds-space-3);padding:var(--ds-space-12);text-align:center}
+
+/* Trạng thái ẩn/khoá/read-only — W7 */
+[data-vis="hidden"]{display:none!important}
+[data-vis="disabled"]{opacity:.45;pointer-events:none}
+[data-vis="readonly"] .ds-input{border-color:transparent;background:transparent}
+
+/* Responsive — breakpoint theo UICONV §1; body[data-view] ép khung nhìn khi xem trong HIFI */
+@media (max-width:1023px){.ds-cols{grid-template-columns:1fr}}
+@media (max-width:767px){
+  .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+  .ds-btn{height:var(--ds-size-control-touch)}
+  .ds-input,.ds-select{height:var(--ds-size-control-touch)}
+  .ds-table-wrap{display:none}.ds-cards{display:grid}
+  .ds-hide-m{display:none!important}
+}
+@media (min-width:768px){.ds-cards{display:none}.ds-hide-d{display:none!important}}
+body[data-view="mobile"] .ds-cols{grid-template-columns:1fr}
+body[data-view="mobile"] .ds-table-wrap{display:none}body[data-view="mobile"] .ds-cards{display:grid}
+body[data-view="mobile"] .ds-hide-m{display:none!important}body[data-view="mobile"] .ds-hide-d{display:revert}
+body[data-view="mobile"] .ds-btn,body[data-view="mobile"] .ds-input,body[data-view="mobile"] .ds-select{height:var(--ds-size-control-touch)}
+body[data-view="mobile"] .ds-page{padding:var(--ds-space-4) var(--ds-space-3)}
+body[data-view="tablet"] .ds-cols{grid-template-columns:1fr}
+/* Tiện ích xếp chồng ở mobile: phần tử trong .ds-row chiếm trọn hàng (nhóm nút thao tác của một dòng danh sách/CartItem…) */
+.ds-m-full{}
+@media (max-width:767px){.ds-m-full{flex-basis:100%;min-width:0}}
+body[data-view="mobile"] .ds-m-full{flex-basis:100%;min-width:0}
+/* ds-components v1.1 — END */
+  /* ===== Khung xem HIFI (không thuộc DS, không chép vào sản phẩm) ===== */
+  .hf-toolbar{position:sticky;top:0;z-index:30;background:var(--ds-color-text-primary);color:var(--ds-color-text-inverse);padding:6px 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}
+  .hf-toolbar h1{font-size:13px;margin:0 8px 0 0;font-weight:600}
+  .hf-toolbar label{display:flex;gap:4px;align-items:center;opacity:.9}
+  .hf-toolbar select,.hf-toolbar input{font:inherit;font-size:12px}
+  .hf-legend{margin-left:auto;opacity:.8}
+  .hf-stage{padding:24px 12px;display:grid;gap:40px;justify-items:center;background:#e9ebef}
+  .hf-frame{width:100%;max-width:1440px;background:var(--ds-color-bg-canvas);border:1px solid var(--ds-color-border-strong);box-shadow:var(--ds-shadow-md);overflow:hidden;position:relative}
+  .hf-frame>.hf-cap{font:600 11px/1 var(--ds-font-family-mono);padding:6px 10px;background:#1B1F24;color:#fff;letter-spacing:.02em}
+  .hf-frame>.hf-cap small{font-weight:400;margin-left:8px;opacity:.75}
+  body[data-view="tablet"] .hf-frame{max-width:834px}
+  body[data-view="mobile"] .hf-frame{max-width:390px}
+  body[data-only] .hf-frame{display:none}
+  body[data-only] .hf-frame[data-active="true"]{display:block}
+  [data-state]{display:none}[data-state="default"]{display:block}
+  body.hf-ids [data-c],body.hf-ids [data-f]{outline:1px dashed #B42318;outline-offset:1px;position:relative}
+  body.hf-ids [data-c]::after,body.hf-ids [data-f]::after{content:attr(data-c) attr(data-f);position:absolute;top:-9px;right:-2px;z-index:3;font:600 9px/14px var(--ds-font-family-mono);background:#B42318;color:#fff;padding:0 4px;border-radius:3px;pointer-events:none}
+  body.hf-zones [data-zone]{outline:1px dashed #2456A6;outline-offset:-1px;position:relative}
+  body.hf-zones [data-zone]::before{content:attr(data-zone);position:absolute;top:0;left:0;z-index:3;font:600 9px/14px var(--ds-font-family-mono);background:#2456A6;color:#fff;padding:0 4px}
+  body[data-mode="proto"] [data-nav]{cursor:pointer;box-shadow:0 0 0 2px #B7791F80}
+  .hf-proto-only{outline:2px dashed var(--ds-color-status-danger);outline-offset:2px;position:relative}
+  .hf-proto-only::before{content:"chỉ ở prototype — " attr(data-ref);position:absolute;top:-16px;left:0;font:600 9px/14px var(--ds-font-family-mono);color:var(--ds-color-status-danger)}
+  .hf-note{padding:12px;font-size:12px;color:#5B6472;text-align:center}
+  /* ===== Bố cục riêng SCR-04 Giỏ hàng — chỉ dùng biến --ds-*, không thuộc khối ds-components ===== */
+  [data-zone="Z3"]{position:sticky;top:var(--ds-space-4);align-self:start}
+  body[data-view="mobile"] [data-zone="Z3"]{position:sticky;bottom:0;top:auto;background:var(--ds-color-bg-surface);box-shadow:var(--ds-shadow-md);padding:var(--ds-space-3) var(--ds-space-4);border-top:1px solid var(--ds-color-border-default);margin:0 calc(var(--ds-space-3) * -1) calc(var(--ds-space-4) * -1)}
+  .cart-item{align-items:flex-start}
+  .cart-demo-tag{font-size:var(--ds-font-size-xs);color:var(--ds-color-text-secondary);font-style:italic}
+  .ds-btn--danger:hover{filter:brightness(.92)}
+</style>
+</head>
+<body data-view="desktop" data-mode="mockup">
+
+<header class="hf-toolbar">
+  <h1>HIFI — US-002, US-003 · Giỏ hàng (SCR-04)</h1>
+  <label>Màn hình <select id="hf-scr"><option value="">Tất cả</option></select></label>
+  <label>Khung nhìn <select id="hf-view"><option value="desktop">Desktop ≥1024</option><option value="mobile">Mobile &lt;768</option></select></label>
+  <label>Trạng thái <select id="hf-state">
+    <option value="default">Mặc định (có dữ liệu)</option><option value="loading">Đang tải</option>
+    <option value="empty-none">Rỗng — chưa có dữ liệu nào</option>
+    <option value="error">Lỗi tải dữ liệu</option>
+  </select></label>
+  <label>Chế độ <select id="hf-mode"><option value="mockup">Mockup</option><option value="proto">Prototype (bấm điều hướng)</option></select></label>
+  <label><input type="checkbox" id="hf-ids"> C-id/F-id</label>
+  <label><input type="checkbox" id="hf-zones"> Vùng Zn</label>
+  <span class="hf-legend">Hành vi xem SRS_US002-003 §2.A.3 · bố cục xem WF_US002-003 §3.1 · token xem DS_e-commerce §0 (🔴 placeholder, OQ-022) · không có "bộ lọc không khớp"/"tablet" (N/A, xem ghi chú DSPEC)</span>
+</header>
+
+<main class="hf-stage">
+
+<section class="hf-frame" id="SCR-04" data-scr="SCR-04" data-title="Giỏ hàng">
+  <div class="hf-cap">SCR-04 · Giỏ hàng <small>US-002 (xem) + US-003 (sửa/xoá) · WF §3.1 · vai trò ROLE-01 Guest, ROLE-02 Customer · vào từ SCR-01 (icon giỏ hàng)</small></div>
+
+  <div class="ds-page">
+
+    <div data-zone="Z1" data-name="Header màn hình">
+      <h1 data-c="C01"><span data-key="cart.title">Giỏ hàng của bạn</span> <span class="ds-muted" style="font-weight:var(--ds-font-weight-regular);font-size:var(--ds-font-size-md)" data-key="cart.itemCount">({n} sản phẩm)</span></h1>
+      <p class="cart-demo-tag" style="margin:4px 0 0">Minh hoạ dữ liệu mẫu: <code>{n}</code> = 5 (Σ quantity 4 dòng CartItem bên dưới) — text <code>data-key</code> giữ nguyên văn khuôn mẫu SRS §4.2, số thật do FE render lúc chạy</p>
+    </div>
+
+    <div class="ds-cols">
+
+      <!-- Z2 — Danh sách nhóm seller -->
+      <div data-zone="Z2" data-name="Danh sách nhóm seller">
+
+        <div data-state="default">
+          <div class="ds-stack">
+
+            <!-- Nhóm seller "Shop A" -->
+            <div class="ds-card">
+              <div class="ds-row ds-row--between" data-c="C02"><h3>Shop A</h3></div>
+
+              <div class="ds-row cart-item">
+                <div class="ds-thumb" data-c="C03" aria-label="Ảnh sản phẩm"></div>
+                <div class="ds-stack" style="gap:var(--ds-space-1);flex:1 1 160px;min-width:0">
+                  <div data-c="C04">Áo thun basic</div>
+                  <div class="ds-small ds-muted" data-c="C05">Size M, Đỏ</div>
+                  <div class="ds-small ds-muted" data-c="C06">100.000 ₫</div>
+                </div>
+                <div class="ds-row ds-m-full ds-row--end">
+                  <div class="ds-row" data-f="F01">
+                    <span class="ds-stepper"><button aria-label="Giảm">−</button><input value="2" aria-label="Số lượng"><button aria-label="Tăng">+</button></span>
+                  </div>
+                  <button class="ds-btn ds-btn--danger" data-c="C07" data-key="btn.delete">Xoá</button>
+                </div>
+              </div>
+
+              <div class="ds-row cart-item">
+                <div class="ds-thumb" data-c="C03" aria-label="Ảnh sản phẩm"></div>
+                <div class="ds-stack" style="gap:var(--ds-space-1);flex:1 1 160px;min-width:0">
+                  <div data-c="C04">Quần jean slimfit</div>
+                  <div class="ds-small ds-muted" data-c="C05">Size 30</div>
+                  <div class="ds-small ds-muted" data-c="C06">50.000 ₫</div>
+                </div>
+                <div class="ds-row ds-m-full ds-row--end">
+                  <div class="ds-row" data-f="F01" data-vis="disabled" title="Đang cập nhật số lượng, vui lòng đợi.">
+                    <span class="ds-stepper"><button aria-label="Giảm" disabled>−</button><input value="1" aria-label="Số lượng" disabled><button aria-label="Tăng" disabled>+</button></span>
+                    <span class="ds-spinner" role="status" aria-label="Đang xử lý"></span>
+                  </div>
+                  <button class="ds-btn ds-btn--danger" data-c="C07" data-key="btn.delete" aria-disabled="true" title="Đang xử lý, vui lòng đợi.">Xoá</button>
+                </div>
+              </div>
+              <p class="cart-demo-tag">Minh hoạ dòng 2: đang gửi <code>PATCH</code> (spinner cục bộ, F01/C07 khoá — SRS §2.A.3.6)</p>
+
+              <div class="ds-row ds-row--end" data-c="C08">Tạm tính: 250.000 ₫</div>
+            </div>
+
+            <!-- Nhóm seller "Shop B" -->
+            <div class="ds-card">
+              <div class="ds-row ds-row--between" data-c="C02"><h3>Shop B</h3></div>
+
+              <div class="ds-row cart-item">
+                <div class="ds-thumb" data-c="C03" aria-label="Ảnh sản phẩm"></div>
+                <div class="ds-stack" style="gap:var(--ds-space-1);flex:1 1 160px;min-width:0">
+                  <div data-c="C04">Balo du lịch</div>
+                  <div class="ds-small ds-muted" data-c="C05">Đen</div>
+                  <div class="ds-small ds-muted" data-c="C06">200.000 ₫</div>
+                </div>
+                <div class="ds-row ds-m-full ds-row--end" style="align-items:flex-start">
+                  <div class="ds-field" data-f="F01" style="width:auto">
+                    <span class="ds-stepper" style="border-color:var(--ds-color-status-danger)"><button aria-label="Giảm">−</button><input value="0" aria-label="Số lượng"><button aria-label="Tăng">+</button></span>
+                    <span class="ds-field__error" data-key="E-CART-0002.msg"><svg class="ds-icon" style="width:14px;height:14px" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>Số lượng phải là số nguyên từ 1 trở lên.</span>
+                  </div>
+                  <button class="ds-btn ds-btn--danger" data-c="C07" data-key="btn.delete">Xoá</button>
+                </div>
+              </div>
+              <p class="cart-demo-tag">Minh hoạ dòng 1: đang nhập giá trị không hợp lệ (E-CART-0002, chờ sửa lại — <code>AC-US003-07</code>)</p>
+
+              <div class="ds-row cart-item">
+                <div class="ds-thumb" data-c="C03" aria-label="Ảnh sản phẩm"></div>
+                <div class="ds-stack" style="gap:var(--ds-space-1);flex:1 1 160px;min-width:0">
+                  <div data-c="C04">Ốp lưng điện thoại</div>
+                  <div class="ds-small ds-muted" data-c="C05">—</div>
+                  <div class="ds-small ds-muted" data-c="C06">60.000 ₫</div>
+                </div>
+                <div class="ds-row ds-m-full ds-row--end">
+                  <div class="ds-row" data-f="F01">
+                    <span class="ds-stepper"><button aria-label="Giảm">−</button><input value="1" aria-label="Số lượng"><button aria-label="Tăng">+</button></span>
+                  </div>
+                  <button class="ds-btn ds-btn--danger" data-c="C07" data-key="btn.delete">Xoá</button>
+                </div>
+              </div>
+              <div class="ds-banner ds-banner--error">
+                <svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>
+                <span data-key="E-CART-0006.msg">Không thể cập nhật giỏ hàng, thử lại.</span>
+              </div>
+              <p class="cart-demo-tag">Minh hoạ dòng 2: <code>PATCH</code>/<code>DELETE</code> lỗi 5xx/timeout — giữ nguyên giá trị cũ, mở lại nút (<code>AC-US003-09</code>, <code>10</code>)</p>
+
+              <div class="ds-row ds-row--end" data-c="C08">Tạm tính: 260.000 ₫</div>
+            </div>
+
+          </div>
+        </div>
+
+        <div data-state="loading">
+          <div class="ds-stack">
+            <div class="ds-card"><div class="ds-skeleton" style="width:30%"></div><div class="ds-skeleton"></div><div class="ds-skeleton" style="width:70%"></div></div>
+            <div class="ds-card"><div class="ds-skeleton" style="width:25%"></div><div class="ds-skeleton" style="width:80%"></div></div>
+          </div>
+        </div>
+
+        <div data-state="empty-none">
+          <div class="ds-empty">
+            <svg class="ds-empty__illus" viewBox="0 0 120 88" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="16" y="20" width="88" height="56" rx="6"/><path d="M16 36h88M32 52h28M32 62h44"/></svg>
+            <span data-key="cart.empty.title">Giỏ hàng trống</span>
+            <button class="ds-btn ds-btn--primary" data-c="C10" data-key="cart.empty.cta">Tiếp tục mua sắm</button>
+          </div>
+        </div>
+
+        <div data-state="error">
+          <div class="ds-banner ds-banner--error" data-c="C12">
+            <svg class="ds-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5m0 3h.01"/></svg>
+            <span data-key="cart.error.load">Không tải được dữ liệu, thử lại.</span>
+            <button class="ds-btn ds-btn--secondary" data-c="C13" data-key="btn.retry" style="margin-left:auto;height:32px">Thử lại</button>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Z3 — Tổng kết (sidebar desktop / footer sticky mobile, cùng một markup) -->
+      <div data-zone="Z3" data-name="Tổng kết (sidebar desktop / footer mobile)">
+        <div data-state="default">
+          <div class="ds-stack" style="gap:var(--ds-space-2)">
+            <div class="label" data-c="C09" style="font-weight:var(--ds-font-weight-semibold);font-size:var(--ds-font-size-lg)">Tổng cộng: 510.000 ₫</div>
+            <button class="ds-btn ds-btn--primary" data-c="C11" data-key="btn.checkout" style="width:100%">Tiến hành Checkout</button>
+          </div>
+        </div>
+        <div data-state="empty-none">
+          <div class="ds-stack" style="gap:var(--ds-space-2)">
+            <div data-c="C09" style="font-weight:var(--ds-font-weight-semibold);font-size:var(--ds-font-size-lg)">Tổng cộng: 0 ₫</div>
+            <button class="ds-btn ds-btn--primary" data-c="C11" aria-disabled="true" title="Giỏ hàng đang trống, thêm sản phẩm để tiếp tục." style="width:100%">Tiến hành Checkout</button>
+          </div>
+        </div>
+        <div data-state="loading" aria-hidden="true"></div>
+        <div data-state="error" aria-hidden="true"></div>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+
+<!-- Minh hoạ hành vi C07 "Xoá" — modal xác nhận (UICONV §5). Không phải SCR riêng, không có data-scr/data-c. -->
+<section style="max-width:560px;width:100%">
+  <p class="hf-note" style="padding:0 0 8px">Minh hoạ hành vi khi bấm "Xoá" (C07) — modal xác nhận theo <code>UICONV</code> §5, không phải màn hình riêng</p>
+  <div class="ds-modal" style="box-shadow:var(--ds-shadow-md)">
+    <div class="ds-modal__head">
+      <h3 data-key="cart.delete.confirm.title">Xoá sản phẩm khỏi giỏ hàng?</h3>
+      <button class="ds-btn ds-btn--ghost ds-btn--icon" aria-label="Đóng"><svg class="ds-icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+    </div>
+    <div class="ds-modal__body"><p style="margin:0" data-key="cart.delete.confirm.body">Sản phẩm sẽ được xoá khỏi giỏ hàng của bạn.</p></div>
+    <div class="ds-modal__foot">
+      <button class="ds-btn ds-btn--secondary">Huỷ</button>
+      <button class="ds-btn ds-btn--danger" data-key="btn.delete">Xoá</button>
+    </div>
+  </div>
+  <p class="cart-demo-tag" style="text-align:center;display:block;margin-top:8px">Nhãn "Huỷ" chưa có khoá riêng ở SRS §4.2 — xem DSPEC §8 (không chặn G3, mức thấp)</p>
+</section>
+
+</main>
+<p class="hf-note">Mockup hi-fi v1.1 (2026-09-09) · token và component theo DS_e-commerce (ds-components v1.1) · hành vi theo SRS_US002-003 · bố cục theo WF_US002-003 · độ tin cậy visual 🔴 (chưa có brand/design system — OQ-022)</p>
+
+<script>
+(function(){
+  var q=new URLSearchParams(location.search), b=document.body;
+  var scr=document.getElementById('hf-scr'),view=document.getElementById('hf-view'),state=document.getElementById('hf-state'),mode=document.getElementById('hf-mode'),ids=document.getElementById('hf-ids'),zones=document.getElementById('hf-zones');
+  document.querySelectorAll('.hf-frame').forEach(function(f){var o=document.createElement('option');o.value=f.id;o.textContent=f.id+' · '+(f.dataset.title||'');scr.appendChild(o);});
+  if(q.get('scr'))scr.value=q.get('scr');if(q.get('view'))view.value=q.get('view');if(q.get('state'))state.value=q.get('state');if(q.get('mode'))mode.value=q.get('mode');ids.checked=q.get('ids')==='1';zones.checked=q.get('zones')==='1';
+  function apply(){
+    b.setAttribute('data-view',view.value);b.setAttribute('data-mode',mode.value);
+    b.classList.toggle('hf-ids',ids.checked);b.classList.toggle('hf-zones',zones.checked);
+    if(scr.value){b.setAttribute('data-only','1');}else{b.removeAttribute('data-only');}
+    document.querySelectorAll('.hf-frame').forEach(function(f){f.setAttribute('data-active',String(!scr.value||f.id===scr.value));});
+    var s=state.value;
+    document.querySelectorAll('[data-state]').forEach(function(el){
+      var st=el.getAttribute('data-state'),on;
+      if(s==='submitting')on=st==='submitting'||(st==='default'&&!el.closest('.ds-modal__foot'));
+      else if(s==='invalid')on=st==='invalid'||(st==='default'&&!el.closest('.ds-field'));
+      else on=st===s||(st==='default'&&s!=='default'&&!el.parentElement.querySelector('[data-state="'+s+'"]'));
+      el.style.display=on?(el.tagName==='SPAN'?'inline':'block'):'none';
+    });
+  }
+  [scr,view,state,mode,ids,zones].forEach(function(el){el.addEventListener('change',apply);});
+  document.addEventListener('click',function(e){
+    if(b.getAttribute('data-mode')!=='proto')return;
+    var t=e.target.closest('[data-nav]');if(!t)return;e.preventDefault();
+    var to=document.getElementById(t.getAttribute('data-nav'));if(!to)return;
+    scr.value=to.id;state.value='default';apply();to.scrollIntoView();
+  });
+  apply();
+})();
+</script>
+</body>
+</html>
diff --git a/sa-output/e-commerce/00-index/ADL_e-commerce.md b/sa-output/e-commerce/00-index/ADL_e-commerce.md
new file mode 100644
index 0000000..5fa220e
--- /dev/null
+++ b/sa-output/e-commerce/00-index/ADL_e-commerce.md
@@ -0,0 +1,118 @@
+# ADL — ADR Ledger — e-commerce
+
+| | |
+|---|---|
+| **Cập nhật** | 2026-09-10 |
+| **Author** | sa-lifecycle (khởi tạo — khung rỗng, chưa có ADR nào) |
+| **Tổng số ADR** | 0 |
+| **Nguồn quét** | `02-architecture/adr/` *(chưa tồn tại — sẽ tạo khi ADR đầu tiên được sinh ở sa-2-architecture)* |
+
+> Sổ này là **mục lục**, không phải nơi chứa nội dung quyết định. Nội dung ở từng file ADR.
+> Khung khởi tạo — sẽ được `sa-conformance` cập nhật sau mỗi giai đoạn.
+
+---
+
+## 1. Tóm tắt
+
+| Trạng thái | Số lượng |
+|---|---|
+| `Proposed` | 0 |
+| `Accepted` | 0 |
+| `Rejected` | 0 |
+| `Superseded` | 0 |
+| `Deprecated` | 0 |
+
+| Cảnh báo | Số lượng |
+|---|---|
+| `Proposed` quá 10 ngày | 0 |
+| Điểm radar ≥ 8 mà `Accepted` không có POC | 0 |
+| Nguồn (`QAS`/`ASR`) đã đổi sau khi ADR được ký | 0 |
+| Chuỗi supersede gãy | 0 |
+| **Hai ADR mâu thuẫn** | 0 |
+
+## 2. Mục lục
+
+| ID | Quyết định | Chủ đề | Status | Ngày | Người quyết | Radar | POC | Nguồn | Supersedes | Superseded by |
+|---|---|---|---|---|---|---|---|---|---|---|
+
+**Chủ đề** *(dùng để rà mâu thuẫn — rà theo chủ đề, không theo số thứ tự)*: cấu trúc · dữ liệu ·
+tích hợp · bảo mật · hạ tầng · frontend · vận hành
+
+## 3. Theo chủ đề
+
+### Cấu trúc hệ thống
+
+| `ADR` | Quyết định | Status | Có mâu thuẫn với |
+|---|---|---|---|
+
+### Dữ liệu
+
+| `ADR` | Quyết định | Status | Có mâu thuẫn với |
+|---|---|---|---|
+
+### Tích hợp
+
+| `ADR` | Quyết định | Status | Có mâu thuẫn với |
+|---|---|---|---|
+
+### Bảo mật
+
+| `ADR` | Quyết định | Status | Có mâu thuẫn với |
+|---|---|---|---|
+
+### Hạ tầng & vận hành
+
+| `ADR` | Quyết định | Status | Có mâu thuẫn với |
+|---|---|---|---|
+
+## 4. Năm kiểm tra
+
+### 4.1 Chuỗi supersede
+
+| `ADR` cũ | Ghi `Superseded by` | `ADR` mới | Ghi `Supersedes` ngược lại | Khớp |
+|---|---|---|---|---|
+
+### 4.2 `Proposed` quá hạn
+
+| `ADR` | Đề xuất ngày | Số ngày treo | Ai phải quyết | Đang chặn gì |
+|---|---|---|---|---|
+
+### 4.3 Điểm radar ≥ 8 chưa có POC
+
+| `ADR` | Radar | Status | POC | Vi phạm |
+|---|---|---|---|---|
+
+### 4.4 Nguồn đã đổi
+
+| `ADR` | Dựa trên | Nguồn đó đã đổi | Quyết định còn đúng không |
+|---|---|---|---|
+
+### 4.5 Mâu thuẫn
+
+| `ADR` A | `ADR` B | Cùng chủ đề | Mâu thuẫn ở đâu | Xử lý |
+|---|---|---|---|---|
+
+## 5. Điều kiện xét lại đã chạm ngưỡng
+
+| `ADR` | Điều kiện (§7 của ADR) | Ngưỡng | Thực tế | Chạm | Hành động |
+|---|---|---|---|---|---|
+
+## 6. ADR không có `FIT` bảo vệ
+
+| `ADR` | Ràng buộc nó đặt ra | `FIT` | Nhãn `⚠️ Khuyến nghị` | Đứt |
+|---|---|---|---|---|
+
+## 7. Quyết định KHÔNG đủ tầm ADR — `DEC`
+
+| `DEC` | Quyết định | Ngày | Ai | Radar |
+|---|---|---|---|---|
+
+## 8. Việc phải làm
+
+| # | Việc | ADR liên quan | Chủ | Hạn | Mức |
+|---|---|---|---|---|---|
+
+## 9. Thống kê theo thời gian
+
+| Kỳ | ADR mới | Superseded | Ghi chú |
+|---|---|---|---|
diff --git a/sa-output/e-commerce/00-index/DEC_e-commerce.md b/sa-output/e-commerce/00-index/DEC_e-commerce.md
new file mode 100644
index 0000000..3d5b420
--- /dev/null
+++ b/sa-output/e-commerce/00-index/DEC_e-commerce.md
@@ -0,0 +1,33 @@
+# DEC — Sổ quyết định không đủ tầm ADR — e-commerce
+
+| | |
+|---|---|
+| **Version** | 1.0 |
+| **Date** | 2026-09-10 |
+| **Author** | SA (qua skill sa-lifecycle — khởi tạo) |
+| **Status** | 🟡 Draft — cập nhật liên tục qua các giai đoạn |
+| **Approved by** | — *(sổ theo dõi, không cần baseline riêng)* |
+| **Source** | Khởi tạo trống — chưa có artifact GĐ nào của SA |
+| **Scope** | Toàn dự án e-commerce (kiến trúc) |
+| **Confidence** | 🟡 Sổ theo dõi rỗng lúc khởi tạo, chưa có nội dung để đánh giá |
+
+## Change Log
+
+| Version | Date | Người sửa | Thay đổi | ADR |
+|---|---|---|---|---|
+| 1.0 | 2026-09-10 | SA (qua skill sa-lifecycle) | Khởi tạo sổ DEC kiến trúc, khung rỗng | — |
+
+---
+
+## Quyết định đã chốt (radar 3–4, không đủ tầm ADR)
+
+| ID | Quyết định | Người quyết | Ngày | Radar | Ảnh hưởng |
+|---|---|---|---|---|---|
+
+## Ghi chú
+
+- Dùng chung ID-space `DEC-nn` với bộ BA nhưng là sổ riêng của SA. Bộ BA của e-commerce hiện
+  có `DEC-01` (và theo ghi chú điều phối, các ngoại lệ gate `DEC-02..07` đang được dùng để chạy
+  thử dự án — không có Designer, PO ký thay). Sổ SA sẽ cấp số `DEC-01` trở đi độc lập; khi tham
+  chiếu chéo giữa hai bộ, ghi rõ `DEC-nn (BA)` hoặc `DEC-nn (SA)` để tránh nhầm lẫn.
+- Mọi lần bỏ giai đoạn SA (theo `workflow.md §5`) phải ghi một dòng ở đây kèm lý do.
diff --git a/sa-output/e-commerce/00-index/DTM_e-commerce.md b/sa-output/e-commerce/00-index/DTM_e-commerce.md
new file mode 100644
index 0000000..dd40eef
--- /dev/null
+++ b/sa-output/e-commerce/00-index/DTM_e-commerce.md
@@ -0,0 +1,145 @@
+# DTM — Decision Traceability Matrix — e-commerce
+
+| | |
+|---|---|
+| **Cập nhật** | 2026-09-10 |
+| **Author** | sa-lifecycle (khởi tạo — khung rỗng, chưa có artifact GĐ2 nào để quét) |
+| **Nguồn quét** | *(chưa có — `01-context/`, `02-architecture/` chưa tồn tại)* |
+| **Artifact 🟡 Draft bị tách riêng** | *(chưa có)* |
+
+> Ma trận **trống trung thực tốt hơn ma trận đầy do suy diễn**. Ô trống là danh sách việc;
+> ô điền bừa là cảm giác an toàn giả. Khung khởi tạo — sẽ được `sa-conformance` cập nhật sau
+> mỗi giai đoạn.
+
+---
+
+## 1. Báo cáo coverage
+
+| Chuỗi | Tỉ lệ | % | Mức | ID bị đứt | Chặn gate |
+|---|---|---|---|---|---|
+| `DRV` → `ASR`/`QAS` | 0/0 | — | — | — | AG2 |
+| `ASR` → `ADR` | 0/0 | — | — | — | AG2 |
+| `ADR` → nguồn (`DRV`/`CON`/`QAS`/`ASR`) | 0/0 | — | — | — | — |
+| `ADR` → `CMP` | 0/0 | — | — | — | AG2 |
+| `QAS` (Must) → bài đo | 0/0 | — | — | — | AG3 |
+| `QAS` (Must) → kết quả đo thật | 0/0 | — | — | — | AG3 |
+| Ràng buộc `AGD` → `FIT` hoặc nhãn khuyến nghị | 0/0 | — | — | — | AG3 |
+| `CMP` → `ASR` hoặc nhu cầu chức năng | 0/0 | — | — | — | — |
+| `IF` → chủ sở hữu contract | 0/0 | — | — | — | AG2 |
+| Thực thể dữ liệu → đúng một chủ | 0/0 | — | — | — | AG2 |
+| `THR` → biện pháp → cách kiểm chứng | 0/0 | — | — | — | AG2 |
+| Phụ thuộc ngoài process → `FM` | 0/0 | — | — | — | AG2 |
+
+## 2. `DRV` × `ASR` / `QAS`
+
+| | **Đứt** |
+|---|---|
+
+**Đọc ngược** — `ASR`/`QAS` không sinh từ `DRV`/`CON` nào:
+
+| ID | Sinh từ đâu | Hợp lệ? |
+|---|---|---|
+
+## 3. `ASR` × `ADR`
+
+| `ASR` | Phát biểu ngắn | `ADR` hiện thực hoá | Trạng thái ADR | Đứt |
+|---|---|---|---|---|
+
+**Đọc ngược** — `ADR` không phục vụ `ASR`/`QAS` nào:
+
+| `ADR` | Quyết định gì | Nguồn ghi trong §1 | Hợp lệ? |
+|---|---|---|---|
+
+## 4. `ADR` × `CMP`
+
+| | **Không hiện ở đâu** |
+|---|---|
+
+**Đọc ngược** — `CMP` không phục vụ `ASR` nào và không có nhu cầu chức năng rõ:
+
+| `CMP` | Trách nhiệm | Sinh từ | Hợp lệ? |
+|---|---|---|---|
+
+## 5. `QAS` × kiểm chứng
+
+| `QAS` | Mức | Bài đo (`FIT`/tên bài) | Đã chạy | Kết quả | Nguồn kết quả | Đứt |
+|---|---|---|---|---|---|---|
+
+## 6. Ràng buộc `AGD` × `FIT`
+
+| Ràng buộc `AGD` | Nguồn | `FIT` | Nhãn `⚠️ Khuyến nghị` | Đứt |
+|---|---|---|---|---|
+
+## 7. Kiểm tra chuyên biệt
+
+### 7.1 Interface
+
+| `IF-nnn` | Chủ sở hữu contract | Contract tồn tại | Versioning policy | `FM` khi hỏng | Đứt |
+|---|---|---|---|---|---|
+
+### 7.2 Dữ liệu
+
+| Thực thể | Số chủ sở hữu | Hợp lệ | Ghi chú |
+|---|---|---|---|
+
+### 7.3 Bảo mật
+
+| `THR-nn` | Có biện pháp | Có cách kiểm chứng | Đứt |
+|---|---|---|---|
+
+### 7.4 Đường lỗi
+
+| Phụ thuộc ngoài process *(từ `SAD`+`ICD`)* | Có `FM-nn` | Trả lời đủ 4 câu | Đứt |
+|---|---|---|---|
+
+## 8. Đối chiếu chéo với bộ BA
+
+| Kiểm | Kết quả | Hành động |
+|---|---|---|
+| Mọi `NFR-nn` của BA có `QAS` tương ứng | chưa đo được — SA GĐ2 chưa chạy | — |
+| Mọi endpoint trong `API` của BA có `IF-nnn` | chưa đo được — SA GĐ2 chưa chạy | — |
+| Mọi `ROLE-nn` trong `RBAC` map xuống `SEC` §3.1 | chưa đo được — SA GĐ2 chưa chạy | — |
+| `BR-nnn` ép ràng buộc kiến trúc đã có `ADR` | chưa đo được — SA GĐ2 chưa chạy | — |
+
+## 9. ID trùng lặp
+
+| ID | Xuất hiện ở | Mức |
+|---|---|---|
+
+## 10. Tham chiếu gãy
+
+| Từ | Trỏ tới | Vấn đề |
+|---|---|---|
+
+## 11. Phát hiện — xếp theo mức
+
+### 🔴 Chặn gate
+
+| # | Phát hiện | File · mục | Hành động | Skill sửa | Chặn |
+|---|---|---|---|---|---|
+
+### 🟠 Nợ — phải trả trước gate sau
+
+| # | Phát hiện | File · mục | Hành động | Skill sửa |
+|---|---|---|---|---|
+
+### 🟡 Cải thiện
+
+| # | Phát hiện | File · mục | Hành động |
+|---|---|---|---|
+
+## 12. Kết luận gate
+
+```
+AG1: — chưa tới (chưa có CTX/OPT/TCO/ARISK)
+AG2: — chưa tới
+AG3: — chưa tới
+AG4: — chưa tới
+```
+
+**Việc gần nhất:** `/sa-1-context e-commerce` *(sau khi BA qua G1 hoặc có ngoại lệ gate ghi rõ)*
+
+## 13. Chấp nhận có ý thức
+
+| Chỗ đứt | Vì sao chấp nhận | Ai chấp nhận · ngày | Hạn xử lý | `DEC` |
+|---|---|---|---|---|
diff --git a/sa-output/e-commerce/00-index/GLOSSARY_e-commerce.md b/sa-output/e-commerce/00-index/GLOSSARY_e-commerce.md
new file mode 100644
index 0000000..4629f54
--- /dev/null
+++ b/sa-output/e-commerce/00-index/GLOSSARY_e-commerce.md
@@ -0,0 +1,31 @@
+# GLOSSARY — Từ điển thuật ngữ kỹ thuật — e-commerce
+
+| | |
+|---|---|
+| **Version** | 1.0 |
+| **Date** | 2026-09-10 |
+| **Author** | SA (qua skill sa-lifecycle — khởi tạo) |
+| **Status** | 🟡 Draft — bồi đắp dần qua các giai đoạn |
+| **Approved by** | — *(sổ theo dõi, không cần baseline riêng)* |
+| **Source** | Khởi tạo trống — chưa có artifact GĐ nào của SA |
+| **Scope** | Toàn dự án e-commerce (kiến trúc) |
+| **Confidence** | 🟡 Sổ theo dõi rỗng lúc khởi tạo, chưa có nội dung để đánh giá |
+
+## Change Log
+
+| Version | Date | Người sửa | Thay đổi | ADR/DEC |
+|---|---|---|---|---|
+| 1.0 | 2026-09-10 | SA (qua skill sa-lifecycle) | Khởi tạo từ điển thuật ngữ, khung rỗng | — |
+
+---
+
+## Thuật ngữ
+
+| Thuật ngữ | Định nghĩa | Ngữ cảnh dùng | Nguồn |
+|---|---|---|---|
+
+## Ghi chú
+
+- Bồi đắp dần khi `sa-1-context` trở đi định nghĩa thuật ngữ kiến trúc mới (ví dụ: tên pattern,
+  tên component, tên cơ chế). Không copy định nghĩa nghiệp vụ đã có ở BA — nếu có, tham chiếu
+  bằng đường dẫn tới BA (ví dụ `ba-output/e-commerce/...`).
diff --git a/sa-output/e-commerce/00-index/INDEX_e-commerce.md b/sa-output/e-commerce/00-index/INDEX_e-commerce.md
new file mode 100644
index 0000000..c8d30d1
--- /dev/null
+++ b/sa-output/e-commerce/00-index/INDEX_e-commerce.md
@@ -0,0 +1,39 @@
+# INDEX — e-commerce (kiến trúc)
+
+| | |
+|---|---|
+| **Cập nhật** | 2026-09-10 |
+| **Giai đoạn hiện tại** | Chưa bắt đầu — project mới khởi tạo qua `sa-lifecycle` (init) |
+| **Gate gần nhất đã qua** | Chưa có |
+| **ADR đang Proposed** | — |
+
+## Artifact
+
+| Loại | File mới nhất | Version | Status | Confidence | Cập nhật |
+|---|---|---|---|---|---|
+| — | *(chưa có artifact giai đoạn nào — sẽ điền khi `sa-1-context` chạy)* | | | | |
+
+## Open Question đang mở
+
+| ID | Nội dung | Hỏi ai | Từ ngày | Chặn gì |
+|---|---|---|---|---|
+
+## Rủi ro kiến trúc mức cao đang mở
+
+| ID | Rủi ro | Chủ | Cách hạ | Hạn |
+|---|---|---|---|---|
+
+## Ghi chú khởi tạo
+
+- Cây thư mục `01-context/`, `02-architecture/adr/`, `03-enablement/`, `04-evolution/` sẽ được
+  tạo bởi skill giai đoạn tương ứng khi có artifact đầu tiên (không tạo thư mục/rỗng trước).
+- Trạng thái đồng bộ với bộ BA tại thời điểm init: `ba-output/e-commerce/00-index/INDEX_e-commerce.md`
+  ghi "Giai đoạn hiện tại: GĐ1 · Discovery (chưa bắt đầu)", **BA chưa qua G1**. Theo
+  `references/workflow.md §4`, SA GĐ1 cần BA đã qua G1 (có `BRIEF`/`GOAL`/`RQ`) để có driver
+  chấm phương án. Đây chỉ là ghi nhận hiện trạng lúc `init`, không chặn việc tạo cấu trúc thư
+  mục rỗng; nó **sẽ chặn** khi chạy `/sa-1-context` thật (xem `Bẫy thường gặp` trong
+  `sa-lifecycle/SKILL.md`).
+- Dự án e-commerce là "dự án chạy thử" theo ghi chú điều phối: gate BA đang chạy bằng các
+  ngoại lệ `DEC-02..07` (không có Designer, PO ký thay). Việc này không ảnh hưởng cấu trúc SA
+  vừa khởi tạo, nhưng sẽ ảnh hưởng `Confidence` của `CTX`/`OPT` khi GĐ1 SA thực sự bắt đầu nếu
+  BA vẫn chưa qua G1 tại thời điểm đó.
diff --git a/sa-output/e-commerce/00-index/OQ_e-commerce.md b/sa-output/e-commerce/00-index/OQ_e-commerce.md
new file mode 100644
index 0000000..2530c3f
--- /dev/null
+++ b/sa-output/e-commerce/00-index/OQ_e-commerce.md
@@ -0,0 +1,42 @@
+# OQ — Sổ Open Question (kiến trúc) — e-commerce
+
+| | |
+|---|---|
+| **Version** | 1.0 |
+| **Date** | 2026-09-10 |
+| **Author** | SA (qua skill sa-lifecycle — khởi tạo) |
+| **Status** | 🟡 Draft — cập nhật liên tục qua các giai đoạn |
+| **Approved by** | — *(sổ theo dõi, không cần baseline riêng)* |
+| **Source** | Khởi tạo trống — chưa có artifact GĐ nào của SA |
+| **Scope** | Toàn dự án e-commerce (kiến trúc) |
+| **Confidence** | 🟡 Sổ theo dõi rỗng lúc khởi tạo, chưa có nội dung để đánh giá |
+
+## Change Log
+
+| Version | Date | Người sửa | Thay đổi | ADR/DEC |
+|---|---|---|---|---|
+| 1.0 | 2026-09-10 | SA (qua skill sa-lifecycle) | Khởi tạo sổ OQ kiến trúc, khung rỗng | — |
+
+---
+
+## Open Question đang mở
+
+| ID | Nội dung | Hỏi ai | Từ ngày | Chặn gì | Nguồn |
+|---|---|---|---|---|---|
+
+## Open Question đã đóng
+
+| ID | Nội dung | Trả lời | Ngày đóng | Người trả lời |
+|---|---|---|---|---|
+
+## Ghi chú
+
+- Sổ này dùng chung ID-space `OQ-nnn` với bộ BA nhưng là sổ riêng của SA
+  (`sa-output/e-commerce/00-index/OQ_e-commerce.md`), không ghi đè
+  `ba-output/e-commerce/00-index/OQ_e-commerce.md`. Khi một câu hỏi thuộc cả hai bộ (ví dụ
+  ràng buộc BA cần SA xác nhận về kiến trúc), tham chiếu chéo bằng ID + đường dẫn, không copy
+  nội dung.
+- Tại thời điểm khởi tạo, bộ BA của e-commerce có `OQ-001..OQ-034` đang mở/đóng ở
+  `ba-output/e-commerce/00-index/OQ_e-commerce.md`; sổ SA sẽ đánh số `OQ-001` trở đi độc lập
+  khi `sa-1-context` bắt đầu ghi câu hỏi kiến trúc đầu tiên — cần Grep cả hai sổ trước khi cấp
+  ID mới để tránh trùng khi tham chiếu chéo.