[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/components/PageHeader.tsx

@@ -10,10 +10,12 @@ export function PageHeader({
   actions?: ReactNode
 }) {
   return (
-    <div className="mb-6 flex items-start justify-between gap-6 border-b border-slate-200/70 pb-5">
+    // Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
+    // tighter bottom rule. Toolbar/actions sit inline on the right.
+    <div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
       <div className="min-w-0">
-        <h1 className="text-[22px] font-bold leading-tight text-slate-900">{title}</h1>
-        {description && <p className="mt-1.5 text-[13px] leading-relaxed text-slate-500">{description}</p>}
+        <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
+        {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
       </div>
       {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
     </div>