[CLAUDE] FE-Admin: mirror Hồ sơ Nhân sự master-detail từ fe-user (page SHA256 identical + accent tokens index.css)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fe-admin/src/index.css

@@ -19,6 +19,36 @@
   --color-accent-500: #dc2626;
   --color-accent-600: #b91c1c;
 
+  /* ───────────────────────────────────────────────────────────────────
+     ACCENT PALETTE (mirror fe-user — anh chốt 2026-06-16 "nâng màu, giữ nền
+     xanh brand"). Dùng cho Hồ sơ NS master-detail + KPI/badge đa-tông. Mỗi
+     palette ship 50/100/500/600/700 → bg-{x}-50 chip + text-{x}-700 đạt WCAG-AA.
+     ─────────────────────────────────────────────────────────────────── */
+  /* teal — info / secondary metric */
+  --color-teal-50:  #e9faf9;
+  --color-teal-100: #ccf3f1;
+  --color-teal-500: #0ea5a4;
+  --color-teal-600: #0c8e8d;
+  --color-teal-700: #0a7170;
+  /* amber/cam — warning / pending */
+  --color-amberx-50:  #fef6e7;
+  --color-amberx-100: #fce8c2;
+  --color-amberx-500: #f59e0b;
+  --color-amberx-600: #d98306;
+  --color-amberx-700: #b16708;
+  /* violet/tím — neutral-highlight / value */
+  --color-violet-50:  #f1effe;
+  --color-violet-100: #e0dcfc;
+  --color-violet-500: #7c6ff0;
+  --color-violet-600: #6354e4;
+  --color-violet-700: #5042c4;
+  /* green/lục — success / done */
+  --color-greenx-50:  #e8f8ee;
+  --color-greenx-100: #c7eed5;
+  --color-greenx-500: #16a34a;
+  --color-greenx-600: #128a3f;
+  --color-greenx-700: #0f7034;
+
   --font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
@@ -59,6 +89,57 @@ h1, h2, h3, h4 {
   color: #64748b; /* slate-500 — WCAG-AA on white (4.6:1) */
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+   REUSABLE VISUAL UTILITIES (mirror fe-user — Hồ sơ NS master-detail dùng
+   .icon-chip + .app-gradient-brand; .card-accent/.stat-value cho KPI sau).
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* Brand gradient surface — page/section headers, hero strips (avatar header). */
+.app-gradient-brand {
+  background-image: linear-gradient(120deg, var(--color-brand-600) 0%, var(--color-brand-700) 55%, var(--color-brand-800) 100%);
+}
+
+/* KPI / metric card — colored LEFT border + soft lift. Recolour via --accent. */
+.card-accent {
+  position: relative;
+  border-radius: 0.75rem;
+  border: 1px solid #e9eef4;
+  background: #fff;
+  border-left: 3px solid var(--accent, var(--color-brand-500));
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
+  transition: box-shadow .18s ease, transform .18s ease;
+}
+.card-accent:hover {
+  box-shadow: 0 4px 10px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.06);
+  transform: translateY(-1px);
+}
+
+/* Icon chip — soft tinted square behind a lucide icon. Recolour via --chip-bg / --chip-fg. */
+.icon-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: 0.625rem;
+  background: var(--chip-bg, var(--color-brand-50));
+  color: var(--chip-fg, var(--color-brand-600));
+}
+
+/* Big stat number — tabular, tight, dark. */
+.stat-value {
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: #0b1220;
+  line-height: 1.1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-accent { transition: none; }
+  .card-accent:hover { transform: none; }
+}
+
 /* Tabular numbers in tables + stat cards for better alignment */
 table, .tabular-nums {
   font-variant-numeric: tabular-nums;