[CLAUDE] FE-Admin: redesign Phase 1 — density-first design system (NAMGROUP-ref, giữ brand)

Tham khảo NAMGROUP density conventions, GIỮ brand #1F7DC1 + Be Vietnam Pro.
- index.css: density heading ladder (semibold, drop font-bold) + .label-eyebrow util
- 6 UI primitives (Button/Input/Label/Select/Textarea/Dialog): text-xs font-semibold, py-1.5 ≤36px, rounded-lg, brand focus-ring
- 6 shell (DataTable sticky-thead+RowActions/Layout brand-rail/TopBar/PageHeader/PhaseBadge/EmptyState)
- DashboardPage flagship: KPI cards + brand-tinted icon chips + uppercase labels

Visual-only — functionality unchanged (Button variant/size keys stable 51 call-sites, props/forwardRef intact). build 0 TS err. reviewer PASS 0 blocker (2 minor slate-400 hint a11y defer). fe-admin only (fe-user mirror = Phase 3). Dashboard live-visual blocked by dev auth-rig → xem live sau deploy.

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

fe-admin/src/index.css

@@ -40,13 +40,24 @@ body {
   text-rendering: optimizeLegibility;
 }
 
-/* Heading tightening + better hierarchy with Be Vietnam Pro */
+/* Heading tightening + better hierarchy with Be Vietnam Pro.
+   Density-first (NAMGROUP convention): semibold ladder, never font-bold —
+   weight carries hierarchy without shouting. */
 h1, h2, h3, h4 {
-  letter-spacing: -0.018em;
+  letter-spacing: -0.014em;
   color: #0f172a;
+  font-weight: 600;
+}
+
+/* Section / form labels — uppercase scan-pattern shared across the app.
+   Use class="label-eyebrow" for the dense ERP label treatment. */
+.label-eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #64748b; /* slate-500 — WCAG-AA on white (4.6:1) */
 }
-h1 { font-weight: 700; }
-h2 { font-weight: 600; }
 
 /* Tabular numbers in tables + stat cards for better alignment */
 table, .tabular-nums {