diff --git a/fe-admin/src/components/khkk/KhkkDetailContent.tsx b/fe-admin/src/components/khkk/KhkkDetailContent.tsx
index 7218b54..b44f387 100644
--- a/fe-admin/src/components/khkk/KhkkDetailContent.tsx
+++ b/fe-admin/src/components/khkk/KhkkDetailContent.tsx
@@ -176,7 +176,10 @@ export function KhkkDetailContent({
   // [S175] File đang xem-trước inline trong khối "File đính kèm" đã gộp.
   const [previewAtt, setPreviewAtt] = useState<KhkkAttachmentDto | null>(null)
   // [S175] NCC đang mở form "thêm hạng mục" (null = không mở form nào).
-  const [addFor, setAddFor] = useState<{ supplierId: string; supplierName: string | null } | null>(null)
+  // [S177] Chỉ còn `supplierId`: `supplierName` đi cùng khi dòng nhập có chú-thích "Thêm cho:
+  // <NCC>"; anh chốt gỡ chú-thích đó ⇒ giữ lại field là **gán mà không ai đọc**. Tên NCC vẫn
+  // đọc được từ chính dòng bấm `+` (`l.supplierName`, dùng cho `title`/`aria-label`).
+  const [addFor, setAddFor] = useState<{ supplierId: string } | null>(null)
   const [addCatalogId, setAddCatalogId] = useState('')
   const [addAmount, setAddAmount] = useState('')
   const [addNote, setAddNote] = useState('')
@@ -620,7 +623,7 @@ export function KhkkDetailContent({
                             <button
                               type="button"
                               onClick={() => {
-                                setAddFor({ supplierId: l.supplierId, supplierName: l.supplierName })
+                                setAddFor({ supplierId: l.supplierId })
                                 setAddCatalogId(''); setAddAmount(''); setAddNote('')
                               }}
                               title={`Thêm hạng mục cho ${l.supplierName ?? 'NCC này'}`}
@@ -658,16 +661,23 @@ export function KhkkDetailContent({
                       ⇒ Dòng này là **dòng nháp phía client**: trông và xếp cột y hệt dòng thật,
                       nhưng chỉ gọi API MỘT LẦN khi đã có hạng mục ⇒ máy giữ nguyên bất biến. */}
                   {isDraft && addFor && (
-                    <tr className="border-b border-brand-200 bg-brand-50/40">
-                      <td className="px-3 py-2 text-right align-top text-brand-500">
+                    // [S177 — anh: "bỏ cả khối dòng nhập"] Bỏ VẺ KHỐI RIÊNG (nền brand + viền
+                    // brand) — dùng đúng class của dòng dữ liệu thật ở trên, để nó đọc thành
+                    // "một dòng nữa của bảng" chứ không phải "một hộp lạ chen vào giữa bảng".
+                    <tr className="border-b border-slate-100 hover:bg-slate-50/60">
+                      <td className="px-3 py-2 text-right align-top text-slate-400">
                         <Plus className="ml-auto h-3.5 w-3.5" />
                       </td>
                       <td className="px-3 py-2 align-top">
-                        {/* NCC hiện ở đây vì bảng KHÔNG có cột NCC — không nói thì người dùng
-                            không biết dòng mới sẽ thuộc nhà cung cấp nào. */}
-                        <div className="mb-1 text-[11px] font-medium text-brand-700">
-                          Thêm cho: {addFor.supplierName ?? '(không rõ NCC)'}
-                        </div>
+                        {/* 🧊 [S177 — anh chọn "Bỏ dòng «Thêm cho: NCC» → mọi thứ tự thẳng hàng"]
+                            Dòng chú-thích tên NCC ĐÃ GỠ. Nó đẩy `select` xuống 1 dòng nên ô hạng
+                            mục lệch hẳn với ô giá + nút bên phải; gỡ đi thì cả dòng nhập thẳng
+                            hàng y như dòng thật — đó chính là "đưa lên đây".
+                            🔴 CÁI MẤT, khai thẳng: bảng KHÔNG có cột NCC ⇒ phiếu nhiều NCC thì
+                            dòng nhập không còn tự nói nó thuộc nhà cung cấp nào; người dùng phải
+                            nhớ mình vừa bấm `+` ở dòng nào. Anh đã được nêu đánh đổi này và chốt
+                            gỡ. Nếu về sau vướng: rẻ nhất là chèn dòng nhập NGAY DƯỚI dòng vừa bấm
+                            (vị trí tự nói NCC) thay vì thêm lại chữ. */}
                         <select
                           value={addCatalogId}
                           onChange={(e) => setAddCatalogId(e.target.value)}
diff --git a/fe-user/src/components/khkk/KhkkDetailContent.tsx b/fe-user/src/components/khkk/KhkkDetailContent.tsx
index 7218b54..b44f387 100644
--- a/fe-user/src/components/khkk/KhkkDetailContent.tsx
+++ b/fe-user/src/components/khkk/KhkkDetailContent.tsx
@@ -176,7 +176,10 @@ export function KhkkDetailContent({
   // [S175] File đang xem-trước inline trong khối "File đính kèm" đã gộp.
   const [previewAtt, setPreviewAtt] = useState<KhkkAttachmentDto | null>(null)
   // [S175] NCC đang mở form "thêm hạng mục" (null = không mở form nào).
-  const [addFor, setAddFor] = useState<{ supplierId: string; supplierName: string | null } | null>(null)
+  // [S177] Chỉ còn `supplierId`: `supplierName` đi cùng khi dòng nhập có chú-thích "Thêm cho:
+  // <NCC>"; anh chốt gỡ chú-thích đó ⇒ giữ lại field là **gán mà không ai đọc**. Tên NCC vẫn
+  // đọc được từ chính dòng bấm `+` (`l.supplierName`, dùng cho `title`/`aria-label`).
+  const [addFor, setAddFor] = useState<{ supplierId: string } | null>(null)
   const [addCatalogId, setAddCatalogId] = useState('')
   const [addAmount, setAddAmount] = useState('')
   const [addNote, setAddNote] = useState('')
@@ -620,7 +623,7 @@ export function KhkkDetailContent({
                             <button
                               type="button"
                               onClick={() => {
-                                setAddFor({ supplierId: l.supplierId, supplierName: l.supplierName })
+                                setAddFor({ supplierId: l.supplierId })
                                 setAddCatalogId(''); setAddAmount(''); setAddNote('')
                               }}
                               title={`Thêm hạng mục cho ${l.supplierName ?? 'NCC này'}`}
@@ -658,16 +661,23 @@ export function KhkkDetailContent({
                       ⇒ Dòng này là **dòng nháp phía client**: trông và xếp cột y hệt dòng thật,
                       nhưng chỉ gọi API MỘT LẦN khi đã có hạng mục ⇒ máy giữ nguyên bất biến. */}
                   {isDraft && addFor && (
-                    <tr className="border-b border-brand-200 bg-brand-50/40">
-                      <td className="px-3 py-2 text-right align-top text-brand-500">
+                    // [S177 — anh: "bỏ cả khối dòng nhập"] Bỏ VẺ KHỐI RIÊNG (nền brand + viền
+                    // brand) — dùng đúng class của dòng dữ liệu thật ở trên, để nó đọc thành
+                    // "một dòng nữa của bảng" chứ không phải "một hộp lạ chen vào giữa bảng".
+                    <tr className="border-b border-slate-100 hover:bg-slate-50/60">
+                      <td className="px-3 py-2 text-right align-top text-slate-400">
                         <Plus className="ml-auto h-3.5 w-3.5" />
                       </td>
                       <td className="px-3 py-2 align-top">
-                        {/* NCC hiện ở đây vì bảng KHÔNG có cột NCC — không nói thì người dùng
-                            không biết dòng mới sẽ thuộc nhà cung cấp nào. */}
-                        <div className="mb-1 text-[11px] font-medium text-brand-700">
-                          Thêm cho: {addFor.supplierName ?? '(không rõ NCC)'}
-                        </div>
+                        {/* 🧊 [S177 — anh chọn "Bỏ dòng «Thêm cho: NCC» → mọi thứ tự thẳng hàng"]
+                            Dòng chú-thích tên NCC ĐÃ GỠ. Nó đẩy `select` xuống 1 dòng nên ô hạng
+                            mục lệch hẳn với ô giá + nút bên phải; gỡ đi thì cả dòng nhập thẳng
+                            hàng y như dòng thật — đó chính là "đưa lên đây".
+                            🔴 CÁI MẤT, khai thẳng: bảng KHÔNG có cột NCC ⇒ phiếu nhiều NCC thì
+                            dòng nhập không còn tự nói nó thuộc nhà cung cấp nào; người dùng phải
+                            nhớ mình vừa bấm `+` ở dòng nào. Anh đã được nêu đánh đổi này và chốt
+                            gỡ. Nếu về sau vướng: rẻ nhất là chèn dòng nhập NGAY DƯỚI dòng vừa bấm
+                            (vị trí tự nói NCC) thay vì thêm lại chữ. */}
                         <select
                           value={addCatalogId}
                           onChange={(e) => setAddCatalogId(e.target.value)}