diff --git a/fe-admin/src/components/pipeline/PipelineTreePanel.tsx b/fe-admin/src/components/pipeline/PipelineTreePanel.tsx
index dd351b7..8f50212 100644
--- a/fe-admin/src/components/pipeline/PipelineTreePanel.tsx
+++ b/fe-admin/src/components/pipeline/PipelineTreePanel.tsx
@@ -86,9 +86,15 @@ function buildTree(rows: PeListItem[]): YearNode[] {
 export function PipelineTreePanel({
   currentStage,
   className,
+  bodyMaxHClass,
 }: {
   currentStage: PipelineStageNo
   className?: string
+  // [S168 GĐ3-D gate F-1] Host 3-panel (Panel-3 TỰ CUỘN) truyền class trần riêng cho THÂN
+  // cây (vd `lg:max-h-none` — panel giữ đúng 1 thanh cuộn; max-h mặc định 100vh−16rem là
+  // hiệu-chỉnh cho trang giấy-cuộn, vượt chỗ Panel-3 /inbox ~26px ⇒ 2 cuộn lồng nhau).
+  // Mặc định giữ nguyên — 3 host giấy-cuộn cũ không đổi hành vi.
+  bodyMaxHClass?: string
 }) {
   const { canPe, buildStages } = usePipelineStages()
   const [search, setSearch] = useState('')
@@ -212,7 +218,7 @@ export function PipelineTreePanel({
           />
         </div>
 
-        <div className="max-h-[28rem] overflow-y-auto lg:max-h-[calc(100vh-16rem)]">
+        <div className={cn('overflow-y-auto', bodyMaxHClass ?? 'max-h-[28rem] lg:max-h-[calc(100vh-16rem)]')}>
           {!canPe && (
             <p className="px-3 py-4 text-[12px] text-slate-500">
               Bạn chưa có quyền xem phiếu Duyệt NCC nên cây toàn trình chưa hiển thị được.
diff --git a/fe-admin/src/pages/contracts/ContractsListPage.tsx b/fe-admin/src/pages/contracts/ContractsListPage.tsx
index 2b87b98..0f08bda 100644
--- a/fe-admin/src/pages/contracts/ContractsListPage.tsx
+++ b/fe-admin/src/pages/contracts/ContractsListPage.tsx
@@ -14,9 +14,10 @@
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { FileText, Search, X } from 'lucide-react'
+import { FileText, Search } from 'lucide-react'
 import { ContractDetailContent } from '@/components/contracts/ContractDetailContent'
 import { WorkflowHistoryPanel } from '@/components/contracts/WorkflowHistoryPanel'
+import { PipelineTreePanel } from '@/components/pipeline/PipelineTreePanel'
 import { PhaseBadge } from '@/components/PhaseBadge'
 import { SlaTimer } from '@/components/SlaTimer'
 import { EmptyState } from '@/components/EmptyState'
@@ -240,12 +241,12 @@ export function ContractsListPage() {
 
         {/* Panel 3 — Workflow + history */}
         <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
-          {!selectedId && (
-            <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
-              <X className="mx-auto mb-2 h-5 w-5" />
-              Quy trình duyệt sẽ hiện khi chọn HĐ.
-            </div>
-          )}
+          {/* [S168 GĐ3-D — owner slot (63) chốt D] Chưa chọn HĐ ⇒ cây toàn trình (GĐ3)
+              thế chỗ ô trống; chọn HĐ thì nhường chỗ cho quy trình duyệt. Trade-off D
+              (cây rời panel khi chọn HĐ) — sub-implfe-gd3.md §1. */}
+          {/* [gate F-1/F-2] Panel-3 TỰ CUỘN ⇒ thân cây `lg:max-h-none` giữ đúng 1 thanh cuộn;
+              sticky/self-start của khuôn vô hiệu ở host display:block này — by-design. */}
+          {!selectedId && <PipelineTreePanel currentStage={3} bodyMaxHClass="max-h-[28rem] lg:max-h-none" />}
           {selectedId && detail.data && <WorkflowHistoryPanel contract={detail.data} />}
         </aside>
       </div>
diff --git a/fe-user/src/components/pipeline/PipelineTreePanel.tsx b/fe-user/src/components/pipeline/PipelineTreePanel.tsx
index dd351b7..8f50212 100644
--- a/fe-user/src/components/pipeline/PipelineTreePanel.tsx
+++ b/fe-user/src/components/pipeline/PipelineTreePanel.tsx
@@ -86,9 +86,15 @@ function buildTree(rows: PeListItem[]): YearNode[] {
 export function PipelineTreePanel({
   currentStage,
   className,
+  bodyMaxHClass,
 }: {
   currentStage: PipelineStageNo
   className?: string
+  // [S168 GĐ3-D gate F-1] Host 3-panel (Panel-3 TỰ CUỘN) truyền class trần riêng cho THÂN
+  // cây (vd `lg:max-h-none` — panel giữ đúng 1 thanh cuộn; max-h mặc định 100vh−16rem là
+  // hiệu-chỉnh cho trang giấy-cuộn, vượt chỗ Panel-3 /inbox ~26px ⇒ 2 cuộn lồng nhau).
+  // Mặc định giữ nguyên — 3 host giấy-cuộn cũ không đổi hành vi.
+  bodyMaxHClass?: string
 }) {
   const { canPe, buildStages } = usePipelineStages()
   const [search, setSearch] = useState('')
@@ -212,7 +218,7 @@ export function PipelineTreePanel({
           />
         </div>
 
-        <div className="max-h-[28rem] overflow-y-auto lg:max-h-[calc(100vh-16rem)]">
+        <div className={cn('overflow-y-auto', bodyMaxHClass ?? 'max-h-[28rem] lg:max-h-[calc(100vh-16rem)]')}>
           {!canPe && (
             <p className="px-3 py-4 text-[12px] text-slate-500">
               Bạn chưa có quyền xem phiếu Duyệt NCC nên cây toàn trình chưa hiển thị được.
diff --git a/fe-user/src/pages/InboxPage.tsx b/fe-user/src/pages/InboxPage.tsx
index 6d747db..a675c7b 100644
--- a/fe-user/src/pages/InboxPage.tsx
+++ b/fe-user/src/pages/InboxPage.tsx
@@ -7,9 +7,10 @@
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { Inbox, AlertTriangle, Clock, FileText, Search, X, ClipboardList } from 'lucide-react'
+import { Inbox, AlertTriangle, Clock, FileText, Search, ClipboardList } from 'lucide-react'
 import { ContractDetailContent } from '@/components/contracts/ContractDetailContent'
 import { WorkflowHistoryPanel } from '@/components/contracts/WorkflowHistoryPanel'
+import { PipelineTreePanel } from '@/components/pipeline/PipelineTreePanel'
 import { PhaseBadge } from '@/components/PhaseBadge'
 import { SlaTimer } from '@/components/SlaTimer'
 import { EmptyState } from '@/components/EmptyState'
@@ -338,12 +339,13 @@ export function InboxPage() {
 
         {/* Panel 3 — Workflow + history */}
         <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
-          {!selectedId && (
-            <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
-              <X className="mx-auto mb-2 h-5 w-5" />
-              Quy trình duyệt sẽ hiện khi chọn HĐ.
-            </div>
-          )}
+          {/* [S168 GĐ3-D — owner slot (63) chốt D] Chưa chọn HĐ ⇒ cây toàn trình (GĐ3)
+              thế chỗ ô trống; chọn HĐ thì nhường chỗ cho quy trình duyệt. Trade-off D
+              (cây rời panel khi chọn HĐ) — sub-implfe-gd3.md §1. */}
+          {/* [gate F-1/F-2] Panel-3 TỰ CUỘN ⇒ thân cây `lg:max-h-none` giữ đúng 1 thanh cuộn
+              (chính /inbox là trang THIẾU ~26px vì dải stats + banner vai trò); sticky/self-start
+              của khuôn vô hiệu ở host display:block này — by-design. */}
+          {!selectedId && <PipelineTreePanel currentStage={3} bodyMaxHClass="max-h-[28rem] lg:max-h-none" />}
           {selectedId && detail.data && <WorkflowHistoryPanel contract={detail.data} />}
         </aside>
       </div>
diff --git a/fe-user/src/pages/contracts/MyContractsPage.tsx b/fe-user/src/pages/contracts/MyContractsPage.tsx
index a5ca138..afbc92c 100644
--- a/fe-user/src/pages/contracts/MyContractsPage.tsx
+++ b/fe-user/src/pages/contracts/MyContractsPage.tsx
@@ -7,9 +7,10 @@
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { FileText, Plus, Search, X } from 'lucide-react'
+import { FileText, Plus, Search } from 'lucide-react'
 import { ContractDetailContent } from '@/components/contracts/ContractDetailContent'
 import { WorkflowHistoryPanel } from '@/components/contracts/WorkflowHistoryPanel'
+import { PipelineTreePanel } from '@/components/pipeline/PipelineTreePanel'
 import { PhaseBadge } from '@/components/PhaseBadge'
 import { SlaTimer } from '@/components/SlaTimer'
 import { EmptyState } from '@/components/EmptyState'
@@ -216,12 +217,12 @@ export function MyContractsPage() {
 
         {/* Panel 3 — Workflow + history */}
         <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
-          {!selectedId && (
-            <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
-              <X className="mx-auto mb-2 h-5 w-5" />
-              Quy trình duyệt sẽ hiện khi chọn HĐ.
-            </div>
-          )}
+          {/* [S168 GĐ3-D — owner slot (63) chốt D] Chưa chọn HĐ ⇒ cây toàn trình (GĐ3)
+              thế chỗ ô trống; chọn HĐ thì nhường chỗ cho quy trình duyệt. Trade-off D
+              (cây rời panel khi chọn HĐ) — sub-implfe-gd3.md §1. */}
+          {/* [gate F-1/F-2] Panel-3 TỰ CUỘN ⇒ thân cây `lg:max-h-none` giữ đúng 1 thanh cuộn;
+              sticky/self-start của khuôn vô hiệu ở host display:block này — by-design. */}
+          {!selectedId && <PipelineTreePanel currentStage={3} bodyMaxHClass="max-h-[28rem] lg:max-h-none" />}
           {selectedId && detail.data && <WorkflowHistoryPanel contract={detail.data} />}
         </aside>
       </div>