[CLAUDE] FE-User: redesign density-first theo UI/UX guide AI_INFRA — giữ brand SOLUTION (S58)

Anh yêu cầu sau /check-email ai_infra (guide canonical 13 mục "Surgical
Precision Minimalism", anh-approved 06-11): chỉnh giao diện eoffice giống
guide, GIỮ nhận dạng thương hiệu SOLUTION.

14 file fe-user, visual-only (mirror design system fe-admin S55 + đối chiếu
guide; fe-admin/BE untouched):
- index.css: heading ladder semibold (bỏ font-bold) + .label-eyebrow uppercase
  + tnum note. 6 ui primitives (Button/Input/Label/Select/Textarea/Dialog):
  text-xs font-semibold, control h28-40, rounded-lg, focus ring brand-500,
  bỏ shadow trang trí — variant/size keys + props/forwardRef STABLE.
- 6 shell: DataTable (thead sticky + density px-3 py-2 + tnum + RowActions/
  RowActionButton ADDITIVE luôn-hiện không opacity-hover) / Layout (active
  leaf brand left-rail, logic nav/permission nguyên) / TopBar / PageHeader /
  PhaseBadge (ring-current/15) / EmptyState. + LoginPage polish nhẹ.
- BRAND GIỮ: #1F7DC1 (brand-*) + Be Vietnam Pro + neutral slate (guide cho
  plug hue riêng — chia sẻ grammar, không chia sẻ vocabulary-màu).

Verify: npm build ×2 PASS 0 TS err (fe-user 443ms + fe-admin 8.9s untouched-
confirm). Diff-review từng file: functionality keys stable, additive-only.
frontend-designer return-truncated gotcha #53 giữa FD2 screenshot → em main
disk-recover + self-gate (precedent S55); visual live-check sau deploy.

Email AI_INFRA 2026-06-11-ui-ux-design-guide: inbox copy verified hash ✓✓
(whole-file + body), processed sau commit này.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

fe-user/src/components/Layout.tsx

@@ -296,10 +296,12 @@ function MenuLeaf({ node, depth }: { node: MenuNode; depth: number }) {
       to={path}
       title={effectiveLabel(node)}
       className={cn(
-        'block rounded-md leading-snug transition',
-        isDeep ? 'px-3 py-1 text-[11px]' : 'px-3 py-2 text-[12px] font-medium',
+        // Density-first: active leaf gets a brand left-rail + tint (crisp
+        // selected affordance, NAMGROUP). Inactive stays quiet slate.
+        'relative block rounded-md leading-snug transition-colors',
+        isDeep ? 'px-3 py-1 text-[11px]' : 'px-3 py-1.5 text-[12px] font-medium',
         isActive
-          ? 'bg-brand-50 text-brand-700'
+          ? 'bg-brand-50 font-semibold text-brand-700 before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-brand-600'
           : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
       )}
     >
@@ -333,8 +335,10 @@ function StaticLeaf({ node }: { node: MenuNode }) {
       title={effectiveLabel(node)}
       className={({ isActive }) =>
         cn(
-          'block rounded-md px-3 py-2 text-[12px] font-medium leading-snug transition',
-          isActive ? 'bg-brand-50 text-brand-700' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
+          'relative block rounded-md px-3 py-1.5 text-[12px] font-medium leading-snug transition-colors',
+          isActive
+            ? 'bg-brand-50 font-semibold text-brand-700 before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-brand-600'
+            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
         )
       }
     >