From 21d1f4ec43eaae3c2fe2e27dd9754342439ad615 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Fri, 19 Jun 2026 11:28:18 +0700
Subject: [PATCH] [CLAUDE] FE: PE ngan sach Block A -> bang luoi <table> vien o
 giong Excel (anh phan hoi)

Anh: "giao dien van chua chia cot dung, muon giong file Excel". Block A dang dung
flex + spacing (khong co vien doc chia cot) -> chuyen sang <table border-collapse>
vien o day du: header [Khoan muc | Du an | PRO | CCM] + 5 hang (full / ban hanh /
hieu chinh / ghi chu PRO / ghi chu CCM). BudgetCell xep doc (input full o + nut Luu
duoi) cho vua cot. BudgetNoteRow -> BudgetNoteCell (td colSpan=3). Mirror
fe-user/fe-admin identical. FE-only, build 2 app PASS.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 fe-admin/src/components/pe/PeDetailTabs.tsx | 287 ++++++++++----------
 fe-user/src/components/pe/PeDetailTabs.tsx  | 287 ++++++++++----------
 2 files changed, 300 insertions(+), 274 deletions(-)

diff --git a/fe-admin/src/components/pe/PeDetailTabs.tsx b/fe-admin/src/components/pe/PeDetailTabs.tsx
index 949d679..1384dc5 100644
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/src/components/pe/PeDetailTabs.tsx
@@ -1084,36 +1084,40 @@ function BudgetCell({ value, editable, allowNegative = false, saving, onSave }:
   }
   const dirty = parse() !== value
   return (
-    <div className="flex items-center justify-end gap-1">
-      {allowNegative && (
-        <button
-          type="button"
-          onClick={() => setNeg(v => !v)}
-          className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
-            neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
-          title="Đảo dấu âm/dương"
-        >
-          {neg ? '−' : '+'}
-        </button>
-      )}
-      <Input
-        type="text"
-        inputMode="numeric"
-        value={text}
-        onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
-        placeholder="0"
-        className="h-7 min-w-0 px-1.5 text-right font-mono text-[12px]"
-      />
-      <Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-7 shrink-0 px-2 text-[11px]">
-        {saving ? '…' : 'Lưu'}
-      </Button>
+    <div className="space-y-1">
+      <div className="flex items-center gap-1">
+        {allowNegative && (
+          <button
+            type="button"
+            onClick={() => setNeg(v => !v)}
+            className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
+              neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
+            title="Đảo dấu âm/dương"
+          >
+            {neg ? '−' : '+'}
+          </button>
+        )}
+        <Input
+          type="text"
+          inputMode="numeric"
+          value={text}
+          onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
+          placeholder="0"
+          className="h-7 min-w-0 flex-1 px-1.5 text-right font-mono text-[12px]"
+        />
+      </div>
+      <div className="flex justify-end">
+        <Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-6 px-2 text-[10px]">
+          {saving ? '…' : 'Lưu'}
+        </Button>
+      </div>
     </div>
   )
 }
 
-// [S76] Dòng ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
-function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, onSave }: {
-  label: string
+// [S76] Ô ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
+// Đặt trong <td colSpan> của bảng ngân sách (không bọc row riêng).
+function BudgetNoteCell({ editable, value, setValue, savedValue, saving, onSave }: {
   editable: boolean
   value: string
   setValue: (v: string) => void
@@ -1121,30 +1125,26 @@ function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, o
   saving: boolean
   onSave: () => void
 }) {
+  if (!editable) {
+    return (
+      <div className="whitespace-pre-wrap px-2 py-1.5 text-[12px] text-slate-600">
+        {savedValue || <span className="text-slate-400">—</span>}
+      </div>
+    )
+  }
   return (
-    <div className="flex items-start gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
-      <div className="min-w-0 flex-1 text-slate-700">{label}</div>
-      <div className="w-72 shrink-0">
-        {editable ? (
-          <div className="space-y-1">
-            <textarea
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              placeholder="Ghi chú…"
-              rows={2}
-              className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
-            />
-            <div className="flex justify-end">
-              <Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
-                {saving ? '…' : 'Lưu ghi chú'}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div className="whitespace-pre-wrap text-right text-[12px] text-slate-600">
-            {savedValue || <span className="text-slate-400">—</span>}
-          </div>
-        )}
+    <div className="space-y-1 px-2 py-1.5">
+      <textarea
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        placeholder="Ghi chú…"
+        rows={2}
+        className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
+      />
+      <div className="flex justify-end">
+        <Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
+          {saving ? '…' : 'Lưu ghi chú'}
+        </Button>
       </div>
     </div>
   )
@@ -1252,98 +1252,111 @@ function PeBudgetSummaryTable({ ev, readOnly }: { ev: PeDetailBundle; readOnly:
         </div>
       )}
 
-      {/* ===== Block A — NGÂN SÁCH gói thầu: MA TRẬN 3 cột (DỰ ÁN | PRO | CCM) =====
-          [S76 anh Kiệt FDC] Mỗi phòng nhập+điều chỉnh cột của CHÍNH mình (role-gate):
-          PRO→cột PRO (canEditPro) · CCM→cột CCM (canEditCcm) · DỰ ÁN hiển thị-only
-          (chưa wire BE — sau có người dự án nhập). Full mỗi cột = ban hành + hiệu chỉnh. */}
+      {/* ===== Block A — NGÂN SÁCH gói thầu: BẢNG LƯỚI 3 cột (DỰ ÁN | PRO | CCM) =====
+          [S76 anh Kiệt FDC] <table> viền ô đầy đủ giống file Excel. Mỗi phòng nhập+điều
+          chỉnh cột CHÍNH mình (role-gate): PRO→cột PRO (canEditPro) · CCM→cột CCM
+          (canEditCcm) · DỰ ÁN hiển-thị-only (—, sau có người dự án nhập). Full mỗi cột
+          = ban hành + hiệu chỉnh. */}
       <BudgetBlockHeader>A. Ngân sách (gói thầu / gói vật tư)</BudgetBlockHeader>
 
-      {/* Header 3 cột */}
-      <div className="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-        <div className="min-w-0 flex-1" />
-        <div className="w-36 shrink-0 text-center">Dự án</div>
-        <div className="w-36 shrink-0 text-center">PRO</div>
-        <div className="w-36 shrink-0 text-center">CCM</div>
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse text-[13px]">
+          <thead>
+            <tr className="bg-slate-100 text-[11px] font-semibold uppercase tracking-wide text-slate-600">
+              <th className="border border-slate-300 px-3 py-1.5 text-left">Khoản mục</th>
+              <th className="w-20 border border-slate-300 px-2 py-1.5 text-center">Dự án</th>
+              <th className="w-40 border border-slate-300 px-2 py-1.5 text-center">PRO</th>
+              <th className="w-40 border border-slate-300 px-2 py-1.5 text-center">CCM</th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* Ngân sách full (= ban hành + hiệu chỉnh) mỗi cột */}
+            <tr className="bg-[#1F7DC1]/10 font-semibold">
+              <td className="border border-slate-300 px-3 py-2 text-slate-800">Ngân sách (full gói thầu / gói vật tư)</td>
+              <td className="border border-slate-300 px-2 py-2 text-right text-slate-300">—</td>
+              <td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
+                {proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
+              </td>
+              <td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
+                {ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
+              </td>
+            </tr>
+            {/* Ban hành lần đầu */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách Ban hành lần đầu</td>
+              <td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.proInitialAmount}
+                  editable={bs.canEditPro}
+                  saving={proMut.isPending || peFetching}
+                  onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
+                />
+              </td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.initialAmount}
+                  editable={bs.canEditCcm}
+                  saving={ccmMut.isPending || peFetching}
+                  onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
+                />
+              </td>
+            </tr>
+            {/* V0 / hiệu chỉnh tăng giảm (cho phép ÂM) */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</td>
+              <td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.proAdjustmentAmount}
+                  editable={bs.canEditPro}
+                  allowNegative
+                  saving={proMut.isPending || peFetching}
+                  onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
+                />
+              </td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.adjustmentAmount}
+                  editable={bs.canEditCcm}
+                  allowNegative
+                  saving={ccmMut.isPending || peFetching}
+                  onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
+                />
+              </td>
+            </tr>
+            {/* Ghi chú từ PRO (span 3 cột giá trị) */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ PRO</td>
+              <td className="border border-slate-300" colSpan={3}>
+                <BudgetNoteCell
+                  editable={bs.canEditPro}
+                  value={proNoteText}
+                  setValue={setProNoteText}
+                  savedValue={bs.proNote}
+                  saving={proMut.isPending || peFetching}
+                  onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
+                />
+              </td>
+            </tr>
+            {/* Ghi chú từ CCM (span 3 cột giá trị) */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ CCM</td>
+              <td className="border border-slate-300" colSpan={3}>
+                <BudgetNoteCell
+                  editable={bs.canEditCcm}
+                  value={ccmNoteText}
+                  setValue={setCcmNoteText}
+                  savedValue={bs.ccmNote}
+                  saving={ccmMut.isPending || peFetching}
+                  onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
 
-      {/* Dòng 1 — Ngân sách (full gói thầu) per cột = ban hành + hiệu chỉnh — brand-soft */}
-      <div className="flex items-center gap-2 border-b border-slate-100 bg-[#1F7DC1]/10 px-3 py-2 text-[13px]">
-        <div className="min-w-0 flex-1 font-semibold text-slate-800">Ngân sách (full gói thầu / gói vật tư)</div>
-        <div className="w-36 shrink-0 text-right text-slate-300">—</div>
-        <div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
-          {proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
-        </div>
-        <div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
-          {ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
-        </div>
-      </div>
-
-      {/* Dòng 2 — Ban hành lần đầu: Dự án (—) | PRO (canEditPro) | CCM (canEditCcm) */}
-      <div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
-        <div className="min-w-0 flex-1 text-slate-700">Ngân sách Ban hành lần đầu</div>
-        <div className="w-36 shrink-0 text-right text-slate-300">—</div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.proInitialAmount}
-            editable={bs.canEditPro}
-            saving={proMut.isPending || peFetching}
-            onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
-          />
-        </div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.initialAmount}
-            editable={bs.canEditCcm}
-            saving={ccmMut.isPending || peFetching}
-            onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
-          />
-        </div>
-      </div>
-
-      {/* Dòng 3 — V0 / hiệu chỉnh tăng giảm (cho phép ÂM): Dự án (—) | PRO | CCM */}
-      <div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
-        <div className="min-w-0 flex-1 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</div>
-        <div className="w-36 shrink-0 text-right text-slate-300">—</div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.proAdjustmentAmount}
-            editable={bs.canEditPro}
-            allowNegative
-            saving={proMut.isPending || peFetching}
-            onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
-          />
-        </div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.adjustmentAmount}
-            editable={bs.canEditCcm}
-            allowNegative
-            saving={ccmMut.isPending || peFetching}
-            onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
-          />
-        </div>
-      </div>
-
-      {/* Ghi chú từ PRO + từ CCM (cuối block A, đúng thứ tự Excel anh Kiệt) */}
-      <BudgetNoteRow
-        label="Ghi chú từ PRO"
-        editable={bs.canEditPro}
-        value={proNoteText}
-        setValue={setProNoteText}
-        savedValue={bs.proNote}
-        saving={proMut.isPending || peFetching}
-        onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
-      />
-      <BudgetNoteRow
-        label="Ghi chú từ CCM"
-        editable={bs.canEditCcm}
-        value={ccmNoteText}
-        setValue={setCcmNoteText}
-        savedValue={bs.ccmNote}
-        saving={ccmMut.isPending || peFetching}
-        onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
-      />
-
       {/* ===== Block B — THỰC HIỆN ===== */}
       <BudgetBlockHeader>B. Thực hiện</BudgetBlockHeader>
 
diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index 949d679..1384dc5 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@@ -1084,36 +1084,40 @@ function BudgetCell({ value, editable, allowNegative = false, saving, onSave }:
   }
   const dirty = parse() !== value
   return (
-    <div className="flex items-center justify-end gap-1">
-      {allowNegative && (
-        <button
-          type="button"
-          onClick={() => setNeg(v => !v)}
-          className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
-            neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
-          title="Đảo dấu âm/dương"
-        >
-          {neg ? '−' : '+'}
-        </button>
-      )}
-      <Input
-        type="text"
-        inputMode="numeric"
-        value={text}
-        onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
-        placeholder="0"
-        className="h-7 min-w-0 px-1.5 text-right font-mono text-[12px]"
-      />
-      <Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-7 shrink-0 px-2 text-[11px]">
-        {saving ? '…' : 'Lưu'}
-      </Button>
+    <div className="space-y-1">
+      <div className="flex items-center gap-1">
+        {allowNegative && (
+          <button
+            type="button"
+            onClick={() => setNeg(v => !v)}
+            className={cn('h-7 w-7 shrink-0 rounded border text-[11px] font-bold',
+              neg ? 'border-red-300 bg-red-50 text-red-600' : 'border-slate-300 text-slate-400')}
+            title="Đảo dấu âm/dương"
+          >
+            {neg ? '−' : '+'}
+          </button>
+        )}
+        <Input
+          type="text"
+          inputMode="numeric"
+          value={text}
+          onChange={e => setText(e.target.value.replace(/[^\d.]/g, ''))}
+          placeholder="0"
+          className="h-7 min-w-0 flex-1 px-1.5 text-right font-mono text-[12px]"
+        />
+      </div>
+      <div className="flex justify-end">
+        <Button onClick={() => onSave(parse())} disabled={!dirty || saving} className="h-6 px-2 text-[10px]">
+          {saving ? '…' : 'Lưu'}
+        </Button>
+      </div>
     </div>
   )
 }
 
-// [S76] Dòng ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
-function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, onSave }: {
-  label: string
+// [S76] Ô ghi chú phòng (Ghi chú từ PRO / từ CCM) — Textarea editable hoặc text display.
+// Đặt trong <td colSpan> của bảng ngân sách (không bọc row riêng).
+function BudgetNoteCell({ editable, value, setValue, savedValue, saving, onSave }: {
   editable: boolean
   value: string
   setValue: (v: string) => void
@@ -1121,30 +1125,26 @@ function BudgetNoteRow({ label, editable, value, setValue, savedValue, saving, o
   saving: boolean
   onSave: () => void
 }) {
+  if (!editable) {
+    return (
+      <div className="whitespace-pre-wrap px-2 py-1.5 text-[12px] text-slate-600">
+        {savedValue || <span className="text-slate-400">—</span>}
+      </div>
+    )
+  }
   return (
-    <div className="flex items-start gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
-      <div className="min-w-0 flex-1 text-slate-700">{label}</div>
-      <div className="w-72 shrink-0">
-        {editable ? (
-          <div className="space-y-1">
-            <textarea
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              placeholder="Ghi chú…"
-              rows={2}
-              className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
-            />
-            <div className="flex justify-end">
-              <Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
-                {saving ? '…' : 'Lưu ghi chú'}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div className="whitespace-pre-wrap text-right text-[12px] text-slate-600">
-            {savedValue || <span className="text-slate-400">—</span>}
-          </div>
-        )}
+    <div className="space-y-1 px-2 py-1.5">
+      <textarea
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        placeholder="Ghi chú…"
+        rows={2}
+        className="w-full rounded border border-slate-300 px-2 py-1 text-[12px]"
+      />
+      <div className="flex justify-end">
+        <Button onClick={onSave} disabled={value === (savedValue ?? '') || saving} className="h-6 px-2 text-[11px]">
+          {saving ? '…' : 'Lưu ghi chú'}
+        </Button>
       </div>
     </div>
   )
@@ -1252,98 +1252,111 @@ function PeBudgetSummaryTable({ ev, readOnly }: { ev: PeDetailBundle; readOnly:
         </div>
       )}
 
-      {/* ===== Block A — NGÂN SÁCH gói thầu: MA TRẬN 3 cột (DỰ ÁN | PRO | CCM) =====
-          [S76 anh Kiệt FDC] Mỗi phòng nhập+điều chỉnh cột của CHÍNH mình (role-gate):
-          PRO→cột PRO (canEditPro) · CCM→cột CCM (canEditCcm) · DỰ ÁN hiển thị-only
-          (chưa wire BE — sau có người dự án nhập). Full mỗi cột = ban hành + hiệu chỉnh. */}
+      {/* ===== Block A — NGÂN SÁCH gói thầu: BẢNG LƯỚI 3 cột (DỰ ÁN | PRO | CCM) =====
+          [S76 anh Kiệt FDC] <table> viền ô đầy đủ giống file Excel. Mỗi phòng nhập+điều
+          chỉnh cột CHÍNH mình (role-gate): PRO→cột PRO (canEditPro) · CCM→cột CCM
+          (canEditCcm) · DỰ ÁN hiển-thị-only (—, sau có người dự án nhập). Full mỗi cột
+          = ban hành + hiệu chỉnh. */}
       <BudgetBlockHeader>A. Ngân sách (gói thầu / gói vật tư)</BudgetBlockHeader>
 
-      {/* Header 3 cột */}
-      <div className="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-        <div className="min-w-0 flex-1" />
-        <div className="w-36 shrink-0 text-center">Dự án</div>
-        <div className="w-36 shrink-0 text-center">PRO</div>
-        <div className="w-36 shrink-0 text-center">CCM</div>
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse text-[13px]">
+          <thead>
+            <tr className="bg-slate-100 text-[11px] font-semibold uppercase tracking-wide text-slate-600">
+              <th className="border border-slate-300 px-3 py-1.5 text-left">Khoản mục</th>
+              <th className="w-20 border border-slate-300 px-2 py-1.5 text-center">Dự án</th>
+              <th className="w-40 border border-slate-300 px-2 py-1.5 text-center">PRO</th>
+              <th className="w-40 border border-slate-300 px-2 py-1.5 text-center">CCM</th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* Ngân sách full (= ban hành + hiệu chỉnh) mỗi cột */}
+            <tr className="bg-[#1F7DC1]/10 font-semibold">
+              <td className="border border-slate-300 px-3 py-2 text-slate-800">Ngân sách (full gói thầu / gói vật tư)</td>
+              <td className="border border-slate-300 px-2 py-2 text-right text-slate-300">—</td>
+              <td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
+                {proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
+              </td>
+              <td className="border border-slate-300 px-2 py-2 text-right font-mono font-bold tabular-nums text-slate-900">
+                {ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
+              </td>
+            </tr>
+            {/* Ban hành lần đầu */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách Ban hành lần đầu</td>
+              <td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.proInitialAmount}
+                  editable={bs.canEditPro}
+                  saving={proMut.isPending || peFetching}
+                  onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
+                />
+              </td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.initialAmount}
+                  editable={bs.canEditCcm}
+                  saving={ccmMut.isPending || peFetching}
+                  onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
+                />
+              </td>
+            </tr>
+            {/* V0 / hiệu chỉnh tăng giảm (cho phép ÂM) */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</td>
+              <td className="border border-slate-300 px-2 py-1.5 text-right text-slate-300">—</td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.proAdjustmentAmount}
+                  editable={bs.canEditPro}
+                  allowNegative
+                  saving={proMut.isPending || peFetching}
+                  onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
+                />
+              </td>
+              <td className="border border-slate-300 px-1.5 py-1.5 text-right align-top">
+                <BudgetCell
+                  value={bs.adjustmentAmount}
+                  editable={bs.canEditCcm}
+                  allowNegative
+                  saving={ccmMut.isPending || peFetching}
+                  onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
+                />
+              </td>
+            </tr>
+            {/* Ghi chú từ PRO (span 3 cột giá trị) */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ PRO</td>
+              <td className="border border-slate-300" colSpan={3}>
+                <BudgetNoteCell
+                  editable={bs.canEditPro}
+                  value={proNoteText}
+                  setValue={setProNoteText}
+                  savedValue={bs.proNote}
+                  saving={proMut.isPending || peFetching}
+                  onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
+                />
+              </td>
+            </tr>
+            {/* Ghi chú từ CCM (span 3 cột giá trị) */}
+            <tr>
+              <td className="border border-slate-300 px-3 py-1.5 align-top text-slate-700">Ghi chú từ CCM</td>
+              <td className="border border-slate-300" colSpan={3}>
+                <BudgetNoteCell
+                  editable={bs.canEditCcm}
+                  value={ccmNoteText}
+                  setValue={setCcmNoteText}
+                  savedValue={bs.ccmNote}
+                  saving={ccmMut.isPending || peFetching}
+                  onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
 
-      {/* Dòng 1 — Ngân sách (full gói thầu) per cột = ban hành + hiệu chỉnh — brand-soft */}
-      <div className="flex items-center gap-2 border-b border-slate-100 bg-[#1F7DC1]/10 px-3 py-2 text-[13px]">
-        <div className="min-w-0 flex-1 font-semibold text-slate-800">Ngân sách (full gói thầu / gói vật tư)</div>
-        <div className="w-36 shrink-0 text-right text-slate-300">—</div>
-        <div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
-          {proHasData ? fmtVnd(proFull) : <span className="text-slate-300">—</span>}
-        </div>
-        <div className="w-36 shrink-0 text-right font-mono font-bold tabular-nums text-slate-900">
-          {ccmHasData ? fmtVnd(ccmFull) : <span className="text-slate-300">—</span>}
-        </div>
-      </div>
-
-      {/* Dòng 2 — Ban hành lần đầu: Dự án (—) | PRO (canEditPro) | CCM (canEditCcm) */}
-      <div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
-        <div className="min-w-0 flex-1 text-slate-700">Ngân sách Ban hành lần đầu</div>
-        <div className="w-36 shrink-0 text-right text-slate-300">—</div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.proInitialAmount}
-            editable={bs.canEditPro}
-            saving={proMut.isPending || peFetching}
-            onSave={v => proMut.mutate({ proInitialAmount: v, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: bs.proNote })}
-          />
-        </div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.initialAmount}
-            editable={bs.canEditCcm}
-            saving={ccmMut.isPending || peFetching}
-            onSave={v => ccmMut.mutate({ initialAmount: v, adjustmentAmount: bs.adjustmentAmount, ccmNote: bs.ccmNote })}
-          />
-        </div>
-      </div>
-
-      {/* Dòng 3 — V0 / hiệu chỉnh tăng giảm (cho phép ÂM): Dự án (—) | PRO | CCM */}
-      <div className="flex items-center gap-2 border-b border-slate-100 px-3 py-1.5 text-[13px]">
-        <div className="min-w-0 flex-1 text-slate-700">Ngân sách V0 / hiệu chỉnh tăng giảm</div>
-        <div className="w-36 shrink-0 text-right text-slate-300">—</div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.proAdjustmentAmount}
-            editable={bs.canEditPro}
-            allowNegative
-            saving={proMut.isPending || peFetching}
-            onSave={v => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: v, proNote: bs.proNote })}
-          />
-        </div>
-        <div className="w-36 shrink-0">
-          <BudgetCell
-            value={bs.adjustmentAmount}
-            editable={bs.canEditCcm}
-            allowNegative
-            saving={ccmMut.isPending || peFetching}
-            onSave={v => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: v, ccmNote: bs.ccmNote })}
-          />
-        </div>
-      </div>
-
-      {/* Ghi chú từ PRO + từ CCM (cuối block A, đúng thứ tự Excel anh Kiệt) */}
-      <BudgetNoteRow
-        label="Ghi chú từ PRO"
-        editable={bs.canEditPro}
-        value={proNoteText}
-        setValue={setProNoteText}
-        savedValue={bs.proNote}
-        saving={proMut.isPending || peFetching}
-        onSave={() => proMut.mutate({ proInitialAmount: bs.proInitialAmount, proAdjustmentAmount: bs.proAdjustmentAmount, proNote: proNoteText || null })}
-      />
-      <BudgetNoteRow
-        label="Ghi chú từ CCM"
-        editable={bs.canEditCcm}
-        value={ccmNoteText}
-        setValue={setCcmNoteText}
-        savedValue={bs.ccmNote}
-        saving={ccmMut.isPending || peFetching}
-        onSave={() => ccmMut.mutate({ initialAmount: bs.initialAmount, adjustmentAmount: bs.adjustmentAmount, ccmNote: ccmNoteText || null })}
-      />
-
       {/* ===== Block B — THỰC HIỆN ===== */}
       <BudgetBlockHeader>B. Thực hiện</BudgetBlockHeader>