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

@@ -381,16 +381,17 @@ export function Layout() {
 
   return (
     <AccordionContext.Provider value={accordionValue}>
-      {/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app (anh yêu cầu
-          "trang trí lên 1 tý" 06-11; guide cho accent sparing — đây là 1 chỗ). */}
+      {/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app. 2026-06-16
+          anh "nâng màu": dày hơn (h-1.5) + dải gradient xanh đậm bắt mắt. */}
       <div className="flex h-screen flex-col">
-        <div className="h-1 shrink-0 bg-gradient-to-r from-brand-700 via-brand-500 to-brand-600" />
+        <div className="h-1.5 shrink-0 bg-gradient-to-r from-brand-700 via-brand-400 to-brand-600" />
         <div className="flex min-h-0 flex-1">
         <aside className="flex w-72 flex-col border-r border-slate-200 bg-white xl:w-80">
-          <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-b from-brand-50/70 to-transparent px-5">
+          {/* Logo cap — brand gradient wash đậm hơn (was brand-50/70). */}
+          <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-r from-brand-50 via-brand-50/60 to-transparent px-5">
             <Link to="/dashboard" className="flex items-center gap-2.5">
               <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-brand-600/80">ERP</span>
+              <span className="rounded-md bg-brand-600 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white">ERP</span>
             </Link>
           </div>
           <nav className="flex-1 space-y-1 overflow-y-auto p-3">