[CLAUDE] FE: Responsive cho laptop màn hình nhỏ — sidebar slim + Section/HangMucCard padding tighter + workspace 2-panel breakpoint

User Session 20 turn 11: "giao diện hiện tại chưa đáp ứng tốt cho laptop màn
hình nhỏ -> Căn chỉnh lại nhé."

Pain points trên laptop 1280-1366px viewport (fe-user content panel
1280-288=992px hoặc fe-admin workspace 2-panel content còn ~672px):
- Sidebar 288px chiếm nhiều
- PE Workspace list panel 320px = thừa
- Section padding px-5 + HangMucCard p-3 cộng gộp tốn ~16-20px mỗi cell
- Inline NCC table 7 cột bị compressed

FE-only mirror fe-admin + fe-user. Targeted fixes (no breaking change):

### 1. Sidebar slim — w-60 (240px) lg/xl giảm xuống → bump xl:w-72
- fe-admin Layout aside: `w-72` → `w-60 xl:w-72`
- fe-user Layout aside: `w-72` → `w-60 xl:w-72`
- Trên màn ≥xl (1280px+) → giữ 288px như cũ
- Trên màn <xl (laptop nhỏ) → 240px, save 48px cho content

### 2. PE Workspace 2-panel list breakpoint
- `lg:grid-cols-[320px_1fr]` → `lg:grid-cols-[260px_1fr] xl:grid-cols-[320px_1fr]`
- Trên lg (1024-1279): list 260px (đủ pick) → content +60px
- Trên xl+ (1280+): list 320px như cũ
- Save total: ~60px cho NCC table render

### 3. Section + HangMucCard padding responsive
- Section component `<section className="px-5 py-4">`
  → `px-3 py-3 sm:px-5 sm:py-4` (xs/sm: tighter 12px each side, save 16px width)
- HangMucCard header `flex items-start gap-3 ... p-3`
  → `flex flex-wrap items-start gap-2 ... p-2 sm:gap-3 sm:p-3`
  → +flex-wrap: stat "Số tiền NS" wrap xuống dòng khi container hẹp
- HangMucCard expand panel `p-3` → `p-2 sm:p-3`

Net width gain trên laptop 1366px (typical):
- Sidebar slim: +48px
- Workspace list: +60px
- Section padding: +16px
- HangMucCard padding: +8px
Total ~+132px cho NCC table area render comfortable thêm 1-2 cột

KHÔNG đụng dialog widths, schema BE, hoặc semantic breakpoints lớn.

Verify:
- npm run build × fe-admin pass
- npm run build × fe-user pass

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

fe-user/src/components/Layout.tsx

@@ -317,7 +317,7 @@ export function Layout() {
   return (
     <AccordionContext.Provider value={accordionValue}>
       <div className="flex h-screen">
-        <aside className="flex w-72 flex-col border-r border-slate-200 bg-white">
+        <aside className="flex w-60 flex-col border-r border-slate-200 bg-white xl:w-72">
           <div className="flex h-16 items-center border-b border-slate-200 px-5">
             <Link to="/dashboard" className="flex items-center gap-2.5">
               <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />

fe-user/src/components/pe/PeDetailTabs.tsx

@@ -272,8 +272,10 @@ export function PeDetailTabs({
 }
 
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  // Session 20 turn 11: padding responsive cho laptop màn nhỏ — px-3 trên xs
+  // (tiết kiệm ~16px width), bump px-5 từ sm+ trở lên.
   return (
-    <section className="px-5 py-4">
+    <section className="px-3 py-3 sm:px-5 sm:py-4">
       <h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500">{title}</h3>
       {children}
     </section>
@@ -1378,8 +1380,10 @@ function HangMucCard({
 
   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">
+      {/* Header row — hạng mục info + actions. Session 20 turn 11: flex-wrap +
+          padding responsive cho laptop nhỏ. Stat (Số tiền NS) wrap xuống dòng
+          riêng khi container hẹp. */}
+      <div className="flex flex-wrap items-start gap-2 border-b border-slate-100 p-2 sm:gap-3 sm:p-3">
         <button
           type="button"
           onClick={() => setExpanded(!expanded)}
@@ -1442,7 +1446,7 @@ function HangMucCard({
 
       {/* Expand panel — NCC tham gia + báo giá inline */}
       {expanded && (
-        <div className="p-3">
+        <div className="p-2 sm: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})

fe-user/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx

@@ -77,7 +77,7 @@ export function PurchaseEvaluationWorkspacePage() {
         </div>
       </header>
 
-      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[320px_1fr]">
+      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[260px_1fr] xl:grid-cols-[320px_1fr]">
         {/* Panel 1: List pure picker + sticky create + pencil edit hover.
             Workspace chỉ list phiếu Bản nháp (DangSoanThao) — đã gửi duyệt rồi
             không hiện ở đây (vào Danh sách / Duyệt). User 2026-05-07. */}