diff --git a/fe-admin/src/components/Layout.tsx b/fe-admin/src/components/Layout.tsx
index 98743f1..5eef65a 100644
--- a/fe-admin/src/components/Layout.tsx
+++ b/fe-admin/src/components/Layout.tsx
@@ -141,11 +141,13 @@ function MenuGroup({ node, depth }: { node: MenuNode; depth: number }) {
             : 'px-3 py-1.5 text-[13px] font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900',
         )}
       >
-        <span className="flex items-center gap-2">
-          <Icon className="h-4 w-4" />
-          {node.label}
+        {/* Plan U S23 t11 — truncate label dài + tooltip hover (mirror fe-user
+            rule §3.9). min-w-0 cần thiết cho truncate flex child. */}
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          <Icon className="h-4 w-4 shrink-0" />
+          <span className="truncate" title={node.label}>{node.label}</span>
         </span>
-        <ChevronDown className={cn('h-3.5 w-3.5 text-slate-400 transition', !open && '-rotate-90')} />
+        <ChevronDown className={cn('h-3.5 w-3.5 shrink-0 text-slate-400 transition', !open && '-rotate-90')} />
       </button>
       {open && (
         <div className={cn(
@@ -193,16 +195,17 @@ function MenuLeaf({ node, depth }: { node: MenuNode; depth: number }) {
   return (
     <NavLink
       to={path}
+      title={node.label}
       className={cn(
-        'flex items-center gap-2.5 rounded-md transition',
+        'flex min-w-0 items-center gap-2.5 rounded-md transition',
         isDeep ? 'px-3 py-1 text-[12px]' : 'px-3 py-2 text-sm font-medium',
         isActive
           ? 'bg-brand-50 text-brand-700'
           : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
       )}
     >
-      <Icon className={cn(isDeep ? 'h-3.5 w-3.5' : 'h-4 w-4')} />
-      {node.label}
+      <Icon className={cn('shrink-0', isDeep ? 'h-3.5 w-3.5' : 'h-4 w-4')} />
+      <span className="truncate">{node.label}</span>
     </NavLink>
   )
 }
diff --git a/fe-user/src/components/Layout.tsx b/fe-user/src/components/Layout.tsx
index dac18fe..1843cf1 100644
--- a/fe-user/src/components/Layout.tsx
+++ b/fe-user/src/components/Layout.tsx
@@ -180,11 +180,14 @@ function MenuGroup({ node, depth }: { node: MenuNode; depth: number }) {
           isAccordion && open && 'bg-slate-50 text-slate-900',
         )}
       >
-        <span className="flex items-center gap-2">
-          <Icon className="h-4 w-4" />
-          {effectiveLabel(node)}
+        {/* Plan U S23 t11 — truncate label dài + tooltip hover (admin Mig 27
+            có thể đặt DisplayLabel dài). min-w-0 cần thiết để truncate hoạt
+            động trong flex child. shrink-0 giữ icon + chevron không co. */}
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          <Icon className="h-4 w-4 shrink-0" />
+          <span className="truncate" title={effectiveLabel(node)}>{effectiveLabel(node)}</span>
         </span>
-        <ChevronDown className={cn('h-3.5 w-3.5 text-slate-400 transition', !open && '-rotate-90')} />
+        <ChevronDown className={cn('h-3.5 w-3.5 shrink-0 text-slate-400 transition', !open && '-rotate-90')} />
       </button>
       {open && (
         <div className={cn(
@@ -235,16 +238,17 @@ function MenuLeaf({ node, depth }: { node: MenuNode; depth: number }) {
   return (
     <NavLink
       to={path}
+      title={effectiveLabel(node)}
       className={cn(
-        'flex items-center gap-2.5 rounded-md transition',
+        'flex min-w-0 items-center gap-2.5 rounded-md transition',
         isDeep ? 'px-3 py-1 text-[12px]' : 'px-3 py-2 text-sm font-medium',
         isActive
           ? 'bg-brand-50 text-brand-700'
           : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
       )}
     >
-      <Icon className={cn(isDeep ? 'h-3.5 w-3.5' : 'h-4 w-4')} />
-      {effectiveLabel(node)}
+      <Icon className={cn('shrink-0', isDeep ? 'h-3.5 w-3.5' : 'h-4 w-4')} />
+      <span className="truncate">{effectiveLabel(node)}</span>
     </NavLink>
   )
 }
@@ -268,15 +272,16 @@ function StaticLeaf({ node }: { node: MenuNode }) {
     <NavLink
       to={path}
       end
+      title={effectiveLabel(node)}
       className={({ isActive }) =>
         cn(
-          'flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition',
+          'flex min-w-0 items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition',
           isActive ? 'bg-brand-50 text-brand-700' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
         )
       }
     >
-      <Icon className="h-4 w-4" />
-      {effectiveLabel(node)}
+      <Icon className="h-4 w-4 shrink-0" />
+      <span className="truncate">{effectiveLabel(node)}</span>
     </NavLink>
   )
 }