diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor
index 80f69f63..f31349aa 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor
@@ -80,10 +80,13 @@
 
     @* ═══ MAIN AREA / VÙNG NỘI DUNG ═══ *@
     <main class="mkt-main">
-        @* Mobile toggle button — visible only on ≤768px *@
-        <button class="mkt-mobile-toggle" @onclick="ToggleSidebar" style="position:fixed;top:12px;left:12px;z-index:998;">
-            <i data-lucide="menu"></i>
-        </button>
+        @* Mobile-only header bar — sits in doc flow above page content *@
+        <div class="mkt-mobile-bar">
+            <button class="mkt-mobile-toggle" @onclick="ToggleSidebar">
+                <i data-lucide="menu"></i>
+            </button>
+            <span class="mkt-mobile-bar__title">tMARKETING</span>
+        </div>
         @Body
     </main>
 </div>
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor
index 5e757e38..ed0ef754 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/AiChatbot.razor
@@ -123,7 +123,7 @@
     </div>
 
     @* ═══ RIGHT: Test Chat ═══ *@
-    <div style="width:280px;background:var(--mkt-bg-card);border-left:1px solid var(--mkt-border);display:flex;flex-direction:column;">
+    <div class="mkt-aibot-test-chat" style="width:280px;background:var(--mkt-bg-card);border-left:1px solid var(--mkt-border);display:flex;flex-direction:column;">
         <div style="padding:16px;border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;gap:8px;">
             <i data-lucide="message-square" style="width:16px;height:16px;color:var(--mkt-yellow-primary);"></i>
             <span style="font-size:13px;font-weight:700;color:var(--mkt-text-primary);letter-spacing:0.5px;">TEST CHAT</span>
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor
index 0a158653..d35075e6 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/ChatbotAutomation.razor
@@ -61,7 +61,7 @@
         </div>
 
         @* Flow canvas *@
-        <div style="flex:1;display:flex;align-items:center;justify-content:center;gap:0;padding:40px;">
+        <div class="mkt-flow-canvas-nodes" style="flex:1;display:flex;align-items:center;justify-content:center;gap:0;padding:40px;">
             @* Trigger Node *@
             <div style="width:280px;padding:16px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
                 <div style="display:flex;align-items:center;gap:8px;">
@@ -73,7 +73,7 @@
             </div>
 
             @* Connector *@
-            <div style="width:40px;height:2px;background:var(--mkt-border);"></div>
+            <div class="mkt-flow-connector" style="width:40px;height:2px;background:var(--mkt-border);"></div>
 
             @* Action Node *@
             <div style="width:280px;padding:16px;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
@@ -86,7 +86,7 @@
             </div>
 
             @* Connector *@
-            <div style="width:40px;height:2px;background:var(--mkt-border);"></div>
+            <div class="mkt-flow-connector" style="width:40px;height:2px;background:var(--mkt-border);"></div>
 
             @* Condition Node *@
             <div style="width:280px;padding:16px;background:rgba(250,204,21,0.08);border:1px solid rgba(250,204,21,0.2);border-radius:10px;display:flex;flex-direction:column;gap:8px;">
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/CustomerCrm.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/CustomerCrm.razor
index 90ab85b1..45f36885 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/CustomerCrm.razor
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Marketing/CustomerCrm.razor
@@ -132,7 +132,7 @@
     </div>
 
     @* ── Bottom Actions + Pagination ── *@
-    <div style="display:flex;justify-content:space-between;align-items:center;">
+    <div class="mkt-crm-actions" style="display:flex;justify-content:space-between;align-items:center;">
         <div style="display:flex;gap:8px;">
             <button class="mkt-btn-ghost">
                 <i data-lucide="mail"></i>
diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css
index bb6f0e4d..af5382db 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/marketing.css
@@ -600,6 +600,23 @@
     flex-shrink: 0;
 }
 
+/* ── Mobile bar — hidden on desktop ── */
+.mkt-mobile-bar {
+    display: none;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    background: var(--mkt-bg-card);
+    border-bottom: 1px solid var(--mkt-border);
+}
+
+.mkt-mobile-bar__title {
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: var(--mkt-yellow-primary);
+}
+
 @media (max-width: 768px) {
 
     /* ── Sidebar hide/show ── */
@@ -628,18 +645,28 @@
         display: flex;
     }
 
-    /* ── Topbar ── */
+    .mkt-mobile-bar {
+        display: flex;
+    }
+
+    /* ── Topbar — integrate hamburger ── */
     .mkt-topbar {
         padding: 12px 16px;
         gap: 8px;
     }
 
+    .mkt-topbar__left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
     .mkt-topbar__title {
-        font-size: 16px;
+        font-size: 14px;
     }
 
     .mkt-topbar__subtitle {
-        font-size: 11px;
+        font-size: 10px;
     }
 
     .mkt-topbar__right {
@@ -647,6 +674,15 @@
         gap: 6px;
     }
 
+    .mkt-topbar__right .mkt-search {
+        display: none;
+    }
+
+    .mkt-topbar__right .mkt-btn-ghost span,
+    .mkt-topbar__right .mkt-btn-primary span {
+        display: none;
+    }
+
     /* ── Content area ── */
     .mkt-content {
         padding: 0 12px 16px;
@@ -831,4 +867,45 @@
         font-size: 11px;
         padding: 6px 10px;
     }
+
+    /* ═══ CHATBOT CANVAS — stack nodes vertically ═══ */
+    .mkt-flow-canvas-nodes {
+        flex-direction: column !important;
+        align-items: stretch !important;
+        justify-content: flex-start !important;
+        padding: 20px 16px !important;
+        gap: 0 !important;
+    }
+
+    .mkt-flow-canvas-nodes>div[style*="width:280px"] {
+        width: 100% !important;
+    }
+
+    .mkt-flow-connector {
+        width: 2px !important;
+        height: 24px !important;
+        margin: 0 auto;
+    }
+
+    /* ═══ CRM — bottom action bar wraps ═══ */
+    .mkt-crm-actions {
+        flex-direction: column !important;
+        gap: 10px !important;
+    }
+
+    .mkt-crm-actions>div {
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+
+    .mkt-crm-actions .mkt-btn-ghost,
+    .mkt-crm-actions .mkt-btn-primary {
+        font-size: 11px;
+        padding: 6px 10px;
+    }
+
+    /* ═══ AI CHATBOT — hide test chat panel on small mobile ═══ */
+    .mkt-aibot-test-chat {
+        display: none !important;
+    }
 }
\ No newline at end of file