@cyberskill/design 1.3.10 → 1.4.0

package/docs/vi/hr-suite-sources.md

@@ -0,0 +1,47 @@
+# Nguồn HR Suite (DOCX ↔ templates)
+
+Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+
+## Quyết định
+
+**Instrument sống canonical là Design Component** dưới `templates/vn-*/*.dc.html` (cộng `doc-suite-index`, `doc-style-guide`, `doc-templates`). Google Drive / Word (`.docx` / `.dotx`) là **provenance nguồn**, không phải bề mặt sản phẩm Storybook.
+
+**Không** commit file Word binary lớn vào package design system. Giải nén local tùy chọn để diff:
+
+```bash
+# scraps/ đã gitignore
+mkdir -p scraps/hr-suite-docx
+unzip -O UTF-8 /path/to/Templates.zip -d scraps/hr-suite-docx
+```
+
+## Inventory (Templates.zip, Th7 2026)
+
+| Số | Loại |
+|---|---|
+| 40 | `.docx` instrument / hướng dẫn |
+| 1 | `.dotx` shell trình bày |
+| **41** | **tổng trong zip** |
+
+Cả **37** thư mục Employment Suite `templates/vn-*` từ zip map 1:1 với một `.docx`. Bốn file “0.” tham chiếu map tới template `doc-*`. Thêm **một** hợp đồng nguyên tắc thương mại (không nằm trong zip) tại `templates/vn-framework-agreement`.
+
+## Mapping
+
+Bảng đầy đủ (tiêu đề EN → path repo) nằm ở bản EN: `docs/hr-suite-sources.md`. Tóm tắt: mọi hợp đồng / chính sách / form Employment Suite trong zip khớp một `templates/vn-*`; index + style guide + usage guide khớp `templates/doc-*`.
+
+### Ngoài Templates.zip (thêm Th8 2026)
+
+| Nguồn | Path repo | Phân loại |
+|---|---|---|
+| `Hợp đồng Nguyên Tắc - CyberSkill - Ban QLDA Bình Quới.docx` (Downloads) | `templates/vn-framework-agreement` | **Thương mại** — khung cung cấp dịch vụ & tài khoản phần mềm (không phải vòng đời lao động). Cùng skin VN A4 (`vn-*`), hiện dưới **Templates → HR** nhờ tên catalog `HR Suite ·`; mục lục suite đặt ở Legal/client-facing. DOCX đã adapt (gitignore): `scraps/hr-suite-docx/Templates/9. Hợp đồng Nguyên Tắc - Framework Agreement (Software Services).docx` |
+
+## Duyệt trên Storybook
+
+- **Templates → Gallery → Atomic gallery** — tier Templates của Atomic View
+- **Templates → HR** — mọi instrument HR Suite / HR ops
+- **Templates → Documents** — suite index / style guide / document template
+
+## Trạng thái sync (Th8 2026)
+
+Zip ngày **2026-07-11**. Repo đã có `.dc.html` đã chuyển cho mọi instrument đã map. Thay đổi này **ghi nhận** map Drive/DOCX ↔ `vn-*` và đưa Templates lên Storybook; **không** re-import nội dung DOCX vào DC. Chỉ sync lại khi counsel/ops xác nhận Word lệch so với cây DC — rồi sửa `templates/vn-*/` tương ứng và regen CSF Storybook nếu đổi tên (`node scripts/generate-template-stories.mjs`).
+
+Vẫn cần counsel review trước khi dùng thật (instrument do client cung cấp; xem README / SKILL).

package/docs/vi/live-hub.md

@@ -4,38 +4,43 @@ Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## Quyết định
 
-**Storybook là live interactive hub duy nhất** cho operator trên `design.cyberskill.world`. Không có trang Live View riêng và không còn shell dashboard HTML làm sản phẩm. Production **`/`** là Storybook.
+**Storybook là live hub tương tác duy nhất** cho operator trên `design.cyberskill.world`. Không có trang Live View riêng và không có shell dashboard HTML sản phẩm riêng. Production **`/`** là Storybook.
 
 ## Sidebar IA
 
+Thứ tự duyệt atomic trên site sản phẩm: **Foundations → Components → Templates → Pages** (Atoms / Molecules / Organisms nằm trong Atomic View và CSF Components; Templates và Pages là nhóm sidebar hạng nhất).
+
 | Nhóm | Vai trò |
 |---|---|
-| **Docs** | Docs operator đã xuất bản: **Start** (Introduction, README, SKILL, Contributing, llms, Library) · **Guides** (consuming, grant, deploy, schema, conventions, styles, products, Figma, contrast, storybook, live-hub, runbook phát hành, benchmark, …) · **Maintainers** (học thuyết, decisions, CI/CD, quality gates, sync). MDX curated cộng một mục sidebar mỗi trang tracked. EN·VI qua Thư viện tài liệu (`/docs/viewer.html`) |
-| **Foundations** | Colors, typography, spacing, elevation, motion, elements |
+| **Docs** | Docs operator đã xuất bản: **Start** (Introduction, README, SKILL, Contributing, llms, Library) · **Guides** (consuming, grant, deploy, schema, conventions, styles, products, Figma, contrast, storybook, live-hub, nguồn HR Suite, runbook phát hành, benchmark, …) · **Maintainers** (học thuyết, decisions, CI/CD, quality gates, sync). MDX curated cộng một mục sidebar mỗi trang tracked. EN·VI qua Thư viện tài liệu (`/docs/viewer.html`) |
+| **Foundations** | Màu, chữ, spacing, elevation, motion, elements |
 | **Components** | Thư viện CSF đầy đủ |
+| **Templates** | Điểm bắt đầu công khai: **Gallery** (Atomic View → tier Templates, kitchen-sink, playground) cộng mọi template `_ds_manifest.json` nhóm như Atomic View (Product · Board · … · **HR** Suite · Documents). Gồm cả 38 instrument `vn-*` A4 (Employment Suite + hợp đồng nguyên tắc thương mại) |
+| **Pages** | UI kit — Status Hub, Marketing site, Slide deck |
 | **Release Notes** | Prose sản phẩm curated (**không CHANGELOG.md**) |
-| **Status** | Nhúng full-bleed `_audit/run.html` (auto-run lần đầu; **Re-run** khi cần) |
+| **Status** | Embed full-bleed `_audit/run.html` (tự chạy lần đầu; **Re-run** khi cần) |
 | **A11y / I18n** | Specimen a11y + song ngữ |
-| **Maintainer** | Iframe HTML portable cho gates (Atomic View chôn ở đây — không phải entry công khai top-level) |
+| **Maintainer** | Iframe HTML portable cho gates và demo (Motion, mirror kit, demo template, RTL, Atomic View cho gates) |
 
 ## Bề mặt
 
 | Bề mặt | Vai trò |
 |---|---|
-| **Storybook** (`/`) | Bề mặt sản phẩm host: toolbar Theme × Element × Language × Style, Docs/Foundations/Components/Release Notes/Status, và Maintainer/* iframe vào HTML portable |
-| **Atomic View** (`guidelines/atomic-view.html`) | Lưới component zero-build portable cho gates và duyệt clone-and-open — không phải entry sản phẩm công khai |
-| **Guidelines / templates khác** | Specimen portable; mở từ Storybook Maintainer/* khi khám phá Motion, index Status Hub / Website / Deck, kitchen-sink, v.v. |
-| **Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*`** | Redirect về `/` (stub + redirect Vercel) |
+| **Storybook** (`/`) | Bề mặt sản phẩm host: toolbar Theme × Element × Language × Style, Docs/Foundations/Components/**Templates**/**Pages**/Release Notes/Status, và Maintainer/* iframe vào HTML portable |
+| **Atomic View** (`guidelines/atomic-view.html`) | Trình duyệt atomic zero-build portable (Atoms → Molecules → Organisms → Templates → Pages). Công khai qua **Templates → Gallery → Atomic gallery**; cũng dưới Maintainer cho gates / clone-and-open |
+| **Guidelines / templates khác** | Specimen portable; mở từ Storybook Templates/*, Pages/*, hoặc Maintainer/* |
+| **Legacy `/dashboard`, `/dashboard/`, `/dashboard.html`, `/dashboard/:path*`, `/playground`, `/playground/`, `/playground/:path*`** | Redirect về `/` (stub + Vercel redirects) |
 
-## Bản đồ bề mặt (story Maintainer/*)
+## Bản đồ bề mặt (công khai + Maintainer)
 
-| Storybook entry | Portable HTML |
+| Entry Storybook | HTML portable |
 |---|---|
 | Components/* CSF | Nguồn React dưới `components/` |
+| Templates/Gallery → Atomic gallery | `guidelines/atomic-view.html#tier-templates` |
+| Templates/{Category}/* | `templates/**/*.dc.html` qua `_ds_manifest.json` (regen: `node scripts/generate-template-stories.mjs`) |
+| Pages → Status Hub / Marketing site / Slide deck | `ui_kits/status-hub|website|deck/index.html` |
 | Maintainer/Surfaces → Motion | `guidelines/motion.html` |
-| Maintainer/Surfaces → Status Hub | `ui_kits/status-hub/index.html` |
-| Maintainer/Surfaces → Website | `ui_kits/website/index.html` |
-| Maintainer/Surfaces → Deck | `ui_kits/deck/index.html` |
+| Maintainer/Surfaces → Status Hub / Website / Deck | cùng UI kit (mirror maintainer) |
 | Maintainer/Surfaces → Template Playground | `templates/playground.html` |
 | Maintainer/Surfaces → Kitchen Sink | `templates/kitchen-sink.html` |
 | Maintainer/Surfaces → Image Slots | `templates/image-slots-demo.html` |
@@ -46,9 +51,9 @@ Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## Hành vi Status
 
-- Mở Status load `_audit/run.html`, **auto-run** bảng gate nhanh một lần.
-- Storybook có thể giữ iframe cache khi điều hướng đi rồi về — **không** tự chạy lại im lặng.
-- Dùng nút **Re-run** trên board để chạy lại (mỗi gate iframe được cache-bust).
+- Mở Status tải `_audit/run.html`, **tự chạy** board nhanh một lần.
+- Storybook có thể giữ iframe cache khi điều hướng đi rồi về — **không** tự chạy lại gates.
+- Dùng nút **Re-run** trên board để pass mới (mỗi iframe gate được cache-bust).
 
 ## Consumer portable (không đổi)
 
@@ -60,3 +65,5 @@ Consumer vẫn link `styles.css` / `_ds_bundle.js` / ESM / templates. **Không**
 npm run storybook          # Storybook sản phẩm tại http://localhost:6006
 npm run build:site         # đóng gói Storybook tại .vercel-static/ (root `/`)
 ```
+
+Mở **Templates → Gallery → Atomic gallery** hoặc **Templates → HR → …** cho Employment Suite.

package/docs/vi/quality-gates.md

@@ -13,13 +13,13 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | Contrast guard | `_audit/contrast-guard.html` | Không base rule sơn umber trên bề mặt themeable mà thiếu dark override; mọi cặp text×surface semantic ghi điểm light và dark | 0 rule không shield và 0 cặp fail (`__contrastguard`) | Hard | Fast board CI |
 | Axes guard | `_audit/axis-guard.html` | Không live source đưa lại bề mặt sản phẩm Expression/Density đã nghỉ | 0 hit trên source index bởi manifest (`__axisguard`) | Hard | Fast board CI |
 | Manifest CSS paths | `_audit/manifest-css-guard.html` | Mọi entry `globalCssPaths` của `_ds_manifest.json` tồn tại như raw CSS; mọi `@import` của `styles.css` được liệt kê | 0 thiếu / 0 chưa liệt kê (`__cssguard`) | Hard | Fast board CI |
-| Docs consistency | `_audit/docs-consistency.html` | Mọi claim đếm trong README/SKILL/llms.txt khớp compiler manifest; claim số card trong prose audit (`_audit/index` / README / namespace-portability) khớp `manifest.cards`; `VERSION` semver và `package.json` khớp (pin theo file; auto-bump trên main; LAUNCH đầu tiên là 1.1.0); không tham chiếu changelog-file; blacklist stale-phrase sạch trên README/SKILL/llms + `docs/*.md`; `DESIGN.md` stamp = `VERSION`; routing agent trung thực; doctrine↔source — 10 role accent (gồm `on-strong`), depth scale đủ, default lang `vi`, breakpoint CSS↔JSON, fallback depth trong `base/` | 0 claim lệch + doctrine parity (`__docs`) | Hard | Fast board CI + merge blocker |
+| Docs consistency | `_audit/docs-consistency.html` | Mọi claim đếm trong README/SKILL/llms.txt khớp compiler manifest; claim số card trong prose audit (`_audit/index` / README / namespace-portability) khớp `manifest.cards`; `VERSION` semver và `package.json` khớp (auto-bump trên main); không tham chiếu changelog-file; blacklist stale-phrase sạch trên README/SKILL/llms + `docs/*.md`; `DESIGN.md` stamp = `VERSION`; routing agent trung thực; doctrine↔source — 10 role accent (gồm `on-strong`), depth scale đủ, default lang `vi`, breakpoint CSS↔JSON, fallback depth trong `base/` | 0 claim lệch + doctrine parity (`__docs`) | Hard | Fast board CI + merge blocker |
 | Asset-weight budget | `_audit/asset-weight-budget.html` | WebP aurora elemental (`assets/aurora-{tho,hoa,thuy,moc,kim}.webp`) dưới trần hồi quy (≤300 KB/file, ≤1.2 MB cả bộ); PNG aurora legacy thì fail; CSS wash không được trỏ JPEG Thổ | Cả năm dưới trần (`__assetweight`) | Hard | Fast board CI (+ Node twin `test-docs-consistency.mjs`) |
 | Docs language parity | `_audit/docs-lang-parity.html` | Mọi EN `docs/*.md` hướng operator có counterpart `docs/vi/`; VI không phải stub trống/TODO (≥40% độ dài EN); blacklist stale-phrase sạch trên cả EN và VI (ghi chú lịch sử dưới `_audit/archive/` không được theo dõi) | 0 cặp thiếu, 0 stub, 0 blacklist hit (`__docslangparity`) | Hard | Fast board CI |
 | Docs Storybook coverage | `_audit/docs-storybook-coverage.html` | HTML sống: catalog đã xuất bản + `/docs/**` + viewer + file entrance; title `index.json` Storybook khi có (không fetch `.storybook/` / `stories/` chưa xuất bản). Node twin: nguồn CSF/MDX + `staticDirs` | 0 trang / mục viewer thiếu (`__docssbcoverage`) | Hard | Fast board CI + unit twin |
 | Docs link check | `_audit/docs-link-check.html` | HTML sống: markdown đã xuất bản + link viewer resolve; không path đã nghỉ. Node twin còn quét `href`/`src` MDX chưa xuất bản | 0 link trong-repo gãy (`__docslinkcheck`) | Hard | Fast board CI + unit twin |
 | DESIGN.md parity | `_audit/design-md-parity.html` | Root `DESIGN.md` (open-spec Stitch) byte-equals regeneration trong trình duyệt từ `tokens.dtcg.json` + `_ds_manifest.json` + `VERSION` qua `scripts/design-md-lib.mjs` dùng chung; từng hàng token được re-check riêng (số hàng in kèm verdict) | Byte-identical + 0 hàng drift (`__designmd`) | Hard | Fast board CI |
-| Version stamp | `_audit/version-stamp.html` | `package.json`, meta `tokens.json`/`tokens.js`, DTCG `$extensions`, `provenance.json` release + dtcgStamp, front matter `DESIGN.md`, và `_esm/cs.mjs` `export const VERSION` đều bằng `VERSION` (pin theo file; auto-bump trên main; LAUNCH đầu tiên là 1.1.0) | Cả 9 stamp bằng nhau (`__versionstamp`) | Hard | Fast board CI |
+| Version stamp | `_audit/version-stamp.html` | `package.json`, meta `tokens.json`/`tokens.js`, DTCG `$extensions`, `provenance.json` release + dtcgStamp, front matter `DESIGN.md`, và `_esm/cs.mjs` `export const VERSION` đều bằng `VERSION` (auto-bump trên main) | Cả 9 stamp bằng nhau (`__versionstamp`) | Hard | Fast board CI |
 | Namespace portability | `_audit/namespace-portability.html` | Không source index bởi manifest hardcode hậu tố bundle project-id của compiler | 0 hậu tố hardcode (`__nsguard`) | Hard | Fast board CI |
 | Artifact head | `_audit/artifact-head.html` | Mọi template artifact có `<title>` và `<html lang>` (chuẩn head qua `ds-base`/compiler) | 0 thiếu title/lang (`__artifacthead`) | Hard | Fast board CI |
 | Overflow @320 | `_audit/responsive-overflow-320.html` | Chiều rộng reflow WCAG 1.4.10: template + kit ở 320px không overflow ngang | 0 bề mặt overflow (`__overflow320`) | Hard | Fast board CI |
@@ -34,16 +34,16 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 | Story coverage | `_audit/story-coverage.html` | Mọi primary bundle export có Atomic View story; primary tweakable trong `PLAYGROUND_REQUIRED` phải có playground `controls` + `renderC` | 0 story thiếu + 0 playground thiếu (`__storycov`) | Hard | Fast board CI |
 | Consumer smoke test | `_audit/consumer-smoke-test.html` | Đường consumer ngoài hoạt động: `styles.css` + `_ds_bundle.js` mount component thật và brand token tới Button đã render | Mọi assert mount + token pass (`__smoke`) | Hard | Fast board CI |
 | Bundle freshness | `_audit/bundle-freshness.html` | Mọi source ghi trong header `_ds_bundle.js` re-hash khớp sha-256 header (nhân bản trình duyệt của `ci/check-bundle-freshness.mjs`; script Node vẫn là authority CI và còn khám phá file mới); source component manifest ⊆ header | 0 source drift / thiếu (`__bundlefresh`) | Hard | Fast board CI (+ Node authority trong `node-prechecks`) |
-| ESM smoke test | `_audit/esm-smoke-test.html` | `_esm/cs.mjs` import không cần build, re-export mọi component manifest, `VERSION` bằng pin `VERSION` gốc, và Button mount nhận brand token | Export/manifest parity + pin VERSION + kiểm token (`__esm`) | Hard | Fast board CI |
+| ESM smoke test | `_audit/esm-smoke-test.html` | `_esm/cs.mjs` import không cần build, re-export mọi component manifest, `VERSION` bằng root `VERSION`, và Button mount nhận brand token | Export/manifest parity + khớp VERSION + kiểm token (`__esm`) | Hard | Fast board CI |
 | Package exports integrity | `_audit/package-exports-integrity.html` | Mọi entry `files` của `package.json` và mọi target `module`/`types`/`style`/`exports` tồn tại; mọi target entry-point được `files` phủ (pack-safe); dual entry — `_esm/react.mjs` (mặc định / `./react`, React peer) + `_esm/cs.mjs` (`./legacy`) — hình ESM và re-export ⊆ export lộ trong header bundle | 0 thiếu / chưa phủ / lạ (`__pkgexports`) | Hard | Fast board CI |
 | Component children | `_audit/component-children-test.html` | Component void-element (Checkbox, Radio, Switch, SearchField, NumberField, Slider, Divider, TextField) mount với child lạc mà không throw React #137 | 0 throw (`__result.anyThrew === false`) | Hard | Fast board CI |
 | Component behavior | `_audit/component-behavior-test.html` | 79 assert tương tác thật — mọi public primary có hợp đồng tương tác người dùng (overlay, form, AI gate, shell, media/copy) cộng toast trên dialog; primary chỉ hiển thị loại trừ theo thiết kế | 79/79 assert pass (`__behavior`) | Hard | Fast board CI |
 | A11y interactions | `_audit/a11y-gate.html` | Focus trap/restore, roving, Mentions APG + Sortable buttons (hard-fail), role/label, open-state Esc | Mọi assert keyboard/ARIA pass (`__a11y`) | Hard | Fast board CI |
 | A11y CSSOM | `_audit/a11y-harness.html` | Mọi control `.cs-*` tương tác đạt floor touch-target đã ghi dưới coarse pointer; focus-ring, reduced-motion, và contrast rule chứng minh trong source CSS | 0 vi phạm floor, mọi source proof tìm thấy (`__a11ycss`) | Hard | Fast board CI |
 | Template schema v2 | `_audit/template-schema-test.html` | Mọi sidecar `content-schema.json` validate theo JSON Schema, mọi slot id khai báo resolve tới `{{ hole }}` thật trong template, và mọi template lộ **content** hole author được đều có sidecar (hole trục/control-flow và tweak boolean được loại trừ — xem `docs/template-schema-v2.md`) | 0 sidecar invalid, 0 slot id treo, 0 template hole-driven thiếu sidecar (`__schemav2`) | Hard | Fast board CI |
-| Support runtime identity | `_audit/support-runtime-identity.html` | Mọi bản `templates/*/support.js` (một mỗi template, 84) byte-identical: sha-256 qua SubtleCrypto, đúng một hash duy nhất, số bản == số template manifest | 1 hash duy nhất, count khớp (`__supportid`) | Hard | Fast board CI |
+| Support runtime identity | `_audit/support-runtime-identity.html` | Mọi bản `templates/*/support.js` (một mỗi template, 85) byte-identical: sha-256 qua SubtleCrypto, đúng một hash duy nhất, số bản == số template manifest | 1 hash duy nhất, count khớp (`__supportid`) | Hard | Fast board CI |
 | Bilingual parity | `_audit/bilingual-parity.html` | Mọi component trong `components/_i18n/strings.js` có bảng en + vi với key set bằng nhau và không giá trị rỗng | 0 key thiếu/thừa, 0 giá trị rỗng (`__bilingual`) | Hard | Fast board CI + merge blocker |
-| Template language parity | `_audit/template-lang-parity.html` | Quét source tĩnh cả 84 `.dc.html`: en/vi hole-map key set giống và không rỗng (21 map template); nhánh `sc-if` `isEN`/`isVN` cặp (24 branch template); mọi template có language-tweak có cơ chế bilingual; lexicon EN-leak (Unsubscribe · View in browser · Preferences · All rights reserved · Manage subscription · Sent with) không bao giờ xuất hiện ngoài guard `isEN` / map `en`. Instrument VN-first stacked (37 `vn-*` + 3 `doc-*`) miễn leak theo thiết kế — cả hai ngôn ngữ luôn render | 0 key drift, 0 nhánh không cặp, 0 leak (`__langparity`) | Hard | Fast board CI |
+| Template language parity | `_audit/template-lang-parity.html` | Quét source tĩnh cả 85 `.dc.html`: en/vi hole-map key set giống và không rỗng (21 map template); nhánh `sc-if` `isEN`/`isVN` cặp (24 branch template); mọi template có language-tweak có cơ chế bilingual; lexicon EN-leak (Unsubscribe · View in browser · Preferences · All rights reserved · Manage subscription · Sent with) không bao giờ xuất hiện ngoài guard `isEN` / map `en`. Instrument VN-first stacked (38 `vn-*` + 3 `doc-*`) miễn leak theo thiết kế — cả hai ngôn ngữ luôn render | 0 key drift, 0 nhánh không cặp, 0 leak (`__langparity`) | Hard | Fast board CI |
 | APCA dark packs | `_audit/apca-dark-preview.html` | Cả 15 pack element×variant giữ mục tiêu APCA ở dark (bright-as-text ≥ 75, accent UI ≥ 60, ink-on-accent ≥ 75, ink-on-tint ≥ 75) | 0 fail hiện tại (`__apcaPreview.currentFail === 0`) | Hard | Fast board CI |
 | Element geometry | `_audit/element-geometry.html` | Sync cường độ soft/middle/deep giữa năm element; tách variant; khóa hue light↔dark; Thổ middle ghim ochre logo; pack generate từ seed | `__elementgeometry.pass` | Hard | Fast board CI |
 | Style contract | `_audit/style-contract.html` | Allowlist trục Style: sole pack `liquid-glass` (vắng ≡ mặc định); `styles.css` import `tokens/styles.css`; `--cs-style-pack` resolve; không `data-cs-style` lạ | `__stylecontract.pass` | Hard | Fast board CI |
@@ -57,7 +57,7 @@ Nguyên tắc benchmark (WCAG · APCA · OKLCH · DTCG · doctrine CDS + mở r
 
 | Gate | File | Assert gì | Tiêu chí pass | Loại | Chạy ở đâu |
 |---|---|---|---|---|---|
-| Responsive overflow | `_audit/responsive-overflow.html` | Mọi template (84) + 3 UI kit render ở 390 px không horizontal document overflow | 0 bề mặt overflow (`__overflow`) | Hard | Whole-set CI (mọi PR + nightly) |
+| Responsive overflow | `_audit/responsive-overflow.html` | Mọi template (85) + 3 UI kit render ở 390 px không horizontal document overflow | 0 bề mặt overflow (`__overflow`) | Hard | Whole-set CI (mọi PR + nightly) |
 | Language overflow | `_audit/language-overflow.html` | Cùng set ép Tiếng Việt: VN áp dụng, không overflow, không clip chữ trong hộp fixed/nowrap, và chuỗi EN built-in đã biết (hint PromptInput, FileUpload, pin DataGrid, …) không rò | 0 over/clip/EN-leak (`__language`) | Hard | Whole-set CI (mọi PR + nightly) |
 | Theme overflow | `_audit/theme-overflow.html` | Cùng set ép dark: dark áp dụng, không document overflow, và không fail WCAG leaf-text solid-bg tái lập được ngoài `REVIEWED_OK` | Dark áp dụng + 0 overflow + 0 contrast mở (`__theme`) | Hard (chỉ near-miss allowlist) | Whole-set CI (mọi PR + nightly) |
 

package/docs/vi/release-notes.md

@@ -1,6 +1,10 @@
 # Ghi chú phát hành
 
-Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. **Pin hiện tại theo `VERSION`** (auto-bump khi push lên `main` từ Conventional Commits; owner vẫn có thể force bump). LAUNCH đầu tiên là **1.1.0**. Chân lý kỹ thuật là tip repo; chân lý hướng sản phẩm là trang này (đồng bộ Storybook **Release Notes**). Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+Điểm nổi bật sản phẩm cho operator — **không** phải git log và **không** phải `CHANGELOG.md`. Hệ thống thiết kế không maintain file changelog. VERSION **1.4.0** (auto-bump khi push lên `main` từ Conventional Commits; owner vẫn có thể force bump). Chân lý kỹ thuật là tip repo; chân lý hướng sản phẩm là trang này (đồng bộ Storybook **Release Notes**). Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+
+## Release — `@cyberskill/design@1.3.10`
+
+Docs: một VERSION duy nhất trên surface operator (không lead-in “pin” / LAUNCH kép). Các mục Release / Patch / LAUNCH bên dưới giữ làm archive có ngày.
 
 ## Release — `@cyberskill/design@1.3.9`
 

package/docs/vi/storybook.md

@@ -1,6 +1,6 @@
 # Storybook — bề mặt sản phẩm tại `/` (host)
 
-Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill.world` (`/`). Nó vẫn **không** thuộc hợp đồng consumer portable. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
+Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill.world` (`/`). Vẫn **không** thuộc hợp đồng consumer portable. Xuất bản trên Storybook **Docs** tại `design.cyberskill.world`.
 
 ## URL
 
@@ -14,44 +14,48 @@ Storybook **10** là **site sản phẩm** cho operator trên `design.cyberskill
 ## Nội dung
 
 - CSF component đầy đủ với **Default + ma trận điều khiển sâu** (`Matrix` / `AllVariants`)
-- **CSF bar (exhaustive khi các trục tồn tại):**
-  - `AllSizes` khi `argTypes.size` tồn tại (token ramp hoặc size số đại diện)
-  - `States` (hoặc subsection Matrix) phủ `disabled` / `loading` / `error` / `busy` khi các argTypes đó tồn tại
-  - Mọi option enum `size` / `variant` rời rạc được mount trong story họ matrix
-  - `FullMatrix` khi ≥1 trong {size enums, variant enums, state keys} tồn tại — tích size × variant × key-state qua helper chung `stories/lib/matrix.jsx`
-- Toolbar globals: Theme (light · dark · **system**) × Element × Language × Style (cùng trục với template / Atomic View). Element liệt kê **đủ 15** pack Ngũ Hành (`tokens.elements` / EL map template / Storybook toolbar) — không phải tập con. Pack Style duy nhất là **liquid-glass**.
-- **Docs/** tài liệu operator đã xuất bản — lồng **Start / Guides / Maintainers**, MDX curated cho trang traffic cao, một story sidebar mỗi trang markdown tracked, và iframe Thư viện tài liệu `/docs/viewer.html` (EN·VI). Prose chuẩn vẫn là `docs/*.md`; Storybook là bề mặt đọc sống. **Release Notes/** prose sản phẩm curated (**không CHANGELOG.md**); **Status/** nhúng `_audit/run.html` full-bleed
-- Story **Maintainer/** cho bề mặt HTML portable (Motion, templates, kitchen-sink, AI cluster, RTL; Atomic View chôn cho gates)
-- Cùng `styles.css` như production
-- Addon: `@storybook/addon-docs` + `@storybook/addon-a11y` (essentials gộp vào core ở SB10)
+- **CSF bar (exhaustive khi có trục):**
+  - `AllSizes` khi có `argTypes.size`
+  - `States` (hoặc subsection Matrix) cho `disabled` / `loading` / `error` / `busy` khi có argTypes
+  - Mọi option enum `size` / `variant` gắn trong story họ matrix
+  - `FullMatrix` khi ≥1 trong {size enums, variant enums, state keys} — tích size × variant × key-state qua helper `stories/lib/matrix.jsx`
+- Toolbar globals: Theme (light · dark · **system**) × Element × Language × Style (cùng trục với templates / Atomic View). Element liệt kê **đủ 15** pack Ngũ Hành. Style chỉ có **liquid-glass**.
+- **Docs/** tài liệu operator đã xuất bản — **Start / Guides / Maintainers**, MDX curated, một story sidebar mỗi trang markdown tracked, và iframe Thư viện tài liệu `/docs/viewer.html` (EN·VI). Prose canonical vẫn `docs/*.md`. **Release Notes/** prose curated (**không CHANGELOG.md**); **Status/** embed `_audit/run.html` full-bleed
+- **Templates/** điểm bắt đầu công khai — Gallery (tier Templates của Atomic View + kitchen-sink/playground) và mọi template manifest theo category Atomic View (gồm **HR** / `vn-*`). Regen CSF bằng `node scripts/generate-template-stories.mjs` sau khi đổi tên template
+- **Pages/** UI kit công khai (Status Hub, Marketing site, Slide deck)
+- **Maintainer/** story cho HTML portable (Motion, mirror kit, demo template, AI cluster, RTL; Atomic View cho gates)
+- Cùng `styles.css` production
+- Addon: `@storybook/addon-docs` + `@storybook/addon-a11y`
 
 ## Config
 
-- `.storybook/main.js` — config Storybook 10 ESM, Vite + alias `@cs` → `components/`, **`base: '/'`** cho asset tại domain root
-- `.storybook/manager-head.html` — meta OG / canonical cho bề mặt production `/`
-- Autodocs qua `tags: ['autodocs']` trên CSF meta (không `docs.autodocs` trong main)
+- `.storybook/main.js` — ESM Storybook 10, Vite + alias `@cs` → `components/`, **`base: '/'`**
+- `.storybook/manager-head.html` — meta OG / canonical cho `/` production
+- `.storybook/preview.jsx` — thứ tự `storySort`: Docs · Foundations · Components · **Templates** · **Pages** · A11y · I18n · Release Notes · Status · Maintainer
+- Autodocs qua `tags: ['autodocs']` trên CSF meta
 
 ## Consumer vẫn dùng (không đổi)
 
-| Audience | Consume |
+| Đối tượng | Tiêu thụ |
 |---|---|
-| Static / bất kỳ framework | `styles.css` + `.cs-*` |
+| Static / mọi framework | `styles.css` + `.cs-*` |
 | React production | `styles.css` + `_ds_bundle.js` |
-| ESM (bundler) | `_esm/react.mjs` (mặc định / `@cyberskill/design/react`) |
-| ESM (browser legacy) | `_esm/cs.mjs` (`@cyberskill/design/legacy`) |
+| ESM (bundler) | `_esm/react.mjs` |
+| ESM (browser legacy) | `_esm/cs.mjs` |
 | Tokens | `tokens/*` |
-| DC-capable authoring | `templates/**/*.dc.html` |
+| Authoring DC | `templates/**/*.dc.html` |
 
 ## Lệnh
 
 ```bash
 npm install
 npm run storybook
-npm run build:storybook    # → storybook-static/ (base `/`)
-npm run build:site         # đóng gói Storybook tại root .vercel-static/
+npm run build:storybook
+npm run build:site
 npm run test:storybook-contract
+node scripts/generate-template-stories.mjs
 ```
 
 ## Bản đồ
 
-Bề mặt HTML portable iframe từ Maintainer/* được liệt kê trong `docs/live-hub.md`. Status nhúng `_audit/run.html` (auto-run lần đầu; **Re-run** khi cần).
+Templates/Pages công khai và iframe Maintainer nằm trong `docs/live-hub.md`. Map Word gốc HR Suite: `docs/hr-suite-sources.md`. Status embed `_audit/run.html`.

package/docs/vi/sync.md

@@ -39,7 +39,7 @@ Diff PR là lưới an toàn — nó hiện đúng những gì đổi kể từ
 ## Hygiene giữ round-trip sạch
 - **`.gitignore`** transient (`uploads/`, `scraps/`, `_audit/exports/`); commit mọi thứ khác, **kể cả `_esm/`** (xem trên — nó là source, không phải build artifact, dù có tiền tố `_`). Compiled `_ds_bundle.js`/manifest được commit cho consumer không có bước build, nhưng kỳ vọng churn — hoặc ignore và để mỗi session regenerate.
 
-- **`VERSION` pin theo file** (auto-bump khi push lên `main` qua `.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`; LAUNCH đầu tiên là **1.1.0**; owner vẫn có thể force bump). Không maintain file changelog. Continuity là git history; việc maintainer đang mở nằm ở `docs/decisions.md`.
+- **`VERSION` bằng root VERSION** (auto-bump khi push lên `main` qua `.github/workflows/version.yml` → tag `v*` → `npm-publish.yml`; owner vẫn có thể force bump). Không maintain file changelog. Continuity là git history; việc maintainer đang mở nằm ở `docs/decisions.md`.
 
 - **Một nguồn chân lý tại một thời điểm.** Đừng sửa repo và project Claude Design song song rồi push cả hai — pull, làm việc, push, theo thứ tự đó, để repo luôn là điểm merge.
 

package/docs/viewer.html

@@ -69,12 +69,12 @@
 <script>
 const DOCS_EN=[
  ['Start',[['README.md','README'],['SKILL.md','SKILL (agent rules)'],['llms.txt','llms.txt'],['CONTRIBUTING.md','Contributing']]],
- ['Guides',[['docs/consuming.md','Consuming & upgrading'],['docs/consumer-grant.md','Consumer grant (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template content-schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Release Notes'],['docs/release-runbook.md','Release runbook'],['docs/storybook.md','Storybook (product at /)'],['docs/live-hub.md','Live hub (Storybook at /)'],['docs/design-styles.md','Design styles'],['docs/benchmark-rubric.md','Benchmark rubric'],['docs/products.md','Products'],['docs/contrast-report.md','Contrast report'],['docs/figma.md','Figma']]],
+ ['Guides',[['docs/consuming.md','Consuming & upgrading'],['docs/consumer-grant.md','Consumer grant (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template content-schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Release Notes'],['docs/release-runbook.md','Release runbook'],['docs/storybook.md','Storybook (product at /)'],['docs/live-hub.md','Live hub (Storybook at /)'],['docs/hr-suite-sources.md','HR Suite sources (DOCX ↔ templates)'],['docs/design-styles.md','Design styles'],['docs/benchmark-rubric.md','Benchmark rubric'],['docs/products.md','Products'],['docs/contrast-report.md','Contrast report'],['docs/figma.md','Figma']]],
  ['Maintainers',[['docs/doctrine.md','Doctrine'],['docs/decisions.md','Decisions'],['docs/ci-cd.md','CI/CD automation'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Git sync & hygiene']]]
 ];
 const DOCS_VI=[
  ['Bắt đầu',[['README.md','README (EN)'],['SKILL.md','SKILL (EN)'],['llms.txt','llms.txt (EN)'],['CONTRIBUTING.md','Contributing (EN)']]],
- ['Hướng dẫn',[['docs/consuming.md','Tiêu thụ & nâng cấp'],['docs/consumer-grant.md','Grant consumer (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Ghi chú phát hành'],['docs/release-runbook.md','Runbook phát hành'],['docs/storybook.md','Storybook (sản phẩm tại /)'],['docs/live-hub.md','Live hub (Storybook tại /)'],['docs/design-styles.md','Phong cách'],['docs/benchmark-rubric.md','Rubric benchmark'],['docs/products.md','Sản phẩm'],['docs/contrast-report.md','Báo cáo contrast'],['docs/figma.md','Figma']]],
+ ['Hướng dẫn',[['docs/consuming.md','Tiêu thụ & nâng cấp'],['docs/consumer-grant.md','Grant consumer (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Ghi chú phát hành'],['docs/release-runbook.md','Runbook phát hành'],['docs/storybook.md','Storybook (sản phẩm tại /)'],['docs/live-hub.md','Live hub (Storybook tại /)'],['docs/hr-suite-sources.md','Nguồn HR Suite (DOCX ↔ templates)'],['docs/design-styles.md','Phong cách'],['docs/benchmark-rubric.md','Rubric benchmark'],['docs/products.md','Sản phẩm'],['docs/contrast-report.md','Báo cáo contrast'],['docs/figma.md','Figma']]],
  ['Maintainer',[['docs/doctrine.md','Học thuyết'],['docs/decisions.md','Quyết định'],['docs/ci-cd.md','CI/CD'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Đồng bộ Git']]]
 ];
 let lang=(localStorage.getItem('cs-docs-lang')==='vi')?'vi':'en';

package/llms.txt

@@ -1,6 +1,6 @@
 # CyberSkill Design System
 
-> HTML-first, Vietnamese-first design system, current **v1.3.10** (first LAUNCH **v1.1.0**). Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 106 components / 122 exports, 84 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each **capability** to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.3.10**, no CHANGELOG.
+> HTML-first, Vietnamese-first design system, VERSION **1.4.0**. Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 106 components / 122 exports, 85 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each **capability** to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.4.0**, no CHANGELOG.
 
 The portable contract covers browser and bundler entry points: `styles.css` · `_esm/cs.mjs` legacy · `_ds_bundle.js` · tokens work without a build step; `_esm/react.mjs` is bundler-native JSX (Next/Vite must transpile — not a bare-browser import). The DC layer (`templates/**/*.dc.html`) needs a **Design Components compiler**. **Google Stitch must not treat `*.dc.html` as source of truth** — use `DESIGN.md`, DTCG, `styles.css`, kitchen-sink, and `.cs-*` static HTML instead. Dual path: [docs/consuming.md](docs/consuming.md). The full non-negotiables list lives in `CONTRIBUTING.md` and `docs/doctrine.md`. Operator docs are published on the Storybook **Docs** sidebar at `design.cyberskill.world`.
 
@@ -28,10 +28,10 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [tokens/](tokens/): design tokens as CSS custom properties + `tokens.json` / `tokens.js` / `tokens.dtcg.json` (W3C DTCG) + `viewer.html` (table + raw modes) + `native/` (SwiftUI/Compose/Flutter)
 - [base/](base/): reset, component classes (`.cs-*`), a11y, responsive, glass
 - [components/](components/): 106 components / 122 exports — every primary ships `.jsx` + `.d.ts` + `.prompt.md` + a `@dsCard` card; co-exports are documented in their parent's files
-- [templates/](templates/): 84 copyable starting points (`.dc.html`); `email-safe/` send-ready emails; `kitchen-sink.html`; `playground.html`
+- [templates/](templates/): 85 copyable starting points (`.dc.html`); `email-safe/` send-ready emails; `kitchen-sink.html`; `playground.html`
 - [guidelines/](guidelines/): specimen cards + `atomic-view.html` (portable component grid) — host product surface is Storybook at `/`
 - [examples/static-hello/](examples/static-hello/): zero-install static consumer (Stitch / plain HTML)
-- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.3.10` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
+- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.4.0` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
 - [examples/native/](examples/native/): SwiftUI / Compose / Flutter sample apps + store scaffolds — Compose is **Android Studio**-first (no committed `gradlew`; see `examples/native/README.md`)
 - [ui_kits/](ui_kits/): product recreations — status-hub · website · deck
 - [fonts/](fonts/): self-hosted Be Vietnam Pro (UI) + Space Grotesk (opt-in display, `--cs-font-family-display`) + JetBrains Mono woff2
@@ -41,14 +41,14 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [SKILL.md](SKILL.md): agent entry — hard rules + fast orientation
 - [CONTRIBUTING.md](CONTRIBUTING.md): one-page onboarding for extending the system
 - [docs/doctrine.md](docs/doctrine.md): expansion rule, verification depth, immutables
-- [VERSION](VERSION): pinned 1.3.10 (matches [package.json](package.json))
+- [VERSION](VERSION): 1.3.10 (matches [package.json](package.json))
 
 ## Docs — consumers
 
 Published on Storybook **Docs** (`design.cyberskill.world`) and in [docs/viewer.html](docs/viewer.html) (EN|VI).
 
 - [docs/consuming.md](docs/consuming.md): adopting & upgrading, DC-capable vs static dual path, package name `@cyberskill/design`; first registry install at [examples/npm-hello/](examples/npm-hello/) (Lumi · Hỏa · plasma); native mirrors at [examples/native/](examples/native/) (SwiftUI / Compose / Flutter samples)
-- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.3.10` Trusted Publishing / grant pointer
+- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.4.0` Trusted Publishing / grant pointer
 - [docs/consumer-grant.md](docs/consumer-grant.md): written npm grant (CyberSkill portfolio; UNLICENSED)
 - [docs/conventions.md](docs/conventions.md): authoring rules (naming grammar, the four axes)
 - [docs/design-styles.md](docs/design-styles.md): the live styling axes and the fixed liquid-glass treatment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberskill/design",
-  "version": "1.3.10",
+  "version": "1.4.0",
   "private": false,
   "publishConfig": {
     "access": "public"

package/templates/doc-suite-index/DocSuiteIndex.dc.html

@@ -170,6 +170,7 @@ const sections = [
         { vi:"Thỏa thuận bảo mật song phương", en:"Mutual NDA", code:"vn-mutual-nda" },
       ]},
       { vi:"H · Pháp lý, tài chính & bán hàng", en:"Legal, finance & sales (client-facing)", rows:[
+        { vi:"Hợp đồng nguyên tắc (dịch vụ & tài khoản phần mềm)⚠", en:"Framework Agreement (software services)⚠", code:"vn-framework-agreement" },
         { vi:"Hợp đồng dịch vụ khung", en:"Master Services Agreement", code:"legal-msa" },
         { vi:"Bản mô tả công việc (client SOW)", en:"Statement of Work", code:"legal-sow" },
         { vi:"Hóa đơn", en:"Invoice", code:"finance-invoice" },

package/templates/vn-framework-agreement/VnFrameworkAgreement.dc.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="vi">
+<head>
+<title>HR Suite · Hợp đồng nguyên tắc — Framework Agreement · CyberSkill</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="omelette-owns-print" content="1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<!-- @template name="HR Suite · Hợp đồng nguyên tắc — Framework Agreement" description="Commercial framework agreement for software services & account provisioning (specimen: Ban QLDA Bình Quới) — Party blocks, subject matter, delivery & payment, responsibilities, general terms, dual signature. A4, VN·EN stacked, print-ready. Counsel review before real use. Not an employment instrument." -->
+<helmet>
+<script src="./ds-base.js"></script>
+<style>@page{size:A4;margin:23mm 20mm 20mm 20mm}@media print{html,body{background:#fff!important}.cs-desk{background:#fff!important;padding:0!important;min-height:0!important}.cs-sheet{box-shadow:none!important;border:none!important;max-width:none!important;border-radius:0!important;padding:0!important}.cs-avoid{break-inside:avoid}}</style>
+</helmet>
+<div lang="vi" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" class="cs-desk" style="background:#efe6d8;min-height:100vh;padding:40px 16px;font-family:var(--cs-font-family-ui);color:var(--cs-doc-ink)">
+  <div class="cs-sheet" style="max-width:794px;margin:0 auto;background:#fff;border:1px solid var(--cs-color-border-default);border-radius:12px;box-shadow:var(--cs-shadow-md);padding:56px 60px;text-align:left">
+    <div style="display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--cs-color-text-muted);padding-bottom:6px;border-bottom:1px solid var(--cs-color-border-default);margin-bottom:14px">
+      <x-import component-from-global-scope="CyberSkillDS.Logo" size="18" hint-size="18px,18px"></x-import>
+      <b style="color:var(--cs-color-brand-umber)">CyberSkill</b><span>· Hợp đồng nguyên tắc (dịch vụ &amp; tài khoản phần mềm)</span><span style="margin-left:auto;font-family:var(--cs-font-family-mono)">Số/No. <span style="background:var(--cs-doc-fill);padding:0 3px">.....</span>/2026/HĐNT-CYBERSKILL</span>
+    </div>
+
+    <div class="cs-avoid" style="border:1.5px solid var(--cs-color-semantic-warning);background:#FDF6EC;border-radius:var(--cs-radius-md);padding:10px 14px;margin-bottom:14px;font-size:12px;line-height:1.55;color:var(--cs-color-semantic-warning);font-weight:600">⚠ Cần luật sư / tư vấn pháp lý rà soát trước khi dùng thật — đây là hợp đồng thương mại (không phải quan hệ lao động). <span style="font-weight:400">· Counsel review required before real use — commercial framework (not employment).</span></div>
+
+    <div class="cs-avoid" style="display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-bottom:18px">
+      <div><div style="font-weight:800;font-size:11.5px;line-height:1.45">CÔNG TY CỔ PHẦN TƯ VẤN VÀ PHÁT TRIỂN GIẢI PHÁP PHẦN MỀM CYBERSKILL</div><div style="font-size:10px;color:var(--cs-doc-slate);font-style:italic;line-height:1.45;margin-top:2px">CyberSkill Software Solutions Consultancy and Development Joint Stock Company</div></div>
+      <div style="text-align:center"><div style="font-weight:800;font-size:11.5px;line-height:1.5">CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM</div><div style="font-weight:700;font-size:11px">Độc lập - Tự do - Hạnh phúc</div><div style="letter-spacing:0.1em;font-size:10px;margin:1px 0">———————————</div><div style="font-size:9.5px;color:var(--cs-doc-slate);font-style:italic;line-height:1.4">The Socialist Republic of Vietnam · Independence - Freedom - Happiness</div><div style="font-size:10.5px;margin-top:4px">Thành phố Hồ Chí Minh, ngày <span style="background:var(--cs-doc-fill);padding:0 3px">...</span> tháng <span style="background:var(--cs-doc-fill);padding:0 3px">...</span> năm <span style="background:var(--cs-doc-fill);padding:0 3px">...</span></div></div>
+    </div>
+
+    <div class="cs-avoid" style="text-align:center;margin-bottom:14px">
+      <h1 style="font-size:20px;font-weight:800;color:var(--cs-color-brand-umber);letter-spacing:-0.01em;margin:0 0 3px;line-height:1.25">HỢP ĐỒNG NGUYÊN TẮC</h1>
+      <div style="font-size:13px;font-weight:700;color:var(--cs-color-brand-umber);margin:0 0 4px">VỀ CUNG CẤP DỊCH VỤ VÀ TÀI KHOẢN PHẦN MỀM</div>
+      <div style="font-size:12.5px;color:var(--cs-doc-slate);font-style:italic">Framework Agreement — Software services &amp; account provisioning</div>
+      <div style="color:var(--cs-accent);font-size:13px;letter-spacing:0.5em;margin-top:10px">◆ ◆ ◆</div>
+    </div>
+
+    <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Căn cứ Luật Thương mại số 36/2005/QH11; Bộ luật Dân sự số 91/2015/QH13 và các quy định pháp luật có liên quan;</p>
+    <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">Pursuant to Commercial Law No. 36/2005/QH11; Civil Code No. 91/2015/QH13 and other applicable laws;</p>
+    <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Căn cứ chức năng, nhiệm vụ và nhu cầu của hai Bên.</p>
+    <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">Pursuant to each Party’s functions, duties, and requirements.</p>
+    <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Hôm nay, ngày <span style="background:var(--cs-doc-fill);padding:0 3px">....</span> tháng <span style="background:var(--cs-doc-fill);padding:0 3px">....</span> năm <span style="background:var(--cs-doc-fill);padding:0 3px">....</span>, tại Thành phố Hồ Chí Minh, hai Bên gồm:</p>
+    <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 12px">Today, <span style="background:var(--cs-doc-fill);padding:0 3px">....</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">....</span> / <span style="background:var(--cs-doc-fill);padding:0 3px">....</span>, in Ho Chi Minh City, the Parties are:</p>
+
+    <div class="cs-avoid" style="margin-bottom:12px">
+      <div style="font-weight:800;font-size:12.5px;color:var(--cs-color-brand-umber);margin-bottom:4px">BÊN A · BÊN CUNG CẤP <span style="font-weight:400;color:var(--cs-doc-slate);font-style:italic">Party A · The Provider</span></div>
+      <table style="width:100%;border-collapse:collapse;font-size:12.5px">
+        <tbody>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;width:190px;vertical-align:top;background:var(--cs-color-brand-umber);color:#fff;font-weight:700" colspan="2">Thông tin Bên A · Party A</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;width:190px;vertical-align:top">Công ty<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Company</div></td><td style="padding:5px 10px">Công Ty Cổ Phần Tư Vấn Và Phát Triển Giải Pháp Phần Mềm CyberSkill</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Mã số thuế<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Tax code</div></td><td style="padding:5px 10px">0316475200</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Địa chỉ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Address</div></td><td style="padding:5px 10px">Tầng 1, 207A Nguyễn Văn Thủ, Phường Tân Định, Thành phố Hồ Chí Minh</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Đại diện<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Represented by</div></td><td style="padding:5px 10px">Ông Trịnh Thái Anh (Mr. Stephen) · Tổng Giám đốc / <span style="color:var(--cs-doc-slate);font-style:italic">CEO</span></td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Điện thoại · Email<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Tel · Email</div></td><td style="padding:5px 10px">(+84) 906 878 091 · info@cyberskill.world</td></tr>
+          <tr><td style="padding:5px 10px;vertical-align:top">Tài khoản / Ngân hàng<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Bank account</div></td><td style="padding:5px 10px">290815888 — Ngân hàng TMCP Á Châu (ACB) — Hội sở TP.HCM</td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="cs-avoid" style="margin-bottom:12px">
+      <div style="font-weight:800;font-size:12.5px;color:var(--cs-color-brand-umber);margin-bottom:4px">BÊN B · BÊN SỬ DỤNG <span style="font-weight:400;color:var(--cs-doc-slate);font-style:italic">Party B · The Customer</span></div>
+      <p style="font-size:11px;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">Specimen institutional counterparty (Ban QLDA Bình Quới). Yellow blanks for engagement-variable fields.</p>
+      <table style="width:100%;border-collapse:collapse;font-size:12.5px">
+        <tbody>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;width:190px;vertical-align:top;background:var(--cs-color-brand-umber);color:#fff;font-weight:700" colspan="2">Thông tin Bên B · Party B</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;width:190px;vertical-align:top">Đơn vị<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Entity</div></td><td style="padding:5px 10px">Ban Quản lý Dự án Đầu tư Xây dựng Phường Bình Quới</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Đại diện · Chức vụ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Represented by · Title</div></td><td style="padding:5px 10px">Ông Phan Ngọc Anh Huy · Giám đốc / <span style="color:var(--cs-doc-slate);font-style:italic">Director</span></td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Địa chỉ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Address</div></td><td style="padding:5px 10px">Cạnh Lô G, Cư xá Thanh Đa, Phường Bình Quới, Thành phố Hồ Chí Minh</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Mã ĐVQHNS<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Budget-unit code</div></td><td style="padding:5px 10px">3037251</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Tài khoản Kho bạc<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Treasury account</div></td><td style="padding:5px 10px">3713.0.3037251.00000 — Kho bạc Nhà nước Khu vực II — PGD số 6</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Mã số thuế<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Tax code</div></td><td style="padding:5px 10px">0319511859</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Email đơn vị<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Entity email</div></td><td style="padding:5px 10px">banqlda.phuongbinhquoi@gmail.com</td></tr>
+          <tr><td style="padding:5px 10px;vertical-align:top">Email tiếp nhận tài khoản<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Account recipient email(s)</div></td><td style="padding:5px 10px"><span style="background:var(--cs-doc-fill);padding:0 3px">................................................</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+
+    <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Sau khi thỏa thuận, hai Bên thống nhất ký Hợp đồng nguyên tắc với các điều khoản sau.</p>
+    <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 12px">Having agreed, the Parties enter into this Framework Agreement on the following terms.</p>
+
+    <div style="display:grid;gap:11px">
+      <div class="cs-avoid"><h2 style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">ĐIỀU 1 · NỘI DUNG HỢP ĐỒNG <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 1 · Subject matter</span></h2>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">1.1. Bên A cung cấp và cấp quyền truy cập các tài khoản/dịch vụ phần mềm cho Bên B, bao gồm tài khoản Google Earth Professional Advanced và các sản phẩm phần mềm trí tuệ nhân tạo (AI) theo đề nghị cung cấp dịch vụ của Bên B.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">1.1. Party A provisions and grants access to software accounts/services for Party B, including Google Earth Professional Advanced and AI software products per Party B’s service request.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">1.2. Số lượng, chủng loại, thời hạn và đơn giá chi tiết theo từng Báo giá/Đơn hàng được hai Bên xác nhận (bao gồm Gói Google Earth Professional Advanced, đơn giá <b>5.000.000 VNĐ</b> đã gồm VAT cho thời hạn <b>01 tháng</b>, trừ khi Báo giá khác ghi khác).</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0">1.2. Quantity, SKU, term, and unit price follow each confirmed Quotation/Order (including Google Earth Professional Advanced at <b>VND 5,000,000</b> incl. VAT for a <b>one-month</b> term, unless a Quotation states otherwise).</p></div>
+
+      <div class="cs-avoid"><h2 style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">ĐIỀU 2 · PHƯƠNG THỨC THANH TOÁN <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 2 · Delivery &amp; payment</span></h2>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">2.1. Căn cứ Báo giá/Đề nghị của Bên B, Bên A khởi tạo và cấp quyền truy cập tài khoản phần mềm qua địa chỉ email công việc của Bên B.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">2.1. Based on Party B’s Quotation/request, Party A activates and grants account access via Party B’s work email.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">2.2. Khi tiếp nhận quyền truy cập, Bên B kiểm tra số lượng, tính năng, thời hạn và ký Biên bản bàn giao/nghiệm thu với Bên A.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">2.2. On receiving access, Party B verifies quantity, features, and term, and signs the handover/acceptance minute with Party A.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">2.3. Căn cứ Biên bản bàn giao/nghiệm thu, Bên A xuất Hóa đơn điện tử (GTGT) và đề nghị thanh toán.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">2.3. Based on the handover/acceptance minute, Party A issues an e-VAT invoice and requests payment.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">2.4. Bên B thanh toán trong vòng <b>10 ngày làm việc</b> sau khi nhận đủ quyền truy cập, biên bản bàn giao và hóa đơn hợp lệ. Hình thức: chuyển khoản.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0">2.4. Party B pays within <b>10 business days</b> after receiving access, the handover minute, and a valid invoice. Method: bank transfer.</p></div>
+
+      <div class="cs-avoid"><h2 style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">ĐIỀU 3 · TRÁCH NHIỆM CÁC BÊN <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 3 · Responsibilities</span></h2>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px"><b>Bên A.</b> Bảo đảm tài khoản chính chủ, đúng chủng loại, thời hạn và gói đã thỏa thuận (kể cả Google Earth Professional Advanced với dung lượng lưu trữ đám mây 20 GB, dữ liệu lịch sử ảnh vệ tinh &amp; Street View, trợ lý AI Ask Google Earth, hỗ trợ kỹ thuật 24/5). Nếu lỗi kỹ thuật từ nhà cung cấp, Bên A xử lý hoặc cấp tài khoản thay thế trong 24 giờ; duy trì ổn định quyền truy cập và hỗ trợ trong suốt thời hạn dịch vụ. Phương thức giao nhận: cấp quyền qua email công việc của Bên B. Bộ chứng từ: hóa đơn điện tử (GTGT); biên bản bàn giao/cấp quyền; bảng báo giá đã xác nhận.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px"><b>Party A.</b> Warrants genuine accounts matching the agreed SKU, term, and pack (including Google Earth Professional Advanced with 20 GB cloud storage, historical satellite imagery &amp; Street View, Ask Google Earth AI assistant, and 24/5 technical support). On vendor-side technical faults, remediates or replaces within 24 hours; maintains access and support for the term. Delivery via Party B’s work email. Payment pack: e-VAT invoice; handover/access minute; confirmed quotation.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px"><b>Bên B.</b> Cung cấp danh sách email công việc của nhân sự tiếp nhận, số điện thoại và thông tin liên hệ; cử nhân viên phối hợp kiểm tra và tiếp nhận bàn giao; thanh quyết toán đúng hạn.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0"><b>Party B.</b> Provides recipient work emails, phone numbers, and contacts; assigns staff to verify and accept handover; settles payment on time.</p></div>
+
+      <div class="cs-avoid"><h2 style="font-size:12.5px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">ĐIỀU 4 · ĐIỀU KHOẢN CHUNG <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 4 · General</span></h2>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">4.1. Hai Bên thực hiện nghiêm các điều khoản trên cơ sở pháp luật Việt Nam. Mọi sửa đổi chỉ có hiệu lực khi có văn bản đồng ý của cả hai Bên.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">4.1. The Parties perform under Vietnamese law. Amendments are valid only if agreed in writing by both Parties.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">4.2. Khó khăn phát sinh được thương lượng thiện chí. Nếu không thỏa thuận được, tranh chấp giải quyết tại Trọng tài kinh tế hoặc Tòa án có thẩm quyền tại Thành phố Hồ Chí Minh; chi phí do bên có lỗi chịu.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">4.2. Difficulties are negotiated in good faith. Failing agreement, disputes go to economic arbitration or the competent court in Ho Chi Minh City; costs are borne by the at-fault party.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">4.3. Hợp đồng có hiệu lực từ ngày ký đến hết ngày <b>31 tháng 12 năm 2026</b>.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">4.3. This Agreement is effective from the signing date through <b>31 December 2026</b>.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">4.4. Trong vòng 30 ngày sau khi hoàn thành nghĩa vụ cung cấp và thanh toán cho mỗi đơn hàng/báo giá, nếu không có khiếu nại thì đơn hàng/báo giá đó được xem như nghiệm thu và thanh lý.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0 0 6px">4.4. Within 30 days after completing provisioning and payment for each order/quotation, absent complaint that order/quotation is deemed accepted and liquidated.</p>
+        <p style="font-size:13px;line-height:1.5;margin:0 0 1px">4.5. Hợp đồng lập thành 02 bản có giá trị như nhau, mỗi Bên giữ 01 bản.</p>
+        <p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:0">4.5. Made in two originals of equal validity, one retained by each Party.</p></div>
+    </div>
+
+    <div class="cs-avoid" style="display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:20px">
+      <div style="text-align:center"><div style="font-weight:700;font-size:12.5px">ĐẠI DIỆN BÊN A</div><div style="font-size:11px;color:var(--cs-doc-slate);font-style:italic">Party A representative</div><div style="font-size:10.5px;margin-top:1px">(Ký, ghi rõ họ tên / <i style="color:var(--cs-doc-slate)">Sign, full name</i>)</div><div style="height:64px"></div><div style="border-top:1px solid var(--cs-doc-ink);width:70%;margin:0 auto"></div></div>
+      <div style="text-align:center"><div style="font-weight:700;font-size:12.5px">ĐẠI DIỆN BÊN B</div><div style="font-size:11px;color:var(--cs-doc-slate);font-style:italic">Party B representative</div><div style="font-size:10.5px;margin-top:1px">(Ký, ghi rõ họ tên / <i style="color:var(--cs-doc-slate)">Sign, full name</i>)</div><div style="height:64px"></div><div style="border-top:1px solid var(--cs-doc-ink);width:70%;margin:0 auto"></div></div>
+    </div>
+
+    <div style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:20px;display:flex;gap:10px;font-size:10.5px;color:var(--cs-color-text-muted);flex-wrap:wrap">Hiện Thực Hoá Ý Chí · <i style="color:var(--cs-doc-slate)">Turn Your Will Into Real</i><span>·</span>MST: 0316475200<span>·</span>info@cyberskill.world<span>·</span>(+84) 906 878 091<span style="margin-left:auto">Trang / Page 1</span></div>
+  </div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{
+  &quot;element&quot;: {&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Thổ · studio&quot;,&quot;Thổ · clay&quot;,&quot;Thổ · sand&quot;,&quot;Hỏa · ember&quot;,&quot;Hỏa · lava&quot;,&quot;Hỏa · plasma&quot;,&quot;Thủy · river&quot;,&quot;Thủy · ocean&quot;,&quot;Thủy · mist&quot;,&quot;Mộc · leaf&quot;,&quot;Mộc · bamboo&quot;,&quot;Mộc · forest&quot;,&quot;Kim · champagne&quot;,&quot;Kim · steel&quot;,&quot;Kim · titanium&quot;],&quot;default&quot;:&quot;Thổ · studio&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Element (Ngũ Hành)&quot;}
+}">
+class Component extends DCLogic {
+  renderVals() {
+    const EL = {"Thổ · studio":["tho",""],"Thổ · clay":["tho","clay"],"Thổ · sand":["tho","sand"],"Hỏa · ember":["hoa",""],"Hỏa · lava":["hoa","lava"],"Hỏa · plasma":["hoa","plasma"],"Thủy · river":["thuy",""],"Thủy · ocean":["thuy","ocean"],"Thủy · mist":["thuy","mist"],"Mộc · leaf":["moc",""],"Mộc · bamboo":["moc","bamboo"],"Mộc · forest":["moc","forest"],"Kim · champagne":["kim",""],"Kim · steel":["kim","steel"],"Kim · titanium":["kim","titanium"]};
+    const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
+return { elAttr, vaAttr };
+  }
+}
+</script>
+</body>
+</html>