diff --git a/fe-admin/src/components/Layout.tsx b/fe-admin/src/components/Layout.tsx
index c92f0a2..98743f1 100644
--- a/fe-admin/src/components/Layout.tsx
+++ b/fe-admin/src/components/Layout.tsx
@@ -212,7 +212,7 @@ export function Layout() {
 
   return (
     <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" />
diff --git a/fe-admin/src/components/pe/PeDetailTabs.tsx b/fe-admin/src/components/pe/PeDetailTabs.tsx
index 3da4ff6..bad9a6b 100644
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/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>
@@ -1380,8 +1382,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)}
@@ -1444,7 +1448,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})
diff --git a/fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx b/fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
index 6e0a86e..edb1d14 100644
--- a/fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
+++ b/fe-admin/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. */}
diff --git a/fe-user/src/components/Layout.tsx b/fe-user/src/components/Layout.tsx
index 69311f3..dac18fe 100644
--- a/fe-user/src/components/Layout.tsx
+++ b/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" />
diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index c900529..ad19274 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/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})
diff --git a/fe-user/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx b/fe-user/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
index 6e0a86e..edb1d14 100644
--- a/fe-user/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
+++ b/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. */}