@cyberskill/design 1.3.11 → 1.4.0

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, VERSION **1.3.11**. 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.11**, 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.11` 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
@@ -48,7 +48,7 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 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.11` 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.11",
+  "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>

package/templates/vn-framework-agreement/ds-base.js

@@ -0,0 +1,55 @@
+// Loads this design system into the template. In a consuming project, point
+// base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
+// the project root, '../_ds/<folder>' one level down) — one line to edit.
+// Artifact head standard (UX-002 / B1): ensure <html lang> + <title> from @template.
+(() => {
+  const base = '../..';
+  for (const p of ['dist/styles.min.css']) {
+    const l = document.createElement('link');
+    l.rel = 'stylesheet'; l.href = base + '/' + p;
+    document.head.appendChild(l);
+  }
+  const s = document.createElement('script');
+  s.src = base + '/_ds_bundle.js';
+  s.onload = () => {
+    // Expose a STABLE, project-id-independent alias. The compiler names the bundle
+    // global CyberSkillDesignSystem_<6-hex-project-id>, which changes whenever this
+    // system is re-imported into another project. Templates/cards read window.CyberSkillDS
+    // so no file ever has to be rewritten on re-import.
+    const k = Object.keys(window).find((k) => /^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k));
+    if (k) window.CyberSkillDS = window[k];
+  };
+  s.onerror = () => console.error('ds-base.js: failed to load ' + s.src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet');
+  document.head.appendChild(s);
+
+  const syncLang = () => {
+    try {
+      const a = document.querySelector('[lang]');
+      const v = a && a.getAttribute('lang');
+      // Ignore unresolved DC holes like {{ langAttr }}
+      if (v && v.indexOf('{{') === -1) document.documentElement.setAttribute('lang', v);
+      else if (!document.documentElement.getAttribute('lang')) document.documentElement.setAttribute('lang', 'en');
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  const ensureHead = () => {
+    try {
+      if (!document.title || !document.title.trim()) {
+        const src = document.documentElement.innerHTML;
+        const m = src.match(/@template\s+name="([^"]+)"/);
+        if (m) document.title = m[1] + ' · CyberSkill';
+      }
+      syncLang();
+      const obs = new MutationObserver(syncLang);
+      obs.observe(document.body || document.documentElement, {
+        attributes: true,
+        attributeFilter: ['lang'],
+        subtree: true,
+      });
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureHead);
+  } else {
+    ensureHead();
+  }
+})();