@cyberskill/design 1.2.0 → 1.3.9

package/tokens/tokens.js

@@ -1,8 +1,8 @@
-// CyberSkill design tokens — generated from tokens/*.css (v1.2.0). Do not edit by hand.
+// CyberSkill design tokens — generated from tokens/*.css (v1.3.9). Do not edit by hand.
 export const tokens = {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.2.0",
+    "version": "1.3.9",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
   },
@@ -66,7 +66,7 @@ export const tokens = {
       "--cs-accent-ink": "#45210E",
       "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
       "--cs-accent-grad-a": "#F4BA17",
-      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-accent-grad-b": "#F3B958",
       "--cs-accent-on-strong": "#1A1108"
     },
     "depth": {
@@ -135,6 +135,7 @@ export const tokens = {
     },
     "breakpoint": {
       "--cs-breakpoint-xs": "0px",
+      "--cs-breakpoint-phone": "360px",
       "--cs-breakpoint-sm": "640px",
       "--cs-breakpoint-md": "768px",
       "--cs-breakpoint-lg": "1024px",
@@ -274,9 +275,9 @@ export const tokens = {
       "--cs-accent-ink": "#292414",
       "--cs-accent-glow": "rgba(248, 233, 192, 0.48)",
       "--cs-accent-grad-a": "#F8E9C0",
-      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-accent-grad-b": "#F3B958",
       "--cs-color-text-accent": "#90825E",
-      "--cs-color-link": "#90825E"
+      "--cs-color-link": "#7B6D4A"
     },
     "tho": {
       "--cs-accent": "#F4BA17",
@@ -288,7 +289,7 @@ export const tokens = {
       "--cs-accent-ink": "#45210E",
       "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
       "--cs-accent-grad-a": "#F4BA17",
-      "--cs-accent-grad-b": "#FCAF91"
+      "--cs-accent-grad-b": "#F3B958"
     },
     "tho.clay": {
       "--cs-accent": "#513801",
@@ -300,7 +301,7 @@ export const tokens = {
       "--cs-accent-ink": "#2D220E",
       "--cs-accent-glow": "rgba(81, 56, 1, 0.48)",
       "--cs-accent-grad-a": "#513801",
-      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-accent-grad-b": "#F3B958",
       "--cs-color-text-accent": "#201300",
       "--cs-color-link": "#201300"
     },
@@ -316,7 +317,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#FFE1D8",
       "--cs-accent-grad-b": "#F4BA17",
       "--cs-color-text-accent": "#967C75",
-      "--cs-color-link": "#967C75"
+      "--cs-color-link": "#846B64"
     },
     "hoa": {
       "--cs-accent": "#FCAF91",
@@ -330,7 +331,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#FCAF91",
       "--cs-accent-grad-b": "#F4BA17",
       "--cs-color-text-accent": "#B47054",
-      "--cs-color-link": "#B47054"
+      "--cs-color-link": "#A15E43"
     },
     "hoa.lava": {
       "--cs-accent": "#622B06",
@@ -358,7 +359,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#C0F5FC",
       "--cs-accent-grad-b": "#A3D768",
       "--cs-color-text-accent": "#5A8A90",
-      "--cs-color-link": "#5A8A90"
+      "--cs-color-link": "#48787E"
     },
     "thuy": {
       "--cs-accent": "#2EDBF7",
@@ -372,7 +373,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#2EDBF7",
       "--cs-accent-grad-b": "#A3D768",
       "--cs-color-text-accent": "#108EA0",
-      "--cs-color-link": "#108EA0"
+      "--cs-color-link": "#027B8B"
     },
     "thuy.ocean": {
       "--cs-accent": "#004554",
@@ -400,7 +401,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#E1F1C8",
       "--cs-accent-grad-b": "#FCAF91",
       "--cs-color-text-accent": "#7C8965",
-      "--cs-color-link": "#7C8965"
+      "--cs-color-link": "#687451"
     },
     "moc": {
       "--cs-accent": "#A3D768",
@@ -414,7 +415,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#A3D768",
       "--cs-accent-grad-b": "#FCAF91",
       "--cs-color-text-accent": "#629122",
-      "--cs-color-link": "#629122"
+      "--cs-color-link": "#517B13"
     },
     "moc.forest": {
       "--cs-accent": "#1A4A01",
@@ -442,7 +443,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#FEE5C7",
       "--cs-accent-grad-b": "#2EDBF7",
       "--cs-color-text-accent": "#947F65",
-      "--cs-color-link": "#947F65"
+      "--cs-color-link": "#826D54"
     },
     "kim": {
       "--cs-accent": "#F3B958",
@@ -456,7 +457,7 @@ export const tokens = {
       "--cs-accent-grad-a": "#F3B958",
       "--cs-accent-grad-b": "#2EDBF7",
       "--cs-color-text-accent": "#AC780B",
-      "--cs-color-link": "#AC780B"
+      "--cs-color-link": "#966700"
     },
     "kim.steel": {
       "--cs-accent": "#503901",

package/tokens/tokens.json

@@ -1,7 +1,7 @@
 {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.2.0",
+    "version": "1.3.9",
     "generated": "2026-07-23",
     "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
   },
@@ -65,7 +65,7 @@
       "--cs-accent-ink": "#45210E",
       "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
       "--cs-accent-grad-a": "#F4BA17",
-      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-accent-grad-b": "#F3B958",
       "--cs-accent-on-strong": "#1A1108"
     },
     "depth": {
@@ -134,6 +134,7 @@
     },
     "breakpoint": {
       "--cs-breakpoint-xs": "0px",
+      "--cs-breakpoint-phone": "360px",
       "--cs-breakpoint-sm": "640px",
       "--cs-breakpoint-md": "768px",
       "--cs-breakpoint-lg": "1024px",
@@ -273,9 +274,9 @@
       "--cs-accent-ink": "#292414",
       "--cs-accent-glow": "rgba(248, 233, 192, 0.48)",
       "--cs-accent-grad-a": "#F8E9C0",
-      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-accent-grad-b": "#F3B958",
       "--cs-color-text-accent": "#90825E",
-      "--cs-color-link": "#90825E"
+      "--cs-color-link": "#7B6D4A"
     },
     "tho": {
       "--cs-accent": "#F4BA17",
@@ -287,7 +288,7 @@
       "--cs-accent-ink": "#45210E",
       "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
       "--cs-accent-grad-a": "#F4BA17",
-      "--cs-accent-grad-b": "#FCAF91"
+      "--cs-accent-grad-b": "#F3B958"
     },
     "tho.clay": {
       "--cs-accent": "#513801",
@@ -299,7 +300,7 @@
       "--cs-accent-ink": "#2D220E",
       "--cs-accent-glow": "rgba(81, 56, 1, 0.48)",
       "--cs-accent-grad-a": "#513801",
-      "--cs-accent-grad-b": "#FCAF91",
+      "--cs-accent-grad-b": "#F3B958",
       "--cs-color-text-accent": "#201300",
       "--cs-color-link": "#201300"
     },
@@ -315,7 +316,7 @@
       "--cs-accent-grad-a": "#FFE1D8",
       "--cs-accent-grad-b": "#F4BA17",
       "--cs-color-text-accent": "#967C75",
-      "--cs-color-link": "#967C75"
+      "--cs-color-link": "#846B64"
     },
     "hoa": {
       "--cs-accent": "#FCAF91",
@@ -329,7 +330,7 @@
       "--cs-accent-grad-a": "#FCAF91",
       "--cs-accent-grad-b": "#F4BA17",
       "--cs-color-text-accent": "#B47054",
-      "--cs-color-link": "#B47054"
+      "--cs-color-link": "#A15E43"
     },
     "hoa.lava": {
       "--cs-accent": "#622B06",
@@ -357,7 +358,7 @@
       "--cs-accent-grad-a": "#C0F5FC",
       "--cs-accent-grad-b": "#A3D768",
       "--cs-color-text-accent": "#5A8A90",
-      "--cs-color-link": "#5A8A90"
+      "--cs-color-link": "#48787E"
     },
     "thuy": {
       "--cs-accent": "#2EDBF7",
@@ -371,7 +372,7 @@
       "--cs-accent-grad-a": "#2EDBF7",
       "--cs-accent-grad-b": "#A3D768",
       "--cs-color-text-accent": "#108EA0",
-      "--cs-color-link": "#108EA0"
+      "--cs-color-link": "#027B8B"
     },
     "thuy.ocean": {
       "--cs-accent": "#004554",
@@ -399,7 +400,7 @@
       "--cs-accent-grad-a": "#E1F1C8",
       "--cs-accent-grad-b": "#FCAF91",
       "--cs-color-text-accent": "#7C8965",
-      "--cs-color-link": "#7C8965"
+      "--cs-color-link": "#687451"
     },
     "moc": {
       "--cs-accent": "#A3D768",
@@ -413,7 +414,7 @@
       "--cs-accent-grad-a": "#A3D768",
       "--cs-accent-grad-b": "#FCAF91",
       "--cs-color-text-accent": "#629122",
-      "--cs-color-link": "#629122"
+      "--cs-color-link": "#517B13"
     },
     "moc.forest": {
       "--cs-accent": "#1A4A01",
@@ -441,7 +442,7 @@
       "--cs-accent-grad-a": "#FEE5C7",
       "--cs-accent-grad-b": "#2EDBF7",
       "--cs-color-text-accent": "#947F65",
-      "--cs-color-link": "#947F65"
+      "--cs-color-link": "#826D54"
     },
     "kim": {
       "--cs-accent": "#F3B958",
@@ -455,7 +456,7 @@
       "--cs-accent-grad-a": "#F3B958",
       "--cs-accent-grad-b": "#2EDBF7",
       "--cs-color-text-accent": "#AC780B",
-      "--cs-color-link": "#AC780B"
+      "--cs-color-link": "#966700"
     },
     "kim.steel": {
       "--cs-accent": "#503901",

package/ui_kits/deck/index.html

@@ -40,7 +40,7 @@
 </style>
 </head>
 <body>
-<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Bỏ qua đến nội dung</a>
 <main id="main">
 
 <deck-stage width="1920" height="1080">

package/ui_kits/status-hub/StatusHub.jsx

@@ -139,7 +139,7 @@ function StatusHub() {
 
   return (
     <div className="sh" lang={lang} data-theme={dark ? "dark" : undefined}>
-      <a className="cs-skip" href="#main" style={{ position: "absolute", left: -999, width: 1, height: 1, overflow: "hidden" }}>Skip to content</a>
+      <a className="cs-skip" href="#main" style={{ position: "absolute", left: -999, width: 1, height: 1, overflow: "hidden" }}>{lang === "vi" ? "Bỏ qua đến nội dung" : "Skip to content"}</a>
       <header className="hd">
         <div className="hd-in">
           <div className="hd-id">

package/ui_kits/status-hub/login.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Status Hub" viewport="1280x760" name="Status Hub — sign in" subtitle="Umber split login with brand panel + form controls" -->
+<!-- @dsCard group="Status Hub" viewport="1280x760" name="Status Hub — sign in" subtitle="Umber split login with brand panel + form controls (default / loading / error / invalid)" -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -11,12 +11,12 @@
   html, body { margin: 0; min-height: 100vh; }
   .login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
   .pane-brand { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; padding: 56px 60px; display: flex; flex-direction: column; }
-  .pane-brand::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .42; }
+  .pane-brand::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .42; }
   .pane-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,17,8,.35), rgba(26,17,8,.8)); }
   .pane-brand > * { position: relative; z-index: 1; }
   .brand-lock { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 20px; }
   .brand-lock img { width: 40px; height: 40px; }
-  .pane-brand h2 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--cs-color-brand-ochre); margin: auto 0 8px; }
+  .pane-brand .brand-headline { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; color: var(--cs-color-brand-ochre); margin: auto 0 8px; }
   .pane-brand p { font-size: 17px; opacity: .9; margin: 0; max-width: 420px; }
   .pane-form { display: grid; place-items: center; padding: 40px 24px; background: var(--cs-color-surface-page); }
   .box { width: min(400px, 100%); }
@@ -25,37 +25,58 @@
   form { display: grid; gap: 16px; }
   .rowbetween { display: flex; align-items: center; justify-content: space-between; }
   .fine { text-align: center; font-size: 13px; color: var(--cs-color-text-muted); margin-top: 4px; }
+  .state-bar { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); border-radius: 12px; box-shadow: var(--cs-shadow-md); font-size: 13px; }
+  .state-bar label { display: flex; align-items: center; gap: 6px; color: var(--cs-color-text-muted); }
+  .state-bar select { font: inherit; }
+  [hidden] { display: none !important; }
   @media (max-width: 820px) { .login { grid-template-columns: 1fr; } .pane-brand { display: none; } }
 </style>
 </head>
 <body>
-<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Bỏ qua đến nội dung</a>
 <main id="main">
 
 <div class="login">
   <div class="pane-brand">
     <div class="brand-lock"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</div>
-    <h2>Turn Your Will Into Real</h2>
+    <p class="brand-headline">Turn Your Will Into Real</p>
     <p>Sign in to the Status Hub — one page, three lenses across every wish in flight.</p>
   </div>
   <div class="pane-form">
     <div class="box">
       <h1>Sign in</h1>
       <p class="sub">Welcome back. Đăng nhập để tiếp tục.</p>
-      <form onsubmit="return false">
-        <label class="cs-field"><span class="cs-field__label">Work email</span><input class="cs-field__control" type="email" placeholder="you@cyberskill.world" /></label>
-        <label class="cs-field"><span class="cs-field__label">Password</span><input class="cs-field__control" type="password" placeholder="••••••••" value="wishgranted" /></label>
+      <form id="loginForm" onsubmit="return false">
+        <div id="errBanner" class="cs-alert cs-alert--danger" role="status" hidden>
+          <span class="cs-alert__icon" aria-hidden="true">!</span>
+          <div>
+            <p class="cs-alert__title">Sign-in failed</p>
+            <div class="cs-alert__body">Check your email and password, then try again.</div>
+          </div>
+        </div>
+        <label id="emailField" class="cs-field"><span class="cs-field__label">Work email</span><input id="emailInput" class="cs-field__control" type="email" placeholder="you@cyberskill.world" /><span id="emailError" class="cs-field__error" role="alert" hidden>Enter a valid work email.</span></label>
+        <label class="cs-field"><span class="cs-field__label">Password</span><input class="cs-field__control" type="password" placeholder="••••••••" value="" /></label>
         <div class="rowbetween">
-          <label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span><span class="cs-switch__label">Remember me</span></label>
+          <label class="cs-switch"><input type="checkbox" role="switch" /><span class="cs-switch__track"></span><span class="cs-switch__label">Remember me</span></label>
           <a href="#">Forgot password?</a>
         </div>
-        <button type="submit" class="cs-button cs-button--primary cs-button--full">Sign in</button>
+        <button id="submitBtn" type="submit" class="cs-button cs-button--primary cs-button--full">Sign in</button>
         <button type="button" class="cs-button cs-button--ghost cs-button--full">✦ Talk to Lumi instead</button>
       </form>
       <p class="fine">New here? <a href="#">Ask for access</a></p>
     </div>
   </div>
 </div>
+<div class="state-bar" aria-label="Demo form state">
+  <label>Form state
+    <select id="formState">
+      <option value="default" selected>default</option>
+      <option value="loading">loading</option>
+      <option value="error">error</option>
+      <option value="invalid">invalid</option>
+    </select>
+  </label>
+</div>
 <button id="themeToggle" aria-label="Toggle theme" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
 <script>
   document.getElementById("themeToggle").addEventListener("click", function () {
@@ -63,6 +84,27 @@
     el.setAttribute("data-theme", dark ? "light" : "dark");
     this.textContent = dark ? "☾" : "☀";
   });
+  function applyState(state) {
+    var banner = document.getElementById("errBanner");
+    var emailField = document.getElementById("emailField");
+    var emailInput = document.getElementById("emailInput");
+    var emailError = document.getElementById("emailError");
+    var btn = document.getElementById("submitBtn");
+    banner.hidden = state !== "error";
+    var invalid = state === "invalid";
+    emailField.classList.toggle("is-invalid", invalid);
+    emailInput.setAttribute("aria-invalid", invalid ? "true" : "false");
+    if (!invalid) emailInput.removeAttribute("aria-invalid");
+    emailError.hidden = !invalid;
+    var loading = state === "loading";
+    btn.classList.toggle("is-loading", loading);
+    btn.disabled = loading;
+    btn.setAttribute("aria-busy", loading ? "true" : "false");
+    btn.textContent = loading ? "Signing in…" : "Sign in";
+  }
+  var sel = document.getElementById("formState");
+  sel.addEventListener("change", function () { applyState(sel.value); });
+  applyState(sel.value);
 </script>
 </main>
 </body>

package/ui_kits/status-hub/project.html

@@ -36,7 +36,7 @@
 </style>
 </head>
 <body>
-<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Bỏ qua đến nội dung</a>
 <main id="main">
 
 <div class="sh">

package/ui_kits/status-hub/settings.html

@@ -27,7 +27,7 @@
 </style>
 </head>
 <body>
-<a class="cs-skip" href="#main">Skip to content</a>
+<a class="cs-skip" href="#main">Bỏ qua đến nội dung</a>
 <div class="sh">
   <header class="hd">
     <div class="hd-in">

package/ui_kits/website/Website.jsx

@@ -67,7 +67,7 @@ function Website() {
 
   return (
     <div className="site" data-theme={dark ? "dark" : undefined}>
-      <a className="cs-skip" href="#main" style={{ position: "absolute", left: -999, width: 1, height: 1, overflow: "hidden" }}>Skip to content</a>
+      <a className="cs-skip" href="#main" style={{ position: "absolute", left: -999, width: 1, height: 1, overflow: "hidden" }}>{loc === "vi" ? "Bỏ qua đến nội dung" : "Skip to content"}</a>
       <header className="hdr cs-surface-light">
         <div className="container hdr-in">
           <a className="brand" href="#top"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>

package/ui_kits/website/careers.html

@@ -11,7 +11,7 @@
 <style>
   html, body { margin: 0; }
   .car-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 76px 0 64px; position: relative; overflow: hidden; }
-  .car-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .32; }
+  .car-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .32; }
   .car-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.28), rgba(26,17,8,.78)); }
   .car-hero .container { position: relative; z-index: 1; }
   .car-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 12px 0 6px; }
@@ -29,7 +29,7 @@
 </style>
 </head>
 <body>
-<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Bỏ qua đến nội dung</a>
 <main id="main">
 
 <div class="site">

package/ui_kits/website/chat.html

@@ -36,7 +36,7 @@
 <script src="../../_ds_bundle.js"></script>
 </head>
 <body>
-<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Bỏ qua đến nội dung</a>
 
 <div id="root"></div>
 <script type="text/babel">

package/ui_kits/website/site.css

@@ -23,7 +23,7 @@
 
 /* hero */
 .hero { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; }
-.hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .5; }
+.hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .5; }
 .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.35), rgba(26,17,8,.82) 78%); }
 .hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--cs-space-8); align-items: center; padding: 84px 0 96px; }
 .hero .eyebrow { color: var(--cs-color-brand-ochre); }

package/ui_kits/website/work.html

@@ -11,7 +11,7 @@
 <style>
   html, body { margin: 0; }
   .work-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 72px 0 60px; position: relative; overflow: hidden; }
-  .work-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .34; }
+  .work-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .34; }
   .work-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.3), rgba(26,17,8,.75)); }
   .work-hero .container { position: relative; z-index: 1; }
   .work-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 12px 0 6px; }
@@ -35,7 +35,7 @@
 </style>
 </head>
 <body>
-<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Skip to content</a>
+<a class="cs-skip" href="#main" style="position:absolute;left:-999px;width:1px;height:1px;overflow:hidden">Bỏ qua đến nội dung</a>
 <main id="main">
 
 <div class="site">

package/docs/decisions/container-query-migration.md

@@ -1,18 +0,0 @@
-# Container-query migration (G1 / CDS-RESP-001)
-
-Status: **started Phase 4** (2026-08-08) — compatibility layer only.  
-Owner: design-system maintainer.
-
-## Decision
-
-Begin container-query adoption **behind a compatibility CSS opt-in**, without rewriting every template grid in one pass.
-
-1. Hosts opt in with `.cs-cq` (`container-type: inline-size`).
-2. Children may use `@container cs (max-width: …)` rules; first helper: `.cs-cq-stack`.
-3. Existing `@media` rules in `base/responsive.css` remain the default authority until generated layout classes land.
-
-## Acceptance for later waves
-
-- Kit card grids and Status Hub lenses can size from parent width, not only viewport.
-- No regression on `_audit/responsive-overflow-320.html` or zoom-text-spacing.
-- Document any permanent media-only exceptions in this file.

package/docs/decisions/overlay-manager-design.md

@@ -1,101 +0,0 @@
-# Overlay manager design (C8 / CDS-ARCH-001)
-
-Status: **landed in Phase 3** (operator decision D5=A, 2026-08-08) — see `components/overlays/OverlayManager.jsx`.  
-Owner: design-system maintainer · Related: UX-009 depth tokens, CDS-A11Y-003 keyboard models.
-
-## Problem
-
-Overlays (Dialog, AlertDialog, Drawer, Popover, Menu, CommandPalette, Toast, Tour) currently each own:
-
-- z-index (with dialog hardcoding `1000` historically — now tokenized to `--cs-depth-modal`)
-- focus trap / restore
-- body scroll-lock
-- Escape handling
-
-Nested overlays (toast while modal open; confirm inside drawer) race on DOM order and scroll-lock count. Keyboard models for complex widgets (CDS-A11Y-003) need a single stack authority.
-
-## Goals
-
-1. One stack owns paint order (depth tokens), focus scope, Escape routing, and scroll-lock refcount.
-2. Toasts always paint above modals (`--cs-depth-toast` > `--cs-depth-modal`) — already the token doctrine.
-3. Nested overlays: only the topmost modal-layer traps focus; Escape closes topmost first.
-4. No third-party floating library required for v1; Floating UI may be adopted later for positioning only.
-
-## Non-goals (v1)
-
-- Rewriting every popover positioner
-- Changing public component props (additive `layer` / `portal` opts only)
-- SSR portal polyfills beyond “no `window` during render” (Tour already fixed)
-
-## API sketch
-
-```ts
-// components/overlays/OverlayManager.jsx (Phase 3 land)
-
-type LayerKind = 'dropdown' | 'popover' | 'modal' | 'toast' | 'tour';
-
-type LayerRegistration = {
-  id: string;
-  kind: LayerKind;
-  /** Focus trap when kind is modal */
-  trapFocus?: boolean;
-  onEscape?: () => void;
-  /** Element that receives restore focus */
-  restoreEl?: HTMLElement | null;
-};
-
-type OverlayManagerApi = {
-  register(layer: LayerRegistration): () => void; // unregister
-  top(): LayerRegistration | null;
-  /** Refcount scroll lock — lock while any modal registered */
-  scrollLocked: boolean;
-};
-
-// React context
-const OverlayContext = React.createContext<OverlayManagerApi | null>(null);
-function OverlayProvider({ children }: { children: React.ReactNode }): JSX.Element;
-function useOverlayLayer(opts: Omit<LayerRegistration, 'id'>): { id: string };
-```
-
-### Depth mapping
-
-| Kind | Token | Notes |
-|------|-------|--------|
-| dropdown | `--cs-depth-dropdown` (60) | Menus under sticky nav |
-| popover | `--cs-depth-overlay` | HoverCard, Popover |
-| modal | `--cs-depth-modal` (100) | Dialog, AlertDialog, Drawer, CommandPalette |
-| toast | `--cs-depth-toast` (200) | Above modals |
-| tour | `--cs-depth-toast` or dedicated | Full-viewport coachmarks |
-
-### Focus & Escape
-
-- Modal registration pushes a focus scope; Tab cycles within the topmost modal host (`.cs-dialog-layer` / drawer panel).
-- Escape invokes `onEscape` of `top()` only; if none, bubbles.
-- Unregister restores focus to `restoreEl` when that layer was topmost at close.
-
-### Scroll-lock
-
-- `document.documentElement` / `body` overflow hidden while `count(modal) > 0`.
-- Nested modals increment; close decrements — no flicker unlock.
-
-### Portal host
-
-```html
-<div id="cs-overlay-root" data-cs-overlay-root></div>
-```
-
-Components portal into `#cs-overlay-root` when present; otherwise document.body (today’s behavior). Kits and Atomic View mount the root once.
-
-## Migration (Phase 3)
-
-1. Ship `OverlayProvider` + `useOverlayLayer` beside existing components (no breaking change).
-2. Wire Dialog / AlertDialog / Drawer / CommandPalette / ToastStack first.
-3. Add a11y-gate rows: nested dialog+toast, nested dialog+alertdialog Escape order, scroll-lock refcount.
-4. Then E3 keyboard models for Cascader / TreeSelect / Menubar adopt the same focus-scope helper.
-
-## Acceptance
-
-- Toast visible above open dialog (behavior gate — already green; keep).
-- Nested AlertDialog inside Dialog: Escape closes alert first; focus returns to dialog.
-- Zero raw `z-index` > 20 in `base/` outside token vars (token-contract).
-- Design note remains the SoT until Phase 3 lands code under `components/overlays/`.