diff --git a/fe-admin/src/components/pe/PeDetailTabs.tsx b/fe-admin/src/components/pe/PeDetailTabs.tsx
index 864d940..3da4ff6 100644
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/src/components/pe/PeDetailTabs.tsx
@@ -1140,12 +1140,28 @@ function AddSupplierDialog({ evaluationId, detailId, onClose }: {
       <div className="space-y-3">
         <div>
           <Label>NCC (master)</Label>
-          <Select value={form.supplierId} onChange={e => setForm({ ...form, supplierId: e.target.value })}>
+          <Select
+            value={form.supplierId}
+            onChange={e => {
+              // Session 20 turn 10: auto-fill các field NCC từ master data sẵn có
+              // (contactPerson/phone/email/note). User vẫn override được sau đó.
+              const picked = suppliers.data?.find(s => s.id === e.target.value)
+              setForm(prev => ({
+                ...prev,
+                supplierId: e.target.value,
+                contactName: picked?.contactPerson ?? '',
+                contactPhone: picked?.phone ?? '',
+                contactEmail: picked?.email ?? '',
+                note: picked?.note ?? '',
+              }))
+            }}
+          >
             <option value="">-- Chọn --</option>
             {suppliers.data?.map(s => (
               <option key={s.id} value={s.id}>{s.code} — {s.name}</option>
             ))}
           </Select>
+          {form.supplierId && <p className="mt-1 text-[10px] text-emerald-600">✓ Đã tự điền từ Master — bạn có thể sửa lại nếu cần.</p>}
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div><Label>Hiển thị</Label><Input value={form.displayName} onChange={e => setForm({ ...form, displayName: e.target.value })} placeholder="vd TGN-30 ngày" /></div>
diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index a3e4466..c900529 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@@ -1138,12 +1138,28 @@ function AddSupplierDialog({ evaluationId, detailId, onClose }: {
       <div className="space-y-3">
         <div>
           <Label>NCC (master)</Label>
-          <Select value={form.supplierId} onChange={e => setForm({ ...form, supplierId: e.target.value })}>
+          <Select
+            value={form.supplierId}
+            onChange={e => {
+              // Session 20 turn 10: auto-fill các field NCC từ master data sẵn có
+              // (contactPerson/phone/email/note). User vẫn override được sau đó.
+              const picked = suppliers.data?.find(s => s.id === e.target.value)
+              setForm(prev => ({
+                ...prev,
+                supplierId: e.target.value,
+                contactName: picked?.contactPerson ?? '',
+                contactPhone: picked?.phone ?? '',
+                contactEmail: picked?.email ?? '',
+                note: picked?.note ?? '',
+              }))
+            }}
+          >
             <option value="">-- Chọn --</option>
             {suppliers.data?.map(s => (
               <option key={s.id} value={s.id}>{s.code} — {s.name}</option>
             ))}
           </Select>
+          {form.supplierId && <p className="mt-1 text-[10px] text-emerald-600">✓ Đã tự điền từ Master — bạn có thể sửa lại nếu cần.</p>}
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div><Label>Hiển thị</Label><Input value={form.displayName} onChange={e => setForm({ ...form, displayName: e.target.value })} placeholder="vd TGN-30 ngày" /></div>