[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/ui/Button.tsx

@@ -2,21 +2,26 @@ import { forwardRef, type ButtonHTMLAttributes } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/cn'
 
+// Density-first (NAMGROUP convention): text-xs font-semibold, compact heights,
+// rounded-lg. Brand identity kept — primary = brand-600, focus ring brand-500.
+// Decorative shadow dropped; only the filled actions keep a 1px tint shadow for
+// affordance. Variant keys (primary/secondary/outline/ghost/danger) + size keys
+// (sm/md/lg) are STABLE — 51 call-sites depend on them.
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-brand-500 active:translate-y-[0.5px]',
+  'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
   {
     variants: {
       variant: {
-        primary: 'bg-brand-600 text-white shadow-sm shadow-brand-600/20 hover:bg-brand-700',
-        secondary: 'bg-slate-100 text-slate-800 hover:bg-slate-200',
-        outline: 'border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50 hover:border-slate-400',
+        primary: 'bg-brand-600 text-white shadow-xs shadow-brand-700/20 hover:bg-brand-700',
+        secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200',
+        outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-400',
         ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
-        danger: 'bg-red-600 text-white shadow-sm shadow-red-600/20 hover:bg-red-700',
+        danger: 'bg-red-600 text-white shadow-xs shadow-red-700/20 hover:bg-red-700',
       },
       size: {
-        sm: 'h-8 px-3 text-xs',
-        md: 'h-9 px-4',
-        lg: 'h-11 px-6 text-base',
+        sm: 'h-7 px-2.5',
+        md: 'h-8 px-3.5',
+        lg: 'h-10 px-5 text-sm',
       },
     },
     defaultVariants: { variant: 'primary', size: 'md' },