@cyberskill/design 2.7.0 → 2.9.0

package/templates/email-safe/email-transactional.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;">Your wish is in motion</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;">We've started on your wish, An.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#3d2c1e;">A real person on the team has picked up your request for a faster checkout. We'll share a first shape within one business day — built to ship, built to last.</p>
-            <p class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#6e5a4c;">Until then, you can follow progress 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;">Until then, you can follow progress 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;">Điều ước của bạn đang được thực hiệ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;">Chúng tôi đã bắt đầu điều ước của bạn, An.</h1>
             <p class="ink" style="margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#3d2c1e;">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 class="muted" style="margin:0 0 26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;color:#6e5a4c;">Trong lúc chờ, bạn có thể theo dõi tiến độ trên Status Hub của mì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;">Trong lúc chờ, bạn có thể theo dõi tiến độ trên Status Hub của mì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/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;">Xem Status Hub của bạn &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/kitchen-sink.html

@@ -6,20 +6,24 @@
 <title>CyberSkill — component kitchen sink</title>
 <style>
   body{margin:0;background:var(--cs-color-surface-page);color:var(--cs-color-text-primary);font-family:var(--cs-font-family-ui)}
-  .top{position:sticky;top:1px;z-index:10;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--cs-color-border-default);padding:14px 32px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
-  @media (prefers-reduced-transparency: reduce){.top{backdrop-filter:none;background:var(--cs-color-surface-panel)}}
+  .top{position:sticky;top:1px;z-index:10;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--cs-color-border-default);padding:14px 32px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
+  @media (prefers-reduced-transparency: reduce){.top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cs-color-surface-panel)}}
+  [data-cs-style="matte-paper"] .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cs-color-surface-panel)}
   .top h1{font-size:17px;margin:0;letter-spacing:-.01em}
   .top nav{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
   .top nav a{color:var(--cs-color-text-muted);text-decoration:none;font-weight:600}.top nav a:hover{color:var(--cs-color-brand-ochre)}
   main{max-width:960px;margin:0 auto;padding:28px 32px 80px}
-  section{margin:0 0 14px;border-bottom:1px dashed var(--cs-color-border-default);padding-bottom:24px}
+  section{margin:0 0 28px;border-bottom:1px dashed var(--cs-color-border-default);padding-bottom:28px}
+  section:nth-of-type(even){background-color:var(--cs-color-surface-raised);color:var(--cs-color-text-primary);border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);padding:22px 24px 26px}
+  section:nth-of-type(even)>h2{margin-top:0}
   h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));margin:26px 0 14px}
   .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
   .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
-  .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-muted);width:100%;margin:2px 0 -4px}
+  .lbl{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-muted);width:100%;margin:4px 0 -2px}
+  #form .cs-slider{inline-size:160px;flex:none}
   .cs-kbd{--k:1}
-  @media (max-width:768px),(min-width:1024px){.top{padding-inline:max(32px,calc((100% - 960px)/2))}.lbl{font-size:12px}#form .cs-slider{inline-size:160px;flex:none}h2,.cs-stat__value{font-weight:700}section:nth-of-type(even){background-color:var(--cs-color-surface-raised);color:var(--cs-color-text-primary)}section{margin-bottom:44px;padding-bottom:36px}section:first-of-type{margin-bottom:52px}}
-  @media (max-width:640px){.top{padding:12px 16px}main{padding:20px 16px 64px}.grid2{grid-template-columns:minmax(0,1fr)}.grid2>*{min-width:0}}
+  @media (min-width:1024px){.top{padding-inline:max(32px,calc((100% - 960px)/2))}}
+  @media (max-width:640px){.top{padding:12px 16px}main{padding:20px 16px 64px}section:nth-of-type(even){padding:18px 16px 22px}.grid2{grid-template-columns:minmax(0,1fr)}.grid2>*{min-width:0}}
 </style></head>
 <body>
 <div class="top">

package/templates/marketing-newsletter/MarketingNewsletter.dc.html

@@ -39,7 +39,7 @@
     </div>
     <div style="padding:28px 32px">
       <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">
-      <a class="cs-touch-target" href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:15px;text-decoration:none;padding:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Read the story →</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:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Read the story →</a>
       <div style="border-top:1px solid var(--cs-color-border-default);padding-top:20px;margin-bottom:20px">
         <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-accent);margin-bottom:6px">Field notes</div>
         <h2 style="font-size:19px;font-weight:700;margin:0 0 6px">{{ fieldArticleTitleEn }}</h2>
@@ -55,7 +55,7 @@
       </sc-if>
       <sc-if value="{{ isVN }}"><div lang="vi" style="display:contents">
       <sc-if value="{{ isBoth }}"><div style="border-top:1px solid var(--cs-color-border-default);margin:0 0 20px"></div></sc-if>
-      <a class="cs-touch-target" href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:15px;text-decoration:none;padding:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Đọc câu chuyệ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:12px 22px;border-radius:var(--cs-radius-full);margin-bottom:26px">Đọc câu chuyện →</a>
       <div style="border-top:1px solid var(--cs-color-border-default);padding-top:20px;margin-bottom:20px">
         <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--cs-color-text-accent);margin-bottom:6px">Ghi chú thực địa</div>
         <h2 style="font-size:19px;font-weight:700;margin:0 0 6px">{{ fieldArticleTitleVi }}</h2>
@@ -74,13 +74,13 @@
       <sc-if value="{{ isEN }}" hint-placeholder-val="{{ true }}">
         <div style="font-size:17px;font-weight:700;color:#FFFDF8;margin-bottom:4px">Have a wish of your own?</div>
         <p style="font-size:14px;opacity:0.85;margin:0 0 14px">Tell us the outcome in a sentence. We reply within one business day.</p>
-        <a class="cs-touch-target" href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Make a wish</a>
+        <a class="cs-touch-target" href="#" style="display:inline-block;background:#FFFDF8;color:var(--cs-color-brand-umber);font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Make a wish</a>
       </sc-if>
       <sc-if value="{{ isVN }}"><div lang="vi" style="display:contents">
         <sc-if value="{{ isBoth }}"><div style="height:1px;background:rgba(255,255,255,0.18);margin:0 auto 16px;max-width:200px"></div></sc-if>
         <div style="font-size:17px;font-weight:700;margin-bottom:4px">Bạn có điều ước của riêng mình?</div>
         <p style="font-size:14px;opacity:0.85;margin:0 0 14px">Kể cho chúng tôi kết quả bạn muốn trong một câu. Chúng tôi trả lời trong vòng một ngày làm việc.</p>
-        <a class="cs-touch-target" href="#" style="display:inline-block;background:var(--cs-color-brand-umber);color:#FFFDF8;font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Gửi điều ước</a>
+        <a class="cs-touch-target" href="#" style="display:inline-block;background:#FFFDF8;color:var(--cs-color-brand-umber);font-weight:700;font-size:14px;text-decoration:none;padding:11px 22px;border-radius:var(--cs-radius-full)">Gửi điều ước</a>
       </div></sc-if>
     </div>
     <div style="padding:16px 32px;background:var(--cs-color-surface-raised);font-size:12px;color:var(--cs-color-text-muted);text-align:center">

package/templates/marketing-page/MarketingPage.dc.html

@@ -23,13 +23,15 @@
   border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-md);
 }
 @media print{#cs-mktg-hero[data-authoring]::part(empty){display:none}}
+@media (prefers-reduced-transparency: reduce){.cs-mktg-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--cs-color-surface-panel)!important}}
+[data-cs-style="matte-paper"] .cs-mktg-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--cs-color-surface-panel)!important}
 </style>
 </helmet>
 <div data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-page);min-height:100vh">
   <a class="cs-skip" href="#main">{{ skipLabel }}</a>
   <main id="main">
   <div style="position:sticky;top:0;z-index:50">
-  <header style="display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:14px 32px;background:color-mix(in oklab,var(--cs-color-surface-panel) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--cs-color-border-default)">
+  <header class="cs-mktg-nav" style="display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:14px 32px;background:color-mix(in oklab,var(--cs-color-surface-panel) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--cs-color-border-default)">
     <div style="display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--cs-color-text-primary);letter-spacing:-0.01em">
       <x-import component-from-global-scope="CyberSkillDS.Logo" size="32" hint-size="32px,32px"></x-import>
       CyberSkill
@@ -90,7 +92,7 @@
         <h2 style="color:var(--cs-accent-on-strong);font-size:28px;font-weight:800;margin:0 0 6px;letter-spacing:-0.01em">{{ ctaH }}</h2>
         <p style="margin:0;max-width:520px">{{ ctaP }}</p>
       </div>
-      <span id="contact">
+      <span id="contact" 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" data-cs-on-click="{{ openChat }}" hint-size="150px,44px">{{ talkBtn }}</x-import>
       </span>
     </div>

package/templates/playground.html

@@ -6,8 +6,9 @@
 <title>CyberSkill — playground</title>
 <style>
   body{margin:0;font-family:var(--cs-font-family-ui);background:var(--cs-color-surface-page);color:var(--cs-color-text-primary)}
-  .bar{position:sticky;top:1px;z-index:10;background:color-mix(in oklab,var(--cs-color-surface-panel) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--cs-color-border-default);padding:12px max(24px,calc((100% - 900px)/2));display:flex;gap:20px;flex-wrap:wrap;align-items:center}
-  @media (prefers-reduced-transparency: reduce){.bar{backdrop-filter:none;background:var(--cs-color-surface-panel)}}
+  .bar{position:sticky;top:1px;z-index:10;background:color-mix(in oklab,var(--cs-color-surface-panel) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--cs-color-border-default);padding:12px max(24px,calc((100% - 900px)/2));display:flex;gap:20px;flex-wrap:wrap;align-items:center}
+  @media (prefers-reduced-transparency: reduce){.bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cs-color-surface-panel)}}
+  [data-cs-style="matte-paper"] .bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cs-color-surface-panel)}
   .bar h1{font-size:15px;margin:0}
   .grp{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
   .grp .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-muted);margin-right:2px}
@@ -59,8 +60,8 @@ const stage=document.getElementById('stage');
 const AX={
   theme:[["Light",""],["Dark","dark"],["System","system"]],
   element:[["Thổ","tho|"],["Thổ·clay","tho|clay"],["Thổ·sand","tho|sand"],["Hỏa","hoa|"],["Hỏa·lava","hoa|lava"],["Hỏa·plasma","hoa|plasma"],["Thủy","thuy|"],["Thủy·ocean","thuy|ocean"],["Thủy·mist","thuy|mist"],["Mộc","moc|"],["Mộc·bamboo","moc|bamboo"],["Mộc·forest","moc|forest"],["Kim","kim|"],["Kim·steel","kim|steel"],["Kim·titanium","kim|titanium"]],
-  language:[["English","en"],["Tiếng Việt","vi"]],
-  style:[["Liquid glass","liquid-glass"]]};
+  language:[["Tiếng Việt","vi"],["English","en"]],
+  style:[["Liquid glass","liquid-glass"],["Matte paper","matte-paper"]]};
 function build(axis, apply){
   const box=document.getElementById(axis);
   AX[axis].forEach(([label,val],i)=>{

package/templates/sales-proposal-deck/SalesProposalDeck.dc.html

@@ -30,14 +30,14 @@
     </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 24px;max-width:900px">{{ s2h }}</h2>
       <p style="font-size:24px;line-height:1.5;color:var(--cs-color-text-muted);max-width:920px">{{ s2p }}</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-color-text-muted)">02 / 08</div></sc-if>
     </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 36px">{{ s3h }}</h2>
       <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:32px">
         <div style="border-top:3px solid var(--cs-accent);padding-top:16px"><div style="font-weight:800;font-size:22px;margin-bottom:8px">{{ u1t }}</div><p style="font-size:18px;line-height:1.5;color:var(--cs-color-text-muted);margin:0">{{ u1p }}</p></div>
@@ -59,7 +59,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)">{{ s5kicker }}</div>
+      <div style="font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">{{ s5kicker }}</div>
       <h2 style="font-size:44px;font-weight:800;letter-spacing:-0.02em;margin:10px 0 32px">{{ s5h }}</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"><span style="font-family:var(--cs-font-family-mono);color:var(--cs-color-text-muted);width:64px">{{ mo1 }}</span><b style="flex:1">{{ t1 }}</b><span style="color:var(--cs-color-text-muted)">M1</span></div>
@@ -70,7 +70,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)">{{ s6kicker }}</div>
+      <div style="font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--cs-color-text-accent)">{{ s6kicker }}</div>
       <h2 style="font-size:44px;font-weight:800;letter-spacing:-0.02em;margin:10px 0 34px">{{ s6h }}</h2>
       <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:28px">
         <div style="display:flex;align-items:center;gap:16px"><x-import component-from-global-scope="CyberSkillDS.Avatar" name="Minh Trần" size="lg" hint-size="52px,52px"></x-import><div><div style="font-weight:800;font-size:20px">Minh Trần</div><div style="font-size:16px;color:var(--cs-color-text-muted)">{{ role1 }}</div></div></div>
@@ -83,7 +83,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);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.14em;color:var(--cs-accent-bright)">{{ s7kicker }}</div>
       <h2 style="font-size:44px;font-weight:800;letter-spacing:-0.02em;color:var(--cs-accent-bright);margin:10px 0 32px">{{ s7h }}</h2>
-      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:end">
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start;font-variant-numeric:tabular-nums">
         <div><div style="font-size:52px;font-weight:800;line-height:1;letter-spacing:-0.02em">₫3.1B</div><div style="font-size:18px;opacity:0.85;margin-top:10px">{{ inv1 }}</div></div>
         <div><div style="font-size:52px;font-weight:800;line-height:1;letter-spacing:-0.02em">3</div><div style="font-size:18px;opacity:0.85;margin-top:10px">{{ inv2 }}</div></div>
         <div><div style="font-size:52px;font-weight:800;line-height:1;letter-spacing:-0.02em">30d</div><div style="font-size:18px;opacity:0.85;margin-top:10px">{{ inv3 }}</div></div>

package/tokens/colors.css

@@ -20,7 +20,7 @@
   --cs-color-text-primary: #45210E;  /* = Umber */
   --cs-color-text-inverse: #FFFFFF;
   --cs-color-text-accent: #6E3B0E;   /* accessible ochre-adjacent link/accent text */
-  --cs-color-text-muted: #3F2D21;    /* Secondary text: APCA75 on page/panel/raised, including all element variants */
+  --cs-color-text-muted: #5E4436;    /* Secondary text: warm umber-taupe, APCA75+ on neutral/soft/middle; deep packs solve per-surface */
 
   /* ---- Semantic fills + paired foregrounds (literal-on-semantic, UX-008) ---- */
   --cs-color-semantic-success: #166534;