diff --git a/fe-user/src/pages/hrm/EmployeesListPage.tsx b/fe-user/src/pages/hrm/EmployeesListPage.tsx
index 5ab5302..d445f2a 100644
--- a/fe-user/src/pages/hrm/EmployeesListPage.tsx
+++ b/fe-user/src/pages/hrm/EmployeesListPage.tsx
@@ -179,7 +179,7 @@ export function EmployeesListPage() {
               <Building2 className="h-4 w-4" />
             </span>
             <div>
-              <div className="text-sm font-semibold tracking-tight text-slate-900">Cây tổ chức</div>
+              <div className="text-sm font-semibold tracking-tight text-brand-800">Cây tổ chức</div>
               <div className="text-[11px] text-slate-400">Lọc theo phòng ban</div>
             </div>
           </header>
@@ -241,7 +241,7 @@ export function EmployeesListPage() {
         <section className="flex min-h-0 flex-1 flex-col gap-3">
           <div className="flex items-center justify-between gap-2">
             <div className="min-w-0">
-              <h2 className="truncate text-base font-semibold tracking-tight text-slate-900">Hồ sơ Nhân sự</h2>
+              <h2 className="truncate text-base font-semibold tracking-tight text-brand-800">Hồ sơ Nhân sự</h2>
               <p className="truncate text-xs text-slate-500">
                 {selectedDeptName ? `Phòng: ${selectedDeptName}` : 'Tất cả phòng ban'}
                 {' · '}
@@ -332,7 +332,7 @@ export function EmployeesListPage() {
                           <div className="flex items-center gap-2.5">
                             <Avatar name={e.fullName} size={32} dim={e.status === 3} />
                             <div className="min-w-0">
-                              <div className="truncate font-medium text-slate-900">{e.fullName ?? '—'}</div>
+                              <div className="truncate font-medium text-brand-800">{e.fullName ?? '—'}</div>
                               <div className="font-mono text-[11px] text-slate-400">{e.employeeCode}</div>
                             </div>
                           </div>
@@ -757,11 +757,11 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
                     />
                   ) : (
                     <div key={f.id} className="relative grid grid-cols-1 gap-1 rounded-lg border border-slate-200 bg-white p-3 pr-16 text-sm md:grid-cols-5">
-                      <div><span className="text-xs text-slate-500">Họ tên: </span><span className="font-medium text-slate-800">{f.fullName}</span></div>
-                      <div><span className="text-xs text-slate-500">Quan hệ: </span>{FamilyRelationKindLabel[f.relationship]}</div>
-                      <div><span className="text-xs text-slate-500">Năm sinh: </span>{f.birthYear ?? '—'}</div>
-                      <div><span className="text-xs text-slate-500">Nghề: </span>{f.occupation ?? '—'}</div>
-                      <div><span className="text-xs text-slate-500">SĐT: </span>{f.phone ?? '—'}</div>
+                      <div><span className="text-xs text-slate-500">Họ tên: </span><span className="font-medium text-brand-800">{f.fullName}</span></div>
+                      <div><span className="text-xs text-slate-500">Quan hệ: </span><span className="text-brand-800">{FamilyRelationKindLabel[f.relationship]}</span></div>
+                      <div><span className="text-xs text-slate-500">Năm sinh: </span><span className="text-brand-800">{f.birthYear ?? '—'}</span></div>
+                      <div><span className="text-xs text-slate-500">Nghề: </span><span className="text-brand-800">{f.occupation ?? '—'}</span></div>
+                      <div><span className="text-xs text-slate-500">SĐT: </span><span className="text-brand-800">{f.phone ?? '—'}</span></div>
                       <RowActions
                         onEdit={() => { setEditingFamilyRelationId(f.id); setAddingFamilyRelation(false) }}
                         onDelete={() => { if (confirm(`Xoá thân nhân "${f.fullName}"?`)) deleteFamilyRelation.mutate(f.id) }}
@@ -810,7 +810,7 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
                     ) : (
                       <div key={ed.id} className="relative rounded-lg border border-slate-200 bg-white p-3 pr-16 text-sm">
                         <div className="flex items-baseline justify-between">
-                          <div className="font-medium text-slate-900">{ed.schoolName}</div>
+                          <div className="font-medium text-brand-800">{ed.schoolName}</div>
                           <div className="text-xs text-slate-500">
                             {fmtDate(ed.fromDate)} → {fmtDate(ed.toDate)}
                           </div>
@@ -877,7 +877,7 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
                             ) : (
                               <li key={s.id} className="relative rounded-lg border border-slate-200 bg-white px-3 py-2 pr-16 text-sm">
                                 <div className="flex items-baseline justify-between">
-                                  <span className="font-medium text-slate-800">{s.name}</span>
+                                  <span className="font-medium text-brand-800">{s.name}</span>
                                   {s.level && <span className="text-xs text-slate-500">{s.level}</span>}
                                 </div>
                                 {s.languageId && <div className="text-xs text-slate-500">Mã: {s.languageId}</div>}
@@ -933,7 +933,7 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
                   ) : (
                     <div key={w.id} className="relative rounded-lg border border-slate-200 bg-white p-3 pr-16 text-sm">
                       <div className="flex items-baseline justify-between">
-                        <div className="font-medium text-slate-900">{w.companyName}</div>
+                        <div className="font-medium text-brand-800">{w.companyName}</div>
                         <div className="text-xs text-slate-500">
                           {fmtDate(w.fromDate)} → {fmtDate(w.toDate)}
                         </div>
@@ -1004,8 +1004,8 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
                         <span className="text-xs text-slate-500">Tên file: </span>
                         <a href={doc.filePath} target="_blank" rel="noreferrer" className="text-brand-700 hover:underline">{doc.fileName}</a>
                       </div>
-                      <div><span className="text-xs text-slate-500">Ngày cấp: </span>{fmtDate(doc.issueDate)}</div>
-                      <div><span className="text-xs text-slate-500">Hết hạn: </span>{fmtDate(doc.expiryDate)}</div>
+                      <div><span className="text-xs text-slate-500">Ngày cấp: </span><span className="text-brand-800">{fmtDate(doc.issueDate)}</span></div>
+                      <div><span className="text-xs text-slate-500">Hết hạn: </span><span className="text-brand-800">{fmtDate(doc.expiryDate)}</span></div>
                       <RowActions
                         onEdit={() => { setEditingDocumentId(doc.id); setAddingDocument(false) }}
                         onDelete={() => { if (confirm(`Xoá hồ sơ "${doc.fileName}"?`)) deleteDocument.mutate(doc.id) }}
@@ -1137,7 +1137,7 @@ function OverviewTab({ detail }: { detail: EmployeeDetail }) {
 
         {detail.notes && (
           <Card title="Ghi chú" icon={FileText} accent="brand">
-            <p className="whitespace-pre-wrap text-sm text-slate-700">{detail.notes}</p>
+            <p className="whitespace-pre-wrap text-sm text-brand-800">{detail.notes}</p>
           </Card>
         )}
       </div>
@@ -1590,7 +1590,7 @@ function Field({ label, value, mono, icon: Icon, full, accent = 'brand' }: {
         {Icon && <Icon className="h-3 w-3" />}
         {label}
       </div>
-      <div className={cn('mt-0.5 break-words', empty ? 'text-slate-300' : 'font-medium text-slate-900', mono && !empty && 'font-mono text-xs')}>
+      <div className={cn('mt-0.5 break-words text-sm', empty ? 'text-slate-300' : 'font-medium text-brand-800', mono && !empty && 'font-mono')}>
         {empty ? '—' : value}
       </div>
     </div>