[CLAUDE] FE-User: redesign foundation "nâng màu giữ brand" — gradient/accent/badge bắt mắt hơn

Anh: giao diện đơn điệu, muốn đẹp + bắt mắt, font/màu đẹp hơn. Hướng anh chốt
"nâng màu, giữ nền xanh brand" (eoffice trước). Foundation lan tỏa toàn app, KHÔNG
đụng 65 trang lẻ.
- index.css: +accent palette teal/amberx/violet/greenx (đặt tên né trùng Tailwind)
  + utilities .app-gradient-brand / .card-accent / .icon-chip / .stat-value;
  heading 600->700 đậm hơn; .label-eyebrow brand-600. Brand #1F7DC1 + Be Vietnam Pro GIỮ.
- primitives: Button primary/danger gradient nổi bật; Input/Select/Textarea focus-glow
  mạnh hơn; Label brand-600; Dialog title-bar gradient. variant/size keys STABLE.
- shell: Layout stripe dày hơn + logo cap; PageHeader title lớn/đậm + accent bar cao;
  TopBar gradient hairline; DataTable thead gradient brand chữ trắng.
- Dashboard: KPI cards accent + icon chips.
- color maps (contract/PE phase + PE display status): -700->-800 đậm chữ, phase nháp tint brand.

Visual-only — props/handler/signature nguyên. Build PASS (tsc -b 0 error). a11y:
contrast AA + prefers-reduced-motion. fe-admin mirror đợt sau.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fe-user/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;
@@ -19,6 +19,37 @@
   --color-accent-500: #dc2626;
   --color-accent-600: #b91c1c;
 
+  /* ───────────────────────────────────────────────────────────────────
+     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;
+  --color-teal-100: #ccf3f1;
+  --color-teal-500: #0ea5a4;
+  --color-teal-600: #0c8e8d;
+  --color-teal-700: #0a7170;
+  /* amber/cam — warning / pending */
+  --color-amberx-50:  #fef6e7;
+  --color-amberx-100: #fce8c2;
+  --color-amberx-500: #f59e0b;
+  --color-amberx-600: #d98306;
+  --color-amberx-700: #b16708;
+  /* violet/tím — neutral-highlight / value */
+  --color-violet-50:  #f1effe;
+  --color-violet-100: #e0dcfc;
+  --color-violet-500: #7c6ff0;
+  --color-violet-600: #6354e4;
+  --color-violet-700: #5042c4;
+  /* green/lục — success / done */
+  --color-greenx-50:  #e8f8ee;
+  --color-greenx-100: #c7eed5;
+  --color-greenx-500: #16a34a;
+  --color-greenx-600: #128a3f;
+  --color-greenx-700: #0f7034;
+
   --font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
@@ -40,23 +71,83 @@ 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 (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.
+   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. 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;
+  border: 1px solid #e9eef4;
+  background: #fff;
+  border-left: 3px solid var(--accent, var(--color-brand-500));
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
+  transition: box-shadow .18s ease, transform .18s ease;
+}
+.card-accent:hover {
+  box-shadow: 0 4px 10px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.06);
+  transform: translateY(-1px);
+}
+
+/* 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;
+  justify-content: center;
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: 0.625rem;
+  background: var(--chip-bg, var(--color-brand-50));
+  color: var(--chip-fg, var(--color-brand-600));
+}
+
+/* Big stat number — tabular, tight, dark. */
+.stat-value {
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: #0b1220;
+  line-height: 1.1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-accent { transition: none; }
+  .card-accent:hover { transform: none; }
 }
 
 /* Tabular numbers in tables + stat cards for better alignment */