[CLAUDE] FE: Văn phòng số foundation — shared PageHeader/KpiCard/WidgetCard + Dashboard landing (PURO · CSS Hồ sơ NS) + sync fe-admin index.css + menu Off_Dashboard

- 3 shared component PageHeader/KpiCard/WidgetCard ×2 app SHA256-identical; tái dùng token Hồ sơ NS (.app-gradient-brand/.card-accent/.icon-chip/.stat-value/.label-eyebrow + accent palette teal/violet/amberx/greenx); gotcha #66 text-white! trên gradient header.
- OfficeDashboardPage 2-cột widget kiểu PURO HomePage: Đề xuất/Đơn từ/Ticket/Phòng họp hôm nay + "Công việc của tôi" + Thao tác nhanh. Reuse query endpoint sẵn có (shared TanStack cache, KHÔNG BE/API mới), đếm client-side, loading/error/empty mỗi widget.
- Sync fe-admin/src/index.css ← fe-user (đóng drift S66-S68: heading 600→700, ink #0f172a→#0b1220, label-eyebrow slate→brand-600 + rule gotcha #66). Nay 2 app đồng bộ.
- Menu key Off_Dashboard (MenuKeys.cs const + All[] + DbInitializer seed Order 0 dưới Off) — no migration, idempotent. GIỮ ẨN non-Admin (RevokeTemporarilyHiddenModules StartsWith Off). Chưa golive.
- Wire 4-place ×2 app: App.tsx route /office/dashboard + menuKeys.ts + Layout staticMap.
- Fix KpiCard activeBorder -300 → -500 (accent palette chỉ 50/100/500/600/700 — chống "vỡ màu im lặng" Tailwind v4: border-teal-300 rơi default Tailwind, border-amberx-300 drop hẳn).
- Build PASS x2 (fe-user index-DrxDysO7 / fe-admin index-TbkadgKd) + dotnet slnx 0/0. reviewer PASS 0 blocker.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

fe-admin/src/index.css

@@ -3,7 +3,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");
 
 @theme {
-  /* Solutions brand palette (derived from logo #1F7DC1) */
+  /* Solutions brand palette (derived from logo #1F7DC1) — PRIMARY, unchanged */
   --color-brand-50:  #f0f7fc;
   --color-brand-100: #dbeaf7;
   --color-brand-200: #b8d5ef;
@@ -20,9 +20,10 @@
   --color-accent-600: #b91c1c;
 
   /* ───────────────────────────────────────────────────────────────────
-     ACCENT PALETTE (mirror fe-user — anh chốt 2026-06-16 "nâng màu, giữ nền
-     xanh brand"). Dùng cho Hồ sơ NS master-detail + KPI/badge đa-tông. Mỗi
-     palette ship 50/100/500/600/700 → bg-{x}-50 chip + text-{x}-700 đạt WCAG-AA.
+     ACCENT PALETTE (anh chốt 2026-06-16 "nâng màu, giữ nền xanh brand").
+     These ADD to the brand — primary stays brand-600. Used for KPI cards,
+     status badges, multi-tone affordances. Each ships a 50/500/600/700 stop
+     so `bg-{x}-50` chip + `text-{x}-700` label both clear WCAG-AA.
      ─────────────────────────────────────────────────────────────────── */
   /* teal — info / secondary metric */
   --color-teal-50:  #e9faf9;
@@ -70,36 +71,44 @@ body {
   text-rendering: optimizeLegibility;
 }
 
-/* Heading tightening + better hierarchy with Be Vietnam Pro.
-   Density-first (NAMGROUP convention): semibold ladder, never font-bold —
-   weight carries hierarchy without shouting. */
+/* Heading hierarchy with Be Vietnam Pro.
+   2026-06-16: anh phản hồi "đơn điệu / có thấy khác gì đâu" → bump weight to
+   700 + tighter tracking so headings read BOLD and high-contrast (was 600
+   semibold = too quiet). Hierarchy now carried by both weight AND a darker
+   ink (#0b1220 vs body #0f172a). */
 h1, h2, h3, h4 {
-  letter-spacing: -0.014em;
-  color: #0f172a;
-  font-weight: 600;
+  letter-spacing: -0.018em;
+  color: #0b1220;
+  font-weight: 700;
 }
+h1 { letter-spacing: -0.022em; }
 
 /* Section / form labels — uppercase scan-pattern shared across the app.
-   Use class="label-eyebrow" for the dense ERP label treatment. */
+   Use class="label-eyebrow" for the dense ERP label treatment. Brand-tinted
+   (was plain slate) so eyebrows carry the identity colour at a glance. */
 .label-eyebrow {
   font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
+  font-weight: 700;
+  letter-spacing: 0.07em;
   text-transform: uppercase;
-  color: #64748b; /* slate-500 — WCAG-AA on white (4.6:1) */
+  color: var(--color-brand-600);
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
-   REUSABLE VISUAL UTILITIES (mirror fe-user — Hồ sơ NS master-detail dùng
-   .icon-chip + .app-gradient-brand; .card-accent/.stat-value cho KPI sau).
+   REUSABLE VISUAL UTILITIES (anh chốt 2026-06-16). Component-classes so the
+   whole app picks up the richer look without touching 65 leaf pages — any
+   page can add class="card-accent" / "icon-chip" etc.
    ───────────────────────────────────────────────────────────────────────── */
 
-/* Brand gradient surface — page/section headers, hero strips (avatar header). */
+/* Brand gradient surface — page/section headers, hero strips.
+   xanh → xanh đậm theo hướng anh chốt. Text on top must be white. */
 .app-gradient-brand {
   background-image: linear-gradient(120deg, var(--color-brand-600) 0%, var(--color-brand-700) 55%, var(--color-brand-800) 100%);
 }
 
-/* KPI / metric card — colored LEFT border + soft lift. Recolour via --accent. */
+/* KPI / metric card — colored LEFT border + soft lift. Pair with a
+   --accent custom property to recolour the rail per card, e.g.
+   style={{ ['--accent' as any]: 'var(--color-teal-500)' }}. Defaults brand. */
 .card-accent {
   position: relative;
   border-radius: 0.75rem;
@@ -114,7 +123,8 @@ h1, h2, h3, h4 {
   transform: translateY(-1px);
 }
 
-/* Icon chip — soft tinted square behind a lucide icon. Recolour via --chip-bg / --chip-fg. */
+/* Icon chip — soft tinted square behind a lucide icon. Recolour via --chip-bg
+   / --chip-fg, defaults brand. Used in KPI cards + section headers. */
 .icon-chip {
   display: inline-flex;
   align-items: center;
@@ -145,12 +155,10 @@ table, .tabular-nums {
   font-variant-numeric: tabular-nums;
 }
 
-/* Smoother form focus */
 input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
   outline: none;
 }
 
-/* Subtle scrollbar that fits the brand */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;