diff --git a/fe-admin/src/components/pe/PeWorkflowPanel.tsx b/fe-admin/src/components/pe/PeWorkflowPanel.tsx
index fc401eb..c11e298 100644
--- a/fe-admin/src/components/pe/PeWorkflowPanel.tsx
+++ b/fe-admin/src/components/pe/PeWorkflowPanel.tsx
@@ -204,26 +204,23 @@ export function PeWorkflowPanel({
           <Label className="text-xs">Hành động:</Label>
           <div className="mt-1 flex flex-wrap gap-1.5">
             {next.map(p => {
-              // Phân loại button theo hành động:
-              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — red
-              // - Hủy/Từ chối = TuChoi (chỉ ở phase DangSoanThao đầu) — red
-              // - Duyệt = forward phase tiếp theo — brand
+              // Phân loại button theo hành động (3 màu khác nhau, in đậm):
+              // - Duyệt   = forward phase tiếp theo — emerald (xanh lá positive)
+              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — amber (request changes)
+              // - Từ chối = TuChoi — red (terminal negative)
               const isSendBack = (p === PurchaseEvaluationPhase.DangSoanThao || p === PurchaseEvaluationPhase.TraLai)
                 && evaluation.phase !== PurchaseEvaluationPhase.DangSoanThao
                 && evaluation.phase !== PurchaseEvaluationPhase.TraLai
               const isCancel = p === PurchaseEvaluationPhase.TuChoi
-              const isDanger = isSendBack || isCancel
-              const isForwardApprove = !isDanger
+              const isForwardApprove = !isSendBack && !isCancel
               // Mig 24 — disable Duyệt forward nếu V2 pin + actor không trong cấp hiện tại
               const isDisabled = isForwardApprove && blockedByV2Level
-              const label = isSendBack
-                ? '← Trả lại (về Drafter sửa)'
-                : isCancel
-                  ? '✗ Hủy / Từ chối'
-                  : `✓ Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+              const label = isSendBack ? '← Trả lại' : isCancel ? '✗ Từ chối' : '✓ Duyệt'
               const title = isDisabled && evaluation.currentApproval
                 ? `Cấp ${evaluation.currentApproval.levelOrder} chỉ ${evaluation.currentApproval.approvers.map(a => a.fullName).join(' / ')} mới duyệt được.`
-                : undefined
+                : isForwardApprove
+                  ? `Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+                  : undefined
               return (
                 <button
                   key={p}
@@ -231,10 +228,11 @@ export function PeWorkflowPanel({
                   disabled={isDisabled}
                   title={title}
                   className={cn(
-                    'rounded border px-2 py-1 text-[11px] font-medium transition',
+                    'rounded border px-2 py-1 text-[11px] font-bold transition',
                     isDisabled && 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400 hover:bg-slate-50',
-                    !isDisabled && isDanger && 'border-red-200 text-red-700 hover:bg-red-50',
-                    !isDisabled && !isDanger && 'border-brand-300 text-brand-700 hover:bg-brand-50',
+                    !isDisabled && isForwardApprove && 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
+                    !isDisabled && isSendBack && 'border-amber-300 text-amber-700 hover:bg-amber-50',
+                    !isDisabled && isCancel && 'border-red-300 text-red-700 hover:bg-red-50',
                   )}
                 >
                   {label}
diff --git a/fe-user/src/components/pe/PeWorkflowPanel.tsx b/fe-user/src/components/pe/PeWorkflowPanel.tsx
index 53aa270..3612929 100644
--- a/fe-user/src/components/pe/PeWorkflowPanel.tsx
+++ b/fe-user/src/components/pe/PeWorkflowPanel.tsx
@@ -198,22 +198,23 @@ export function PeWorkflowPanel({
           <Label className="text-xs">Hành động:</Label>
           <div className="mt-1 flex flex-wrap gap-1.5">
             {next.map(p => {
+              // Phân loại button theo hành động (3 màu khác nhau, in đậm):
+              // - Duyệt   = forward phase tiếp theo — emerald (xanh lá positive)
+              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — amber (request changes)
+              // - Từ chối = TuChoi — red (terminal negative)
               const isSendBack = (p === PurchaseEvaluationPhase.DangSoanThao || p === PurchaseEvaluationPhase.TraLai)
                 && evaluation.phase !== PurchaseEvaluationPhase.DangSoanThao
                 && evaluation.phase !== PurchaseEvaluationPhase.TraLai
               const isCancel = p === PurchaseEvaluationPhase.TuChoi
-              const isDanger = isSendBack || isCancel
-              const isForwardApprove = !isDanger
+              const isForwardApprove = !isSendBack && !isCancel
               // Mig 24 — disable Duyệt forward nếu V2 pin + actor không trong cấp hiện tại
               const isDisabled = isForwardApprove && blockedByV2Level
-              const label = isSendBack
-                ? '← Trả lại (về Drafter sửa)'
-                : isCancel
-                  ? '✗ Hủy / Từ chối'
-                  : `✓ Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+              const label = isSendBack ? '← Trả lại' : isCancel ? '✗ Từ chối' : '✓ Duyệt'
               const title = isDisabled && evaluation.currentApproval
                 ? `Cấp ${evaluation.currentApproval.levelOrder} chỉ ${evaluation.currentApproval.approvers.map(a => a.fullName).join(' / ')} mới duyệt được.`
-                : undefined
+                : isForwardApprove
+                  ? `Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+                  : undefined
               return (
                 <button
                   key={p}
@@ -221,10 +222,11 @@ export function PeWorkflowPanel({
                   disabled={isDisabled}
                   title={title}
                   className={cn(
-                    'rounded border px-2 py-1 text-[11px] font-medium transition',
+                    'rounded border px-2 py-1 text-[11px] font-bold transition',
                     isDisabled && 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400 hover:bg-slate-50',
-                    !isDisabled && isDanger && 'border-red-200 text-red-700 hover:bg-red-50',
-                    !isDisabled && !isDanger && 'border-brand-300 text-brand-700 hover:bg-brand-50',
+                    !isDisabled && isForwardApprove && 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
+                    !isDisabled && isSendBack && 'border-amber-300 text-amber-700 hover:bg-amber-50',
+                    !isDisabled && isCancel && 'border-red-300 text-red-700 hover:bg-red-50',
                   )}
                 >
                   {label}