From 2bba851135e98056de6c43f471626c80dadc3c6a Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Mon, 11 May 2026 10:04:49 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-PE:=20Chunk=20B=20=E2=80=94=20NCC?=
 =?UTF-8?q?=20nested=20expand=20d=C6=B0=E1=BB=9Bi=20H=E1=BA=A1ng=20m?=
 =?UTF-8?q?=E1=BB=A5c,=20b=E1=BB=8F=20Section=204=20ri=C3=AAng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructure ItemsTab → nested cards (tầng 1 = hạng mục, tầng 2 = NCC tham
gia + báo giá inline). Replace bảng matrix grid (hạng mục × NCC) cũ — user
Session 20 yêu cầu UX nested cho 1 hạng mục demo.

FE (mirror fe-admin + fe-user):
  - ItemsTab giờ render list HangMucCard (1 card / 1 hạng mục)
  - HangMucCard mới: header info hạng mục + expand panel default OPEN
  - Expand panel: NCC inline table columns:
      NCC | Liên hệ | Điều khoản TT | File báo giá | ĐG chưa VAT | ĐG có VAT | Thành tiền | Action
  - Quote click cell → QuoteDialog cũ (reuse)
  - NCC button: + Thêm NCC (AddSupplierDialog) / ✏ Sửa (EditSupplierDialog) / ✓ Winner / 🗑 Xóa
  - Budget Δ compute per-card (KHÔNG tfoot tổng — 1 hạng mục)
  - Bỏ Section 4 "NCC tham gia" cũ trong main render — gộp vào Section 2
  - Drop function SuppliersTab (dead code) — giữ AddSupplierDialog +
    EditSupplierDialog + SupplierAttachmentsCell cho HangMucCard reuse

Section layout mới (4 section):
  1. Thông tin gói thầu
  2. Hạng mục + Báo giá NCC (nested)
  3. Chọn NCC / TP thắng thầu
  4. Ý kiến cấp duyệt

Verify:
  - npm run build × fe-admin pass (warning chunk size, không liên quan)
  - npm run build × fe-user pass
  - Test pass mặc định skip (Phase 9 UAT iteration, Q4 user public luôn)

Pending Chunk C: Section 5 (rename 4) gộp đồng cấp cùng Phòng — 1 box / Step
Pending Chunk D: Docs S20 changelog + STATUS + HANDOFF

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 fe-admin/src/components/pe/PeDetailTabs.tsx | 580 ++++++++++----------
 fe-user/src/components/pe/PeDetailTabs.tsx  | 580 ++++++++++----------
 2 files changed, 570 insertions(+), 590 deletions(-)

diff --git a/fe-admin/src/components/pe/PeDetailTabs.tsx b/fe-admin/src/components/pe/PeDetailTabs.tsx
index 2d1689e..bae82d4 100644
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/src/components/pe/PeDetailTabs.tsx
@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
-import { Check, Paperclip, Pencil, Plus, Trash2, Upload } from 'lucide-react'
+import { Check, ChevronDown, ChevronRight, Paperclip, Pencil, Plus, Trash2, Upload } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { Dialog } from '@/components/ui/Dialog'
 import { Input } from '@/components/ui/Input'
@@ -161,23 +161,20 @@ export function PeDetailTabs({
       </div>
 
       <div className="divide-y divide-slate-200">
-        {/* Section order (Session 20): Hạng mục lên đầu sau Thông tin gói thầu.
-            BE auto-tạo 1 hạng mục mặc định (tên = TenGoiThau, giá trị = ngân sách)
-            khi Create. NCC tham gia tạm giữ riêng — Chunk B sẽ gộp NCC nested
-            expand dưới mỗi hạng mục. */}
+        {/* Section layout (Session 20 Chunk B): Hạng mục nested expand chứa NCC
+            (tầng 1 = hạng mục, tầng 2 = NCC tham gia + báo giá inline). NCC
+            tham gia section riêng bỏ — gộp vào Section 2 expand panel. Tên
+            hạng mục + giá trị auto từ gói thầu (Chunk A BE seed). */}
         <Section title="1. Thông tin gói thầu">
           <InfoTab ev={evaluation} readOnly={readOnly} autoEdit={autoEditHeader} />
         </Section>
-        <Section title={`2. Hạng mục + Báo giá (${evaluation.details.length})`}>
+        <Section title={`2. Hạng mục + Báo giá NCC (${evaluation.details.length} hạng mục · ${evaluation.suppliers.length} NCC)`}>
           <ItemsTab ev={evaluation} readOnly={readOnly} />
         </Section>
-        <Section title="3. Chọn NCC / TP">
+        <Section title="3. Chọn NCC / TP thắng thầu">
           <ChonNccSection ev={evaluation} readOnly={readOnly} />
         </Section>
-        <Section title={`4. NCC / TP tham gia (${evaluation.suppliers.length})`}>
-          <SuppliersTab ev={evaluation} readOnly={readOnly} />
-        </Section>
-        <Section title="5. Ý kiến cấp duyệt (sign-off theo workflow)">
+        <Section title="4. Ý kiến cấp duyệt (sign-off theo workflow)">
           {mode === 'workspace' && (
             <div className="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-[12px] text-amber-800">
               Ý kiến + chữ ký auto đồng bộ khi NV duyệt phiếu — vào menu &ldquo;Duyệt&rdquo; để ký.
@@ -1037,139 +1034,9 @@ function CreateContractDialog({ evaluation, onClose }: { evaluation: PeDetailBun
   )
 }
 
-// ===== Tab: NCC =====
-function SuppliersTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boolean }) {
-  const qc = useQueryClient()
-  const [open, setOpen] = useState(false)
-  const [editRow, setEditRow] = useState<PeSupplier | null>(null)
-
-  const remove = useMutation({
-    mutationFn: async (rowId: string) => api.delete(`/purchase-evaluations/${ev.id}/suppliers/${rowId}`),
-    onSuccess: () => { toast.success('Đã xóa NCC.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
-    onError: e => toast.error(getErrorMessage(e)),
-  })
-  const setWinner = useMutation({
-    mutationFn: async (supplierId: string) =>
-      api.post(`/purchase-evaluations/${ev.id}/select-winner`, { supplierId }),
-    onSuccess: () => { toast.success('Đã chọn NCC thắng.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
-    onError: e => toast.error(getErrorMessage(e)),
-  })
-
-  return (
-    <div>
-      {!readOnly && (
-        <div className="mb-3 flex justify-end">
-          <Button onClick={() => setOpen(true)} className="gap-1.5 text-xs">
-            <Plus className="h-3.5 w-3.5" /> Thêm NCC
-          </Button>
-        </div>
-      )}
-      {ev.suppliers.length === 0 ? (
-        <p className="text-sm text-slate-500">
-          {readOnly ? 'Chưa có NCC.' : 'Chưa có NCC. Thêm NCC để bắt đầu so sánh giá.'}
-        </p>
-      ) : (
-        <div className="overflow-x-auto">
-          <table className="min-w-full text-sm">
-            <thead className="bg-slate-50 text-xs uppercase text-slate-500">
-              <tr>
-                <th className="px-3 py-2 text-left">NCC</th>
-                <th className="px-3 py-2 text-left">Liên hệ</th>
-                <th className="px-3 py-2 text-left">Điều khoản TT</th>
-                <th className="px-3 py-2 text-left">File đính kèm</th>
-                {!readOnly && <th className="px-3 py-2"></th>}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100">
-              {ev.suppliers.map(s => (
-                <tr key={s.id} className={cn('align-top', ev.selectedSupplierId === s.supplierId && 'bg-emerald-50')}>
-                  <td className="px-3 py-2">
-                    <div className="font-medium text-slate-900">{s.supplierName}</div>
-                    {s.displayName && <div className="text-[11px] text-slate-500">{s.displayName}</div>}
-                    {s.note && <div className="mt-0.5 text-[11px] text-amber-600">{s.note}</div>}
-                    {readOnly && ev.selectedSupplierId === s.supplierId && (
-                      <div className="mt-0.5 text-[11px] font-medium text-emerald-700">✓ NCC được chọn</div>
-                    )}
-                  </td>
-                  <td className="px-3 py-2 text-[12px] text-slate-600">
-                    {s.contactName && <div>{s.contactName}</div>}
-                    {s.contactPhone && <div>{s.contactPhone}</div>}
-                    {s.contactEmail && <div className="truncate">{s.contactEmail}</div>}
-                  </td>
-                  <td className="px-3 py-2">{s.paymentTermText ?? '—'}</td>
-                  <td className="px-3 py-2">
-                    <SupplierAttachmentsCell
-                      evaluationId={ev.id}
-                      supplierRowId={s.id}
-                      attachments={ev.attachments.filter(a => a.purchaseEvaluationSupplierId === s.id)}
-                      readOnly={readOnly}
-                    />
-                  </td>
-                  {!readOnly && (() => {
-                    // User 2026-05-07: NCC đã được chọn (winner) → KHÔNG cho
-                    // sửa/xóa (tránh thay đổi NCC đã chốt). Chỉ hiển thị
-                    // checkmark active state.
-                    // User 2026-05-07 (B11+): NCC đã có hạng mục báo giá (quotes
-                    // entered in Section 4) → KHÔNG cho xóa (tránh mất báo giá đã nhập).
-                    const isWinner = ev.selectedSupplierId === s.supplierId
-                    const hasQuotes = ev.details.some(d => d.quotes.some(q => q.purchaseEvaluationSupplierId === s.id))
-                    const canDelete = !isWinner && !hasQuotes
-                    return (
-                      <td className="px-3 py-2">
-                        <div className="flex justify-end gap-1">
-                          <button
-                            onClick={() => setWinner.mutate(s.supplierId)}
-                            className={cn(
-                              'rounded px-1.5 py-0.5 text-[11px]',
-                              isWinner
-                                ? 'bg-emerald-100 text-emerald-700'
-                                : 'text-slate-500 hover:bg-emerald-50 hover:text-emerald-700',
-                            )}
-                            title={isWinner ? 'NCC đã được chọn (winner)' : 'Chọn NCC thắng'}
-                          >
-                            <Check className="h-3.5 w-3.5" />
-                          </button>
-                          {!isWinner && (
-                            <button
-                              onClick={() => setEditRow(s)}
-                              className="rounded px-1.5 py-0.5 text-slate-500 hover:bg-slate-100"
-                              title="Sửa"
-                            >
-                              <Pencil className="h-3.5 w-3.5" />
-                            </button>
-                          )}
-                          {canDelete ? (
-                            <button
-                              onClick={() => { if (confirm('Xóa NCC này khỏi phiếu?')) remove.mutate(s.id) }}
-                              className="rounded px-1.5 py-0.5 text-red-500 hover:bg-red-50"
-                              title="Xóa"
-                            >
-                              <Trash2 className="h-3.5 w-3.5" />
-                            </button>
-                          ) : !isWinner && hasQuotes && (
-                            <span
-                              className="rounded px-1.5 py-0.5 text-slate-300 cursor-not-allowed"
-                              title="NCC đã có báo giá ở Section 4 — xóa báo giá trước rồi mới xóa NCC"
-                            >
-                              <Trash2 className="h-3.5 w-3.5" />
-                            </span>
-                          )}
-                        </div>
-                      </td>
-                    )
-                  })()}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-
-      {open && <AddSupplierDialog evaluationId={ev.id} onClose={() => setOpen(false)} />}
-      {editRow && <EditSupplierDialog evaluationId={ev.id} row={editRow} onClose={() => setEditRow(null)} />}
-    </div>
-  )
-}
+// Session 20 Chunk B: SuppliersTab function bỏ — NCC list giờ render nested
+// trong HangMucCard (expand panel mỗi hạng mục). 2 dialog Add/Edit Supplier
+// vẫn giữ vì HangMucCard call lại.
 
 function AddSupplierDialog({ evaluationId, onClose }: { evaluationId: string; onClose: () => void }) {
   const qc = useQueryClient()
@@ -1263,24 +1130,14 @@ function EditSupplierDialog({ evaluationId, row, onClose }: { evaluationId: stri
   )
 }
 
-// ===== Tab: Hạng mục + Báo giá (matrix) =====
+// ===== Tab: Hạng mục + Báo giá (Session 20 — nested cards layout) =====
+// Mỗi hạng mục = 1 card với expand panel chứa NCC tham gia inline grid.
+// Replace bảng matrix grid (hạng mục × NCC) cũ — user demo 1 hạng mục.
 function ItemsTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boolean }) {
-  const qc = useQueryClient()
   const [addOpen, setAddOpen] = useState(false)
   const [editDetail, setEditDetail] = useState<PeDetailRow | null>(null)
-  const [quoteEdit, setQuoteEdit] = useState<{ detail: PeDetailRow; supplier: PeSupplier; existing: PeQuote | null } | null>(null)
-
-  const removeDetail = useMutation({
-    mutationFn: async (id: string) => api.delete(`/purchase-evaluations/${ev.id}/details/${id}`),
-    onSuccess: () => { toast.success('Đã xóa hạng mục.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
-    onError: e => toast.error(getErrorMessage(e)),
-  })
-
-  const quoteKey = (detailId: string, supplierRowId: string) =>
-    ev.details.find(d => d.id === detailId)?.quotes.find(q => q.purchaseEvaluationSupplierId === supplierRowId) ?? null
 
   // Budget comparison — fetch full Budget bundle nếu có link để so sánh per-row.
-  // Match key: groupCode|itemCode (case-sensitive match; itemCode null cho phép).
   const budgetBundle = useQuery({
     queryKey: ['budget-detail-for-pe', ev.budgetId],
     queryFn: async () => (await api.get<{ details: { groupCode: string; itemCode: string | null; thanhTien: number }[]; tongNganSach: number }>(
@@ -1295,18 +1152,13 @@ function ItemsTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boo
     return m
   })()
   const showBudgetCol = !!ev.budgetId
-  const totalPeNganSach = ev.details.reduce((sum, d) => sum + d.thanhTienNganSach, 0)
-  const totalBudget = budgetBundle.data?.tongNganSach ?? 0
 
   return (
     <div>
       <div className="mb-3 flex items-center justify-between">
         <p className="text-xs text-slate-500">
-          {ev.suppliers.length === 0
-            ? (readOnly ? 'Chưa có NCC tham gia.' : 'Thêm NCC ở tab "NCC" trước khi nhập báo giá.')
-            : readOnly
-              ? `${ev.details.length} hạng mục × ${ev.suppliers.length} NCC`
-              : `${ev.details.length} hạng mục × ${ev.suppliers.length} NCC — click ô để nhập báo giá.`}
+          {ev.details.length} hạng mục · {ev.suppliers.length} NCC tham gia
+          {!readOnly && ' — mở hạng mục để thêm NCC + nhập báo giá.'}
         </p>
         {!readOnly && (
           <Button onClick={() => setAddOpen(true)} className="gap-1.5 text-xs">
@@ -1318,147 +1170,285 @@ function ItemsTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boo
       {ev.details.length === 0 ? (
         <p className="text-sm text-slate-500">Chưa có hạng mục.</p>
       ) : (
-        <div className="overflow-x-auto">
-          <table className="min-w-full border border-slate-200 text-xs">
-            <thead className="bg-slate-50 text-slate-600">
-              <tr>
-                <th className="sticky left-0 z-10 border-r border-slate-200 bg-slate-50 px-2 py-2 text-left">Hạng mục</th>
-                <th className="border-r border-slate-200 px-2 py-2 text-right">KL</th>
-                <th className="border-r border-slate-200 px-2 py-2 text-right">ĐG ngân sách</th>
-                <th className="border-r border-slate-200 px-2 py-2 text-right">TT ngân sách</th>
-                {showBudgetCol && (
-                  <th className="border-r border-slate-200 bg-amber-50 px-2 py-2 text-right" title="So với ngân sách đã link">
-                    NS link · Δ
-                  </th>
-                )}
-                {ev.suppliers.map(s => {
-                  // User 2026-05-07: dùng tên NCC (master) thay vì displayName.
-                  // Khi NCC là winner (selected ở Section 2.a) → column highlight
-                  // emerald để cell giá ăn theo màu xanh (visual trace winner).
-                  const isWinner = ev.selectedSupplierId === s.supplierId
-                  return (
-                    <th
-                      key={s.id}
-                      className={cn(
-                        'border-r border-slate-200 px-2 py-2 text-right',
-                        isWinner && 'bg-emerald-50 text-emerald-700',
-                      )}
-                      title={s.displayName ?? undefined}
-                    >
-                      {isWinner && '✓ '}{s.supplierName}
-                    </th>
-                  )
-                })}
-                {!readOnly && <th className="px-2 py-2"></th>}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100">
-              {ev.details.map(d => (
-                <tr key={d.id}>
-                  <td className="sticky left-0 z-10 border-r border-slate-200 bg-white px-2 py-2">
-                    <div className="font-medium text-slate-900">{d.groupCode} {d.noiDung}</div>
-                    <div className="text-[10px] text-slate-500">{d.groupName} · {d.donViTinh ?? ''}</div>
-                  </td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{d.khoiLuongNganSach}</td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{fmtMoney(d.donGiaNganSach)}</td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{fmtMoney(d.thanhTienNganSach)}</td>
-                  {showBudgetCol && (() => {
-                    const bgValue = budgetRowMap.get(`${d.groupCode}|${d.itemCode ?? ''}`)
-                    if (bgValue == null)
-                      return <td className="border-r border-slate-200 bg-amber-50/40 px-2 py-2 text-right text-slate-300">—</td>
-                    const delta = d.thanhTienNganSach - bgValue
-                    return (
-                      <td
-                        className={cn(
-                          'border-r border-slate-200 bg-amber-50/40 px-2 py-2 text-right font-mono',
-                          delta > 0 && 'text-red-600',
-                          delta < 0 && 'text-emerald-600',
-                          delta === 0 && 'text-slate-500',
-                        )}
-                        title={`Ngân sách: ${fmtMoney(bgValue)} · Δ ${delta > 0 ? '+' : ''}${fmtMoney(delta)}`}
-                      >
-                        {fmtMoney(bgValue)}
-                        <div className="text-[10px]">{delta === 0 ? '=' : (delta > 0 ? `+${fmtMoney(delta)}` : fmtMoney(delta))}</div>
-                      </td>
-                    )
-                  })()}
-                  {ev.suppliers.map(s => {
-                    const q = quoteKey(d.id, s.id)
-                    // Winner NCC (selected ở Section 2.a) → cell ăn theo màu xanh
-                    // emerald (user 2026-05-07). isSelected per-quote checkbox bỏ
-                    // (đã consolidate winner ở Section 2.a NccSelectorRow).
-                    const isWinnerColumn = ev.selectedSupplierId === s.supplierId
-                    return (
-                      <td
-                        key={s.id}
-                        onClick={readOnly ? undefined : () => setQuoteEdit({ detail: d, supplier: s, existing: q })}
-                        className={cn(
-                          'border-r border-slate-200 px-2 py-2 text-right font-mono transition',
-                          !readOnly && 'cursor-pointer hover:bg-brand-50',
-                          isWinnerColumn && 'bg-emerald-50 font-semibold text-emerald-700',
-                        )}
-                      >
-                        {q ? fmtMoney(q.thanhTien) : <span className="text-slate-300">—</span>}
-                      </td>
-                    )
-                  })}
-                  {!readOnly && (
-                    <td className="px-2 py-2">
-                      <div className="flex gap-1">
-                        <button onClick={() => setEditDetail(d)} className="rounded px-1 py-0.5 text-slate-500 hover:bg-slate-100">
-                          <Pencil className="h-3 w-3" />
-                        </button>
-                        <button onClick={() => { if (confirm('Xóa hạng mục?')) removeDetail.mutate(d.id) }} className="rounded px-1 py-0.5 text-red-500 hover:bg-red-50">
-                          <Trash2 className="h-3 w-3" />
-                        </button>
-                      </div>
-                    </td>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-            {showBudgetCol && (
-              <tfoot className="border-t-2 border-slate-300 bg-slate-50 text-xs font-semibold">
-                <tr>
-                  <td className="sticky left-0 z-10 border-r border-slate-200 bg-slate-50 px-2 py-2 text-right">Tổng:</td>
-                  <td className="border-r border-slate-200"></td>
-                  <td className="border-r border-slate-200"></td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{fmtMoney(totalPeNganSach)}</td>
-                  <td className="border-r border-slate-200 bg-amber-50 px-2 py-2 text-right font-mono">
-                    {fmtMoney(totalBudget)}
-                    {(() => {
-                      const delta = totalPeNganSach - totalBudget
-                      return (
-                        <div className={cn(
-                          'text-[10px]',
-                          delta > 0 && 'text-red-600',
-                          delta < 0 && 'text-emerald-600',
-                          delta === 0 && 'text-slate-500',
-                        )}>
-                          {delta === 0 ? 'khớp ngân sách' : delta > 0 ? `vượt +${fmtMoney(delta)}` : `dưới ${fmtMoney(delta)}`}
-                        </div>
-                      )
-                    })()}
-                  </td>
-                  {ev.suppliers.map(s => <td key={s.id} className="border-r border-slate-200" />)}
-                  {!readOnly && <td />}
-                </tr>
-              </tfoot>
-            )}
-          </table>
+        <div className="space-y-3">
+          {ev.details.map(d => (
+            <HangMucCard
+              key={d.id}
+              detail={d}
+              ev={ev}
+              readOnly={readOnly}
+              budgetRowMap={budgetRowMap}
+              showBudgetCol={showBudgetCol}
+              onEditDetail={() => setEditDetail(d)}
+            />
+          ))}
         </div>
       )}
 
       {addOpen && <DetailDialog evaluationId={ev.id} row={null} onClose={() => setAddOpen(false)} />}
       {editDetail && <DetailDialog evaluationId={ev.id} row={editDetail} onClose={() => setEditDetail(null)} />}
+    </div>
+  )
+}
+
+// Card 1 hạng mục — tầng 1 header + tầng 2 NCC grid inline expand.
+// Mặc định mở (expanded=true) vì user demo chỉ 1 hạng mục, đỡ click.
+function HangMucCard({
+  detail, ev, readOnly, budgetRowMap, showBudgetCol, onEditDetail,
+}: {
+  detail: PeDetailRow
+  ev: PeDetailBundle
+  readOnly: boolean
+  budgetRowMap: Map<string, number>
+  showBudgetCol: boolean
+  onEditDetail: () => void
+}) {
+  const qc = useQueryClient()
+  const [expanded, setExpanded] = useState(true)
+  const [addNccOpen, setAddNccOpen] = useState(false)
+  const [editNccRow, setEditNccRow] = useState<PeSupplier | null>(null)
+  const [quoteEdit, setQuoteEdit] = useState<{ supplier: PeSupplier; existing: PeQuote | null } | null>(null)
+
+  const removeDetail = useMutation({
+    mutationFn: async () => api.delete(`/purchase-evaluations/${ev.id}/details/${detail.id}`),
+    onSuccess: () => { toast.success('Đã xóa hạng mục.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
+    onError: e => toast.error(getErrorMessage(e)),
+  })
+  const removeNcc = useMutation({
+    mutationFn: async (rowId: string) => api.delete(`/purchase-evaluations/${ev.id}/suppliers/${rowId}`),
+    onSuccess: () => { toast.success('Đã xóa NCC.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
+    onError: e => toast.error(getErrorMessage(e)),
+  })
+  const setWinner = useMutation({
+    mutationFn: async (supplierId: string) =>
+      api.post(`/purchase-evaluations/${ev.id}/select-winner`, { supplierId }),
+    onSuccess: () => { toast.success('Đã chọn NCC thắng.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
+    onError: e => toast.error(getErrorMessage(e)),
+  })
+
+  const bgValue = budgetRowMap.get(`${detail.groupCode}|${detail.itemCode ?? ''}`)
+  const delta = bgValue != null ? detail.thanhTienNganSach - bgValue : null
+
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
+      {/* Header row — hạng mục info + actions */}
+      <div className="flex items-start gap-3 border-b border-slate-100 p-3">
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="mt-0.5 text-slate-400 hover:text-slate-700"
+          title={expanded ? 'Đóng' : 'Mở'}
+        >
+          {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        </button>
+        <div className="flex-1 min-w-0">
+          <div className="font-medium text-slate-900">
+            <span className="font-mono text-[12px] text-slate-500 mr-2">{detail.groupCode}</span>
+            {detail.noiDung}
+          </div>
+          <div className="mt-0.5 text-[11px] text-slate-500">
+            {detail.groupName}{detail.donViTinh ? ` · ĐVT: ${detail.donViTinh}` : ''}
+          </div>
+        </div>
+        <div className="flex flex-shrink-0 items-start gap-4 text-right text-xs">
+          <div>
+            <div className="text-[10px] uppercase text-slate-400">KL</div>
+            <div className="font-mono">{detail.khoiLuongNganSach}</div>
+          </div>
+          <div>
+            <div className="text-[10px] uppercase text-slate-400">ĐG ngân sách</div>
+            <div className="font-mono">{fmtMoney(detail.donGiaNganSach)}</div>
+          </div>
+          <div>
+            <div className="text-[10px] uppercase text-slate-400">Thành tiền NS</div>
+            <div className="font-mono font-semibold">{fmtMoney(detail.thanhTienNganSach)}</div>
+          </div>
+          {showBudgetCol && bgValue != null && (
+            <div className="border-l border-slate-200 pl-3">
+              <div className="text-[10px] uppercase text-slate-400">NS link</div>
+              <div className="font-mono text-[11px]">{fmtMoney(bgValue)}</div>
+              <div className={cn(
+                'font-mono text-[10px]',
+                delta! > 0 && 'text-red-600',
+                delta! < 0 && 'text-emerald-600',
+                delta === 0 && 'text-slate-500',
+              )}>
+                Δ {delta! > 0 ? '+' : ''}{fmtMoney(delta!)}
+              </div>
+            </div>
+          )}
+        </div>
+        {!readOnly && (
+          <div className="flex flex-shrink-0 gap-1">
+            <button
+              onClick={onEditDetail}
+              className="rounded px-1.5 py-0.5 text-slate-500 hover:bg-slate-100"
+              title="Sửa hạng mục"
+            >
+              <Pencil className="h-3.5 w-3.5" />
+            </button>
+            <button
+              onClick={() => { if (confirm('Xóa hạng mục? Báo giá NCC đã nhập cũng sẽ mất.')) removeDetail.mutate() }}
+              className="rounded px-1.5 py-0.5 text-red-500 hover:bg-red-50"
+              title="Xóa hạng mục"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Expand panel — NCC tham gia + báo giá inline */}
+      {expanded && (
+        <div className="p-3">
+          <div className="mb-2 flex items-center justify-between">
+            <div className="text-[11px] uppercase tracking-wide text-slate-500">
+              NCC tham gia ({ev.suppliers.length})
+            </div>
+            {!readOnly && (
+              <Button variant="ghost" onClick={() => setAddNccOpen(true)} className="gap-1.5 text-xs">
+                <Plus className="h-3 w-3" /> Thêm NCC
+              </Button>
+            )}
+          </div>
+
+          {ev.suppliers.length === 0 ? (
+            <p className="text-xs text-slate-500">
+              {readOnly ? 'Chưa có NCC tham gia.' : 'Chưa có NCC. Thêm NCC để nhập báo giá.'}
+            </p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full border border-slate-200 text-xs">
+                <thead className="bg-slate-50 text-slate-600">
+                  <tr>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">NCC</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Liên hệ</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Điều khoản TT</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">File báo giá</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">ĐG chưa VAT</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">ĐG có VAT</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">Thành tiền</th>
+                    {!readOnly && <th className="px-2 py-1.5"></th>}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100">
+                  {ev.suppliers.map(s => {
+                    const q = detail.quotes.find(x => x.purchaseEvaluationSupplierId === s.id) ?? null
+                    const isWinner = ev.selectedSupplierId === s.supplierId
+                    const hasQuotes = ev.details.some(dd => dd.quotes.some(qq => qq.purchaseEvaluationSupplierId === s.id))
+                    const canDelete = !isWinner && !hasQuotes
+                    const openQuote = () => setQuoteEdit({ supplier: s, existing: q })
+                    const cellHover = !readOnly && 'cursor-pointer hover:bg-brand-50'
+                    return (
+                      <tr key={s.id} className={cn('align-top', isWinner && 'bg-emerald-50/60')}>
+                        <td className="border-r border-slate-200 px-2 py-1.5">
+                          <div className="font-medium text-slate-900">
+                            {isWinner && <span className="text-emerald-700">✓ </span>}{s.supplierName}
+                          </div>
+                          {s.displayName && <div className="text-[10px] text-slate-500">{s.displayName}</div>}
+                          {s.note && <div className="text-[10px] text-amber-600">{s.note}</div>}
+                        </td>
+                        <td className="border-r border-slate-200 px-2 py-1.5 text-[11px] text-slate-600">
+                          {s.contactName && <div>{s.contactName}</div>}
+                          {s.contactPhone && <div>{s.contactPhone}</div>}
+                          {s.contactEmail && <div className="truncate" title={s.contactEmail}>{s.contactEmail}</div>}
+                          {!s.contactName && !s.contactPhone && !s.contactEmail && <span className="text-slate-300">—</span>}
+                        </td>
+                        <td className="border-r border-slate-200 px-2 py-1.5 text-[11px]">
+                          {s.paymentTermText ?? <span className="text-slate-300">—</span>}
+                        </td>
+                        <td className="border-r border-slate-200 px-2 py-1.5">
+                          <SupplierAttachmentsCell
+                            evaluationId={ev.id}
+                            supplierRowId={s.id}
+                            attachments={ev.attachments.filter(a => a.purchaseEvaluationSupplierId === s.id)}
+                            readOnly={readOnly}
+                          />
+                        </td>
+                        <td
+                          onClick={readOnly ? undefined : openQuote}
+                          className={cn('border-r border-slate-200 px-2 py-1.5 text-right font-mono', cellHover)}
+                        >
+                          {q ? fmtMoney(q.chuaVat) : <span className="text-slate-300">—</span>}
+                        </td>
+                        <td
+                          onClick={readOnly ? undefined : openQuote}
+                          className={cn('border-r border-slate-200 px-2 py-1.5 text-right font-mono', cellHover)}
+                        >
+                          {q ? fmtMoney(q.bgVat) : <span className="text-slate-300">—</span>}
+                        </td>
+                        <td
+                          onClick={readOnly ? undefined : openQuote}
+                          className={cn(
+                            'border-r border-slate-200 px-2 py-1.5 text-right font-mono font-semibold',
+                            isWinner && 'text-emerald-700',
+                            cellHover,
+                          )}
+                          title={!readOnly ? 'Click để nhập / sửa báo giá' : undefined}
+                        >
+                          {q ? fmtMoney(q.thanhTien) : <span className="text-slate-300">—</span>}
+                        </td>
+                        {!readOnly && (
+                          <td className="px-2 py-1.5">
+                            <div className="flex justify-end gap-0.5">
+                              <button
+                                onClick={() => setWinner.mutate(s.supplierId)}
+                                className={cn(
+                                  'rounded px-1 py-0.5',
+                                  isWinner ? 'bg-emerald-100 text-emerald-700' : 'text-slate-400 hover:bg-emerald-50 hover:text-emerald-700',
+                                )}
+                                title={isWinner ? 'NCC đã được chọn (winner)' : 'Chọn NCC thắng'}
+                              >
+                                <Check className="h-3 w-3" />
+                              </button>
+                              {!isWinner && (
+                                <button
+                                  onClick={() => setEditNccRow(s)}
+                                  className="rounded px-1 py-0.5 text-slate-500 hover:bg-slate-100"
+                                  title="Sửa thông tin NCC"
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </button>
+                              )}
+                              {canDelete ? (
+                                <button
+                                  onClick={() => { if (confirm('Xóa NCC này khỏi phiếu?')) removeNcc.mutate(s.id) }}
+                                  className="rounded px-1 py-0.5 text-red-500 hover:bg-red-50"
+                                  title="Xóa NCC"
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </button>
+                              ) : !isWinner && hasQuotes && (
+                                <span
+                                  className="rounded px-1 py-0.5 text-slate-300 cursor-not-allowed"
+                                  title="NCC đã có báo giá — xóa báo giá trước rồi mới xóa NCC"
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </span>
+                              )}
+                            </div>
+                          </td>
+                        )}
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+
+      {addNccOpen && <AddSupplierDialog evaluationId={ev.id} onClose={() => setAddNccOpen(false)} />}
+      {editNccRow && <EditSupplierDialog evaluationId={ev.id} row={editNccRow} onClose={() => setEditNccRow(null)} />}
       {quoteEdit && (
         <QuoteDialog
           evaluationId={ev.id}
-          detailId={quoteEdit.detail.id}
+          detailId={detail.id}
           supplierRowId={quoteEdit.supplier.id}
           supplierName={quoteEdit.supplier.supplierName}
-          itemName={quoteEdit.detail.noiDung}
-          khoiLuong={quoteEdit.detail.khoiLuongThiCong || quoteEdit.detail.khoiLuongNganSach}
+          itemName={detail.noiDung}
+          khoiLuong={detail.khoiLuongThiCong || detail.khoiLuongNganSach}
           existing={quoteEdit.existing}
           onClose={() => setQuoteEdit(null)}
         />
diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index 2d1689e..bae82d4 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@@ -6,7 +6,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
-import { Check, Paperclip, Pencil, Plus, Trash2, Upload } from 'lucide-react'
+import { Check, ChevronDown, ChevronRight, Paperclip, Pencil, Plus, Trash2, Upload } from 'lucide-react'
 import { Button } from '@/components/ui/Button'
 import { Dialog } from '@/components/ui/Dialog'
 import { Input } from '@/components/ui/Input'
@@ -161,23 +161,20 @@ export function PeDetailTabs({
       </div>
 
       <div className="divide-y divide-slate-200">
-        {/* Section order (Session 20): Hạng mục lên đầu sau Thông tin gói thầu.
-            BE auto-tạo 1 hạng mục mặc định (tên = TenGoiThau, giá trị = ngân sách)
-            khi Create. NCC tham gia tạm giữ riêng — Chunk B sẽ gộp NCC nested
-            expand dưới mỗi hạng mục. */}
+        {/* Section layout (Session 20 Chunk B): Hạng mục nested expand chứa NCC
+            (tầng 1 = hạng mục, tầng 2 = NCC tham gia + báo giá inline). NCC
+            tham gia section riêng bỏ — gộp vào Section 2 expand panel. Tên
+            hạng mục + giá trị auto từ gói thầu (Chunk A BE seed). */}
         <Section title="1. Thông tin gói thầu">
           <InfoTab ev={evaluation} readOnly={readOnly} autoEdit={autoEditHeader} />
         </Section>
-        <Section title={`2. Hạng mục + Báo giá (${evaluation.details.length})`}>
+        <Section title={`2. Hạng mục + Báo giá NCC (${evaluation.details.length} hạng mục · ${evaluation.suppliers.length} NCC)`}>
           <ItemsTab ev={evaluation} readOnly={readOnly} />
         </Section>
-        <Section title="3. Chọn NCC / TP">
+        <Section title="3. Chọn NCC / TP thắng thầu">
           <ChonNccSection ev={evaluation} readOnly={readOnly} />
         </Section>
-        <Section title={`4. NCC / TP tham gia (${evaluation.suppliers.length})`}>
-          <SuppliersTab ev={evaluation} readOnly={readOnly} />
-        </Section>
-        <Section title="5. Ý kiến cấp duyệt (sign-off theo workflow)">
+        <Section title="4. Ý kiến cấp duyệt (sign-off theo workflow)">
           {mode === 'workspace' && (
             <div className="mb-3 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-[12px] text-amber-800">
               Ý kiến + chữ ký auto đồng bộ khi NV duyệt phiếu — vào menu &ldquo;Duyệt&rdquo; để ký.
@@ -1037,139 +1034,9 @@ function CreateContractDialog({ evaluation, onClose }: { evaluation: PeDetailBun
   )
 }
 
-// ===== Tab: NCC =====
-function SuppliersTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boolean }) {
-  const qc = useQueryClient()
-  const [open, setOpen] = useState(false)
-  const [editRow, setEditRow] = useState<PeSupplier | null>(null)
-
-  const remove = useMutation({
-    mutationFn: async (rowId: string) => api.delete(`/purchase-evaluations/${ev.id}/suppliers/${rowId}`),
-    onSuccess: () => { toast.success('Đã xóa NCC.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
-    onError: e => toast.error(getErrorMessage(e)),
-  })
-  const setWinner = useMutation({
-    mutationFn: async (supplierId: string) =>
-      api.post(`/purchase-evaluations/${ev.id}/select-winner`, { supplierId }),
-    onSuccess: () => { toast.success('Đã chọn NCC thắng.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
-    onError: e => toast.error(getErrorMessage(e)),
-  })
-
-  return (
-    <div>
-      {!readOnly && (
-        <div className="mb-3 flex justify-end">
-          <Button onClick={() => setOpen(true)} className="gap-1.5 text-xs">
-            <Plus className="h-3.5 w-3.5" /> Thêm NCC
-          </Button>
-        </div>
-      )}
-      {ev.suppliers.length === 0 ? (
-        <p className="text-sm text-slate-500">
-          {readOnly ? 'Chưa có NCC.' : 'Chưa có NCC. Thêm NCC để bắt đầu so sánh giá.'}
-        </p>
-      ) : (
-        <div className="overflow-x-auto">
-          <table className="min-w-full text-sm">
-            <thead className="bg-slate-50 text-xs uppercase text-slate-500">
-              <tr>
-                <th className="px-3 py-2 text-left">NCC</th>
-                <th className="px-3 py-2 text-left">Liên hệ</th>
-                <th className="px-3 py-2 text-left">Điều khoản TT</th>
-                <th className="px-3 py-2 text-left">File đính kèm</th>
-                {!readOnly && <th className="px-3 py-2"></th>}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100">
-              {ev.suppliers.map(s => (
-                <tr key={s.id} className={cn('align-top', ev.selectedSupplierId === s.supplierId && 'bg-emerald-50')}>
-                  <td className="px-3 py-2">
-                    <div className="font-medium text-slate-900">{s.supplierName}</div>
-                    {s.displayName && <div className="text-[11px] text-slate-500">{s.displayName}</div>}
-                    {s.note && <div className="mt-0.5 text-[11px] text-amber-600">{s.note}</div>}
-                    {readOnly && ev.selectedSupplierId === s.supplierId && (
-                      <div className="mt-0.5 text-[11px] font-medium text-emerald-700">✓ NCC được chọn</div>
-                    )}
-                  </td>
-                  <td className="px-3 py-2 text-[12px] text-slate-600">
-                    {s.contactName && <div>{s.contactName}</div>}
-                    {s.contactPhone && <div>{s.contactPhone}</div>}
-                    {s.contactEmail && <div className="truncate">{s.contactEmail}</div>}
-                  </td>
-                  <td className="px-3 py-2">{s.paymentTermText ?? '—'}</td>
-                  <td className="px-3 py-2">
-                    <SupplierAttachmentsCell
-                      evaluationId={ev.id}
-                      supplierRowId={s.id}
-                      attachments={ev.attachments.filter(a => a.purchaseEvaluationSupplierId === s.id)}
-                      readOnly={readOnly}
-                    />
-                  </td>
-                  {!readOnly && (() => {
-                    // User 2026-05-07: NCC đã được chọn (winner) → KHÔNG cho
-                    // sửa/xóa (tránh thay đổi NCC đã chốt). Chỉ hiển thị
-                    // checkmark active state.
-                    // User 2026-05-07 (B11+): NCC đã có hạng mục báo giá (quotes
-                    // entered in Section 4) → KHÔNG cho xóa (tránh mất báo giá đã nhập).
-                    const isWinner = ev.selectedSupplierId === s.supplierId
-                    const hasQuotes = ev.details.some(d => d.quotes.some(q => q.purchaseEvaluationSupplierId === s.id))
-                    const canDelete = !isWinner && !hasQuotes
-                    return (
-                      <td className="px-3 py-2">
-                        <div className="flex justify-end gap-1">
-                          <button
-                            onClick={() => setWinner.mutate(s.supplierId)}
-                            className={cn(
-                              'rounded px-1.5 py-0.5 text-[11px]',
-                              isWinner
-                                ? 'bg-emerald-100 text-emerald-700'
-                                : 'text-slate-500 hover:bg-emerald-50 hover:text-emerald-700',
-                            )}
-                            title={isWinner ? 'NCC đã được chọn (winner)' : 'Chọn NCC thắng'}
-                          >
-                            <Check className="h-3.5 w-3.5" />
-                          </button>
-                          {!isWinner && (
-                            <button
-                              onClick={() => setEditRow(s)}
-                              className="rounded px-1.5 py-0.5 text-slate-500 hover:bg-slate-100"
-                              title="Sửa"
-                            >
-                              <Pencil className="h-3.5 w-3.5" />
-                            </button>
-                          )}
-                          {canDelete ? (
-                            <button
-                              onClick={() => { if (confirm('Xóa NCC này khỏi phiếu?')) remove.mutate(s.id) }}
-                              className="rounded px-1.5 py-0.5 text-red-500 hover:bg-red-50"
-                              title="Xóa"
-                            >
-                              <Trash2 className="h-3.5 w-3.5" />
-                            </button>
-                          ) : !isWinner && hasQuotes && (
-                            <span
-                              className="rounded px-1.5 py-0.5 text-slate-300 cursor-not-allowed"
-                              title="NCC đã có báo giá ở Section 4 — xóa báo giá trước rồi mới xóa NCC"
-                            >
-                              <Trash2 className="h-3.5 w-3.5" />
-                            </span>
-                          )}
-                        </div>
-                      </td>
-                    )
-                  })()}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-
-      {open && <AddSupplierDialog evaluationId={ev.id} onClose={() => setOpen(false)} />}
-      {editRow && <EditSupplierDialog evaluationId={ev.id} row={editRow} onClose={() => setEditRow(null)} />}
-    </div>
-  )
-}
+// Session 20 Chunk B: SuppliersTab function bỏ — NCC list giờ render nested
+// trong HangMucCard (expand panel mỗi hạng mục). 2 dialog Add/Edit Supplier
+// vẫn giữ vì HangMucCard call lại.
 
 function AddSupplierDialog({ evaluationId, onClose }: { evaluationId: string; onClose: () => void }) {
   const qc = useQueryClient()
@@ -1263,24 +1130,14 @@ function EditSupplierDialog({ evaluationId, row, onClose }: { evaluationId: stri
   )
 }
 
-// ===== Tab: Hạng mục + Báo giá (matrix) =====
+// ===== Tab: Hạng mục + Báo giá (Session 20 — nested cards layout) =====
+// Mỗi hạng mục = 1 card với expand panel chứa NCC tham gia inline grid.
+// Replace bảng matrix grid (hạng mục × NCC) cũ — user demo 1 hạng mục.
 function ItemsTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boolean }) {
-  const qc = useQueryClient()
   const [addOpen, setAddOpen] = useState(false)
   const [editDetail, setEditDetail] = useState<PeDetailRow | null>(null)
-  const [quoteEdit, setQuoteEdit] = useState<{ detail: PeDetailRow; supplier: PeSupplier; existing: PeQuote | null } | null>(null)
-
-  const removeDetail = useMutation({
-    mutationFn: async (id: string) => api.delete(`/purchase-evaluations/${ev.id}/details/${id}`),
-    onSuccess: () => { toast.success('Đã xóa hạng mục.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
-    onError: e => toast.error(getErrorMessage(e)),
-  })
-
-  const quoteKey = (detailId: string, supplierRowId: string) =>
-    ev.details.find(d => d.id === detailId)?.quotes.find(q => q.purchaseEvaluationSupplierId === supplierRowId) ?? null
 
   // Budget comparison — fetch full Budget bundle nếu có link để so sánh per-row.
-  // Match key: groupCode|itemCode (case-sensitive match; itemCode null cho phép).
   const budgetBundle = useQuery({
     queryKey: ['budget-detail-for-pe', ev.budgetId],
     queryFn: async () => (await api.get<{ details: { groupCode: string; itemCode: string | null; thanhTien: number }[]; tongNganSach: number }>(
@@ -1295,18 +1152,13 @@ function ItemsTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boo
     return m
   })()
   const showBudgetCol = !!ev.budgetId
-  const totalPeNganSach = ev.details.reduce((sum, d) => sum + d.thanhTienNganSach, 0)
-  const totalBudget = budgetBundle.data?.tongNganSach ?? 0
 
   return (
     <div>
       <div className="mb-3 flex items-center justify-between">
         <p className="text-xs text-slate-500">
-          {ev.suppliers.length === 0
-            ? (readOnly ? 'Chưa có NCC tham gia.' : 'Thêm NCC ở tab "NCC" trước khi nhập báo giá.')
-            : readOnly
-              ? `${ev.details.length} hạng mục × ${ev.suppliers.length} NCC`
-              : `${ev.details.length} hạng mục × ${ev.suppliers.length} NCC — click ô để nhập báo giá.`}
+          {ev.details.length} hạng mục · {ev.suppliers.length} NCC tham gia
+          {!readOnly && ' — mở hạng mục để thêm NCC + nhập báo giá.'}
         </p>
         {!readOnly && (
           <Button onClick={() => setAddOpen(true)} className="gap-1.5 text-xs">
@@ -1318,147 +1170,285 @@ function ItemsTab({ ev, readOnly = false }: { ev: PeDetailBundle; readOnly?: boo
       {ev.details.length === 0 ? (
         <p className="text-sm text-slate-500">Chưa có hạng mục.</p>
       ) : (
-        <div className="overflow-x-auto">
-          <table className="min-w-full border border-slate-200 text-xs">
-            <thead className="bg-slate-50 text-slate-600">
-              <tr>
-                <th className="sticky left-0 z-10 border-r border-slate-200 bg-slate-50 px-2 py-2 text-left">Hạng mục</th>
-                <th className="border-r border-slate-200 px-2 py-2 text-right">KL</th>
-                <th className="border-r border-slate-200 px-2 py-2 text-right">ĐG ngân sách</th>
-                <th className="border-r border-slate-200 px-2 py-2 text-right">TT ngân sách</th>
-                {showBudgetCol && (
-                  <th className="border-r border-slate-200 bg-amber-50 px-2 py-2 text-right" title="So với ngân sách đã link">
-                    NS link · Δ
-                  </th>
-                )}
-                {ev.suppliers.map(s => {
-                  // User 2026-05-07: dùng tên NCC (master) thay vì displayName.
-                  // Khi NCC là winner (selected ở Section 2.a) → column highlight
-                  // emerald để cell giá ăn theo màu xanh (visual trace winner).
-                  const isWinner = ev.selectedSupplierId === s.supplierId
-                  return (
-                    <th
-                      key={s.id}
-                      className={cn(
-                        'border-r border-slate-200 px-2 py-2 text-right',
-                        isWinner && 'bg-emerald-50 text-emerald-700',
-                      )}
-                      title={s.displayName ?? undefined}
-                    >
-                      {isWinner && '✓ '}{s.supplierName}
-                    </th>
-                  )
-                })}
-                {!readOnly && <th className="px-2 py-2"></th>}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100">
-              {ev.details.map(d => (
-                <tr key={d.id}>
-                  <td className="sticky left-0 z-10 border-r border-slate-200 bg-white px-2 py-2">
-                    <div className="font-medium text-slate-900">{d.groupCode} {d.noiDung}</div>
-                    <div className="text-[10px] text-slate-500">{d.groupName} · {d.donViTinh ?? ''}</div>
-                  </td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{d.khoiLuongNganSach}</td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{fmtMoney(d.donGiaNganSach)}</td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{fmtMoney(d.thanhTienNganSach)}</td>
-                  {showBudgetCol && (() => {
-                    const bgValue = budgetRowMap.get(`${d.groupCode}|${d.itemCode ?? ''}`)
-                    if (bgValue == null)
-                      return <td className="border-r border-slate-200 bg-amber-50/40 px-2 py-2 text-right text-slate-300">—</td>
-                    const delta = d.thanhTienNganSach - bgValue
-                    return (
-                      <td
-                        className={cn(
-                          'border-r border-slate-200 bg-amber-50/40 px-2 py-2 text-right font-mono',
-                          delta > 0 && 'text-red-600',
-                          delta < 0 && 'text-emerald-600',
-                          delta === 0 && 'text-slate-500',
-                        )}
-                        title={`Ngân sách: ${fmtMoney(bgValue)} · Δ ${delta > 0 ? '+' : ''}${fmtMoney(delta)}`}
-                      >
-                        {fmtMoney(bgValue)}
-                        <div className="text-[10px]">{delta === 0 ? '=' : (delta > 0 ? `+${fmtMoney(delta)}` : fmtMoney(delta))}</div>
-                      </td>
-                    )
-                  })()}
-                  {ev.suppliers.map(s => {
-                    const q = quoteKey(d.id, s.id)
-                    // Winner NCC (selected ở Section 2.a) → cell ăn theo màu xanh
-                    // emerald (user 2026-05-07). isSelected per-quote checkbox bỏ
-                    // (đã consolidate winner ở Section 2.a NccSelectorRow).
-                    const isWinnerColumn = ev.selectedSupplierId === s.supplierId
-                    return (
-                      <td
-                        key={s.id}
-                        onClick={readOnly ? undefined : () => setQuoteEdit({ detail: d, supplier: s, existing: q })}
-                        className={cn(
-                          'border-r border-slate-200 px-2 py-2 text-right font-mono transition',
-                          !readOnly && 'cursor-pointer hover:bg-brand-50',
-                          isWinnerColumn && 'bg-emerald-50 font-semibold text-emerald-700',
-                        )}
-                      >
-                        {q ? fmtMoney(q.thanhTien) : <span className="text-slate-300">—</span>}
-                      </td>
-                    )
-                  })}
-                  {!readOnly && (
-                    <td className="px-2 py-2">
-                      <div className="flex gap-1">
-                        <button onClick={() => setEditDetail(d)} className="rounded px-1 py-0.5 text-slate-500 hover:bg-slate-100">
-                          <Pencil className="h-3 w-3" />
-                        </button>
-                        <button onClick={() => { if (confirm('Xóa hạng mục?')) removeDetail.mutate(d.id) }} className="rounded px-1 py-0.5 text-red-500 hover:bg-red-50">
-                          <Trash2 className="h-3 w-3" />
-                        </button>
-                      </div>
-                    </td>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-            {showBudgetCol && (
-              <tfoot className="border-t-2 border-slate-300 bg-slate-50 text-xs font-semibold">
-                <tr>
-                  <td className="sticky left-0 z-10 border-r border-slate-200 bg-slate-50 px-2 py-2 text-right">Tổng:</td>
-                  <td className="border-r border-slate-200"></td>
-                  <td className="border-r border-slate-200"></td>
-                  <td className="border-r border-slate-200 px-2 py-2 text-right font-mono">{fmtMoney(totalPeNganSach)}</td>
-                  <td className="border-r border-slate-200 bg-amber-50 px-2 py-2 text-right font-mono">
-                    {fmtMoney(totalBudget)}
-                    {(() => {
-                      const delta = totalPeNganSach - totalBudget
-                      return (
-                        <div className={cn(
-                          'text-[10px]',
-                          delta > 0 && 'text-red-600',
-                          delta < 0 && 'text-emerald-600',
-                          delta === 0 && 'text-slate-500',
-                        )}>
-                          {delta === 0 ? 'khớp ngân sách' : delta > 0 ? `vượt +${fmtMoney(delta)}` : `dưới ${fmtMoney(delta)}`}
-                        </div>
-                      )
-                    })()}
-                  </td>
-                  {ev.suppliers.map(s => <td key={s.id} className="border-r border-slate-200" />)}
-                  {!readOnly && <td />}
-                </tr>
-              </tfoot>
-            )}
-          </table>
+        <div className="space-y-3">
+          {ev.details.map(d => (
+            <HangMucCard
+              key={d.id}
+              detail={d}
+              ev={ev}
+              readOnly={readOnly}
+              budgetRowMap={budgetRowMap}
+              showBudgetCol={showBudgetCol}
+              onEditDetail={() => setEditDetail(d)}
+            />
+          ))}
         </div>
       )}
 
       {addOpen && <DetailDialog evaluationId={ev.id} row={null} onClose={() => setAddOpen(false)} />}
       {editDetail && <DetailDialog evaluationId={ev.id} row={editDetail} onClose={() => setEditDetail(null)} />}
+    </div>
+  )
+}
+
+// Card 1 hạng mục — tầng 1 header + tầng 2 NCC grid inline expand.
+// Mặc định mở (expanded=true) vì user demo chỉ 1 hạng mục, đỡ click.
+function HangMucCard({
+  detail, ev, readOnly, budgetRowMap, showBudgetCol, onEditDetail,
+}: {
+  detail: PeDetailRow
+  ev: PeDetailBundle
+  readOnly: boolean
+  budgetRowMap: Map<string, number>
+  showBudgetCol: boolean
+  onEditDetail: () => void
+}) {
+  const qc = useQueryClient()
+  const [expanded, setExpanded] = useState(true)
+  const [addNccOpen, setAddNccOpen] = useState(false)
+  const [editNccRow, setEditNccRow] = useState<PeSupplier | null>(null)
+  const [quoteEdit, setQuoteEdit] = useState<{ supplier: PeSupplier; existing: PeQuote | null } | null>(null)
+
+  const removeDetail = useMutation({
+    mutationFn: async () => api.delete(`/purchase-evaluations/${ev.id}/details/${detail.id}`),
+    onSuccess: () => { toast.success('Đã xóa hạng mục.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
+    onError: e => toast.error(getErrorMessage(e)),
+  })
+  const removeNcc = useMutation({
+    mutationFn: async (rowId: string) => api.delete(`/purchase-evaluations/${ev.id}/suppliers/${rowId}`),
+    onSuccess: () => { toast.success('Đã xóa NCC.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
+    onError: e => toast.error(getErrorMessage(e)),
+  })
+  const setWinner = useMutation({
+    mutationFn: async (supplierId: string) =>
+      api.post(`/purchase-evaluations/${ev.id}/select-winner`, { supplierId }),
+    onSuccess: () => { toast.success('Đã chọn NCC thắng.'); qc.invalidateQueries({ queryKey: ['pe-detail', ev.id] }) },
+    onError: e => toast.error(getErrorMessage(e)),
+  })
+
+  const bgValue = budgetRowMap.get(`${detail.groupCode}|${detail.itemCode ?? ''}`)
+  const delta = bgValue != null ? detail.thanhTienNganSach - bgValue : null
+
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
+      {/* Header row — hạng mục info + actions */}
+      <div className="flex items-start gap-3 border-b border-slate-100 p-3">
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="mt-0.5 text-slate-400 hover:text-slate-700"
+          title={expanded ? 'Đóng' : 'Mở'}
+        >
+          {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        </button>
+        <div className="flex-1 min-w-0">
+          <div className="font-medium text-slate-900">
+            <span className="font-mono text-[12px] text-slate-500 mr-2">{detail.groupCode}</span>
+            {detail.noiDung}
+          </div>
+          <div className="mt-0.5 text-[11px] text-slate-500">
+            {detail.groupName}{detail.donViTinh ? ` · ĐVT: ${detail.donViTinh}` : ''}
+          </div>
+        </div>
+        <div className="flex flex-shrink-0 items-start gap-4 text-right text-xs">
+          <div>
+            <div className="text-[10px] uppercase text-slate-400">KL</div>
+            <div className="font-mono">{detail.khoiLuongNganSach}</div>
+          </div>
+          <div>
+            <div className="text-[10px] uppercase text-slate-400">ĐG ngân sách</div>
+            <div className="font-mono">{fmtMoney(detail.donGiaNganSach)}</div>
+          </div>
+          <div>
+            <div className="text-[10px] uppercase text-slate-400">Thành tiền NS</div>
+            <div className="font-mono font-semibold">{fmtMoney(detail.thanhTienNganSach)}</div>
+          </div>
+          {showBudgetCol && bgValue != null && (
+            <div className="border-l border-slate-200 pl-3">
+              <div className="text-[10px] uppercase text-slate-400">NS link</div>
+              <div className="font-mono text-[11px]">{fmtMoney(bgValue)}</div>
+              <div className={cn(
+                'font-mono text-[10px]',
+                delta! > 0 && 'text-red-600',
+                delta! < 0 && 'text-emerald-600',
+                delta === 0 && 'text-slate-500',
+              )}>
+                Δ {delta! > 0 ? '+' : ''}{fmtMoney(delta!)}
+              </div>
+            </div>
+          )}
+        </div>
+        {!readOnly && (
+          <div className="flex flex-shrink-0 gap-1">
+            <button
+              onClick={onEditDetail}
+              className="rounded px-1.5 py-0.5 text-slate-500 hover:bg-slate-100"
+              title="Sửa hạng mục"
+            >
+              <Pencil className="h-3.5 w-3.5" />
+            </button>
+            <button
+              onClick={() => { if (confirm('Xóa hạng mục? Báo giá NCC đã nhập cũng sẽ mất.')) removeDetail.mutate() }}
+              className="rounded px-1.5 py-0.5 text-red-500 hover:bg-red-50"
+              title="Xóa hạng mục"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Expand panel — NCC tham gia + báo giá inline */}
+      {expanded && (
+        <div className="p-3">
+          <div className="mb-2 flex items-center justify-between">
+            <div className="text-[11px] uppercase tracking-wide text-slate-500">
+              NCC tham gia ({ev.suppliers.length})
+            </div>
+            {!readOnly && (
+              <Button variant="ghost" onClick={() => setAddNccOpen(true)} className="gap-1.5 text-xs">
+                <Plus className="h-3 w-3" /> Thêm NCC
+              </Button>
+            )}
+          </div>
+
+          {ev.suppliers.length === 0 ? (
+            <p className="text-xs text-slate-500">
+              {readOnly ? 'Chưa có NCC tham gia.' : 'Chưa có NCC. Thêm NCC để nhập báo giá.'}
+            </p>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full border border-slate-200 text-xs">
+                <thead className="bg-slate-50 text-slate-600">
+                  <tr>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">NCC</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Liên hệ</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Điều khoản TT</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">File báo giá</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">ĐG chưa VAT</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">ĐG có VAT</th>
+                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">Thành tiền</th>
+                    {!readOnly && <th className="px-2 py-1.5"></th>}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100">
+                  {ev.suppliers.map(s => {
+                    const q = detail.quotes.find(x => x.purchaseEvaluationSupplierId === s.id) ?? null
+                    const isWinner = ev.selectedSupplierId === s.supplierId
+                    const hasQuotes = ev.details.some(dd => dd.quotes.some(qq => qq.purchaseEvaluationSupplierId === s.id))
+                    const canDelete = !isWinner && !hasQuotes
+                    const openQuote = () => setQuoteEdit({ supplier: s, existing: q })
+                    const cellHover = !readOnly && 'cursor-pointer hover:bg-brand-50'
+                    return (
+                      <tr key={s.id} className={cn('align-top', isWinner && 'bg-emerald-50/60')}>
+                        <td className="border-r border-slate-200 px-2 py-1.5">
+                          <div className="font-medium text-slate-900">
+                            {isWinner && <span className="text-emerald-700">✓ </span>}{s.supplierName}
+                          </div>
+                          {s.displayName && <div className="text-[10px] text-slate-500">{s.displayName}</div>}
+                          {s.note && <div className="text-[10px] text-amber-600">{s.note}</div>}
+                        </td>
+                        <td className="border-r border-slate-200 px-2 py-1.5 text-[11px] text-slate-600">
+                          {s.contactName && <div>{s.contactName}</div>}
+                          {s.contactPhone && <div>{s.contactPhone}</div>}
+                          {s.contactEmail && <div className="truncate" title={s.contactEmail}>{s.contactEmail}</div>}
+                          {!s.contactName && !s.contactPhone && !s.contactEmail && <span className="text-slate-300">—</span>}
+                        </td>
+                        <td className="border-r border-slate-200 px-2 py-1.5 text-[11px]">
+                          {s.paymentTermText ?? <span className="text-slate-300">—</span>}
+                        </td>
+                        <td className="border-r border-slate-200 px-2 py-1.5">
+                          <SupplierAttachmentsCell
+                            evaluationId={ev.id}
+                            supplierRowId={s.id}
+                            attachments={ev.attachments.filter(a => a.purchaseEvaluationSupplierId === s.id)}
+                            readOnly={readOnly}
+                          />
+                        </td>
+                        <td
+                          onClick={readOnly ? undefined : openQuote}
+                          className={cn('border-r border-slate-200 px-2 py-1.5 text-right font-mono', cellHover)}
+                        >
+                          {q ? fmtMoney(q.chuaVat) : <span className="text-slate-300">—</span>}
+                        </td>
+                        <td
+                          onClick={readOnly ? undefined : openQuote}
+                          className={cn('border-r border-slate-200 px-2 py-1.5 text-right font-mono', cellHover)}
+                        >
+                          {q ? fmtMoney(q.bgVat) : <span className="text-slate-300">—</span>}
+                        </td>
+                        <td
+                          onClick={readOnly ? undefined : openQuote}
+                          className={cn(
+                            'border-r border-slate-200 px-2 py-1.5 text-right font-mono font-semibold',
+                            isWinner && 'text-emerald-700',
+                            cellHover,
+                          )}
+                          title={!readOnly ? 'Click để nhập / sửa báo giá' : undefined}
+                        >
+                          {q ? fmtMoney(q.thanhTien) : <span className="text-slate-300">—</span>}
+                        </td>
+                        {!readOnly && (
+                          <td className="px-2 py-1.5">
+                            <div className="flex justify-end gap-0.5">
+                              <button
+                                onClick={() => setWinner.mutate(s.supplierId)}
+                                className={cn(
+                                  'rounded px-1 py-0.5',
+                                  isWinner ? 'bg-emerald-100 text-emerald-700' : 'text-slate-400 hover:bg-emerald-50 hover:text-emerald-700',
+                                )}
+                                title={isWinner ? 'NCC đã được chọn (winner)' : 'Chọn NCC thắng'}
+                              >
+                                <Check className="h-3 w-3" />
+                              </button>
+                              {!isWinner && (
+                                <button
+                                  onClick={() => setEditNccRow(s)}
+                                  className="rounded px-1 py-0.5 text-slate-500 hover:bg-slate-100"
+                                  title="Sửa thông tin NCC"
+                                >
+                                  <Pencil className="h-3 w-3" />
+                                </button>
+                              )}
+                              {canDelete ? (
+                                <button
+                                  onClick={() => { if (confirm('Xóa NCC này khỏi phiếu?')) removeNcc.mutate(s.id) }}
+                                  className="rounded px-1 py-0.5 text-red-500 hover:bg-red-50"
+                                  title="Xóa NCC"
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </button>
+                              ) : !isWinner && hasQuotes && (
+                                <span
+                                  className="rounded px-1 py-0.5 text-slate-300 cursor-not-allowed"
+                                  title="NCC đã có báo giá — xóa báo giá trước rồi mới xóa NCC"
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </span>
+                              )}
+                            </div>
+                          </td>
+                        )}
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+
+      {addNccOpen && <AddSupplierDialog evaluationId={ev.id} onClose={() => setAddNccOpen(false)} />}
+      {editNccRow && <EditSupplierDialog evaluationId={ev.id} row={editNccRow} onClose={() => setEditNccRow(null)} />}
       {quoteEdit && (
         <QuoteDialog
           evaluationId={ev.id}
-          detailId={quoteEdit.detail.id}
+          detailId={detail.id}
           supplierRowId={quoteEdit.supplier.id}
           supplierName={quoteEdit.supplier.supplierName}
-          itemName={quoteEdit.detail.noiDung}
-          khoiLuong={quoteEdit.detail.khoiLuongThiCong || quoteEdit.detail.khoiLuongNganSach}
+          itemName={detail.noiDung}
+          khoiLuong={detail.khoiLuongThiCong || detail.khoiLuongNganSach}
           existing={quoteEdit.existing}
           onClose={() => setQuoteEdit(null)}
         />