[CLAUDE] FE-Admin+FE-User: brand identity từ Solutions logo

Lấy logo gốc từ template docx (SOL-CCM-FO-002.05) và brand color
exact pixel-sampled #1F7DC1 từ chữ "Solutions".

Thay đổi:
- logo.png (407x145, từ header docx) đặt vào /public cả 2 app
- favicon.svg: "S" trắng trên nền vuông brand blue bo góc
- index.css: palette brand-50..900 generate quanh #1F7DC1 + accent
  red-500/600 cho ® mark + font Be Vietnam Pro (Google Fonts,
  designed cho tiếng Việt, diacritics đẹp) với fallback Inter
  + JetBrains Mono cho font-mono + tùy chỉnh scrollbar
- Layout sidebar: logo.png 32px + "Admin"/"ERP" subtitle (thay
  text "SOLUTION ERP" đơn điệu)
- LoginPage: gradient background brand-50 + 2 decorative orbs
  blur, rounded-2xl card + backdrop-blur, big logo 56px + subtitle
  tracking-[0.2em]
- index.html: lang="vi", title "Solutions ERP · Admin" / "Solutions
  ERP", theme-color #1F7DC1 cho mobile address bar, preconnect
  fonts.gstatic.com để load Google Fonts nhanh hơn

Tất cả màu hardcoded trong component đã dùng `brand-600` → tự
map sang palette mới, không cần đổi logic.

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

fe-admin/src/components/Layout.tsx

@@ -80,9 +80,10 @@ export function Layout() {
   return (
     <div className="flex h-screen">
       <aside className="flex w-64 flex-col border-r border-slate-200 bg-white">
-        <div className="flex h-14 items-center border-b border-slate-200 px-6">
-          <Link to="/dashboard" className="text-base font-bold text-brand-700">
-            SOLUTION ERP · Admin
+        <div className="flex h-16 items-center border-b border-slate-200 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-slate-400">Admin</span>
           </Link>
         </div>
         <nav className="flex-1 space-y-1 overflow-y-auto p-3">

fe-admin/src/index.css

@@ -1,11 +1,26 @@
 @import "tailwindcss";
 
+@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");
+
 @theme {
-  --color-brand-50: #eff6ff;
-  --color-brand-500: #2563eb;
-  --color-brand-600: #1d4ed8;
-  --color-brand-700: #1e40af;
-  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  /* Solutions brand palette (derived from logo #1F7DC1) */
+  --color-brand-50:  #f0f7fc;
+  --color-brand-100: #dbeaf7;
+  --color-brand-200: #b8d5ef;
+  --color-brand-300: #8bbae3;
+  --color-brand-400: #5499d3;
+  --color-brand-500: #2e85c7;
+  --color-brand-600: #1f7dc1;  /* exact logo blue */
+  --color-brand-700: #1b6aa3;
+  --color-brand-800: #175685;
+  --color-brand-900: #144868;
+
+  /* Accent red from ® mark */
+  --color-accent-500: #dc2626;
+  --color-accent-600: #b91c1c;
+
+  --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;
 }
 
 html, body, #root {
@@ -17,4 +32,24 @@ body {
   background-color: #f8fafc;
   color: #0f172a;
   font-family: var(--font-sans);
+  font-feature-settings: "cv11", "ss01", "ss03";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Subtle scrollbar that fits the brand */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
 }

fe-admin/src/pages/LoginPage.tsx

@@ -42,11 +42,18 @@ export function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-100 px-4">
-      <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-8 shadow-sm">
-        <div className="mb-6 text-center">
-          <h1 className="text-2xl font-bold text-brand-700">SOLUTION ERP</h1>
-          <p className="mt-1 text-sm text-slate-500">Trang quản trị</p>
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-brand-50 to-slate-100 px-4">
+      {/* Subtle decorative orbs */}
+      <div className="pointer-events-none absolute -left-32 -top-32 h-96 w-96 rounded-full bg-brand-200/40 blur-3xl" />
+      <div className="pointer-events-none absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-brand-300/30 blur-3xl" />
+
+      <div className="relative w-full max-w-md rounded-2xl border border-slate-200/70 bg-white/90 p-10 shadow-xl backdrop-blur">
+        <div className="mb-8 flex flex-col items-center text-center">
+          <img src="/logo.png" alt="Solutions" className="h-14 w-auto" />
+          <div className="mt-4 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
+            ERP · Hệ thống quản trị
+          </div>
+          <div className="mt-1 text-sm text-slate-500">Đăng nhập để tiếp tục</div>
         </div>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-1.5">