npm - @cyberskill/design - Versions diffs - 1.1.0 → 1.2.0 - Mend

@cyberskill/design 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (358) hide show

package/DESIGN.md +25 -3
package/README.md +7 -7
package/SKILL.md +4 -4
package/VERSION +1 -1
package/_ds_bundle.js +819 -416
package/_ds_manifest.json +1 -1
package/_esm/cs.mjs +18 -4
package/_esm/react.d.ts +2 -0
package/_esm/react.mjs +1 -0
package/base/a11y.css +18 -0
package/base/ai.css +2 -2
package/base/collections.css +8 -3
package/base/components.css +11 -2
package/base/controls.css +61 -48
package/base/data.css +3 -3
package/base/feedback.css +5 -0
package/base/forms.css +9 -3
package/base/glass.css +6 -0
package/base/navigation.css +8 -2
package/base/reset.css +1 -1
package/base/responsive.css +25 -0
package/base/shell.css +7 -1
package/components/_i18n/i18n.js +13 -1
package/components/_i18n/strings.js +52 -3
package/components/ai/ConfidenceMeter.jsx +8 -6
package/components/data/Watermark.jsx +11 -3
package/components/datatable/DataGrid.jsx +10 -1
package/components/dialog/Dialog.jsx +13 -45
package/components/feedback/ProgressBar.jsx +4 -2
package/components/forms/Cascader.jsx +69 -6
package/components/forms/Editor.jsx +37 -2
package/components/forms/FileUpload.jsx +22 -8
package/components/forms/Switch.jsx +16 -2
package/components/forms/TimePicker.jsx +3 -1
package/components/icon/Icon.jsx +1 -0
package/components/navigation/CommandPalette.jsx +22 -7
package/components/navigation/Toolbar.jsx +2 -1
package/components/overlays/AlertDialog.jsx +19 -49
package/components/overlays/Drawer.jsx +24 -20
package/components/overlays/OverlayManager.d.ts +40 -0
package/components/overlays/OverlayManager.jsx +214 -0
package/components/overlays/OverlayManager.prompt.md +12 -0
package/components/overlays/Tour.jsx +14 -7
package/dist/styles.min.css +2004 -0
package/docs/benchmark-rubric.md +1 -1
package/docs/ci-cd.md +3 -1
package/docs/consuming.md +6 -6
package/docs/contrast-report.md +1 -1
package/docs/conventions.md +4 -4
package/docs/decisions/container-query-migration.md +18 -0
package/docs/decisions/overlay-manager-design.md +101 -0
package/docs/decisions.md +5 -5
package/docs/design-styles.md +1 -1
package/docs/plans/cyberskill-design-system-audit-and-12-month-evolution-plan.md +1490 -0
package/docs/quality-gates.md +21 -9
package/docs/release-notes.md +10 -2
package/docs/status/data/status-feed.json +1 -1
package/docs/status/data/task/TASK-REL-002.js +1 -0
package/docs/status/index.html +7 -6
package/docs/status/status-legacy.html +13 -12
package/docs/sync.md +1 -1
package/docs/tasks/BACKLOG.md +1 -0
package/docs/tasks/_state/commit-links.yaml +14 -0
package/docs/tasks/release/TASK-REL-002-republish-1-1-1/spec.md +54 -0
package/docs/vi/benchmark-rubric.md +1 -1
package/docs/vi/ci-cd.md +3 -1
package/docs/vi/consuming.md +6 -6
package/docs/vi/contrast-report.md +1 -1
package/docs/vi/conventions.md +2 -2
package/docs/vi/decisions.md +5 -5
package/docs/vi/quality-gates.md +21 -9
package/docs/vi/release-notes.md +10 -2
package/docs/vi/sync.md +1 -1
package/guidelines/atomic-view.html +11 -7
package/llms.txt +5 -5
package/package.json +14 -6
package/templates/_ds-base.canonical.js +55 -0
package/templates/ai-cluster-demo.html +2 -2
package/templates/app-shell/AppShell.dc.html +5 -3
package/templates/app-shell/ds-base.js +33 -1
package/templates/app-shell/support.js +13 -20
package/templates/article/Article.dc.html +5 -1
package/templates/article/ds-base.js +33 -1
package/templates/article/support.js +13 -20
package/templates/auth/Auth.dc.html +10 -5
package/templates/auth/content-schema.json +12 -0
package/templates/auth/ds-base.js +33 -1
package/templates/auth/support.js +13 -20
package/templates/bod-deck/BodDeck.dc.html +11 -10
package/templates/bod-deck/ds-base.js +33 -1
package/templates/bod-deck/support.js +13 -20
package/templates/bod-investor-update/BodInvestorUpdate.dc.html +4 -3
package/templates/bod-investor-update/ds-base.js +33 -1
package/templates/bod-investor-update/support.js +13 -20
package/templates/bod-memo/BodMemo.dc.html +6 -5
package/templates/bod-memo/ds-base.js +33 -1
package/templates/bod-memo/support.js +13 -20
package/templates/bod-minutes/BodMinutes.dc.html +2 -1
package/templates/bod-minutes/ds-base.js +33 -1
package/templates/bod-minutes/support.js +13 -20
package/templates/bod-report/BodReport.dc.html +3 -2
package/templates/bod-report/ds-base.js +33 -1
package/templates/bod-report/support.js +13 -20
package/templates/bod-resolution/BodResolution.dc.html +5 -4
package/templates/bod-resolution/ds-base.js +33 -1
package/templates/bod-resolution/support.js +13 -20
package/templates/culture-event-invite/CultureEventInvite.dc.html +3 -2
package/templates/culture-event-invite/ds-base.js +33 -1
package/templates/culture-event-invite/support.js +13 -20
package/templates/dashboard/Dashboard.dc.html +7 -3
package/templates/dashboard/ds-base.js +33 -1
package/templates/dashboard/support.js +13 -20
package/templates/delivery-change-note/DeliveryChangeNote.dc.html +2 -1
package/templates/delivery-change-note/ds-base.js +33 -1
package/templates/delivery-change-note/support.js +13 -20
package/templates/delivery-kickoff/DeliveryKickoff.dc.html +3 -2
package/templates/delivery-kickoff/ds-base.js +33 -1
package/templates/delivery-kickoff/support.js +13 -20
package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +6 -5
package/templates/delivery-qbr-deck/ds-base.js +33 -1
package/templates/delivery-qbr-deck/support.js +13 -20
package/templates/delivery-runbook/DeliveryRunbook.dc.html +3 -2
package/templates/delivery-runbook/ds-base.js +33 -1
package/templates/delivery-runbook/support.js +13 -20
package/templates/delivery-status-email/DeliveryStatusEmail.dc.html +3 -2
package/templates/delivery-status-email/ds-base.js +33 -1
package/templates/delivery-status-email/support.js +13 -20
package/templates/doc-style-guide/DocStyleGuide.dc.html +67 -64
package/templates/doc-style-guide/ds-base.js +33 -1
package/templates/doc-style-guide/support.js +13 -20
package/templates/doc-suite-index/DocSuiteIndex.dc.html +46 -45
package/templates/doc-suite-index/ds-base.js +33 -1
package/templates/doc-suite-index/support.js +13 -20
package/templates/doc-templates/DocTemplates.dc.html +42 -41
package/templates/doc-templates/ds-base.js +33 -1
package/templates/doc-templates/support.js +13 -20
package/templates/email/Email.dc.html +3 -2
package/templates/email/ds-base.js +33 -1
package/templates/email/support.js +13 -20
package/templates/finance-dunning-email/FinanceDunningEmail.dc.html +4 -3
package/templates/finance-dunning-email/ds-base.js +33 -1
package/templates/finance-dunning-email/support.js +13 -20
package/templates/finance-expense-report/FinanceExpenseReport.dc.html +4 -3
package/templates/finance-expense-report/ds-base.js +33 -1
package/templates/finance-expense-report/support.js +13 -20
package/templates/finance-invoice/FinanceInvoice.dc.html +4 -3
package/templates/finance-invoice/ds-base.js +33 -1
package/templates/finance-invoice/support.js +13 -20
package/templates/finance-quote/FinanceQuote.dc.html +4 -3
package/templates/finance-quote/ds-base.js +33 -1
package/templates/finance-quote/support.js +13 -20
package/templates/hr-announcement/HrAnnouncement.dc.html +5 -4
package/templates/hr-announcement/ds-base.js +33 -1
package/templates/hr-announcement/support.js +13 -20
package/templates/hr-interview-kit/HrInterviewKit.dc.html +4 -3
package/templates/hr-interview-kit/ds-base.js +33 -1
package/templates/hr-interview-kit/support.js +13 -20
package/templates/hr-offboarding/HrOffboarding.dc.html +2 -1
package/templates/hr-offboarding/ds-base.js +33 -1
package/templates/hr-offboarding/support.js +13 -20
package/templates/hr-performance-review/HrPerformanceReview.dc.html +2 -1
package/templates/hr-performance-review/ds-base.js +33 -1
package/templates/hr-performance-review/support.js +13 -20
package/templates/hr-pip/HrPip.dc.html +2 -1
package/templates/hr-pip/ds-base.js +33 -1
package/templates/hr-pip/support.js +13 -20
package/templates/kitchen-sink.html +9 -4
package/templates/legal-msa/LegalMsa.dc.html +2 -1
package/templates/legal-msa/ds-base.js +33 -1
package/templates/legal-msa/support.js +13 -20
package/templates/legal-sow/LegalSow.dc.html +2 -1
package/templates/legal-sow/ds-base.js +33 -1
package/templates/legal-sow/support.js +13 -20
package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +3 -2
package/templates/marketing-campaign-brief/ds-base.js +33 -1
package/templates/marketing-campaign-brief/support.js +13 -20
package/templates/marketing-case-study/MarketingCaseStudy.dc.html +5 -4
package/templates/marketing-case-study/ds-base.js +33 -1
package/templates/marketing-case-study/support.js +13 -20
package/templates/marketing-launch/MarketingLaunch.dc.html +6 -5
package/templates/marketing-launch/ds-base.js +33 -1
package/templates/marketing-launch/support.js +13 -20
package/templates/marketing-newsletter/MarketingNewsletter.dc.html +13 -12
package/templates/marketing-newsletter/ds-base.js +33 -1
package/templates/marketing-newsletter/support.js +13 -20
package/templates/marketing-page/MarketingPage.dc.html +17 -12
package/templates/marketing-page/ds-base.js +33 -1
package/templates/marketing-page/support.js +13 -20
package/templates/marketing-press-release/MarketingPressRelease.dc.html +2 -1
package/templates/marketing-press-release/ds-base.js +33 -1
package/templates/marketing-press-release/support.js +13 -20
package/templates/marketing-social-kit/MarketingSocialKit.dc.html +5 -4
package/templates/marketing-social-kit/ds-base.js +33 -1
package/templates/marketing-social-kit/support.js +13 -20
package/templates/sales-one-pager/SalesOnePager.dc.html +5 -4
package/templates/sales-one-pager/ds-base.js +33 -1
package/templates/sales-one-pager/support.js +13 -20
package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +7 -6
package/templates/sales-proposal-deck/ds-base.js +33 -1
package/templates/sales-proposal-deck/support.js +13 -20
package/templates/settings/Settings.dc.html +5 -1
package/templates/settings/ds-base.js +33 -1
package/templates/settings/support.js +13 -20
package/templates/slide-deck/SlideDeck.dc.html +5 -4
package/templates/slide-deck/ds-base.js +33 -1
package/templates/slide-deck/support.js +13 -20
package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +2 -1
package/templates/team-meeting-agenda/ds-base.js +33 -1
package/templates/team-meeting-agenda/support.js +13 -20
package/templates/tech-incident-report/TechIncidentReport.dc.html +3 -2
package/templates/tech-incident-report/ds-base.js +33 -1
package/templates/tech-incident-report/support.js +13 -20
package/templates/tech-release-notes/TechReleaseNotes.dc.html +6 -5
package/templates/tech-release-notes/ds-base.js +33 -1
package/templates/tech-release-notes/support.js +13 -20
package/templates/tech-retro/TechRetro.dc.html +4 -3
package/templates/tech-retro/ds-base.js +33 -1
package/templates/tech-retro/support.js +13 -20
package/templates/tech-rfc/TechRfc.dc.html +3 -2
package/templates/tech-rfc/ds-base.js +33 -1
package/templates/tech-rfc/support.js +13 -20
package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +36 -35
package/templates/vn-appointment-transfer/ds-base.js +33 -1
package/templates/vn-appointment-transfer/support.js +13 -20
package/templates/vn-certificate-of-employment/VnCertificateOfEmployment.dc.html +27 -26
package/templates/vn-certificate-of-employment/ds-base.js +33 -1
package/templates/vn-certificate-of-employment/support.js +13 -20
package/templates/vn-code-of-conduct/VnCodeOfConduct.dc.html +44 -43
package/templates/vn-code-of-conduct/ds-base.js +33 -1
package/templates/vn-code-of-conduct/support.js +13 -20
package/templates/vn-compensation-regulation/VnCompensationRegulation.dc.html +53 -52
package/templates/vn-compensation-regulation/ds-base.js +33 -1
package/templates/vn-compensation-regulation/support.js +13 -20
package/templates/vn-contract-amendment/VnContractAmendment.dc.html +41 -40
package/templates/vn-contract-amendment/ds-base.js +33 -1
package/templates/vn-contract-amendment/support.js +13 -20
package/templates/vn-contractor-agreement/VnContractorAgreement.dc.html +50 -49
package/templates/vn-contractor-agreement/ds-base.js +33 -1
package/templates/vn-contractor-agreement/support.js +13 -20
package/templates/vn-data-protection-policy/VnDataProtectionPolicy.dc.html +54 -53
package/templates/vn-data-protection-policy/ds-base.js +33 -1
package/templates/vn-data-protection-policy/support.js +13 -20
package/templates/vn-disciplinary-case-file/VnDisciplinaryCaseFile.dc.html +72 -71
package/templates/vn-disciplinary-case-file/ds-base.js +33 -1
package/templates/vn-disciplinary-case-file/support.js +13 -20
package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +21 -20
package/templates/vn-disciplinary-schedule/ds-base.js +33 -1
package/templates/vn-disciplinary-schedule/support.js +13 -20
package/templates/vn-employee-request/VnEmployeeRequest.dc.html +54 -53
package/templates/vn-employee-request/ds-base.js +33 -1
package/templates/vn-employee-request/support.js +13 -20
package/templates/vn-exit-handover/VnExitHandover.dc.html +122 -121
package/templates/vn-exit-handover/ds-base.js +33 -1
package/templates/vn-exit-handover/support.js +13 -20
package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +31 -30
package/templates/vn-foreign-employee-pack/ds-base.js +33 -1
package/templates/vn-foreign-employee-pack/support.js +13 -20
package/templates/vn-grassroots-democracy/VnGrassrootsDemocracy.dc.html +54 -53
package/templates/vn-grassroots-democracy/ds-base.js +33 -1
package/templates/vn-grassroots-democracy/support.js +13 -20
package/templates/vn-infosec-policy/VnInfosecPolicy.dc.html +50 -49
package/templates/vn-infosec-policy/ds-base.js +33 -1
package/templates/vn-infosec-policy/support.js +13 -20
package/templates/vn-internal-labor-regulations/VnInternalLaborRegulations.dc.html +84 -83
package/templates/vn-internal-labor-regulations/ds-base.js +33 -1
package/templates/vn-internal-labor-regulations/support.js +13 -20
package/templates/vn-internship-agreement/VnInternshipAgreement.dc.html +44 -43
package/templates/vn-internship-agreement/ds-base.js +33 -1
package/templates/vn-internship-agreement/support.js +13 -20
package/templates/vn-job-description/VnJobDescription.dc.html +28 -27
package/templates/vn-job-description/ds-base.js +33 -1
package/templates/vn-job-description/support.js +13 -20
package/templates/vn-labor-contract/VnLaborContract.dc.html +109 -108
package/templates/vn-labor-contract/ds-base.js +33 -1
package/templates/vn-labor-contract/support.js +13 -20
package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +32 -31
package/templates/vn-labour-management-book/ds-base.js +33 -1
package/templates/vn-labour-management-book/support.js +13 -20
package/templates/vn-mutual-nda/VnMutualNda.dc.html +45 -44
package/templates/vn-mutual-nda/ds-base.js +33 -1
package/templates/vn-mutual-nda/support.js +13 -20
package/templates/vn-ndnca-ip/VnNdncaIp.dc.html +73 -72
package/templates/vn-ndnca-ip/ds-base.js +33 -1
package/templates/vn-ndnca-ip/support.js +13 -20
package/templates/vn-offer-letter/VnOfferLetter.dc.html +32 -31
package/templates/vn-offer-letter/ds-base.js +33 -1
package/templates/vn-offer-letter/support.js +13 -20
package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +16 -15
package/templates/vn-onboarding-checklist/ds-base.js +33 -1
package/templates/vn-onboarding-checklist/support.js +13 -20
package/templates/vn-pdpl-consent/VnPdplConsent.dc.html +43 -42
package/templates/vn-pdpl-consent/ds-base.js +33 -1
package/templates/vn-pdpl-consent/support.js +13 -20
package/templates/vn-performance-evaluation-regulation/VnPerformanceEvaluationRegulation.dc.html +65 -64
package/templates/vn-performance-evaluation-regulation/ds-base.js +33 -1
package/templates/vn-performance-evaluation-regulation/support.js +13 -20
package/templates/vn-performance-review-form/VnPerformanceReviewForm.dc.html +49 -48
package/templates/vn-performance-review-form/ds-base.js +33 -1
package/templates/vn-performance-review-form/support.js +13 -20
package/templates/vn-phantom-stock/VnPhantomStock.dc.html +41 -40
package/templates/vn-phantom-stock/ds-base.js +33 -1
package/templates/vn-phantom-stock/support.js +13 -20
package/templates/vn-probation-contract/VnProbationContract.dc.html +56 -55
package/templates/vn-probation-contract/ds-base.js +33 -1
package/templates/vn-probation-contract/support.js +13 -20
package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +28 -27
package/templates/vn-receipt-acknowledgement/ds-base.js +33 -1
package/templates/vn-receipt-acknowledgement/support.js +13 -20
package/templates/vn-remote-work-policy/VnRemoteWorkPolicy.dc.html +44 -43
package/templates/vn-remote-work-policy/ds-base.js +33 -1
package/templates/vn-remote-work-policy/support.js +13 -20
package/templates/vn-resignation-letter/VnResignationLetter.dc.html +20 -19
package/templates/vn-resignation-letter/ds-base.js +33 -1
package/templates/vn-resignation-letter/support.js +13 -20
package/templates/vn-salary-scale/VnSalaryScale.dc.html +39 -38
package/templates/vn-salary-scale/ds-base.js +33 -1
package/templates/vn-salary-scale/support.js +13 -20
package/templates/vn-sow-appendix/VnSowAppendix.dc.html +21 -20
package/templates/vn-sow-appendix/ds-base.js +33 -1
package/templates/vn-sow-appendix/support.js +13 -20
package/templates/vn-termination-decision/VnTerminationDecision.dc.html +25 -24
package/templates/vn-termination-decision/ds-base.js +33 -1
package/templates/vn-termination-decision/support.js +13 -20
package/templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html +63 -62
package/templates/vn-total-rewards-appendix/ds-base.js +33 -1
package/templates/vn-total-rewards-appendix/support.js +13 -20
package/templates/vn-training-commitment/VnTrainingCommitment.dc.html +39 -38
package/templates/vn-training-commitment/ds-base.js +33 -1
package/templates/vn-training-commitment/support.js +13 -20
package/templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html +50 -49
package/templates/vn-travel-expense-policy/ds-base.js +33 -1
package/templates/vn-travel-expense-policy/support.js +13 -20
package/tokens/colors.css +19 -1
package/tokens/component-tokens.css +1 -0
package/tokens/elements.css +35 -2
package/tokens/elevation.css +8 -2
package/tokens/native/CSTokens.kt +35 -1
package/tokens/native/CSTokens.swift +35 -1
package/tokens/native/cs_tokens.dart +35 -1
package/tokens/provenance.json +12 -12
package/tokens/spacing.css +2 -0
package/tokens/tokens.dtcg.json +111 -3
package/tokens/tokens.js +46 -6
package/tokens/tokens.json +45 -5
package/tokens/typography.css +2 -0
package/ui_kits/deck/index.html +4 -0
package/ui_kits/status-hub/StatusHub.jsx +30 -4
package/ui_kits/status-hub/index.html +3 -3
package/ui_kits/status-hub/login.html +4 -0
package/ui_kits/status-hub/project.html +4 -0
package/ui_kits/status-hub/settings.html +35 -13
package/ui_kits/status-hub/status.css +5 -1
package/ui_kits/website/Website.jsx +25 -3
package/ui_kits/website/careers.html +4 -0
package/ui_kits/website/chat.html +5 -3
package/ui_kits/website/index.html +3 -3
package/ui_kits/website/site.css +2 -2
package/ui_kits/website/work.html +4 -0

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

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Documents · Suite Index & Usage Guide · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">
@@ -13,35 +14,35 @@
 <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}.cs-break{break-before:page}}</style>
 </helmet>
-<div 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:#1A1614">
+<div 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>· Danh mục &amp; hướng dẫn sử dụng tài liệu</span><span style="margin-left:auto;font-family:var(--cs-font-family-mono)">Số/No. DS-01/2026/CYBERSKILL</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:#3F4C55;font-style:italic;line-height:1.45;margin-top:2px">CYBERSKILL SOFTWARE SOLUTIONS CONSULTANCY AND DEVELOPMENT JOINT STOCK COMPANY</div><div style="font-size:10.5px;margin-top:4px">Hiện Thực Hoá Ý Chí · <span style="color:#3F4C55;font-style:italic">Turn Your Will Into Real</span></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:#3F4C55;font-style:italic;line-height:1.4">The Socialist Republic of Vietnam · Independence – Freedom – Happiness</div></div>
+      <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 style="font-size:10.5px;margin-top:4px">Hiện Thực Hoá Ý Chí · <span style="color:var(--cs-doc-slate);font-style:italic">Turn Your Will Into Real</span></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>
     </div>
     <div class="cs-avoid" style="text-align:center;margin-bottom:16px">
       <h1 style="font-size:24px;font-weight:800;color:var(--cs-color-brand-umber);letter-spacing:-0.01em;margin:0 0 3px;line-height:1.25">DANH MỤC &amp; HƯỚNG DẪN SỬ DỤNG TÀI LIỆU</h1>
-      <div style="font-size:14px;color:#3F4C55;font-style:italic">Document Suite Index &amp; Usage Guide</div>
+      <div style="font-size:14px;color:var(--cs-doc-slate);font-style:italic">Document Suite Index &amp; Usage Guide</div>
       <div style="font-size:12.5px;margin-top:8px">Số / No.: DS-01/2026/CYBERSKILL</div>
-      <div style="font-size:12px;margin-top:2px">Phiên bản / Version 2.0 · Hiệu lực từ / Effective from: <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span></div>
+      <div style="font-size:12px;margin-top:2px">Phiên bản / Version 2.0 · Hiệu lực từ / Effective from: <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></div>
       <div style="color:var(--cs-accent);font-size:13px;letter-spacing:0.5em;margin-top:10px">◆ ◆ ◆</div>
     </div>
     <p style="font-size:13.5px;line-height:1.5;margin:0 0 2px">Tài liệu này gộp Danh mục và Hướng dẫn sử dụng thành một. Phần I liệt kê mọi mẫu trong hệ thống, chia theo nhóm. Phần II hướng dẫn cách dùng: vòng đời lao động, tài liệu nào có hiệu lực kỷ luật, quy tắc trình bày, và cách thêm mẫu mới. Chi tiết trình bày nằm trong <i>Cẩm nang Trình bày</i>; các dạng khung nằm trong <i>Mẫu tài liệu</i>.</p>
-    <p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0 0 16px">This document merges the Suite Index and the Usage Guide. Part I lists every template in the system, by group. Part II covers how to use them: the employment lifecycle, which documents carry disciplinary force, the presentation rules, and how to add a new template. Presentation detail lives in the <i>Style Guide</i>; the frames live in <i>Document Templates</i>.</p>
+    <p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0 0 16px">This document merges the Suite Index and the Usage Guide. Part I lists every template in the system, by group. Part II covers how to use them: the employment lifecycle, which documents carry disciplinary force, the presentation rules, and how to add a new template. Presentation detail lives in the <i>Style Guide</i>; the frames live in <i>Document Templates</i>.</p>
-    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN I · DANH MỤC TÀI LIỆU <span style="font-weight:400;font-size:12px;color:#3F4C55;font-style:italic">Part I · Document catalogue</span></h2>
+    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN I · DANH MỤC TÀI LIỆU <span style="font-weight:400;font-size:12px;color:var(--cs-doc-slate);font-style:italic">Part I · Document catalogue</span></h2>
     <sc-for list="{{ sections }}" as="sec" hint-placeholder-count="10">
     <div class="cs-avoid" style="margin-bottom:14px">
-      <h3 style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">{{ sec.vi }} <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">{{ sec.en }}</span></h3>
+      <h3 style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 5px">{{ sec.vi }} <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">{{ sec.en }}</span></h3>
       <table style="width:100%;border-collapse:collapse;font-size:12px">
-        <thead><tr style="background:var(--cs-color-brand-umber);color:#fff"><th style="text-align:left;padding:5px 9px;font-size:10px">Tài liệu <i style="font-weight:400">Document</i></th><th style="text-align:left;padding:5px 9px;font-size:10px;width:150px">Mẫu <i style="font-weight:400">Template</i></th></tr></thead>
+        <thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:5px 9px;font-size:10px">Tài liệu <i style="font-weight:400">Document</i></th><th style="text-align:left;padding:5px 9px;font-size:10px;width:150px">Mẫu <i style="font-weight:400">Template</i></th></tr></thead>
         <tbody>
           <sc-for list="{{ sec.rows }}" as="r" hint-placeholder-count="4">
-          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 9px"><span>{{ r.vi }}</span><div style="font-size:10.5px;color:#3F4C55;font-style:italic">{{ r.en }}</div></td><td style="padding:5px 9px;font-family:var(--cs-font-family-mono);font-size:10px">{{ r.code }}</td></tr>
+          <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 9px"><span>{{ r.vi }}</span><div style="font-size:10.5px;color:var(--cs-doc-slate);font-style:italic">{{ r.en }}</div></td><td style="padding:5px 9px;font-family:var(--cs-font-family-mono);font-size:10px">{{ r.code }}</td></tr>
           </sc-for>
         </tbody>
       </table>
@@ -49,60 +50,60 @@
     </sc-for>
     <div class="cs-break"></div>
-    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN II · HƯỚNG DẪN SỬ DỤNG <span style="font-weight:400;font-size:12px;color:#3F4C55;font-style:italic">Part II · Usage guide</span></h2>
+    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN II · HƯỚNG DẪN SỬ DỤNG <span style="font-weight:400;font-size:12px;color:var(--cs-doc-slate);font-style:italic">Part II · Usage guide</span></h2>
-    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 1 · VÒNG ĐỜI LAO ĐỘNG VÀ TÀI LIỆU <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 1 · The employment lifecycle and its documents</span></h3>
+    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 1 · VÒNG ĐỜI LAO ĐỘNG VÀ TÀI LIỆU <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 1 · The employment lifecycle and its documents</span></h3>
     <table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:12px;margin:0 0 18px">
-      <thead><tr style="background:var(--cs-color-brand-umber);color:#fff"><th style="text-align:left;padding:6px 9px;font-size:10.5px;width:120px">Giai đoạn <i style="font-weight:400">Stage</i></th><th style="text-align:left;padding:6px 9px;font-size:10.5px">Tài liệu ký / ban hành <i style="font-weight:400">Documents</i></th><th style="text-align:left;padding:6px 9px;font-size:10.5px;width:150px">Thời điểm <i style="font-weight:400">When</i></th></tr></thead>
+      <thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:6px 9px;font-size:10.5px;width:120px">Giai đoạn <i style="font-weight:400">Stage</i></th><th style="text-align:left;padding:6px 9px;font-size:10.5px">Tài liệu ký / ban hành <i style="font-weight:400">Documents</i></th><th style="text-align:left;padding:6px 9px;font-size:10.5px;width:150px">Thời điểm <i style="font-weight:400">When</i></th></tr></thead>
       <tbody>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px">1. Mời nhận việc<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Offer</div></td><td style="padding:6px 9px">Thư mời nhận việc + Bản mô tả công việc<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Offer Letter + Job Description</div></td><td style="padding:6px 9px">Trước khi nhận việc<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Before joining</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px">2. Thử việc<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Probation</div></td><td style="padding:6px 9px">Hợp đồng thử việc (hoặc điều khoản thử việc trong HĐLĐ)<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Probation Contract (or a probation clause in the Labor Contract)</div></td><td style="padding:6px 9px">Tối đa 60 ngày; 180 ngày với người quản lý<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Max 60 days; 180 days for managers</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px">3. Nhận việc<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Onboarding</div></td><td style="padding:6px 9px">HĐLĐ + Thỏa thuận Bảo mật, KCT &amp; SHTT + Đồng ý xử lý DLCN + Checklist<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Labor Contract + NDNCA &amp; IP + PDPL Consent + Onboarding Checklist</div></td><td style="padding:6px 9px">Ngày đầu tiên<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Day one</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px">4. Đãi ngộ<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Rewards</div></td><td style="padding:6px 9px">Phụ lục Đãi ngộ; Thỏa thuận Cổ phần ảo (nếu được cấp)<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Total Rewards Appendix; Phantom Stock Agreement (if granted)</div></td><td style="padding:6px 9px">Khi ký HĐLĐ hoặc khi được cấp<div style="color:#3F4C55;font-style:italic;font-size:10.5px">On hire, or on grant</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px">5. Trong quá trình<div style="color:#3F4C55;font-style:italic;font-size:10.5px">In service</div></td><td style="padding:6px 9px">Phụ lục sửa đổi HĐLĐ; Đơn đề nghị của NLĐ (nghỉ phép · làm thêm giờ); Quyết định bổ nhiệm &amp; điều chuyển; Hợp đồng đào tạo<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Amendment Appendix; Employee Request Form (leave · overtime); Appointment &amp; Transfer Decision; Training Agreement</div></td><td style="padding:6px 9px">Theo sự kiện<div style="color:#3F4C55;font-style:italic;font-size:10.5px">As events arise</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px">6. Kỷ luật<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Discipline</div></td><td style="padding:6px 9px">Hồ sơ xử lý kỷ luật (4 phần: Phần A → B → C → D, một số hồ sơ duy nhất)<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Disciplinary Case File (4 parts: A → B → C → D, one case number)</div></td><td style="padding:6px 9px">Đúng trình tự Điều 122 BLLĐ<div style="color:#3F4C55;font-style:italic;font-size:10.5px">In the Article 122 order</div></td></tr>
-        <tr><td style="padding:6px 9px">7. Chấm dứt<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Exit</div></td><td style="padding:6px 9px">Đơn xin nghỉ việc hoặc Quyết định chấm dứt + Thỏa thuận chấm dứt &amp; bàn giao + Giấy xác nhận quá trình công tác<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Resignation Letter or Decision on Termination + Exit-Handover Agreement + Certificate of Employment</div></td><td style="padding:6px 9px">Thanh toán trong 14 ngày làm việc<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Settle within 14 working days</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px">1. Mời nhận việc<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Offer</div></td><td style="padding:6px 9px">Thư mời nhận việc + Bản mô tả công việc<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Offer Letter + Job Description</div></td><td style="padding:6px 9px">Trước khi nhận việc<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Before joining</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px">2. Thử việc<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Probation</div></td><td style="padding:6px 9px">Hợp đồng thử việc (hoặc điều khoản thử việc trong HĐLĐ)<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Probation Contract (or a probation clause in the Labor Contract)</div></td><td style="padding:6px 9px">Tối đa 60 ngày; 180 ngày với người quản lý<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Max 60 days; 180 days for managers</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px">3. Nhận việc<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Onboarding</div></td><td style="padding:6px 9px">HĐLĐ + Thỏa thuận Bảo mật, KCT &amp; SHTT + Đồng ý xử lý DLCN + Checklist<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Labor Contract + NDNCA &amp; IP + PDPL Consent + Onboarding Checklist</div></td><td style="padding:6px 9px">Ngày đầu tiên<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Day one</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px">4. Đãi ngộ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Rewards</div></td><td style="padding:6px 9px">Phụ lục Đãi ngộ; Thỏa thuận Cổ phần ảo (nếu được cấp)<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Total Rewards Appendix; Phantom Stock Agreement (if granted)</div></td><td style="padding:6px 9px">Khi ký HĐLĐ hoặc khi được cấp<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">On hire, or on grant</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px">5. Trong quá trình<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">In service</div></td><td style="padding:6px 9px">Phụ lục sửa đổi HĐLĐ; Đơn đề nghị của NLĐ (nghỉ phép · làm thêm giờ); Quyết định bổ nhiệm &amp; điều chuyển; Hợp đồng đào tạo<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Amendment Appendix; Employee Request Form (leave · overtime); Appointment &amp; Transfer Decision; Training Agreement</div></td><td style="padding:6px 9px">Theo sự kiện<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">As events arise</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px">6. Kỷ luật<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Discipline</div></td><td style="padding:6px 9px">Hồ sơ xử lý kỷ luật (4 phần: Phần A → B → C → D, một số hồ sơ duy nhất)<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Disciplinary Case File (4 parts: A → B → C → D, one case number)</div></td><td style="padding:6px 9px">Đúng trình tự Điều 122 BLLĐ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">In the Article 122 order</div></td></tr>
+        <tr><td style="padding:6px 9px">7. Chấm dứt<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Exit</div></td><td style="padding:6px 9px">Đơn xin nghỉ việc hoặc Quyết định chấm dứt + Thỏa thuận chấm dứt &amp; bàn giao + Giấy xác nhận quá trình công tác<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Resignation Letter or Decision on Termination + Exit-Handover Agreement + Certificate of Employment</div></td><td style="padding:6px 9px">Thanh toán trong 14 ngày làm việc<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Settle within 14 working days</div></td></tr>
       </tbody>
     </table>
-    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 2 · TÀI LIỆU NÀO CÓ HIỆU LỰC KỶ LUẬT <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 2 · Which documents carry disciplinary force</span></h3>
+    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 2 · TÀI LIỆU NÀO CÓ HIỆU LỰC KỶ LUẬT <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 2 · Which documents carry disciplinary force</span></h3>
     <p style="font-size:13.5px;line-height:1.5;margin:0 0 2px">Chỉ Nội quy lao động đã đăng ký và Bảng xử lý kỷ luật kèm theo mới là căn cứ để xử lý kỷ luật lao động. Bộ Quy tắc Ứng xử và các Chính sách là tài liệu nội bộ: chúng chỉ có hiệu lực kỷ luật khi hành vi tương ứng được dẫn chiếu trong Nội quy hoặc Bảng xử lý kỷ luật.</p>
-    <p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0 0 8px">Only the registered Internal Labor Regulations and their Disciplinary Schedule found labor discipline. The Code of Conduct and the Policies are internal documents: they carry disciplinary force only where the conduct in question is referenced in the Regulations or the Schedule.</p>
+    <p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">Only the registered Internal Labor Regulations and their Disciplinary Schedule found labor discipline. The Code of Conduct and the Policies are internal documents: they carry disciplinary force only where the conduct in question is referenced in the Regulations or the Schedule.</p>
     <div class="cs-avoid" style="background:#FBF4E9;border:1px solid var(--cs-color-border-default);border-radius:8px;padding:10px 14px;margin-bottom:18px">
       <p style="font-size:12.5px;line-height:1.5;margin:0 0 2px"><b>Hệ quả thực tế:</b> khi sửa một Chính sách, hãy kiểm tra xem Bảng xử lý kỷ luật có cần cập nhật tương ứng không.</p>
-      <p style="font-size:11.5px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0"><b>In practice:</b> when a Policy changes, check whether the Disciplinary Schedule needs the matching update.</p>
+      <p style="font-size:11.5px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0"><b>In practice:</b> when a Policy changes, check whether the Disciplinary Schedule needs the matching update.</p>
     </div>
-    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 3 · QUY TẮC TRÌNH BÀY BẮT BUỘC <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 3 · The house presentation rules</span></h3>
+    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 3 · QUY TẮC TRÌNH BÀY BẮT BUỘC <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 3 · The house presentation rules</span></h3>
     <div style="display:grid;gap:6px;margin:0 0 8px">
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">a) Tiếng Việt trước, màu Ink. Tiếng Anh ngay dưới, màu Slate, in nghiêng, nhỏ hơn một cấp.</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">a) Vietnamese first, in Ink. English immediately below, in Slate, italic, one size down.</p></div>
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">b) Umber chỉ dùng cho tiêu đề, header/footer và thanh tiêu đề bảng — không dùng cho chữ nội dung.</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">b) Umber is for headings, header/footer and table title bars only — never for body text.</p></div>
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">c) Không canh đều hai bên. Toàn bộ tài liệu canh trái.</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">c) Never justify. Every document is left-aligned.</p></div>
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">d) Mọi ô cần điền được tô nền vàng.</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">d) Every fill-in blank is highlighted yellow.</p></div>
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">e) Mỗi ô chọn, gạch đầu dòng và điểm a) b) c) cách nhau 6 pt.</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">e) Tick-boxes, bullets and a) b) c) items are 6 pt clear of each other.</p></div>
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">f) Khối ký chừa khoảng trống 2,5 cm và không bị cắt sang trang.</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">f) The signing block leaves 2.5 cm of clear space and never splits across a page.</p></div>
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">g) Không đặt logo trong thân tài liệu — header đã mang dấu hiệu thương hiệu.</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">g) No logo in the body — the header already carries the mark.</p></div>
-      <div><p style="font-size:13.5px;line-height:1.5;margin:0">h) Tài liệu mẫu không bao giờ chứa dữ liệu cá nhân thật (BÊN B để trống).</p><p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:1px 0 0">h) A template never contains real personal data (Party B left blank).</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">a) Tiếng Việt trước, màu Ink. Tiếng Anh ngay dưới, màu Slate, in nghiêng, nhỏ hơn một cấp.</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">a) Vietnamese first, in Ink. English immediately below, in Slate, italic, one size down.</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">b) Umber chỉ dùng cho tiêu đề, header/footer và thanh tiêu đề bảng — không dùng cho chữ nội dung.</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">b) Umber is for headings, header/footer and table title bars only — never for body text.</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">c) Không canh đều hai bên. Toàn bộ tài liệu canh trái.</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">c) Never justify. Every document is left-aligned.</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">d) Mọi ô cần điền được tô nền vàng.</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">d) Every fill-in blank is highlighted yellow.</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">e) Mỗi ô chọn, gạch đầu dòng và điểm a) b) c) cách nhau 6 pt.</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">e) Tick-boxes, bullets and a) b) c) items are 6 pt clear of each other.</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">f) Khối ký chừa khoảng trống 2,5 cm và không bị cắt sang trang.</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">f) The signing block leaves 2.5 cm of clear space and never splits across a page.</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">g) Không đặt logo trong thân tài liệu — header đã mang dấu hiệu thương hiệu.</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">g) No logo in the body — the header already carries the mark.</p></div>
+      <div><p style="font-size:13.5px;line-height:1.5;margin:0">h) Tài liệu mẫu không bao giờ chứa dữ liệu cá nhân thật (BÊN B để trống).</p><p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">h) A template never contains real personal data (Party B left blank).</p></div>
     </div>
     <p style="font-size:12.5px;line-height:1.5;margin:0 0 2px">Chi tiết đầy đủ trong Cẩm nang Trình bày Tài liệu. Với tài liệu số (email, màn hình, slide), xem Điều 11 của Cẩm nang.</p>
-    <p style="font-size:11.5px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0 0 18px">The full detail is in the Document Style Guide. For digital documents (email, screens, decks), see Article 11 of the Guide.</p>
+    <p style="font-size:11.5px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0 0 18px">The full detail is in the Document Style Guide. For digital documents (email, screens, decks), see Article 11 of the Guide.</p>
-    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 4 · TẠO MỘT MẪU MỚI <span style="font-weight:400;font-size:11.5px;color:#3F4C55;font-style:italic">Article 4 · Creating a new template</span></h3>
+    <h3 class="cs-avoid" style="font-size:14px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 8px">ĐIỀU 4 · TẠO MỘT MẪU MỚI <span style="font-weight:400;font-size:11.5px;color:var(--cs-doc-slate);font-style:italic">Article 4 · Creating a new template</span></h3>
     <table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:12.5px">
-      <thead><tr style="background:var(--cs-color-brand-umber);color:#fff"><th style="text-align:left;padding:6px 9px;font-size:10.5px;width:56px">Bước <i style="font-weight:400">Step</i></th><th style="text-align:left;padding:6px 9px;font-size:10.5px">Việc cần làm <i style="font-weight:400">What to do</i></th></tr></thead>
+      <thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:6px 9px;font-size:10.5px;width:56px">Bước <i style="font-weight:400">Step</i></th><th style="text-align:left;padding:6px 9px;font-size:10.5px">Việc cần làm <i style="font-weight:400">What to do</i></th></tr></thead>
       <tbody>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">1</td><td style="padding:6px 9px">Chọn dạng khung phù hợp trong <i>Mẫu tài liệu</i> (Document Templates) — A4 song ngữ, Letter in, email, màn hình, slide hoặc ảnh MXH.<div style="color:#3F4C55;font-style:italic;font-size:11px">Pick the right frame in Document Templates — A4 bilingual, Letter print, email, screen, deck or social image.</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">2</td><td style="padding:6px 9px">Tạo thư mục templates/&lt;slug&gt;/ và viết &lt;Slug&gt;.dc.html bằng dc_write; dòng đầu là chú thích @template với name và description.<div style="color:#3F4C55;font-style:italic;font-size:11px">Create templates/&lt;slug&gt;/ and write &lt;Slug&gt;.dc.html via dc_write; the first line is the @template comment with name and description.</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">3</td><td style="padding:6px 9px">Nạp hệ thống qua &lt;helmet&gt;&lt;script src="./ds-base.js"&gt;; tài liệu chính thức đặt khối @page A4/Letter và class cs-desk/cs-sheet.<div style="color:#3F4C55;font-style:italic;font-size:11px">Load the system via &lt;helmet&gt;&lt;script src="./ds-base.js"&gt;; formal docs set the A4/Letter @page block and cs-desk/cs-sheet.</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">4</td><td style="padding:6px 9px">Áp dụng Điều 1–10 Cẩm nang: cặp Việt/Anh (Ink/Slate nghiêng), thanh bảng Umber, ô điền vàng, BÊN B trống, khối ký cs-avoid.<div style="color:#3F4C55;font-style:italic;font-size:11px">Apply Style-Guide Articles 1–10: VN/EN pairs (Ink/Slate italic), umber table bars, yellow blanks, blank Party B, cs-avoid signing block.</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">5</td><td style="padding:6px 9px">Thêm tweak chuẩn: Element (15 biến thể Ngũ Hành) và Language (EN·VI). Nhấn dùng token --cs-accent-*.<div style="color:#3F4C55;font-style:italic;font-size:11px">Add the standard tweaks: Element (15 Ngũ Hành variants) and Language (EN·VI). Accents consume --cs-accent-*.</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">6</td><td style="padding:6px 9px">Giữ nguyên nội dung đã được luật sư thẩm định; mọi sửa đổi phải qua rà soát pháp lý.<div style="color:#3F4C55;font-style:italic;font-size:11px">Keep lawyer-validated content verbatim; any change goes through counsel review.</div></td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">7</td><td style="padding:6px 9px">Thêm mẫu mới vào Phần I của tài liệu này, và cập nhật README + SKILL.md theo quy tắc mở rộng.<div style="color:#3F4C55;font-style:italic;font-size:11px">Add the new template to Part I here, and update README + SKILL.md per the expansion rule.</div></td></tr>
-        <tr><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">8</td><td style="padding:6px 9px">Chạy check_design_system đến khi sạch, rồi kiểm tra bản in (Print / Save as PDF) không vỡ khối.<div style="color:#3F4C55;font-style:italic;font-size:11px">Run check_design_system until clean, then verify the print output (Print / Save as PDF) has no broken blocks.</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">1</td><td style="padding:6px 9px">Chọn dạng khung phù hợp trong <i>Mẫu tài liệu</i> (Document Templates) — A4 song ngữ, Letter in, email, màn hình, slide hoặc ảnh MXH.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Pick the right frame in Document Templates — A4 bilingual, Letter print, email, screen, deck or social image.</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">2</td><td style="padding:6px 9px">Tạo thư mục templates/&lt;slug&gt;/ và viết &lt;Slug&gt;.dc.html bằng dc_write; dòng đầu là chú thích @template với name và description.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Create templates/&lt;slug&gt;/ and write &lt;Slug&gt;.dc.html via dc_write; the first line is the @template comment with name and description.</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">3</td><td style="padding:6px 9px">Nạp hệ thống qua &lt;helmet&gt;&lt;script src="./ds-base.js"&gt;; tài liệu chính thức đặt khối @page A4/Letter và class cs-desk/cs-sheet.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Load the system via &lt;helmet&gt;&lt;script src="./ds-base.js"&gt;; formal docs set the A4/Letter @page block and cs-desk/cs-sheet.</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">4</td><td style="padding:6px 9px">Áp dụng Điều 1–10 Cẩm nang: cặp Việt/Anh (Ink/Slate nghiêng), thanh bảng Umber, ô điền vàng, BÊN B trống, khối ký cs-avoid.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Apply Style-Guide Articles 1–10: VN/EN pairs (Ink/Slate italic), umber table bars, yellow blanks, blank Party B, cs-avoid signing block.</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">5</td><td style="padding:6px 9px">Thêm tweak chuẩn: Element (15 biến thể Ngũ Hành) và Language (EN·VI). Nhấn dùng token --cs-accent-*.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Add the standard tweaks: Element (15 Ngũ Hành variants) and Language (EN·VI). Accents consume --cs-accent-*.</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">6</td><td style="padding:6px 9px">Giữ nguyên nội dung đã được luật sư thẩm định; mọi sửa đổi phải qua rà soát pháp lý.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Keep lawyer-validated content verbatim; any change goes through counsel review.</div></td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">7</td><td style="padding:6px 9px">Thêm mẫu mới vào Phần I của tài liệu này, và cập nhật README + SKILL.md theo quy tắc mở rộng.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Add the new template to Part I here, and update README + SKILL.md per the expansion rule.</div></td></tr>
+        <tr><td style="padding:6px 9px;font-family:var(--cs-font-family-mono)">8</td><td style="padding:6px 9px">Chạy check_design_system đến khi sạch, rồi kiểm tra bản in (Print / Save as PDF) không vỡ khối.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:11px">Run check_design_system until clean, then verify the print output (Print / Save as PDF) has no broken blocks.</div></td></tr>
       </tbody>
     </table>
-    <div style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:16px;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:#3F4C55">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 style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:16px;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>

package/templates/doc-suite-index/ds-base.js CHANGED Viewed

@@ -1,9 +1,10 @@
 // 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 ['styles.css']) {
+  for (const p of ['dist/styles.min.css']) {
     const l = document.createElement('link');
     l.rel = 'stylesheet'; l.href = base + '/' + p;
     document.head.appendChild(l);
@@ -20,4 +21,35 @@
   };
   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();
+  }
 })();

package/templates/doc-suite-index/support.js CHANGED Viewed

@@ -1070,16 +1070,15 @@
   }
   // src/cdn.ts
-  var REACT_URL = "https://unpkg.com/umd-react@19.2.8/dist/react.production.min.js";
-  var REACT_SRI = "sha384-/nh8CKeV7Pk42Gpda6L4DM1JtZ2bwPOi+eh9O7+a1Y22UkGs8+mw3aW1shQ9FV30";
-  var REACT_DOM_URL = "https://unpkg.com/umd-react@19.2.8/dist/react-dom.production.min.js";
-  var REACT_DOM_SRI = "sha384-rhLCB72qrpcezgY2QW0panvW9IeO32m94nvuDVRD/iEGHXoUbjtijL6Xi/Z5/mzu";
-  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
-  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
-  function cdnScriptFor(url, sri) {
+  var REACT_LOCAL = "../../_vendor/react/react.production.min.js";
+  var REACT_DOM_LOCAL = "../../_vendor/react/react-dom.production.min.js";
+  var BABEL_LOCAL = "../../_vendor/babel/babel.min.js";
+  // Product surfaces are offline-first (UX-026 / D4): no third-party script origins.
+  // Host editors may still remap via window.__resources[localPath].
+  function localScriptFor(path) {
     const res = window.__resources;
-    const v = res ? res[url] : void 0;
-    return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri };
+    const v = res ? res[path] : void 0;
+    return typeof v === "string" && v ? v : path;
   }
   // src/external.ts
@@ -1106,16 +1105,12 @@
     function ensureBabel() {
       if (window.Babel) return Promise.resolve();
       if (babelLoading) return babelLoading;
-      const babel = cdnScriptFor(BABEL_URL, BABEL_SRI);
+      const src = localScriptFor(BABEL_LOCAL);
       babelLoading = new Promise((res, rej) => {
         const s = document.createElement("script");
-        s.src = babel.src;
-        if (babel.integrity) {
-          s.integrity = babel.integrity;
-          s.crossOrigin = "anonymous";
-        }
+        s.src = src;
         s.onload = () => res();
-        s.onerror = rej;
+        s.onerror = () => rej(new Error("failed to load local Babel: " + src));
         document.head.appendChild(s);
       });
       return babelLoading;
@@ -1768,11 +1763,9 @@
   function loadReactUmd() {
     const w = window;
     if (w.React && w.ReactDOM) return Promise.resolve();
-    const react = cdnScriptFor(REACT_URL, REACT_SRI);
-    const reactDom = cdnScriptFor(REACT_DOM_URL, REACT_DOM_SRI);
     return Promise.all([
-      loadScript(react.src, react.integrity),
-      loadScript(reactDom.src, reactDom.integrity)
+      loadScript(localScriptFor(REACT_LOCAL)),
+      loadScript(localScriptFor(REACT_DOM_LOCAL))
     ]).then(() => void 0);
   }
   function init() {

package/templates/doc-templates/DocTemplates.dc.html CHANGED Viewed

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>Documents · Templates · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="omelette-owns-print" content="1">
@@ -13,93 +14,93 @@
 <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}.cs-break{break-before:page}}</style>
 </helmet>
-<div 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:#1A1614">
+<div 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>· Mẫu tài liệu</span><span style="margin-left:auto;font-family:var(--cs-font-family-mono)">Số/No. MT-01/2026/CYBERSKILL</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:#3F4C55;font-style:italic;line-height:1.45;margin-top:2px">CYBERSKILL SOFTWARE SOLUTIONS CONSULTANCY AND DEVELOPMENT JOINT STOCK COMPANY</div><div style="font-size:10.5px;margin-top:4px">Hiện Thực Hoá Ý Chí · <span style="color:#3F4C55;font-style:italic">Turn Your Will Into Real</span></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:#3F4C55;font-style:italic;line-height:1.4">The Socialist Republic of Vietnam · Independence – Freedom – Happiness</div></div>
+      <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 style="font-size:10.5px;margin-top:4px">Hiện Thực Hoá Ý Chí · <span style="color:var(--cs-doc-slate);font-style:italic">Turn Your Will Into Real</span></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>
     </div>
     <div class="cs-avoid" style="text-align:center;margin-bottom:16px">
       <h1 style="font-size:26px;font-weight:800;color:var(--cs-color-brand-umber);letter-spacing:-0.01em;margin:0 0 3px;line-height:1.25">MẪU TÀI LIỆU</h1>
-      <div style="font-size:14.5px;color:#3F4C55;font-style:italic">Document Templates</div>
+      <div style="font-size:14.5px;color:var(--cs-doc-slate);font-style:italic">Document Templates</div>
       <div style="font-size:12.5px;margin-top:8px">Số / No.: MT-01/2026/CYBERSKILL</div>
-      <div style="font-size:12px;margin-top:2px">Phiên bản / Version 2.0 · Hiệu lực từ / Effective from: <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span> / <span style="background:#FDE68A;padding:0 3px">......</span></div>
+      <div style="font-size:12px;margin-top:2px">Phiên bản / Version 2.0 · Hiệu lực từ / Effective from: <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></div>
       <div style="color:var(--cs-accent);font-size:13px;letter-spacing:0.5em;margin-top:10px">◆ ◆ ◆</div>
     </div>
     <p style="font-size:13.5px;line-height:1.5;margin:0 0 2px">Tài liệu này gồm hai phần. Phần A là <b>khung trắng khổ A4 song ngữ</b> — điểm khởi đầu cho mọi hợp đồng, quy chế, chính sách, quyết định và biểu mẫu. Phần B là <b>bản đồ các dạng khung</b> cho toàn hệ thống và cách thêm mẫu mới. Quy tắc trình bày đầy đủ nằm trong Cẩm nang Trình bày.</p>
-    <p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0 0 16px">This document has two parts. Part A is the <b>blank A4 bilingual shell</b> — the starting point for any contract, regulation, policy, decision or form. Part B is the <b>archetype map</b> for the whole system and how to add a new template. The full presentation rules are in the Style Guide.</p>
+    <p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0 0 16px">This document has two parts. Part A is the <b>blank A4 bilingual shell</b> — the starting point for any contract, regulation, policy, decision or form. Part B is the <b>archetype map</b> for the whole system and how to add a new template. The full presentation rules are in the Style Guide.</p>
-    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 10px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN A · KHUNG TRẮNG A4 <span style="font-weight:400;font-size:12px;color:#3F4C55;font-style:italic">Part A · Blank A4 shell</span></h2>
+    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 10px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN A · KHUNG TRẮNG A4 <span style="font-weight:400;font-size:12px;color:var(--cs-doc-slate);font-style:italic">Part A · Blank A4 shell</span></h2>
     <div class="cs-avoid" style="border:1px dashed #C9B79E;border-radius:10px;padding:22px 24px;background:#fffdf8">
       <div class="cs-avoid" style="text-align:center;margin-bottom:16px">
         <h3 style="font-size:22px;font-weight:800;color:var(--cs-color-brand-umber);letter-spacing:-0.01em;margin:0 0 3px;line-height:1.25">TÊN TÀI LIỆU</h3>
-        <div style="font-size:13px;color:#3F4C55;font-style:italic">DOCUMENT TITLE</div>
-        <div style="font-size:12px;margin-top:6px">Số / No.: <span style="background:#FDE68A;padding:0 3px">......</span>/2026/MÃ-CYBERSKILL</div>
+        <div style="font-size:13px;color:var(--cs-doc-slate);font-style:italic">DOCUMENT TITLE</div>
+        <div style="font-size:12px;margin-top:6px">Số / No.: <span style="background:var(--cs-doc-fill);padding:0 3px">......</span>/2026/MÃ-CYBERSKILL</div>
         <div style="color:var(--cs-accent);font-size:12px;letter-spacing:0.5em;margin-top:8px">◆ ◆ ◆</div>
       </div>
-      <h4 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 4px">ĐIỀU 1 · TIÊU ĐỀ ĐIỀU KHOẢN <span style="font-weight:400;font-size:11px;color:#3F4C55;font-style:italic">Article 1 · Clause heading</span></h4>
+      <h4 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 4px">ĐIỀU 1 · TIÊU ĐỀ ĐIỀU KHOẢN <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 1 · Clause heading</span></h4>
       <p style="font-size:13px;line-height:1.5;margin:0 0 1px">Câu tiếng Việt viết ở đây. Đây là đoạn văn bản chuẩn của tài liệu.</p>
-      <p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0 0 8px">The English line goes directly underneath, in slate italics, one size down.</p>
-      <p style="font-size:13px;line-height:1.5;margin:0 0 1px">1.1. Mọi ô cần điền được tô vàng: <span style="background:#FDE68A;padding:0 3px">......................</span></p>
-      <p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0 0 8px">1.1. Every fill-in blank is highlighted yellow: <span style="background:#FDE68A;padding:0 3px">......................</span></p>
-      <div style="margin:0 0 14px"><p style="font-size:13px;line-height:1.45;margin:0">☐ Ô lựa chọn — luôn có khoảng cách giữa các ô.</p><p style="font-size:12px;line-height:1.4;color:#3F4C55;font-style:italic;margin:1px 0 0">☐ A tick-box — always separated from the next one.</p></div>
-      <h4 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 2 · THÔNG TIN CÁC BÊN <span style="font-weight:400;font-size:11px;color:#3F4C55;font-style:italic">Article 2 · Party details</span></h4>
+      <p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">The English line goes directly underneath, in slate italics, one size down.</p>
+      <p style="font-size:13px;line-height:1.5;margin:0 0 1px">1.1. Mọi ô cần điền được tô vàng: <span style="background:var(--cs-doc-fill);padding:0 3px">......................</span></p>
+      <p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0 0 8px">1.1. Every fill-in blank is highlighted yellow: <span style="background:var(--cs-doc-fill);padding:0 3px">......................</span></p>
+      <div style="margin:0 0 14px"><p style="font-size:13px;line-height:1.45;margin:0">☐ Ô lựa chọn — luôn có khoảng cách giữa các ô.</p><p style="font-size:12px;line-height:1.4;color:var(--cs-doc-slate);font-style:italic;margin:1px 0 0">☐ A tick-box — always separated from the next one.</p></div>
+      <h4 class="cs-avoid" style="font-size:13px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 6px">ĐIỀU 2 · THÔNG TIN CÁC BÊN <span style="font-weight:400;font-size:11px;color:var(--cs-doc-slate);font-style:italic">Article 2 · Party details</span></h4>
       <div class="cs-avoid" style="margin-bottom:8px">
-        <div style="font-weight:800;font-size:12px;color:var(--cs-color-brand-umber);margin-bottom:4px">BÊN A · NGƯỜI SỬ DỤNG LAO ĐỘNG <span style="font-weight:400;color:#3F4C55;font-style:italic">Party A · The Employer</span></div>
+        <div style="font-weight:800;font-size:12px;color:var(--cs-color-brand-umber);margin-bottom:4px">BÊN A · NGƯỜI SỬ DỤNG LAO ĐỘNG <span style="font-weight:400;color:var(--cs-doc-slate);font-style:italic">Party A · The Employer</span></div>
         <table style="width:100%;border-collapse:collapse;font-size:12px">
           <tbody>
-            <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:#3F4C55;font-style:italic;font-size:10.5px">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ế / DUNS<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Tax code / DUNS</div></td><td style="padding:5px 10px">0316475200 / 673219568</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:#3F4C55;font-style:italic;font-size:10.5px">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 · Chức vụ<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Represented by · Position</div></td><td style="padding:5px 10px">Ông Trịnh Thái Anh (Mr. Stephen) · Tổng Giám đốc / <span style="color:#3F4C55;font-style:italic">CEO</span></td></tr>
-            <tr><td style="padding:5px 10px;vertical-align:top">Điện thoại · Email<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Tel · Email</div></td><td style="padding:5px 10px">(+84) 906 878 091 · info@cyberskill.world</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:10.5px">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ế / DUNS<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Tax code / DUNS</div></td><td style="padding:5px 10px">0316475200 / 673219568</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:10.5px">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 · Chức vụ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Represented by · Position</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><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:10.5px">Tel · Email</div></td><td style="padding:5px 10px">(+84) 906 878 091 · info@cyberskill.world</td></tr>
           </tbody>
         </table>
       </div>
       <div class="cs-avoid" style="margin-bottom:14px">
-        <div style="font-weight:800;font-size:12px;color:var(--cs-color-brand-umber);margin-bottom:4px">BÊN B · NGƯỜI LAO ĐỘNG <span style="font-weight:400;color:#3F4C55;font-style:italic">Party B · The Employee</span></div>
+        <div style="font-weight:800;font-size:12px;color:var(--cs-color-brand-umber);margin-bottom:4px">BÊN B · NGƯỜI LAO ĐỘNG <span style="font-weight:400;color:var(--cs-doc-slate);font-style:italic">Party B · The Employee</span></div>
         <table style="width:100%;border-collapse:collapse;font-size:12px">
           <tbody>
-            <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;width:190px;vertical-align:top">Họ và tên<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Full name</div></td><td style="padding:5px 10px"><span style="background:#FDE68A;padding:0 3px">............................................</span></td></tr>
-            <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Ngày sinh · CCCD/Hộ chiếu<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Date of birth · ID/Passport</div></td><td style="padding:5px 10px"><span style="background:#FDE68A;padding:0 3px">.................. · ..................</span></td></tr>
-            <tr><td style="padding:5px 10px;vertical-align:top">Địa chỉ<div style="color:#3F4C55;font-style:italic;font-size:10.5px">Address</div></td><td style="padding:5px 10px"><span style="background:#FDE68A;padding:0 3px">............................................</span></td></tr>
+            <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;width:190px;vertical-align:top">Họ và tên<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Full name</div></td><td style="padding:5px 10px"><span style="background:var(--cs-doc-fill);padding:0 3px">............................................</span></td></tr>
+            <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:5px 10px;vertical-align:top">Ngày sinh · CCCD/Hộ chiếu<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Date of birth · ID/Passport</div></td><td style="padding:5px 10px"><span style="background:var(--cs-doc-fill);padding:0 3px">.................. · ..................</span></td></tr>
+            <tr><td style="padding:5px 10px;vertical-align:top">Địa chỉ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10.5px">Address</div></td><td style="padding:5px 10px"><span style="background:var(--cs-doc-fill);padding:0 3px">............................................</span></td></tr>
           </tbody>
         </table>
       </div>
       <div class="cs-avoid">
-        <p style="font-size:12.5px;line-height:1.5;margin:0 0 1px">Thành phố Hồ Chí Minh, ngày <span style="background:#FDE68A;padding:0 3px">...</span> tháng <span style="background:#FDE68A;padding:0 3px">...</span> năm <span style="background:#FDE68A;padding:0 3px">...</span></p>
-        <p style="font-size:11px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0 0 12px">Ho Chi Minh City, <span style="background:#FDE68A;padding:0 3px">...</span> / <span style="background:#FDE68A;padding:0 3px">...</span> / <span style="background:#FDE68A;padding:0 3px">...</span></p>
+        <p style="font-size:12.5px;line-height:1.5;margin:0 0 1px">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></p>
+        <p style="font-size:11px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0 0 12px">Ho Chi Minh City, <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></p>
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:44px">
-          <div style="text-align:center"><div style="font-weight:700;font-size:12px">NGƯỜI LAO ĐỘNG</div><div style="font-size:10.5px;color:#3F4C55;font-style:italic">The Employee (sign, full name)</div><div style="height:56px"></div><div style="border-top:1px solid #1A1614;width:70%;margin:0 auto"></div></div>
-          <div style="text-align:center"><div style="font-weight:700;font-size:12px">NGƯỜI SỬ DỤNG LAO ĐỘNG</div><div style="font-size:10.5px;color:#3F4C55;font-style:italic">The Employer (sign, full name)</div><div style="height:56px"></div><div style="border-top:1px solid #1A1614;width:70%;margin:0 auto"></div></div>
+          <div style="text-align:center"><div style="font-weight:700;font-size:12px">NGƯỜI LAO ĐỘNG</div><div style="font-size:10.5px;color:var(--cs-doc-slate);font-style:italic">The Employee (sign, full name)</div><div style="height:56px"></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:12px">NGƯỜI SỬ DỤNG LAO ĐỘNG</div><div style="font-size:10.5px;color:var(--cs-doc-slate);font-style:italic">The Employer (sign, full name)</div><div style="height:56px"></div><div style="border-top:1px solid var(--cs-doc-ink);width:70%;margin:0 auto"></div></div>
         </div>
       </div>
     </div>
-    <p style="font-size:12px;line-height:1.45;color:#3F4C55;font-style:italic;margin:8px 0 0">↑ Khối trong khung nét đứt là mẫu khởi đầu — sao chép rồi thay tiêu đề, số hiệu và nội dung. / The dashed block is the starting shell — copy it, then replace the title, number and content.</p>
+    <p style="font-size:12px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:8px 0 0">↑ Khối trong khung nét đứt là mẫu khởi đầu — sao chép rồi thay tiêu đề, số hiệu và nội dung. / The dashed block is the starting shell — copy it, then replace the title, number and content.</p>
     <div class="cs-break"></div>
-    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 10px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN B · CÁC DẠNG KHUNG <span style="font-weight:400;font-size:12px;color:#3F4C55;font-style:italic">Part B · Template archetypes</span></h2>
+    <h2 class="cs-avoid" style="font-size:16px;font-weight:800;color:var(--cs-color-brand-umber);margin:0 0 10px;padding-bottom:4px;border-bottom:2px solid var(--cs-color-brand-umber)">PHẦN B · CÁC DẠNG KHUNG <span style="font-weight:400;font-size:12px;color:var(--cs-doc-slate);font-style:italic">Part B · Template archetypes</span></h2>
     <table class="cs-avoid" style="width:100%;border-collapse:collapse;font-size:12px;margin:0 0 16px">
-      <thead><tr style="background:var(--cs-color-brand-umber);color:#fff"><th style="text-align:left;padding:6px 9px;font-size:10px;width:130px">Dạng <i style="font-weight:400">Archetype</i></th><th style="text-align:left;padding:6px 9px;font-size:10px">Khung &amp; khi nào dùng <i style="font-weight:400">Frame &amp; when to use</i></th><th style="text-align:left;padding:6px 9px;font-size:10px;width:120px">Ví dụ <i style="font-weight:400">Examples</i></th></tr></thead>
+      <thead><tr style="background:var(--cs-color-brand-umber);color:var(--cs-color-text-inverse,#fff)"><th style="text-align:left;padding:6px 9px;font-size:10px;width:130px">Dạng <i style="font-weight:400">Archetype</i></th><th style="text-align:left;padding:6px 9px;font-size:10px">Khung &amp; khi nào dùng <i style="font-weight:400">Frame &amp; when to use</i></th><th style="text-align:left;padding:6px 9px;font-size:10px;width:120px">Ví dụ <i style="font-weight:400">Examples</i></th></tr></thead>
       <tbody>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">A4 song ngữ<div style="color:#3F4C55;font-style:italic;font-size:10px">A4 bilingual instrument</div></td><td style="padding:6px 9px">Khung Phần A. Quốc hiệu, tiêu đề, các Điều, bảng BÊN A/B, khối ký. Điều 1–10 Cẩm nang áp dụng đầy đủ.<div style="color:#3F4C55;font-style:italic;font-size:10px">Part A shell. State motto, title, Articles, Party A/B tables, signing block. Style-Guide 1–10 in full.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">vn-labor-contract, vn-internal-labor-regulations</td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-weight:600">Letter in<div style="color:#3F4C55;font-style:italic;font-size:10px">Letter print doc</div></td><td style="padding:6px 9px">Như A4 nhưng khổ Letter, lề 0,6in; nền desk + sheet; xuất Print/PDF sạch. Dùng cho giấy tờ gửi khách.<div style="color:#3F4C55;font-style:italic;font-size:10px">As A4 but Letter, 0.6in margins; desk + sheet; clean Print/PDF. Client-facing paperwork.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">finance-invoice, legal-msa, sales-one-pager</td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Thư điện tử<div style="color:#3F4C55;font-style:italic;font-size:10px">Email (600px)</div></td><td style="padding:6px 9px">Thân 600px căn giữa; header/CTA theo màu hệ thống; không quốc hiệu, không khối ký; song ngữ qua tweak Language.<div style="color:#3F4C55;font-style:italic;font-size:10px">Centred 600px body; system-coloured header/CTA; no state motto or signing block; bilingual via Language tweak.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">email, hr-announcement, marketing-newsletter</td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-weight:600">Màn hình sản phẩm<div style="color:#3F4C55;font-style:italic;font-size:10px">Product screen</div></td><td style="padding:6px 9px">Dựng từ component + token; bốn trục Theme × Element × Language × Style. Không dùng hình học in.<div style="color:#3F4C55;font-style:italic;font-size:10px">Built from components + tokens; Theme × Element × Language × Style. No print geometry.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">marketing-page, dashboard, app-shell, auth</td></tr>
-        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Slide 16:9<div style="color:#3F4C55;font-style:italic;font-size:10px">Deck (16:9)</div></td><td style="padding:6px 9px">Slide xếp chồng, tỉ lệ 16:9; bìa nền umber, nhấn theo element; xuất PDF/PPTX.<div style="color:#3F4C55;font-style:italic;font-size:10px">Stacked 16:9 slides; umber cover, element accent; PDF/PPTX export.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">slide-deck, bod-deck, sales-proposal-deck</td></tr>
-        <tr><td style="padding:6px 9px;font-weight:600">Ảnh mạng xã hội<div style="color:#3F4C55;font-style:italic;font-size:10px">Social image</div></td><td style="padding:6px 9px">Khổ cố định theo kênh (1080² · 1200×630 · 1080×1920); màu/kiểu chữ/logo hệ thống.<div style="color:#3F4C55;font-style:italic;font-size:10px">Fixed per-channel size (1080² · 1200×630 · 1080×1920); system colour/type/logo.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">marketing-social-kit</td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">A4 song ngữ<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">A4 bilingual instrument</div></td><td style="padding:6px 9px">Khung Phần A. Quốc hiệu, tiêu đề, các Điều, bảng BÊN A/B, khối ký. Điều 1–10 Cẩm nang áp dụng đầy đủ.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Part A shell. State motto, title, Articles, Party A/B tables, signing block. Style-Guide 1–10 in full.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">vn-labor-contract, vn-internal-labor-regulations</td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-weight:600">Letter in<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Letter print doc</div></td><td style="padding:6px 9px">Như A4 nhưng khổ Letter, lề 0,6in; nền desk + sheet; xuất Print/PDF sạch. Dùng cho giấy tờ gửi khách.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">As A4 but Letter, 0.6in margins; desk + sheet; clean Print/PDF. Client-facing paperwork.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">finance-invoice, legal-msa, sales-one-pager</td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Thư điện tử<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Email (600px)</div></td><td style="padding:6px 9px">Thân 600px căn giữa; header/CTA theo màu hệ thống; không quốc hiệu, không khối ký; song ngữ qua tweak Language.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Centred 600px body; system-coloured header/CTA; no state motto or signing block; bilingual via Language tweak.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">email, hr-announcement, marketing-newsletter</td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)"><td style="padding:6px 9px;font-weight:600">Màn hình sản phẩm<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Product screen</div></td><td style="padding:6px 9px">Dựng từ component + token; bốn trục Theme × Element × Language × Style. Không dùng hình học in.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Built from components + tokens; Theme × Element × Language × Style. No print geometry.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">marketing-page, dashboard, app-shell, auth</td></tr>
+        <tr style="border-bottom:1px solid var(--cs-color-border-default)"><td style="padding:6px 9px;font-weight:600">Slide 16:9<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Deck (16:9)</div></td><td style="padding:6px 9px">Slide xếp chồng, tỉ lệ 16:9; bìa nền umber, nhấn theo element; xuất PDF/PPTX.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Stacked 16:9 slides; umber cover, element accent; PDF/PPTX export.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">slide-deck, bod-deck, sales-proposal-deck</td></tr>
+        <tr><td style="padding:6px 9px;font-weight:600">Ảnh mạng xã hội<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Social image</div></td><td style="padding:6px 9px">Khổ cố định theo kênh (1080² · 1200×630 · 1080×1920); màu/kiểu chữ/logo hệ thống.<div style="color:var(--cs-doc-slate);font-style:italic;font-size:10px">Fixed per-channel size (1080² · 1200×630 · 1080×1920); system colour/type/logo.</div></td><td style="padding:6px 9px;font-family:var(--cs-font-family-mono);font-size:9.5px">marketing-social-kit</td></tr>
       </tbody>
     </table>
     <div class="cs-avoid" style="background:#FBF4E9;border:1px solid var(--cs-color-border-default);border-radius:8px;padding:11px 15px">
       <p style="font-size:12.5px;line-height:1.5;margin:0 0 2px"><b>Thêm mẫu mới:</b> chọn dạng khung ở trên, rồi làm theo Điều 4 của Danh mục &amp; Hướng dẫn sử dụng (8 bước: dựng thư mục → dc_write → nạp ds-base → áp Điều 1–10 → thêm tweak Element + Language → giữ nội dung đã thẩm định → cập nhật danh mục + README/SKILL → check_design_system + kiểm tra bản in).</p>
-      <p style="font-size:11.5px;line-height:1.45;color:#3F4C55;font-style:italic;margin:0"><b>Adding a new template:</b> pick an archetype above, then follow Article 4 of the Suite Index &amp; Usage Guide (8 steps: scaffold folder → dc_write → load ds-base → apply Style-Guide 1–10 → add the Element + Language tweaks → keep validated content verbatim → update the catalogue + README/SKILL → check_design_system + verify the print output).</p>
+      <p style="font-size:11.5px;line-height:1.45;color:var(--cs-doc-slate);font-style:italic;margin:0"><b>Adding a new template:</b> pick an archetype above, then follow Article 4 of the Suite Index &amp; Usage Guide (8 steps: scaffold folder → dc_write → load ds-base → apply Style-Guide 1–10 → add the Element + Language tweaks → keep validated content verbatim → update the catalogue + README/SKILL → check_design_system + verify the print output).</p>
     </div>
-    <div style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:16px;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:#3F4C55">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 style="border-top:1px solid var(--cs-color-border-default);padding-top:8px;margin-top:16px;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>

package/templates/doc-templates/ds-base.js CHANGED Viewed

@@ -1,9 +1,10 @@
 // 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 ['styles.css']) {
+  for (const p of ['dist/styles.min.css']) {
     const l = document.createElement('link');
     l.rel = 'stylesheet'; l.href = base + '/' + p;
     document.head.appendChild(l);
@@ -20,4 +21,35 @@
   };
   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();
+  }
 })();