@cyberskill/design 2.8.0 → 2.9.0

package/styles.layered.provenance.json

@@ -20,7 +20,7 @@
     },
     {
       "path": "tokens/colors.css",
-      "sha256": "40914e9efbdde8c8b9f81a49881d4c5c98646ccf8b53397d4fbf7fc8ce0b54f4"
+      "sha256": "8156d4d2ae951e1939a522bf835c151e8e987c841d49129a0ebfaf8f20b8ca56"
     },
     {
       "path": "tokens/typography.css",
@@ -32,7 +32,7 @@
     },
     {
       "path": "tokens/elevation.css",
-      "sha256": "0c24e92a2026cc036ee53b72d6bb4ffef3e44ca12641650e8ad97c687acb7f6b"
+      "sha256": "2014355eac5748460932783ca3fa03bfd26bc2bb6d1a3144347792b4fdd8ee7b"
     },
     {
       "path": "tokens/motion.css",
@@ -44,11 +44,11 @@
     },
     {
       "path": "tokens/elements.css",
-      "sha256": "b6282cecc7e8b3c154530b36e62f36e9744c73c24e8ae59cbe1ea5650d3073cb"
+      "sha256": "fdc5f1597d253fa8ad63f46fe26b4856060971d8c58ce1e1f8de2f745013ea2f"
     },
     {
       "path": "tokens/styles.css",
-      "sha256": "4b677b90823a026f96e295ea5b6537a3c125b04bb93d3f67c09a7dcf341a6630"
+      "sha256": "d0b582f5d054406280e44a6edd452deb329e0950d8ebca1106be14e583af7c7c"
     },
     {
       "path": "tokens/theme-attributes.css",
@@ -64,35 +64,35 @@
     },
     {
       "path": "base/components.css",
-      "sha256": "568dd72532092ccc5530944772f63509a69cc4d1de89f9f9a44f5bcbefa3ccb6"
+      "sha256": "77b6b6cd7df2ed9c65e531a6d3e9c869b173d85c2bd7a9657cc6731dc1139726"
     },
     {
       "path": "base/forms.css",
-      "sha256": "4999e66483fa95bab74e087471b7762f2a2e566331809488e5416cbf1d662522"
+      "sha256": "5e380ff5a6ba6f0cbaa5bf0b8f1da3af6c6415a2451c86acfa430a0ced014052"
     },
     {
       "path": "base/feedback.css",
-      "sha256": "ba1aadc4ae1c9f9a07ad9df36df06184244ebe488ec723b30ab691d97d09ae4d"
+      "sha256": "ba6e95a6316c9b65f6d279306a9e2f447874a06f709e2d5f62d3e62de3a0436d"
     },
     {
       "path": "base/data.css",
-      "sha256": "4c92290bf35d51a0f0244ca05ab70f57fe4453abb8f71ba23327606f5a2a4227"
+      "sha256": "f910e6a023cd1444cb4b8288ca939c223311e8a2124e465e5f5aea254dfcf4f9"
     },
     {
       "path": "base/navigation.css",
-      "sha256": "4958938bd2775bf4fa430c9eeee514242dc5931fee66113c1b94d043e0fd0964"
+      "sha256": "48799ecc9eae03301003f05fd194194f49d210e65ce9d2ad721686dfd8c8dc7e"
     },
     {
       "path": "base/ai.css",
-      "sha256": "fe288cee4345584a0fc189c6deb356e0af078a18fb0e8ad2f6ef4dd4e1511665"
+      "sha256": "6f00788d6efdcc62435834ccb065158f8e80f7b5208f089080cf10a7dbe0f8d5"
     },
     {
       "path": "base/controls.css",
-      "sha256": "1f983026bbc0e5f5962fad7c7188729c74530cd8983fd29e00d6304854231e28"
+      "sha256": "f6ff09b41ed693b4c9de6a699209e8744a8b116104cf3120e94fbacb42bd0dba"
     },
     {
       "path": "base/collections.css",
-      "sha256": "9d55ef7c05f38a9ac789014868b15e1495e4fb46f9fc30d729cc0ef6dc6794ee"
+      "sha256": "fd5d59fb1ef0adac438c7decf0abbdf6de217e33072df79ab609ca9a96a3890c"
     },
     {
       "path": "base/shell.css",
@@ -100,7 +100,7 @@
     },
     {
       "path": "base/glass.css",
-      "sha256": "fe27603ead71c265aa4f30deb0bc754d09f5e71d7cfc656e282a740fffb87f2f"
+      "sha256": "70a9c914734c6b5f5d51fa214c3747c5d294e9c4a1c5d505a942072c53451192"
     },
     {
       "path": "base/interaction.css",
@@ -108,11 +108,11 @@
     },
     {
       "path": "base/a11y.css",
-      "sha256": "07ea769359d4eefe6fc820b9fc13fef2790cc278c1289f0f1cc493ca5c288bd4"
+      "sha256": "15a6dec38ca80f791f68c417e8eaa0fc93c1b6795f749bdaf66c6ae7b8cef37e"
     },
     {
       "path": "base/responsive.css",
-      "sha256": "e3e3509509d6d495a26e582dc6c9263a9e525e16f4f8936386ee5b372e7c5947"
+      "sha256": "2365ed1f0b1ce2d062581c0bd48942c4c24185654f0b2ee6fc4eb688d76839eb"
     }
   ],
   "assets": [
@@ -156,5 +156,5 @@
     "fonts/spacegrotesk-var-vietnamese.woff2"
   ],
   "importantCount": 46,
-  "sha256": "9e74deff65b37c3251f2917609bf8d908caea447ad0c87344f6f4363aaa60df4"
+  "sha256": "21f6aad8afd38694dc3282ccaf461e50e61e278fcdeff49941ab94bd73a9fb9e"
 }

package/templates/_vendor/doc-export.js

@@ -190,6 +190,10 @@
       if (isChrome(node)) return;
       const tag = node.tagName.toLowerCase();
       if (tag === 'script' || tag === 'style' || tag === 'noscript' || tag === 'svg') return;
+      if (tag === 'br') {
+        parts.push({ t: '', br: true, italic, bold, color, fill, size });
+        return;
+      }
       const st = window.getComputedStyle(node);
       const nextItalic = italic || st.fontStyle === 'italic' || tag === 'i' || tag === 'em';
       const nextBold =
@@ -214,7 +218,7 @@
         if (parts.length > before && nxt) {
           const last = parts[parts.length - 1];
           const nextRaw = nxt.textContent || '';
-          if (last && last.t && !/\s$/.test(last.t) && nextRaw.replace(/\s+/g, '') && !/^\s/.test(nextRaw)) {
+          if (last && !last.br && last.t && !/\s$/.test(last.t) && nextRaw.replace(/\s+/g, '') && !/^\s/.test(nextRaw)) {
             parts.push({
               t: ' ',
               italic: nextItalic,
@@ -237,6 +241,8 @@
       const prev = merged[merged.length - 1];
       if (
         prev &&
+        !prev.br &&
+        !r.br &&
         prev.italic === r.italic &&
         prev.bold === r.bold &&
         prev.color === r.color &&
@@ -257,6 +263,7 @@
     }
     return runs
       .map((r) => {
+        if (r.br) return '<w:r><w:br/></w:r>';
         const rPr = [];
         if (r.bold) rPr.push('<w:b/>');
         if (r.italic) rPr.push('<w:i/>');

package/templates/ai-cluster-demo.html

@@ -7,7 +7,7 @@
 <style>
   body{margin:0 auto;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);padding:24px;max-width:720px}
   h1{font-size:18px;margin:0 0 8px} .sub{color:var(--cs-color-text-muted);font-size:13px;line-height:1.5;margin:0 0 18px}
-  #root{display:grid;gap:14px}
+  #root,#cluster{display:grid;gap:16px;align-items:start}
 </style>
 <script src="../_vendor/react/react.production.min.js"></script>
 <script src="../_vendor/react/react-dom.production.min.js"></script>
@@ -19,7 +19,7 @@
 <div id="root"></div>
 </main>
 <script>
-const NS=window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))];
+const NS=window[Object.keys(window).find(k=>k.startsWith('CyberSkillDesignSystem_'))];
 const h=React.createElement;
 function App(){
   const [lang,setLang]=React.useState('en');

package/templates/app-shell/AppShell.dc.html

@@ -42,13 +42,13 @@
         <h1 style="font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:0 0 4px">{{ h1 }}</h1>
         <p style="color:var(--cs-color-text-muted);margin:0">{{ sub }}</p>
       </div>
-      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);padding:22px 24px">
+      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start;gap:20px;background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);padding:22px 24px;box-shadow:var(--cs-shadow-xs)">
         <x-import component-from-global-scope="CyberSkillDS.Stat" label="{{ s1 }}" value="6" hint-size="140px,70px"></x-import>
         <x-import component-from-global-scope="CyberSkillDS.Stat" label="{{ s2 }}" value="4" hint-size="140px,70px"></x-import>
         <x-import component-from-global-scope="CyberSkillDS.Stat" label="{{ s3 }}" value="1" hint-size="140px,70px"></x-import>
         <x-import component-from-global-scope="CyberSkillDS.Stat" label="{{ s4 }}" value="70%" delta="{{ s4d }}" trend="up" hint-size="140px,70px"></x-import>
       </div>
-      <div style="background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);padding:6px 18px 12px">
+      <div style="background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);padding:16px 20px 14px;box-shadow:var(--cs-shadow-xs)">
         <x-import component-from-global-scope="CyberSkillDS.DataTable" caption="{{ tblCap }}" columns="{{ cols }}" rows="{{ rows }}" row-key="key" hint-size="100%,220px"></x-import>
       </div>
     </main>

package/templates/bod-deck/BodDeck.dc.html

@@ -30,9 +30,9 @@
     </section>
 
     <section style="position:relative;width:100%;aspect-ratio:16/9;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);border-radius:var(--cs-radius-lg);overflow:hidden;box-shadow:var(--cs-shadow-xl);padding:64px 88px;display:flex;flex-direction:column;justify-content:center">
-      <div style="font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-primary)">{{ s2kicker }}</div>
+      <div style="font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">{{ s2kicker }}</div>
       <h2 style="font-size:44px;font-weight:800;letter-spacing:-0.02em;margin:10px 0 40px">{{ s2h }}</h2>
-      <div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;overflow-wrap:anywhere">
+      <div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;align-items:start;font-variant-numeric:tabular-nums;overflow-wrap:anywhere">
         <div><div style="font-size:60px;font-weight:800;color:var(--cs-color-text-accent);line-height:1;letter-spacing:-0.02em">+18%</div><div style="font-size:19px;color:var(--cs-color-text-muted);margin-top:10px">{{ n1 }}</div></div>
         <div><div style="font-size:60px;font-weight:800;color:var(--cs-color-text-accent);line-height:1;letter-spacing:-0.02em">14</div><div style="font-size:19px;color:var(--cs-color-text-muted);margin-top:10px">{{ n2 }}</div></div>
         <div><div style="font-size:60px;font-weight:800;color:var(--cs-color-text-accent);line-height:1;letter-spacing:-0.02em">{{ runway }}</div><div style="font-size:19px;color:var(--cs-color-text-muted);margin-top:10px">{{ n3 }}</div></div>
@@ -42,7 +42,7 @@
     </section>
 
     <section style="position:relative;width:100%;aspect-ratio:16/9;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);border-radius:var(--cs-radius-lg);overflow:hidden;box-shadow:var(--cs-shadow-xl);padding:64px 88px;display:flex;flex-direction:column;justify-content:center">
-      <div style="font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-primary)">{{ s3kicker }}</div>
+      <div style="font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">{{ s3kicker }}</div>
       <h2 style="font-size:44px;font-weight:800;letter-spacing:-0.02em;margin:10px 0 34px">{{ s3h }}</h2>
       <div style="display:grid;gap:16px;font-size:22px">
         <div style="display:flex;align-items:center;gap:20px;border-top:3px solid var(--cs-accent);padding-top:16px"><b style="flex:1">{{ p1n }}</b><span style="color:var(--cs-color-semantic-success-text);font-weight:700">{{ p1s }}</span><span style="width:140px;text-align:right;font-family:var(--cs-font-family-mono)">₫3.1B</span></div>

package/templates/bod-investor-update/BodInvestorUpdate.dc.html

@@ -23,7 +23,7 @@
     </div>
     <div style="padding:30px 32px">
       <h1 style="font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;margin:0 0 14px">{{ h1 }}</h1>
-      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px">
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;font-variant-numeric:tabular-nums">
         <div style="background:var(--cs-accent-tint);border-radius:var(--cs-radius-md);padding:12px 14px"><div style="font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--cs-color-text-accent)">+18%</div><div style="font-size:11px;color:var(--cs-color-text-muted);margin-top:2px">{{ k1 }}</div></div>
         <div style="background:var(--cs-accent-tint);border-radius:var(--cs-radius-md);padding:12px 14px"><div style="font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--cs-color-text-accent)">{{ runway }}</div><div style="font-size:11px;color:var(--cs-color-text-muted);margin-top:2px">{{ k2 }}</div></div>
         <div style="background:var(--cs-accent-tint);border-radius:var(--cs-radius-md);padding:12px 14px"><div style="font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--cs-color-text-accent)">14</div><div style="font-size:11px;color:var(--cs-color-text-muted);margin-top:2px">{{ k3 }}</div></div>

package/templates/dashboard/Dashboard.dc.html

@@ -27,14 +27,14 @@
           <p style="margin:2px 0 0;font-size:13px;color:var(--cs-accent-on-strong)">{{ tagline }}</p>
         </div>
       </div>
-      <span>
+      <span style="--cs-component-button-primary-bg:var(--cs-accent-on-strong);--cs-component-button-primary-fg:var(--cs-accent-strong)">
         <x-import component-from-global-scope="CyberSkillDS.Button" variant="primary" size="sm" hint-size="130px,36px">{{ newBtn }}</x-import>
       </span>
     </div>
   </header>
 
   <div style="max-width:1280px;margin:0 auto;padding:28px">
-    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding:22px 24px;background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-sm)">
+    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:start;gap:20px;padding:22px 24px;background:var(--cs-color-surface-panel);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);box-shadow:var(--cs-shadow-sm)">
       <x-import component-from-global-scope="CyberSkillDS.Stat" label="{{ s1 }}" value="6" hint-size="140px,70px"></x-import>
       <x-import component-from-global-scope="CyberSkillDS.Stat" label="{{ s2 }}" value="4" hint-size="140px,70px"></x-import>
       <x-import component-from-global-scope="CyberSkillDS.Stat" label="{{ s3 }}" value="1" hint-size="140px,70px"></x-import>

package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html

@@ -32,7 +32,7 @@
     <section style="position:relative;width:100%;aspect-ratio:16/9;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);border-radius:var(--cs-radius-lg);overflow:hidden;box-shadow:var(--cs-shadow-xl);padding:64px 88px;display:flex;flex-direction:column;justify-content:center">
       <div style="font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">{{ s2kicker }}</div>
       <h2 style="font-size:44px;font-weight:800;letter-spacing:-0.02em;margin:10px 0 40px">{{ s2h }}</h2>
-      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:40px">
+      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:start;font-variant-numeric:tabular-nums">
         <div><div style="font-size:56px;font-weight:800;color:var(--cs-color-text-accent);line-height:1;letter-spacing:-0.02em">+31%</div><div style="font-size:18px;color:var(--cs-color-text-muted);margin-top:10px">{{ k1 }}</div></div>
         <div><div style="font-size:56px;font-weight:800;color:var(--cs-color-text-accent);line-height:1;letter-spacing:-0.02em">−1.8s</div><div style="font-size:18px;color:var(--cs-color-text-muted);margin-top:10px">{{ k2 }}</div></div>
         <div><div style="font-size:56px;font-weight:800;color:var(--cs-color-text-accent);line-height:1;letter-spacing:-0.02em">0</div><div style="font-size:18px;color:var(--cs-color-text-muted);margin-top:10px">{{ k3 }}</div></div>
@@ -66,7 +66,7 @@
 
     <section style="position:relative;width:100%;aspect-ratio:16/9;background:var(--cs-color-brand-umber);color:#FFFDF8;border-radius:var(--cs-radius-lg);overflow:hidden;box-shadow:var(--cs-shadow-xl);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 88px">
       <img data-cs-official-logo="" class="cs-logo" width="66" height="66" role="img" alt="CyberSkill" title="CyberSkill">
-      <h2 style="font-size:50px;font-weight:800;letter-spacing:-0.02em;color:var(--cs-accent-strong);margin:24px 0 10px">{{ closeH }}</h2>
+      <h2 style="font-size:50px;font-weight:800;letter-spacing:-0.02em;color:var(--cs-accent-bright);margin:24px 0 10px">{{ closeH }}</h2>
       <p style="font-size:22px;opacity:0.9;margin:0 0 8px;max-width:860px">{{ closeP }}</p>
       <p style="font-size:17px;opacity:0.7;margin:0">vu@cyberskill.world · Status Hub</p>
       <sc-if value="{{ showNumbers }}"><div style="position:absolute;bottom:40px;right:88px;font-family:var(--cs-font-family-mono);font-size:14px;color:var(--cs-accent-bright)">05 / 05</div></sc-if>

package/templates/delivery-status-email/DeliveryStatusEmail.dc.html

@@ -18,7 +18,7 @@
     <div style="background:var(--cs-accent-strong);padding:22px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px">
       <img data-cs-official-logo="" class="cs-logo" width="28" height="28" role="img" alt="CyberSkill" title="CyberSkill">
       <span style="color:var(--cs-accent-on-strong);font-weight:800;font-size:16px">CyberSkill · Delivery</span>
-      <span style="margin-left:auto;background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);font-weight:700;font-size:13px;white-space:nowrap;flex-shrink:0;padding:4px 12px;border-radius:var(--cs-radius-full)">On track</span>
+      <span style="margin-left:auto;background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);border:1.5px solid var(--cs-accent-on-strong);font-weight:700;font-size:13px;white-space:nowrap;flex-shrink:0;padding:4px 12px;border-radius:var(--cs-radius-full)">On track</span>
     </div>
     <div style="padding:30px 32px">
       <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">

package/templates/email/Email-VN-standalone.html

@@ -32,14 +32,14 @@
       <sc-if value="{{ showLogo }}" hint-placeholder-val="{{ true }}">
         <x-import component-from-global-scope="CyberSkillDS.Logo" size="34" hint-size="34px,34px"></x-import>
       </sc-if>
-      <span style="color:#fff;font-weight:800;font-size:19px;letter-spacing:-0.01em">CyberSkill</span>
+      <span style="color:var(--cs-accent-on-strong);font-weight:800;font-size:19px;letter-spacing:-0.01em">CyberSkill</span>
     </div>
     <div style="padding:36px 32px">
       <div style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">Điều ước của bạn đang được thực hiện</div>
       <h1 style="font-size:28px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;margin:10px 0 14px">Chúng tôi đã bắt đầu điều ước của bạn, An.</h1>
       <p style="font-size:16px;line-height:1.65;margin:0 0 16px">Một người thật trong đội đã tiếp nhận yêu cầu thanh toán nhanh hơn của bạn. Chúng tôi sẽ gửi bản hình dung đầu tiên trong vòng một ngày làm việc — làm để chạy được, và làm để bền lâu.</p>
       <p style="font-size:16px;line-height:1.65;margin:0 0 28px;color:var(--cs-color-text-muted)">Trong lúc chờ, bạn có thể theo dõi tiến độ trên Status Hub của mình.</p>
-      <a class="cs-touch-target" href="#" style="display:inline-block;background:var(--cs-accent-bright);color:var(--cs-accent-ink);font-weight:700;font-size:15px;text-decoration:none;padding:14px 26px;border-radius:var(--cs-radius-full)">Xem Status Hub của bạn →</a>
+      <a class="cs-touch-target" href="#" style="display:inline-block;background:var(--cs-accent-strong);color:var(--cs-accent-on-strong);font-weight:700;font-size:15px;text-decoration:none;padding:14px 26px;border-radius:var(--cs-radius-full)">Xem Status Hub của bạn →</a>
     </div>
     <div style="border-top:1px solid var(--cs-color-border-default);padding:22px 32px;background:var(--cs-color-surface-raised)">
       <p style="margin:0 0 6px;font-size:13px;color:var(--cs-color-text-muted)">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>

package/templates/email-safe/email-announcement.html

@@ -23,7 +23,7 @@
     .container,.card{background:#221710!important;color:#f5ead9!important}
     .raise{background:#2b1e14!important}
     .ink{color:#f5ead9!important}
-    .muted{color:#c9b7a3!important}
+    .muted{color:#E9D6C2!important}
     .eyebrow,.footlink{color:#F4BA17!important}
   }
 </style>
@@ -49,7 +49,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Team announcement</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.2;font-weight:bold;color:#45210E;">Please welcome An to Platform.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#3d2c1e;">An joins us from 1 September with a decade of product work across web and mobile. She’ll be pairing on the checkout rebuild first.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#6e5a4c;">Say hello in #platform — and ask her about her rooftop garden.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#5E4436;">Say hello in #platform — and ask her about her rooftop garden.</p>
             <!-- Bulletproof button -->
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
@@ -67,7 +67,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Thông báo nội bộ</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.25;font-weight:bold;color:#45210E;">Xin chào mừng An gia nhập Platform.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#3d2c1e;">An gia nhập từ 1 tháng 9, mang theo một thập kỷ làm sản phẩm trên web và di động. Bạn ấy sẽ cùng làm phần xây lại thanh toán trước tiên.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#6e5a4c;">Chào An trong #platform — và hỏi bạn ấy về khu vườn sân thượng nhé.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#5E4436;">Chào An trong #platform — và hỏi bạn ấy về khu vườn sân thượng nhé.</p>
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
                 <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://cyberskill.world/team" style="height:48px;v-text-anchor:middle;width:250px;" arcsize="54%" strokecolor="#F4BA17" fillcolor="#F4BA17"><w:anchorlock/><center style="color:#45210E;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Gặp đội ngũ &rarr;</center></v:roundrect><![endif]-->
@@ -79,8 +79,8 @@
         <!-- Footer -->
         <tr>
           <td class="px raise" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
-            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
+            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5E4436;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
+            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#5E4436;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
           </td>
         </tr>
       </table>

package/templates/email-safe/email-dunning.html

@@ -12,7 +12,7 @@
 <style>
   a{color:#6E3B0E}
   @media only screen and (max-width:600px){.container{width:100%!important}.px{padding-left:22px!important;padding-right:22px!important}}
-  @media (prefers-color-scheme: dark){.bodybg{background:#1a1108!important}.container,.card{background:#221710!important;color:#f5ead9!important}.ink{color:#f5ead9!important}.muted{color:#c9b7a3!important}.box{background:#2b1e14!important}.eyebrow,.footlink{color:#F4BA17!important}}
+  @media (prefers-color-scheme: dark){.bodybg{background:#1a1108!important}.container,.card{background:#221710!important;color:#f5ead9!important}.ink{color:#f5ead9!important}.muted{color:#E9D6C2!important}.box{background:#2b1e14!important}.eyebrow,.footlink{color:#F4BA17!important}}
 </style>
 </head>
 <body class="bodybg" style="margin:0;padding:0;background:#efe6d8;-webkit-text-size-adjust:100%;">
@@ -32,9 +32,9 @@
     <tr><td class="px card" lang="en" style="padding:0 32px 6px;">
       <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="box" bgcolor="#fbf4e9" style="background:#fbf4e9;border:1px solid #e7d9c6;border-radius:12px;"><tr><td style="padding:16px 20px;">
         <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
-          <tr><td class="muted" style="font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#6e5a4c;">Amount due</td><td class="ink" align="right" style="font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:bold;color:#45210E;">78.000.000&#8363;</td></tr>
+          <tr><td class="muted" style="font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#5E4436;">Amount due</td><td class="ink" align="right" style="font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:bold;color:#45210E;">78.000.000&#8363;</td></tr>
           <tr><td colspan="2" style="font-size:8px;line-height:8px;">&nbsp;</td></tr>
-          <tr><td class="muted" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Due date</td><td class="ink" align="right" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#45210E;">10/07/2026</td></tr>
+          <tr><td class="muted" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5E4436;">Due date</td><td class="ink" align="right" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#45210E;">10/07/2026</td></tr>
         </table>
       </td></tr></table>
     </td></tr>
@@ -49,10 +49,10 @@
     <tr><td class="px card" lang="vi" bgcolor="#ffffff" style="background:#ffffff;padding:20px 32px 30px;">
       <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Một lời nhắc nhẹ</p>
       <p class="ink" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65;color:#3d2c1e;"><b>Hoá đơn INV-2026-0142 đã quá hạn 7 ngày.</b> Nếu bạn đã thanh toán, xin cảm ơn và bỏ qua thư này. Nếu cần xem lại, chỉ cần trả lời email.</p>
-      <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.6;color:#6e5a4c;">Số tiền: <b class="ink" style="color:#45210E">78.000.000&#8363;</b> · Hạn: 10/07/2026 · Theo MSA, khoản chưa tranh chấp chịu lãi 1%/tháng sau hạn — chúng tôi thật lòng không mong điều đó.</p>
+      <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.6;color:#5E4436;">Số tiền: <b class="ink" style="color:#45210E">78.000.000&#8363;</b> · Hạn: 10/07/2026 · Theo MSA, khoản chưa tranh chấp chịu lãi 1%/tháng sau hạn — chúng tôi thật lòng không mong điều đó.</p>
     </td></tr>
     <tr><td class="px box" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:20px 32px;border-top:1px solid #e7d9c6;">
-      <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn · <a class="footlink" href="https://cyberskill.world/billing" style="color:#6E3B0E;"><span lang="en">Billing</span> / <span lang="vi">Thanh toán</span></a></p>
+      <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#5E4436;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn · <a class="footlink" href="https://cyberskill.world/billing" style="color:#6E3B0E;"><span lang="en">Billing</span> / <span lang="vi">Thanh toán</span></a></p>
     </td></tr>
   </table>
 </td></tr></table>

package/templates/email-safe/email-investor.html

@@ -23,7 +23,7 @@
     .container,.card{background:#221710!important;color:#f5ead9!important}
     .raise{background:#2b1e14!important}
     .ink{color:#f5ead9!important}
-    .muted{color:#c9b7a3!important}
+    .muted{color:#E9D6C2!important}
     .eyebrow,.footlink{color:#F4BA17!important}
   }
 </style>
@@ -49,7 +49,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Investor update · Q3 2026</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.2;font-weight:bold;color:#45210E;">A strong quarter, one honest miss.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#3d2c1e;">Revenue up, runway healthy at 19 months, and delivery on time. We missed our hiring target by two roles — a deliberate choice to hold the bar rather than fill fast.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#6e5a4c;">The full numbers, commentary, and the ask are in the linked memo.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#5E4436;">The full numbers, commentary, and the ask are in the linked memo.</p>
             <!-- Bulletproof button -->
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
@@ -67,7 +67,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Cập nhật nhà đầu tư · Q3 2026</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.25;font-weight:bold;color:#45210E;">Một quý vững vàng, một điểm chưa đạt.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#3d2c1e;">Doanh thu tăng, số tháng còn vốn ở mức lành mạnh 19 tháng, giao đúng hạn. Chúng tôi hụt chỉ tiêu tuyển dụng hai vị trí — một lựa chọn có chủ đích: giữ chuẩn thay vì tuyển vội.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#6e5a4c;">Toàn bộ con số, bình luận và đề xuất nằm trong bản ghi đính kèm.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#5E4436;">Toàn bộ con số, bình luận và đề xuất nằm trong bản ghi đính kèm.</p>
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
                 <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://cyberskill.world/investors" style="height:48px;v-text-anchor:middle;width:250px;" arcsize="54%" strokecolor="#F4BA17" fillcolor="#F4BA17"><w:anchorlock/><center style="color:#45210E;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Đọc bản cập nhật &rarr;</center></v:roundrect><![endif]-->
@@ -79,8 +79,8 @@
         <!-- Footer -->
         <tr>
           <td class="px raise" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
-            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
+            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5E4436;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
+            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#5E4436;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
           </td>
         </tr>
       </table>

package/templates/email-safe/email-launch.html

@@ -23,7 +23,7 @@
     .container,.card{background:#221710!important;color:#f5ead9!important}
     .raise{background:#2b1e14!important}
     .ink{color:#f5ead9!important}
-    .muted{color:#c9b7a3!important}
+    .muted{color:#E9D6C2!important}
     .eyebrow,.footlink{color:#F4BA17!important}
   }
 </style>
@@ -49,7 +49,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Just shipped</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.2;font-weight:bold;color:#45210E;">15 element packs, verified.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#3d2c1e;">Theme × Element × Language × Style across the whole system. The same components re-skin with no code change.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#6e5a4c;">See them live in the playground, then pick your product’s pack.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#5E4436;">See them live in the playground, then pick your product’s pack.</p>
             <!-- Bulletproof button -->
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
@@ -67,7 +67,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Vừa ra mắt</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.25;font-weight:bold;color:#45210E;">15 element pack, đã kiểm định.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#3d2c1e;">Theme × Element × Language × Style trên toàn hệ thống. Cùng một component đổi da theo trục mà không cần sửa code.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#6e5a4c;">Xem trực tiếp trong playground, rồi chọn pack cho sản phẩm của bạn.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#5E4436;">Xem trực tiếp trong playground, rồi chọn pack cho sản phẩm của bạn.</p>
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
                 <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://cyberskill.world/packs" style="height:48px;v-text-anchor:middle;width:250px;" arcsize="54%" strokecolor="#F4BA17" fillcolor="#F4BA17"><w:anchorlock/><center style="color:#45210E;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Khám phá các pack &rarr;</center></v:roundrect><![endif]-->
@@ -79,8 +79,8 @@
         <!-- Footer -->
         <tr>
           <td class="px raise" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
-            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
+            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5E4436;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
+            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#5E4436;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
           </td>
         </tr>
       </table>

package/templates/email-safe/email-newsletter.html

@@ -12,7 +12,7 @@
 <style>
   a{color:#6E3B0E}
   @media only screen and (max-width:600px){.container{width:100%!important}.px{padding-left:22px!important;padding-right:22px!important}}
-  @media (prefers-color-scheme: dark){.bodybg{background:#1a1108!important}.container,.card{background:#221710!important;color:#f5ead9!important}.ink{color:#f5ead9!important}.muted{color:#c9b7a3!important}.raise{background:#2b1e14!important}.eyebrow,.footlink{color:#F4BA17!important}}
+  @media (prefers-color-scheme: dark){.bodybg{background:#1a1108!important}.container,.card{background:#221710!important;color:#f5ead9!important}.ink{color:#f5ead9!important}.muted{color:#E9D6C2!important}.raise{background:#2b1e14!important}.eyebrow,.footlink{color:#F4BA17!important}}
 </style>
 </head>
 <body class="bodybg" style="margin:0;padding:0;background:#efe6d8;-webkit-text-size-adjust:100%;">
@@ -30,21 +30,21 @@
     <tr><td class="px card" lang="en" bgcolor="#ffffff" style="background:#ffffff;padding:32px 32px 6px;">
       <h1 class="ink" style="margin:0 0 12px;font-family:Arial,Helvetica,sans-serif;font-size:26px;line-height:1.2;font-weight:bold;color:#45210E;">Design System v1.6 is live</h1>
       <p class="ink" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#3d2c1e;">Warmer, faster, and bilingual by default. Here's what it means for your next release.</p>
-      <p lang="vi" class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#6e5a4c;">Hệ thiết kế v1.6 — ấm hơn, nhanh hơn, song ngữ mặc định. Đây là điều nó mang lại cho bản phát hành tiếp theo của bạn.</p>
+      <p lang="vi" class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#5E4436;">Hệ thiết kế v1.6 — ấm hơn, nhanh hơn, song ngữ mặc định. Đây là điều nó mang lại cho bản phát hành tiếp theo của bạn.</p>
     </td></tr>
     <!-- Story cards (stacked rows) -->
     <tr><td class="px card" lang="en" style="padding:20px 32px 4px;">
       <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="raise" bgcolor="#fbf4e9" style="background:#fbf4e9;border-radius:12px;"><tr><td style="padding:16px 18px;">
         <p class="eyebrow" style="margin:0 0 4px;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Liquid Glass · Vật liệu kính lỏng</p>
         <p class="ink" style="margin:0 0 4px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55;color:#3d2c1e;">Five materials, now one class away on any surface — nav, cards, modals.</p>
-        <p lang="vi" class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55;color:#6e5a4c;">Năm chất liệu kính, nay chỉ cách một class trên mọi bề mặt — thanh điều hướng, thẻ, hộp thoại.</p>
+        <p lang="vi" class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55;color:#5E4436;">Năm chất liệu kính, nay chỉ cách một class trên mọi bề mặt — thanh điều hướng, thẻ, hộp thoại.</p>
       </td></tr></table>
     </td></tr>
     <tr><td class="px card" lang="en" style="padding:12px 32px 4px;">
       <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="raise" bgcolor="#fbf4e9" style="background:#fbf4e9;border-radius:12px;"><tr><td style="padding:16px 18px;">
         <p class="eyebrow" style="margin:0 0 4px;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">15 element packs · 15 gói nguyên tố</p>
         <p class="ink" style="margin:0 0 4px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55;color:#3d2c1e;">Theme × Element × Language × Style — verified across the whole set.</p>
-        <p lang="vi" class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55;color:#6e5a4c;">Theme × Element × Language × Style — đã kiểm định trên toàn bộ hệ thống.</p>
+        <p lang="vi" class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55;color:#5E4436;">Theme × Element × Language × Style — đã kiểm định trên toàn bộ hệ thống.</p>
       </td></tr></table>
     </td></tr>
     <!-- CTA -->
@@ -56,8 +56,8 @@
     </td></tr>
     <!-- Footer -->
     <tr><td class="px raise" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
-      <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-      <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a></p>
+      <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5E4436;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
+      <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#5E4436;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a></p>
     </td></tr>
   </table>
 </td></tr></table>

package/templates/email-safe/email-status.html

@@ -23,7 +23,7 @@
     .container,.card{background:#221710!important;color:#f5ead9!important}
     .raise{background:#2b1e14!important}
     .ink{color:#f5ead9!important}
-    .muted{color:#c9b7a3!important}
+    .muted{color:#E9D6C2!important}
     .eyebrow,.footlink{color:#F4BA17!important}
   }
 </style>
@@ -49,7 +49,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Weekly update · Checkout</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.2;font-weight:bold;color:#45210E;">On track — one risk to watch.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#3d2c1e;">Two of three deliverables are done and in review. The A/B kit is a week behind on data, not build — we flagged it early so there are no surprises.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#6e5a4c;">Full detail, decisions, and next steps are on your Status Hub.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#5E4436;">Full detail, decisions, and next steps are on your Status Hub.</p>
             <!-- Bulletproof button -->
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
@@ -67,7 +67,7 @@
             <p class="eyebrow" style="margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;color:#6E3B0E;">Cập nhật tuần · Thanh toán</p>
             <h1 class="h1 ink" style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:27px;line-height:1.25;font-weight:bold;color:#45210E;">Đúng tiến độ — một rủi ro cần theo dõi.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#3d2c1e;">Hai trong ba hạng mục đã xong và đang review. Bộ A/B chậm một tuần vì dữ liệu, không phải do code — chúng tôi báo sớm để không có bất ngờ.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#6e5a4c;">Chi tiết, quyết định và bước tiếp theo đều trên Status Hub của bạn.</p>
+            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#5E4436;">Chi tiết, quyết định và bước tiếp theo đều trên Status Hub của bạn.</p>
             <table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
               <td align="center" bgcolor="#F4BA17" style="border-radius:26px;">
                 <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://cyberskill.world/status" style="height:48px;v-text-anchor:middle;width:250px;" arcsize="54%" strokecolor="#F4BA17" fillcolor="#F4BA17"><w:anchorlock/><center style="color:#45210E;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Mở Status Hub &rarr;</center></v:roundrect><![endif]-->
@@ -79,8 +79,8 @@
         <!-- Footer -->
         <tr>
           <td class="px raise" bgcolor="#fbf4e9" style="background:#fbf4e9;padding:22px 32px;border-top:1px solid #e7d9c6;">
-            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#6e5a4c;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
-            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#6e5a4c;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
+            <p class="muted" style="margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#5E4436;">Hiện Thực Hoá Ý Chí · Turn Your Will Into Real</p>
+            <p class="muted" style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.5;color:#5E4436;">CyberSkill Co., Ltd · 12 Nguyễn Huệ, Quận 1, Sài Gòn, Việt Nam<br><a class="footlink" href="https://cyberskill.world/unsubscribe" style="color:#6E3B0E;"><span lang="en">Unsubscribe</span> · <span lang="vi">Huỷ đăng ký</span></a> · <a class="footlink" href="https://cyberskill.world/preferences" style="color:#6E3B0E;"><span lang="en">Preferences</span> · <span lang="vi">Tuỳ chọn</span></a></p>
           </td>
         </tr>
       </table>