@cyberskill/design 1.1.1 → 1.3.8

package/ui_kits/status-hub/StatusHub.jsx

@@ -139,6 +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" }}>{lang === "vi" ? "Bỏ qua đến nội dung" : "Skip to content"}</a>
       <header className="hd">
         <div className="hd-in">
           <div className="hd-id">
@@ -156,7 +157,7 @@ function StatusHub() {
         </div>
       </header>
 
-      <div className="wrap">
+      <main id="main" className="wrap">
         <div className="deck">
           <section className="panel">
             <h2>{t.portfolio}</h2>
@@ -195,9 +196,34 @@ function StatusHub() {
         <div className="bar">
           <div className="bar-top">
             <label className="srch"><SearchGlyph /><input placeholder={t.search} value={q} onChange={(e) => setQ(e.target.value)} /></label>
-            <div className="lenses" role="tablist" aria-label={t.view}>
+            <div
+              className="lenses"
+              role="tablist"
+              aria-label={t.view}
+              onKeyDown={(e) => {
+                const order = ["board", "table", "releases"];
+                const i = order.indexOf(lens);
+                let next = i;
+                if (e.key === "ArrowRight") next = (i + 1) % order.length;
+                else if (e.key === "ArrowLeft") next = (i - 1 + order.length) % order.length;
+                else if (e.key === "Home") next = 0;
+                else if (e.key === "End") next = order.length - 1;
+                else return;
+                e.preventDefault();
+                setLens(order[next]);
+                const tabs = e.currentTarget.querySelectorAll('[role="tab"]');
+                tabs[next] && tabs[next].focus && tabs[next].focus();
+              }}
+            >
               {["board", "table", "releases"].map((l) => (
-                <button key={l} className="ln" role="tab" aria-selected={lens === l} onClick={() => setLens(l)}>{t.lenses[l]}</button>
+                <button
+                  key={l}
+                  className="ln"
+                  role="tab"
+                  aria-selected={lens === l}
+                  tabIndex={lens === l ? 0 : -1}
+                  onClick={() => setLens(l)}
+                >{t.lenses[l]}</button>
               ))}
             </div>
             <label className="facet">{t.status}
@@ -260,7 +286,7 @@ function StatusHub() {
         <p className="ft">{lang === "vi"
           ? <>CyberSkill Status Hub — bản tái hiện UI kit của design system. Dựng trên token <span className="mono">styles.css</span>. Turn Your Will Into Real.</>
           : <>CyberSkill Status Hub — a design-system UI kit recreation. Built on <span className="mono">styles.css</span> tokens. Turn Your Will Into Real.</>}</p>
-      </div>
+      </main>
 
       <Drawer p={sel && loc(sel)} onClose={() => setSel(null)} t={t} />
     </div>

package/ui_kits/status-hub/index.html

@@ -9,9 +9,9 @@
 <link rel="stylesheet" href="../../styles.css" />
 <link rel="stylesheet" href="status.css" />
 <style>html,body{margin:0;background:var(--cs-color-surface-page);min-height:100vh}</style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="data.js"></script>
 </head>
 <body>

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,34 +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">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 () {
@@ -60,6 +84,28 @@
     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>
 </html>

package/ui_kits/status-hub/project.html

@@ -36,6 +36,9 @@
 </style>
 </head>
 <body>
+<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">
   <header class="hd">
     <div class="hd-in">
@@ -133,5 +136,6 @@
     this.textContent = dark ? "☾" : "☀";
   });
 </script>
+</main>
 </body>
 </html>

package/ui_kits/status-hub/settings.html

@@ -22,9 +22,12 @@
   .danger .t { font-weight: 700; }
   .actions { display: flex; gap: 10px; justify-content: flex-end; }
   @media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }
+  .cs-skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
+  .cs-skip:focus{position:fixed;left:12px;top:12px;z-index:9999;width:auto;height:auto;padding:10px 14px;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);border:2px solid var(--cs-color-brand-ochre);border-radius:8px;overflow:visible}
 </style>
 </head>
 <body>
+<a class="cs-skip" href="#main">Bỏ qua đến nội dung</a>
 <div class="sh">
   <header class="hd">
     <div class="hd-in">
@@ -36,15 +39,15 @@
     </div>
   </header>
 
-  <div class="wrap">
-    <nav class="cs-tabs" style="margin-top:24px" aria-label="Settings sections">
-      <button class="cs-tab" aria-selected="true">Profile</button>
-      <button class="cs-tab">Notifications</button>
-      <button class="cs-tab">Appearance</button>
-      <button class="cs-tab">Team <span class="cs-tab__count">6</span></button>
-    </nav>
+  <main id="main" class="wrap">
+    <div class="cs-tabs" style="margin-top:24px;overflow-x:auto" role="tablist" aria-label="Settings sections">
+      <button type="button" class="cs-tab" role="tab" aria-selected="true" tabindex="0" id="tab-profile" aria-controls="panel-settings">Profile</button>
+      <button type="button" class="cs-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-notifications" aria-controls="panel-settings">Notifications</button>
+      <button type="button" class="cs-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-appearance" aria-controls="panel-settings">Appearance</button>
+      <button type="button" class="cs-tab" role="tab" aria-selected="false" tabindex="-1" id="tab-team" aria-controls="panel-settings">Team <span class="cs-tab__count">6</span></button>
+    </div>
 
-    <div class="set-grid">
+    <div class="set-grid" id="panel-settings" role="tabpanel" aria-labelledby="tab-profile">
       <section class="panel">
         <h3 class="sec">Profile</h3>
         <p class="hint">This is how you appear across the Status Hub.</p>
@@ -60,10 +63,10 @@
         <h3 class="sec">Notifications</h3>
         <p class="hint">We keep it quiet — only what you ask for.</p>
         <div class="cs-scroll-area" style="max-block-size:220px;padding-inline-end:6px" tabindex="0" aria-label="Notification preferences">
-          <div class="toggle-row"><div><div class="t">Release notes</div><div class="d">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
-          <div class="toggle-row"><div><div class="t">Blocked-project alerts</div><div class="d">Get pinged when a project moves to Blocked.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
-          <div class="toggle-row"><div><div class="t">Weekly velocity digest</div><div class="d">Tasks shipped per week, every Monday morning.</div></div><label class="cs-switch"><input type="checkbox" role="switch" /><span class="cs-switch__track"></span></label></div>
-          <div class="toggle-row"><div><div class="t">Quiet hours</div><div class="d">No pings between 22:00 and 07:00 local time.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-release">Release notes</div><div class="d">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked aria-labelledby="lbl-release" /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-blocked">Blocked-project alerts</div><div class="d">Get pinged when a project moves to Blocked.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked aria-labelledby="lbl-blocked" /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-digest">Weekly velocity digest</div><div class="d">Tasks shipped per week, every Monday morning.</div></div><label class="cs-switch"><input type="checkbox" role="switch" aria-labelledby="lbl-digest" /><span class="cs-switch__track"></span></label></div>
+          <div class="toggle-row"><div><div class="t" id="lbl-quiet">Quiet hours</div><div class="d">No pings between 22:00 and 07:00 local time.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked aria-labelledby="lbl-quiet" /><span class="cs-switch__track"></span></label></div>
         </div>
       </section>
 
@@ -77,7 +80,7 @@
         <button class="cs-button cs-button--primary">Save changes</button>
       </div>
     </div>
-  </div>
+  </main>
 </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>
@@ -86,6 +89,25 @@
     el.setAttribute("data-theme", dark ? "light" : "dark");
     this.textContent = dark ? "☾" : "☀";
   });
+
+  (function(){
+    var tabs=[].slice.call(document.querySelectorAll('[role="tablist"] [role="tab"]'));
+    tabs.forEach(function(tab,i){
+      tab.addEventListener('click',function(){
+        tabs.forEach(function(x,j){ x.setAttribute('aria-selected', j===i?'true':'false'); x.tabIndex=j===i?0:-1; });
+      });
+      tab.addEventListener('keydown',function(e){
+        var cur=tabs.indexOf(document.activeElement); if(cur<0) return;
+        var next=cur;
+        if(e.key==='ArrowRight') next=(cur+1)%tabs.length;
+        else if(e.key==='ArrowLeft') next=(cur-1+tabs.length)%tabs.length;
+        else if(e.key==='Home') next=0;
+        else if(e.key==='End') next=tabs.length-1;
+        else return;
+        e.preventDefault(); tabs[next].focus(); tabs[next].click();
+      });
+    });
+  })();
 </script>
 </body>
 </html>

package/ui_kits/status-hub/status.css

@@ -129,7 +129,7 @@
 .chip.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill); border-color: transparent; }
 
 /* board */
-.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--cs-space-4); }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--cs-space-4); }
 .card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
   border-radius: 14px; padding: var(--cs-space-4); cursor: pointer; text-align: left; font: inherit; color: inherit; }
 .card:hover { border-color: var(--cs-color-brand-ochre); }
@@ -197,3 +197,7 @@ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
 .ft { margin: var(--cs-space-12) 0 var(--cs-space-16); text-align: center; font-size: 12px; color: var(--cs-color-text-muted); }
 
 @media (max-width: 900px) { .deck { grid-template-columns: 1fr; } .hd-meta { text-align: left; } }
+
+/* UX-024 readable measure */
+.panel p, .notes, .release-body, article p { max-inline-size: var(--cs-prose-measure, 45rem); }
+.card, button.card { min-width: 0; }

package/ui_kits/website/Website.jsx

@@ -53,12 +53,21 @@ function Website() {
   const [seed, setSeed] = useState("");
   const [wish, setWish] = useState("");
   const [sent, setSent] = useState(false);
+  const [fabVisible, setFabVisible] = useState(false);
   const t = window.SITE_COPY[loc];
 
   function openChat(s) { setSeed(s || ""); setChat(true); }
 
+  useEffect(() => {
+    const sync = () => setFabVisible(window.scrollY > 140);
+    sync();
+    window.addEventListener("scroll", sync, { passive: true });
+    return () => window.removeEventListener("scroll", sync);
+  }, []);
+
   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" }}>{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>
@@ -66,10 +75,11 @@ function Website() {
           <div className="hdr-side">
             <button className="mini" onClick={() => setLoc(loc === "en" ? "vi" : "en")}>{t.langLabel}</button>
             <button className="mini icon" onClick={() => setDark(!dark)} aria-label="Toggle theme"><I name={dark ? "sun" : "moon"} size={18} /></button>
-            <button className="mini" style={{ background: "var(--cs-color-brand-umber)", color: "#fff", borderColor: "transparent" }} onClick={() => openChat("")}>{t.talk}</button>
+            <button className="mini" style={{ background: "var(--cs-color-brand-umber)", color: "var(--cs-color-text-inverse,#fff)", borderColor: "transparent" }} onClick={() => openChat("")}>{t.talk}</button>
           </div>
         </div>
       </header>
+      <main id="main">
 
       <section className="hero" id="top">
         <div className="container hero-in">
@@ -81,7 +91,6 @@ function Website() {
             <div className="wish">
               <input value={wish} onChange={(e) => setWish(e.target.value)} onKeyDown={(e) => e.key === "Enter" && openChat(wish)} placeholder={t.wishPlaceholder} aria-label={t.wishPlaceholder} />
               <button className="btn-gold" onClick={() => openChat(wish)}><I name="sparkle" size={18} />{t.wishCta}</button>
-              <button className="btn-ghost-light" onClick={() => openChat("")}>{t.talk}</button>
             </div>
           </div>
           <div className="hero-art"><img src="../../assets/lumi-poster.webp" alt="Lumi, the golden genie" /></div>
@@ -149,6 +158,7 @@ function Website() {
           )}
         </div>
       </section>
+      </main>
 
       <footer className="ft">
         <div className="container ft-in">
@@ -158,7 +168,19 @@ function Website() {
         </div>
       </footer>
 
-      {!chat && <button className="fab" onClick={() => openChat("")}><img src="../../assets/lumi-poster.webp" alt="" />{t.talk}</button>}
+      {!chat && (
+        <button
+          className="fab"
+          type="button"
+          data-fab-deferred="1"
+          onClick={() => openChat("")}
+          style={{ opacity: fabVisible ? 1 : 0, pointerEvents: fabVisible ? "auto" : "none", transition: "opacity 160ms ease" }}
+          aria-hidden={!fabVisible}
+          tabIndex={fabVisible ? 0 : -1}
+        >
+          <img src="../../assets/lumi-poster.webp" alt="" />{t.talk}
+        </button>
+      )}
       {chat && <Chat t={t} seed={seed} onClose={() => setChat(false)} />}
     </div>
   );

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,6 +29,9 @@
 </style>
 </head>
 <body>
+<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">
   <header class="hdr cs-surface-light">
     <div class="container hdr-in">
@@ -105,5 +108,6 @@
   if(link) link.addEventListener("click", function(e){e.preventDefault(); apply(document.documentElement.getAttribute("lang")!=="vi");});
 })();
 </script>
+</main>
 </body>
 </html>

package/ui_kits/website/chat.html

@@ -30,12 +30,14 @@
   .lumi-answer-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
   @media (max-width: 820px) { .lumi-page { grid-template-columns: 1fr; } .lumi-side { display: none; } }
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <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">Bỏ qua đến nội dung</a>
+
 <div id="root"></div>
 <script type="text/babel">
 const CS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};

package/ui_kits/website/index.html

@@ -9,9 +9,9 @@
 <link rel="stylesheet" href="../../styles.css" />
 <link rel="stylesheet" href="site.css" />
 <style>html,body{margin:0}</style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_vendor/react/react.production.min.js"></script>
+<script src="../../_vendor/react/react-dom.production.min.js"></script>
+<script src="../../_vendor/babel/babel.min.js"></script>
 <script src="copy.js"></script>
 </head>
 <body>

package/ui_kits/website/site.css

@@ -23,13 +23,13 @@
 
 /* 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); }
 .hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 6px; color: var(--cs-color-brand-ochre); }
 .hero .vn { font-size: 20px; font-weight: 600; opacity: .9; margin-bottom: 18px; }
-.hero .lead { font-size: 18px; line-height: 1.55; max-width: 620px; opacity: .95; }
+.hero .lead { font-size: 18px; line-height: 1.55; max-width: min(620px, var(--cs-prose-measure, 45rem)); opacity: .95; }
 .wish { display: flex; gap: 10px; margin-top: 26px; max-width: 620px; flex-wrap: wrap; }
 .wish input { flex: 1 1 300px; min-height: 52px; border-radius: var(--cs-radius-full); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); backdrop-filter: blur(8px); color: #fff; padding: 0 22px; font: 400 15px/1 var(--cs-font-family-ui); }
 .wish input::placeholder { color: rgba(255,255,255,.72); }
@@ -53,7 +53,7 @@
 .sec { padding: 88px 0; }
 .sec-alt { background: var(--cs-color-surface-raised); }
 .sec h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
-.sec-lead { font-size: 17px; color: var(--cs-color-text-muted); max-width: 620px; margin: 0 0 40px; }
+.sec-lead { font-size: 17px; color: var(--cs-color-text-muted); max-width: min(620px, var(--cs-prose-measure, 45rem)); margin: 0 0 40px; }
 
 /* services */
 .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cs-space-5); }

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,6 +35,9 @@
 </style>
 </head>
 <body>
+<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">
   <header class="hdr cs-surface-light">
     <div class="container hdr-in">
@@ -115,5 +118,6 @@
   if(link) link.addEventListener("click", function(e){e.preventDefault(); apply(document.documentElement.getAttribute("lang")!=="vi");});
 })();
 </script>
+</main>
 </body>
 </html>

package/docs/status/assets/favicon.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-<rect width="64" height="64" rx="14" fill="#45210E"/>
-<rect y="50" width="64" height="14" fill="#F4BA17"/>
-<text x="32" y="42" font-family="Georgia, 'Times New Roman', serif" font-size="34" font-weight="700" fill="#ffffff" text-anchor="middle">D</text>
-</svg>