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

@@ -2,21 +2,24 @@ 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 — call-sites depend on them.
+// 2026-06-16 "nâng màu, bắt mắt hơn" (anh): primary now a brand gradient with a
+// real lifted shadow — reads as the clear focal action. Danger mirrors it in
+// red. Outline/secondary/ghost stay quiet so the primary pops. Brand identity
+// kept (gradient anchored on brand-600). Variant keys
+// (primary/secondary/outline/ghost/danger) + size keys (sm/md/lg) are STABLE —
+// 51+ call-sites depend on them. Visual-only; no API change.
 const buttonVariants = cva(
-  '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]',
+  'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-[background,box-shadow,transform] 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-xs shadow-brand-700/20 hover:bg-brand-700',
+        primary:
+          'bg-gradient-to-b from-brand-500 to-brand-700 text-white shadow-sm shadow-brand-700/30 hover:from-brand-600 hover:to-brand-800 hover:shadow-md hover:shadow-brand-700/35',
         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-xs shadow-red-700/20 hover:bg-red-700',
+        outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-brand-50 hover:border-brand-300 hover:text-brand-700',
+        ghost: 'text-slate-600 hover:bg-brand-50 hover:text-brand-700',
+        danger:
+          'bg-gradient-to-b from-red-500 to-red-700 text-white shadow-sm shadow-red-700/30 hover:from-red-600 hover:to-red-800 hover:shadow-md',
       },
       size: {
         sm: 'h-7 px-2.5',

fe-user/src/components/ui/Dialog.tsx

@@ -35,12 +35,13 @@ export function Dialog({ open, onClose, title, children, footer, size = 'md' }:
         )}
         onClick={e => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
-          <div className="text-sm font-semibold text-slate-800">{title}</div>
+        {/* 2026-06-16: brand gradient title bar — đậm nhận diện, white text. */}
+        <div className="app-gradient-brand flex items-center justify-between rounded-t-xl px-5 py-3">
+          <div className="text-sm font-bold text-white">{title}</div>
           <button
             onClick={onClose}
             aria-label="Đóng"
-            className="-mr-1 rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+            className="-mr-1 rounded-md p-1 text-white/70 transition-colors hover:bg-white/15 hover:text-white"
           >
             <X className="h-4 w-4" />
           </button>

fe-user/src/components/ui/Input.tsx

@@ -7,10 +7,11 @@ export const Input = forwardRef<HTMLInputElement, Props>(({ className, ...props
   <input
     ref={ref}
     className={cn(
-      // Density-first: compact (~34px) rounded-lg, brand focus glow at low opacity.
+      // Compact (~34px) rounded-lg. 2026-06-16: stronger brand focus glow
+      // (border brand-500 + ring /25) so the active field reads clearly.
       'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-900',
       'placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}

fe-user/src/components/ui/Label.tsx

@@ -1,13 +1,13 @@
 import type { LabelHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'
 
-// Density-first ERP scan-pattern (NAMGROUP convention): uppercase + tracking +
-// muted. slate-500 (not 400) so 11px label still clears WCAG-AA (~4.6:1) — a
-// deliberate accessibility-floor deviation from NAMGROUP's zinc-400.
+// ERP scan-pattern: uppercase + tracking. 2026-06-16 "nâng màu" — eyebrow now
+// brand-600 (was slate-500) so form labels carry the identity colour. brand-600
+// on white = 4.7:1, clears WCAG-AA at 11px. Signature unchanged.
 export function Label({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
   return (
     <label
-      className={cn('text-[11px] font-semibold uppercase tracking-wider text-slate-500', className)}
+      className={cn('text-[11px] font-bold uppercase tracking-wider text-brand-600', className)}
       {...props}
     />
   )

fe-user/src/components/ui/Select.tsx

@@ -7,9 +7,9 @@ export const Select = forwardRef<HTMLSelectElement, Props>(({ className, childre
   <select
     ref={ref}
     className={cn(
-      // Density-first: matches Input — compact rounded-lg, brand focus glow.
+      // Matches Input — compact rounded-lg, stronger brand focus glow (2026-06-16).
       'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}

fe-user/src/components/ui/Textarea.tsx

@@ -7,10 +7,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ className, ...
   <textarea
     ref={ref}
     className={cn(
-      // Density-first: matches Input — rounded-lg, brand focus glow.
+      // Matches Input — rounded-lg, stronger brand focus glow (2026-06-16).
       'w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm leading-relaxed text-slate-900',
       'placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}